项目八 css-设置环保网页样式-ppt

《项目八 css-设置环保网页样式-ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、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大类

3、：类（可应用于任何标签）、标签（重新定义特定标签的外观）、高级（ID、伪类选择器等）。2、CSS样式的类别在弹出的【新建CSS规则】对话框的【选择器类型】选项组中，选择【标签（重新定义特定标签的外观）】选项，在【标签】单选按钮的下拉列表中选择要定义的标签类型，然后继续进行操作即可。3、定义标签CSS样式的方法【类型】属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等，其中包含9种CSS属性，全部是针对网页中的文本的。4、CSS的【类型】属性对话框CSS中的【区块】属性指的是网页中的文本、图像和层等替代元素，它主要用于

4、控制块中内容的间距、对齐方式和文字缩进等。5、CSS的【区块】属性对话框【方框】属性包含6种CSS属性。6、CSS的【方框】属性对话框（二）定义页眉的CSS样式需要掌握的内容主要有：1、定义高级CSS样式的方法2、CSS的【背景】属性对话框3、定义类CSS样式的方法4、3种选择器各自的特点在【新建CSS规则】对话框的【选择器类型】中选择【高级（ID、伪类选择器等）】，在【选择器】文本列表框中输入名称，如“TopTable”，然后继续操作下去即可。1、定义高级CSS样式的方法【背景】分类属性的功能主要是在网页元素后面加入固定的背景颜色或图

5、像。【背景】属性面板中包含以下6种CSS属性。2、CSS的【背景】属性对话框在【新建CSS规则】对话框的【选择器类型】中选择【类（可应用于任何标签）】，在【名称】文本框中输入名称，如“.TopTd1”，然后继续操作下去即可。3、定义类CSS样式的方法3种选择器各自的特点。•【类】CSS样式用来存放文档中标签的共同属性，网页元素使用该类CSS样式时，需要添加引用。•【标签】CSS样式用来改变或者扩展文档中某些特定的HTML标签的属性。•【高级】CSS样式是改变标签组合、命名ID标签属性最好的方式。4、3种选择器各自的特点任务二设置网页主体

6、的CSS样式（一）设置左侧栏目CSS样式（二）设置右侧栏目的CSS样式（一）设置左侧栏目CSS样式需要掌握的内容主要有：1、CSS的【边框】对话框2、创建超级链接的高级CSS样式1、CSS的【边框】对话框网页元素边框的效果是在【边框】分类对话框中进行设置的，该属性对话框中共包括3种CSS属性。2、创建超级链接的高级CSS样式创建基于表格“MidTd1Table”的超级链接高级CSS样式“#MidTd1Tablea:link,#MidTd1Tablea:visited”，设置文本粗细为“粗体”，颜色为“#009933”，修饰效果为“无”。

7、创建基于表格“MidTd1Table”的超级链接高级CSS样式“#MidTd1Tablea:hover”，设置文本颜色为“#FF0000”，修饰效果为“下划线”。需要掌握的内容主要有：1、设置单元格ID名称和样式2、CSS的【列表】对话框3、CSS的【定位】对话框4、CSS的【扩展】对话框（二）设置右侧栏目的CSS样式将光标置于单元格内，右键单击文档左下角的“”标签，在弹出的快捷菜单中选择【快速标签编辑器】命令，打开快速标签编辑器，在其中添加代码，如“id=”MidTd2TableTd1””，接着创建高级CSS样式“#MidTd

8、2TableTd1”，然后将光标分别置于其他单元格内，并右键单击文档左下角的“”标签，在弹出的快捷菜单中选择【设置ID】／【MidTd2TableTd1】命令，把样式应用到其他单元格上。1、设置单元