动态网页制作(二)

本论文在其他论文栏目，由论文格式网整理,转载请注明来源www.lwgsw.com,更多论文,请点论文格式范文查看
[教学策略]
本章所涉及到的知识点有动态网页、静态网页、动态html、客户端与服务器端，脚本、客户端脚本等；需要掌握的操作有Java代码的插入与css代码应用。为了能到达更好的教学效果，在教学中我立足于教材但不拘泥与教材。我把整章大体分成asp部分的学习、java script部分学习、css部分的学习。每部分的学习是否吸引学生，好的切入点至关重要。学生对什么感兴趣？新奇的、身边的、直接关联的。根据我校学生特点，我选择以博客操作为切入点，以“在线考试系统登陆页面”为研究对象，以“百年恩来”主题站点为素材，在教学中以师生共同发现问题、提出问题、解决问题为学习主线，应用任务教学法与半成品组装法，让学生处在“做中学、学中思、思中做”的状态中，积极主动地完成知识的建构，达成学习目标。
Asp部分的学习，教师演示学生比较熟悉的博客后台发表、修改、删除主题等操作，共同观察博客主页相关主题的变化，让学生之中关联是应用了动态网站技术，在操作博客的同时展示数据库相关记录的变化，让学生理解动态网站一般是基于数据库基础上的。然后在让学生列举其它常见的动态网页技术的应用。由于博客系统中相当比较复杂，单个页面分析比较困难，因此在分析asp工作原理时，我选用了“在线考试系统”，与“百年恩来”站点的首页，让学生比较分发到他们页面的服务器的文件代码与他们自己从ie端获取代码，得出静态网页两边的代码相同而asp文件两边代码不同的想象，然后通过排除法得出代码处理动作发生在服务器端，接着让学生自己分析这种处理是做了什么操作，让学生剖析了asp文件代码的同时，对操作中asp代码与数据库的信息交流过程有所了解，最后教师在把asp的工作步骤分解成小步，让学生根据自己的理解去组装，形成完整的asp的运行过程。最后指出，动态技术的还有同学们常用的搜索引擎，现在把动态html也成为动态网页的重要组成部分。
java script部分的学习，分别展示加了java script效果前后的“百年恩来”网站，成品网站首页加了欢迎来访者的页面效果、状态栏效果，利用js为每个页面加了鼠标特效，这些特效是经过精心选择的，效果比较明晰，代码相对不太复杂。所有代码的应用方法，在相应的的txt文件中都有提示，因此教师只做简单演示，大部分让学生根据层层深入的任务自己去探索，在学生探索的过程中，教师不失时机地引导学生思考，如java script的特点、它是代码是在哪端运行的，代码是否需要编译等。
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工作流程进行排序
服务器收到请求 b）客户看到所需网页 c) 服务器与数据库交互数据完成“翻译” d)在服务器端得到翻译好的代码 e）客户输入网址，发出请求 f）服务器发送翻译好的代码到客户端
师：学到现在，我们对asp有了一定的体验，那究竟什么是asp呢？asp是Active Server Page的缩写，意为“动态服务器页面”。其实它可有多重身份，它是一种动态网站技术，也是一种语言环境，也是一类文件的扩展名。当然动态网页技术还有jsp、PHP等，日常应用中同学们比较熟悉的还有网络搜索等。
任务五：下面我们通过填表，来总结一下动态网页与静态网页特点
生：填表
静态网页动态网页
运行于客户端运行于服务器端
静态网页是实实在在保存在服务器上的文件只有当用户请求时服务器才返回一个完整的网页
没有数据库的支持以数据库技术为基础
每个网页都有一个固定的URL 会随不同客户、不同时间，返回不同的网页
师：动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果采用动态网站技术生成的网页都称为动态网页。随着网络技术的发展，动态网页涵盖的范围在不断扩大，现在动态html也成为动态网页的重要组成部分。那什么是动态html呢？我们下回分解。

（二）javascrip的学习
[课前准备]
用javascrip修饰“百年恩来”网站，成品网站首页加了欢迎来访者的页面效果、利用js为每个页面加了鼠标特效，这些特效是经过精心选择的，效果比较明晰，代码相对不太复杂。
学生开机后，用电子教室软件发送没有修饰的“百年恩来”网站与包含多个文本文件的素材文件夹到学生桌面。
[教学过程]
师：演示加效果前后的“百年恩来”网站，这些动态的效果是如何实现的呢？教师用记事本打开未修饰过的“百年恩来”网站首页，同时打开素材中的“花随着鼠标旋转效果txt”文本文件，拷贝相关代码到指定位置，保存，然后用ie浏览，效果显示出来。
任务一：为首页添加花随着鼠标旋转效果
分层任务：进一步根据提示相应效果代码中的提示，完成在添加状态栏走马灯效果。
师：看来大家都已经会操作了，那这些代码是什么呢？它是javasript代码。代码是通俗的说法，比较专业的说法叫脚本。用来写这些代码的语言就叫脚本语言如javasript语言。这些脚本语言根据针对不同分为服务器端脚本语言和客户端脚本语言。
想一想：回顾一下我们刚才效果的浏览过程，javasript客户端脚本语言还是服务器端脚本语言。
生：客户端
师：对它的脚本可以直接在ie上运行，不需经过服务器编译，可见java script是一面向浏览器的网页脚本语言，比较常见的还有vbsript语言，都是动态html的组成部分。

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