第5章网页制作教参.doc

《第5章网页制作教参.doc》由会员分享，可在线阅读，更多相关《第5章网页制作教参.doc（30页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、第五章 网页制作本章概述本章运用FrontPage 2000软件的空白网站模板，介绍了网页制作的各种方法和技巧，使学生在了解什么是网页的同时，熟悉常用的网页元素，通过资料的收集和整理、网站结构的总体规划、网页技巧的运用和实施，能够独立制作有主题的个人网站，并上网发布。通过本章的学习，使学生的综合运用能力得到进一步提高。本章教学要求与课时安排1本章教学要求(1) 掌握FrontPage 2000的启动和退出方法。(2) 掌握网页制作的各种技术和方法，包括文字处理、图片处理、框架、表格、表单、链接等。(3) 学会使用FrontPage 2000导航视图组织网站结构。(4) 学会使用报表视图管理网站

2、。(5) 了解动态网页制作的一般方法。(6) 学会申请免费主页空间并上传网页。2教学内容及课时安排 第一节 网页制作基础知识 约1课时 第二节 网页的建立 约2课时 第三节 网页图片处理 约2课时 第四节 网页框架 约2课时 第五节 网页表格 约2课时 第六节 表单的制作 约2课时 第七节 创建超链接 约2课时 第八节 动态网页制作 约2课时 第九节 网站管理 约2课时教材分析和教法建议第一节 网页制作基础知识一、 教学要求(1) 了解网页的组成元素，理解网站、网页、主页、HTML等几个概念。(2) 了解常用网页制作工具。(3) 掌握FrontPage 2000的启动的退出方法。(4) 熟悉F

3、rontPage 2000的操作界面，了解各种视图的用途。二、 教材分析与教法建议本节主要介绍网页制作基础知识和FrontPage 2000的启动和退出，目的在于让学生了解什么是网页，可以使用哪些工具制作网页，为后面的章节做铺垫。在基础知识部分，有必要让学生搞清以下概念。（1）什么是网站？网站是计算机网络上的位置，它使信息以网页或文档的形式提供给使用浏览器访问站点的访问者。计算机网络可以是世界范围的 Internet 或 Intranet（链接办公室中所有计算机的局域网）。信息可以 HTML 网页或其他文档格式发布。为了查看站点上的信息，访问者需要使用浏览器程序（如 Microsoft(r)

4、Internet Explorer或Netscape Navigator），通过这些程序将 Web 站点上的 HTML 网页翻译为监视器上的文本或图形。（2）什么是网页？网页是全球广域网上的基本文档，用 HTML (超文本标记语言) 书写，其中可以包含文本、图片、动画、音乐、链接等元素。网页可以是站点的一部份，也可以独立存在。每一个网站都是由若干网页组成的，各网页之间通过链接联系在一起。（3）什么是主页？使用浏览器访问网站时，网站中第一个被执行的文件称为主页，主页的基本功能是帮助访问者轻松浏览网站，其中可能包括有关站点创作者的个人信息、工作部门和公司、指向同一 Web 站点的其他文档的链接或指

5、向相关内容的其他站点的链接等内容。为了吸引访问者，主页的页面要美观、内容要做到组织严密并且要提供有用的信息。不同的WEB服务器把不同的文件名识别为主页，多数服务器将index.htm识别为主页，也有的服务器将home.htm、welcome.htm、default.htm识别为主页。在FrontPage中引入其他网站时，如果该网站的主页文件名与FrontPage可识别的主页文件名不同，那么FrontPage会自动将其主页文件名更改为index.htm。（4）什么是 HTML？HTML (超文本标记语言)是一种用于全球广域网上文档中的标准标记语言。该语言使用内嵌代码或标记来描述网页内容和外观，指

6、示Web浏览器应该如何显示网页元素，以及如何回复使用者的操作。由于HTML语言的跨平台功能使得 HTML 成为在其他不兼容计算机系统间交换信息的理想方式。HTML 的缺点在于标记不能广泛使用，因此创作者通常无法预料最终网页在访问者浏览器中显示的外观。由于市场上的浏览器软件有好几种，尽管所有的浏览器能够转换多数 HTML 标记，但是某些标记只有特定类型的浏览器才能处理。因此，如果使用了这些标记，则访问者可能不能以创建网页的方式查看该网页，所以，最好在页面上注明建议使用的浏览器类型。搞清以上概念之后，引入本课的课题网页制作，要制作网页，首先就需要寻找一种合适的工具。该部分主要让学生了解常用的网页制

