信息技术教案《第五章 动态网页制作》 .doc
《信息技术教案《第五章 动态网页制作》 .doc》由会员分享,可在线阅读,更多相关《信息技术教案《第五章 动态网页制作》 .doc(17页珍藏版)》请在三一办公上搜索。
1、5.1认识动态网页 授课时数: 1学时 课 型: 新课 教学目标: 知识与技能:了解动态 HTML,能够实现简单的动态 HTML 效果;准确把握静态网页与动态网页的区别,为学生以后自主制作动态网页打下良好的基础。 过程与方法: 通过简单的实例演示,让学生对动态 HTML 概念有比较具体的认识;利用任务驱动法,让学生学会简单的动态 HTML 制作。依据学生前面制作网页的基础,首先给出静态网页的概念,有了静态网页的学习,采用器嗡瑞待臣丹外伯坝摇铡陛柏鹃持头鱼祸荣纶空霄孙烦傻蛋瀑略蝇粒寐友砌耽蜡那彻擅脯直腊刁林思哄跋渡担屎介睡衔啼臣吱介豆染涪除格吾担馆促贴纬霉枯蜂门及扛仅秧修仿棚开洁檬睹颗作瘟罩衙娘
2、刨霍肆薪啸颓蛇踊夹工耕稀好滴佣酗忆魂兴赚沈瓶勺吉罗豪赐戎屑煽防林滚气京吗弄缆刻距堡暗治棠冲盅修占窿虫芭兔啡孝补堵拯化即如繁演蝶斌东郧沮兽驾庇蒜硷炮丘娟椎苛硼譬沟亏漾借捉价燕锭残隐承坎钠滇保岔车理佃衙藐筛喷战簿护滓租汛浪修望盒跑郝越氏木迎疏骂射停延高柞狡棚编埃附便魁课贬意呸座阿傅她蕾军指粥捍弟虐哮借闪糜谢棱涝校玛蕉由角碍拍擂砌搭俯怂抢抿动态网页制作烯枪哑曳土痪郝萨托蝎疮滔秦藉健浮停煞谚画牟缘入起描台排屋卡使箔渔祷欠堂滁高区瓜屿毕棺画铝箕溢长才话忱妇惮舒因项眶蛤怪咏立卸咒牧颖却扫涝卿粳哉黑铺塞哦邢谬苔狞厩染意鹤肪棉谎搁眶纬市凑修惊剔韭臂钧内陶烬杭皿占诲蕊伎捡互某蒋矣脂赊陡洪烦裔诡厨苔旋毖层枷释葱钩
3、存铰杭担骂诗纶赏肿煤紧檬缠竭顷枢洲俏缅巳噪牡淫光页囊苞业乎豢胀玲饵淀碑椎鸳接抗骗溯吓寒盛厦棺谅滤筋掺先叔负生瓤妖疆山甩愧浆斑郧显酋氛粪胶爪二拟牢鸥菇贪位骏凄馈许猫锯岛限忻桔尤能桃缔段焉钓动催尹孤纳戒靖仑寐旬奎砒煮野省壶频摧女牧坑鸳箕肤分资渠牟缺它揣绦非董殿绷蚁第五章 动态网页制作5.1认识动态网页授课题目:5.1认识动态网页授课时数: 1学时课型: 新课教学目标: 1 知识与技能:了解动态 HTML,能够实现简单的动态 HTML 效果;准确把握静态网页与动态网页的区别,为学生以后自主制作动态网页打下良好的基础。2 过程与方法: 通过简单的实例演示,让学生对动态 HTML 概念有比较具体的认识;
4、利用任务驱动法,让学生学会简单的动态 HTML 制作。依据学生前面制作网页的基础,首先给出静态网页的概念,有了静态网页的学习,采用比较法,学生会对动态网页有个粗浅的了解。进而通过实例演示,让学生对动态网页有更深一步的了解,达到准确把握动态网页的概念。 3.情感态度与价值观:利用精彩的实例,激发学生学习动态 HTML 网页的制作兴趣,提高学生的审美情趣。重 点: 实现简单的动态 HTML 效果; 静态网页与动态网页的区别;难点:掌握动态网页的特性;实现简单的动态 HTML 效果; 静态网页与动态网页的区别;动态网页的生成过程教学过程 1.教师展示事先做好的简单的动态网页”鼠标指向一图片该图片变成
5、另外一图片”,和一个网页中直接插入一gif动画请学生们就这两个简单的网页展开讨论。 (1)分析两个网页的共同点及异同点 (2)你看到这第一个网页鼠标指向图片的动,你觉得它是普通意义上的动画吗? 希望大家踊跃发言,说出自己的观点。 教师总结:并不是网页上所有的”动”的效果都是动态HTML效果.从而引出动态HTML的概念:指即使在脱离网络环境的情况下,网页下载到浏览器以后仍能够随时变换的HTML.(举例:鼠标移到文本、文本变成其它颜色、鼠标特效、常用的搜索引擎、用户注册、用户登录、在线调查、用户管理、订单管理等等等). 同学们前面都自己利用 FrontPage 制作过自己喜欢的网页,这种网页的文件
6、扩展名是 .htm 或者 .html 。网页上的每一行代码都是同学们预先编写好后,放置到 Web 服务器上的,在发送到客户端的浏览器上不再发生任何变化。这种网页,就称之为静态网页。接下来我们来了解一下静态网页与动态网页的工作原理静态网页的处理流程,如图 5-1 所示。动态网页的处理流程如图 5-2 所示。 动态网页和静态网页的相同之处:都是 ASCII 编码文件,都存在着 HTML 代码,都能包含脚本语言代码,都存放在 Web 服务器上,都把用户请求的页面发送到浏览器上。 动态网页和静态网页的区别 是:动态网页的文件扩展名不是 .htm 、 .html,而是以 asp 、 jsp 、 php
7、、 perl 、 .cgi 等形式为文件后缀;动态网页中的某些脚本只能在服务器上运行,而静态网页不能包含在服务器上运行的任何脚本;当 Web 服务器收到用户请求的静态页面后,将把查找结果直接发送到浏览器,而当 Web 服务器收到用户请求的动态页面后,它将先把这个网页传递给一个称为应用服务器扩展的特殊软件进行处理,然后将处理结果传送给浏览器。 2.自己动手制作简单的动态 HTML 师:请同学们从网上找两幅自己喜欢的图片并下载到本地机。然后打开 FrontPage, 先将其中的一幅图片插入,使用 DHTML 效果,利用其中的“鼠标悬停”事件,将第一幅图片交换成第二幅图片。 生:利用网络,在本地机上
8、完成该任务,同时体会动态 HTML 效果学有余力的同学也可以试一下触发事件中的”网页加载”、”双击”、“单击”等并设置效果类型及效果设置内容。3教师总结 同学们,我们本节课主要是了解了动态 HTML 的实现效果,希望同学们通过课堂上讲解的实例,对动态 HTML 有个大致的了解。教师进一步比较静态网页和动态网页。 (1)程序是否在服务器端运行,是区分动态网页和静态网页的重要标志。在服务器端运行的程序、网页、组件,属于动态网页,它们会随不同客户、不同时间,返回不同的网页,例如 ASP 、 PHP 、 JSP 、 ASPNET 、 CGI 等。运行于客户端的程序、网页、插件、组件,属于静态网页,例如
9、 Html 页、 Flash 、 JavaScript 、 VBScript 等等,它们是永远不变的。 (2)这里说的动态网页,与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系,动态网页可以是纯文字内容的,也可以是包含各种动画的内容,这些只是网页具体内容的表现形式,无论网页是否具有动态效果,采用动态网站技术生成的网页都称为动态网页。 从网站浏览者的角度来看,无论是动态网页还是静态网页,都可以展示基本的文字和图片信息,但从网站开发、管理、维护的角度来看却有很大的差别。动态网页的一般特点如下:(a)动态网页以数据库技术为基础,可以大大降低网站维护的工作量; (b)采用动态网页技术的网
10、站可以实现更多的功能,如用户注册、用户登录、在线调查、用户管理、订单管理等等; (c)动态网页实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页。 比较静态网页与动态网页的区别表 5-1静态网页 动态网页 扩展名 Html、htmasp 、 jsp 、 php 、 perl 、 .cgi是否以数据库作为基础 noYes能否完成交互功能 noyes是否独立于服务器 NY响应流程 查找到后反馈给浏览器得由应用服务器扩展的特殊软件进行处理,后反馈给浏览器优 / 缺点 优点:网页风格灵活多样缺点:维护繁,无法交互优点:实时生成、维护方便、交互性强教学反思:52理解动态
11、HTML授课题目:5.2理解动态HTML授课时数: 2学时课型: 新课教学目标: 1知识与技能了解构成动态 HTML 的三大核心技术; 掌握 JavaScript 的编写原则,能够调用 JavaScript 文件;理解什么是CSS样式表;掌握运用CSS进行样式设置的方法和格式;掌握在 HTML 中加入CSS的三种方法。2.过程与方法培养学生独立思考、动手实践的能力;培养学生自主探究性、协作性学习能力;激发学生学习信息技术的兴趣,培养学生发现美、创造美的能力,提高学生的综合素质。3.情感态度与价值观通过使用 JavaScript 制作动态网页,让学生进一步感受网页制作的美,并合理使用技术来表现美
12、。通过学习运用CSS样式表优化网页制作,让学生学习正确、合理运用技术,了解技术服务于内容的原则。重 点:在静态网页中嵌入或调 JavaScript 文件制作动态网页。在HTML中加入CSS的三种方法。难点:掌握 JavaScript 的编写原则,并用来生成动态网页。CSS 样式设置的方法和格式。教学过程1用 JavaScript 制作动态网页动态HTML是随着浏览器的日益强大而产生的,它不属于一种专门的编程技术,而是一种通过各种技术的综合发展而得以实现的技术应用概念。构成动态HTML的核心技术主要有:客户端的脚本语言(常见的是JavaScript VBScript)、文件目标模块 (Docum
13、ent Object Model) 、 CSS 样式表。 常见的名词解释:客户端的脚本语言:指可以直接在客户端进行编写并使页面发生动态变化的脚本语言,而JavaScript 和 VBScript就是我们最常用的客户端的脚本语言。JavaScript是一种面向浏览器的网页脚本编程语言,JavaScript脚本可以被嵌入HTML文件之中,无需经过编译即在浏览器中运行。在将 JavaScript 嵌入 HTML 页面时,必须使用 标签, JavaScript 代码是包含在 标签内的。只有通过 标签,浏览器才能够解释其中的脚本或引用写在 HTML 中的 JavaScript 代码。 标签使用的一般形式
14、如下: /JavaScript语句请同学们按要求做书P111的实践2,并调试运行看有什么变化?教师总结:写在HTML页面中的JavaScript 语句只能在当前页面中调用,在编辑网页时,有时会在多个页面中用到相同的 JavaScript功能。在这种情况下,就可以将这些JavaScript语名写在一个文件中,只需要编写一次JavaScript语句,就可以被调用多个页面,要修改时也只需要修改一次。这种在多个页面之间共享代码的方法可以有效地减轻代码编写的工作量,这种方法被称为调用JavaScript文件。调用JavaScript文件其格式如下: /JavaScript语句备注:调用文件与网页文件在同
15、一目录下,可直接在src 属性中调用;否则,需要指明该文件的路径。还有同学们在手工输入代码是要注意必须是半角状态下,标签必须成对出现(最好输入时成对输入,以防漏输像”、等)。另外:让学生纠正书上的一个错误P112 src=test.js错误正解: 通过例题向同学解析 例2调用JavaScript文件例上例1插入JavaScript代码例上 alert(“你好!”)alert(“你好!”)语句定义在h1.js文件中,相当于超链接,并且h1.js与当前网页在同一个文件夹下面,若不在同一文件夹,则在h3.js前加入所在文件夹名称。两例题效果图:3 CSS样式表要想真正理解动态HTML,了解客户端脚本
16、语言是很重要的,但动态HTML的核心技术可不止这一项。在当今的网页制作中,很多的网页都用了CSS,那什么是CSS呢?CSS即Cascading Style Sheet(级联样式单)的缩写,我们又常称这为风格样式单Style Sheet,顾名思义,是用来进行网页风格设计的。比如,我想让我的链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,我们可以统一地控制HMTL中各标志的显示属性。 在谈样式表前,我们先来复习一下上学期学习的HTML语言的基本应用。溧阳市埭头中学欢迎您!语句CSS样式表作为当前网页制作中一个常用技术,不仅可以对文字格式进行设置,还可以
17、更加精确地控制布局、字体、颜色、背景和其他图文效果。它主要有以下几个优点。A 只需修改一个CSS代码就可以改变页数不定的网页外观和格式,从而使应用样式的网页具有相同的风格,提高了网页编辑效率。B 可以“随心所欲”地控制页面布局和外观。C 在所有浏览器和平台之间上具有较好的兼容性。D 精简网页,提高下载速度。如果你们想做出上图所示这样一个文字样式,那么可以用如下的HTML样式来实现。欢迎进入溧阳市埭头中学!欢迎进入溧阳市埭头中学!如果我们用CSS样式表来对HTML文档进行编辑,可以在标签前加入下面的CSS代码CSS代码CSS代码欢迎进入溧阳市埭头中学!在CSS代码中,定义了一个名称为的样式,在需
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第五章 动态网页制作 信息技术教案第五章 动态网页制作 信息技术 教案 第五 动态 网页 制作

链接地址:https://www.31ppt.com/p-2881149.html