![网页设计与制作](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=1739902972-SNogQ8jpQbtK68le7mYegCZBv7bjfFFW-0-212fb0ae0f2f0ea9cd8d1e1a8112c442)
图2-37 “学院网站”页面
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/38_02.jpg?sign=1739902972-9tXCar7sKVjxDfRp3ODcvX1irYZwdbMG-0-6cfd084b727eaaed08efb772f564a12e)
图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=1739902972-n19WjLbh2VqQkxgwZF0pHKMZb9k6DqsP-0-323c8e0c3d9a3a0acd4ed6005cfeb5a5)
图2-39 “学院网站”首页草图
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/39_02.jpg?sign=1739902972-4enswHUPRFPFdtWnTGr0WxbKLTCVpcJQ-0-a02840312d7ce0dce27c3b35810c7730)
图2-40 “院系简介”页面草图
2)将准备好的素材分门别类地存储在站点文件夹“…/xafy”中,如图2-41所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/39_03.jpg?sign=1739902972-qGsbSNKhaSsr4djbsNELVd3GPt7TmQpD-0-ff5f63d5e9385920ed46f41c8b7a31e0)
图2-41 “学院网站”站点文件夹
3)新建站点“学院网站”,设置站点文件夹,如图2-42所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/39_04.jpg?sign=1739902972-2oNBBLs6SGaJnvLUr7S7E7xp9dRR9dYn-0-863f09319e1e9dfe77516b6c11f50a00)
图2-42 设置站点
4)新建“学院网站”的首页,可以在起始页面中选择“新建”组中的文档类型,一般为HTML页面,如图2-43所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/39_05.jpg?sign=1739902972-vtBBUWVFAOVxMrNZADFk1VdVcw4wY1R1-0-d04d4661f4d0600ddd2a95f2c9f5653f)
图2-43 新建HTML页面
5)设置页面属性。单击“属性”面板中的“页面属性”按钮,可打开“页面属性”对话框,在“分类”栏中设置“外观”中的页面背景颜色,在“标题/编码”栏中设置网页标题,如图2-44所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/40_01.jpg?sign=1739902972-fC3MR45mCLWufrS4Oliw5ADFWMb7Cf6H-0-6f49ce68a43bf673d204cdc8f508a102)
图2-44 设置页面属性
6)新建“院系简介”页面。选择“文件”→“新建”菜单命令,或者使用〈Ctrl+N〉组合键打开“新建文档”对话框,选择文档类型来新建页面,如图2-45所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/40_02.jpg?sign=1739902972-aAzzac2omlaIpy01cYJXyCMFPtmbRxiO-0-bebb1a0d307caa0e662dbfde51044149)
图2-45 “新建文档”对话框
7)设置页面属性。与第5)步操作相同,可以设置本页面的基本属性。
8)保存网页。对于新建的页面,需要保存到站点文件夹中,选择“文件”→“保存”菜单命令,打开“另存为”对话框,选好路径即可保存,如图2-46所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/41_01.jpg?sign=1739902972-B14TcLASLYGnRfQEMLLlsgE41idSDgXo-0-6284345eebd25795c71e90ef561a5467)
图2-46 保存网页文件