![网页设计与制作](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=1739141242-KnzX5HlsW03oqAH03PRAkcqVN07ZuVgr-0-07662050943ebb903299b6735b718271)
图2-37 “学院网站”页面
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/38_02.jpg?sign=1739141242-WRkTjVfAKY6G7syiJ84Dcrc7vfHUsKE1-0-cd827b44f392eea5a6fb0bdec6404673)
图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=1739141242-8n0i9UUNcJ1l4qxGmppHe2IDNjjcpsOD-0-10e48252bc7a51c26092fb2288f46548)
图2-39 “学院网站”首页草图
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/39_02.jpg?sign=1739141242-Me6RbeTS7E1lxXW0JUhpSLFK3vQaFCMf-0-dc5a1df35bb666bdf5ec188190df563b)
图2-40 “院系简介”页面草图
2)将准备好的素材分门别类地存储在站点文件夹“…/xafy”中,如图2-41所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/39_03.jpg?sign=1739141242-3NiPdUydsnKcYejROp5rNiIrpyqdbILh-0-6decfd629af19b37739ae6555c52ffe8)
图2-41 “学院网站”站点文件夹
3)新建站点“学院网站”,设置站点文件夹,如图2-42所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/39_04.jpg?sign=1739141242-PDyJ68CUdh9Gn5yrW3dioxggS75Q12v2-0-3d6e8047ad8a094b39a8dfdc80220f2f)
图2-42 设置站点
4)新建“学院网站”的首页,可以在起始页面中选择“新建”组中的文档类型,一般为HTML页面,如图2-43所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/39_05.jpg?sign=1739141242-jd0WtVb0zZPOULwFYUZdQMYr2XhMnF8H-0-551ba6fa67b587a83b53e1f141a0076a)
图2-43 新建HTML页面
5)设置页面属性。单击“属性”面板中的“页面属性”按钮,可打开“页面属性”对话框,在“分类”栏中设置“外观”中的页面背景颜色,在“标题/编码”栏中设置网页标题,如图2-44所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/40_01.jpg?sign=1739141242-goFVgfMYV0P9AgQbKLqHBJyV9ailckjk-0-232169ff5fd75b2af54ffd3241dd2941)
图2-44 设置页面属性
6)新建“院系简介”页面。选择“文件”→“新建”菜单命令,或者使用〈Ctrl+N〉组合键打开“新建文档”对话框,选择文档类型来新建页面,如图2-45所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/40_02.jpg?sign=1739141242-JsFxLr0FuYq5ykkVVNQK6tHcNLxhydz6-0-7da7db4982989776f988fc552001197b)
图2-45 “新建文档”对话框
7)设置页面属性。与第5)步操作相同,可以设置本页面的基本属性。
8)保存网页。对于新建的页面,需要保存到站点文件夹中,选择“文件”→“保存”菜单命令,打开“另存为”对话框,选好路径即可保存,如图2-46所示。
![](https://epubservercos.yuewen.com/BDCD0B/14700475905664206/epubprivate/OEBPS/Images/41_01.jpg?sign=1739141242-QxHq1TeoYnGXCgs3mXQXsxfpxGTdHKeM-0-d627ee4809cc4f3d12a043591c587e11)
图2-46 保存网页文件