项目八CSS设置环保网页样式PPT.pptVIP

Dreamweaver 8中文版网页制作基础 项目八 CSS──设置环保网页样式 CSS样式表技术是当前网页设计中非常流行的样式定义技术，主要用于控制网页中的元素或者区域的外观格式。使用CSS样式表可以将与外观样式有关的代码内容从网页文档中脱离出来，实现内容与样式的分离，从而使文档清晰简洁，便于日后修改。本项目将以环保网页为例，介绍使用CSS样式控制网页外观的基本方法。在项目中，将按页眉、主体和页脚的顺序进行介绍。 任务一 设置页眉CSS样式 （一）定义“body”的CSS样式 需要掌握的内容主要有： 1、【CSS样式】面板 2、CSS样式的类别 3、定义标签CSS样式的方法 4、CSS的【类型】属性对话框 5、CSS的【区块】属性对话框 6、CSS的【方框】属性对话框 1、【CSS样式】面板 在主菜单中选择【窗口】／【CSS样式】命令，即在【CSS样式】命令前打上“√”，打开【CSS样式】面板。 2、CSS样式的类别 在【CSS样式】面板中单击面板底部的 （新建）按钮，弹出【新建CSS规则】对话框，根据【选择器类型】的不同，CSS样式被划分为3大类：类（可应用于任何标签）、标签（重新定义特定标签的外观）、高级（ID、伪类选择器等）。 3、定义标签CSS样式的方法 在弹出的【新建CSS规则】对话框的【选择器类型】选项组中，选择【标签（重新定义特定标签的外观）】选项，在【标签】单选按钮的下拉列表中选择要定义的标签类型，然后继续进行操作即可。 4、CSS的【类型】属性对话框 【类型】属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等，其中包含9种CSS属性，全部是针对网页中的文本的。 5、CSS的【区块】属性对话框 CSS中的【区块】属性指的是网页中的文本、图像和层等替代元素，它主要用于控制块中内容的间距、对齐方式和文字缩进等。 6、CSS的【方框】属性对话框 【方框】属性包含6种CSS属性。 （二）定义页眉的CSS样式 需要掌握的内容主要有： 1、定义高级CSS样式的方法 2、CSS的【背景】属性对话框 3、定义类CSS样式的方法 4、3种选择器各自的特点 1、定义高级CSS样式的方法 在【新建CSS规则】对话框的【选择器类型】中选择【高级（ID、伪类选择器等）】，在【选择器】文本列表框中输入名称，如“TopTable”，然后继续操作下去即可。 2、CSS的【背景】属性对话框 【背景】分类属性的功能主要是在网页元素后面加入固定的背景颜色或图像。【背景】属性面板中包含以下6种CSS属性。 3、定义类CSS样式的方法 在【新建CSS规则】对话框的【选择器类型】中选择【类（可应用于任何标签） 】，在【名称】文本框中输入名称，如“.TopTd1” ，然后继续操作下去即可。 4、3种选择器各自的特点 3种选择器各自的特点。 ?【类】CSS样式用来存放文档中标签的共同属性，网页元素使用该类CSS样式时，需要添加引用。 ?【标签】CSS样式用来改变或者扩展文档中某些特定的HTML标签的属性。 ?【高级】CSS样式是改变标签组合、命名ID标签属性最好的方式。 任务二 设置网页主体的CSS样式 （一）设置左侧栏目CSS样式 （二）设置右侧栏目的CSS样式 （一）设置左侧栏目CSS样式 1、CSS的【边框】对话框 2、创建超级链接的高级CSS样式 （二）设置右侧栏目的CSS样式 需要掌握的内容主要有： 1、设置单元格ID名称和样式 2、CSS的【列表】对话框 3、 CSS的【定位】对话框 4、 CSS的【扩展】对话框 1、设置单元格ID名称和样式 将光标置于单元格内，右键单击文档左下角的“td”标签，在弹出的快捷菜单中选择【快速标签编辑器】命令，打开快速标签编辑器，在其中添加代码，如“id=”MidTd2TableTd1””，接着创建高级CSS样式“#MidTd2TableTd1”，然后将光标分别置于其他单元格内，并右键单击文档左下角的“td”标签，在弹出的快捷菜单中选择【设置ID】／【MidTd2TableTd1】命令，把样式应用到其