动态网页制作

∙动态网页制作
∙本文就教科版网络技术应用(选修)第五章动态网页制作展开分析，本章内容课本分了四小节，以“认识动态网页”“理解动态html”“应用html”“asp脚本应用”为主线，这样的布局安排从整体来看似乎是一气呵成，合理到位，真正落实到教学实践中，效果不尽人，每年学业考试时，这块都是学生惧怕的难点之一。

笔者通过几轮教学，不断改进教学策略，基本攻克了这个“堡垒”。

本文从分析教材开始，首先提出几点商榷之处，然后就给出教学策略及教学实录的框架。

一家之言，难免有不当之处还请见谅。

一、几点商榷
(一) 动态网页的概念的引入
课本中第一节“认识动态网页”是从动态html引入的，编者应当是考虑到与第四章建立主题站点的衔接比较自然。

笔者认为动态网页本质的特点不是由动态html体现的，课本的第一节第二部分“什么是动态网页”中也提到以下观点：“以前的动态主要是强调人机对话，强调动态生成，随着涵盖范围的扩大，动态html才成为动态网页的重要组成部分”。

既然如此，引入部分不妨从动态网页的核心技术入手，一下抓住关键，在学生面前展示一片网页制作的新天地，至于动态html可以放在后面，以一个主题站点或者学生自己在第四章所完成的作品为对象，进行锦上添花式的学习。

(二) 动态网页与数据库的关系的缺失
动态网页最精华的部分就是动态生成与人机交互，这些都离不开数据库的支持，如果不提及动态网页与数据库的关系，学生是不能真正理解动态网页的实质的。

对于数据库，学生并不陌生，在必修第七章第三节“利用数据库管理大量信息”中涉及到，该部分在要求学生理解数据库的组成及各部分之间的关系后，还要求学生尝试了直接面对数据库数据的增、修、删等操作，最后指出了直接对数据库操作的缺点，更好的方法是通过数据库应用系统进行操作。

这些为学生理解动态网页与数据库的关系作了很完备的布垫，因此我们不能错过这样一个“跳一跳就能摘大苹果”的机会。

(三) 动态网页与静态网页之间异同提出的时机与方式
动态网页与静态网页之间异同的比较是对学生本章学习的检验与总结，是本章教学的重点之一。

课本中在引入部分演示完动态html后，马上在第一节的第二部分就进行动态网页与静态网页的区别与联系总结。

试想按照课本的进程，这个阶段学生动态网页核心还没有涉及，更不用说把握动态网页的核心，这是让他们比较全面地得出动态网页与静态网页的异同是不可能的，最后就演变成了教师的灌输，学生的茫然。

因此，笔者认为这部分内
容应当放在asp部分结束或者整章结束，作为检验、总结与回顾，这样，才能起到它应有的作用。

(四) 概念讲解详略不恰当
课本第二节“理解动态html”中，在讲解构成html核心技术时除了“客户端脚本语言”，“层叠样式表”外还讲到“文件目标模块”，对于什么是文件目标模块课本中在侧面作了注释。

在教学过程发现，这块根本没有办法讲，学生对于html语言的了解也仅仅限于几个常用的标签，不可能了解到多少等级关系，说少了学生会以为所有的html都与动态的有关，说多了没有必要，教学时间也不允许，而且在后面的章节中根本就没有涉及这块，根据“说了也不会的内容不如不说”这样的实践策略，在教学中这块是基本跳过的；而课本对于什么是脚本、什么是脚本语言却没有做铺垫，一下就到了什么是客户段脚本语言，比较突兀，让学生摸不着头脑。

在教学实践中这块不光要提到什么是脚本、什么是脚本语言，对于客户端与服务器端也要再进行回顾，因为对于信息技术课程，学生课后基本没有时间投入，因此每部分内容必须适时前后呼应，扫清学生学习过程中的一切可能的障碍。

