第7章综合实例1──为“SM”网站主页设置样式.doc

第7章 综合实例1──为“SM”网站主页设置样式 本例将在第6章综合实例2制作好的网页文档“index.html”的基础上，为该网页设置样式，最终效果如图7-2-1所示。 图7-2-1 为“SM”网站主页设置样式最终效果 制作思路 首先为网页文档设置body样式，然后创建类样式并将其应用于选定的文本上，最后创建高级样式，其将自动应用于所有的链接文本。 制作步骤 1. 设置body样式 Step01 启动Dreamweaver 8后，打开“SM”站点中的文档“index.html”。 Step02 打开“CSS样式”面板，单击“新建CSS规则”按钮，打开“新建CSS规则”对话框。 Step03 在“选择器类型”区选择“标签”，在“标签”下拉列表中选择“body”，在“定义在”列表区选择“新建样式表文件”，之后单击“确定”按钮，如图7-2-2所示。 图7-2-2 “新建CSS规则”对话框 Step04 打开“保存样式表文件为”对话框，在“保存在”下拉列表中选择“SM”站点根文件夹，在“文件名”文本框中输入文件名“s1”，单击“保存”按钮，如图7-2-3所示。 图7-2-3 保存样式表文件 Step05 打开“body的CSS规则定义”对话框，在“大小”下拉列表中选择“12”，设置“行高”为20像素，颜色为灰色（#999999），如图7-2-4所示。 图7-2-4 设置类型属性 Step06 在左侧的“分类”列表中选择“方框”，并在“边界”区“上”编辑框中输入“0”，然后单击“确定”按钮关闭对话框，如图7-2-5所示。 图7-2-5 设置区块属性 Step07 完成以上设置后，将文档和样式文件分别保存。 2. 设置类样式 Step01 单击“CSS样式”面板中的“新建CSS规则”按钮，打开“新建CSS规则”对话框。 Step02 在“选择器类型”区选择“类”，在“名称”编辑框中输入“t1”，在“定义在”列表区选择“s1.css”，然后单击“确定”按钮，如图7-2-4所示。 图7-2-4 设置方框属性 Step03 打开“.t1的CSS规则定义”对话框，设置“大小”为“12像素”，“行高”为“24像素”，颜色为深灰色（#666666），如图7-2-5所示。 图7-2-5 设置类型属性 Step04 在左侧的“分类”列表区选择“区块”，并设置“文本对齐”为“左对齐”，如图7-2-6所示。 图7-2-6 设置区块属性 Step05 在左侧的“分类”列表区选择“边框”，取消选择“样式”、“宽度”和“颜色”列表区的“全部相同”复选框，在“下”行的“样式”下拉列表中选择“实践”，“宽度”下拉列表框中输入“1”，颜色为浅灰色“#E7E7E7”，之后单击“确定”按钮，如图7-2-8所示。 图7-2-8 设置边框属性 Step06 拖动鼠标选中要应用样式的文本，在“属性”面板上“样式”下拉列表中选择刚定义的样式“t1”，如图7-2-9所示。 图7-2-9 应用样式 Step07 采取同样的方法，对下面两行文本应用同样的样式。最后分别保存文档和样式文件。 3. 设置链接样式 Step01 单击“CSS样式”面板中的“新建CSS规则”按钮，打开“新建CSS规则”对话 框。 Step02 在“选择器类型”区选择“高级”，在“选择器”下拉列表中选择“a:link”，在“定义在”列表区选择“s1.css”，之后单击“确定”按钮，如图7-2-10所示。 图7-2-10 新建“a:link”样式 Step03 打开“a:link的CSS规则定义”对话框，在“修饰”列表区选择“下划线”复选框，设置颜色为深灰色（#666666），之后单击“确定”按钮，如图7-2-11所示。 图7-2-11 设置“a:link”样式 知识库：由于前面在设置“body”样式时已经设置了“大小”和“行高”，所以此处不再设置，链接文本会自动套用“body”样式中的设置。 Step04 可以看到网页中的链接文本自动套用了刚设置的“a:link”样式，如图7-2-12所示。 图7-2-12 样式效果 Step05 再次打开“新建CSS规则”对话框，在“选择器类型”区选择“高级”，在“选择器”下拉列表中选择“a:visited”，在“定义在”列表区选择“s1.css”，之后单击“确定”按钮，如图7-2-13所示。 图7-2-13 新建“a:visited”样式 Step06 打开“a:visited的CSS规则定义”对话框，在“修饰”列表区选择“无”复选框，设置颜色为灰色（#999999），之后单击“确定”按钮，如图7-2-14所示。 图7-2-14 设置“a:visited”样式 Step07 按照同样的方法分别设置“a:hover”和“a