- 网页设计与制作
- 王潇 章明珠 王娟主编
- 774字
- 2024-10-29 18:44:37
2.4 课堂案例——为“学院网站”创建多个网页
本课堂案例将创建“学院网站”的站点,以及“首页”和“院系简介”的页面,综合本章学习的知识点,熟悉创建和管理站点,以及新建网页的具体操作。
2.4.1 案例目标
本案例先对“学院网站”的创建进行规划,包括进行一些前期的素材准备工作,接着创建“学院网站”的站点,并对该站点进行管理,同时为网站创建“index”页面和“yxjj”页面,并设置页面的相关属性,参考效果如图2-37、图2-38所示。

图2-37 “学院网站”页面

图2-38 “院系简介”页面
素材所在位置:……\素材\课堂案例\案例素材\No2\。
效果所在位置:……\素材\课堂案例\案例效果\No2\。
2.4.2 操作思路
根据练习目标,结合本章知识,具体操作思路如下。
1) 规划网站,对网站的制作做前期的规划,包括页面的布局安排和筹备素材,参考效果如图2-39、图2-40所示。

图2-39 “学院网站”首页草图

图2-40 “院系简介”页面草图
2)将准备好的素材分门别类地存储在站点文件夹“…/xafy”中,如图2-41所示。

图2-41 “学院网站”站点文件夹
3)新建站点“学院网站”,设置站点文件夹,如图2-42所示。

图2-42 设置站点
4)新建“学院网站”的首页,可以在起始页面中选择“新建”组中的文档类型,一般为HTML页面,如图2-43所示。

图2-43 新建HTML页面
5)设置页面属性。单击“属性”面板中的“页面属性”按钮,可打开“页面属性”对话框,在“分类”栏中设置“外观”中的页面背景颜色,在“标题/编码”栏中设置网页标题,如图2-44所示。

图2-44 设置页面属性
6)新建“院系简介”页面。选择“文件”→“新建”菜单命令,或者使用〈Ctrl+N〉组合键打开“新建文档”对话框,选择文档类型来新建页面,如图2-45所示。

图2-45 “新建文档”对话框
7)设置页面属性。与第5)步操作相同,可以设置本页面的基本属性。
8)保存网页。对于新建的页面,需要保存到站点文件夹中,选择“文件”→“保存”菜单命令,打开“另存为”对话框,选好路径即可保存,如图2-46所示。

图2-46 保存网页文件