3.7 课堂案例——制作“西安翻译学院”首页

本案例中将分别制作学校网站的网页和图书网站中的网页，综合运用本章学习的知识点来创建和编辑网页元素。

3.7.1 案例目标

本案例主要制作学校网站的主页，在其中插入图像、视频等多媒体文件，并对其进行编辑，展示校园图像、重要通知、热点内容等，效果如图3-69所示。

素材所在位置：……\素材\课堂案例\案例素材\No3\xafy\……

效果所在位置：……\素材\课堂案例\案例效果\No3\xafy\……

3.7.2 操作思路

根据练习目标，结合本章知识，具体操作思路如下。

1)启动Dreamweaver CS6，新建站点，创建主页“index.html”，将主页标题设置为“西安翻译学院-首页”。

2)设置页面背景颜色为“#CCC”、文本颜色为“#FFF”。

3)在页面第1行插入素材中的图像“效果图_02.gif”“效果图_03.gif”“效果图_04.gif”，换行后插入图像“效果图_06.gif”。

4）在页面左侧依次绘制4个Ap Div层（Ap Div1~Ap Div4），每个层的大小为宽490px、高460px、左边距10px、上边距210px。

5)依次在4个Ap Div中分别插入图像“jhtx1.jpg”“jhtx2.jpg”“jhtx3.jpg”“jhtx4.jpg”，设置4张图像文件的大小和层窗口大小相同。

6)在左侧图像上依次绘制4个Ap Div层，依次输入序号“1、2、3、4”，设置层背景颜色为“#0000FF”，设置4个层的宽为25px、高为25px、左边距为20px，适当设置上边距，调整位置如图3-70所示。

7)在相册的右侧绘制一个Ap Div层，设置宽为500px、高为460px、左边距为705px、上边距为210px，背景颜色吸取导航条中的背景色。

8)在右侧的层中输入标题“欢迎报考西安翻译学院”，应用“标题2”的格式，设置从右向左的滚动方式。

9)在标题下方插入3条水平线，设置宽为480px，颜色为“#FFFF00”。

10)根据样张插入列表文字，内容来自素材中的“首页文字.txt”，设置嵌套列表。

11)设置列表下方的文字“more”为空链接，页面右侧的AP Div效果如图3-71所示。

12)将页面中的光标定位到页面底端，依次插入图像“logo_01.gif”“logo_02.gif”“logo_03.gif”“logo_04.gif”“logo_05.gif”“logo_06.gif”“logo_07.gif”“logo_8.gif”“logo_9.gif”“logo_10.gif”“logo_11.gif”。

13）依次给页面左侧的4个按钮层（Ap Div5~Ap Div8）添加“显示-隐藏元素”的行为，如表3-5所示。

14)在站点内新建网页“xygk.html”，将页面标题设置为“西译概况”，设置页面背景色为“#0CF”，文本颜色为“#FFF”。

15)在页面第一行输入标题“学院简介”，应用“标题1”的格式，并设置段落居中。

16)在标题下方插入水平线，在水平线下方插入图像“gk_03.jpg”“gk_05.jpg”“gk_07.jpg”“gk_09.jpg”。

17)在图像下方输入文字，内容来自素材“西译概况文字.txt”，保存页面。

18)在网站首页的导航条中的“西译概况”区域绘制图像热区，如图3-72所示，超链接到页面“xygk.html”。

19)在站点内新建网页“newwindows.html”，设置页面背景颜色为“#36F”，文本颜色为“#FFF”，页面字体为“隶书”。

20)输入文字，内容来自素材“小窗口文字.txt”，保存页面。

21)切换回首页“index.html”，给页面添加行为“打开浏览器窗口”，设置打开主页时打开“newwindows.html”页面，设置小窗口宽为500px、高为400px、窗口名称为“西安翻译学院”。

22)保存首页，并在浏览器中测试页面。