实验七 网页设计

实验所需素材均在“\\实验素材\\ Frontpage”文件夹里。 实验七 网页设计

一、实验目的

1. 掌握使用FrontPage 2003设计网页的基本方法； 2. 了解个人Web服务器的设置以及网站的发布和浏览。

二、实验内容

1．创建网站

在D盘创建一个“空白网站”，网站的位置为“D:\\ MyWeb”。 2．设计网页

在网站内添加一个普通网页和一个“目录”模板的框架网页，并建立链接，浏览效果如图5-39和图5-40所示。普通网页命名为index.htm，框架网页的名称分别为：left.htm、right.htm和main.htm。具体要求如下。

图7.1 网站首页

图7.2 展馆介绍

(1) 普通网页 新建一个普通网页。

在网页中插入一个3行x 1列的表格，第3行拆分为3列。第1行插入Web组件“字幕”，文字内容为“2010上海世博会-中国国家馆”。第2行插入一幅中国馆的图片，设置图片的大小为400x300像素(不保持纵横比) 。第3行的第1和第2个单元格分别输入文字“展馆介绍”和“设计团队”，水平居中。设置表格的背景颜色为绿色，指定宽度为400像素，在网页中水平居中。

光标定位于表格第3行第3个单元格中，单击网页编辑区下方的“代码”标签，进入“代码”模式窗口，在当前光标处添加如下脚本代码：

设置网页的背景颜色为灰色，标题为“中国国家馆首页”，保存网页文件为Index.htm。 (2) 框架网页

新建一个框架网页，模板为“目录”。

左右两个子窗口都为“新建网页”。左边子窗口插入3个Web组件“交互式按钮”，分别设置按钮文字为“展馆概况”、“展区设置”和“展馆亮点”，按钮大小为120x30像素。右边添加如图5-40所示的文字内容。

分别保存框架网页文件为：left.htm、right.htm和main.htm。 (3) 设置链接

框架网页中，“展馆概况”链接到gaikuang.htm，“展区设置”链接到shezhi.htm，“展馆亮点”链接到liangdian.htm，链接目标框架皆为右边子窗口。注意，链接的三个普通网页都应事先制作好。

在Index.htm中设置“展馆介绍”文字链接到main.htm。 3．浏览网页

再次保存所有网页以后，选择“文件”→“在浏览器中预览”→“Microsoft Internet Explorer 6.0”命令进行网页浏览。检查所有链接是否正确。

4．发布网站

选择“文件”→“发布网站”命令，在弹出的“远程网站属性”对话框中设置“远程网站位置”为：http://localhost。然后，单击“确定”按钮，即可把网站发布到本地Web服务器上。

打开“Microsoft Internet Explorer 6.0”浏览器，在地址栏中输入“http://localhost/Index.htm”，即可浏览网页。