(五) 认识与应用分开
对于动态html的学习，主要分成JavaScript与CSS每部分，学生在进行每一部分的学习的过程中，比较好的教学方法就是边体验边了解，边应用边掌握，因此没有必要专门开辟一个“应用html”部分，课本中第三节专门列出了“应用html”的部分，不但给人以画蛇添足之嫌，还对前面的学习造成影响。

正因为后面有专门的一节让学生应有，在前面各部分学习时，只能浅尝辄止，学生调动起来的学习热情，探寻愿望，被人为叫停，很是可惜。

二、分析与策略
【学习目标】
1．通过观察，了解数据库在动态网站中的作用。

2．通过实践体验，了解asp的工作流程。

3．能对动态网页与静态网页的优缺点进行比较、分析、总结。

4．通过对JavaScript代码的体验，了解JavaScript的概念。

5．掌握JavaScrip代码的两种应用方式。

6．了解服务器端脚本与客户端脚本的异同。

7．了解CSS样式表的类别，以及不同类别的应用方式，有效范围。

8．能根据实际需要简单应用CSS。

【重点、难点】
1．asp的工作流程、含义。

2．服务器端脚本与客户端脚本的特点。

3．几种样式表的应用方式、有效范围。

【学生分析】
通过必修第六章“信息集成与信息交流”和网络技术应用(选修)第四章“建立主题站点”的学习，学生已经掌握了基本的html语句、体验了静态网站的建立与发布，为本章的学习打下了基础；通过必修第七章“利用数据库管理大量信息”的学习，学生对数据库有了初步理解，为认识动态网站与数据库的关系作了铺垫。

另外，我校的信息课教学是依托网络环境下的教学平台开展的，教学平台中整合了学生博客、论坛、在线考试系统等，学生对教学平台中各系统比较熟悉，在学习过程中，每个学生还创设有自己的博客。

【教学策略】
本章所涉及到的知识点有动态网页、静态网页、动态html、客户端与服务器端，脚本、客户端脚本等；需要掌握的操作有Java代码的插入与CSS代码应用。

为了能到达更好的教学效果，在教学中我立足于教材但不拘泥与教材。

我把整章大体分成asp部分的学习、JavaScript部分学习、css部分的学习。

每部分的学习是否吸引学生，好的切入点至关重要。

学生对什么感兴趣？新奇的、身边的、直接关联的。

根据我校学生特点，我选择以博客操作为切入点，以“在线考试系统登陆页面”为研究对象，以“百年恩来”主题站点为素材，在教学中以师生共同发现问题、提出问题、解决问题为学习主线，应用任务教学法与半成品组装法，让学生处在“做中学、学中思、思中做”的状态中，积极主动地完成知识的建构，达成学习目标。

Asp部分的学习，教师演示学生比较熟悉的博客后台发表、修改、删除主题等操作，共同观察博客主页相关主题的变化，让学生之中关联是应用了动态网站技术，在操作博客的同时展示数据库相关记录的变化，让学生理解动态网站一般是基于数据库基础上的。

然后在让学生列举其它常见的动态网页技术的应用。

由于博客系统中相当比较复杂，单个页面分析比较困难，因此在分析asp工作原理时，我选用了“在线考试系统”，与“百年恩来”
站点的首页，让学生比较分发到他们页面的服务器的文件代码与他们自己从IE端获取代码，得出静态网页两边的代码相同而asp文件两边代码不同的想象，然后通过排除法得出代码处理动作发生在服务器端，接着让学生自己分析这种处理是做了什么操作，让学生剖析了asp文件代码的同时，对操作中asp代码与数据库的信息交流过程有所了解，最后教师在把asp的工作步骤分解成小步，让学生根据自己的理解去组装，形成完整的asp的运行过程。

最后指出，动态技术的还有同学们常用的搜索引擎，现在把动态html也成为动态网页的重要组成部分。

JavaScript部分的学习，分别展示加了JavaScript效果前后的“百年恩来”网站，成品网站首页加了欢迎来访者的页面效果、状态栏效果，利用js为每个页面加了鼠标特效，这些特效是经过精心选择的，效果比较明晰，代码相对不太复杂。

