《网页制作》课件-项目八 CSS-设置环保网页样式

Dreamweaver8中文版

网页制作基础项目八 CSS──设置环保网页样式任务一设置页眉CSS样式任务二设置网页主体的CSS样式实训使用CSS设置“一翔环保”网页样式任务三设置页脚的CSS样式

CSS样式表技术是当前网页设计中非常流行的样式定义技术，主要用于控制网页中的元素或者区域的外观格式。使用CSS样式表可以将与外观样式有关的代码内容从网页文档中脱离出来，实现内容与样式的分离，从而使文档清晰简洁，便于日后修改。本项目将以环保网页为例，介绍使用CSS样式控制网页外观的基本方法。在项目中，将按页眉、主体和页脚的顺序进行介绍。

任务一设置页眉CSS样式（一）定义“body”的CSS样式

（二）定义页眉的CSS样式

（一）定义“body”的CSS样式

需要掌握的内容主要有：

1、【CSS样式】面板

2、CSS样式的类别

3、定义标签CSS样式的方法

4、CSS的【类型】属性对话框

5、CSS的【区块】属性对话框

6、CSS的【方框】属性对话框在主菜单中选择【窗口】／【CSS样式】命令，即在【CSS样式】命令前打上“√”，打开【CSS样式】面板。1、【CSS样式】面板在【CSS样式】面板中单击面板底部的（新建）按钮，弹出【新建CSS规则】对话框，根据【选择器类型】的不同，CSS样式被划分为3大类：类（可应用于任何标签）、标签（重新定义特定标签的外观）、高级（ID、伪类选择器等）。2、CSS样式的类别在弹出的【新建CSS规则】对话框的【选择器类型】选项组中，选择【标签（重新定义特定标签的外观）】选项，在【标签】单选按钮的下拉列表中选择要定义的标签类型，然后继续进行操作即可。3、定义标签CSS样式的方法

【类型】属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等，其中包含9种CSS属性，全部是针对网页中的文本的。4、CSS的【类型】属性对话框

CSS中的【区块】属性指的是网页中的文本、图像和层等替代元素，它主要用于控制块中内容的间距、对齐方式和文字缩进等。5、CSS的【区块】属性对话框

【方框】属性包含6种CSS属性。6、CSS的【方框】属性对话框（二）定义页眉的CSS样式

需要掌握的内容主要有：

1、定义高级CSS样式的方法

2、CSS的【背景】属性对话框

3、定义类CSS样式的方法

4、3种选择器各自的特点

在【新建CSS规则】对话框的【选择器类型】中选择【高级（ID、伪类选择器等）】，在【选择器】文本列表框中输入名称，如“TopTable”，然后继续操作下去即可。1、定义高级CSS样式的方法

【背景】分类属性的功能主要是在网页元素后面加入固定的背景颜色或图像。【背景】属性面板中包含以下6种CSS属性。2、CSS的【背景】属性对话框在【新建CSS规则】对话框的【选择器类型】中选择【类（可应用于任何标签）】，在【名称】文本框中输入名称，如“.TopTd1”，然后继续操作下去即可。3、定义类CSS样式的方法

3种选择器各自的特点。•【类】CSS样式用来存放文档中标签的共同属性，网页元素使用该类CSS样式时，需要添加引用。•【标签】CSS样式用来改变或者扩展文档中某些特定的HTML标签的属性。•【高级】CSS样式是改变标签组合、命名ID标签属性最好的方式。4、3种选择器各自的特点任务二设置网页主体的CSS样式（一）设置左侧栏目CSS样式（二）设置右侧栏目的CSS样式（一）设置左侧栏目CSS样式

需要掌握的内容主要有：

1、CSS的【边框】对话框

2、创建超级链接的高级CSS样式1、CSS的【边框】对话框

网页元素边框的效果是在【边框】分类对话框中进行设置的，该属性对话框中共包括3种CSS属性。2、创建超级链接的高级CSS样式