7、作工具，从发展过程来看，这些工具的使用由难到易，其中的CDIDA软件是信息学奥林匹克竞赛江苏省应用能力竞赛所使用的网页制作工具。对于熟悉HTML语言的人而言，任何一种文本编辑器（如记事本、WORD、WPS、写字板等）都可以用来制作网页，方法是直接键入网页的 HTML 标记，然后在 Web 浏览器中将其打开。许多字处理程序（如Microsoft Word、WPS 2000等）有 HTML 转换功能，可以将已有文档另存为 HTML 文档。但是，大多数转换器只将 HTML 格式标记添加到文本中，有时不保留文档的原始外观。使用脚本方式和其他工具的组合，可以为 Intranet 或 Internet 建

8、立动态 Web 站点。Microsoft Visual InterDevTM是功能强大的 Web 应用程序开发工具，使用这种工具可以快速开发交互的 Web 站点。Visual InterDev 以数据库工具为特征，使连接到Web 站点的符合开放数据库连接 (ODBC)的数据库更加轻松。对于大多数人而言，希望使用不需要懂得HTML的创作工具。这些工具以“所见即所得”的用户界面为特征，如Microsoft FrontPage、flash、dreamweaver等。使用FrontPage 2000制作网页，可以将主要精力放在内容的组织和版面的设计上，无须用户输入难记的HTML代码，由FrontPag

9、e自动在幕后生成所有的HTML代码。当然，尽管使用FrontPage制作网页不需要学习HTML，但懂得一些HTML知识更有好处，因为HTML在不断地发展，许多新的标记在不断涌现，为了能够在网站中使用这些最新效果，在当前的FrontPage版本不支持新效果的时候，可以直接使用HTML语言来实现。介绍常用工具后，强调本书选择FrontPage 2000的原因在于： FrontPage 2000除了能进行网页编辑外，还能进行网站的管理和维护。为突出这一功能，可以通过以下几点进行描述：（1）正因为它具有强大的网站创建、维护和发布功能，所以凡是在FrontPage中创建或由FrontPage维护的站点，

10、都有一个特殊的站点名称：FrontPage Web，与其他网站不同之处在于它们可以由FrontPage来增加一些独特的性能，而使用其它网页制作程序生成的网站文件夹，则必须通过FrontPage转换器转换后，才能在FrontPage中打开。（2） 在FrontPage中，可以建立新网站、引入已有网站和删除网站。在此意义上，FrontPage的功能类似于windows 98资源管理器，不同之处在于FrontPage只管理与网站相关的网页文件以及网页中所使用的图片、动画等文件。为便于管理网站，每一个FrontPage Web站点都含有一套标准的文件夹，在FrontPage中可以看到以下两个文件夹：_

11、private 文件夹：其中保存正在建造中的页面、参考文件和其它一些重要数据，虽然这个文件夹可见，但存在此文件夹下的文件对于各种浏览器来说是隐藏的。images 文件夹：该文件夹专门用来存放图片，凡是网页中出现的图片、动画等文件，最好保存在此文件夹中，使网站保持清洁。在Windows 98资源管理器中观察网站文件夹，还可以看到另外一些文件夹，如_vti_cnf、_vti_pvt、_borders等，其中存放的是一些关于站点的重要数据，仅供FrontPage自己使用。（3）在网站的创建、管理和维护过程中，FrontPage会跟踪网站中的所有文件，因此制作网页时，最好先创建一个网站，然后再制作网站

12、中的具体网页。同样，删除网站时，也要在FrontPage中进行，FrontPage会将网站中所有的文件，包括网页、图片、动画、声音等文件全部删除。为了充分发挥FrontPage 2000的网站管理功能，制作网页时，最好先创建一个网站，然后在此网站中进行各网页的制作，FrontPage 2000利用内置的模板和向导简化了网站的创建过程，这些模板是一些完成了页面间链接的样板站点，使用时只要将文字和图形增加到页面中即可，如果这些模板不能满足需要，也可以直接使用空白站点模板来设计制作自己的站点。在教学过程中可以先建立一个个人站点，用来介绍六种视图方式的用途，然后将课本中的例题作为学生练习，进行巩固。在

13、FrontPage 2000中，有六种视图方式，每一种视图提供关于网站的不同信息，可以用来有效地管理网站。在这一部分必须让学生理解每一种视图的用途和使用方法，以便在以后创建和维护网站时，能够根据需要选择其中的一种来完成任务。其中：网页视图：可以用来创建、编辑、和预览网页，具有所见即所得的特性。文件夹视图：显示站点内容的组织方式，用于管理站点中的文件和文件夹。跟Windows资源管理器相似，在文件夹视图中可以创建、删除、复制与移动文件夹。该视图将工作区分为左右两部分，左侧显示网站中所有文件夹，单击任一文件夹，右侧工作区将显示该文件夹下的内容。在“文件夹”视图中，可以移动某页面的位置，FrontP