所有代码的应用方法，在相应的的txt文件中都有提示，因此教师只做简单演示，大部分让学生根据层层深入的任务自己去探索，在学生探索的过程中，教师不失时机地引导学生思考，如JavaScript的特点、它是代码是在哪端运行的，代码是否需要编译等。

CSS部分的学习，演示博客的换肤功能，然后通过修改已经外联了样式表“百年恩来”网站中的CSS文件，来实现瞬间换肤功能，让学生对换肤不再神秘，从而激发了他们的学习热情。

然后任务的引领下，通过自主学习与教师的启发相结合，一步一步完成CSS的学习，最后总结。

【教学环境】
网络机房、电子教室、投影仪。

(一) Asp部分的学习
【课前准备】
准备好演示时使用的博客，准备好“在线考试”系统登陆页面和“百年恩来”网站首页以及做好链接的两个站点的Word一个文件，当学生开机后统一分发的他们电脑桌面以便学生分析比较。

【教学过程】
师：在第四章的学习中大家都制作了个人网站，当前还有一种更加快捷的个人网站的创建方式，大家知道是什么？
生：个人博客。

师：对，大家都拥有自己的个人博客，我们一起来回顾一下博客中网页的创建、修改等操作。

教师演示博客后台操作，创建主题、修改主题、删除主题，每次操作完总刷新一下首页与相关主题，让学生看到变化所在，同时同步下载博客数据库，让学生观察每步数据库的中记录的变化，下载数据库并且打开，看起来有些浪费时间，但学生直观地看到数据库的变化，体验到数据库对动态网站支持，因此就教学效果来看，是值得的。

师生共同总结：网站的动态生成是基于对数据库的操作。

师：下面以asp站点为例子，来分析asp的工作原理，由于博客系统比较复杂，我们选择大家比较熟悉的“在线考试系统”登陆界面来做分析。

任务一：登陆“在线考试系统”首页，在IE中打开源程序，同时用记事本打开桌面上教
师分发的“login.asp”文件，比较代码的异同。

任务二：根据老师给的网址登陆“百年恩来”网站首页，然后比较IE中的源程序与教师分发index.htm文件代码的异同。

师：我们大家知道通过在IE中输入网站，来访问网站，IE端就是客户端，发布网站那端就是服务器端，老师发到大家桌面上的文件，就是服务器上相应的源程序，而大家通过IE菜单打开的代码就是其相应的客户端程序代码，大家通过比较有什么发现？
生：“百年恩来”首页的服务器端代码与客户端代码是相同的，而“在线考试系统”首页的服务器端代码与客户端代码是不相同的。

师：说明什么呢？对于静态网页来说，客户端输入网址，服务器端根据网址直接把相应页面代码发到客户端，对于动态网页，是进行了处理了，那这种处理是在服务器端完成还是客户端呢？我们用排除法进行验证。

任务三：右击桌面的login.asp，用IE打开？观察是否正常显示？
生：不能正常显示，显示为源代码。

师：说明asp文件代码是在服务器端运行的，也就是处理过程发生在服务器端。

服务器端是做了怎样的处理呢？
任务四：再次比较登陆“在线考试系统”首页在IE中源程序和桌面login.asp代码，找出不同在什么地方。

生：html代码没有任何变化，但是%…%号中间的内容有变化。

师：同学的观察很仔细，asp文件代码中包括html代码也包括它自己的语言代码，就是%以及其间的内容，这些内容在处理时联通了数据库，对数据库进行了读写等操作，然后把操作后的结果展示出来。

大家这时知道动态网页为什么能“动”了吧。

生：通过对数据库的操作，改变了网页内容。

师：好，我们来理一下asp文件的工作流程。

任务五：把下列选项，按照大家理解的asp工作流程进行排序
(a) 服务器收到请求(b) 客户看到所需网页(c) 服务器与数据库交互数据完成“翻译”
(d) 在服务器端得到翻译好的代码(e) 客户输入网址，发出请求(f) 服务器发送翻译好的代码到客户端
师：学到现在，我们对asp有了一定的体验，那究竟什么是asp呢？asp是Active Server Page的缩写，意为“动态服务器页面”。

