1
大学信息技术基础教程
1.3.5.1 实验一 FrontPage基本操作

实验一 FrontPage基本操作

一、实验目的

1.熟悉利用FrontPage 2003进行网页设计的基本过程。

2.了解FrontPage2003视图的特点。

3.掌握在网页中插入文本、图片、水平线等对象的方法。

4.掌握利用表格对文字、图片等内容进行布局的方法。

5.掌握超链接的设置方法。

6.掌握网页属性的设置方法。

7.掌握插入字幕、横幅广告管理器等常用组件的方法。

二、实验内容

制作一个“《大学计算机基础》教学网”的网页,具体要求如下:

(1)网页文件名为“计算机基础.htm”。如图11.1所示,网页内容用两个表格来实现,中间用水平线隔开,第一个表格的边框不显示在IE浏览器中。

img375

图11.1 “《大学计算机基础》教学网”的内容

(2)在“《大学计算机基础》教学网”标题下方有一串文字(“欢迎光临南京林业大学计算机基础教学网站!”)从页面的右侧向左侧循环移动。

(3)第一个表格中的图片由3张图片组成,每隔2秒交替显示。

(4)分别为第一个表格中的“课程简介”、“课程性质”、“教学目标”、“参考资料”与第二个表格中的内容建立相应的超链接。

(5)为“参考资料”中的部分内容建立超链接。

(6)在页面底部输入“联系我们”字样,设置鼠标悬停效果,建立邮件超链接并显示提示文字“南京林业大学计算机系”。

详细制作过程如下:

1.新建普通网页

启动FrontPage 2003,单击“文件”→“新建”命令,在任务窗口中单击“其他网页模板”选项(如图11.2所示),打开“网页模板”对话框,选择“普通网页”,然后单击“确定”按钮,如图11.3所示。

img376

图11.2 任务窗口

img377

图11.3 “网页模板”对话框

2.制作第一张表格,表格边框不可见,并输入相应信息

表格是一种非常直观的表述工具,在网页中添加适当的表格,可以使网页内容变得井然有序。插入表格后可以对表格进行合并单元格、拆分单元格等操作,还可以对表格的整体布局进行设置,如对齐方式、边框、单元格边距与间距以及表格的背景等。

(1)插入表格

单击“表格”→“插入”→“表格”命令,插入一个3行2列的表格,将第一个表格的边框“粗细”设为“0”(如图11.4所示),以保证表格边框不显示在IE浏览器中。

img378

图11.4 “插入表格”对话框

(2)插入艺术字

根据图11.1,在第一个表格的相应位置中单击“插入”→“图片”→“艺术字”命令,选择一种艺术方案,然后输入“《大学计算机基础》教学网”。

(3)插入滚动字幕

在网页中添加动态对象可以让网页变得更加生动。例如,在主页中插入滚动字幕会给访问者带来一种动感,使用户不再蓦然面对死气沉沉毫无生气的画面。

首先将鼠标移到第一个表格的相应位置,单击“插入”→“Web组件”命令,然后在“插入Web组件”对话框中选择“动态效果”中的“字幕”选项,最后单击“完成”按钮,按照图11.5设置字幕属性。

img379

图11.5 设置字幕属性

(4)插入交替显示的图片

将第一列的前两行单元格进行合并,然后选择“插入”→“横幅广告管理器”,在“横幅广告管理器属性”对话框(如图11.6所示)中点击“添加”按钮,从本地磁盘中选择需要交替显示的图片,如图11.7所示。

img380

图11.6 “横幅广告管理器属性”对话框

img381

图11.7 “添加横幅广告图片”对话框

说明:横幅广告管理器组件可以使用一系列图形让每一幅图形按照预设显示一段时间,然后一个个往下切换,直到所有图形都显示完毕,然后又从头开始。“横幅广告管理器”可能不在“插入”菜单中,可以通过以下三个步骤进行添加:

①点击“工具”菜单中的“自定义”命令,在打开的“自定义”对话框中单击“命令”选项卡;