14、age将自动更新与该页面有关的所有链接。报表视图：用来分析站点内容。如计算站点中的所有文件大小、显现出那个文件没有链接到其他任一文件、指出慢速或过期的网页、以工作或是它们被分配的人和其他等方式来把文件分组。导航视图：用来创建、显示、打印和更改网站导航结构的视图。在这个视图中可以清晰地看见整个网站的组织结构（工作区上方）和文件组成（工作区下方），拖曳水平分割线可以改变上下窗口的相对大小。将工作区下方的文件名拖动到工作区上方的组织图中，将在网站中增加一个页面，同时FrontPage 2000会依据结构图的形式自动产生链接；在组织图内部拖动页面图标，将改变网站结构；双击页面图标，可以进入“网页视图”

15、对页面进行修改。超链接视图：显示来自和指向站点中每一个网页的所有超级链接。该视图以图形的方式显示网站中各文件之间的链接情况，网页之间的链接通过箭头来标志。当页面中含有许多链接时，为了更清晰地显示链接情况，可以通过工具栏按钮来控制显示某类链接，如图像超链接、重复超链接、页内超链接。如果网站中含有一个断开的链接，那么这一断开的链接显示为一根断开的线和一个撕开的页面图标。如果某页面图标旁边出现红色三角，表明该页出现某类错误，要解决错误，可以右击页面图标，在快捷菜单中单击“属性”菜单，打开“属性”对话框，此时“错误”标签已经打开，在“说明”框中显示有关该错误的详细说明。 任务视图：列出站点中要完成的任

16、务。所谓任务，是指维护WEB站点所需要完成的行动。FrontPage 2000提供的“任务”视图，类似于一个工作备忘录兼计划表，其中记录了尚未完成仍需完成的任务，如处理超链接、更新图象、增加内容等。在WEB站点初步建立之后，需要定期或过一段时间进行更新，保持站点信息的时效性，否则过时的信息无法提起访问者的兴趣。随着站点规模的扩大，需要搜集和发布的信息也随之增加，这时，网站管理员需要跟踪所有的修改请求，并把它们作为任务分配给适当的设计人员进行更新。因此，任务列表被网站的所有设计者所共享，并以列表方式组织任务，提供每项任务的详细信息，还能对每项任务进行详细的跟踪。在“任务”视图中可以添加未完成任务

17、的名称，设置工作的优先顺序以及负责此任务的工作人员，以此来简化站点的维护工作。在FrontPage网页视图中，有三种工作方式：普通、HTML和预览。既可以在普通方式下输入文字、插入图片等来编排网页，也可以在HTML方式下中输入HTML代码来编排网页，当然一般情况下都不采用后者，而是通过HTML方式查看HTML代码，必要时修改其中的代码，解决实际应用中出现的某些无法解决的小问题。在HTML方式下，可以直接输入HTML代码，也可以使用“查找和替换”功能对范围广大的代码进行修改。当出现无法识别输入的HTML代码时（可能代码出错或者FrontPage不支持这一代码功能），在普通方式下页面中会出现一个内

18、部含有问号的黄色小矩形，对于输错的HTML代码，可以双击该矩形，对HTML代码进行修改，然后单击工具栏中的“刷新”按钮即可。对于FrontPage不支持的HTML代码，虽然页面上有出错标记，且在FrontPage中无法预览，但通过WEB浏览器来浏览页面时，应该不会出错。虽然在普通方式下创建页面时，这些页面与通过浏览器中观察的页面很相似，但是为了精确地了解网站发布后，访问者所看到的页面的实际情形，最好在预览方式下对页面进行观察。因为不同的浏览器处理同样的HTML代码会有细微的差别，考虑到Internet上所有的访问者使用的浏览器会有所不同，因此最好在几个不同的浏览器中浏览网页，然后调整页面结构，

