第五章.CSS样式表-《网页设计与制作》.ppt

《网页设计与制作》;第五章 CSS 样式表; CSS（Cascading Style Sheet），中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 【本章学习目的】 本章通过多个CSS样式的应用实例，重点介绍了CSS样式表功能、定义CSS规则的方法，应用内嵌式样式表和链接外部样式表的方法等，通过本章的学习，读者应了解CSS样式表的用途，掌握创建和应用CSS样式表的方法，学会用CSS样式表进行网页的美化和网页布局。;5.1 利用CSS 样式表的网页实例;5.1 利用CSS 样式表的网页实例;;5.2 使用CSS样式表;5.2 使用CSS样式表; 1. 创建CSS样式 选择“窗口”菜单｜“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，或选择“文本”菜单｜“CSS样式”｜“新建”命令，弹出“新建CSS规则”对话框. ;5.2.2 在Dreamweaver中定义CSS;5.2.2 在Dreamweaver中定义CSS;定义的位置有以下三种情况： 选择“仅为该文档”，此时CSS样式的代码会嵌套在网页head和/head标签中。 选择“新建样式表文件”，则弹出“保存样式表文件为”对话框，如图5.5所示，选择样式文件的存储路径和文件名，单击“保存”按钮，将CSS样式代码单独存放在一个CSS文件。 选择“已有的某CSS文件”，将新建的CSS规则写入已有的css文件中。 比如：选择定义在“仅对该文档”，单击“确定”按钮后，弹出“H1的CSS规则定义”对话框，如图所示，在对话框中进行各项的格式设置，然后单击“确定”按钮。;;2.编辑和删除CSS样式 创建CSS样式后，如果要修改CSS样式，在“CSS样式”面板中，单击“CSS样式”面板右下角的“编辑”按钮，进入“CSS规则定义”的对话框，可进行修改。 某个CSS样式不再需要时，在“CSS样式”面板中，首先选中某个样式，单击CSS样式面板右下角的“删除”按钮。 ;5.3 CSS 样式的应用 ;;5.3.1 样式表的应用实例1：背景样式 　　　的应用; 5.3.2 样式表的实例应用2：文本及列　　表的应用 ;5.3.3 样式表的实例应3：方框和边框　 样式的应用;5.3.4 样式表的实例应用4：动态链接样式;;2. 调用CSS样式文件 其它网页要应用刚才建立的CSS样式文件，如何调用呢？单击“CSS样式”面板中的“附加样式表”按钮，弹出“链接外部样式表”的对话框，在“文件/URL”文本框中输入外部CSS文件路径和文件名，添加为选择“链接”选项，将新建的样式文件链接到此文件，如图所示。 ;5.3.5 样式的实例5：滤镜效果的应用;;;;;本 章 小 结;本章练习题;上 机 实 训;1. 背景知识 根据本章所学的CSS样式表的知识，再综合前面所学的创建站点及编辑网页的知识，制作精美的网页及应用CSS扩展功能。 2. 实训准备工作 　　实训素材、网页元素及网页样图，发送到学生的主机中，以供学生参考使用。 3.实训要求 利用CSS样式表制作精美的网页，如图所示。 要求：根据给定的素材，首先设置页面属性　其次定义特定 Id的DIV标签的CSS样式，然后插入DIV标签，在DIV中插入内容，最后通过定义类，设置图像CSS样式。 2.在网页中添加CSS扩展效果：滤镜 要求：制作：投影字体、发光字体 、图像的透明效果、图像的波浪效果等，如图所示。 课时安排：2课时;;