第六章网页的设计与制作

网站和网页

学情分析通过前面的学习，学生的信息素养有了较大的提高，利用信息技术解决实际问题的操作技能有了长足的进步，由于多数学生在初中没有制作过完整意义上的网页和网站，所以，对于本章的知识和技能而言，基本不存在“零起点”影响学生学习的问题。

教学目标

1、了解万维网的基本架构

2、理解网页的作用、掌握网页元素和网页构件的使用

3、知道常用的网页制作工具

教学重点：网页的元素和认识FrontPage工具软件

教学难点：万维网的基本架构、网页制作工具。

课时安排：4

教学准备：课件和多媒体

教学过程

一、课程导入

同学们都上过网、前面我们也一起学习了怎么上网，因特网上的网站和网页总称就是万维网、网站的地址用URL（统一资源定位器）来访问。

二、新课：

(一)、网页的基本元素

主要通过对几个网页的分析，掌握文字、图形图像和超链接是网页的基本元素，而声音、表格、表单等则是网页的构件。网页构件将网页基本元素有机的组合成一个单元以构成更为丰富多彩的网页。

（二）、制作网页的常用工具

网页制作的方法主要有两种：直接用“超文本标记语言”制作网页，或者使用专门的工具软件来开发网页。

1、直接用“超文本标记语言”制作网页 HTML源代码有网络浏览器解释执行、

用文本编辑器可以制作如记事本、对制作者要求较高、要熟悉编程语言才行。

2、使用专门的工具软件来开发网页 FrontPage和dream waver

（三）、简单网站的设计和制作流程

1、确定目标和需求分析

2、策划制作方案

3、收集与整理素材

4、合成与测试网页

5、发布

（四）、制作网页

一、认识FrontPage

FrontPage是微软公司开发的网页制作和网站管理工具。工具具有“所见即所得”功能,Web创作人员直接对Web页面进行编辑修改，并且能立即看到Web 页面的显示效果。FrontPage 2003具有强大的网站管理功能，是一款方便而又实用的Web站点的发布与维护工具，主要功能有：

（1）建立站点

（2）站点文件管理功能

（3）网页导航管理功能

（4）任务管理功能

（5）网站发布与维护功能

FrontPage的启动与退出

1、创建站点

首先应当根据其用途规划站点，确定站点的结构，并在本地磁盘上创建站点以存储制作完成的网页及其他相关文件。然后再发布到指定服务器上（远程站点）。

介绍新建站点的方法。

（1）单击“文件”菜单的“新建”命令，在“新建”任务窗格中选择“新建网站”中的选择站点类型

（2）在弹出的“网站模板”对话框的“指定新网站的位置”框中输入新站点要保存的位置，也可使用“浏览”按钮指定新站点的位置；

该站点有一个空白网页index.htm（主页）和用于存储图片的文件夹images 和存储网页的文件夹private（私有的），你可以打开index.htm进行编辑，也可以进一步根据网站规划创建文件夹和新建其他网页。

二、FrontPage中的视图种类及方式

1.“网页”视图

“网页”视图是FrontPage 2003中最常用的工作界面。网页的创建、编辑、预览等基本操作都是在此视图中进行的(设计、拆分、代码、预览)。

2.“文件夹”视图

在“文件夹”视图中，站点显示为一组文件和文件夹。在“文件夹”视图中可以创建、移动和删除文件或文件夹。

3．“报表”视图

使用“报表”视图可以方便了解当前站点的文件内容、更新链接情况、组件错误、所有文件列表及变化情况等信息。

4．“导航”视图

使用“导航”视图可方便地观察站点的链接结构。在该视图中可以很直观地浏览网站内网页之间的链接关系，同时也可以通过拖曳操作改变链接结构。

5．“超链接”视图

“超链接”视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。

6. “任务”视图

“任务”视图主要用来创建和管理任务。在视图中列出了当前站点的“任务”，即当前站点中尚未完成的项目。

