2016网页设计与制作DreamWeaver教案：第二十讲 使用CSS美化网页（二）.docVIP

第二十讲　使用CSS美化网页（二） 授课日期 班级名称 授课地点 教学课题 第二十讲使用CSS美化网页（二） 课时 2学时 教学目的 （1）掌握高级样式的定义方法。 （2）掌握应用CSS滤镜制作文字特效。 （3）掌握样式的编辑方法。 （4）掌握如何使用CSS样式表美化页面。 知识目标 （1）高级样式的定义。 （2）应用CSS滤镜制作文字特效。 （3）样式的编辑。 （4）使用CSS样式表美化页面。 能力目标 利用CSS更好来美化页面 素质目标 培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。 重点 高级样式建立和外部样式的应用 难点 外部样式的应用 课型 讲授型＋操作型 教学方法 边讲、边练、讲练结合 教学手段 多媒体教学 教参 《网页设计与制作教程》 人民邮电出版社 教学环节 及 板书设计 时间安排 (分钟) 1．复习提问 标签样式与类样式有何不同？ 2 2．新课引入 怎样使用CSS样式设置超链接的颜色？ 3 3．项目展示 展示使用CSS样式的网页 5 知识技能目标说明 5 详细讲解各知识点 45 6．问题探讨 怎样使用CSS样式设置网页背景？ 5 课堂实践 15 疑难解析 5 9.课堂小结 通过本讲的学习应该掌握高级样式的建立、应用CSS滤镜制作文字特效、编辑样式、使用范例样式和应用外部样式的方法。 3 作业布置 2 总计 90 新授内容 1．建立高级样式 2．应用CSS滤镜制作文字特效 3．编辑样式 4．使用范例样式 5．应用外部样式 课堂实践 操作要求 （1）打开“课堂实践”网站文件夹“13美化网页”中的网页文档“13.html”。 （2）在该网页的HEAD部分添加以下定义CSS样式的代码。 styletype=text/css !-- .STYLE1{font-family:隶书; font-size:36px;} .STYLE2{font-family:楷体_GB2312; font-size:16px; color:#0000FF;} -- /style 然后在标题文字和介绍文字中分别应用CSS样式STYLE1、STYLE2，代码如下所示。 h1align=centerclass=STYLE1湘江谷/h1 spanclass=STYLE2介绍文字/span 浏览网页13.html，观察其效果。 （3）定义一个名为“mystyle1.css”的CSS样式文件，该样式文件的属性设置与前述的内部样式表相同。 （4）打开“课堂实践”网站文件夹“13美化网页”中的网页文档“13_1.html”，在该网页文档中链接外部样式文件“mystyle1.css”。 浏览网页13_1.html，观察其效果。 疑难解析 问题1：CSS的三种用法在同一个网页文档中可以混用吗？ ???? 答：三种用法可以混用，不会造成混乱。浏览器在显示网页时先检查有没有行内嵌入式CSS，有就执行；其次检查头部的CSS，有就执行；在前两者都没有的情况下再检查外联文件方式的CSS。因此可以看出，三种CSS的执行优先级是：行内嵌入式CSS→内部CSS→外部文件方式。 课外拓 展实践 作业 课后评析 CSS样式弥补了HTML语言的不足，可以实现HTML代码一些无法实现的效果，使用CSS美化页面更加简洁、方便。通过本讲的学习应该掌握高级样式的建立、应用CSS滤镜制作文字特效、编辑样式、使用范例样式和应用外部样式的方法。