frontpage 网页设计实验指导

实习二 网页设计（2）

一、实习目的

1. 2. 3. 4.

熟悉FrontPage2003 的工作环境； 掌握FrontPage2003 站点管理功能；

掌握FrontPage2003制作网页的基本方法； 掌握网页制作中的常用页面布局方法。

二、实习内容

1. 熟悉FrontPage2003 的工作环境

2. FrontPage2003管理站点功能（个人网站）； 3. 制作图文混排的网页； 4. 制作图片展示网页； 5. 制作个人网站首页；

6. 自拟主题制作包含图文混排、图片、表格、主页四个页面的网站。 注：第二次实验完成1至5，第三次实验完成6

三、预备知识

1. 网页制作的基本知识；

2. FrontPage2003 的工作环境及操作方法

四、实习步骤

1.熟悉FrontPage 2003 的工作环境。

启动FrontPage 2003，熟悉FrontPage 2003工作环境。 2.FrontPage管理站点

① 建立站点文件夹：

在D盘根目录下建立myweb文件夹。 如果D盘不存在，在C盘建立。 ② 创建站点

打开“文件“菜单”，单击“新建”，在任务窗格中选择“其他网站模版”，打开网站模板对话框，选择“空白站点”，在指定新站点的位置中，输入D:\\myweb或C:\\myweb（即站点在本地磁盘上的位置），单击“确定”按钮，完成站点的创建。

③ 查看站点目录结构 单击“视图栏”（窗口左侧）中“文件夹”图标，即可查看站点目录结构。FrontPage自动建立了images和_private等文件夹。

注意：不要在如“_private”等以“_”开始的文件夹中存放你的任何文件。 ④ 创建网站其它文件夹 根据要制作的网站的内容，可以建立相应的子文件夹，用以分类存放网站制作中的相关文件。在本站点中，请建立如下文件夹：xiangce和aihao，然后分别在这两个文件夹中建立文件夹images。

注意：网站目录结构一般在网站创建初期就完成，但也可以在制作网站过程中，随时根据要求建立。

3.制作一个图文混排的网页

① 打开“文件“菜单”，单击“新建”，选择“空白网页”，在FrontPage中将出现一个空白的网页。

② 在页面上单击右键，选择“网页属性”，打开页面属性对话框，选择各选项卡进行适当配置。

③ 在网页中输入（粘贴）一段文字（孙悟空自传，作业管理系统共享资源中下载），设置第一段（作为标题）为“黑体、6号（24磅）”，其余文字设置为“宋体、4号（14磅）”。

④ 在网页中插入一张图片(sunwukong.jpg，作业管理系统共享资源中下载)，设置图片的对齐属性为“左对齐”。调整位置,如图2-1所示。

⑤ 将保存网页到网站的根目录（d:\\myweb）中，文件名为zizhuan.htm。 注意：1. 本网页所用到图片都要存入d:\\myweb\\images文件夹中。

2. 观察在保存网页时出现的“保存嵌入式文件”对话框(如图2-2)，并保存网页中的图片保存到正确的位置。 3．“另存为”文件对话框中，要注意保存网页到指定的位置。

图2-1 zizhuan.htm网页

图2-2“保存嵌入式文件”对话框

4.制作一个图片展示网页

① 打开“文件”，单击“新建”，选择“空白网页”，在FrontPage中将出现一个空白的

网页。

② 在网页中插入一个7行3列的表格，在表格属性中，将表格的边框粗细设置为0，接着再将第1行的3列合并,输入文字“孙悟空的幸福生活”，设置为“标题一”格式。调整单元格行高，如图2-3所示。

图2-3 制作中的xiangche.htm网页

图2-4 完成的xiangce.htm网页

③ 在表格的单元格中，插入图片和文字说明(作业管理系统共享资源中下载)。如图2-4所示。

④ 将保存网页到网站的根目录（d:\\myweb\\xiangce）中，文件名为xiangce.htm。

注意:本网页所用到图片都要存入d:\\myweb\\xiangce\\images文件夹中。 5.制作个人主页（首页）

网页设计时，网页的布局方式将直接影响页面的外观，同时也是体现设计师的水平的一个标准。在设计布局时，通常采用表格的方式。在本网站主页的制作中，我们也将使用表格方式布局。

① 打开“文件”，单击“新建”，选择“空白网页”，在FrontPage中将出现一个空白的网页。

② 在网页中插入一个7行2列的表格（宽：700像素；边框：0），然后将第2列的所有单格合并,如图2-5。

图2-5 第一次布局

图2-6 第二次布局

图2-7 插入图片

图2-8 第三次布局

图2-9 输入文字和插入图片

图2-10 index.htm在IE中的效果

