第九章教案初稿.docx

第九章教案初稿.docx

《第九章教案初稿.docx》由会员分享，可在线阅读，更多相关《第九章教案初稿.docx（44页珍藏版）》请在冰豆网上搜索。

第九章教案初稿

第九章FrontPage网页制作

目录

第一课

前言

第1节FrontPage2000概览

⏹FrontPage2000主界面介绍

⏹相关术语（站点、HTML文件、URL、主页）

⏹创建网站的流程

第二课

⏹4个任务和2个实验

第三课

第2节创建与管理Web站点

⏹相关概念与术语（网站开发的环境、WebServer服务器的设置、SSL（安全套接字层））

⏹4个实例（利用模板创建Web站点、利用向导创建Web站点、打开与关闭站点、删除站点）

⏹1个实验

⏹本节小结

第3节网页设计初步

⏹实例1网页的基本元素（补充：

色彩使用原则）

⏹实例2网页的设计原则

⏹实例3新建、打开、保存与预览网页

⏹实例4设置网页属性

⏹实例5输入文本、特殊符号与注释

⏹实例6文本选择、移动与复制

⏹实例7文本格式

⏹实例8编号与项目符号应用

⏹实例9运用边框与阴影

⏹实例10文本的查找与替换

⏹实例11网页中元素的定位与分层

第四课

第4节在网页中使用图片

⏹FrontPage适用图片的的种类与转换原则

⏹实例1在网页中插入图片

⏹实例2在网页中插入剪贴画

⏹实例3修改图片的属性

⏹实例4使用“图片”工具栏编辑图像

⏹实例5保存含有图片的网页

第5节使用超链接

⏹相关术语（超链接、绝对URL和相对URL、超链接三要素）

⏹实例1创建文本超链接

⏹实例2创建E-mail超链接

⏹实例3为图像创建超链接

⏹实例4在图像上创建热点

⏹实例5修改和取消超链接

⏹实例6使用书签链接

第五课

第6节丰富和修饰网页内容

⏹实例1插入水平线

⏹实例2插入时间戳

⏹实例3插入网页横幅

⏹实例4主题应用及修改

第7节表格创建与编辑

⏹实例1创建表格的四种方法

⏹实例2单元格编辑

⏹实例3设置单元格属性

⏹实例4表格编辑

第六课

第8节制作动态网页

⏹实例1使用动态HTML效果

⏹实例2设置网页过渡效果

⏹实例3使用横幅广告管理器

⏹实例4使用悬停按钮（现已改为交互式按钮）

⏹实例5使用站点计数器

⏹实例6使用字幕

⏹实例7使用包含网页与预定图片

⏹实例8替换信息

⏹实例9使用搜索表单

⏹实例10运用视频

⏹实例11使用音频

第七课

第9节制作框架网页

⏹实例1创建框架网页

⏹实例2框架编辑

⏹实例3保存框架网页

⏹实例4框架网页应用

第10节站点测试与发布

⏹实例1测试站点

⏹实例2发布站点

⏹实例3使用任务

第八课

第九课

第十课

第十一课

第十二课

第一课

前言

互联网是当今社会生活必不可少的一部分，不熟悉它的人一定会被网络时代抛弃。

比较起来，做网页倒显得不那么重要。

但是能在网络提供的平台上充分展示自己的才华，与学生相互交流，结交有共同爱好的网友，那岂不是使网络更加为我所用。

近几年来随着计算机网络的发展，网页型课件正呈现方兴未艾之势，这主要是由于它与现代教育技术的紧密结合，适合于学生自主学习和分层教学，学生可根据自身的时间、水平等实际情况，自主地掌握学习进度、学习内容和学习时间。

在大力提倡探究性和自主型学习的今天，采用网页型课件进行教学，无疑是一种很好的学习方法。

FrontPage很适合制作网页型课件。

本章中通过两个网页型课件实例的制作，来介绍FrontPage的基础知识与制作网页型课件的基本方法。

通过“十五”期间的240学习，大家已经基本掌握了用微软的Office中的Word来制作文档，用Excel制作电子表格，用PowerPoint制作演示文稿（课件），同样可以用FrontPage制作网页型课件。

