div+css网页标准布局实例教程（二）
五、布局页面——头部和导航
有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把logo做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。如果要在logo加上链接的话，那么就不能用背景图片的方法了。
先在header里插入以上两块元素。然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：
搜索产品
接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上，看显示的效果和效果图中的效果是不是一样呢？
#logo { float:left; margin-top:18px;}
#search { float:right; margin-top:30px;}
这两项的位置已经差不多了。预览你会发现，搜索框和按钮跟效果图中的不一样，这是因为我们还没对它设置样式，接下来把文本框增加一个class为inp_srh样式，按钮增加btn_srh的样式，然后定义这两个样式的属性。
#search { float:right; height:24px; margin-top:30px; color:#444;}
.inp_srh { width:140px; height:17px; padding-left:20px; background:url(../images/srh_bg.gif) 0 0 no-repeat; border:1px solid #cbcbcb;} .btn_srh { width:58px; height:23px; background:url(../images/btn_srh.gif) 0 0 no-repeat; border:none; cursor:pointer; text-indent:-999em;}
第1章 Dreamweaver CC快速入门
Dreamweaver已经成为业界最流行的静态网页制作与网站开发工具，其不仅支持“所见即所得”的设计方式，同时还辅以强大的程序开发功能，可以帮助不同层次的用户快速设计网页。 本章帮助用户快速了解Dreamweaver CC版本的新增功能，以及Dreamweaver的工作环境和网站建设等相关内容。
本章学习要点：
了解网站与网页
网站的设计及制作
网页的概念
了解Dreamweaver CC
Dreamweaver工作区
了解文档视图
了解【编码】工具栏
创建网页文档
网页的构成
1.1 了解网站与网页
翱翔在Internet中，会经常听到网站、网页等一些非常陌生的概念。而这些概念在
网页制作过程中，也是需要用户理解的。
1.1.1 认识网页
网页（Web Page）是一个文件，它存放在世界某个角落的某一部计算机中，而这部计算
2 Dreamweaver CC
网页设计与制作标准教程
2 机必须是与互联网相连的。网页经由网址（URL）来识别与存取，是万维网中的一个“页”
面，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。
网页要通过网页浏览器来阅读，如图1-1所示。
图1-1 网页页面
文字与图片是构成一个网页的两个最基本的元素。可以简单地理解为：文字，就是
网页的内容，图片就是网页的美观。除此之外，网页的元素还包括其他内容，常见的网
页元素如下。
“ 文本 文本是网页上最重要的信息载体与交流工具，网页中的主要信息一般都以
文本形式为主。
“ 图像 图像元素在网页中具有提供信息并展示直观形象的作用。其中，静态图像
在页面中可能是光栅图形或矢量图形，如JPEG或PNG。而矢量格式通常包含有
GIF和SVG动画。
“ Flash动画 动画在网页中的作用是有效地吸引访问者更多的注意。
“ 声音 声音是多媒体和视频网页重要的组成部分。
- 1 - FrontPage2003 教程
我们用FrontPage2003的“布局表格和单元格”功能布局网页时，需要通过两部分来完成。首先通过“布局表格”功能来为网页布局创建一个框架，然后通过“布局单元格”功能为该框架填充包含有网页内容（包括文本、图像、Web部件和其他元素）的区域，也就是单元格。
下面我们就以设置一个单位
网站首页为例来了解一下用布局表格给网页布局的过程。
一、创建布局表格
1.创建布局表格
打开一个空白网页，并切换到“设计”视图下，单击“表格”菜单中的“布局表格和单元格”命令，随后在右侧弹出一个任务窗口（图1），在该任务窗口下面程序提供了多种表格布局模板，在此单击其中需要的模板即可将该模板添加到网页中。
2.绘制布局表格
如果你对模板中提供的布局表格不太满意，还可以用手工绘制的方法创建一个布局表格。创建时首先在“新建表格和单元格”项中单击“绘制布局表格”，随后将指针移到操作窗口最下。
3.设置表格属性
插入表格后，还需对表格属性进行设置。在“表格属性”项中设置该表格所需的属性。
提示：在设置表格时，如果要想覆盖网页的默认边距，并让布局表格跨到文档窗口的边缘，可以将表格中的各个边距的属性都设置为0。 - 2 - 在设计框架时经常需要调整某一行或列的属性，这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框，每一侧都会出现显示列宽和行高的标签。每个标签都包括一个下拉箭头，如更改行高度时，单击此下拉箭头弹出一个下拉菜单，选择“更改行高”命令，在弹出的“行属性”对话框中重新输入该行高度值即可。
FrontPage2003还提供了一个表格自动功能，它可以按照比例自动伸缩，调整表格的宽度和高度，使用时在边距标签下拉菜单中选择“自动伸缩”命令即可快速地对表格的尺寸进行调整，非常方便。
二、单元格的添加和设置
1.添加单元格
布局表格创建了网页框架后，还要向表格中添加单元格。添加时单击“新建表格和单元格”项下的“绘制布局单元格”，随后按照绘制表格的方式来绘制单元格。如果我们需要绘制连续的单元格时，单击“绘制布局单元格”后，按住Ctrl键同时拖动鼠标即可。
Dreamweaver使⽤教程
Dreamweaver⽤表格构建完整的页⾯
⼀⽹页顶部（⼀般包括图标、⼴告、导航菜单）
1、创建⼀个1⾏2列，宽为760像素，边框及边距均为0的表格。
2、选中表格，设置排列⽅式为居中对齐，背景⾊为#3366CC。
3、将光标置于左边单元格中，设置其⽔平排列为左对齐，垂直排列为顶端对齐，然后插⼊⼀张图像，⼀般在此插⼊的是⽹站的图标，即logo。
4、将光标置于右边单元格中，设置其宽度为500，⽔平排列为居中对齐，垂直排列为中间，然后插⼊图像，⼀般是⽹页⼴告，即banner。
5、将光标置于刚完成的表格之后，插⼊/表格，创建⼀个1⾏1列，宽为760像素，边框及边距均为0的表格。
6、选中刚创建的表格，设置排列⽅式为居中对齐，背景⾊为#005173。
7、在该表格中依次插⼊多个图像，作为导航条菜单。
⼆⽹页中部（左边栏⽬列表、中间⽹站新闻、右边栏⽬列表）
1、 在导航条表格后⾯，插⼊/表格，创建⼀个1⾏3列，宽为760像素，边框及边距均为0的表格。并设置排列⽅式为居中对齐，背景⾊为#FFFFFFF。
2、 将光标置于左边单元格中，设置其宽度为18%，⽔平排列为居中对齐，垂直排列为顶端对齐，然后插⼊⼀张图像，插⼊⼀个导航条。
3、 将光标置于刚插⼊的图⽚后，插⼊/表格，插⼊⼀个12⾏1列，宽为90%的表格。设置其单元格间距为1，背景⾊为#CCCCCC。
4、 将光标放在表格第⼀个单元中，设置其⾼为20，背景⾊为#FFFFFF。插⼊/图像，插⼊⼀个导航⽂字前⾯的⼩点。同样设置其他11个单元
格，这样左边的栏⽬分类列表就完成了。
5、 将光标置于主体表格的中间单元格中，设置其宽度为66%，⽔平排列为居中对齐，垂直排列为顶端对齐，然后插⼊/图像，插⼊⼀个导航
条。
6、 将光标置于图像后，插⼊/表格，插⼊⼀个4⾏1列，宽为95%的表格。设置其单元格间距为1，背景⾊为#CCCCCC。
