第5章网页制作教参

高中—1教参第五章第1页第五章网页制作本章概述本章运用FrontPage2000软件的空白网站模板，介绍了网页制作的各种方法和技巧，使学生在了解什么是网页的同时，熟悉常用的网页元素，通过资料的收集和整理、网站结构的总体规划、网页技巧的运用和实施，能够独立制作有主题的个人网站，并上网发布。通过本章的学习，使学生的综合运用能力得到进一步提高。本章教学要求与课时安排1．本章教学要求(1)掌握FrontPage2000的启动和退出方法。(2)掌握网页制作的各种技术和方法，包括文字处理、图片处理、框架、表格、表单、链接等。(3)学会使用FrontPage2000导航视图组织网站结构。(4)学会使用报表视图管理网站。(5)了解动态网页制作的一般方法。(6)学会申请免费主页空间并上传网页。2．教学内容及课时安排第一节网页制作基础知识约1课时第二节网页的建立约2课时第三节网页图片处理约2课时第四节网页框架约2课时第五节网页表格约2课时第六节表单的制作约2课时第七节创建超链接约2课时第八节动态网页制作约2课时第九节网站管理约2课时教材分析和教法建议第一节网页制作基础知识一、教学要求(1)了解网页的组成元素，理解网站、网页、主页、HTML等几个概念。高中—1教参第五章第2页(2)了解常用网页制作工具。(3)掌握FrontPage2000的启动的退出方法。(4)熟悉FrontPage2000的操作界面，了解各种视图的用途。二、教材分析与教法建议本节主要介绍网页制作基础知识和FrontPage2000的启动和退出，目的在于让学生了解什么是网页，可以使用哪些工具制作网页，为后面的章节做铺垫。在基础知识部分，有必要让学生搞清以下概念。（1）什么是网站？网站是计算机网络上的位置，它使信息以网页或文档的形式提供给使用浏览器访问站点的访问者。计算机网络可以是世界范围的Internet或Intranet（链接办公室中所有计算机的局域网）。信息可以HTML网页或其他文档格式发布。为了查看站点上的信息，访问者需要使用浏览器程序（如Microsoft(r)InternetExplorer或NetscapeNavigator），通过这些程序将Web站点上的HTML网页翻译为监视器上的文本或图形。（2）什么是网页？网页是全球广域网上的基本文档，用HTML(超文本标记语言)书写，其中可以包含文本、图片、动画、音乐、链接等元素。网页可以是站点的一部份，也可以独立存在。每一个网站都是由若干网页组成的，各网页之间通过链接联系在一起。（3）什么是主页？使用浏览器访问网站时，网站中第一个被执行的文件称为主页，主页的基本功能是帮助访问者轻松浏览网站，其中可能包括有关站点创作者的个人信息、工作部门和公司、指向同一Web站点的其他文档的链接或指向相关内容的其他站点的链接等内容。为了吸引访问者，主页的页面要美观、内容要做到组织严密并且要提供有用的信息。不同的WEB服务器把不同的文件名识别为主页，多数服务器将index.htm识别为主页，也有的服务器将home.htm、welcome.htm、default.htm识别为主页。在FrontPage中引入其他网站时，如果该网站的主页文件名与FrontPage可识别的主页文件名不同，那么FrontPage会自动将其主页文件名更改为index.htm。（4）什么是HTML？HTML(超文本标记语言)是一种用于全球广域网上文档中的标准标记语言。该语言使用内嵌代码或标记来描述网页内容和外观，指示Web浏览器应该如何显示网页元素，以及如何回复使用者的操作。由于HTML语言的跨平台功能使得HTML成为在其他不兼容计算机系统间交换信息的理想方式。HTML的缺点在于标记不能广泛使用，因此创作者通常无法预料最终网页在访问者浏览器中显示的外观。由于市场上的浏览器软件有好几种，尽管所有的浏览器能够转换多数HTML标记，但是某些标记只有特定类型的浏览器才能处理。因此，如果使用了这些标记，则访问者可能不能以创建网页的方式查看该网页，所以，最好在页面上注明建议使用的浏览器类型。高中—1教参第五章第3页搞清以上概念之后，引入本课的课题——网页制作，要制作网页，首先就需要寻找一种合适的工具。该部分主要让学生了解常用的网页制作工具，从发展过程来看，这些工具的使用由难到易，其中的CDIDA软件是信息学奥林匹克竞赛江苏省应用能力竞赛所使用的网页制作工具。对于熟悉HTML语言的人而言，任何一种文本编辑器（如记事本、WORD、WPS、写字板等）都可以用来制作网页，方法是直接键入网页的HTML标记，然后在Web浏览器中将其打开。许多字处理程序（如MicrosoftWord、WPS2000等）有HTML转换功能，可以将已有文档另存为HTML文档。但是，大多数转换器只将HTML格式标记添加到文本中，有时不保留文档的原始外观。使用脚本方式和其他工具的组合，可以为Intranet或Internet建立动态Web站点。Microsoft®VisualInterDevTM是功能强大的Web应用程序开发工具，使用这种工具可以快速开发交互的Web站点。VisualInterDev以数据库工具为特征，使连接到Web站点的符合开放数据库连接(ODBC)的数据库更加轻松。对于大多数人而言，希望使用不需要懂得HTML的创作工具。这些工具以“所见即所得”的用户界面为特征，如MicrosoftFrontPage、flash、dreamweaver等。使用FrontPage2000制作网页，可以将主要精力放在内容的组织和版面的设计上，无须用户输入难记的HTML代码，由FrontPage自动在幕后生成所有的HTML代码。当然，尽管使用FrontPage制作网页不需要学习HTML，但懂得一些HTML知识更有好处，因为HTML在不断地发展，许多新的标记在不断涌现，为了能够在网站中使用这些最新效果，在当前的FrontPage版本不支持新效果的时候，可以直接使用HTML语言来实现。介绍常用工具后，强调本书选择FrontPage2000的原因在于：FrontPage2000除了能进行网页编辑外，还能进行网站的管理和维护。为突出这一功能，可以通过以下几点进行描述：（1）正因为它具有强大的网站创建、维护和发布功能，所以凡是在FrontPage中创建或由FrontPage维护的站点，都有一个特殊的站点名称：FrontPageWeb，与其他网站不同之处在于它们可以由FrontPage来增加一些独特的性能，而使用其它网页制作程序生成的网站文件夹，则必须通过FrontPage转换器转换后，才能在FrontPage中打开。（2）在FrontPage中，可以建立新网站、引入已有网站和删除网站。在此意义上，FrontPage的功能类似于windows98资源管理器，不同之处在于FrontPage只管理与网站相关的网页文件以及网页中所使用的图片、动画等文件。为便于管理网站，每一个FrontPageWeb站点都含有一套标准的文件夹，在FrontPage中可以看到以下两个文件夹：_private文件夹：其中保存正在建造中的页面、参考文件和其它一些重要数据，虽然这个文件夹可见，但存在此文件夹下的文件对于各种浏览器来说是隐藏的。images文件夹：该文件夹专门用来存放图片，凡是网页中出现的图片、动画等文件，最好保存在此文件夹中，使网站保持清洁。在Windows98资源管理器中观察网站文件夹，还可以看到另外一些文件夹，如_vti_cnf、_vti_pvt、_borders等，其中存放的是一些关于站点的重要数据，仅供FrontPage自己使用。高中—1教参第五章第4页（3）在网站的创建、管理和维护过程中，FrontPage会跟踪网站中的所有文件，因此制作网页时，最好先创建一个网站，然后再制作网站中的具体网页。同样，删除网站时，也要在FrontPage中进行，FrontPage会将网站中所有的文件，包括网页、图片、动画、声音等文件全部删除。为了充分发挥FrontPage2000的网站管理功能，制作网页时，最好先创建一个网站，然后在此网站中进行各网页的制作，FrontPage2000利用内置的模板和向导简化了网站的创建过程，这些模板是一些完成了页面间链接的样板站点，使用时只要将文字和图形增加到页面中即可，如果这些模板不能满足需要，也可以直接使用空白站点模板来设计制作自己的站点。在教学过程中可以先建立一个个人站点，用来介绍六种视图方式的用途，然后将课本中的例题作为学生练习，进行巩固。在FrontPage2000中，有六种视图方式，每一种视图提供关于网站的不同信息，可以用来有效地管理网站。在这一部分必须让学生理解每一种视图的用途和使用方法，以便在以后创建和维护网站时，能够根据需要选择其中的一种来完成任务。其中：网页视图：可以用来创建、编辑、和预览网页，具有所见即所得的特性。文件夹视图：显示站点内容的组织方式，用于管理站点中的文件和文件夹。跟Windows资源管理器相似，在文件夹视图中可以创建、删除、复制与移动文件夹。该视图将工作区分为左右两部分，左侧显示网站中所有文件夹，单击任一文件夹，右侧工作区将显示该文件夹下的内容。在“文件夹”视图中，可以移动某页面的位置，FrontPage将自动更新与该页面有关的所有链接。报表视图：用来分析站点内容。如计算站点中的所有文件大小、显现出那个文件没有链接到其他任一文件、指出慢速或过期的网页、以工作或是它们被分配的人和其他等方式来把文件分组。导航视图：用来创建、显示、打印和更改网站导航结构的视图。在这个视图中可以清晰地看见整个网站的组织结构（工作区上方）和文件组成（工作区下方），拖曳水平分割线可以改变上下窗口的相对大小。将工作区下方的文件名拖动到工作区上方的组织图中，将在网站中增加一个页面，同时FrontPage2000会依据结构图的形式自动产生链接；在组织图内部拖动页面图标，将改变网站结构；双击页面图标，可以进入“网页视图”对页面进行修改。超链接视图：显示来自和指向站点中每一个网页的所有超级链接。该视图以图形的方式显示网站中各文件之间的链接情况，网页之间的链接通过箭头来标志。当页面中含有许多链接时，为了更清晰地显示链接情况，可以通过工具栏按钮来控制显示某类链接，如图像超链接、重复超链接、页内超链接。如果网站中含有一个断开的链接，那么这一断开的链接显示为一根断开的线和一个撕开的页面图标。如果某页面图标旁边出现红色三角，表明该页出现某类错误，要解决错误，可以右击页面图标，在快捷菜单中单击“属性”菜单，打开“属性”对话框，此时“错误”标签已经打开，在“说明”框中显示有关该错误的详细说明。任务视图：列出站点中要完成的任务。高中—1教参第五章第5页所谓任务，是指维护WEB站点所需要完成的行动。FrontPage2000提供的“任务”视图，类似于一个工作备忘录兼计划表，其中记录了尚未完成仍需完成的任务，如处理超链接、更新图象、增加内容等。在WEB站点初步建立之后，需要定期或过一段时间进行更新，保持站点信息的时效性，否则过时的信息无法提起访问者的兴趣。随着站点规模的扩大，需要搜集和发布的信息也随之增加，这时，网站管理员需要跟踪所有的修改请求，并把它们作为任务分配给适当的设计人员进行更新。因此，任务列表被网站的所有设计者所共享，并以列表方式组织任务，提供每项任务的详细信息，还能对每项任务进行详细的跟踪。在“任务”视图中可以添加未完成任务的名称，设置工作的优先顺序以及负责此任务的工作人员，以此来简化站点的维护工作。在FrontPage网页视图中，有三种工作方式：普通、HTML和预览。既可以在普通方式下输入文字、插入图片等来编排网页，也可以在HTML方式下中输入HTML代码来编排网页，当然一般情况下都不采用后者，而是通过HTML方式查看HTML代码，必要时修改其中的代码，解决实际应用中出现的某些无法解决的小问题。在HTML方式下，可以直接输入HTML代码，也可以使用“查找和替换”功能对范围广大的代码进行修改。当出现无法识别输入的HTML