FrontPage 2003的网页视图下有四种方式：设计、代码、预览、拆分。

设计视图是打开网页首先进入的视图，可以在其中输入文本、插入图片、插入表格等，也可以任意进行修改。

代码视图中，用户可以查看、编写和编辑HTML标记。

预览视图中可以看到网页在Web浏览器中的大体显示情况。

FrontPage 2003新增的拆分视图将窗口工作区拆分成上、下两部分，上半

部分是代码区，下半部分是设计区。无论对哪一个区域进行修改，另一个区域都会做出相应的改变。

三、网页的基本操作

一、网页的编辑

1、新建网页

2、打开/保存网页（文件扩展名html）

3、预览网页

4. 设置文字

5. 设置段落格式格式

FrontPage 2003通过按Enter键划分段落。值得注意的是，段落之间插入了一个空行。如果只是需要换行，而不是另起一个段落，按Shift+Enter键即可。实际上，按Enter键在HTML代码中插入的是

标记，而按Shift+Enter键则插入的是
标记。

6. 设置网页属性

网页属性包括网页的标题、格式、页边距等。要设置网页属性，用户可以使用“文件”菜单的“属性”命令，或者在网页的任意地方单击鼠标右键，在弹出的右键菜单中选择“网页属性”命令，或者菜单命令格式下找到背景命令单击、FrontPage 2003将显示“网页属性”对话框。

1）“常规”属性

“标题”框用于给出网页的标题，网页标题将显示在浏览器的标题栏中。“背景音乐”框用于指定网页的背景音乐，当用浏览器打开网页时，将自动播放背景音乐。背景音乐区域的“位置”框用于指定声音文件的位置，用户可以使用“浏览”按钮选择一个声音文件；“循环次数”框用于指定声音要反复播放的次数，如果选中“不限次数”复选框，表示一直不停地播放。

2）“格式”属性

设置网页的背景、颜色、背景图片

四、网页的布局

网页的布局设计，是将文字、图片等网页元素，根据特定的内容和主题，在网页所限定的范围中进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。网页的布局一般使用表格或框架来实现。表格由单元格构成的行和列组成，单元格中可以插入文本、图片以及其他对象。

利用表格可以有条理地排列数据或组织网页布局。表格的行、列和单元格都可以进行复制、粘贴，在表格中还可以插入表格，一层层的表格嵌套使设计更加方便。FrontPage 2003提供了与Word字处理软件类似的表格处理功能，在网页中可以轻松地创建和编辑表格。创建表格有以下三种常用方法：

1. 创建表格

（1）使用“表格”菜单的“插入”子菜单中的“表格”命令，可以对插入的表格进行精确的设置，包括行和列的数目、对齐方式、单元格间距、单元格衬距、边框粗细和背景等。

（2）使用“常用”工具栏的“插入表格”按钮，快速插入表格。

（3）使用“表格”菜单的“绘制表格”命令，手动绘制表格。

2. 设置表格属性

插入表格后，打开如下图所示的“表格属性”对话框，可以设置表格属性。

（1）设置表格行数和列数。

（2）设置表格布局，包括设置表格的对齐方式、浮动、宽度等。

（3）在“粗细”数值框中输入数值，即可设置表格边框的粗细。

（4）在背景区域，可以通过“颜色”框设置单一色彩的表格背景，也可选中“使用背景图片”复选框，用“浏览”按钮设置图片作为表格的背景。

3. 设置单元格属性

将光标放置在需要设置属性的单元格中，使用“表格”菜单的“表格属性”子菜单中的“单元格”命令，打开如下图所示的“单元格属性”对话框，设置单元格属性。

4. 调整表格

创建表格后，可以对表格单元格、行和列的布局和结构进行调整，以满足不同的需要。如调整行、列或单元格；插入行、列或单元格；删除行、列或单元格；合并、拆分单元格；平均分布行高、列宽；设置单元格属性等。