其实它可有多重身份，它是一种动态网站技术，也是一种语言环境，也是一类文件的扩展名。

当然动态网页技术还有jsp、PHP等，日常应用中同学们比较熟悉的还有网络搜索等。

师：对它的脚本可以直接在IE上运行，不需经过服务器编译，可见JavaScript是一面向浏览器的网页脚本语言，比较常见的还有vbsript语言，都是动态html的组成部分。

任务二：观察一下JavaScript代码有什么明显特征。

生：代码在<scsrip>与</scsrip>标签中间。

思考：如果多个页面要应用同一个效果，如成品中展示的“欢迎您的光临”效果，我们如何实现？
生：每个页面分别加上“欢迎您的光临”的scsrip代码。

师：同学们说得能实现，只是每个页面分别加那么一串代码不但麻烦而且增大了文件，影响网速。

大家学数学时对于式子中共同的部分，有个操作叫提取公因式，这儿我们也可以借鉴一下，把共同的代码除了<scsrip>标签，提取放到一个文本文件中，以js为扩展名保存。

生：那<scsrip>标签中什么也没有还能行？
师：当然不行，要加调用语句，但不是在标签内部，而是<scsrip>标签内，作为属性，如src=”x.js”，这里js文件与目标文件在同文件夹中，否则还有加上路径。

任务三：为站点的每个页面应用“欢迎您的光临”效果，用js文件
师：这节课我们学习了script相关知识及其应用方式，下面我们总结一下。

(1) JavaScript是一面向浏览器的网页脚本语言，无需经过编译即可在浏览器中运行。

JavaScript是为了控制html页面中的对象，因此必须与html集合起来。

(2) 实现多个页面调用相同JavaScript功能代码的方法是：把相应代码存放在一个扩
展名为js的文本文件中，在需要时调用。

(3) 常见的客户端脚本语言还有vbscript。

(三) 样式表的学习☆ (本部分曾获奖并发表，考虑的到整章教学设计的完整性，附上
精简后的教案)
【课前准备】
利用电子教室软件把半成品站点文件夹分发到学生的桌面上，文件夹内包括如下内容。

∙
∙【教学过程】
师：大家对“换肤”这个词不陌生吧，能否举几个例子呢？
生：博客、论坛、qq空间、qq，一些播放器……
师：知道的不少，看来“换肤”很时兴呀。

大家想不想知道博客是如何“换肤”呢？
生：想！
(广播)打开教师博客，进入后台，展示换肤过程。

师：换肤的过程很简单吧，大家一下就学会了(不要急尝试哟)。

现成的皮肤毕竟缺乏个性，要想独特点，行不行？
生：疑惑中……
师：这是难不到我们的，我们可是学过网页设计的人哟。

但要想实现个性换肤，前提是得破解换肤秘诀，也就是换肤的机理是什么？我们先来做初步分析。

(广播)展示相关皮肤文件(下载)，主模板、分模板文本文件、相关图，还有一个CSS 文件。

师：大家知道这CSS文件有什么用？
生：不知道！
师：博客后台，教师进入主模板(剪下链接代码)更新，首页立刻变了型。

然后教师把刚才剪下的代码粘上，更新一下，就又恢复了正常。

学生：惊叹不已！
师：简单分析外联代码。

神奇的代码！神奇的CSS！为了我们的个性，让我们开始进一步的探秘旅程！
新课
师：html，大家已熟悉，制作静态网页就是基于它。

它与CSS的关系，用一个比方来说明，html是“菜”，CSS是“大厨师”。

CSS根据其应用方式的不同分为外联、内联、嵌入，自定义。

由于博客站点文件是动态网页，分析起来诸多不便。

本节课，我们以“百年恩来”主题站点为载体，来近距离地体验样式表的神奇魔力。

(广播)浏览“百年恩来”半成品站(应用了外联样式)，部分截图如(图一)。

