第五章网页及其制作工具.docx

1、第五章网页及其制作工具第五章 网页及其制作工具一、本章内容框架结构教材P104页第五章学习线路图 从学习线路图中我们可以看到，为了更好地设计制作网页，必须了解构成网页的各种元素以及网页的分类，并能根据表达任务的需要，使用常用的网页制作软件设计制作网页。超文本标记语言的基本结构、语法以及动态网页的概念及其工作原理也是本章的重点。二、教材分析 本章包含网页、网页的文件结构及支持技术和常用的网页制作工具等三节内容。 一个网页就是一个用超文本标记语言（HTML）编写的文件，利用“链接的方法”将一系列网页相互串联起来，便形成了一个网站。网页和网站既可以在不联网的计算机上被本地用户浏览，也可以通过局域网甚

2、至因特网被远程用户浏览。所以，随着网络应用的普及，通过网页来表达信息成为重要的信息表达手段之一。 通过对网页以及网页的文件结构及支持技术的学习，可以了解网页、主页、网站的基本概念以及它们之间的关系，可以知道HTML文件的基本结构，可以理解动态网页的概念。通过对常用的网页制作工具软件的学习，逐步掌握能够根据不同的表达任务的需求，选择合适的网页制作工具软件来制作网页的技能。 在学生活动方面，教材安排了1个“综合探究”活动和6个“实践体验”活动，来加深对有关概念的理解以及提高使用网页制作工具软件的技能。 网页、主页、网站的基本概念及其相互关系、HTML文件的基本结构、使用合适的网页制作工具制作网页等

3、内容是本章的学习重点。难点是理解动态网页的概念，并能理解其工作过程。 通过本章学习，为下一章第六章 网站设计与制作的学习提供了相关的基本知识与操作技能的准备。三、教学目标1了解网页、主页、网站的基本概念以及它们之间的关系。2知道HTML文件的结构，了解简单的HTML代码的修改方法。3了解动态网页的支持技术，理解动态网页的概念，能解释其工作过程。4能够根据不同的制作要求，选择合适的网页制作工具。四、课时分配建议小节内容实践探究活动课时5.1网页综合探究：分析页面的构成。实践体验：体验客户端动态网页效果。15.2网页的文件结构及支持技术实践体验：网页结构及其元素属性的分析。实践体验：Persona

4、l Web Server的安装。15.3常用的网页制作工具实践体验：利用Dreamweaver制作动态网页。实践体验：运用Fireworks制作网页按钮。实践体验：运用Flash制作“欢迎光临”文字交替出现的动画。讨论交流：描述网页制作工具的分类及其功能。3合计5 五、各节教学要求和教学设计建议 5.1 网页 （一）教学要求1.了解网页、主页、网站的基本概念及其相互关系。2.了解静态网页技术和动态网页技术的不同之处。 （二）教学设计建议 本节教材包含的主要内容是：网页栏目的构成、静态网页和动态网页。 在本节教学活动中，首先要让学生了解网页、主页、网站的基本概念以及它们之间的关系。其次，通过演示

5、一些布局较为典型的网页来介绍网页栏目的构成。最后，让学生通过学习了解静态网页与动态网页在表现形式以及工作原理方面的差异。 为了增强学生对网页页面结构的分析、归纳能力，最终增强学生网页页面的设计能力，也就是为了提高学生通过设计与发布网页这种途径来表达信息的能力，在本节教材中安排了一个“综合探究”活动分析页面的构成。许多网站的主页都会包括以下一些栏目：页面标题、网站标志（LOGO）、页眉区、导航栏、登录区、搜索区、推荐热点区、主要内容区、页脚区等等。当然，网页的表达形式主要是为网页表达的内容服务的，如果想要表达的主题比较简洁，就应该设计结构简洁的网页。的主页就相当简洁。教师在布置学生分析页面构成的

6、时候，要引导学生选择页面布局典型的和页面布局具有与众不同特性的页面进行分析。既要选取一些内容丰富的页面，也需要选择一些结构简洁的页面进行分析。 在讲解静态网页技术和动态网页技术的不同之处时，应该利用教材上的二幅工作原理图，见图5.1和图5.2。图5.1 静态网页工作原理图 静态网页是在服务器上以文件形式存放并以相同格式发送给客户的网页。客户通过浏览器看到的网页内容就是事先保存在服务器上相同的网页内容，网页在服务器端和客户浏览器端完全一致、没有变化，所以称为静态网页。动态网页是指在用户浏览过程中，由计算机系统自动创建的网页，技术上分为客户端浏览器动态技术和服务器端动态技术。图5.2 服务器端动态

