教程2_网页设计第二章第一节

实习2 网页设计（2）
一、实习目的
1. 熟悉FrontPage2003的工作环境；
2. 掌握FrontPage2003站点管理功能；
3. 掌握FrontPage2003制作网页的基本方法；
4. 掌握网页制作中的常用页面布局方法。
5. 掌握制作主题网站的方法。
6. 自拟主题的网站

二、实习内容
1. 熟悉FrontPage 2003的工作环境，学习FrontPage的基本功能及操作；
2. 学习FrontPage2003管理站点功能，进行站点目录规划（个人网站）；
3. 按要求制作主题网站（孙悟空），并测试浏览效果；
4. 制作自拟主题的网站，要求网站内容在表现形式上必须具有主页面、图文混排页面、
图片页面、表格页面等页面形式；
5. 对自拟主题的网站浏览测试。
注：第1次实验完成实验步骤中1至5的任务，练习“孙悟空自传”的制作。
第2次实验完成6，制作自命题个人网站。

三、预备知识
1. 网页制作的基本知识；
2. FrontPage 2003的工作环境及操作方法。

四、实习步骤
1.熟悉FrontPage 2003 的工作环境。
启动FrontPage 2003，熟悉FrontPage 2003工作环境。
2.FrontPage管理站点
① 建立站点主目录文件夹
在D盘根目录下建立名为“myweb”的文件夹，作为网页制作的站点主目录（站点主目
录路径为d:\myweb）。（如果D盘不存在，在C盘建立。）
② 创建站点
启动FrontPage 2003，打开“文件“菜单”，单击“新建”，在右侧的任务窗格中选择
新建网站列表中的“其他网站模版”；
打开网站模板对话框，选择“空白站点”，然后单击“浏览”命令按钮，打开新网站位
置（站点主目录）对话框，单击“查找范围”下拉列表，选择d盘，在文件夹列表中，选择
“myweb”文件夹；
单击“打开”命令按钮，完成站点主目录的设置，则站点的主目录为“D:\myweb”；
单击“确定”按钮，完成站点的创建。
③ 查看站点目录结构
单击“视图栏”（窗口左侧）中“文件夹”图标，即可查看新建站点目录结构。FrontPage
自动建立了images和_private等文件夹。
长沙网络公司 http://www.hnm7.com/
注意：不要在如“_private”等以“_”开始的文件夹中存放你的任何文件。该文件夹
是系统用于存放临时文件。
④ 创建网站其它文件夹（目录规划）
根据要制作的网站的内容，可以建立相应的子文件夹，用以分类存放网站制作中的相关
文件。在本站点中，请建立如下文件夹：xiangce，然后分别在这两个文件夹中建立文件夹
images。
注意：网站目录结构一般在网站创建初期就完成，但也可以在制作网站过程中，随时
根据要求建立。
文件夹名及文件名不要使用汉字，否则会在网页超链接引用和网页浏览是出现错误的
情况。
⑧ 将网页保存到网站的根目录（d:\myweb）中，文件名为“index.htm”。
注意:本网页所用到的图片都要存入d:\myweb\images文件夹中。
⑨ 在浏览器中打开index.htm页面，如图2-10所示。
请注意：将制作好的网站内容保存好，在以后的服务器架设实验中使用。．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．
记录实习任务完成情况，对本次实习进行总结（主要说明实习任务完成情况和结果、实
习中存在的问题、实习收获与体会），在3次网页设计实习结束后，将本次实习任务完成情
况和实习总结写入实习报告并提交。

6．自拟主题制作包含图文混排、图片、表格、主页等页面的网站（第2次完成）
（1）自拟站点主题，规划站点内容，收集相关素材并整理
实验前自拟站点主题（如“我的班级”、“西安世园会”、“XX旅游景点”等），根据站点
类型和特性设计站点各网页内容，规划各网页之间的链接关系。
收集或撰写文字内容，下载或拍摄图片并进行图像处理（也可录制音乐和视频，多媒体
素材文件不宜太大，一般不超过5MB），设计表格，填写站点重要数据或信息。
以“我的班级”主题为例，基本要求如下：
首页采用很经典的文字对专业介绍和班级概况介绍，并插入班级成员合影、专业特色图
片，达到主题显明的效果，在首页上再建立三个链接，分别链接到图文混排页面、图片展示
页面和表格页面；
图文混排页面以文字为主（班级特点、特长、成绩、成就等）插入1-2张图片配合文字
描述；
图片展示页面以表格布局，展示成员照片；
表格页面可以制作成简单的二维表，表头包含：学号、姓名、性别、年龄、籍贯、特长
等。

（2）FrontPage管理站点
① 建立站点文件夹：
在磁盘根目录下建立站点主目录文件夹（如WWWroot）。
②创建站点
打开“文件“菜单”，单击“新建”，选择“空白站点”，指定新站点的位置为“WWWroot”。
③进行站点内目录规划
根据要制作的网站的内容，规划并建立站点内的子文件夹，用以分类存放网站制作中的
相关素材及网页文件。
④.导入网页制作需要的素材
将准备好的素材文件，分别导入站点中相应的文件夹中。注意：不要将文件存放在
“_private”文件夹中。
若在网页设计过程中使用站点文件夹以外的素材文件，请注意：在保存网页时出现“保
存嵌入式文件”对话框（如图2-2所示），务必将素材文件保存到站点内合适的文件夹中。

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

①制作图文混排的网页
新建一个空白网页，添加文字，设置字型、字体、段落、对齐方式等，并对页面进行必
要的修饰；插入图片，进行图文混排；将该网页保存到站点内合适的文件夹中。

②制作图片展示网页
新建一个空白网页，建立表格，第一行合并，输入图片页面主题；第二行插入图片，第
三行输入对第二行图片的文字说明（图注）；依次类推。
将该网页保存到站点内合适的文件夹中。

③制作表格网页
新建一个空白网页，输入表格标题，设置标题格式；
插入一个表格，设置表格格式；添加表头文字和表格内容，设置文字格式和单元格格式。
将该网页保存到站点内合适的文件夹中。
长沙网络公司 http://www.hnm7.com/

（5）请注意：
①所有文件夹和文件名不能使用中文；
②图文页面、图片页面、表格页面，通过链接返回主页；
③网页素材文件不宜过大，网站压缩包容量尽量在10M以内。

7.测试与评价
将设计的自拟网站压缩包拷贝到同组同学的计算机中，同组同学进行测试和评价，测试
和评价的内容包括：布局是否合理、链接是否正常、色彩搭配是否得当、文件系统（文件命
名、文件夹结构及命名等）是否准确、内容是否丰富完整、特色是否鲜明，以及评分等。

五、实习要求
1. 根据指导书实例和操作步骤，独立完成步骤1-5的内容。
2. 独立完成自拟主题，完成步骤6的任务。
3. 按要求进行步骤7测试与评价：通过组内独立测试；
评价要以客观、公正、精炼、全面为基准；评价要反馈给同组成员；同组成员应根据
这些评价进行必要的修改。
4． 提交自拟主题网站的压缩包。
5. 撰写实习总结报告。
思考问题
1. 如何管理网站文件？
2. 如何规划和设计较复杂的主页？
3. 制作网站需要哪几个阶段？各阶段应完成的基本任务是什么？

长沙网络公司
http://www.hnm7.com/
http://www.easen.com/