动态网页制作(三)

本论文在其他论文栏目，由论文格式网整理,转载请注明来源www.lwgsw.com,更多论文,请点论文格式范文查看
任务二：观察一下java script代码有什么明显特征
生：代码在<scsrip>与</scsrip>标签中间
思考：如果多个页面要应用同一个效果，如成品中展示的“欢迎您的光临”效果，我们如何实现？
生：每个页面分别加上“欢迎您的光临”的scsrip代码
师：同学们说得能实现，只是每个页面分别加那么一串代码不但麻烦而且增大了文件，影响网速。大家学数学时对于式子中共同的部分，有个操作叫提取公因式，这儿我们也可以借鉴一下，把共同的代码除了<scsrip>标签，提取放到一个文本文件中，以js为扩展名保存。
生：那<scsrip>标签中什么也没有还能行？
师：当然不行，要加调用语句，但不是在标签内部，而是<scsrip>标签内，作为属性，如src=”x.js”，这里js文件与目标文件在同文件夹中，否则还有加上路径。
任务三：为站点的每个页面应用“欢迎您的光临”效果，用js文件
师：这节课我们学习了script相关知识及其应用方式，下面我们总结一下
java script是一面向浏览器的网页脚本语言，无需经过编译即可在浏览器中运行。Javascritpt是为了控制html页面中的对象，因此必须与html集合起来。
实现多个页面调用相同java script功能代码的方法是：把相应代码存放在一个扩展名为js的文本文件中，在需要时调用。
常见的客户端脚本语言还有vbscript.
（三）样式表的学习☆（本部分曾获奖并发表，考虑的到整章教学设计的完整性，附上精简后的教案）
[课前准备]
利用电子教室软件把半成品站点文件夹分发到学生的桌面上，文件夹内包括如下内容
[教学过程]
师：大家对“换肤”这个词不陌生吧，能否举几个例子呢？
生：博客、论坛、qq空间、qq，一些播放器……
师：知道的不少，看来“换肤”很时兴呀。大家想不想知道博客是如何“换肤”呢？
生：想！
[广播]打开教师博客，进入后台，展示换肤过程。
师：换肤的过程很简单吧，大家一下就学会了（不要急尝试哟）。现成的皮肤毕竟缺乏个性，要想独特点，行不行？
生：疑惑中……
师：这是难不到我们的，我们可是学过网页设计的人哟。但要想实现个性换肤，前提是得破解换肤秘诀，也就是换肤的机理是什么？我们先来做初步分析。
[广播]展示相关皮肤文件（下载），主模板、分模板文本文件、相关图，还有一个Css文件。
师：大家知道这Css文件有什么用？
生：不知道！
师：博客后台，教师进入主模板（剪下链接代码）更新，首页立刻变了型。然后教师把刚才剪下的代码粘上，更新一下，就又恢复了正常。
学生：惊叹不已！
师：简单分析外联代码。
神奇的代码！神奇的Css！为了我们的个性，让我们开始进一步的探秘旅程！
新课
师：Html，大家已熟悉，制作静态网页就是基于它。它与Css的关系，用一个比方来说明， Html是“菜”，Css是“大厨师”。Css根据其应用方式的不同分为外联、内联、嵌入，自定义。由于博客站点文件是动态网页，分析起来诸多不便。本节课，我们以“百年恩来”主题站点为载体，来近距离地体验样式表的神奇魔力。
[广播]浏览“百年恩来”半成品站（应用了外联样式），部分截图如（图一）。