19、使之趋于完美。第二节 网页的建立一、 教学要求(1) 熟悉网页中的各种元素及其制作方法，初步了解网页制作过程。(2) 掌握网页文字处理、插入图片、动画、水平线以及设置背景的方法。二、 教材分析与教法建议本节的主要任务是制作一个简单网页，让学生熟悉网页中的各种元素及其制作方法，对网页制作过程有初步的了解。在教学过程中，可以先展示制作好的网页，然后从头开始，将制作过程演示出来。因为学生在Word2000中已学会了图文混排，所以在本节的教学中应侧重于网页编排与Word文档编排的不同之处。为了充分发挥FrontPage2000的网站管理功能，制作网页时，最好先创建一个网站，然后在此网站中进行各网页的制

20、作。FrontPage2000利用内置的模板和向导简化了网站的创建过程，这些模板是一些完成了页面间链接的样板站点，使用时只要将文字和图形增加到页面中即可。如果这些模板不能满足需要，也可以直接使用空白网站模板来设计制作自己的站点。为了学会网页制作的各种技巧，本节讲述网页制作时，采用空白网站模板，来独立创建一个网站。因为制作网页的手段和技巧较多，版面设计更是丰富多彩，所以上课时，重点应放在介绍网页的制作手段上，让学生了解十种手段（文字、图片、表格、框架、表单、链接等），至于如何让页面更美观，应该让学生自己去发挥，这一点也体现在上机实习上。虽然启动FrontPage2000后，进入网页视图就可以直接

21、制作网页，但是这样制作出来的网页文件存在一些问题，最突出的问题就是网页中所插入的图片、动画、声音等文件的路径使用的是绝对路径，在这种情况下，如果网站位置发生迁移，所有图片、动画、声音文件的路径必须修改为服务器可以搜索到的位置，否则在图片出现的位置将无法显示图片本身，而显示为一个图标，解决的办法是单击HTML标签，将所有插入的图片、动画、声音等文件的路径改为相对路径，如果图片、动画等文件较多的话，以上操作的工作量相当可观，因此建议在启动FrontPage2000后，先创建一个网站，再对页面进行编辑，这样在网站文件夹内，使用相对路径进行文件的引用，即使整个网站发生迁移，网站内部的相对位置却保持不变

22、。另外，还可以让FrontPage2000来跟踪站点和页面的变化以便及时更新。因为世界上有多种文字，为了使不同的文字能在浏览器中被正确地显示出来，需要在网页中增加有关语言代码的标志，这样浏览器就知道以何种编码方式显示该网页。FrontPage在页面属性中进行语言设置，其中预定义了一些国家的语言，如果使用中文Windows98，那么其中有一条是简体中文（GB2312），将语言定义成简体中文（GB2312）后，当用户浏览该页面时，即使系统中没有中文环境（中文Windows或外挂中文环境），也能看到整齐的中文页面。学习了WORD之后，学生已掌握文字处理工作，因此以下具体操作可以让学生自己完成，教师总

23、结时再点明网页制作和文字处理的不同之处。（1）文字输入文字方面的不同之处主要是字体的运用。在页面中使用某些不常用的字体时，虽然页面更醒目、更美观，但是如果访问者的计算机没有安装这种字体，浏览器将用缺省的字体来表示文本，这样，不但无法看出设计者的预期效果，更严重的是可能因为字体不兼容而造成乱码，使访问者无法正常浏览页面。因此，建议不要使用不常用的字体（包括Office2000自带的14种中文字体）。某些标题文字一定要通过字体的变化加以突出或美化时，可以在Photoshop等软件中将其做成图片，再插入到页面中。（2）图片除了掌握插入图片的方法外，对于网页中常用的图片格式也应该有所了解，这样学生才能

24、理解为什么保存网页时会将图片转换为其他格式。FrontPage 2000支持GIF、JPG、PNG三种图片格式，它们都属于压缩的图片，文件长度较小，因此适合网络传输。另外，它们适用于各种平台（Windows、Unix、Macintosh等），因此大部分浏览器都将它们作为标准图片格式。利用FrontPage 2000制作网页时，虽然可以将任何类型的图片文件插入到网页中，但在引入图片的时候，会将具有256色或更少颜色的图象转换成GIF格式，而将多于256色的图片转换为JPG格式。GIF图形采用非失真的压缩方式，最多只能显示256种颜色，适合一些高反差、色彩单一的图象，如商标、卡通等。当将其它格式的

25、图片另存为GIF格式时，可以看到在保证图片分辨率的同时，图片的色彩发生了改变。JPG格式采用失真式压缩，在保证色彩变化层次的同时，牺牲图片的清晰度。所以该格式适合于显示色彩丰富的图片，如照片、电子美术作品等。PNG格式集GIF和JPG两种图片的优点，采用非失真的压缩方式，同时色彩可以支持到48bits，但是目前未被普遍采用，有些浏览器还不支持该格式。（3）动画在网页中可以使用GIF动画和Flash动画。GIF动画的每一帧图片都是GIF格式，利用GIF动画工具，如GIF Animator等，将各帧串在一起，形成一个单独的文件，这就是GIF动画，WEB浏览器可以连续快速地显示这些图片，这样就产生动

