DreamweaverCS3，FlashCS3，FireworksCS3网页制作培训教程第2课 用CSS样式规范网页元素.pptVIP

2.2.2 典型案例——为产品页应用外部样式 案例小结 本案例介绍了如何将文档中的样式导出为外部样式，如何附加外部样式表文件到当前文档及如何应用外部样式等知识。链接样式会在头部标签中生成link href=fa.css rel=stylesheet type=text/css /语句，如果采用导入外部样式的方式，则会生成@import url(fa.css);及对应的样式设置。 2.3 上机练习 2.3.1 设置与应用CSS样式 2.3.2 修改h1、h2和ul标签 2.3.1 设置与应用CSS样式 本练习将修改简介页中的body标签，效果如右图所示，主要对HTML代码中的body标签进行重新定义，添加列表样式和超链接样式。 2.3.1 设置与应用CSS样式 操作思路： 打开“fa.html”文件，另存为“fa2.html”文件。 重设HTML代码中的body标签中的字体为“宋体”、字号为“12”、颜色为“#333333”、行高为“20”、背景颜色为“#D0EAEA”。 添加列表样式和超链接样式。 2.3.2 修改h1、h2和ul标签 下面主要练习h1、h2和ul标签的重新定义，效果如右图所示。 2.3.2 修改h1、h2和ul标签 操作思路： 重设h1标签中的字体为“黑体”、字号为“24”、颜色为“#FFFFFF”。 重设h2标签中的字体为“宋体”、字号为“18”、颜色为“#990000”、粗细为“特粗”。 重设ul标签中的项目符号图像为“dot.gif”。 重设li标签中的字体颜色为“#0066FF”。 Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程 第2课 用CSS样式规范网页元素 本课要点 具体要求 本课导读 上机练习 本课要点 创建CSS样式 应用外部样式表文件 具体要求 掌握CSS样式的创建与应用 熟悉CSS规则定义中各分类的作用 掌握外部样式表文件的创建 掌握附加并应用外部样式表文件的方法 本课导读 在网页设计中为了操作简便，常用CSS样式来控制文本、边框、背景和列表等对象的样式，创建的样式可以反复调用。应用的CSS样式可以嵌入在当前文档的头部标签中，也可导出为外部样式表文件以应用到其他文档中。 2.1 创建CSS样式 CSS指层叠样式表，它是Cascading Style Sheets的缩写。在制作网页时，需要让整个网站的风格统一，如果手动设置每个元素将会非常麻烦，用CSS样式就能快速完成网页元素格式的统一，有利于提高工作效率。 2.1 创建CSS样式 2.1.1 知识讲解 2.1.2 典型案例——在简介页中应用CSS样式 2.1.1 知识讲解 本节将介绍【CSS样式】面板、CSS样式的创建及应用方法。 2.1.1 知识讲解 1. 认识【CSS样式】面板 2. 创建CSS样式 3. 应用CSS样式 1. 认识【CSS样式】面板 选择【窗口】→【CSS样式】命令（或按【Shift+F11】组合键），打开【CSS样式】面板，如右图所示。 2. 创建CSS样式 创建CSS样式的具体操作如下： （1）在【CSS样式】面板中单击 按钮，在打开的【新建CSS规则】对话框中进行相应的设置，如下图所示。 2. 创建CSS样式 2. 创建CSS样式 （2）在【新建CSS规则】对话框中设置完成后，单击【确定】按钮，打开CSS规则定义对话框。或者选中【新建样式表文件】单选按钮，保存样式表文件，打开CSS规则定义对话框，如下图所示。 2. 创建CSS样式 2. 创建CSS样式 （3）在CSS规则定义对话框的【分类】列表框中选择要定义的分类，右侧将显示对应的参数项，进行设置。 （4）设置完成后，单击【确定】按钮，定义的样式显示在【CSS样式】面板中。如果要修改样式，可以单击【CSS样式】面板底部的 按钮，打开CSS规则定义对话框，也可单击 或 按钮，在【属性】列表框中添加或修改样式的属性。 3. 应用CSS样式 CSS样式的应用比较简单，在窗口中选中要应用CSS样式的对象，在对应的【属性】面板的【样式】或【类】下拉列表中选择需要的样式名称即可。 2.1.2 典型案例——在简介页中应用CSS样式 案例目标 本案例将为“fa.html”页面中的文本和链接创建并应用CSS样式，主要练习自定义CSS样式和样式的使用，完成的效果如右图所示。 2.1.2 典型案例——在简介页中应用CSS样式 操作思路： （1）打开“第2课\素材\fa.html”。 （2）分别新建“.tt1”、“.tt2”、“.dot”