（图一）（图二）（图三）
用记事本打开其中名为q.css的文件，把代码中bg1.jpg改为bg.jpg，刷新站点，得图（二）。
师：q.css文件就是外联样式文件，网页应用了外联样式文件，我们就可以通过修改次文件而达到控制全站的目的。
体验外联样式的应用
[准备工作]分发素材——“百年恩来”站点（没有应用样式，截图如图三），包括现成的Css文件，四个网页文件，及image和其它（四个以文本形式存放的代码与应用提示）。
操作步骤提示如下：
浏览站点文件。
复制“外联样式代码”文件中的链接代码，分别粘贴到四个网页文件的head区。
看效果。
[学生操作]
帮助文件教学平台上有、相关代码文件中也有，在投影上也同步显示。
讨论环节（发现问题）
师：大家来挑一挑本站的不足。[先讨论，后提问，教师有针对地选择记录]
结果如下：
1、字太大，颜色不协调
2、链接不好看，图去框。
3、周总理图要更突出。
4、单调，效果少。
解决第一个问题
师：第一个问题我带大家分析一下，大家自己就能解决。
[广播]简单分析Css文件中的代码（对body字号大小、颜色控制的代码有所侧重）。[通过分析降低难度，让学生体验“我能行”。]
师：最后一句有些特别，它是什么意思呢？这是一个迷，我将在合适时间为大家揭开谜底。
体验对Css样式表代码的简单修改
[学生操作]
大屏幕转播某个学生屏幕（不用电子教室，部分学生可能没做好），请他展示改动的代码及效果。教师补充与拓展。
解决第二个问题
师：修改了Css文件相关参数就可以带来全站的改变，换肤的秘密已基本破解。但全篇一律，又失去了个性，如何让某个页面与众不同？如“百年恩来”网站的主页。
生：思考……
师：内联样式表可以解决我们的难题。把样式内容放到某个应用的页面内，就可以实现。
[广播]复制 “内联样式代码”放入index的head区域，浏览。
生：没有起作用！
师：什么地方出了问题？原来是html不能识别这段代码是Css样式，要在这段代码前后加上<style></style>才行。效果究竟如何?这个盖头留给大家来揭！
体验内联样式的应用
[学生操作]学生复制相应文件中的内联系代码，粘到首页head区，并尝试<style>标签的输入。
[大屏幕]转播操作熟练的学生屏幕。
跳一跳，摘“优先级”这个苹果
师：大家有没有发现外联与内联代码中有些问题？（提醒，有没对一个标签，重复定义的）
学生：对于img，内外全定义了。
师：应用时起作用的是哪个？
生：从现象看是内联起来作用。
师：对。在应用样式时有个规则，就是“就近”。对于一个标签，外联与内联哪个近？当然是内联了。
解决第三个问题，学习嵌入样式的应用
师：对于同样的标签，要想效果不同，我们这么办？我们如何让总理那幅图与众不同？这就涉及到标签的个性设置了，嵌入式样式能解决这个问题。
[广播]打开名为“嵌入式样式代码”的文本文件，分析一下代码(作了那些控制)，然后把它复制到，首页的周总理照片的img标签后，浏览效果。（这部分暂不安排学生操作，以便与自定义作比较）
解决第四个问题，自定义样式的学习
师：大家刚才也看到了，设计一个合适的效果要考虑很多方面，如这用一次，是不是有浪费之嫌疑？设想是不是可以像设计一顶漂亮的帽子一样，不为特定的对象（老人、年青人、小孩子），而是谁想用都可以。
生：……
师：大家是否还记得，在分析外联样式表时，老师有一句没有分析，说这是一个迷，呵，现在我就要为大家揭开谜底了，那就是一个自定义样式。我们现在再来看这句话。
[广播]分析自定义样式格式与特性。
师：下面我们就要戴这顶帽子了。
[广播]教师根据学生的提议，应用自定义样式。（在相应的标答后输入class=xg1，明显的火火焰滤镜效果）
嵌入样式及自定义样式的应用体验
[学生操作]（迫不及待）
问：如果这帽子只有某一页才能用，怎么办？
学生：把这代码放到某一页的内联样式中。
师：对，不错。好，在给大家的素材中还有各种各样漂亮的帽子，大家试着用它给你的网页作进一步的装扮，到时我们要“晒一晒”各自的成果。
[学生操作]加样式、改参数……
[作品评点]利用共享发布（网站的发布，必修已学过）。
[评价量规]样式应用的灵活度、页面整体效果
[连连看环节]
不同插入方式的控制范围、插入代码、插入位置连线。[学生对知识的自我梳理]
[教师总结]
CSS样式表的特点、优先级、功能总结
列表比较
插入方式插入位置控制范围应用代码优点
外联式样式表 <head> 所有链接样式表文件的网页（全站） <link > 可以复用、便于修改、提高网页显示的速度
内联式样式表 <head> 本页面 <style> 实现单个页面的个性
嵌入样式表标签内本标记 Style 实现单个标签的个性
自定义标签内本标记 Class 一次设置，多次使用

附：下面以首页为例图示，展示每一次应用的落差。

（一）没有应用样式                         二）应用外联样式（图片有双线边框及背景变化）

（三）应用内联样式图片无边框及链接处理）     （四）嵌入样式（总理图）

（五）自定变义样式（链接表格应用了样式）

首页上一页 1 2 3 下一页尾页 3/3/3