7、网页工作原理图客户端动态网页技术不需要与服务器交互，它通常采用java小程序和脚本语言形式直接嵌在网页中。服务器将网页发送给客户以后，网页在客户端浏览器中直接响应用户的动作。常见的客户端动态技术有JavaScript、JavaApplet、DHTML、ActiveX、FLASH、VRML等工具支持的。服务器端动态技术需要服务器和客户端的共同参与，客户通过浏览器发出面请求后，服务器根据请示的参数运行服务端程序产生结果页面再返回给客户端浏览器，如图5.2所示。服务器端的动态技术在许多时候都结合数据库技术。用户在浏览此类网站时，服务器根据用户的请求，把从数据库中获得数据组合到页面中，返回给客户端浏览

8、器。在此类网站的管理人员中，不需要很多计算机专业人员，大部分管理人员像普通用户一样，通过浏览器来访问数据库，只不过他们使用内部管理界面，对数据库的操作比一般用户具有更多的权限。（三）“实践探究”活动指导 1.综合探究：分析页面的构成。 活动目的： （1）了解一些典型网页页面的栏目构成。 （2）了解栏目及构件在网页中的位置和作用。 活动步骤： （1）教师可以先演示一些典型的栏目丰富的以及页面简洁的网页。 （2）学生进行网页浏览，查找页面布局清晰、合理、有特色的综合类网站和个人网站各一个，并记下首页面的网址。 （3）学生对这两个网页进行栏目分析，并记录栏目类型。 （4）学生分小组交流、讨论，比较两

9、种类型的网站在一般情况下首页中所需栏目的区别，了解不同类型网页中，哪些栏目是必要不可缺少的。教师进行适当小结。 （5）学生画出页面结构图，体会不同栏目在网页中的大概位置。 活动评价： 活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据学生在活动中的表现进行随堂评价，并记录在学生评价表中。由于本次活动需要考察学生的综合分析归纳能力，所以除了有关综合探究活动的常规评价指标外，建议着重对学生的这种综合分析能力进行评价。评价指标自我评价活动质量网页页面元素分析，全面正确 6分网页页面元素分析，较为全面5分网页页面元素分析，完成分析3分网页页面元素分析，尚需努

10、力2分 在“网页页面元素分析”中，“全面正确”是指能选取典型的网页进行分析，能够通过比较归纳，通盘考虑问题，分析结论全面正确；“较为全面”指正确完成分析，结论比较全面；“完成分析”指完成了分析，表现出的分析归纳能力一般；“尚需努力”指分析中遗漏了某些重要内容，分析结论存在一些错误。 2. 实践体验：体验客户端动态网页效果。 活动目的： （1）了解一些实现客户端网页动态效果的简单方法。 （2）通过对程序中某些对象属性的修改，掌握对网页动态效果简单的修改方法。 活动步骤： （1）学生使用“记事本”输入实验一的网页代码，并保存为try1.htm或try1.html。教师也可以事先准备此文件供学生使用

11、，以节约时间。代码如下：一个文字的动态效果鼠标移上时将停止，移开时继续移动,不妨试一下 在这个例子中，使用marquee元素创建了一个滚动的文本字幕，在Internet Explorer 3.0以上版本的浏览器中可以使用此元素。 （2）学生在浏览器中打开此文件，观察运行的效果。 （3）学生按要求填写实验一的实验报告。 （4）学生使用“记事本”输入实验二的网页代码，并保存为try2.htm或try2.html。教师也可以事先准备此文件供学生使用，以节约时间。代码如下：一个文字的动态效果 （5）学生在浏览器中打开此文件，观察运行的效果。 在这个例子中，每一次打开（或刷新）网页，Javascript

12、程序随机地把5个字符串（5句中文句子）中的一个显示到浏览器中。 其中，语句increment = Math.floor(Math.random() * number)的作用是产生一个0到number-1的随机整数，并赋值给变量increment。在本例中，产生随机数的范围是0到4。floor方法返回小于等于其数值参数的最大整数。random方法返回介于0和1之间的伪随机数，产生的伪随机数含0不含1，也就是返回值可能为0，但总是小于1。 本实验的主要目的是体验动态效果，并不是要求学生完全理解脚本程序。学生从观察、归纳直到能够对脚本程序作一些小的改动，就达到了教学要求。当然，如果把脚本程序作一些简

13、化，改成下列形式，可能会使学生更容易理解。 （6）学生按要求填写实验二的实验报告。 活动评价： 活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据需要对学生在活动中的表现进行随堂评价，并记录在学生评价表中。由于本次活动需要考察学生的分析归纳和简单修改的能力，所以除了有关实践体验活动的常规评价指标外，建议着重对学生的这些能力进行评价。 学生填写下表来对实验一的活动质量作出自我评价。评价指标自我评价活动质量客户端网页中代码的作用分析，十分明确6分客户端网页中代码的作用分析，较为清楚5分客户端网页中代码的作用分析，大体了解3分客户端网页中代码的作用分析，有

