按钮。在随着打开的“.list的CSS规则定义”对话框，设置“大小”为“10像素”，“行高”为 “22像素”，“颜色”为深灰色“#666666”。然后在左侧的“分类”列表中选择“区块”，然后在右侧的“文本对齐”下拉列表中选择“左对齐”。在左侧的“分类”列表中选择“方框”，取消选择“边界”区的已经打钩的“全部相同”复选框，就取消了选择样式、宽度和颜色列表区的同值化，然后在“上”编辑框中输入“8”，也就是设置上边界为8像素。最后在左侧的“分类”列表中选择“列表”，然后在右侧的“类型”的下拉列表中选择“圆点”，在“位置”的下拉列表中选择“外”，最后单击“确定”按钮，就会关闭了对话框，完成对“List”的CSS规则定义。
7、再次打开“新建CSS规则”对话框，在“选择器类型”区选择“类”，在“名称”编辑框中输入“top”，在“规则定义”的列表区选择“cl.css”，然后单击“确定”按钮。随着打开了“.top的CSS规则定义”对话框，在左侧的“分类”列表中选择“边框”，点击已经打钩的“全部相同”复选框，就取消选择样式、宽度和颜色列表区的同值化，之后，“上”在样式区的下拉列表中选择“实线”；“上”在宽度区的编辑框中输入“2”，“上”在颜色区的编辑框中设置颜色为蓝色“#5BBCF7”，最后单击“确定”按钮，关闭对话框，完成对“Top”的CSS规则定义。
8、最后次打开“新建CSS规则”对话框，在“选择区类型”区选择“类”，在“名称”的编辑框中输入“linel”，在“规则定义”的列表区选择“c1.css”，然后点击“确定”按钮。随着打开了“．1inel的css规则定义”对话框，在左侧的“分类”列表中选择“边框”，然后“上”在样式区的下拉列表中选择“实线”，“上”在宽度区的编辑框中输入 “2”，“上”在颜色区的编辑框中设置颜色为浅灰色“#EIEIE1”，之后点击“确定”按钮，完成对“1inel”的CSS规则定义。
9、分别保存“index.html”和“c1.css”。
这就完成了对本次设计所需要的所有CSS样式进行定义，如图（4-2）所示：
图（4-2）：CSS样表
16
4.3.2制作首页上部
本次设计的个人网站的首页上部主要包括几张图片，图片都是已经制作完成的了，以下是具体的操作步骤：
1、继续在“index.html”文档中操作。将插入点置于文档编辑窗口，插入一个3行1列，宽1000像素，并且边框粗细、单元格边距和单元格间距等各项都为0的表格，称之为表格1，并且设置表格的对齐方式为“居中对齐”。
2、将插入点置于表格1第一个单元格中，然后点击菜单栏中的插入栏中的“图像”选项，选择本地站点“images”文件夹中的图像“personal_01.jpg”，就会在相应位置插入图像。
3、同理，按照上面的方法，在第2个单元格中分别插入图像“nav-1.jpg”和“nav-2.jpg”、“nav-3.jpg”、“nav-4.jpg”、“nav-5.jpg”、“nav-6.jpg”、“nav-7.jpg”。
4、同理，按照上面的方法，在第3个单元格中插入“images”文件夹中的图像“personal_02.jpg”。
首页的上面部分就制作完毕，效果如图（4-3）所示
图（4-3）：首页上部效果图
4.3.3制作首页中部
本次设计的网站的首页中部主要是一些栏目精华和公告，是由2个大表格中嵌套多个小表格组成的，以下是具体的操作步骤：
1、将插入点置于表格1下方，插入一个2行2列，宽1OOO像素，并且边框粗细、单元格边距和单元格间距等各项都为0的表格，称之为表格2，并设置表格的对齐方式为“居中对齐”。
17
2、将插入点置于表格2第1行第1列的单元格中，在“属性”面板上“宽”和“高” 文本框中分别输入“720”和“10”，然后点击确认键。
3、在表格2第2行第1列单元格中插入一个3行6列，宽720像素，并且边框粗细、单元格边距和单元格间距等各项均为0的表格，称之为表格2-1，并设置表格的其对齐方式为“左对齐”。
4、拖动鼠标，将表格2-1第1行的6个单元格全选，在“属性”面板上点击“合并”按钮，6个单元格就合并成1个了。然后将插入点置于合并后的单元格中，在“属性”面板上“样式”的下拉列表中选择“line”，之后插入图像“personal_03.jpg”。
5、拖动鼠标选中表格2-1第2行的6个单元格，在“属性”面板上“宽”的文本框中输入120，并在“水平”的文本框中选择“居中对齐”，之后分别在各个单元格中插入图像，图像为“11.jpg”和“22.jpg”、 “33.jpg”、 “44.jpg”、 “55.jpg”、 “66.jpg”，并对各个图像应用样式“linel”。
6、将插入点置于表格2-1第2行第1列单元格中，在“属性”面板上“高”文本框中输入“20”，然后按回车键确认。
7、拖动鼠标，全选表格2-1第3行的6个单元格，选择对齐方式为“居中对齐”，然后分别在各个单元格中输入文本，分别是“天坛”和“深圳华侨城”、“三亚”、“九寨沟”、“迪士尼”、“巴黎铁塔”。
8、将插入点置于表格2第2行第2列单元格中，在“属性”面板上“垂直”的下拉列表中选择“顶端”，然后在其中嵌套1个2行l列，宽280像素，并且边框粗细、单元格边距和单元格间距等各项均为0的表格，称之为表格2-2，并设置表格的对齐方式为“左对齐”。
9、对表格2-2第1个单元格应用样式“line”，并在其中插入图像“personal_04.jpg”，在第2个单元格中输入文本，分别是“本人联系方式”和“北京游记”，之后拖动鼠标选择所有文本，并点击鼠标右键，选择“项目列表”，最后在“样式”的下拉列表中选择“list'，对文本应用列表样式。
10、将插入点置于表格2下方，插入一个1行3列，宽1000像素，并且边框粗细、单元格边距和单元格间距等各项均为0的表格，称之为表格3，并设置表格的对齐方式为“左对齐”。
1l、设置表格3的3个单元格宽分别为400像素、320像素和280像素，然后在第1
18
个单元格中插入一个2行1列，宽430像素，并且边框粗细、单元格边距和单元格间距等各项均为0的表格，称之为表格3-1，并设置表格的对齐方式为“左对齐”。
12、对表格3-1的第1个单元格应用样式“line”，并在其中插入图像“personal_05.jpg”，在第2个单元格中输入文本，分别是“北京游记” 和“雅安，加油” 、“小米V5系统”、 “破解电信送的猫”、 “苏宁0元购”、“应聘记”之后设置为项目列表，并对其应用样式“list”。
13、按照上面的方法，对在表格3的第2和第3个单元格，分别嵌套相应的表格并设置相应的内容。
至此，网站首页的中部就算是制作完成，其效果如图（4-4）所示：
图（4-4）：首页中部效果图
4.3.4制作网页下部
相对于首页的中部来说，首页的下部的制作就相当轻松，主要是相关的版权信息，以下就是一些具体步骤：
1、继续在“index .html”文档中操作。将插入点置于表格3下方，插入一个1行1列，宽1000像素，并且边框粗细、单元格边距和单元格间距等各项均为0的表格，称之为表格4，并设置表格的对齐方式为“居中对齐”。
2、将插入点置于表格4中，在“属性”面板上“高”文本框中输入“70”，在“样 式”的下拉列表中选择“top”，并设置背景颜色为淡蓝色“#f9fdff”。
3、在表格4中输入文本，文本为“黄者风范 版权所有”和“Copyright ? 2013 Huang Zhe Feng Fan Limited All Rights Reserved. ”，并设置文本的对齐方式为“居中对齐”。
这就完成了网站首页的下部制作，其效果如图（4-5）所示：
19
图（4-5）：首页下部效果图
4、在菜单栏中的文件栏中，选择“保存”保存网页，或者直接使用快捷键【Ctrl+S】，至此，就完成网站首页的制作，其效果如图（4-6）所示：
图（4-6）：首页效果图
4.4制作网页模板
所谓模板，就是当网站中有许多页面排版相同的情况下，将其定义为网页模板，并定义其中部分区域是可编辑的，部分区域是不可编辑的，这样制作子页的时候就可以省去制作重复部分的操作。本次网站制作的二级子页都风格统一，采用了相同的结构，所以只要将模板做出来，各个子页的制作就是非常轻松。 4.4.1制作模板的样式和上部
1、在Dreamweaver的菜单栏中，选择“文件”>“新建”菜单，随着打开了“新建文档”对话框。
2、在左侧的文档类型列表中选择“空模板”，在右侧的“模板类型”列表中选择“HTML模板”，然后点击“创建”按钮，就创建了模板。
20