从本节课开始，通过学习网页制作的基础知识中学到一些入门的技巧和制作方法，希望你能坚持学习下去，直到成功。

那么如何才能制作出漂亮的网页呢？

制作网页是非常简单的，而且从某种程序上来说，这也是网络的一大优势，那就是你不必是一位计算机程序员便可以创建出一个简单的网站，你所需要的是一台电脑和上网的设备，收集准备你的所有素材（包括文字、图片、音乐、视频等）。

一、静态网页与动态网页

在Web页上浏览的页面大多数是静态页面。

静态页面指的是由纯粹的HTML语言（超文本标记性语言）组成的页面，没有交互性，也就是一但被请求，下载到本地的浏览器上，它的内容就是固定的，不会因用户不同的请求而自动地识别出应该发送哪一个面面，也不会响应用户的查询、更改等请求。

动态网页ASP（ActiveServerPage）是用来创建动态web页或生成功能更强大的Web应用程序。

ASP是包括HTML标记，文本和脚本命令的文件。

ASP使得存放页面和数据的Web主机与来访问者的客户机之间具有交互性。

就客户方端方面，ASP就是一份标准的HTML文档，例如：

各种各样的留言板，当用户输入信息并提交后，服务器通过页面接受信息，把它保存在硬盘上，或输出到其他页面。

客户端与服务器端互相传递消息，这是动态网页的基本特征。

二、本章内容安排与目的

本章选用网页制作软件FrontPage作为教学学习内容，学完本课程后，可根据个人的特长，充分发挥创造力和想象力。

目的在学好理论知识的同时，也能逐步积累经验，提高自己的动手操作能力。

FrontPage是微软推出的一套所见即所得的（WYSIWYG）的网页编辑工具，无需编程，只需拖动鼠标即可完成十分专业的网页制作，并与Office家族中的应用程序紧密集成，自推出来受到许多网页设计者的喜爱，是初学者的首选工具。

尤其适用于用户端（客户端）网页制作。

目前最高的版本是FrontPage2003。

三、一点小建议

1．如有美术才能

可以试用PhotoShop来处理图片，号称“思想的照相机”，它不仅可忠实地反映现实世界，更可实现很多现实生活中看不到的虚幻意境，目前最新版本是9.0。

CorelDraw也是一个很不错的图形处理软件。

2．如有音乐才能

想自己剪辑某段音乐，或对一支曲子进行理想的配器，软件：

Goldware。

另外：

Premier、会声会影等可进行专业的数字视频编辑，它可配合多种硬件进行视频捕捉和输出，提供各种精确的编辑工具与文件管理特性，能产生广播级质量的视频产品。

四、小结

总的来说，用计算机进行各种创意设计时，最大的难题不是不会做，而是不知道做什么？

这就是所谓的“不怕做不到，就怕想不到”。

对大多数人而言，设计出富有创意的网页不是易事，但积累足够的经验有助于我们进一步提高自学能力，以满足学习并掌握不断出现的新技术。

五、说明

1．本章的采用的FrontPage2000是在WindowsXP操作系统中运行的，浏览器采用微软自带的IE6.0浏览器。

因为FrontPage2000发布的时候，它仅适用于IE5浏览器，所以在IE6浏览器上浏览网页，有部分功能已被FrontPage2003所取代，在此予以说明。

2．本章内容是通过2个实例和1个光盘附带的实例来学习FrontPage2000的，这3个实例作为大家的课外练习。

3．本教材的旨意是让大家通过相关实践与探索来学习FrontPage网页制作，因此拟通过一个简单的介绍，就直接进入实例的制作，介绍FrontPage2000的一些基本操作功能；然后再向大家归纳总结。

第1节FrontPage2000概览

学习目的：

熟悉FrontPage2000的使用环境：

就其本身的使用并无特别之处，因为它是Office2000的捆绑套件，操作方法与其他Windows应用软件相同。

学习内容：

⏹FrontPage2000主界面介绍

