Download
1 / 9
90 likes | 260 Views
《 网页设计与制作 》 教学课件. 项目六：使用 CSS 控制页面元素. 任务五： 使用 CSS 滤镜产生绚丽效果. （一）教学目标. 一、了解 CSS 滤镜. 教学目标. 二、了解层的概念. 三、掌握在网页设计中使用 CSS 滤镜和层的方法. （二）相关知识. 1.CSS 滤镜 2. 滤镜类型及其参数 3. 层图层的概念及使用方法. （三）学习重点. 1. 熟悉 CSS 滤镜各种类型及其参数，能在网页制作中熟练应用 2. 了解层在网页设计中的作用及其使用方法. （四）新课教学.
E N D
项目六：使用CSS控制页面元素 任务五： 使用CSS滤镜产生绚丽效果
（一）教学目标 一、了解CSS滤镜 教学目标 二、了解层的概念 三、掌握在网页设计中使用CSS滤镜和层的方法
（二）相关知识 1.CSS滤镜 2.滤镜类型及其参数 3.层图层的概念及使用方法
（三）学习重点 1.熟悉CSS滤镜各种类型及其参数，能在网页制作中熟练应用 2.了解层在网页设计中的作用及其使用方法
（四）新课教学 1.新建站点，将project06文件夹下task05文件夹，复制到本地磁盘下站点目录project06中，在Dreamweaver CS3软件中打开网页文件index.html，进行下列操作：新建一个CSS规则，进入【新建CSS规则】对话框，在“定义在”区域中，选择【mycss.css】，在“选择器类型”区域中，则选择【类】，在“名称”框中输入类名“biaoti”，单击“确定”，进入【CSS规则定义】对话框。 2.选择【类型】选项卡，设置字体为“黑体”，大小为“20像素”，颜色为“浅绿色”（#33cc00）。 3.选择【扩展】选项卡，在【过滤器】中设置使用滤镜“DroShadow”，并设置其各项参数分别为“Color=#666666，在OffX=2，OffY=2，positive=1”，单击“确定”。 4.选中网页上端标题所在的表格。 5.在【属性】面板中，选择“样式”下拉框，将“biaoti“样式应用至所选钮的表格上去。
（四）新课教学 6.浏览网页，会发现标题文字变为带阴影的文字了。 7.新建一个CSS规则，进入【新建CSS规则】对话框，在“定义在”区域中，选择【mycss.css】，在“选择器类型”区域中，则选择【类】，在名称对话框中输入类名“mybanner”，单击“确定”，进入【CSS规则定义】对话框。 8.选择【类型】选项卡，设置字体为“华文琥珀”，大小为“72像素”，颜色为“鲜绿色（#009900）”。 9.选择【扩展】选项卡，在【过滤器】中设置使用“滤镜Glow”，并设置其各项参数分别为“Color=#ce0b2b，Strength=15”，单击“确定” 10.选中网页顶端大标题所在的表格。 11.在【属性】面板中，选择“样式”下拉框，将“mybanner”样式应用至所选的表格上去。 12.浏览网页，会发现banner中的大标题文字变为发光文字了。
（四）新课教学 效果图如下：
（五）课后小结 通过该项目的学习，学生认识了CSS，并且能自己动手利用CSS美化网页内容，应该鼓励学生多做练习，除了巩固CSS的知识点，也为后面学习CSS+DIV布局做好基础。
