第11课
最佳搭档——应用CSS样式与层美化网页
教案
教学目标
(一)知识与技能
1、了解样式、样式表和CSS的相关概念。
2、学会如何在网页中应用样式表美化网页。
(二)过程与方法
1、通过自主探究的历程,掌握应用样式表美化网页的过程
2、掌握应用和定义样式表的方法
(三)情感态度价值观
1、体验精美网页的效果,培养学生网页设计的审美能力,激发学生的学习兴趣。
2、通过任务驱动,培养学生的创新能力和自主学习探究的能力。
学情分析
本节课的教学对象为八年级学生,通过前面章节的学习,他们已经学会了创建站点,建立起了一些基本的网页,但是他们只会运用FrontPage2003制作基本的网页。网站缺乏美感,比如网站字体、图片等的设置。学生的思维活跃,有较强的好奇心,因此,在本节课的教学中,让学生在基本完成的网站中应用样式表来美化网站,使网页更有表现力和艺术感染力,激发学生学习的积极性和热情。
重点难点
1、教学重点
(1)掌握应用样式表美化网页的过程与方法。
2、教学难点:
(1)根据实际情况,定义相应的样式表,并将其正确地运用到合适的网页中。
(2)引导学生学会欣赏网页的美感,增强对网站的鉴赏力。理解恰当的样式表可以增强网站的艺术感染力和表现力。
教学课时
1课时
教学过程
教学活动
【导入】
对比修饰前后的网页
打开“低碳生活”素材网站,指出需要进行修饰,使之更生动、鲜活。
Frontpage自带的DHTML,字幕,悬停按钮,背景音乐,flash...
展示修饰好的首页的示例,让学生对比,修饰前后的变化
活动2
【讲授】javascript介绍
对比演示首页HTML代码的不同,让学生了解javascript脚本的魅力和使用方法——客户端使用、执行,可以直接加网页、引用加入网页,以script作为标记。
活动3
【活动】javascript脚本的使用
任务一:打开“特效集锦”文件夹,从鼠标特效\文字特效\图片特效中任选一种javascript脚本,,应用到“低碳生活”的网站首页,使之产生相应的特效。
活动4
【讲授】CSS层叠样式表的概念和使用
进一步提出问题:如何统一网站风格
演示修饰后的网站超链接、文字样式的变化,引出可以控制网站外观风格的CSS。讲解嵌入式样式表、内联式样式表、外联式样式表的格式,演示在网站中加入样式的方法。
活动5
【活动】css样式表练习
任务二:使用内联式CSS样式表为首页中的“创意图片”“热点问题”“友情链接”添加渐变效果。
任务三:使用Frontpage的格式菜单下的样式表链接,添加一个外联式样式表到所有网页,使整个网站的风格统一起来。(外联样式表在CSS文件夹下的外联式样式表文件夹中)
活动6
【活动】总结 展示
总结。提交作品、自评任务完成情况