![网页设计与制作](https://wfqqreader-1252317822.image.myqcloud.com/cover/228/26268228/b_26268228.jpg)
2.4 课堂案例——为“学院网站”创建多个网页
本课堂案例将创建“学院网站”的站点,以及“首页”和“院系简介”的页面,综合本章学习的知识点,熟悉创建和管理站点,以及新建网页的具体操作。
2.4.1 案例目标
本案例先对“学院网站”的创建进行规划,包括进行一些前期的素材准备工作,接着创建“学院网站”的站点,并对该站点进行管理,同时为网站创建“index”页面和“yxjj”页面,并设置页面的相关属性,参考效果如图2-37、图2-38所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/38_01.jpg?sign=1738828739-vy3vqXrbDOioRJPGg87nrGat5YK4Bdij-0-c3fccb3815488c71171e15096859c922)
图2-37 “学院网站”页面
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/38_02.jpg?sign=1738828739-HHwmhEyiMAYEIRZ94FbXCAP8IFbByyQr-0-23b7718fd0bf743035f97e8fd61fa972)
图2-38 “院系简介”页面
素材所在位置:……\素材\课堂案例\案例素材\No2\。
效果所在位置:……\素材\课堂案例\案例效果\No2\。
2.4.2 操作思路
根据练习目标,结合本章知识,具体操作思路如下。
1) 规划网站,对网站的制作做前期的规划,包括页面的布局安排和筹备素材,参考效果如图2-39、图2-40所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/39_01.jpg?sign=1738828739-WkJDKoXJxnxZ6QM6SheJWVU0febejb2U-0-8550c88a66afd188a21c0de1dd8f659a)
图2-39 “学院网站”首页草图
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/39_02.jpg?sign=1738828739-fx2k4xYm8D5gbJi24m0R6szRjnB4Npc7-0-0142bedcb03faff14a9efb4a8da393e3)
图2-40 “院系简介”页面草图
2)将准备好的素材分门别类地存储在站点文件夹“…/xafy”中,如图2-41所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/39_03.jpg?sign=1738828739-tihXaZOycwcg7nVTFe3yrZMbkdT1GTUF-0-8044b01062b609e06233ddd9d49ff967)
图2-41 “学院网站”站点文件夹
3)新建站点“学院网站”,设置站点文件夹,如图2-42所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/39_04.jpg?sign=1738828739-E2QfAoCE1gNBqzqh2HsAQzA3YRDBwgi7-0-8258aed57cb64e82806d738e4f54aa3e)
图2-42 设置站点
4)新建“学院网站”的首页,可以在起始页面中选择“新建”组中的文档类型,一般为HTML页面,如图2-43所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/39_05.jpg?sign=1738828739-TqNaYzV4mdjDHu1PiAOPfVXSioh5fNRL-0-23aed75c8767b86e1353ab518a84071f)
图2-43 新建HTML页面
5)设置页面属性。单击“属性”面板中的“页面属性”按钮,可打开“页面属性”对话框,在“分类”栏中设置“外观”中的页面背景颜色,在“标题/编码”栏中设置网页标题,如图2-44所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/40_01.jpg?sign=1738828739-MkMgLoK9z9OtC6m7XKgnZCwWcPqvhU1y-0-1c605ddc06e80032479462e1671d9bc6)
图2-44 设置页面属性
6)新建“院系简介”页面。选择“文件”→“新建”菜单命令,或者使用〈Ctrl+N〉组合键打开“新建文档”对话框,选择文档类型来新建页面,如图2-45所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/40_02.jpg?sign=1738828739-OmjBKHoMQrgWVVVByOAV9ERsy4DPrvUz-0-b4e3b9114ecf16236e272a101cb1c621)
图2-45 “新建文档”对话框
7)设置页面属性。与第5)步操作相同,可以设置本页面的基本属性。
8)保存网页。对于新建的页面,需要保存到站点文件夹中,选择“文件”→“保存”菜单命令,打开“另存为”对话框,选好路径即可保存,如图2-46所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/41_01.jpg?sign=1738828739-2yA02zkooBAVCJSwy9Js54aZmgRJfpZe-0-5a2ad1785acdbe9fccb6c1235238b4db)
图2-46 保存网页文件