第11课 最佳搭档——应用CSS样式与层美化网页 教案

第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 【活动】总结　展示 总结。提交作品、自评任务完成情况 ... ...