⏹相关术语（站点、HTML文件、URL、主页）

⏹创建网站的流程

⏹4个任务和2个实验

一、FrontPage2000主界面介绍

实例1熟悉FrontPage2000界面

1.熟悉标题栏的特点与用法

2.熟悉菜单栏的特点与用法

3.熟悉工具栏的特点与用法

4.了解主编辑窗口与状态栏

[例1]启动FrontPage2000主界面进行简单介绍。

分析：

1.熟悉标题栏的特点与用法

标题栏是窗口最上方的条状区域，它由FrontPage2000窗口的控制菜单、标识与控制按钮三部分组成。

在此用户可以调整窗口大小及位置，甚至退出FrontPage2000。

2.熟悉菜单栏的特点与用法

菜单栏是位于标题栏下方的条状区域，它包括10个菜单，分别是“文件”、“编辑”、“查看”、“插入”、“格式”、“工具”、“表格”、“框架”、“窗口”与“帮助”。

其中包含各种操作命令，用户可以根据需要选择其中的一个完成操作。

而且“框架”菜单比较特殊，是其它Office中没有的。

禁止使用的菜单命令以灰色方式显示，它表示当前状态下此命令无效，必须在进行了其它特定操作之后才能生效。

3.熟悉工具栏的特点与用法

工具栏是以工具按钮的形式为用户提供快捷的主要编辑和管理功能。

4.了解主编辑窗口与状态栏

主编辑窗口位于工具栏的下方，有三部分组成：

左侧是“视图栏”，中间是“文件夹列表”，右侧是“编辑区”，也称为“主编辑窗口”。

视图栏我们将在实例2中作详细介绍。

编辑区位于视图栏的右侧，它是管理站点、编辑网页、预览网页的主要工作区。

通过切换不同的视图，编辑区的组成结构会以不同的形式出现，水平地拖动视图栏与编辑区之间的分界线，可以改变编辑区的大小。

状态栏位于FrontPage2000主编辑窗口的最底端，提供所选菜单或工具栏的功能说明。

在HTML代码的编辑方式下，可以在此直接得到光标所在的行和列。

在状态栏的右侧给出一串数值，代表假设的网络传输方式（14、4K、28、8K、56、56K、ISDN、T1、T3）和从Web上下载当前网页所需的时间，在制作网页的时候多关注一下这里，将会提醒您制作的网页尽量小，下载时间尽量要短。

这样，您的网页才会受人欢迎。

实例2理解FrontPage2000的视图

1.熟悉网页视图

2.熟悉文件夹视图

3.熟悉报表视图

4.熟悉导航视图

5.熟悉超链接视图

6.熟悉任务视图

[例2]新建一个“个人站点”，对6个视图作介绍。

分析：

1.熟悉网页视图

在网页视图中，可以实现网页的编辑、修改功能。

通常有普通、HTML和预览三种查看方式，可以让用户从不同的角度观察网页。

1）普通视图方式

对于大多数网页制作者来说，HTML代码是比较难懂的，而且又相当的麻烦，通常完成一个相当简单的网页也要花很长的时间，排版更是无从下手。

普通视图方式就是为用户提供了所见即所得的方式，让用户轻松地制作网页。

在普通视图方式下，用户可以像在Word中那样直接键入要在网页中出现的文字或者修改排版方式的格式，插入表格、图片、各种网页元素等，在屏幕上所看到的网页与用Web浏览器中看到的网页几乎完全一致的。

至于自己的操作是如何用HTML语言描述的，用户不必去考虑，FrontPage编辑器会自动生成相应的HTML代码。

（展示一个网页的样张）

2）HTML视图方式

尽管FrontPage中可以完全抛开HTML代码，但对一些程序员而言，特别是需要制作高级动态网页的程序员来说，他们往往更喜欢直接用HTML语言来设计网页。

在网上也经常有许多公开的网页特效源代码，这时也需要用到HTML视图方式来这些特效的源代码。

单击FrontPage网页视图底部的“HTML”选项卡，即可切换到HTML视图方式。