所谓发布网站，就是把网站中的内容上传到Web服务器上。为了便于用户发布网站，FrontPage 2003提供了相当方便的发布工具。

五、网页中插入对象

二、插入对象

1.插入水平线

（1）在准备插入水平线的位置设置插入点；

（2）单击“插入”菜单的“水平线”命令，插入水平线。

要修改水平线的外观，可以双击水平线，打开“水平线属性”对话框。“宽度”框用于设置水平线的宽度，“高度”框用于设置水平线的高度，“对齐方式”用于设置水平线在网页内水平对齐的方式，“颜色”列表框用于设置水平线的颜色，选中“实线（无阴影）”复选框时，水平线将被设成实心线。要为线条指定自定义样式或其他格式，可以使用“样式”按钮进行设置。

2插入图片（包含FLASH影片、其它的和word软件一样操作）

（1）移动光标至插入图像的位置；

（2）单击“插入”菜单的“图片”命令，在子菜单中选择“来自文件”，弹出“图片”对话框；

（3）利用“图片”对话框选取需要插入的图片文件，单击“插入”按钮，即可将图片插入网页中。

设置图片属性：在“图片属性”对话框的“外观”选项卡中，可以设置图片的环绕方式、布局、大小等。

保存图片：插入图片后保存网页，如果图片不在网站文件夹中，将出现“保存嵌入式文件”对话框。如果图片在网站文件夹中，就不会出现此对话框。

3. 插入字幕

在制作网页时，可以将网页中的文字做成由左至右，或由右至左移动的动态效果，使网页更加形象生动。具体操作步骤如下：

（1）将插入点设置在要插入移动字幕的位置或者选中作为移动字幕的文本，单击“插入”菜单的“Web组件”命令，弹出“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“动态效果”，在“选择一种效果”列表中选择“字幕”，单击“完成”按钮，“字幕属性”对话框。

（2）如果已经选择了作为移动字幕的文本，此文本就会出现在“文本”框中，如果没有选择文本，可在“文本”框中输入作为移动字幕的文本（3）“方向”区域用于指定文本的移动方向。“速度”区域用于指定文字的滚动速度，“延迟”框中的数值表示字幕滚动一步的时间间隔是多少毫秒，“数量”框中的数值表示字幕滚动一步的距离是多少像素。“表现方式”区域用于指定文字的表现方式。选中“重复”区域的“连续”复选框，移动字幕将连续滚动；若要设置字幕滚动有限次数，可以取消选中“连续”复选框并输入字幕重复的次数。

4. 插入交互式按钮

交互式按钮是一个动态按钮，当用户将鼠标指向交互式按钮时，交互式按钮会改变颜色或形状。默认情况下，交互式按钮是一个带有彩色方框的文字按钮，也可以应用图片创建交互式按钮。

单击“插入”菜单的“Web组件”命令

5. 插入站点计数器

单击“插入”菜单的“Web组件”命令

6、视图——工具栏——DHTML效果

动态HTML效果事件：单击、双击、网页加载、鼠标悬停；效果：文字修饰，图片交换，飞入……

六、网页中创建超链接

创建超链接

Web网页的强大之处就在于其超链接，使用超链接能够将Internet中的信息有机地组织起来，使人们在丰富多彩的WWW世界轻松地漫游。在浏览器中，超链接通常表现为与普通文本或图片不同的特点。将鼠标移到一个超链接上方时，鼠标指针会变成手形。同时，与这个超链接相对应的URL会在窗口底部的状态栏显示出来。

1\创建文本超链接

文本超链接是指在文本上定义的超链接，单击文本超链接，会自动跳转到指向的链接目标。在“插入超链接”对话框中选择要链接的目标网页，单击“确定”按钮，插入超链接，可以看到所选定的文本变为蓝色，并且带有下划线，说明选定的文本已经被设置为超链接文本。