14、待提高2分 在“客户端网页中的作用分析”中，“十分明确”指学生能够通过阅读网页代码中的英文单词（一些具有意义的保留字）了解代码的作用，并通过一些对比实验对本实验中的主要代码的作用达到完全理解的程度；“较为清楚”是指能完成对代码的分析；“大体了解”指能够理解多数代码的作用；“有待提高”指学生对多数代码没有理解。 学生填写下表来对实验二的活动质量作出自我评价。评价指标自我评价活动质量网页动态效果实现和简易修改方法，熟练运用6分网页动态效果实现和简易修改方法，基本掌握5分网页动态效果实现和简易修改方法，操作生疏3分网页动态效果实现和简易修改方法，仍需帮助2分 在“网页动态效果实现和简易修改方法”中，

15、“熟练运用”指学生能够通过运行网页代码，了解代码的作用，对本实验中主要代码的作用达到完全理解并能按要求作少量修改的程度；“基本掌握”是指能理解代码，完成代码的少量修改；“操作生疏”指能够理解多数代码的作用，完成代码的修改，略显生疏；“仍需帮助”指学生对多数代码没有理解，完成程序修改有困难。 5.2 网页的文件结构及支持技术 （一）教学要求 1. 知道HTML文件的结构，了解基本的HTML元素。 2. 了解动态网页支持技术。 3. 了解Web服务器软件的安装与使用方法。 （二）教学设计建议 本节教材包含的主要内容是：超文本标记语言、动态网页支持技术。 HTML是一种描述语言，用来对WEB页面中显

16、示内容的属性以标签的形式进行描述。以HTML语言编写出来的文件是标准的ASCII文件。客户机上的浏览器对文件中的标记进行解释并将相应页面内容正确地显示在显示屏上。一个WEB页面就是一个HTML文档。 由于教材并没有系统、完整地介绍HTML语法，所以在教学中教师可以设计3到4个典型的HTML例子来让学生了解基本的和常用的HTML元素。在演示这3、4个HTML例子时，教师可以通过反复切换HTML源文件与该文件在浏览器中的显示效果来逐个介绍HTML源文件中每一个元素的作用。教材中安排了一个学生“实践体验”活动网页结构及其元素属性的分析。通过这个活动可以加深学生对于网页结构及元素属性的了解。 动态网页

17、的支持技术方案有许多种，“ASP+数据库”是目前比较常见的一种动态网页支持技术方案。 ASP程序是以扩展名为.asp的纯文本形式存于Web服务器上的，可以用任何的文本编辑器打开它。ASP程序中可以包含纯文本、HTML标记以及脚本程序。只需要将ASP程序放在Web服务器的虚拟目录下（该目录必须要有可执行权限），就可以通过浏览器访问ASP程序了。ASP使用分隔符将脚本命令与普通文本和HTML内容区分开来。ASP使用分隔符将由服务器执行的脚本命令明确地括起来，而HTML使用分隔符表示由Web浏览器解析的标记。 例如，在Web服务器上存放以下ASP程序文件。 ASP示例1 今天，部门的 对此网页进行了

18、更新! 在客户端的Web浏览器中查看时，包含此脚本的网页显示为：今天，研发部门的 Richard 对此网页进行了更新! 但是，用户在客户端查看此网页的源文件时，只能看到下列文本和HTML内容： ASP示例1 今天，研发部门的 Richard 对此网页进行了更新! ASP脚本仅在服务器上运行，也就是说，分隔符 之间的命令在服务器上执行，而将由于脚本运行而动态生成的HTML内容传送到用户的浏览器。 在Windows 98（Windows 95）中可以通过安装PWS（Personal Web Server）来实现Web服务器的功能。在Windows 2000和Windows XP中，则可以通过安装I

19、IS（Internet Information Services）来实现Web服务器的功能。除了Windows 2000 Server版本中直接包含了IIS组件外，其他版本的Windows 2000和Windows XP操作系统默认安装时都不包含IIS。如果需要IIS，可以另行安装。目前很多Web服务器 都使用Windows 2000 Server操作系统，但学生经常使用的操作系统是Windows 98、Windows 2000和Windows XP。由于近期购买的计算机中大部分都预装了Windows XP操作系统，所以这里介绍一下在Windows XP操作系统中安装IIS的方法。尽管Wind

20、ows XP中的Web服务器同时最多只可以供10个用户访问，但对于学生实验，甚至是简单应用，这样的最大用户数还是够了。 在光驱中放入Windows XP安装光盘，会自动运行安装程序，界面如图5.3所示。图5.3 Windows XP安装程序 单击“安装可选的Windows组件”项，出现图5.4所示的组件向导对话框。图5.4 Windows 组件向导对话框 选取“Internet信息服务（IIS）”，单击“下一步”安装IIS。直到出现如图5.5所示的对话框，单击“完成”按钮，完成IIS的安装。图5.5 完成安装对话框 如果想要对IIS进行设置，先进入“控制面板”，见图5.6。在“控制面板”中单击