方式这时FrontPage2000实际上就充当了一个文本编辑器，可以查看或编辑网页的HTML源代码。

3）预览视图方式

主要用于查看当前网页的实际效果，它实际上是用IE浏览器（也只能是IE）来显示网页。

说明：

FrontPage2000在编辑网页时，会自动在本地硬盘上创建网页的副本，当切换到预览方式下，就打开了副本，就好像网页在服务器上一样。

由于预览方式下看到网页实际上是在本地硬盘上，而不是在服务器上，所以网页中有些特殊的元素（如表单域、计数器等）将不能正常显示。

2.熟悉文件夹视图

文件夹视图是FrontPage2000进行文件管理的视图，显示当前FrontPage站点内容的组织形式。

当打开一个FrontPage站点时，默认显示视图是文件夹视图。

文件夹视图的操作类似于Windows的资源管理器，可以进行剪切、复制、移动和重命名选定的文件。

但与资源管理器不同的是，这里的任何文件操作都会影响到FrontPage2000到站点的结构和超链接。

在完成了文件的复制、删除等操作后，FrontPage2000还会自动更新当前站点的导航视图和超链接视图，使各个文件之间的联系没有改变。

文件夹视图有两个窗口：

文件夹列表窗口和文件列表窗口。

在其它视图中也可以显示文件夹列表，以便用户观察站点的总体情况。

3.熟悉报表视图

报表视图是用来统计、分析并显示站点中的一些综合信息，以便使我们及时发现问题并予以解决。

是一个相当重要的视图。

报表视图包含13种报表，它可以迅速地列出站点中的慢速网页、未链接的网页、最近添加或更改的文件、断开的超链接、组件错误、检查状态、分配、类别、发布状态或签出状态等报表来分析用户的站点。

4.熟悉导航视图

是管理整个站点导航结构的重要视图，在此视图中清楚地展示了站点中各网页之间的层次关系。

在该视图中用户可以新建、显示、添加任务和修改站点的导航方向；也可以通过设置站点的导航结构来管理其中导航栏的工作；还可以放大到指定的节点，并且添加指向外部站点的超链接。

5.熟悉超链接视图

通过图形方式显示了网页中所有超链接的情况，并且能够可视化地查看是否有任何断开的链接。

在“文件夹列表”中选择一个网页，这个文件就被放置在视图中间，它的左面是链接它的文件的文件名，右边的是它所链接出去的编辑操作。

6.熟悉任务视图

在站点的创建与维护中，总是有许多的事情要做，而我们又没有能力一气呵成地完成所有的工作。

为了保证各项工作的顺利进行，用户可以将不是非常关键的事情列为任务，以后再完成。

FrontPage2000为用户提供了良好的任务管理系统，能够跟踪有哪些任务是需要被完成的，这些任务分配给了谁，并且能够迅速地查看任务的状态、说明和优先级。

二、相关术语

1.站点（WebSite）

站点指的是因特网中的电脑主机，是许多网页、图片、多媒体及相关文件的集中处，在一个服务器中可包含多个站点。

2.HTML文件

用户通过FrontPage（或Dreamweaver）等软件设计的网页实际上包括两类文件，一类是HTML文件，一类是网页中使用的图像文件。

HTML定义了网页中各种元素的位置和外观，图象是网页的素材。

HTML是英文HyerTextMarkupLanguage的缩写，中文意思是超文本标记语言。

它是通过嵌入代码或标记来表明文本格式的国际标准。

用它编写的文件扩展名是.html或.htm，它们可供浏览解释浏览的文件格式。

HTML是用来编写网页所用的语言。

HTML本身非常简单，真正困难之处是如何设计出亮丽、出色的网页，而这通常与计算机操作水平的高深无关，关键之处在于是否有艺术天分和经验累积有关！

3.URL（统一资源定位法）

URL是Internet上的服务及位置的标准表达方式，最主要的目的是希望让所有的网络资源，都能用一种统一的格式就可以定位找到。

URL由三部分组成：

服务名称/主机名称/请求，如。

http就是所谓的“超文本传输协议”，它是国际互联网上传输超文本文件用的传输协议。