26、画效果。Flash动画则是利用Flash软件制作的一种动画格式，在网页中插入这种动画后，需要专门的Flash插件才能播放。（4）水平线水平线是贯穿网页宽度的细灰条，用于分隔文本或加着重符。添加水平线后，可以修改其属性来更改宽度、高度、对齐方式和颜色。如果网页使用了主题，则会使用图形来代替水平线以匹配主题。（5）背景设置背景的主要目的是为了使网页更美观。网页的背景可以是某一种颜色，也可以是一幅图片。如果该图片比屏幕小，则浏览器自动重复使用该图片将屏幕铺满（平铺）。使用较大图片做背景无疑会延长网页的下载时间，因此建议使用小图片做背景。（6）保存一般情况下，保存网页时，FrontPage会提示将网页

27、中引用的图片、动画、声音等文件同时保存下来，以保持它们在页面中的位置，每一个图片或动画都按规则另取了一个文件名，此时可以重命名，将图片等文件存放到默认文件夹中（当前页面所在的文件夹），或改变图片等文件的保存位置，将它们保存到另一固定文件夹（如Images文件夹）中，使网站看起来更整洁。第三节 网页图片处理一、教学要求(1) 熟悉FrontPage2000的图片处理功能。(2) 掌握图文布局的方法。(3) 学会“设置透明颜色”按钮的用法，并能在网页制作过程中灵活运用。(4) 学会使用“自动缩略图”技巧来加速网页的下载。二、教材分析与教法建议添加图形，如图片，动画和视频到站点上时，对网站的影响有两

28、个，一是站点大小将会迅速增加，二是延长网页的下载时间。若 Internet 服务提供商限制站点大小，则图形的大小、质量，类型和数量就是重要的考虑因素。本节主要介绍网页中的图片处理方法，通过这些处理，不但使网页更美观，还应使网页更实用。在教学过程中应讲明各种操作的目的和方法，让学生理解为什么要进行这些图片处理，并在实际制作中灵活运用。(1) 图文布局在网页中，图片与文本的对齐方式有十种，分别是：左对齐：图片放在左边界处，文本在右侧环绕图片。右对齐：图片放在右边界处，文本在左侧环绕图片。顶边对齐：使图片的顶部与文本行中最高文本的顶部对齐。文本上方：与文字顶端对齐。相对垂直居中：使图片的中线与文本行

29、底线对齐。绝对垂直居中：使图片的中线与行中最高文本的中间对齐。基线：使图片与文本基线对齐（紧靠文本底下的一条无形的直线）。相对底边对齐：使图片的底部与文本对齐。绝对底部对齐：使图片的底部与行中文本的底部对齐。水平居中：使图片的中线与行中最高文本的中间对齐。每种对齐方式的名称和实际对齐效果不够明确，可以安排学生自己实践，然后总结得出具体结论。(2) 图片定位和图层在FrontPage 2000中，对图片与文字同等处理，所以图片只能放置在文字之间，且只能在文字和图片之间进行移动。如果页面上没有任何文字，那么图片只能放置在第一行首位，使用直接拖动图片的方法，无法移动图片的位置。这一知识点可以通过设问

30、的方法，先在新建网页中插入一幅图片，然后要求学生改变图片位置，当学生无法完成任务时，引入绝对定位的概念，同时介绍图片工具栏。当网页中插入若干图片时，这些图片可以重叠起来，形成特殊效果。在系统默认的情况下，后插入的图片将重叠在已有图片之上，这样就形成了图层。虽然通过演示可以明显看出效果，但教师应有意识地选择一些背景透明的图片来演示，通过几幅图片重叠，形成一幅完整的图片。这样，不但可以说明重叠的效果，还可以在以后学习链接时将这些图片分别链接到其他网页，由此，学生可以进一步理解重叠图片的意义所在。(3) 透明所谓透明，是指将图片中的一种颜色擦除（通常是背景色），这样页面的背景颜色就可以透过来。通过教

