第五章网页及其制作工具

2005年1月23日 马克 marke 网络技术应用 教师用书 第五章 网页及其制作工具第五章 网页及其制作工具一、本章内容框架图5-1 网页及其制作工具内容框架图 从内容框架图（图5-1）中我们可以看到，为了更好地设计制作网页，必须了解网页的分类以及构成网页的一些基本元素，并能根据表达任务的需要，使用常用的网页制作软件设计制作网页。超文本标记语言的基本结构、语法以及动态网页的概念及其工作原理也是本章的重点。二、教材分析、难点分析 本章包含网页、网页的文件结构及支持技术和常用的网页制作工具等三节内容。 一个网页是一个用超文本标记语言（HTML）编写的文件，利用“链接的方法”将一系列网页相互链接起来，便形成一个网站。网页和网站既可以在不联网的计算机上被本地用户浏览，也可以通过局域网甚至因特网被远程用户浏览。所以，随着网络应用的普及，网页已经成为重要的信息表达手段之一。 通过对网页的文件结构及支持技术的学习，可以了解网页、主页、网站的基本概念以及它们之间的关系，知道HTML文件的基本结构，理解动态网页的概念。通过对常用的网页制作工具软件的学习，能够根据不同的表达任务的需求，选择合适的网页制作工具软件来制作网页的技能。 在学生活动方面，教材安排了1个“讨论交流”活动、8个“实践体验”活动和1个“综合探究”活动，来加深对有关概念的理解以及提高使用网页制作工具软件的技能。 网页、主页、网站的基本概念及其相互关系、HTML文件的基本结构、使用合适的网页制作工具制作网页等内容是本章的学习重点。难点是动态网页概念的理解和它的工作过程的理解。 通过本章学习，为下一章第六章 网站设计与制作的学习提供知识与技能的准备。三、教学目标1了解网页、主页、网站的基本概念以及它们之间的关系。2知道HTML文件的结构，了解简单的HTML代码的修改方法。3了解动态网页的支持技术，理解动态网页的概念，能解释其工作过程。4能够根据不同的制作要求，选择合适的网页制作工具。四、课时分配建议小节内容实践探究活动课时5.1网页综合探究：分析页面的构成。实践体验：体验客户端动态网页效果。15.2网页的文件结构及支持技术实践体验：网页结构及其元素属性的分析。实践体验：Personal Web Server的安装。实践体验：ASP程序及其运行方式。实践体验：体验服务器端、客户端的数据交换。15.3常用的网页制作工具实践体验：利用Dreamweaver制作动态网页。实践体验：运用Fireworks制作网页按钮。实践体验：运用Flash制作“欢迎光临”文字交替出现的动画。讨论交流：描述网页制作工具的分类及其功能。3合计5 五、各节教学要求和教学设计建议 教材5.1 节 网页 （一）教学要求1.了解网页、主页、网站的基本概念及其相互关系。2.了解静态网页技术和动态网页技术的不同之处。 （二）教学设计建议 本节教材包含的主要内容是：网页栏目的构成、静态网页和动态网页。 在本节教学活动中，首先要让学生了解网页、主页、网站的基本概念以及它们之间的关系。其次，通过演示一些布局较为典型的网页来介绍网页栏目的构成。最后，让学生通过学习了解静态网页与动态网页在表现形式以及工作原理方面的差异。 学生通过对网页页面结构的分析、归纳，以增强自己的网页页面的设计能力。学生通过设计与发布网页这种途径来提高表达信息的能力。在本节教材中安排了一个“综合探究”活动分析页面的构成。许多网站的主页都会包括以下一些栏目：页面标题、网站标志（LOGO）、页眉区、导航栏、登录区、搜索区、推荐热点区、主要内容区、页脚区等等。当然，网页的表达形式主要是为网页要表达的内容服务的，如果想要表达的主题比较简洁，就应该设计结构简洁的网页。的主页就相当简洁。教师在布置学生分析页面构成的时候，要引导学生选择典型的页面布局和具有与众不同特性的页面布局的页面进行分析。既要选取一些内容丰富的页面，也需要选择一些结构简洁的页面进行分析。 在讲解静态网页技术和动态网页技术的不同之处时，应该利用教材上的两幅工作原理图，见图5-2和图5-3。图5-2 静态网页工作原理图 静态网页是在服务器上以文件形式存放并以相同格式和同一内容发送给客户的网页。客户通过浏览器看到的网页内容就是事先保存在服务器上的网页内容，网页在服务器端和客户浏览器端完全一致，没有变化，所以称为静态网页。动态网页是指在用户浏览过程中，由计算机系统自动创建的网页，技术上分为客户端浏览器动态技术和服务器端动态技术。图5-3 服务器端动态网页工作原理图客户端动态网页技术不需要与服务器交互，它通常采用java小程序和脚本语言形式直接嵌在网页中。服务器将网页发送给客户以后，网页在客户端浏览器中直接响应用户的动作。常见的客户端动态技术有JavaScript、JavaApplet、DHTML、ActiveX、Flash、VRML等。服务器端动态技术需要服务器和客户端的共同参与，客户通过浏览器发出面请求后，服务器根据请求的参数运行服务端程序，产生结果页面再返回给客户端浏览器，如图5.3所示。服务器端的动态技术通常都需要与数据库技术结合。用户在浏览此类网站时，服务器根据用户的请求，把从数据库中获得数据组合到页面中，返回给客户端浏览器。在此类网站的管理人员中，不需要很多计算机专业人员，大部分管理人员像普通用户一样，通过浏览器来访问数据库，只不过他们使用内部管理界面，对数据库的操作比一般用户具有更多的权限。（三）“实践探究”活动指导 1.综合探究：分析页面的构成。 活动目的： （1）了解一些典型网页页面的栏目构成。 （2）了解栏目及构件在网页中的位置和作用。 活动步骤： （1）教师可以先演示一些典型的栏目丰富的以及页面简洁的网页。 （2）学生进行网页浏览，查找页面布局清晰、合理、有特色的综合类网站和个人网站各一个，并记下首页面的网址。 （3）学生对这两个网页进行栏目分析，并记录栏目类型。 （4）学生分小组交流、讨论，比较两种类型的网站在一般情况下首页中所需栏目的区别。了解不同类型网页中，哪些栏目是必不可少的。教师在此基础上进行适当小结。 （5）学生画出页面结构图，指明不同栏目在网页中的大概位置。 活动评价： 活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据学生在活动中的表现进行随堂评价，并记录在学生评价表中。由于本次活动需要考察学生的分析归纳的综合能力，所以除了有关综合探究活动的常规评价指标外，建议着重对学生的这种综合能力进行评价。评价指标自我评价活动质量网页页面元素分析，全面正确 6分网页页面元素分析，较为全面5分网页页面元素分析，完成分析3分网页页面元素分析，尚需努力2分 2. 实践体验：体验客户端动态网页效果。 活动目的： （1）了解一些实现客户端网页动态效果的简单方法。 （2）通过对程序中某些对象属性的修改，掌握对网页动态效果简单的修改方法。 活动步骤： （1）学生使用“记事本”输入实验一的网页代码，并保存为try1.htm或try1.html。教师也可以事先准备此文件供学生使用，以节约时间。代码如下：一个文字的动态效果鼠标移上时将停止，移开时继续移动,不妨试一下 在这个例子中，使用marquee元素创建了一个滚动的文本字幕，在Internet Explorer 3.0以上版本的浏览器中可以使用此元素。 （2）学生在浏览器中打开此文件，观察运行的效果。 （3）学生按要求填写实验一的实验报告。 （4）学生使用“记事本”输入实验二的网页代码，并保存为try2.htm或try2.html。教师也可以事先准备此文件供学生使用，以节约时间。代码如下：一个文字的动态效果 （5）学生在浏览器中打开此文件，观察运行的效果。 在这个例子中，每一次打开（或刷新）网页，Javascript程序随机地把5个字符串（5句中文句子）中的一个在浏览器中显示出来。 其中，语句increment = Math.floor(Math.random() * number)的作用是产生一个0到number-1的随机整数，并赋值给变量increment。在本例中，产生随机数的范围是0到4。floor方法返回小于等于其数值参数的最大整数。random方法返回介于0和1之间的伪随机数，产生的伪随机数含0不含1，也就是返回值可能为0，但总是小于1。 本实验的主要目的是体验动态效果，并不是要求学生完全理解脚本程序。学生从观察、归纳直到能够对脚本程序作一些小的改动，就达到了教学要求。当然，如果把脚本程序作一些简化，改成下列形式，可能会使学生更容易理解。 （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 今天，部门的 对此网页进行了更新! 在客户端的Web浏览器中查看时，包含此脚本的网页显示为：今天，研发部门的 Richard 对此网页进行了更新! 但是，用户在客户端查看此网页的源文件时，只能看到下列文本和HTML内容： ASP示例1 今天，研发部门的 Richard 对此网页进行了更新! ASP脚本仅在服务器上运行，也就是说，分隔符 之间的命令在服务器上执行，而将由于脚本运行而动态生成的HTML内容传送到用户的浏览器。 教材中安排了“Personal Web Server的安装”、“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. 实践体验：Personal Web Server 的安装。 活动目的： （1）了解PWS的作用。 （2）掌握PWS的安装步骤及设置方法。 （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的安装及设置的正确性。 （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分 3. 实践体验：ASP程序及其运行方式。 活动目的： （1）了解编写ASP程序的方法。 （2）通过客户端浏览器进行访问，进一步了解网页动态生成的过程。 活动步骤： （1）输入教材上的ASP示例程序。 （2）以test1.asp为文件名存盘，保存在Web服务器的虚拟目录D:myweb文件夹中。 （3）在客户端浏览器上浏览test1.asp。 （4）比较传送到客户端的网页文件与test1.asp的差异，体会网页动态生成的方法。 （5）学生按要求填写实验报告。 活动评价： 活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据需要对学生在活动中的表现进行随堂评价，并记录在学生评价表中。由于本次活动需要考察学生对ASP代码及其执行结果的观察与分析能力，所以除了有关实践体验活动的常规评价指标外，建议着重对学生的这些能力进行评价。评价指标自我评价ASP程序及其运行方式快速测试成功4分测试成功3分基本成功（有少量错误）2分有待继续努力1分语句分析能力很强4分较强3分一般2分有待培养1分 4. 实践体验：体验服务端、客户端的数据交换。 活动目的： （1）理解服务器端、客户端数据交换的原理。 （2）掌握服务器端动态网页与客户浏览器交换数据的方法。 活动步骤： （1）使用教材提供的网页示例代码，制作一个输入基本数据的网页get.html。在这个网页中，使用表单（Form）来供用户输入数据。 （2）把get.html存放在D:myweb文件夹中。 （3）输入教材中的ASP程序代码，以deal.asp为文件名保存在D:myweb文件夹中。 （4）采用小组讨论并结合上机实验的方法，了解服务器端、客户端的数据交换的方法，并填写实验报告。 活动评价： 活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据需要对学生在活动中的表现进行随堂评价，并记录在学生评价表中。由于本次活动需要考察学生理解服务器端、客户端数据交换的原理以及掌握数据交换方法的能力，所以除了有关实践体验活动的常规评价指标外，建议着重对学生的这些能力进行评价。评价指标自我评价活动质量服务器端动态网页与客户浏览器交换数据的方法，完全了解6分服务器端动态网页与客户浏览器交换数据的方法，较为了解5分服务器端动态网页与客户浏览器交换数据的方法，基本了解3分服务器端动态网页与客户浏览器交换数据的方法，尚需努力2分 教材5.3节 常用的网页制作工具 （一）教学要求 1. 了解常用的网页制作工具有哪些。 2. 能够根据不同的制作要求，选择合适的网页制作工具。 3. 了解网页制作工具的作用，掌握其中常用工具（菜单命令）的使用方法。 （二）教学设计建议 本节教材介绍了一些常用的网页制作工具软件。 随着因特网技术的不断发展，网页制作工具越来越多，选择一种好的工具非常重要，能够起到事半功倍的效果。网页制作工具大体上可以分为两类：着眼于网页、网站全局的，称之为基本工具；着眼于网页某些元素的，称之为辅助工具。 网页制作基本工具是指那些专门用来设计能在浏览器中显示为网页的HTML文档的专用工具软件，它能整合编排网页元素，生成HTML网页代码文件。比较流行的网页制作工具软件包括Microsoft FrontPage和Macromedia Dreamweaver等。这些软件大多数具有字处理软件或是设计类软件的界面，但只允许用户用来实现那些在HTML中存在的特性。当使用网页制作基本软件输入文本、设置格式或插入图像时， 这些软件就会自动加入合适的HTML标记。网页制作基本工具软件包也提供管理整个网站的工具。同时，这些软件也可以维护页面之间的链接，以及自动检测到其他站点的网页的链接来确定这种链接是否有效。 目前，尽管很多软件（如Word、PowerPoint等）都具有生成HTML代码文件的能力，也就是能够制作出网页，但是专门的网页制作软件可以比较方便地编排文字、图形图像、动画、声音和视频等网页元素，同时具备一定的网站管理与发布功能。 网页制作辅助工具是指用来创建或加工网页上的图形、图像、动画、声音和视频等网页元素的工具软件。 在本节教学中，纯理论性的知识点较少，教材上对常用的网页制作工具的描述，比较通俗易懂，所以教师在这些内容教学上可以少安排一些时间，以便在操作实践方面安排较多的学习时间。教材中安排了3个学生“实践体验”活动，来让学生了解3个较典型的网页制作工具的用法。尽管是上机操作实验，整个实验过程依然是发现问题和解决问题的过程。在实验过程中，学生需要了解每一个实验操作步骤“怎样做？”，教师应该引导学生去了解“为什么要这样做？”，为学生创造“做中学”的条件。尽管通过一个操作实验不可能掌握一种软件的所有操作方法，但通过解决实验中的“为什么要这样做？”和“怎样做？”等问题，可以让学生更进一步地了解网页制作软件的常用操作步骤，让实验起到更大的作用。 （三）“实践探究”活动指导 1. 实践体验：利用Dreamweaver制作动态网页。 活动目的： （1）体验Dreamweaver制作动态网页的方法。 （2）掌握Dreamweaver中运用“层”和“时间轴”制作动态网页。 活动步骤： （1）新建一个Dreamweaver“基本页”的网页文件。 （2）设置网页的标题。 （3）插入一个“图层”，并设置图层属性，这个图层中包含一幅图片，实验的目的是要让此“图层”沿指定的路径运动。 （4）设置时间轴及“图层”的运动路径。 （5）保存网页。 （6）在浏览器中打开此网页文件，观看动态效果。 （7）查看此网页文件的源代码。 活动评价： 活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据需要对学生在活动中的表现进行随堂评价，并记录在学生评价表中。由于本次活动需要考察学生在Dreamweaver中运用“层”和“时间轴”制作动态网页，所以除了有关实践体验活动的常规评价指标外，建议着重对学生的这方面的活动质量进行评价。评价指标自我评价活动质量运用Dreamweaver层的功能制作动态网页，熟练有创意6分运用Dreamweaver层的功能制作动态网页，较为熟练5分运用Dreamweaver层的功能制作动态网页，制作成功3分运用Dreamweaver层的功能制作动态网页，还需练习2分 2. 实践体验：运用Fireworks制作网页按钮。 活动目的： （1）体验Fireworks处理图形的方法。 （2）掌握利用Fireworks制作网页中的按钮的技巧。 活动步骤： （1）新建一个文件，大小为12040像素。 （2）导入一个本软件内置的、现成的按钮，在本实验中选用2号状态按钮。 （3）设置这个按钮的有关属性。 （4）为这个按钮设置一个超链接，当点击此按钮时，可以转到相应的网页。 （5）把这个Fireworks文件导出为网页文件。 （6）在浏览器中浏览、测试这个网页文件。 活动评价： 活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据需要对学生在活动中的表现进行随堂评价，并记录在学生评价表中。由于本次活动需要考察学生利用Fireworks制作网页按钮的技巧，所以除了有关实践体验活动的常规评价指标外，建议着重对学生的这方面的活动质量进行评价。评价指标自我评价活动质量利用Fireworks制作动态按钮，完全掌握6分利用Fireworks制作动态按钮，较为熟练5分利用Fireworks制作动态按钮，操作成功3分利用Fireworks制作动态按钮，有待努力2分 3. 实践体验：运用Flash制作“欢迎光临”文字交替出现的动画。 活动目的： （1）体验Flash制作简单动画的方法。 （2）了解时间轴的作用和用法。 活动步骤： （1）新建一个空白页面，并设置页面属性。 （2）为“欢迎光临”4个字建立4个空白关键帧。 （3）在这4个关键帧中分别输入“欢迎光临”，每帧一个字。 （4）在4个关键帧之间，设置“形状渐变”，即从“欢”字平滑地渐变为“迎”字，然后再渐变为“光”字，最后变为“临”字。 （5）测试动画影片，观察效果。 活动评价： 活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据需要对学生在活动中的表现进行随堂评价，并记录在学生评价表中。由于本次活动需要考察学生使用Flash软件制作简单动画的能力，所以除了有关实践体验活动的常规评价指标外，建议着重对学生的这方面的活动质量进行评价。评价指标自我评价活动质量制作Flash动画，融会贯通6分制作Flash动画，熟练掌握5分制作Flash动画，基本完成3分制作Flash动画，有待努力2分 在有关“制作Flash动画”的评价中，“融会贯通”指学生在实验过程中，操作熟练，完全理解每一个操作步骤的作用和意义，并能举一反三；“熟练掌握”指学生操作熟练，正确地完成了实验，对每一个操作步骤的作用和意义有一定的认识；“基本完成”指学生完成了实验，获得的实验结果基本正确；“有待努力”指学生完成实验有困难，或没有按时完成实验，或对实验过程、结果不太理解。 4.讨论交流：描述网页制作工具的分类及其功能。 活动目的： （1）了解各种网页制作工具。 （2）能按网页制作工具的功能进行适当分类。 活动步骤： （1）上网查找相关资料。 （2）下载一些简单易用的小工具，利用它们来加工一些网页元素，了解工具软件的性能及操作方法。 （3）讨论时，四个同学为一组，交流各自了解的或通过上网查到的网页制作工具软件。 （4）在小组成员充分交流、讨论的基础上，填写教材上的实验报告。 活动评价： 活动结束后，及时组织学生对自己在活动中的表现按照教材中的评价量表进行自我评价，同时教师也要根据需要对学生在活动中的表现进行随堂评价，并记录在学生评价表中。由于本次活讨论交流活动的重点是了解更多的网页制作工具软件，所以除了有关讨论交流活动的常规评价指标外，建议着重对学生的这方面的活动质量进行评价。评价指标自我评价活动质量找到网页制作和加工工具的数量，很多（5个以上）6分找到网页制作和加工工具的数量，较多（3 4个）5分找到网页制作和加工工具的数量，较少（1 2个）3分找到网页制作和加工工具的数量，很少或没有（2个以下）2分 在有关“找到网页制作和加工工具的数量”的评价中，除了着重对查找到的网页制作和加工工具的数量进行评价，对查找到的工具软件的性能也要适当关注。教师应该鼓励学生对类型相同或相近的工具软件进行“性能价格比”的比较。 六、知识、技能拓展 （一）网页 1. 网页设计提示 如何制作一个真正有用的好网页？想要制作一个真正的好网页，美观和实用的平衡并不容易掌握。在设计网页和使用别人设计的网页时，不断积累的经验会使自己的水平得到提高。初学网页设计的人如果想要避免一些常犯的错误，要记住下面这些原则： （1）规划网页，让它尽可能符合网页的设计目的。确定网页的功能，它的内容是关于娱乐、教育、还仅仅是一个通知？清晰认识网页的目标和职能，能使设计过程少走或不走弯路。确定网页的具体形式，使设计变得更有效率。 （2）设计一个模板来规范网页。设计模板应包含网页中所有元素的位置、格式等一系列信息。设计模板的目的是为了让网页具有统一的风格和界面。模板设计可以包含以下一些因素：背景、主题、文本、目录、标题、副标题、视频剪辑、图形、音乐、动画，以及导航按钮。多看一些和计划设计中的网页风格类似的网页，或许会产生一些设计的灵感。 （3）遵循良好网页设计的基本规则。如果显示网页需要花费很多时间或正文的内容非常乏味，浏览者就可能失去耐心。为了使所设计的网站易于阅读和使用，应该注意做到以下几点： a.文本宽度不能太宽。横跨屏幕宽度的文本要比分栏文本更难阅读。 b.文档要反复校正，保证不出现错别字、甚至是标点符号的错误。 c.文本和背景使用相反的颜色。在白色背景上的黑色文本阅读起来最容易。 d.避免使用单调的灰色作背景色，不要让背景色或者图形影响文本。 e.尽量不要使用超过30KB的图形文件，原因是文件越大，网页的传输、加载和显示时间就越长。 f.使用具有jpg或gif扩展名的图形文件。 g.提供大图形的缩略图，并且提供到更大版本图形的链接。 （4）页面的标识。确保在每个页面上使用标记，以便于每个页面都有标题。同时，必要时提供到自己的电子邮件地址的链接，以便于读者可以与设计者联系。在页面底部放置版权声明。常见格式是“Copyright”后加年份或年代范围，最后是设计者的名字，比如Copyright 1998 Bobby Quine。 （5）包含日期。在站点的主页上包含“最后更新”时间。也可以在论文 、评论和其他文档上添加日期，这样有助于读者了解此信息是否是新近的信息。 （6）页面布局。如果网站包含多个页面，应该画出层次图表来说明页面之间的链接关系，要避免使用蜘蛛网似的交叉链接关系。尽管每个页面具有切换到其他页面的退出链接，但是网站上每个页面尽量只有一个入口链接。 （7）包含导航元素。合理地设置一些导航按钮或链接可以使人们容易地按逻辑顺序从一个页面转入到另一个页面。导航元素应该一目了然，而且简单易懂。如果网站上的许多网页都有使浏览者返回主页的导航部分，应该在每个页面上使用同样的导航系统。 （8）尊重其他网站的知识产权和版权。如果使用了从其他网站下载的图片和背景图形，设计者应该遵守使用这些材料的版权法律。选自计算机文化（原书第4版），（美）帕森（Parsons,J.J.）,（美）奥加（Oja,D.）著，田丽韫等译，机械工业出版社，2003.7 2. 常见浏览器错误提示的含义 （1）Server Does Not Have a DNS Entry（DNS服务器中没有与键入的URL对应的DNS条目） 当用户在浏览器中键入想要访问的网站的URL时，用户计算机首先会与域名系统（Domain Name System，DNS）服务器取得联系。DNS服务器负责把用户键入的URL翻译成计算机可以理解的数字形式的IP地址。翻译完成以后，用户就可以浏览这个网站了。如果在DNS的翻译过程中用户收到浏览器给出的一个错误信息Server Does Not Have a DNS Entry，那么这个错误提示信息的意思是DNS服务器中没有与用户键入的URL相对应的DNS条目，也就是说DNS服务器不能正确翻译用户键入的URL。出现这个错误提示通常意味着用户键入的URL不正确，或者是DNS服务器出错了。这时，用户可以试着检查并重新键入URL。 （2）503 Service Unavailable（得不到503服务） 这是一个可以捕捉所有错误情况的提示信息。出现这个提示信息则说明：用户的浏览器无法与待访问的网站取得联系。出现以上问题的原因可能是因为待访问网站所在的服务器崩溃，或者是由于网络流量过大而出现拥塞。 （3）403.9 Access Forbidden. Too Many Users Are Connected（403.9 访问被禁止。服务器上连接的用户太多） 一些网站认识到，如果用户访问网站的流量太大，那么整个网站的性能就会急剧下降，到最后可能谁也得不到这个网站的服务。于是，这些网站对同时可以访问它们的最大用户数目做了限制，以此来保证整个网站的正常运转，这样做的代价是不能保证每一个用户都可以随时得到网站的服务。如果用户在访问某个网站时收到Too Many Users Are Connected的出错提示信息，那么这个信息告诉用户：这个网站当前运行正常，只是因为同时可以接纳的访问者数目已达到最大，因此暂时不能接受更多用户的访问请求。可以继续尝试访问这个网站，当同时访问它的用户数减少到限额以下时，就能正常访问了。 （4）404 Not Found （404 没有发现） 当收到这个提示信息的时候，用户已经访问到了正确的网站，但是Web服务器却无法找到用户所要浏览的特定网页。出现这个出错信息的原因可能是网站已经删除或者移动了用户想要访问的网页。另外，如果用户键入的网页URL不对，也会出现这个提示信息。 （5）401 Unauthorized and 403 Forbidden （401未授权和403禁用） 如果用户收到上述任何一个错误提示信息，那么说明用户正在尝试进入一个只允许特定用户访问的网站。通常情况下，这种类型的网站是有密码保护的；另外，它们可能只允许来自某些特定域的访客，例如。如果用户按照网站的要求键入了口令却仍然收到这类出错提示信息，那么可能是用户键入的口令不对，也可能因为用户不是来自网站规定的域。选自因特网奥秘，（美）格雷勒著，清华大学出版社，2003 （二）网页的文件结构及支持技术 1. Active Server Pages（ASP） Active Server Pages（ASP），动态服务器主页，是开发Web应用程序的开放的、免编译的应用程序环境，它使用Microsoft的IIS 3.0及更新版本包括Windows 2000、Windows XP和Windows .Net Server下的Internet信息服务（IIS）。 ASP可以用于建立强大的、综合了超文本标记语言（HTML）、脚本以及Microsoft ActiveX技术以提供动态网站的基于Web的分布式应用程序。ASP综合了HTML的辅助功能与诸如Microsoft Visual Basic Scripting Edition以及Microsoft Jscript之类的程序语言工具以及可重用的组件对象模型组件。这些组件可以用于建立功能强大的动态网站。ASP在Web服务器上执行，返回到Web浏览器上的输出是简单的HTML文件。 ASP在IIS中是作为Asp.dll的Internet服务器应用编程接口（ISAPI）筛选器来实现的，它驻留在与IIS相同的内存空间里。用户请求具有.asp后缀名的ASP页面时，由筛选器调用必要的语言动态链接库来解释页面上的脚本语言，在服务器上执行服务器方脚本，并将剩下的HTML及客户端脚本返回到请求页面的浏览器中。 ASP页面具有.asp的文件扩展名，且典型的是包含HTML、脚本及其他以任何编程语言编写的组件的混合体。脚本可以引用运行在本地服务器或其他可访问的服务器上的组件，并能够完成诸如访问数据库、发送e-mail或以其他方式处理信息的动作。其结果由服务器作为标准的HTML页面返回到客户端并以普通方式显示。 可以使用ASP来开发为用户定制的Web内容，并使用Microsoft ActiveX数据对象（ADO）以及开放式数据库连接（ODBC）来提供对多数据源的访问。ASP为设计Web应用程序提供了一个浏览器中立的方案，它使所有的应用程序逻辑部分驻留在服务器端。 与超文本传输协议（HTTP）无状态性不同，ASP使用基于会话的技术。当用户连接到Web服务器上的ASP文件时，一个会话对象即被创建了。当会话终止时，会话对象就被删除了。ASP应用程序的默认超时时间是20min，但Outlook Web访问使用60min的超时限制。 选自网络百科全书，（美）塔洛克（Tulloch，M.），（美）塔洛克（Tulloch，I.）编著，邓云佳等译，科学出版社，2003.7 2. XML的奥秘 可扩展标记语言（XML）可以为Web开发人员解决若干个棘手的问题。如果没有XML，为了把一个网页传递到不同的设备（例如计算机、蜂窝电话和无线掌上设备等），Web开发人员必须为每一种设备创建并维护3个不同的网站适合计算机环境的HTML网站、适合蜂窝电话的WAP网站以及适合无线掌上设备的Web剪辑。这种解决方案无疑是非常昂贵、非常困难也是非常费时的。即使Web开发人员只需要为计算机创建一个网站，那么每当改变网站的设计时，都要对这个网站的所有网页重新进行编码，这无疑也是非常昂贵、非常费时的。 使用XML，开发人员只需要创建网站一次。然后，这个用XML语言写成的网站可以自动进行格式化调整以适应不同的环境设备，例如连接到因特网的计算机、无线掌上设备以及使用WAP的蜂窝电话等。另外，即使这个网站只是为计算机环境创建的，当需要重新对它进行设计时，由于采用了XML技术，也无须重建全部网页。 为了真正理解XML，必须掌握XML中最重要的一个概念：XML语言只能用来表达文档内容的信息，而并不涉及这些内容的表示形式和方法。举例来说，XML中并没有规定文档中字体大小的指令，但XML语言可以使用标记定义网页各部分内容的类型。然后，XML语言利用其他技术显示这些网页。因此，一个XML网页可以用多种方式进行显示，而不必返回去重新改变原来的网页设计。 当把使用XML创建的网页发布到网站的时候，需要对这些网页进行不同的设计，以便可以让特定类型的设备正常显示这些网页。可扩展样式语言转换（eXtensible Style Language Transformation，XSLT）可以应用于XML文档。XSLT可以对XML文档进行格式转换，把原来的XML文档转换成另一种形式的XML文档。例如，XSLT可以把XML网页转换成适合在蜂窝电话中显示的WAP网页，也可以把它转换成HTML文档。 当某个设备访问一个用XML创建的网站时，网站需要使用某种方法获知这个设备的类型，例如是计算机还是蜂窝电话。公用网关接口（Common Gateway Interface，CGI）可以检测到访问网站的设备类型。 在网站知道了访问设备的类型之后，它使用XSLT把XML网页转换成适合访问设备显示的格式。例如，把XML网页转换成可以用蜂窝电话中的微型浏览器查看的WAP网页，或者转变成适合计算机显示的HTML网页。选自因特网奥秘，（美）格雷勒著，清华大学出版社，2003 （三）常用的网页制作工具 1. 网页中的图片尺寸 网页上的图像一般总是采用“1:1”的尺寸，即如果图像在网页中显示时候的尺寸为150100像素，那么这幅图像的原始文件也应该被处理成150100像素。有些网页设计初学者设计的网页上会出现一幅尺寸很小的照片，但文件大小却高达几百KB，甚至数MB。这是因为虽然这幅图像在网页中的尺寸不大（例如150100像素），但原始图像文件却是30002000，而未作任何尺寸的转换处理。 作为比较，某张细节丰富、色彩饱和度很高的照片，在Photoshop中可被处理成不同的尺寸，当JPG压缩选项选“最佳”时，分辨率和处理后的文件大小的对比见下表。图片分辨率（像素）文件大小（KB）10247684856404802153002006215010032 在Photoshop中，执行“图像”菜单中的“图像大小”命令，出现如图5-12所示的“图像大小”对话框。在宽度和高度框中输入像素数值，按“好”按钮，然后保存，可以改变图像的原始尺寸。图5-12 改变原始图像的尺寸 2. 用Flash制作滚动字幕 用Flash制作滚动字幕，方法比较简单，放在网页中效果亦较好。下面通过制作一个45050像素的向上滚动的字幕，来体验Flash动画软件的使用方法。本例也可以作为学生学习的补充练习 在Flash中，如果把某一层作为蒙板层，那么它可以蒙住下面的一层或几层。把蒙板想象成一块不透明板，在板上有一些完全透明的显示孔。通过显示孔能看到下面的层，而其他地方均为不透明，看不到下面的层。Flash中所有可显示的对象，都会在蒙板上产生相应形状的显示孔。由于在蒙板上的对象仅仅用来产生显示孔，绘制这些对象时使用的颜色是不会产生任何颜色效果的。在设计影片时，既可以针对产生显示孔的对象设计动画，也可以在被蒙住的层上设计动画。 在影片滚动字幕中，文字MISSION IMPOSSIBLE是蒙板上的显示孔，被蒙住的层用彩虹色涂满。文字（显示孔）由下往上运动，被蒙住的层不动。下面是创建这一动画的具体步骤： 步骤1：选择菜单“文件”中的“新建”，新建一个Flash文件。图5-13 字幕效果 步骤2：单击软件界面下部“影片属性”中的“大小”，出现如图5-14所示的对话框。按此图设置影片属性，影片的宽度和高度分别输入450和50，背景色选深蓝色，然后按“确定”。图5-14 影片属性对话框