②单击“重排命令”按钮,在打开的“重排命令”对话框中的“菜单栏”下拉列表中选择“插入”;

③单击“添加”按钮,在打开的“添加命令”对话框的“类别”列表框中选择“插入”,在“命令”列表框中选择“横幅广告管理器”,然后单击“确定”按钮即可。

(5)选中表格最后一行,单击鼠标右键,在弹出的快捷菜单中选择“拆分单元格”,如图11.8所示,然后在单元格中输入相应的文字:“课程简介”、“课程性质”、“课程内容”、“参考资料”,并设置合适的字体和字号。

img382

图11.8 拆分单元格

3.插入水平线

单击“插入”→“水平线”命令,在两个表格之间插入水平线并对其属性进行设置,如图11.9所示。

img383

图11.9 设置水平线属性

4.制作第二张表格,输入相应信息

(1)单击“表格”→“插入”→“表格”命令,插入一个4行1列的表格,根据图11.1输入相应的信息。

(2)选中表格,单击“格式”→“段落”,按照图11.10对段落属性进行设置。

img384

图11.10 设置表格的段落属性

(3)建立书签

将鼠标移至“课程简介”前,点击“插入”菜单中的“书签”命令,在弹出的“书签”对话框的“书签名称”文本框中输入“1”。按照上述步骤,在“课程性质”、“课程内容”、“参考资料”前都建立书签,书签的名称分别为“2”、“3”、“4”(如图11.11所示)。

img385

图11.11 “书签”对话框

(4)建立书签超链接

超链接指的是从一点到另一个目的点的链接关系,是网页设计中最富吸引力的一种基本元素,超链接可以是文本、图片和热点。另外,书签也是超链接的一种形式,用于实现同一网页中不同部分间的快速定位。

首先用鼠标选中第一个表格中的文字“课程简介”,点击“插入”菜单中的“超链接”,然后在“插入超链接”对话框中单击“本文档中的位置”,在如图11.12所示的对话框中选择书签“1”。重复上述步骤,依次为“课程性质”、“课程内容”、“参考资料”建立与书签“2”、“3”、“4”的超链接。

img386

图11.12 设置书签超链接

(5)建立网站超链接

利用鼠标选中“南京大学出版社”,单击鼠标右键,从弹出的快捷菜单中选择“超链接”命令,在弹出的对话框中单击“原有文件或网页”,在地址栏中输入“http://press.nju.edu.cn/”,单击“确定”按钮。按照上述步骤为“高等教育出版社”建立超链接,网址为“http://www.hep.edu.cn/”。

5.建立邮件超链接并设置文字提示

在网页底部输入“联系我们”并用鼠标将其选中,点击“插入”菜单中的“超链接”,在弹出的对话框中单击“电子邮件地址”,在“编辑超链接”对话框中输入接收邮件的电子邮箱地址。单击“屏幕提示”,按照图11.13进行设置。

img387

图11.13 设置超链接屏幕提示

6.设置鼠标悬停效果

首先用鼠标选中“联系我们”,再点击“视图”→“工具栏”→“DHTML”命令,然后在弹出的“DHTML效果”对话框中按照图11.14进行设置,可以对字体和边框进行设置。

img388

图11.14 “DHTML效果”对话框

说明:动态HTML(Dynamic Hyper Text Markup Language,DHTML)是由Microsoft 和Netscape共同开发的一种动态网页制作语言,它主要的目的是希望能够减少网页的下载时间,增强网页的动画效果。

7.设置网页标题

在网页编辑窗口的空白处单击右键,从弹出的快捷菜单中选择“网页属性”命令,点击“常规”选项卡,将“标题”设置为“《大学计算机基础》教学网”,然后单击“确定”按钮。

8.保存及浏览网页

首先将网页以文件名“计算机基础.htm”进行保存,然后打开IE浏览器,在地址栏中输入该文件夹所在的地址,便可以浏览该网页。