超级“魔术师”

巫雪琴

一、教材分析

《CSS样式表》是高中信息技术选修《网络技术应用》第五章的内容。根据多年教学经验,学生如果没能很好地掌握这部分内容,就容易形成畏惧心理,影响后面的学习。为了让学生学得既轻松又扎实,切实地体验样式表的超凡“魔力”就显得尤为重要。

二、教学目标

知识与技能:体会CSS样式表在网页制作中的功能;初步认识样式表的书写格式及基本含义;会简单应用自定义样式。

过程与方法:掌握CCS的应用方法。

情感、态度与价值观:通过对“百年恩来”站点的美化,感受伟人的人格魅力。

三、教学重点、难点

重点:体会CSS样式表的优点,掌握样式的不同应用方式及其控制范围。

难点:能够分辨嵌入式样式与自定义样式;掌握CSS代码的书写格式。

四、学情分析

学生已经历了站点的制作及发布过程,初步认识HTML基本标签及动态网页的相关概念,了解了客户端脚本语言的特点并学会输入简单的Javascript代码,为CSS的学习做了铺垫。

五、教学过程

1.创设情境,引入新课

师:大家是否为自己的博客“换过皮肤”?据我所知部分同学在新建博客时用过这个功能,下面我为大家演示一下“换肤”的过程。

教师展示博客,进入博客后台换模板,更新。再刷新首页,并浏览分页面。

师:除了博客,“换肤”还应用在哪些地方?

生:论坛、QQ空间、QQ、播放器……

师:如何实现“换肤”呢?

教师打开“皮肤”文件夹,包括主模板与分模板文本文件、图、一个CSS文件。

师:大家知道CSS文件的作用是什么?

生:不知道。

教师进入主模板,剪切链接代码,更新,首页发生变化。之后,教师把刚才剪切下的代码重新粘贴,更新,页面恢复正常。

师:刚才老师剪切下来的这句话,是不是很重要?它的作用是什么呢?这句话是将CSS文件应用到相应的模板中,从而控制页面显示效果。那么,CSS是什么?

2.转入新课

师:相信大家在制作网页时对HTML早已熟悉。随着Internet的发展,HTML排版和界面效果的局限性日益暴露,CSS解决了这个难题。可以说,HTML的Tag定义了网页的内容,而CSS决定网页内容如何显示。CSS有4种方式可以将样式表加入到HTML文件中,分别为外联、内联、嵌入和自定义。

3.第一次任务环节:体验外联样式的应用

师:本节课,我们以“百年恩来”主题站点为载体来体验样式表。

学生实践:浏览“百年恩来”半成品网站(如图1,应用了外联样式),手动操作“换肤”。打开文件夹,用记事本打开名为q.css的文件,把代码中bg1.jpg改为bg.jpg,得图2。q.css就是外联样式文件,先在网站中应用外联样式文件,之后可以通过修改此文件达到控制全站的目的。

师:本环节我们要学习如何应用外联样式。

教师分发半成品站点(如图3,没有应用样式),包括现成的CSS文件、4个网页文件及image和其他素材文件夹(包括外联、内联、嵌入和自定义样式代码与应用提示)。操作步骤如下:

(1)打开index文件,浏览相关网页。

(2)打开名为“外联样式代码”的文件,复制链接代码,粘贴到4个网页文件的head区。

(3)刷新IE,浏览效果。

师:大家来挑一挑当前页面的不足之处。

生:字太大了,颜色不协调;首页链接不好看,周总理的图片更突出些就好了;效果少了。

解决第一个问题,体验对CSS样式表的简单修改。

师:第一个问题大家一定能解决。简单分析CSS文件的内容(对body字号大小、颜色控制的代码侧重点拨)。文件中最后一句有些特别,它是什么意思呢?现在是一个谜,到时候我将为大家揭开谜底。首先请大家自行解决第一个问题。

教师分析CSS文件内容,学生操作,解决第一个问题。教师利用大屏幕转播某个学生的屏幕,请他展示改动的代码及效果,并做最后补充。

设问引入,解决第二个问题。

师:大家已经解决了第一个问题。可以看到,CSS能控制所有应用此样式的页面,这为网站建设带来了方便。但所有的网页样式相同,又失去了个性。如果希望个别页面与众不同,应当怎么办呢?

学生思考。

师:内联样式表可以解决这个难题,这种样式的应用方式只能控制本页面。打开素材包中名为“内联样式代码”的文本文件,复制,然后用记事本打开index文件,把代码粘贴到首页的head区,浏览网页是否有变化?

生:没有。

师:大家想想为什么没变化?原因是HTML不能识别代码。可以在这段代码的首尾分别加上标签。之后会出现什么效果呢?这个盖头留给大家自己来揭!

4.第二次任务环节:体验内联样式表的应用

学生复制相应文件中的内联代码,粘贴到首页head区,并加