【Jsp精品源码栏目提醒】:以下是网学会员为您推荐的Jsp精品源码-动态网页制作 计算机文档 - 计算机教材,希望本篇文章对您学习有所帮助。
信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 1 第五章 动态网页制作 5.1认识动态网页 授课题目:§5.1认识动态网页 授课时数: 1学时 课 型: 新课 教学目标 1 知识与技能:了解动态 HTML能够实现简单的动态 HTML 效果准确把握静态网页与动态网页的区别为学生以后自主制作动态网页打下良好的基础。
2 过程与方法: 通过简单的实例演示让学生对动态 HTML 概念有比较具体的认识利用任务驱动法让学生学会简单的动态 HTML 制作。
依据学生前面制作网页的基础首先给出静态网页的概念有了静态网页的学习采用比较法学生会对动态网页有个粗浅的了解。
进而通过实例演示让学生对动态网页有更深一步的了解达到准确把握动态网页的概念。
3.情感态度与价值观利用精彩的实例激发学生学习动态 HTML 网页的制作兴趣提高学生的审美情趣。
重 点 实现简单的动态 HTML 效果 静态网页与动态网页的区别 难 点掌握动态网页的特性实现简单的动态 HTML 效果 静态网页与动态网页的区别动态网页的生成过程 教学过程 1.教师展示事先做好的简单的动态网页”鼠标指向一图片该图片变成另外一图片”和一个网页中直接插入一gif动画 请学生们就这两个简单的网页展开讨论。
1分析两个网页的共同点及异同点 2你看到这第一个网页鼠标指向图片的动你觉得它是普通意义上的动画吗 希望大家踊跃发言说出自己的观点。
教师总结:并不是网页上所有的”动”的效果都是动态HTML效果. 从而引出动态HTML的概念:指即使在脱离网络环境的情况下网页下载到浏览器以后仍能够随时变换的HTML.举例:鼠标移到文本、文本变成其它颜色、鼠标特效、常用的搜索引擎、用户注册、用户登录、在线调查、用户管理、订单管理等等等. 同学们前面都自己利用 FrontPage 制作过自己喜欢的网页这种网页的文件扩展名是 .htm 或者 .html 。
网页上的每一行代码都是同学们预先编写好后放置到 Web 服务器上的在发送到客户端的浏览器上不再发生任何变化。
这种网页就称之为静态网页。
接下来我们来了解一下静态网页与动态网页的工作原理 静态网页的处理流程如图 5-1 所示。
信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 2 动态网页的处理流程如图 5-2 所示。
动态网页和静态网页的相同之处都是 ASCII 编码文件都存在着 HTML 代码都能包含脚本语言代码都存放在 Web 服务器上都把用户请求的页面发送到浏览器上。
动态网页和静态网页的区别 是动态网页的文件扩展名不是 .htm 、 .html而是以 asp 、
jsp 、 php 、 perl 、 .cgi 等形式为文件后缀动态网页中的某些脚本只能在服务器上运行而静态网页不能包含在服务器上运行的任何脚本当 Web 服务器收到用户请求的静态页面后将把查找结果直接发送到浏览器而当 Web 服务器收到用户请求的动态页面后它将先把这个网页传递给一个称为应用服务器扩展的特殊软件进行处理然后将处理结果传送给浏览器。
2.自己动手制作简单的动态 HTML 师请同学们从网上找两幅自己喜欢的图片并下载到本地机。
然后打开 FrontPage 先将其中的一幅图片插入使用 DHTML 效果利用其中的“鼠标悬停”事件将第一幅图片交换成第二幅图片。
生利用网络在本地机上完成该任务同时体会动态 HTML 效果 学有余力的同学也可以试一下触发事件中的”网页加载”、”双击”、“单击”等并设置效果类型及信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 3 效果设置内容。
3教师总结 同学们我们本节课主要是了解了动态 HTML 的实现效果希望同学们通过课堂上讲解的实例对动态 HTML 有个大致的了解。
教师进一步比较静态网页和动态网页。
1程序是否在服务器端运行是区分动态网页和静态网页的重要标志。
在服务器端运行的程序、网页、组件属于动态网页它们会随不同客户、不同时间返回不同的网页例如 ASP 、 PHP 、
JSP 、 ASPNET 、 CGI 等。
运行于客户端的程序、网页、插件、组件属于静态网页例如 Html 页、 Flash 、 JavaScript 、 VBScript 等等它们是永远不变的。
2这里说的动态网页与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系动态网页可以是纯文字内容的也可以是包含各种动画的内容这些只是网页具体内容的表现形式无论网页是否具有动态效果采用动态网站技术生成的网页都称为动态网页。
从网站浏览者的角度来看无论是动态网页还是静态网页都可以展示基本的文字和图片信息但从网站开发、管理、维护的角度来看却有很大的差别。
动态网页的一般特点如下 a动态网页以数据库技术为基础可以大大降低网站维护的工作量 b采用动态网页技术的网站可以实现更多的功能如用户注册、用户登录、在线调查、用户管理、订单管理等等 c动态网页实际上并不是独立存在于服务器上的网页文件只有当用户请求时服务器才返回一个完整的网页。
比较静态网页与动态网页的区别表 5-1 静态网页 动态网页 扩展名 Html、htm asp 、
jsp 、 php 、 perl 、 .cgi 是否以数据库作为基础 no Yes 能否完成交互功能 no yes 是否独立于服务器 N Y 响应流程 查找到后反馈给浏览器 得由应用服务器扩展的特殊软件进行处理后反馈给浏览器 优 / 缺点 优点网页风格灵活多样 缺点维护繁无法交互 优点实时生成、维护方便、交互性强 教学反思 信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 4 信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 5 52理解动态HTML 授课题目:§5.2理解动态HTML 授课时数: 2学时 课 型: 新课 教学目标 1知识与技能 了解构成动态 HTML 的三大核心技术 掌握 JavaScript 的编写原则能够调用 JavaScript 文件理解什么是CSS样式表掌握运用CSS进行样式设置的方法和格式掌握在 HTML 中加入CSS的三种方法。
2.过程与方法 培养学生独立思考、动手实践的能力培养学生自主探究性、协作性学习能力激发学生学习信息技术的兴趣培养学生发现美、创造美的能力提高学生的综合素质。
3.情感态度与价值观 通过使用 JavaScript 制作动态网页让学生进一步感受网页制作的美并合理使用技术来表现美。
通过学习运用CSS样式表优化网页制作让学生学习正确、合理运用技术了解技术服务于内容的原则。
重 点在静态网页中嵌入或调 JavaScript 文件制作动态网页。
在HTML中加入CSS的三种方法。
难 点掌握 JavaScript 的编写原则并用来生成动态网页。
CSS 样式设置的方法和格式。
教学过程 1用 JavaScript 制作动态网页 动态HTML是随着浏览器的日益强大而产生的它不属于一种专门的编程技术而是一种通过各种技术的综合发展而得以实现的技术应用概念。
构成动态HTML的核心技术主要有客户端的脚本语言常见的是JavaScript VBScript、文件目标模块 Document Object Model 、 CSS 样式表。
常见的名词解释 客户端的脚本语言指可以直接在客户端进行编写并使页面发生动态变化的脚本语言而JavaScript 和 VBScript就是我们最常用的客户端的脚本语言。
JavaScript是一种面向浏览器的网页脚本编程语言JavaScript脚本可以被嵌入HTML文件之中无需经过编译即在浏览器中运行。
在将 JavaScript 嵌入 HTML 页面时必须使用 ltSCRIPTgt 标签 JavaScript 代码是包含在 ltSCRIPTgt 标签内的。
只有通过 ltSCRIPTgt 标签浏览器才能够解释其中的脚本或引用写在 HTML 中的 JavaScript 代码。
ltSCRIPTgt 标签使用的一般形式如下 ltScript LanguagequotJavaScriptquotgt //JavaScript语句 lt/Scriptgt 请同学们按要求做书P111的实践2并调试运行看有什么变化 教师总结 信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 6 写在HTML页面中的JavaScript 语句只能在当前页面中调用在编辑网页时有时会在多个页面中用到相同的 JavaScript功能。
在这种情况下就可以将这些JavaScript语名写在一个文件中只需要编写一次JavaScript语句就可以被调用多个页面要修改时也只需要修改一次。
这种在多个页面之间共享代码的方法可以有效地减轻代码编写的工作量这种方法被称为调用JavaScript文件。
调用JavaScript文件其格式如下 ltScript LanguagequotJavaScriptquot srcquot 文件名.jsquotgt //JavaScript语句 lt/Scriptgt 备注调用文件与网页文件在同一目录下可直接在src 属性中调用否则需要指明该文件的路径。
还有同学们在手工输入代码是要注意必须是半角状态下标签必须成对出现最好输入时成对输入以防漏输像””、ltgt等。
另外让学生纠正书上的一个错误P112 ltScript LanguagequotJavaScriptquot gt srcquottest.jsquot lt/Scriptgt错误 正解ltScript LanguagequotJavaScriptquot srcquottest.jsquotgt lt/Scriptgt 通过例题向同学解析ltScript LanguagequotJavaScriptquot gt lt/Scriptgt 例1插入JavaScript代码 lthtmlgt ltheadgt lttitlegt例上lt/titlegt lt/headgt ltbodygt ltscript languagequotJavaScriptquotgt alert“你好” lt/scriptgt lt/bodygt lt/htmlgt 两例题效果图 例2调用JavaScript文件 lthtmlgt ltheadgt lttitlegt例上lt/titlegt lt/headgt ltbodygt ltscript languagequotJavaScriptquot src”h1.js”gt lt/scriptgt lt/bodygt lt/htmlgt alert“你好”语句定义在h1.js文件中相当于超链接并且h1.js与当前网页在同一个文件夹下面若不在同一文件夹则在h3.js前加入所在文件夹名称。
信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 7 3 CSS样式表 要想真正理解动态HTML了解客户端脚本语言是很重要的但动态HTML的核心技术可不止这一项。
在当今的网页制作中很多的网页都用了CSS那什么是CSS呢 CSS即Cascading Style Sheet级联样式单的缩写我们又常称这为风格样式单Style Sheet顾名思义是用来进行网页风格设计的。
比如我想让我的链接字未点击时是蓝色的当鼠标移上去后字变成红色的且有下划线这就是一种风格。
通过设立样式表我们可以统一地控制HMTL中各标志的显示属性。
在谈样式表前我们先来复习一下上学期学习的HTML语言的基本应用。
lthtmlgt ltheadgt lttitlegt溧阳市埭头中学欢迎您lt/titlegt lt/headgt ltbodygt 语句 lt/bodygt lt/htmlgt CSS样式表作为当前网页制作中一个常用技术不仅可以对文字格式进行设置还可以更加精确地控制布局、字体、颜色、背景和其他图文效果。
它主要有以下几个优点。
A 只需修改一个CSS代码就可以改变页数不定的网页外观和格式从而使应用样式的网页具有相同的风格提高了网页编辑效率。
B 可以“随心所欲”地控制页面布局和外观。
C 在所有浏览器和平台之间上具有较好的兼容性。
D 精简网页提高下载速度。
如果你们想做出上图所示这样一个文字样式那么可以用如下的HTML样式来实现。
lthtmlgt ltheadgt 信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 8 lttitlegt欢迎进入溧阳市埭头中学lt/titlegt lt/headgt ltbodygt ltigtltfont facequot宋体quot colorquot008000quotgt欢迎进入溧阳市埭头中学lt/fontgtlt/igt lt/bodygt lt/htmlgt 如果我们用CSS样式表来对HTML文档进行编辑可以在ltBODYgt标签前加入下面的CSS代码 虽然上图的CSS代码和HTML代码内容不同但它们实现的功能是一致的其核心语句也是等效的下表将两种代码进行了比较。
定义 CSS代码 HTML 文字的字体 Font-family: quot宋体quot ltfont facequot宋体quotgt 文字的斜体 Font-style:italic ltIgt lt/Igt 文字的颜色 Color:green ltfont colorquotgreenquotgt 文字的大小 Font-size:N ltfont sizeNgt 在HTML中加放CSS代码其方法并不是只有一种在不同的情况下可以采用不同的方式下面向同学们介绍三种。
1 嵌入式样式表只适合用于某一标签中 所谓嵌入式样式表很简单只需要在每个要应用样式的HTML的标记后写上CSS属性就可以了。
这种方法很直接如果想规定一个lttablegt标签中的文字为红色字体大小为10pt则可以书写为lttable stylequotcolor:redfont-size:10ptquotgt CSS代码 ltstyle typequottext/cssquotgt lt-- .h3 font-family quot宋体quot color:green font-style:italic --gt lt/stylegt CSS代码 ltbodygt ltspan classquoth3quotgt欢迎进入溧阳市埭头中学lt/spangt lt/bodygt 在CSS代码中定义了一个名称为lth3gt的样式在需要设置样式的文字前后加ltspan class”样式名”gtlt/spangt成对标签。
信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 9 注意这种方式主要用于对具体标签具体的调整其作用范围只限于本标签。
这种加放的样式表的方式并没有充分体现出CSS样式表的优越性该尽量少用。
2内联样式只适合用于当前页面应用样式 ltstyle typequottext/cssquotgt lt-- 样式表CSS内容 --gt lt/stylegt 3外部样式表可以就应用于多个页面当中 ltlink hrefquot路径/样式表文件名.cssquot relquotstylesheetquot typequottext/cssquotgt 样式表格式的引用 格式名有点与无点时的引用 样式表文件存放于不同位置的引用方法 无点lt样式名gtlt/样式名gt 有点ltspan classquot样式名quotgtlt/spangt 例1内联样式表 lthtmlgt ltheadgt lttitlegt例1lt/titlegt ltstyle type”text/css”gt h1font-family:”宋体” color:green font-style:italic .h2font-size:12pt color:blue text-decoration:underline lt/stylegt lt/headgt 定义内容只能写在ltheadgt与lt/headgt区 引用内容放在ltbodygt区中 定义不带点的h1样式表 定义带点的h2样式表 信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 10 ltbodygt lth1gt欢迎进入机器人做学玩网站lt/h1gt ltspan class”h2”gt从做中学在学中做lt/spangt lt/bodygt lt/htmlgt 例2外联样式表 lthtmlgt ltheadgt lttitlegt例2lt/titlegt ltstyle type”text/css”gt ltlink hrefquoth3.cssquot relquotstylesheetquot typequottext/cssquotgt lt/stylegt lt/headgt ltbodygt lth3gt欢迎进入机器人做学玩网站lt/h3gt 或ltspan class”h3”gt从做中学在学中做lt/spangt lt/bodygt lt/htmlgt 教师发放练习资料学生自主练习。
学生在操作中常出现的问题 A 标签的输入必须成对出现在输入时形成一种良好的书写习惯。
B 别把src 输成scr C ”h3”引号、代码一定要在半角状态下输入中文输入后马上切换到半角英文状态下 D text别输成是test E 外联引用时注意网页文件是否与样式文件在同一个文件夹下否则写清路径。
教学反思 引用不带点的h1样式表来修饰文字“欢迎进入机器人做学玩网站” 引用带点的h2样式表来修饰文字“从做中学在学中做” 样式表定义在文件h3.css中hrefquoth3.cssquot相当于超链接h3.css并且h3.css与当前网页在同一个文件夹下面若不在同一文件夹则在h3.css前加入所在文件夹名称。
若定义在文件h3.css中的样式表不带点则使用加黑语句 若定义在文件h3.css中的样式表带点则使用倾斜语句 信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 11 授课题目:§5.3 应用动态HTML及5.4 ASP脚本的应用 授课时数:1学时 课 型: 新课 教学目标 1知识与技能 掌握用 JavaScript 实现强制浏览者点击某链接要求学生能够根据不同的操作系统设置ASP的运行环境 IIS要求学生创建一个ASP文件理解ASP的简单应用。
2.过程与方法 采用任务驱动法 以完成该节 JavaScript 的学习介绍了ASP的运行环境以及设置的方法不同的操作系统中设置方法也略有不同。
知道基于 B/S 模式的动态网页的简单制作方法并让学生动手自己制作一个 ASP 程序。
3.情感态度与价值观 培养学生的创新能力与探索精神利用动态网页制作原则合理地修饰自己的网站。
培养学生的动手能力并能体会到ASP的交互性的特点。
教学过程 在动态网页设计中JavaScript是创建生动的网页中十分重要的一个部分它能够使得页面在保持美观的基础上平添一份活力。
在这一节中我们将以几个JavaScript实例来和大家一起把我们的网页修饰的更加生动。
由于同学们以前没有学过JavaScript代码我们现在用的教学中所使用的代码都是从网站上下载下来现成代码只要求同学们会代码嵌入即可不要求同学们能读懂代码。
通常选一段合适的源代码复制并粘贴到指定的位置可以是HEAD区也可以是BODY区就可以完成一个JavaScript效果。
给学生提供几个现成的源代码让学生体验一下代码复用的优越性来修饰自己的网站。
另外在插入JavaScript特效时还要注意以下问题 .首先是确定版权问题。
并不是所有网上的代码都可以无偿使用只有免费资源才可以下载使用现在我们用于教学中不存在版权问题。
.判断是否要修改。
有些文字内容得根据自己网页的特性需要修改一下。
.确定插入位置和如何插入。
动态设计原则 尽量精简不要使用太多的动画 过度的闪烁让人头痛 合理使用滚动字幕、变换的选择以及持续的动画 前面我们介绍了几种动态技术像JavaScript等其实我们上网也经常会用到另外一种动态技术下面我们一起来学习下了解一下ASP的运行环境以及设置的方法 ASP 作为服务器端的动态网络技术需要进行专门的环境配置但是对我们初级网页制作者 ASP 的运行环境还是很容易达到的。
信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 12 1 Microsoft Internet Information Server version 30/40on WindowsNT ServerIIS 2 Microsoft Personal Web Server on Windows 95/98PWS 以上任何一种环境都可以进行 ASP 编程 与一般的程序不同 ASP 程序无需编译 ASP 程序的控制部分是使用 JavaScript 、 VBScript 等脚本语言来设计的。
接下来对设置 IIS 进行详细的讲解在这里除了按照学生教材上的配置 IIS 设置虚拟目录的方法详细讲解一下 IIS 的安装与配置此处以 Winxp 下的安装为例其他操作系统会略有不同。
安装 IIS 若操作系统中还未安装 IIS 服务器可打开“控制面板”然后单击启动 “添加 / 删除程序” 在弹出的对话框中选择 “添加 / 删除 Windows 组件”如图 5-7 所示在 Windows 组件向导对话框中选中“ Internet 信息服务 IIS ”然后单击“下一步”按向导指示完成对 IIS 的安装如图 5-8 所示。
图 5-7 Windows 组件向导 1 信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 13 图 5-8 Windows 组件向导 2 启动 Internet 信息服务 IIS Internet信息服务简称为IIS单击Windows开始菜单——所有程序——管理工具—— Internet 信息服务 IIS 管理器即可启动“ Internet 信息服务”管理工具如图 5-9 所示。
图 5-9 Internet 信息服务 IIS 管理器 配置 IIS IIS 安装后系统自动创建了一个默认的 Web 站点该站点的主目录默认为 C:Inetpubwww.root。
信息技术基础教案高二年级 备课组成员狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 14 用鼠标右键单击“默认 Web 站点”在弹出的快捷菜单中选择“属性”此.