第五章网页及其制作工具.docx
《第五章网页及其制作工具.docx》由会员分享，可在线阅读，更多相关《第五章网页及其制作工具.docx（44页珍藏版）》请在冰豆网上搜索。
第五章网页及其制作工具
第五章网页及其制作工具
一、本章内容框架结构
教材P104页第五章学习线路图
从学习线路图中我们可以看到，为了更好地设计制作网页，必须了解构成网页的各种元素以及网页的分类，并能根据表达任务的需要，使用常用的网页制作软件设计制作网页。
超文本标记语言的基本结构、语法以及动态网页的概念及其工作原理也是本章的重点。
二、教材分析
本章包含《网页》、《网页的文件结构及支持技术》和《常用的网页制作工具》等三节内容。
一个网页就是一个用超文本标记语言（HTML）编写的文件，利用“链接的方法”将一系列网页相互串联起来，便形成了一个网站。
网页和网站既可以在不联网的计算机上被本地用户浏览，也可以通过局域网甚至因特网被远程用户浏览。
所以，随着网络应用的普及，通过网页来表达信息成为重要的信息表达手段之一。
通过对网页以及网页的文件结构及支持技术的学习，可以了解网页、主页、网站的基本概念以及它们之间的关系，可以知道HTML文件的基本结构，可以理解动态网页的概念。
通过对常用的网页制作工具软件的学习，逐步掌握能够根据不同的表达任务的需求，选择合适的网页制作工具软件来制作网页的技能。
在学生活动方面，教材安排了1个“综合探究”活动和6个“实践体验”活动，来加深对有关概念的理解以及提高使用网页制作工具软件的技能。
网页、主页、网站的基本概念及其相互关系、HTML文件的基本结构、使用合适的网页制作工具制作网页等内容是本章的学习重点。
难点是理解动态网页的概念，并能理解其工作过程。
通过本章学习，为下一章《第六章网站设计与制作》的学习提供了相关的基本知识与操作技能的准备。
三、教学目标
1．了解网页、主页、网站的基本概念以及它们之间的关系。
2．知道HTML文件的结构，了解简单的HTML代码的修改方法。
3．了解动态网页的支持技术，理解动态网页的概念，能解释其工作过程。
4．能够根据不同的制作要求，选择合适的网页制作工具。
四、课时分配建议
小节
内容
实践探究活动
课时
5.1
网页
综合探究：
分析页面的构成。
实践体验：
体验客户端动态网页效果。
1
5.2
网页的文件结构及支持技术
实践体验：
网页结构及其元素属性的分析。
实践体验：
PersonalWebServer的安装。
1
5.3
常用的网页制作工具
实践体验：
利用Dreamweaver制作动态网页。
实践体验：
运用Fireworks制作网页按钮。
实践体验：
运用Flash制作“欢迎光临”文字交替出现的动画。
讨论交流：
描述网页制作工具的分类及其功能。
3
合计
5
五、各节教学要求和教学设计建议
5.1网页
（一）教学要求
1.了解网页、主页、网站的基本概念及其相互关系。
2.了解静态网页技术和动态网页技术的不同之处。
（二）教学设计建议
本节教材包含的主要内容是：
网页栏目的构成、静态网页和动态网页。
在本节教学活动中，首先要让学生了解网页、主页、网站的基本概念以及它们之间的关系。
其次，通过演示一些布局较为典型的网页来介绍网页栏目的构成。
最后，让学生通过学习了解静态网页与动态网页在表现形式以及工作原理方面的差异。
为了增强学生对网页页面结构的分析、归纳能力，最终增强学生网页页面的设计能力，也就是为了提高学生通过设计与发布网页这种途径来表达信息的能力，在本节教材中安排了一个“综合探究”活动——分析页面的构成。
许多网站的主页都会包括以下一些栏目：
页面标题、网站标志（LOGO）、页眉区、导航栏、登录区、搜索区、推荐热点区、主要内容区、页脚区等等。
当然，网页的表达形式主要是为网页表达的内容服务的，如果想要表达的主题比较简洁，就应该设计结构简洁的网页。
的主页就相当简洁。
教师在布置学生分析页面构成的时候，要引导学生选择页面布局典型的和页面布局具有与众不同特性的页面进行分析。
既要选取一些内容丰富的页面，也需要选择一些结构简洁的页面进行分析。
在讲解静态网页技术和动态网页技术的不同之处时，应该利用教材上的二幅工作原理图，见图5.1和图5.2。
图5.1静态网页工作原理图
静态网页是在服务器上以文件形式存放并以相同格式发送给客户的网页。
客户通过浏览器看到的网页内容就是事先保存在服务器上相同的网页内容，网页在服务器端和客户浏览器端完全一致、没有变化，所以称为静态网页。
动态网页是指在用户浏览过程中，由计算机系统自动创建的网页，技术上分为客户端浏览器动态技术和服务器端动态技术。
图5.2服务器端动态网页工作原理图
客户端动态网页技术不需要与服务器交互，它通常采用java小程序和脚本语言形式直接嵌在网页中。
服务器将网页发送给客户以后，网页在客户端浏览器中直接响应用户的动作。
常见的客户端动态技术有JavaScript、JavaApplet、DHTML、ActiveX、FLASH、VRML等工具支持的。
服务器端动态技术需要服务器和客户端的共同参与，客户通过浏览器发出面请求后，服务器根据请示的参数运行服务端程序产生结果页面再返回给客户端浏览器，如图5.2所示。
服务器端的动态技术在许多时候都结合数据库技术。
用户在浏览此类网站时，服务器根据用户的请求，把从数据库中获得数据组合到页面中，返回给客户端浏览器。
在此类网站的管理人员中，不需要很多计算机专业人员，大部分管理人员像普通用户一样，通过浏览器来访问数据库，只不过他们使用内部管理界面，对数据库的操作比一般用户具有更多的权限。
（三）“实践探究”活动指导
1.综合探究：
分析页面的构成。
活动目的：
（1）了解一些典型网页页面的栏目构成。
（2）了解栏目及构件在网页中的位置和作用。
活动步骤：
（1）教师可以先演示一些典型的栏目丰富的以及页面简洁的网页。
（2）学生进行网页浏览，查找页面布局清晰、合理、有特色的综合类网站和个人网站各一个，并记下首页面的网址。
（3）学生对这两个网页进行栏目分析，并记录栏目类型。
（4）学生分小组交流、讨论，比较两种类型的网站在一般情况下首页中所需栏目的区别，了解不同类型网页中，哪些栏目是必要不可缺少的。
教师进行适当小结。
（5）学生画出页面结构图，体会不同栏目在网页中的大概位置。
活动评价：
活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据学生在活动中的表现进行随堂评价，并记录在学生评价表中。
由于本次活动需要考察学生的综合分析归纳能力，所以除了有关综合探究活动的常规评价指标外，建议着重对学生的这种综合分析能力进行评价。
评价指标
自我评价
活动质量
网页页面元素分析，全面正确
6分
网页页面元素分析，较为全面
5分
网页页面元素分析，完成分析
3分
网页页面元素分析，尚需努力
2分
在“网页页面元素分析”中，“全面正确”是指能选取典型的网页进行分析，能够通过比较归纳，通盘考虑问题，分析结论全面正确；“较为全面”指正确完成分析，结论比较全面；“完成分析”指完成了分析，表现出的分析归纳能力一般；“尚需努力”指分析中遗漏了某些重要内容，分析结论存在一些错误。
2.实践体验：
体验客户端动态网页效果。
活动目的：
（1）了解一些实现客户端网页动态效果的简单方法。
（2）通过对程序中某些对象属性的修改，掌握对网页动态效果简单的修改方法。
活动步骤：
（1）学生使用“记事本”输入实验一的网页代码，并保存为try1.htm或try1.html。
教师也可以事先准备此文件供学生使用，以节约时间。
代码如下：
一个文字的动态效果鼠标移上时将停止，移开时继续移动,不妨试一下
在这个例子中，使用marquee元素创建了一个滚动的文本字幕，在InternetExplorer3.0以上版本的浏览器中可以使用此元素。
（2）学生在浏览器中打开此文件，观察运行的效果。
（3）学生按要求填写实验一的实验报告。
（4）学生使用“记事本”输入实验二的网页代码，并保存为try2.htm或try2.html。
教师也可以事先准备此文件供学生使用，以节约时间。
代码如下：
一个文字的动态效果
--
functiontext（）{};
text=newtext（）;
number=0;
text[number++]="这是你第一次打开网页，请刷新一下！
"
text[number++]="你刷新了吗？
是不是网页的内容变了？
"
text[number++]="你再刷一次，可能还会变噢！
"
text[number++]="这是一种动态网页技术，你体验到了吗？
"
text[number++]="是不是很容易实现，动态网页技术真不错。
"
increment=Math.floor（Math.random（）*number）;
document.write（text[increment]）;
-->
（5）学生在浏览器中打开此文件，观察运行的效果。
在这个例子中，每一次打开（或刷新）网页，Javascript程序随机地把5个字符串（5句中文句子）中的一个显示到浏览器中。
其中，语句increment=Math.floor（Math.random（）*number）的作用是产生一个0到number-1的随机整数，并赋值给变量increment。
在本例中，产生随机数的范围是0到4。
floor方法返回小于等于其数值参数的最大整数。
random方法返回介于0和1之间的伪随机数，产生的伪随机数含0不含1，也就是返回值可能为0，但总是小于1。
本实验的主要目的是体验动态效果，并不是要求学生完全理解脚本程序。
学生从观察、归纳直到能够对脚本程序作一些小的改动，就达到了教学要求。
当然，如果把脚本程序作一些简化，改成下列形式，可能会使学生更容易理解。
--
text=newArray（）;
text[0]="1.这是你第一次打开网页，请刷新一下！
"
text[1]="2.你刷新了吗？
是不是网页的内容变了？
"
text[2]="3.你再刷一次，可能还会变噢！
"
text[3]="4.这是一种动态网页技术，你体验到了吗？
"
text[4]="5.是不是很容易实现，动态网页技术真不错。
"
i=Math.floor（Math.random（）*5）;
document.write（text[i]）;
-->
（6）学生按要求填写实验二的实验报告。
活动评价：
活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据需要对学生在活动中的表现进行随堂评价，并记录在学生评价表中。
由于本次活动需要考察学生的分析归纳和简单修改的能力，所以除了有关实践体验活动的常规评价指标外，建议着重对学生的这些能力进行评价。
学生填写下表来对实验一的活动质量作出自我评价。
评价指标
自我评价
活动质量
客户端网页中代码的作用分析，十分明确
6分
客户端网页中代码的作用分析，较为清楚
5分
客户端网页中代码的作用分析，大体了解
3分
客户端网页中代码的作用分析，有待提高
2分
在“客户端网页中的作用分析”中，“十分明确”指学生能够通过阅读网页代码中的英文单词（一些具有意义的保留字）了解代码的作用，并通过一些对比实验对本实验中的主要代码的作用达到完全理解的程度；“较为清楚”是指能完成对代码的分析；“大体了解”指能够理解多数代码的作用；“有待提高”指学生对多数代码没有理解。
学生填写下表来对实验二的活动质量作出自我评价。
评价指标
自我评价
活动质量
网页动态效果实现和简易修改方法，熟练运用
6分
网页动态效果实现和简易修改方法，基本掌握
5分
网页动态效果实现和简易修改方法，操作生疏
3分
网页动态效果实现和简易修改方法，仍需帮助
2分
在“网页动态效果实现和简易修改方法”中，“熟练运用”指学生能够通过运行网页代码，了解代码的作用，对本实验中主要代码的作用达到完全理解并能按要求作少量修改的程度；“基本掌握”是指能理解代码，完成代码的少量修改；“操作生疏”指能够理解多数代码的作用，完成代码的修改，略显生疏；“仍需帮助”指学生对多数代码没有理解，完成程序修改有困难。
5.2网页的文件结构及支持技术
（一）教学要求
1.知道HTML文件的结构，了解基本的HTML元素。
2.了解动态网页支持技术。
3.了解Web服务器软件的安装与使用方法。
（二）教学设计建议
本节教材包含的主要内容是：
超文本标记语言、动态网页支持技术。
HTML是一种描述语言，用来对WEB页面中显示内容的属性以标签的形式进行描述。
以HTML语言编写出来的文件是标准的ASCII文件。
客户机上的浏览器对文件中的标记进行解释并将相应页面内容正确地显示在显示屏上。
一个WEB页面就是一个HTML文档。
由于教材并没有系统、完整地介绍HTML语法，所以在教学中教师可以设计3到4个典型的HTML例子来让学生了解基本的和常用的HTML元素。
在演示这3、4个HTML例子时，教师可以通过反复切换HTML源文件与该文件在浏览器中的显示效果来逐个介绍HTML源文件中每一个元素的作用。
教材中安排了一个学生“实践体验”活动——网页结构及其元素属性的分析。
通过这个活动可以加深学生对于网页结构及元素属性的了解。
动态网页的支持技术方案有许多种，“ASP+数据库”是目前比较常见的一种动态网页支持技术方案。
ASP程序是以扩展名为.asp的纯文本形式存于Web服务器上的，可以用任何的文本编辑器打开它。
ASP程序中可以包含纯文本、HTML标记以及脚本程序。
只需要将ASP程序放在Web服务器的虚拟目录下（该目录必须要有可执行权限），就可以通过浏览器访问ASP程序了。
ASP使用分隔符将脚本命令与普通文本和HTML内容区分开来。
ASP使用<%和%>分隔符将由服务器执行的脚本命令明确地括起来，而HTML使用<和>分隔符表示由Web浏览器解析的标记。
例如，在Web服务器上存放以下ASP程序文件。
ASP示例1<%
author="Richard"
department="研发"
%>
今天，<%=department%>部门的<%=author%>对此网页进行了更新!
在客户端的Web浏览器中查看时，包含此脚本的网页显示为：
今天，研发部门的Richard对此网页进行了更新!
但是，用户在客户端查看此网页的源文件时，只能看到下列文本和HTML内容：
ASP示例1今天，研发部门的Richard对此网页进行了更新!
ASP脚本仅在服务器上运行，也就是说，分隔符<%和%>之间的命令在服务器上执行，而将由于脚本运行而动态生成的HTML内容传送到用户的浏览器。
在Windows98（Windows95）中可以通过安装PWS（PersonalWebServer）来实现Web服务器的功能。
在Windows2000和WindowsXP中，则可以通过安装IIS（InternetInformationServices）来实现Web服务器的功能。
除了Windows2000Server版本中直接包含了IIS组件外，其他版本的Windows2000和WindowsXP操作系统默认安装时都不包含IIS。
如果需要IIS，可以另行安装。
目前很多Web服务器都使用Windows2000Server操作系统，但学生经常使用的操作系统是Windows98、Windows2000和WindowsXP。
由于近期购买的计算机中大部分都预装了WindowsXP操作系统，所以这里介绍一下在WindowsXP操作系统中安装IIS的方法。
尽管WindowsXP中的Web服务器同时最多只可以供10个用户访问，但对于学生实验，甚至是简单应用，这样的最大用户数还是够了。
在光驱中放入WindowsXP安装光盘，会自动运行安装程序，界面如图5.3所示。
图5.3WindowsXP安装程序
单击“安装可选的Windows组件”项，出现图5.4所示的组件向导对话框。
图5.4Windows组件向导对话框
选取“Internet信息服务（IIS）”，单击“下一步”安装IIS。
直到出现如图5.5所示的对话框，单击“完成”按钮，完成IIS的安装。
图5.5完成安装对话框
如果想要对IIS进行设置，先进入“控制面板”，见图5.6。
在“控制面板”中单击运行“性能和维护”。
图5.6Windows控制面板
在“性能和维护”项目中，单击运行“管理工具”，见图5.7。
图5.7“性能和维护”界面
在“管理工具”窗口（图5.8）中双击“Internet信息服务”图标，运行IIS。
Internet信息服务的运行界面见图5.9。
图5.8“管理工具”窗口
图5.9Internet信息服务的运行界面
右键单击“默认网站”，执行右键菜单中的“属性”命令，出现“属性”对话框（图5.10），在此可以对Web服务器进行各种属性设置。
图5.10网站属性对话框
教材中安排了“PersonalWebServer的安装”、“ASP程序及其运行方式”以及“体验服务端、客户端的数据交换”等3个学生“实践体验”活动来加深学生对动态网页支持技术的了解。
由于本节教材一共安排了4个学生“实践体验”活动，需要安排较多的学生活动时间。
教师在时间安排上要充分考虑学生的知识背景和学习能力，同时也可以与《5.3常用的网页制作工具》一起通盘考虑、注重教学效率、合理安排时间。
（三）“实践探究”活动指导
1.实践体验：
网页结构及其元素属性的分析。
活动目的：
（1）了解网页文件的基本结构。
（2）了解HTML基本元素。
活动步骤：
（1）打开配套光盘中“星座命名.htm”网页文件。
（2）通过反复切换查看源代码与查看网页在浏览器中的显示效果，分析、理解网页代码的作用。
尤其要了解HTML代码中常见元素、元素名称及元素的属性。
（3）学生按要求填写实验报告。
活动评价：
活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据需要对学生在活动中的表现进行随堂评价，并记录在学生评价表中。
由于本次活动需要考察学生对网页文件的基本结构以及HTML基本元素的掌握情况，所以除了有关实践体验活动的常规评价指标外，建议着重对学生的这方面的活动质量进行评价。
评价指标
自我评价
活动质量
网页元素及其属性分析，熟练正确
6分
网页元素及其属性分析，较为正确
5分
网页元素及其属性分析，基本知晓
3分
网页元素及其属性分析，有待学习
2分
在“网页元素及其属性分析”中，“熟练正确”指学生通过实验，完全掌握网页文件的基本结构以及HTML基本元素的作用和用法，同时，也具备一定的举一反三的能力，对教材上没有出现过的HTML元素，通过查阅有关书籍资料，也能较快地知道其作用和用法；“较为正确”指学生了解网页文件的基本结构，知道大多数HTML基本元素的作用和用法；“基本知晓”指学生了解网页文件的基本结构，了解一些HTML基本元素的作用和使用方法；“有待学习”指还未能了解网页文件的基本结构，或是对HTML基本元素的作用和使用方法了解不够。
2.实践体验：
PersonalWebServer的安装。
活动目的：
（1）了解PWS的作用。
（2）掌握PWS的安装步骤及设置方法。
（3）掌握PWS中虚拟目录设置方法。
（4）掌握在虚拟目录中发布ASP网页的方法。
活动步骤：
（1）准备Windows98安装光盘。
（2）运行add-onspus文件夹中的setup.exe，安装PWS，把本台计算机设置成一台Web服务器。
（3）设定虚拟目录，设定把用户的网页存放在D:
\myweb文件夹中。
设置此文件夹的别名为myasp。
（4）设定默认文档。
（5）输入教材上的示例ASP程序，并以index.asp为文件名存入D:
\myweb文件夹中。
（6）在本台计算机上，打开浏览器，在地址栏输入：
http:
//localhost/myasp，验证PWS的安装及设置的正确性。
（7）在局域网的其他计算机上，通过IP地址+虚拟目录名（如http:
//10.88.76.237/myasp）或计算机名+虚拟目录名（如http:
//jf1/myasp）的方法访问Web服务器上的index.asp。
验证PWS安装及设置的正确性。
活动评价：
活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据需要对学生在活动中的表现进行随堂评价，并记录在学生评价表中。
由于本次活动需要考察学生理解整个实验中每一操作步骤地作用于方法的能力，所以除了有关实践体验活动的常规评价指标外，建议着重对学生的这些能力进行评价。
评价指标
自我评价
活动质量
PersonalWebServer的安装，熟练操作
6分
PersonalWebServer的安装，较为熟练
5分
PersonalWebServer的安装，操作成功
3分
PersonalWebServer的安装，仍需练习
2分
在“PersonalWebServer的安装”中，“熟练操作”指学在实验过程中，完全了解每一操作步骤的作用以及操作方法，通过实验，掌握了PWS的安装步骤及参数的设置方法，同时掌握在虚拟目录中发布ASP网页的方法；“较为熟练”指能较熟练地完成本实验的每一个操作步骤，获得正确的实验结果；“
升级会员 