第五章 第1--3节.docVIP

第五章　　第　1--3　节 目的要求： （1）了解CSS样式表的用途 （2）掌握CSS样式表的创建和应用 教学内容：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 CSS 样式表 CSS 样式的属性设置和链接样式表CSS 样式中的滤 重点：CSS样式表的创建和应用 难点：CSS样式表中的滤镜属性　　 教学方法： 多媒体教学 手段： 课程讲授为主，学生练习讨论为辅。 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 教学步骤： 引入一个利用CSS样式的网页实例，然后展开理论教学： 如何设置CSS属性；如何将CSS样式应用于网页中。 CSS 样式表 CSS（Cascading Style Sheet），中文译为层叠样式表。用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 页面内嵌法。将样式表代码直接写在HTML标签的head区。 外部链接法。将样式表写在一个独立的后缀名为CSS文件中，在需要应用CSS样式的网页中链接该文件，在页面head和/head之间用以下代码调用。link href=css/master.css rel=stylesheet type=text/css / 在符合web标准的设计中，我们使用外部链接法，好处不言而喻，你可以不修改页面只修改CSS文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么修改一个样式表文件，可以改变所有文件的样式。 2、在Dreamweaver中定义CSS 创建CSS样式 选择器类型有以下三种： 类 自定义 CSS 规则将样式应用于。重定义标签的CSS 选择器定义特定元素组合的格式设置，定义包含特定 id 属性的标签的格式设置。 5、样式的实例5：滤镜效果的应用 CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能集合。由于浏览器IE有着广泛的使用范围，因此CSS滤镜也被广大设计者所喜爱。 CSS滤镜可以为样式控制的对象指定特殊效果。 表5.1　滤镜效果 Alpha—透明效果 Blur—模糊效果 Chroma—将指定的颜色设置成透明 Dropshadow—投影效果 FlipH—进行水平翻转 FlipV－进行垂直翻转 Glow－发光效果 Grayscale－产生灰阶 Invert－反转底片效果 Light－灯光投影 Mask－遮罩 Shadow－阴影效果 Wave－水平与垂直波动效果 Xray－设置X光效果 6、CSS样式进阶：利用CSS＋DIV进行网页布局的实例 利用CSS样式还可以代替表格进行网页布局，本小节讲解如何利用DIV标签和CSS样式的定义进行网页的排版。制作过程如下： 分析架构　　 模块拆分 定义页面属性和定义定 Id 属性的标签 第五章　　第　1---3　节 目的要求： （1）了解CSS样式表的用途 （2）掌握CSS样式表的创建和应用 教学内容： CSS 样式表 CSS 样式的属性设置和链接样式表CSS 样式中的滤重点：CSS样式表的创建和应用 难点：CSS样式表中的滤镜属性　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 教学方法： 上机实训 手段： 学生上机实操为主，教师辅导为辅。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 教学步骤： 引入一个利用CSS样式的网页实例，向学生布置上机任务： 如何将CSS样式应用于网页中？ 上 机 实 训 背景知识 根据本章所学的CSS样式表的知识，再综合前面所学的创建站点及编辑网页的知识，制作精美的网页及应用CSS扩展功能。 实训准备工作 　　实训素材、网页元素及网页样图，发送到学生的主机中，以供学生参考使用。 实训要求 利用CSS样式表制作精美的网页，如图所示。 图 网页效果图 要求：根据给定的素材，首先设置页面属性　其次定义定 Id的标签在网页中添加CSS扩展效果：滤镜 要求：制作：投影字体、发光字体 、图像的透明效果、图像的波浪效果等，如图所示。 课时安排：2课时 实训指导 利用CSS样式表制作精美的网页 步骤1 新建一个本地站点，站点内新建两个子文件夹，images和CSS，将图像素材保存到images文件夹。新建一个网页，保存为index.htm。 步骤2 页面属性的设置：单击“属性”面板中的“页面属性”按钮，在