31、师的演示，学生不难看出透明的效果，而教师则要进一步说明一个GIF图片只能有一种透明色，无论选择擦除哪一种颜色，图片各处的该种颜色都将消失。接下来可以引导学生利用“图片”工具栏的相应按钮，对图片进行各种处理，如调整亮度、对比度、凹凸效果、黑白效果、旋转等，学生对图片处理较感兴趣，因此可以让学生自己操作，体会各种特殊效果。除了“透明”属性外，GIF图片还有“交错”的效果，这种效果类似于电视特技中的“淡出”，开始图片上仿佛有一层薄雾，然后图片越来越清晰，直到图片完全下载。这种效果看起来好象图片下载的速度较快，其实不然，它只是让访问者在等待页面下载的时间里有内容可看，而不必等到图片完全下载后才显示页面

32、。同样如果将JPG格式的图片属性设置为“渐进”，其效果与GIF格式的“交错”类似。要定义图片的“交错”或“渐进”效果，可以右击图片，在快捷菜单中单击“图片属性”，打开“图片属性”对话框，单击“常规”标签，在“类型”中勾选相应属性即可。(4) 自动缩略图当网页中采用大型图片时，可能需要花很长时间来下载（取决于访问者的系统），这时，可能导致访问者在等待中失去耐心。因此建议使用较小的图片。如果要改变网页中图片的大小，既可以通过改变图形的高度和宽度属性来调整图形大小，也可以在网页上直接拖动图片四周的控制点来调整其大小。但是应该向学生明确这样的操作仅仅通过更改 HTML 标记符使图片在屏幕上显示得较小，

33、而实际的图片文件大小和下载时间并不会更改。因此，真正要减少图片文件的大小和下载时间，必须先在页面上重置它的大小，然后单击“图片” 工具栏“重新取样”按钮，这样，文件大小才会减少以匹配较小的尺寸。另外，可以将图片转换为JPG格式，并降低质量设置，增加文件的压缩率而使文件大小减少。如果一定要使用大图片来说明问题，则可以通过缩略图来解决。缩略图是能快速下载的图片的缩小版本。使用 FrontPage 2000自动缩略图功能可以自动创建缩略图，且缩略图具有指向原始图片的超链接，访问者单击它即可通过超链接看到原来的图片。 第四节 网页框架一、教学要求(1) 理解框架结构的含义和用途。(2) 掌握建立框架网

34、页的方法。(3) 掌握框架网页的保存方法。二、教材分析与教法建议在本节课的教学过程中，应首先通过框架网页与其他网页的对比，引导学生理解框架的含义：框架是一种独特的结构，可以将一个页面分割成几个不同的组成部分，每一部分都是一个单独的整体，可以显示一个网页，这样，在浏览器的一个窗口中可以同时浏览多个网页。然后再演示两种不同框架结构网页，一种框架设计结构一目了然，让人轻松穿梭其间；另一种框架设计却将窗口分割得乱七八遭，让人越看越乱。通过对比，让学生知道设计框架的目的，并深化为哪些网页的内容可以使用框架、如何使用框架。通常在以下几种情况下使用框架较为理想：(1) 目录表：在页面中使用一个具有链接的目录

35、表，将目录放在一个固定的框架中，通过另一框架观看每一目录所链接的各个页面。如将窗口分为上下两个框架，上面显示产品目录，下面显示每种产品的型号、价格等详细信息。(2) 固定的页面内容：如页面大标题。(3) 更好的表单和效果：可以在一个框架中建立表单，在另一个框架中显示表单统计结果，这样更为直观和迅捷。在FrontPage2000通过框架网页模板建立框架，其中共有10种不同结构的框架，应用于不同的目的，根据需要选择其中的一种，然后分别指定各框架中的网页文件，也可以直接在框架中进行网页制作。如果FrontPage所提供的基本框架样式都无法满足需要，可以先选择一个较为接近的框架进行套用，然后再通过“拆

36、分框架”菜单将框架拆分成所需的样式。在制作过程中，如果发现各框架大小不合理，可以通过拖动框架边框进行粗略调整，也可以通过“框架属性”对话框进行精确调整。从“框架属性”对话框可以看出框架大小有三种不同的度量单位，除了可以设置框架所占的百分比和像素外，还可以设置各框架的相对比例。最后，应该向学生说明并不是所有的浏览器都支持框架的设置（如CDIDA），因此可能有人无法浏览到这一网页。因为框架网页可能同时包含几个网页，因此在保存框架页面时，需要根据窗口提示，为不同的网页命名。单击“保存”按钮，在“另存为”对话框中包含一个框架页面图，其中一个框架会处于高亮状态，表示正在保存的页面，根据提示，分别给不同的

