动态网页制作精.docx
《动态网页制作精.docx》由会员分享，可在线阅读，更多相关《动态网页制作精.docx（19页珍藏版）》请在冰豆网上搜索。
动态网页制作精
第五章动态网页制作
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所示。
动态网页的处理流程如图5-2所示。
动态网页和静态网页的相同之处：
都是ASCII编码文件，都存在着HTML代码，都能包含脚本语言代码，都存放在Web服务器上，都把用户请求的页面发送到浏览器上。
动态网页和静态网页的区别是：
动态网页的文件扩展名不是.htm、.html，而是以．asp、．jsp、．php、．perl、.cgi等形式为文件后缀；动态网页中的某些脚本只能在服务器上运行，而静态网页不能包含在服务器上运行的任何脚本；当Web服务器收到用户请求的静态页面后，将把查找结果直接发送到浏览器，而当Web服务器收到用户请求的动态页面后，它将先把这个网页传递给一个称为应用服务器扩展的特殊软件进行处理，然后将处理结果传送给浏览器。
2.自己动手制作简单的动态HTML
师：
请同学们从网上找两幅自己喜欢的图片并下载到本地机。
然后打开FrontPage,先将其中的一幅图片插入，使用DHTML效果，利用其中的“鼠标悬停”事件，将第一幅图片交换成第二幅图片。
生：
利用网络，在本地机上完成该任务，同时体会动态HTML效果
学有余力的同学也可以试一下触发事件中的”网页加载”、”双击”、“单击”等并设置效果类型及效果设置内容。
3．教师总结
同学们，我们本节课主要是了解了动态HTML的实现效果，希望同学们通过课堂上讲解的实例，对动态HTML有个大致的了解。
教师进一步比较静态网页和动态网页。
（1）程序是否在服务器端运行，是区分动态网页和静态网页的重要标志。
在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP．NET、CGI等。
运行于客户端的程序、网页、插件、组件，属于静态网页，例如Html页、Flash、JavaScript、VBScript等等，它们是永远不变的。
（2）这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。
从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看却有很大的差别。
动态网页的一般特点如下：
（a）动态网页以数据库技术为基础，可以大大降低网站维护的工作量；
（b）采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等；
（c）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。
比较静态网页与动态网页的区别表5-1
静态网页
动态网页
扩展名
Html、htm
．asp、．jsp、．php、．perl、.cgi
是否以数据库作为基础
no
Yes
能否完成交互功能
no
yes
是否独立于服务器
N
Y
响应流程
查找到后反馈给浏览器
得由应用服务器扩展的特殊软件进行处理，后反馈给浏览器
优/缺点
优点：
网页风格灵活多样
缺点：
维护繁，无法交互
优点：
实时生成、维护方便、交互性强
教学反思：
5．2理解动态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的核心技术主要有：
客户端的脚本语言（常见的是JavaScriptVBScript）、文件目标模块（DocumentObjectModel）、CSS样式表。
常见的名词解释：
客户端的脚本语言：
指可以直接在客户端进行编写并使页面发生动态变化的脚本语言，而JavaScript和VBScript就是我们最常用的客户端的脚本语言。
JavaScript是一种面向浏览器的网页脚本编程语言，JavaScript脚本可以被嵌入HTML文件之中，无需经过编译即在浏览器中运行。
在将JavaScript嵌入HTML页面时，必须使用
请同学们按要求做书P111的实践2，并调试运行看有什么变化？
教师总结：
写在HTML页面中的JavaScript语句只能在当前页面中调用，在编辑网页时，有时会在多个页面中用到相同的JavaScript功能。
在这种情况下，就可以将这些JavaScript语名写在一个文件中，只需要编写一次JavaScript语句，就可以被调用多个页面，要修改时也只需要修改一次。
这种在多个页面之间共享代码的方法可以有效地减轻代码编写的工作量，这种方法被称为调用JavaScript文件。
调用JavaScript文件其格式如下：
//JavaScript语句
备注：
调用文件与网页文件在同一目录下，可直接在src属性中调用；否则，需要指明该文件的路径。
还有同学们在手工输入代码是要注意必须是半角状态下，标签必须成对出现（最好输入时成对输入，以防漏输像””、<>等）。
另外：
让学生纠正书上的一个错误P112
src="test.js"
错误
正解：
通过例题向同学解析
例2调用JavaScript文件
例上
例1插入JavaScript代码
例上
alert（“你好！
”）
alert（“你好！
”）语句定义在h1.js文件中，相当于超链接，并且h1.js与当前网页在同一个文件夹下面，若不在同一文件夹，则在h3.js前加入所在文件夹名称。
两例题效果图：
3．CSS样式表
要想真正理解动态HTML，了解客户端脚本语言是很重要的，但动态HTML的核心技术可不止这一项。
在当今的网页制作中,很多的网页都用了CSS，那什么是CSS呢？
CSS即CascadingStyleSheet（级联样式单）的缩写，我们又常称这为风格样式单StyleSheet，顾名思义，是用来进行网页风格设计的。
比如，我想让我的链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。
通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。
在谈样式表前，我们先来复习一下上学期学习的HTML语言的基本应用。
溧阳市埭头中学欢迎您！</p><p>语句
CSS样式表作为当前网页制作中一个常用技术，不仅可以对文字格式进行设置，还可以更加精确地控制布局、字体、颜色、背景和其他图文效果。
它主要有以下几个优点。
A．只需修改一个CSS代码就可以改变页数不定的网页外观和格式，从而使应用样式的网页具有相同的风格，提高了网页编辑效率。
B．可以“随心所欲”地控制页面布局和外观。
C．在所有浏览器和平台之间上具有较好的兼容性。
D．精简网页，提高下载速度。
如果你们想做出上图所示这样一个文字样式，那么可以用如下的HTML样式来实现。
欢迎进入溧阳市埭头中学!</p><p>欢迎进入溧阳市埭头中学!
如果我们用CSS样式表来对HTML文档进行编辑，可以在
标签前加入下面的CSS代码
虽然上图的CSS代码和HTML代码内容不同，但它们实现的功能是一致的，其核心语句也是等效的，下表将两种代码进行了比较。
定义
CSS代码
HTML
文字的字体
Font-family:
"宋体"
文字的斜体
Font-style:
italic
文字的颜色
Color:
green
文字的大小
Font-size:
N
在HTML中加放CSS代码，其方法并不是只有一种，在不同的情况下，可以采用不同的方式，下面向同学们介绍三种。
1．嵌入式样式表：
只适合用于某一标签中
所谓嵌入式样式表很简单，只需要在每个要应用样式的HTML的标记后写上CSS属性就可以了。
这种方法很直接，如果想规定一个
标签中的文字为红色，字体大小为10pt,则可以书写为：red;font-size:
10pt">
注意：
这种方式主要用于对具体标签具体的调整，其作用范围只限于本标签。
这种加放的样式表的方式并没有充分体现出CSS样式表的优越性，该尽量少用。
2．内联样式：
只适合用于当前页面应用样式
--
样式表CSS内容
-->
3．外部样式表：
可以就应用于多个页面当中
样式表格式的引用
格式名有点与无点时的引用
引用内容放在
区中
样式表文件存放于不同位置的引用方法
无点：
<样式名>******
有点：
******
例1内联样式表：
例1
定义不带点的h1样式表；
定义带点的h2样式表；
h1{font-family:
”宋体”;
color:
green;
font-style:
italic;}
.h2{font-size:
12pt;
color:
blue;
text-decoration:
underline;}
引用不带点的h1样式表来修饰文字“欢迎进入机器人做学玩网站！
”；
引用带点的h2样式表来修饰文字“从做中学，在学中做”；
欢迎进入机器人做学玩网站！
从做中学，在学中做
例2外联样式表
样式表定义在文件h3.css中，href="h3.css"相当于超链接h3.css，并且h3.css与当前网页在同一个文件夹下面，若不在同一文件夹，则在h3.css前加入所在文件夹名称。
例2
若定义在文件h3.css中的样式表不带点则使用加黑语句；
若定义在文件h3.css中的样式表带点则使用倾斜语句；
欢迎进入机器人做学玩网站！
或从做中学，在学中做
教师发放练习资料，学生自主练习。
学生在操作中常出现的问题：
A．标签的输入必须成对出现，在输入时形成一种良好的书写习惯。
B．别把src输成scr
C．”h3”引号、代码一定要在半角状态下输入,中文输入后马上切换到半角英文状态下
D．text别输成是test
E．外联引用时注意网页文件是否与样式文件在同一个文件夹下，否则写清路径。
教学反思：
授课题目:
§5.3应用动态HTML及5.4ASP脚本的应用
授课时数:
1学时
课 型:
新课
教学目标：
1．知识与技能
掌握用JavaScript实现强制浏览者点击某链接；要求学生能够根据不同的操作系统设置ASP的运行环境IIS；要求学生创建一个ASP文件，理解ASP的简单应用。
2.过程与方法
采用任务驱动法，以完成该节JavaScript的学习；介绍了ASP的运行环境以及设置的方法，不同的操作系统中设置方法也略有不同。
知道基于B/S模式的动态网页的简单制作方法，并让学生动手自己制作一个ASP程序。
3.情感态度与价值观
培养学生的创新能力与探索精神，利用动态网页制作原则合理地修饰自己的网站。
培养学生的动手能力，并能体会到ASP的交互性的特点。
教学过程
在动态网页设计中，JavaScript是创建生动的网页中十分重要的一个部分，它能够使得页面在保持美观的基础上平添一份活力。
在这一节中，我们将以几个JavaScript实例来和大家一起把我们的网页修饰的更加生动。
由于同学们以前没有学过JavaScript代码，我们现在用的教学中所使用的代码都是从网站上下载下来现成代码，只要求同学们会代码嵌入即可，不要求同学们能读懂代码。
通常选一段合适的源代码，复制并粘贴到指定的位置（可以是HEAD区也可以是BODY区），就可以完成一个JavaScript效果。
给学生提供几个现成的源代码，让学生体验一下代码复用的优越性，来修饰自己的网站。
另外在插入JavaScript特效时还要注意以下问题：
Ａ.首先是确定版权问题。
并不是所有网上的代码都可以无偿使用，只有免费资源才可以下载使用，现在我们用于教学中不存在版权问题。
Ｂ.判断是否要修改。
有些文字内容得根据自己网页的特性需要修改一下。
Ｃ.确定插入位置和如何插入。
动态ＨＴＭＬ设计原则：
1．尽量精简，不要使用太多的动画
2．过度的闪烁让人头痛
3．合理使用滚动字幕、变换的选择以及持续的动画
前面我们介绍了几种动态技术，像ＣＳＳ，JavaScript等，其实我们上网也经常会用到另外一种动态技术ＡＳＰ，下面我们一起来学习下，了解一下ASP的运行环境以及设置的方法
ASP作为服务器端的动态网络技术，需要进行专门的环境配置，但是对我们初级网页制作者，ASP的运行环境还是很容易达到的。
（1）MicrosoftInternetInformationServerversion3．0/4．0onWindowsNTServer（IIS）
（2）MicrosoftPersonalWebServeronWindows95/98（PWS）
以上任何一种环境都可以进行ASP编程，与一般的程序不同，ASP程序无需编译，ASP程序的控制部分是使用JavaScript、VBScript等脚本语言来设计的。
接下来，对设置IIS进行详细的讲解，在这里除了按照学生教材上的配置IIS设置虚拟目录的方法，详细讲解一下IIS的安装与配置，此处以Winxp下的安装为例，其他操作系统会略有不同。
安装IIS
若操作系统中还未安装IIS服务器，可打开“控制面板”，然后单击启动“添加/删除程序”，在弹出的对话框中选择“添加/删除Windows组件”，（如图5-7所示）在Windows组件向导对话框中选中“Internet信息服务（IIS）”，然后单击“下一步”，按向导指示，完成对IIS的安装（如图5-8所示）。
图5-7Windows组件向导1
图5-8Windows组件向导2
启动Internet信息服务（IIS）
Internet信息服务简称为IIS，单击Windows开始菜单——所有程序——管理工具——
Internet信息服务（IIS）管理器，即可启动“Internet信息服务”管理工具（如图5-9所示）。
图5-9Internet信息服务（IIS）管理器
配置IIS
IIS安装后，系统自动创建了一个默认的Web站点，该站点的主目录默认为C:
\\Inetpub\\www.root。
用鼠标右键单击“默认Web站点”，在弹出的快捷菜单中选择“属性”，此时就可以打开站点属性设置对话框（如图5-10所示），在该对话框中，可完成对站点的全部配置。
图5-10默认Web站点属性
主目录与启用父路径
单击“主目录”标签，切换到主目录设置页面（如图5-11所示），该页面可实现对主目录的更改或设置。
注意检查启用父路径选项是否勾选，如未勾选将对以后的程序运行有部分影响，如图5-12“主目录—配置—选项”所示。
图5-11默认Web站点主目录设置
图5-12默认Web站点启用父路径设置
设置主页文档
单击“文档”标签，可切换到对主页文档的设置页面，主页文档是在浏览器中键入网站域名，而未制定所要访问的网页文件时，系统默认访问的页面文件。
常见的主页文件名有index.htm、index.html、index．asp、index．php、index．jap、default.htm、default.html、default．asp等。
IIS默认的主页文档只有default.htm和default．asp，根据需要，利用“添加”和“删除”按钮，可为站点设置所能解析的主页文档。
启动与停止IIS服务
在Internet信息服务的工具栏中提供有启动与停止服务的功能。
单击“启动”可启动IIS服务器；单击“停止”则停止IIS服务器。
编写第一个ASP程序
ASP文件是以．asp为扩展名的文本文件，创建ASP文件是非常简单的。
大家熟悉的文本工具都可以编写，如果在html中添加脚本，只需要将网页文件名后缀.html或者.htm更改为．asp,然后保存到Web站点目录里即可。
关于语法只做简单讲解
在静态网页中，要区分html命令标识和普通字符，可以在html命令标识的两端分别加上“<”和“>”分隔符。
例如：
helloworld!
,结果：
将用粗体显示字符。
而在动态网页中，要区分服务器端的ASP脚本和其他字符，可以用“<%”和“%>”包含ASP的命令加以区别。
在以后的大量程序中会看到都是使用这种标记来进行区分的，它使在开发时很容易区分一个普通的脚本程序和ASP程序。
我们通过一个简单而经典例子来体验一下ASP编程
展开阅读全文
相关搜索