创建基于表格“MidTd1Table”的超级链接高级CSS样式“#MidTd1Tablea:link,#MidTd1Tablea:visited”，设置文本粗细为“粗体”，颜色为“#009933”，修饰效果为“无”。

创建基于表格“MidTd1Table”的超级链接高级CSS样式“#MidTd1Tablea:hover”，设置文本颜色为“#FF0000”，修饰效果为“下划线”。需要掌握的内容主要有：

1、设置单元格ID名称和样式

2、CSS的【列表】对话框

3、CSS的【定位】对话框

4、CSS的【扩展】对话框（二）设置右侧栏目的CSS样式将光标置于单元格内，右键单击文档左下角的“<td>”标签，在弹出的快捷菜单中选择【快速标签编辑器】命令，打开快速标签编辑器，在其中添加代码，如“id=”MidTd2TableTd1””，接着创建高级CSS样式“#MidTd2TableTd1”，然后将光标分别置于其他单元格内，并右键单击文档左下角的“<td>”标签，在弹出的快捷菜单中选择【设置ID】／【MidTd2TableTd1】命令，把样式应用到其他单元格上。1、设置单元格ID名称和样式

【列表】分类用于控制列表内的各项元素，包含3种CSS属性。2、CSS的【列表】对话框

【定位】分类可以使网页元素随处浮动，这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于一些浮动元素（如层）来说，却是有效地、用于精确控制其位置的方法。3、CSS的【定位】对话框

【扩展】分类包含两部分：【分页】的作用是为打印的页面设置分页符；【视觉效果】的作用是为网页中的元素施加特殊效果，其中【光标】选项可以指定在某个元素上要使用的光标形状，【滤镜】选项可以为网页元素施加多种特殊的显示效果，如阴影、模糊、透明、光晕等。4、CSS的【扩展】对话框任务三设置页脚的CSS样式需要掌握的内容主要有：

1、修改CSS样式

2、删除CSS样式

3、应用CSS样式

4、附加样式表

修改CSS样式的方法有3种。①在【CSS样式】面板中双击样式名称，或先选中样式再单击面板底部的（编辑）按钮，或在鼠标右键快捷菜单中选择【编辑】命令打开【CSS规则定义】对话框进行可视化定义或修改；②在【CSS样式】面板中先选中样式名称，然后在【CSS样式】面板的属性列表框中进行定义或修改；③在【CSS样式】面板中用鼠标右键单击样式名称，在其快捷菜单中选择【转到代码】命令，将进入文档中源代码处，可以直接修改源代码。1、修改CSS样式

删除CSS样式的方法也有3种。①在【CSS样式】面板中先选中样式名称再单击面板底部的（删除）按钮进行删除；②在【CSS样式】面板中用鼠标右键单击样式名称，在其快捷菜单中选择【删除】命令；③在【CSS样式】面板中用鼠标右键单击样式名称，在其快捷菜单中选择【转到代码】命令进入文档源代码处，直接删除源代码。2、删除CSS样式

应用CSS样式包括自定义CSS样式的应用和链接外部CSS样式的应用两种方式。在CSS样式中的HTML标签样式和CSS选择器样式是自动应用的，只有自定义的类CSS样式需要手动操作进行应用，应用方式包括通过【属性】面板的【样式】、【类】下拉列表或者在【CSS样式】面板的右键快捷菜单中选择【套用】命令或者在网页元素的右键快捷菜单中选择【CSS样式】中的样式名称。3、应用CSS样式附加样式表通常也有两种方法：①在【CSS样式】面板中单击面板底部的（附加样式表）按钮；②在【CSS样式】面板右键快捷菜单中选择【附加样式表】命令。4、附加样式表实训使用CSS设置“一翔环保”网页样式

本项目主要介绍了使用CSS样式控制网页外观的基本方法，本实训将让读者进一步巩固所学的基本知识。要求