21、运行“性能和维护”。图5.6 Windows控制面板 在“性能和维护”项目中，单击运行“管理工具”，见图5.7。图5.7 “性能和维护”界面 在“管理工具”窗口（图5.8）中双击“Internet信息服务”图标，运行IIS。Internet信息服务的运行界面见图5.9。图5.8 “管理工具”窗口图5.9 Internet信息服务的运行界面 右键单击“默认网站”，执行右键菜单中的“属性”命令，出现“属性”对话框（图5.10），在此可以对Web服务器进行各种属性设置。图5.10 网站属性对话框 教材中安排了“Personal Web Server的安装”、“ASP程序及其运行方式”以及“体验服务端

22、、客户端的数据交换”等3个学生“实践体验”活动来加深学生对动态网页支持技术的了解。 由于本节教材一共安排了4个学生“实践体验”活动，需要安排较多的学生活动时间。教师在时间安排上要充分考虑学生的知识背景和学习能力，同时也可以与5.3 常用的网页制作工具一起通盘考虑、注重教学效率、合理安排时间。 （三）“实践探究”活动指导 1. 实践体验：网页结构及其元素属性的分析。 活动目的： （1）了解网页文件的基本结构。 （2）了解HTML基本元素。 活动步骤： （1）打开配套光盘中“星座命名.htm”网页文件。 （2）通过反复切换查看源代码与查看网页在浏览器中的显示效果，分析、理解网页代码的作用。尤其要了

23、解HTML代码中常见元素、元素名称及元素的属性。 （3）学生按要求填写实验报告。 活动评价： 活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据需要对学生在活动中的表现进行随堂评价，并记录在学生评价表中。由于本次活动需要考察学生对网页文件的基本结构以及HTML基本元素的掌握情况，所以除了有关实践体验活动的常规评价指标外，建议着重对学生的这方面的活动质量进行评价。评价指标自我评价活动质量网页元素及其属性分析，熟练正确6分网页元素及其属性分析，较为正确5分网页元素及其属性分析，基本知晓3分网页元素及其属性分析，有待学习2分 在“网页元素及其属性分析”中，

24、“熟练正确”指学生通过实验，完全掌握网页文件的基本结构以及HTML基本元素的作用和用法，同时，也具备一定的举一反三的能力，对教材上没有出现过的HTML元素，通过查阅有关书籍资料，也能较快地知道其作用和用法；“较为正确”指学生了解网页文件的基本结构，知道大多数HTML基本元素的作用和用法；“基本知晓”指学生了解网页文件的基本结构，了解一些HTML基本元素的作用和使用方法；“有待学习”指还未能了解网页文件的基本结构，或是对HTML基本元素的作用和使用方法了解不够。 2. 实践体验：Personal Web Server 的安装。 活动目的： （1）了解PWS的作用。 （2）掌握PWS的安装步骤及设

25、置方法。 （3）掌握PWS中虚拟目录设置方法。 （4）掌握在虚拟目录中发布ASP网页的方法。 活动步骤： （1）准备Windows 98安装光盘。 （2）运行add-onspus文件夹中的setup.exe，安装PWS，把本台计算机设置成一台Web服务器。 （3）设定虚拟目录，设定把用户的网页存放在D:myweb文件夹中。设置此文件夹的别名为myasp。 （4）设定默认文档。 （5）输入教材上的示例ASP程序，并以index.asp为文件名存入D:myweb文件夹中。 （6）在本台计算机上，打开浏览器，在地址栏输入：http:/localhost/myasp，验证PWS的安装及设置的正确性。

26、（7）在局域网的其他计算机上，通过IP地址+虚拟目录名（如http:/10.88.76.237/myasp）或计算机名+虚拟目录名（如http:/jf1/myasp）的方法访问Web服务器上的index.asp。验证PWS安装及设置的正确性。 活动评价： 活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据需要对学生在活动中的表现进行随堂评价，并记录在学生评价表中。由于本次活动需要考察学生理解整个实验中每一操作步骤地作用于方法的能力，所以除了有关实践体验活动的常规评价指标外，建议着重对学生的这些能力进行评价。评价指标自我评价活动质量Personal Web Server的安装，熟练操作6分Personal Web Server的安装，较为熟练5分Personal Web Server的安装，操作成功3分Personal Web Server的安装，仍需练习2分 在“Personal Web Server的安装”中，“熟练操作”指学在实验过程中，完全了解每一操作步骤的作用以及操作方法，通过实验，掌握了PWS的安装步骤及参数的设置方法，同时掌握在虚拟目录中发布ASP网页的方法；“较为熟练”指能较熟练地完成本实验的每一个操作步骤，获得正确的实验结果；“