441应用样式表美化网页.docVIP

4.4.1应用美化网页一、教材分析 教材“CSS样式表”这一节是在学生了解了客户端脚本语言的基础上的学习，要求学生了解CSS基本知识、掌握运用CSS进行样式设置的方法和格式。本部分是本章的重点内容。 二、学情分析 学生对主题网站的设计、静态网页的制作有了基本掌握，对动态网页有了一定了解。CSS对学生来说又是一项全新内容，理解和接受上有一定难度，需要通过大量实例帮助学生理解和掌握CSS，进而能够灵活运用CSS。 三、教学策略 课堂中贯彻实例展示、引入新课 —— 明确目标、自主探索 —— 范例展示、精讲释疑 —— 实践探究、反馈巩固 交流评议——小结这条主线。 四、教学目标 1．知识和技能目标 （1）理解什么是CSS样式表; （2）掌握运用CSS进行样式设置的方法和格式; （3）掌握在 HTML 中加入CSS的三种方法。 2．过程和方法目标 培养学生独立思考、动手实践的能力;培养学生自主探究性、协作性学习能力;激发学生学习信息技术的兴趣，培养学生发现美、创造美的能力，提高学生的综合素质。 3．情感态度和价值目标 通过学习运用CSS样式表优化网页制作，让学生学习正确、合理运用技术，了解技术服务于内容的原则。 五、教学重点 在HTML中加入CSS的三种方法。 六、教学难点 CSS 样式设置的方法和格式。 七、教学过程 教学程序 教师活动 学生活动 实例展示 引入新课 展示CSS实例 代码: SPAN style=BACKGROUND-IMAGE: URL(across．gif); WIDTH: 300px DIV style=FILTER: Chroma( Color=#CCCCCC); COLOR: #CCCCCC; BACKGROUND-COLOR: #FFFFFF; WIDTH: 300px; FONT: bold 55pt 宋体 设计在线 /DIV /SPAN 提示学生观察上面代码。 学生观察效果及代码。 思考代码为何能产生观察到的效果。 明确目标 自主探索 今天我们来学习CSS样式表，这是制作动态网页的另一核心技术。 那么，什么是 CCS 样式表呢？学生自学“什么是CSS” : 1．什么是CSS样式表？ 2． 范例展示精讲释疑 由于代码非常枯燥、复杂，所以我们可以先放开代码，从另一个角度进行学习。就是通过菜单进行CSS定义。 演示几种内置样式。 这些样式比较单调没有什么动感，下面我们来学一种动感样式。 演示：通过菜单设置超链接的三种状态下的样式设置。 布置学生进行实践。 展示学生作品，同时点评作品，让学生进行评价。 从修改作品引入代码操作，并指出该方式为内部式样式表。 提出修改大量网页时的困难和烦琐，延伸出外部式样式表。 演示：复制内部式样式表内容――新建一个文本文件――粘贴――保存――改名――在网页中引入外部式样式表。修改外部文件，让学生观察网页变化。 那目前为止我们学习了两种样式表，那还有一种呢？ 1．嵌入式样式表 P style=color:red;font-size:14pt 指出使用CSS的注意事项: 有的比较老的浏览器不支持样式表语法，不会将 style type=text/css 和 /style 之间的文本显示出来，若要避免这种情况的发生，就要加入 ! - - 和 -- 代码。学生观察 学生实践:．试着用CSS来改变“机器人做学玩”网站中浏览器默认的超链接样式，可以用任意一种加入 HTML 的CSS方式。 代码: style !-- a { color: #0000FF; font-size: 9pt; text-decoration: none } a:hover { font-size: 13px; color: #66FFFF; font-style: italic; font-weight: bold } a:visited { color: #999999; font-size: 9pt } -- /style 学生观查老师演示，观察其中的变化，学生相应的操作。 实践探究反馈巩固 小结