检查超链接的方法：在编辑状态下按住ctrl和鼠标单击或者保存网页后在浏览

器中预览效果，当鼠标移至链接文字时，鼠标指针变成手形，此时单击鼠标就跳转到目标网页（注，网页视图下的预览看不出）。

2、创建图片超链接

选定要定义超链接的图片，从“插入”菜单中选择“超链接”命令。

热点可以是图片上具有某种形状的一块区域或文本，热点的形状可以是长方形、圆形或多边形。

为图片添加热点

（1）选择需要添加热点的图片。

（2）在“图片”工具栏中，单击长方形、圆形或多边形热点按钮匹配需要的形状。

（3）在图片上，采用鼠标拖动操作画出所选形状。画多边形时，可单击多边形的第一个角，然后依次单击多边形其他角的位置，最后双击完成多边形。

（4）释放鼠标，弹出“插入超链接”对话框，按照插入超链接中所讲方法创建超链接即可。

3. 使用书签超链接

对于网页的超链接，往往使用户跳转到目标网页的顶端，应用书签能够更严格地控制用户到达网页内的某个具体位置。书签是网页中被标记的位置或被标记的文本。单击书签超链接，将直接跳转到该书签所在的位置。

1）插入书签

（1）选中作为书签的文本，或将光标定位在要插入书签的位置。

（2）选择“插入”菜单的“书签”命令，弹出“书签”对话框，如右图所示，所选文本自动出现在“书签名称”框中。

（3）单击“确定”按钮，插入书签，可以看到所选文本下方出现虚线。

2）创建书签超链接

（1）选定要定义超链接的文本或图片；

（2）从“插入”菜单中选择“超链接”命令，弹出“插入超链接”对话框，选择要链接的书签；单击“确定”按钮，插入书签超链接。

4. 创建电子邮件超链接

电子邮件超链接为用户发送电子邮件提供了极大的方便，单击电子邮件超链接后，允许用户书写电子邮件内容，并发往指定的地址。具体操作步骤如下：（1）选择作为电子邮件超链接的文本或图片；

（2）从“插入”菜单中选择“超链接”命令，弹出“插入超链接”对话框；（3）在对话框的“链接到”栏单击“电子邮件地址”注意格式，在“电子邮件地址”框中输入所需电子邮件地址，还可以在“主题”框中键入电子邮件的主题；

（4）单击“确定”按钮，完成电子邮件超链接的创建。

任务练习：

以介绍世界文化遗产“北京故宫”作为示例，规划和建立一个网站。（教师完整的演示讲解）

对于作为示例的“北京故宫”网站而言，构思轮廓可以大致如下：

（1）网站的名称：世界文化遗产——北京故宫

（2）网站的主题：世界文化遗产“北京故宫”的基本情况介绍

（3）网站的内容：关于北京故宫的文字说明，相关的配图和录像资料，目的是向浏览者说明作为世界文化遗产的北京故宫的身后的历史底蕴和浓郁的人文气息。

（4）网站的结构：采用一个主页，下面链接数个网页的两层结构。

操作步骤：

一、素材的收集与整理：

素材准备北京故宫的图像资料和文字资料、北京故宫网站总体框架有六个网页组成，每个网页由网页标题名称、网页内容及修饰、超级链接组成。

以制作“北京故宫”网站为例，将手网站制作的基本方法。

“北京故宫”这个网站总体框架由六个网页组成：

主页：包含网站的名称、一幅主题照片、与另外五个网页的超链接、版权信息以及和网站主人的联络方式等内容，因为主页的功能之一是起网站的目录作用。其余五个网页的分配如下：

一个网页负责北京故宫的总体介绍；

另外三个网页分别介绍故宫主要景点，如：太和殿、乾清宫和金水桥；

还有一个网页用来介绍故宫内收藏的文物

1、制作主页

2、制作其它网页

3、超级链接

4、测试发布