37、网页命名。今后如果只修改了其中的一个页面，需要保存时，可单击该页的框架，然后单击菜单“框架”、“保存页面”。第五节 网页表格一、教学要求(1) 理解表格在网页制作中的特殊用途。(2) 掌握绘制表格的方法并能根据实际需要设计表格。(3) 掌握设置表格的边框、背景、大小的方法。二、教材分析与教法建议本节主要通过主页页面的设计和编排，介绍网页表格的制作和编辑。在Word2000中，学生已经学会表格的三种制作方法，因此本课应该侧重于网页表格与Word2000文本表格的不同之处。主要是表格的功能不同，网页表格的功能已不仅仅是组织数据，而更多地被用来设计页面布局，这样既可以充分利用整个页面空间，同时也使页

38、面更整齐、美观。通过对主页页面的观察和分析可知：在网页制作中，可以先设计版面，然后利用表格功能将页面划分成若干单元格，每一单元格填充相应文字或图片，再对表格进行美化后，即可产生所需网页。过去用HTML代码产生表格，不仅代码复杂，而且稍不注意就容易出错，给调试工作带来麻烦。FrontPage具有增强的表格制作功能，可以使用制表工具，直接在网页上画出任意形状和大小的表格，使用鼠标更可以自由改变表格的大小和宽度，因此，在FrontPage中制作网页，设计者可以将更多的精力放在版面设计上。在网页中建立表格的方法与Word相同，所以该部分可以安排学生自己完成。教师总结时说明：因为内容和版面的需要，网页中

39、的表格一般都较复杂，所以，大多采用“手动制表”方法。在FrontPage中可以对表格进行的行列操作很多，如表格中的单元格可以再进行拆分或合并等。也可以将表格转换成文本，甚至可以将现有的文本转变为表格。已绘制好的表格，可以在单元格中插入文字、图片、表单字段甚至另一表格。通过“表格属性”和“单元格属性”的设置，定义表格的大小、背景、边框等参数，使之更美观。最后提醒学生为避免因访问者浏览器设置的不同而产生不同的效果，在设计表格时，最好采用相对大小和相对位置的设置（按百分比）。第六节 表单的制作一、教学要求(1) 理解表单网页的用途。(2) 掌握六种表单字段的含义。(3) 掌握表单网页的制作方法，能够

40、与表格技术相结合，制作美观实用的表单。(4) 了解表单资料的收集原理。(5) 了解搜索表单的用途。二、教材分析与教法建议本节介绍表单的建立和表单资料的收集，在教学过程中，首先要让学生理解表单的作用。通常情况下，访问者浏览页面是为了阅读文章、查找信息，他们所做的仅仅是在不同的链接之间进行简单的浏览和单击，因此这是一种单方面的对话。如果网站设计者想统计访问者信息，了解他们的意见和建议，则必须通过表单进行。一般的网站都有访客留言板或用户注册表，通过展示某一网站的留言板，学生不难理解表单的功能。接下来通过表单网页向导建立一个联络信息表单，这样学生对表单的建立有了初步的印象，并通过对这一表单内的各种字段

41、的认识，熟悉六种字段的功能。然后再通过逐个插入表单字段的方法，建立个性化表单。在这一过程中，学生不仅要学会各种字段的设置方法，更重要的是应该有统筹规划的意识，并与前面所学的表格知识相联系，设计出紧凑合理的表单。为了让访问者知道应该在文本框中输入什么信息，应在各字段前增加文本标识。为了让服务器知道哪几个单选按钮或复选框用来回答同一个问题，则必须为每一个单选按钮组或复选框组指定一个内部名称，并为每个单选按钮或复选框指定一个值。这些内部名称不会被显示在表单上，但可在表单结果中用来标识该单选按钮组或复选框组。每一个单选按钮组中可以指定一个单选按钮作为默认选项。每一个表单外都有一个虚线框，内部都有一个提

42、交按钮和清除按钮，单击清除按钮，将清除所输入的信息，重新输入；单击提交按钮，表示访问者信息输入结束，同时把这些数据送回服务器。服务器根据访问者提交的数据，进行资料的收集和处理。应该让学生明白该过程在服务器端通过CGI或ASP程序来完成，如果没有配套的CGI程序则无法进行。FrontPage使用了一些具有特定功能的程序来取代CGI的功能，因此，只要设计表单时指定要以哪些程序来处理，这些程序就会自动添加到网页中，不需要专门撰写CGI程序来配合。当然，网站所在的服务器必须支持FrontPage Server Extentions，否则表单无法产生作用，所以大多数学校的教学演示用计算机都无法进行表单资