③ 在刚合并完成后单元格中，设置单元格对齐属性为“水平：左对齐；垂直：顶端对齐”，然后在该单元格插入一个4行1列的表格（宽度：100%；边框：0）。完成的布局如图然后调整单元格行高如图2-6所示。

④ 在左边单元格和右边第1行的单元中，插入如图2-7所示的图片（教学资源网下载）， ⑤ 将右边第2行拆分为2列。在第3行中，插入一个1行3列的表格(宽：100%；高：100%，边框：0)，如图2-8所示。

⑥ 接下来，在单元格中插入图片，输入文字，如图2-9所示。

⑦ 将“悟空自传”图片超链接到前面制作的网页“zizhuan.htm”,“我的相册”图片超链接到“xiangce.htm”，“我的母校”图片边接到“http://www.nwsuaf.edu.cn”，“与我联系”图片超链接到“mailto:sunwukong@tiangong.org”。

⑧ 将网页保存到网站的根目录（d:\\myweb）中，文件名为index.htm。 注意:本网页所用到的图片都要存入d:\\myweb\\images文件夹中。 ⑨ 在浏览器中打开index.htm页面，如图2-10所示。 6．自拟主题制作包含图文混排、图片、表格、主页四个页面的网站 ① 自拟站点主题，规划站点内容，收集相关素材并整理。

实验前自拟站点主题（如“我的班级”、“西安世园会”、“XX旅游景点”等），根据站点类型和特性设计站点各网页内容，规划各网页之间的链接关系及文件的存储位置（文件夹）；收集或撰写文字内容，下载或拍摄图片并进行图像处理（，录制音乐和视频），设计表格，填写站点重要数据或信息。

以“我的班级”主题为例

首页采用很经典的文字对专业介绍和班级概况介绍，并插入班级成员合影、专业特色图片，达到主题显明的效果，在首页上再建立三个链接，分别链接到图文混排页面、图片展示页面和表格页面；

图文混排页面以文字为主（班级特点、特长、成绩、成就等）插入1-2张图片配合文字描述；

图片展示页面以表格布局，展示成员照片；

表格页面可以制作成简单的二维表，表头包含：学号、姓名、性别、年龄、籍贯、特长等。

② FrontPage管理站点

⑴ 建立站点文件夹：

在D盘根目录下建立myweb文件夹。 如果D盘不存在，在C盘建立。 ⑵ 创建站点

打开“文件“菜单”，单击“新建”，选择“空白站点”，在“Web站点模版”对话框中选择“空白站点”，在指定新站点的位置中，输入D:\\myweb或C:\\myweb（即站点在本地磁盘上的位置），单击“确定”按钮，完成站点的创建。

⑶ 查看站点目录结构 单击“视图栏”（窗口左侧）中“文件夹”图标，即可查看站点目录结构。FrontPage自动建立了images和_private等文件夹。

⑷ 建网站其它目录

根据要制作的网站的内容，可以建立相应的子文件夹，用以分类存放网站制作中的相关文件。

③ 页面布局规划

首页以表格或导航形式布局；图文混排页面通过对齐方式布局；图片展示网页通过表格布局；表格页面通过表格布局并注意表格属性单元格属性设置。

④ 制作各个页面

⑴ 制作一个图文混排的网页

添加文字，设置字型、字体、段落、对齐方式等，并对页面进行必要的修饰；插入图片，进行图文混排；保存在对应文件夹中。 ⑵ 制作一个图片展示网页

建立表格，第一行合并，输入图片页面主题；第二行3-4张图片，第三行输入对第二行图片的图注；依次类推（展示图片3-4行）。保存在对应文件夹中。

⑶ 制作表格网页

输入表格标题，设置标题格式；建立表格，设置表格格式；添加表头文字和表格内容，设置文字格式和单元格格式。保存在对应文件夹中。 ⑷ 制作站点主页（首页）

添加站点主题；站点概要文字及图片；建立链接图文页面、图片页面、表格页面的超链接；要求页面布局合理、整洁，颜色搭配合理。页面文件保存在站点文件夹中。

注：

1. 以上四个页面篇幅均不超过两页；所有文件夹和文件名不能使用中文； 2．图文页面、图片页面、表格页面，通过链接返回主页； 3．自拟网站压缩包容量小于5M（大于5m视为无效）。

五、实习要求

1. 根据指导书实例和操作步骤，独立完成步骤①至⑤的内容。 2. 自拟主题，完成步骤⑥的任务。

3. 实习报告中对运用FrontPage制作网页进行小结，并对思考题的命题进行简要的论述

（字数500-800）。

4． 提交自拟主题网站的压缩包。

六、思考问题

1. 如何管理网站文件？

2. 如何规划和设计较复杂的主页？

3. 制作网站需要哪几个阶段？各阶段应完成的基本任务是什么？

本文来源：https://www.bwwdw.com/article/tkw5.html