《Dreamweaver 8中文版网页制作基础 第2版 教学课件 ppt 作者 王君学 郭亮 项目八 CSS-设置环境保护网页-PPT》由会员分享，可在线阅读，更多相关《Dreamweaver 8中文版网页制作基础 第2版 教学课件 ppt 作者 王君学 郭亮 项目八 CSS-设置环境保护网页-PPT（35页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver 8中文版 网页制作基础,老虎工作室 2012年12月,项目八 CSS设置网页样式,任务一 设置页眉CSS样式,任务二 设置网页主体的CSS样式,实训 使用CSS设置网页样式,任务三 设置页脚的CSS样式,CSS样式表技术是当前网页设计中非常流行的样式定义技术，主要用于控制网页中的元素或者区域的外观格式。使用CSS样式表可以将与外观样式有关的代码内容从网页文档中脱离出来，实现内容与样式的分离，从而使文档清晰简洁，便于日后修改。本项目将以环保网页为例，介绍使用CSS样式控制网页外观的基本方法。在项目中，将按页眉、主体和页脚的顺序进行介绍。,任务一 设置页眉CSS样式,（一）
2、定义“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中的【区块】属性指的是网页中的文本、图像和层等替代元素，它主要用于控制块中内容的间距、对齐方式和文字缩进等。,5、CSS的【区块】属性对话框,【方框】属性包含6种C
4、SS属性。,6、CSS的【方框】属性对话框,（二）定义页眉的CSS样式,需要掌握的内容主要有： 1、定义高级CSS样式的方法 2、CSS的【背景】属性对话框 3、定义类CSS样式的方法 4、3种选择器各自的特点,在【新建CSS规则】对话框的【选择器类型】中选择【高级（ID、伪类选择器等）】，在【选择器】文本列表框中输入名称，如“TopTable”，然后继续操作下去即可。,1、定义高级CSS样式的方法,【背景】分类属性的功能主要是在网页元素后面加入固定的背景颜色或图像。【背景】属性面板中包含以下6种CSS属性。,2、CSS的【背景】属性对话框,在【新建CSS规则】对话框的【选择器类型】中选择【类
5、（可应用于任何标签） 】，在【名称】文本框中输入名称，如“.TopTd1” ，然后继续操作下去即可。,3、定义类CSS样式的方法,3种选择器各自的特点。 【类】CSS样式用来存放文档中标签的共同属性，网页元素使用该类CSS样式时，需要添加引用。 【标签】CSS样式用来改变或者扩展文档中某些特定的HTML标签的属性。 【高级】CSS样式是改变标签组合、命名ID标签属性最好的方式。,4、3种选择器各自的特点,任务二 设置网页主体的CSS样式,（一）设置左侧栏目CSS样式 （二）设置右侧栏目的CSS样式,（一）设置左侧栏目CSS样式,需要掌握的内容主要有： 1、CSS的【边框】对话框 2、创建超级链
6、接的高级CSS样式,1、CSS的【边框】对话框,网页元素边框的效果是在【边框】分类对话框中进行设置的，该属性对话框中共包括3种CSS属性。,2、创建超级链接的高级CSS样式,创建基于表格“MidTd1Table”的超级链接高级CSS样式“#MidTd1Table a:link,#MidTd1Table a:visited”，设置文本粗细为“粗体”，颜色为“#009933”，修饰效果为“无”。,创建基于表格“MidTd1Table”的超级链接高级CSS样式“#MidTd1Table a:hover”，设置文本颜色为“#FF0000”，修饰效果为“下划线”。,需要掌握的内容主要有： 1、设置单元格
7、ID名称和样式 2、CSS的【列表】对话框 3、 CSS的【定位】对话框 4、 CSS的【扩展】对话框,（二）设置右侧栏目的CSS样式,将光标置于单元格内，右键单击文档左下角的“”标签，在弹出的快捷菜单中选择【快速标签编辑器】命令，打开快速标签编辑器，在其中添加代码，如“id=”MidTd2TableTd1”，接着创建高级CSS样式“#MidTd2TableTd1”，然后将光标分别置于其他单元格内，并右键单击文档左下角的“”标签，在弹出的快捷菜单中选择【设置ID】【MidTd2TableTd1】命令，把样式应用到其他单元格上。,1、设置单元格ID名称和样式,【列表】分类用于控制列表内的各项元素
8、，包含3种CSS属性。,2、CSS的【列表】对话框,【定位】分类可以使网页元素随处浮动，这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于一些浮动元素（如层）来说，却是有效地、用于精确控制其位置的方法。,3、 CSS的【定位】对话框,【扩展】分类包含两部分：【分页】的作用是为打印的页面设置分页符；【视觉效果】的作用是为网页中的元素施加特殊效果，其中【光标】选项可以指定在某个元素上要使用的光标形状，【滤镜】选项可以为网页元素施加多种特殊的显示效果，如阴影、模糊、透明、光晕等。,4、 CSS的【扩展】对话框,任务三 设置页脚的CSS样式,需要掌握的内容主要有： 1、修改CSS样式 2、删除
9、CSS样式 3、应用CSS样式 4、附加样式表,修改CSS样式的方法有3种。 在【CSS样式】面板中双击样式名称，或先选中样式再单击面板底部的 （编辑）按钮，或在鼠标右键快捷菜单中选择【编辑】命令打开【CSS规则定义】对话框进行可视化定义或修改； 在【CSS样式】面板中先选中样式名称，然后在【CSS样式】面板的属性列表框中进行定义或修改； 在【CSS样式】面板中用鼠标右键单击样式名称，在其快捷菜单中选择【转到代码】命令，将进入文档中源代码处，可以直接修改源代码。,1、修改CSS样式,删除CSS样式的方法也有3种。 在【CSS样式】面板中先选中样式名称再单击面板底部的 （删除）按钮进行删除； 在
10、【CSS样式】面板中用鼠标右键单击样式名称，在其快捷菜单中选择【删除】命令； 在【CSS样式】面板中用鼠标右键单击样式名称，在其快捷菜单中选择【转到代码】命令进入文档源代码处，直接删除源代码。,2、删除CSS样式,应用CSS样式包括自定义CSS样式的应用和链接外部CSS样式的应用两种方式。在CSS样式中的HTML标签样式和CSS选择器样式是自动应用的，只有自定义的类CSS样式需要手动操作进行应用，应用方式包括通过【属性】面板的【样式】、【类】下拉列表或者在【CSS样式】面板的右键快捷菜单中选择【套用】命令或者在网页元素的右键快捷菜单中选择【CSS样式】中的样式名称。,3、应用CSS样式,附加样
11、式表通常也有两种方法： 在【CSS样式】面板中单击面板底部的 （附加样式表）按钮； 在【CSS样式】面板右键快捷菜单中选择【附加样式表】命令。,4、附加样式表,实训 使用CSS设置网页样式,本项目主要介绍了使用CSS样式控制网页外观的基本方法，本实训将让读者进一步巩固所学的基本知识。 要求：把“项目实训素材”文件夹下的内容复制到站点根文件夹下，然后创建网页并使用CSS设置如图所示网页样式。,制作“送孟浩然之广陵”网页,制作“送孟浩然之广陵”网页,项目小结,本项目通过环保网页着重介绍了使用CSS样式对网页外观进行控制的基本方法，包括CSS样式的创建、设置、编辑、删除等内容。熟练掌握CSS样式的基本操作将会给网页制作带来极大的方便，是需要重点学习和掌握的内容之一。,