43、料的收集和整理，因此向学生解释产生这一现象的原因非常必要。缺省状态下，FrontPage将表单结果以一个文件形式保存在网站中，这个文件位于_private文件夹下，名为results.txt，可以通过任何文本编辑器进行查看。每一位访问者提交表单时，FrontPage就将表单结果增加到上述文件中。当然也可以将表单结果发送到一个E-mail地址中，或者把所获得的数据发布到另一个页面上，通过主页上的标题链接，让所有人都可以看到结果。在搜索表单部分，应让学生搞清它的功能仅限于在本网站内部进行搜索，帮助访问者迅速查找所需主题，而不是Web上的搜索引擎。搜索表单的建立方法比较简单，但在创建时应注意以下几个

44、问题：(1) 应向访问者说明如何使用搜索表单，并将搜索表单紧接在解释文本之后。(2) 搜索表单不会对大约300个一般的英语单词进行搜索，例如“a”、“the” 等等。(3) 在站点中保存网页的时候，FrontPage 将会把所有新单词添加到站点的文本索引中。文本索引是不断增加的：新的单词会被加入到索引中，但旧的不会被删除。要创建新的文本索引并去除过时的单词，须依次单击菜单“工具”、“重新计算超链接”。注意：如果有很多外部超链接，这个过程可能会用几分钟时间，因为 FrontPage 必须连接并检查每个超链接。 (4) 如果站点是基于服务器的，并且服务器运行 Microsoft FrontPage

45、 服务器扩展，则FrontPage 会根据包含在网站所有网页中的单字自动创建文本索引。创建搜索表单来让站点访问者对指定单字或短语搜索您的站点。当访问者提交搜索表单， FrontPage 检索文本索引，并且按匹配程度显示指向包含搜索文本的网页的超链接列表。第七节 创建超链接一、 教学要求(1) 理解超链接的概念，了解链接的种类。(2) 学会规划网站的各个链接，并正确完成。(3) 掌握创建超链接的方法。二、教材分析与教法建议WWW的精彩之处就在于把大量的信息和页面通过各种链接组织起来，单击含有超链接的文本或图片，可以实现页面的跳转。在前面的学习中，学生已经掌握了大部分网页制作技术，并已制作出了68

46、个网页，如何将这些网页组合成一个有机的整体，是本课的主要任务，也是最终形成作品的时机，因此，本课内容是本章的重点。在教学过程中，教师可以通过先回顾第四章的有关知识，引入本课的主题-超链接，来说明每一个链接都有链接源和链接目标，根据链接目标的不同，一般可以将链接分为三种：一种是与绝对网址的链接，通常是不同网站之间的链接；另一种是相对网址的链接，通常是同一网站中不同网页之间的链接；第三种是同一页面内部的链接，通常是书签式链接。然后，展示课本示例网站，单击各种类型的超链接让学生直观地看到链接源和链接目标。介绍了超链接的种类、作用后，再进一步说明网站中的链接应事先加以规划，这一理念从规划网站结构开始，

47、贯穿于整个网站制作过程，目的在于使访问者轻松浏览网站。接下来进行超链接的设计和制作，在此过程中，教师可以先介绍一下如何创建超链接，然后让学生自己动手实践在同一页面内部的链接，如“返回页首”的链接，并进行预览，教师补充说明这一种链接的使用场合。然后由教师讲解“书签”链接，这是本课的一个难点。书签是网页上被标记的位置或被标记的选中文本。作为超链接的目标，一个书签可应用到一个字符串或一个网页的指定位置上。在URL中，书签之前会有一个#符，称之为锁定标记。通过书签的链接，访问者就不必从头到尾浏览，也不必通过滚动条寻找所需资料。通常，如果一个网页内容较多，为便于浏览，可以提供几个书签和索引标题，并创建页面内部链接，让访问者迅速从网页中的特定位置开始浏览，当然还应提供返回页首的链接。在课堂教学过程中，教师可以先通过滚动条展示一个较长网页的全貌，再通过单击各个指向书签的链接，来浏览同一网页，使学生体会使用书签的优点，进而讲述要建立书签式链接，必须先定义好书签，才能进行链接。教师演示完毕后，除了让学生依例完成操作外，还应提出“在不同网页之间可否进行书签式链接？”，让学生进行探索和实践，并找出正确答案。在不同页面之间的链接部分，由于操作上的相似性，教师应重点突破框架间链接的目标框架这一难点，首先应让学生分清链接的五种目标框架的含义，并根据需要选择其中的一种。网页默认值：Ma