∙
(图一) (图二) (图三)
∙用记事本打开其中名为q.css的文件，把代码中bg1.jpg改为bg.jpg，刷新站点，得图(二)。

师：q.css文件就是外联样式文件，网页应用了外联样式文件，我们就可以通过修改次文件而达到控制全站的目的。

体验外联样式的应用
(准备工作)分发素材——“百年恩来”站点(没有应用样式，截图如图三)，包括现成的Css 文件，四个网页文件，及image和其它(四个以文本形式存放的代码与应用提示)。

操作步骤提示如下：
1．浏览站点文件。

2．复制“外联样式代码”文件中的链接代码，分别粘贴到四个网页文件的head区。

3．看效果。

(学生操作)
帮助文件教学平台上有、相关代码文件中也有，在投影上也同步显示。

讨论环节(发现问题)
师：大家来挑一挑本站的不足。

先讨论，后提问，教师有针对地选择记录
结果如下：
1．字太大，颜色不协调。

2．链接不好看，图去框。

3．周总理图要更突出。

4．单调，效果少。

解决第一个问题
师：第一个问题我带大家分析一下，大家自己就能解决。

(广播)简单分析CSS文件中的代码(对body字号大小、颜色控制的代码有所侧重)。

通过分析降低难度，让学生体验“我能行”。

师：最后一句有些特别，它是什么意思呢？这是一个迷，我将在合适时间为大家揭开谜底。

体验对CSS样式表代码的简单修改
(学生操作)
大屏幕转播某个学生屏幕(不用电子教室，部分学生可能没做好)，请他展示改动的代码及效果。

教师补充与拓展。

解决第二个问题
师：修改了CSS文件相关参数就可以带来全站的改变，换肤的秘密已基本破解。

但全篇一律，又失去了个性，如何让某个页面与众不同？如“百年恩来”网站的主页。

生：思考……
师：内联样式表可以解决我们的难题。

把样式内容放到某个应用的页面内，就可以实现。

(广播)复制“内联样式代码”放入index的head区域，浏览。

生：没有起作用！
师：什么地方出了问题？原来是html不能识别这段代码是CSS样式，要在这段代码前后加上<style></style>才行。

效果究竟如何?这个盖头留给大家来揭！
体验内联样式的应用
(学生操作)学生复制相应文件中的内联系代码，粘到首页head区，并尝试<style>标签的输入。

(大屏幕)转播操作熟练的学生屏幕
跳一跳，摘“优先级”这个苹果。

师：大家有没有发现外联与内联代码中有些问题？(提醒，有没对一个标签，重复定义的)
学生：对于img，内外全定义了。

师：应用时起作用的是哪个？
生：从现象看是内联起来作用。

师：对。

在应用样式时有个规则，就是“就近”。

对于一个标签，外联与内联哪个近？当然是内联了。

解决第三个问题，学习嵌入样式的应用
师：对于同样的标签，要想效果不同，我们这么办？我们如何让总理那幅图与众不同？这就涉及到标签的个性设置了，嵌入式样式能解决这个问题。

(广播)打开名为“嵌入式样式代码”的文本文件，分析一下代码(作了那些控制)，然后把它复制到，首页的周总理照片的img标签后，浏览效果。

(这部分暂不安排学生操作，以便与自定义作比较)
解决第四个问题，自定义样式的学习
师：大家刚才也看到了，设计一个合适的效果要考虑很多方面，如这用一次，是不是有浪费之嫌疑？设想是不是可以像设计一顶漂亮的帽子一样，不为特定的对象(老人、年青人、小孩子)，而是谁想用都可以。

生：……
师：大家是否还记得，在分析外联样式表时，老师有一句没有分析，说这是一个迷，
附：下面以首页为例图示，展示每一次应用的落差。

(一) 没有应用样式(二) 应用外联样式(图片有双线边框及背景变化)
(三) 应用内联样式图片无边框及链接处理) (四) 嵌入样式(总理图)
(五)自定变义样式(链接表格应用了样式)。