4.主页（HomePage）

主页是指进入网站的第一个画面。

由于几乎全部的网站都将所有功能放在主页上，加上许多人对网站的印象完全来自于主页，因此主页几乎已经成为WWW的代名词。

三、创建网站的流程

主要步骤包括：

分析：

1．创建站点

主要包括：

创建空白站点、利用模板新建Web站点、打开/关闭站点、删除站点、查看站点结构、利用向导导入站点。

2．创建网页

主要包括：

创建空白网页、根据现有网页新建网页、利用模板新建网页、保存网页、预览网页、打开/关闭网页、设置网页属性。

3．规划网页布局

主要包括：

创建表格、表格基本操作、设置单元格属性、创建框架网页、设置框架网页、保存框架网页、调整框架。

4．编排网页内容

主要包括：

插入文本、插入多媒体、创建超链接、创建窗体、应用主题与样式、设计数据库访问页面。

5．站点管理与发布

主要包括：

检查站点、发布站点、管理站点、站点安全、宣传站点。

第二课

任务1创建网站

新建网站就是设置存放网页及相关数据的文件夹。

若对初学者而言，使用FrontPage提供的网站模板不失为一个好的建议。

操作步骤

1.【文件】→【新建】→【站点】，选择所需模板，此处选择【个人站点】，并指定新站点的位置。

2.单击【确定】，系统会自动生成若干网页。

3.观察中间栏的文件夹列表区。

4.双击Index.htm，这是系统默认的主页。

说明：

新建站点中两个文件夹，_private和images，前者存放私有文件，后者存放网页中用到的图片，另有几个隐藏文件夹，主要存放站点的信息及FrontPage服务器的运行程序。

任务2导航栏、共享边框与主题

也是以“任务1”为例。

1．导航栏

本站点一些主要网页的索引，以便用户在浏览网页时能快速找到相关网页。

导航栏由一组按钮或文本链接组成，代表页间的链接关系。

它根据站点的导航结构图自动建立的。

导航栏的顶端通常是站点的主页。

然后是与之保持联系的从页（子页）。

一般情况下，根据人们的使用习惯，可将导航栏放在网页的左侧或顶端。

操作步骤

1）打开站点后，选择【导航】视图。

2）导航结构可通过用鼠标拖动网页即可轻松实现。

3）打开网页，确定所要插入导航栏的位置。

4）选择【插入】→【导航栏】，可对导航栏进行各种及设定编辑。

2．共享边框

希望在各网页中都显示的内容，它通常包含导航栏以及诸如公司标志等在每个网页上都想要显示的内容。

共享边框出现在网页的周围，可把文本、链接、导航栏等元素添加到共享边框内。

另外一个重要特点就是在当前站点网页指定的共享边框后，所有网页都将共享相同的边框。

这样也方便用户修改。

操作步骤

1）在网页编辑视图下，选择【格式】→【共享边框】，或用鼠标单击右键网页空白区，选择【共享边框】。

2）选择共享边框应用的范围，注意有两个范围选项：

一个是所有网页，另一个当前网页。

3）选择确定共享边框的位置。

3．主题

一组可应用到网页上的设计组件和颜色方案，可将选定主题应用于所有网页或当前网页。

操作步骤

如希望统一更换网页的风格，【格式】→【主题】，在【主题】中，用户可设置将选定主题用于所有网页可当前网页，以及主题使用的哪些元素。

说明：

在编辑网页时，光标会变成另外一种形状，显示这种形状在FrontPage中有特殊的意义。

导航栏中组织网页时，导航栏是严格的树形结构，每个图标只能有一个页面。

任务3新建与编辑网页

网站的建立实际上就是一个网页不断更新的过程，其主要工作：

一是不断对原有网页内容进行更新；

二是创建新网页。

新建网页，若从【文件】→【新建】→【网页】菜单，并可选择合适的网页模板，或直接按常用工具栏按钮产生一个空白网页。

操作步骤

1．文件夹中双击index.htm。

2．任意位置单击鼠标右键，选择【网页属性】。

3．修改各种网页属性。

4．网页存盘时注意图片的保存。

任务4站点发布

站点制作完成后，将站点文件夹中的内容传送到internet上某个服务器的过程被称为发布。

也只有将网页发布以后，其他人才能在internet上看到用户制作的网页。

注意：

使用frontPage自带的发布有一个前提：

网页上传的对方所在的服务器中必须安装了frontpage服务扩展程序，因此建议一般使用ftp软件上传网页（在本书的后面章节会作专门介绍）。

实验1

FrontPage2000初步操作：

1．熟悉FrontPage2000界面，了解视图提供的各种功能。

2．利用各种模板创建不同网站，并可灵活设定网站文件的位置。

注意：

第1个任务对熟悉word等office软件的用户并无特别之处，注意报表视图的使用。

第2个任务是对frontpage2000的一个整体掌握。

实验2FrontPage2000快速上手

详例另编。

第三课

第2节创建与管理Web站点

学习内容

⏹相关概念与术语（网站开发的环境、WebServer服务器的设置、SSL（安全套接字层））

⏹4个实例（利用模板创建Web站点、利用向导创建Web站点、打开与关闭站点、删除站点）

⏹1个实验

⏹本节小结

相关概念与术语

1．网站开发的环境

可分为大环境和小环境两个方面。

大环境指的是internet，确切地说是以WWW。

小环境是指Web网站运行的操作系统平台以及开发人员选择的编程语言环境。

2．WebServer服务器的设置

第一步：

要确定电脑已经联入internet，否则只能给自己的机器提供WWW服务，而不会成为真正意义上的Web服务器。

第二步：

安装相应的Web服务器软件，MS的IIS（InternetInformationServer）是Microsoft开发的一种Web、FTP和Gopher服务器，它一般与NT集成，可利用NT的各种功能，并能在Internet上发布信息。

3．SSL（安全套接字层）

是Netscape通过网络，为用户提供安全事务的一种协议。

如果正在服务器中的一个安全区域上建立站点，而服务器支持SSL，可选中此项。

网站就是一组相关网页的集合。

设计者制作了几个网页，并经过组织规划，让网页彼此相连，这样完整的结构就称为网站。

“编辑网站”只是其中一项功能。

用户在对frontpage2000的使用界面有一个大概了解后，就可以着手创建自己的第一个Web站点，网页的编辑一定要在站点中进行。

网站设计者必须牢记这一点。

实例1利用模板创建Web站点

利用系统提供的站点模板创建Web站点的框架，此时实际生成了一系列基本网页。

用户在利用站点模板建立好站点后，可通过修改已有网页或新建网页来制作网站了。

[例1]新建“只有一个网页的站点”

操作步骤

1．【文件】→【新建】→【站点】，选择“只有一个网页的站点”，输入新站点所对应的文件夹的名称。

2．单击【确定】，系统自动生成一个站点。

3．缺省情况下，站点文件夹名即作为网站名称，可在【工具】→【站点设置】命名网站。

4．可在网站内添加空白页或利用网页向导与网页模板来建立网页。

5．在【新建】对话框中选择模板，右侧有模板的简单说明，并可预览其外观。

7．【确定】后建立新网页。

在第1节已演示了个人站点。

另外，客户支持站点用于创建一个给客户提供支持的站点，其面向用户是商贸公司，可满足不同的商务需求。

还允许客户之间的交流，发表对公司商务的评价。

[例2]新建“客户支持站点”作简介

项目站点用于创建一个项目站点。

一个复杂的工程、课题、计划，往往需要多人通力合作，使用该模板将创建一个管理该项目的站点，用于及时跟踪项目的进展，分散各地的工作人员可在站点内讨论、交流，攻克疑难。

（例略）

实例2利用向导创建Web站点

利用系统提供的站点向导，辅助用户创建站点。

通过询问站点需要的信息，它将按部就班地引导用户创建所需要的站点。

在向导启动后，用户只需逐步回答它的提问，填写、选择向导所需的信息。

任务1利用导入站点向导创建站点

此向导允许