第14章静态网页综.pptVIP

第14章 静态网页综合应用实例 第14章 静态网页综合应用实例 本章综合应用前面各章所介绍的网页设计技术设计三个应用实例：显示隐藏层页面、公告板的制作以及一个综合静态主页。其中包含了布局表格、文本和各种媒体元素的添加、CSS样式表的使用、层与时间轴、行为等各种网页设计技术，读者可以由此体会静态网页的设计流程以及各种技术在实际网页设计过程中的使用方法。 14.1 制作显示隐藏层页面 与显示隐藏层相关的实例有很多，本节介绍两个：利用层、时间轴以及行为技术制作幻灯片页面；利用图像热点结合显示隐藏层行为制作识别显示页面。 14.1.1 制作幻灯片 使用Dreamweaver可以制作出幻灯片效果，即多张图片在同一位置以固定速度切换显示，循环播放。其效果虽没有在FLASH等软件中制作的出色，但优势也很明显：制作简单，浏览速度快，无需插件支持。本节例子的效果是：在浏览器中的图片每隔2秒种切换成另外一张，3张花瓣图片循环播放。图14.1是其中的一个幻灯片页面。 14.1 制作显示隐藏层页面 实现上述效果的步骤如下： ① 准备3张大小相同的花瓣图片，或者在设计过程中把图片的大小调整为相同。 ② 在文档窗口创建一个层，在层中插入第一张花瓣图片。 ③ 仿照步骤②再创建2个层，分别插入其他2张花瓣图片。 ④ 把文档中的3个层的坐标设置为相同。先定位一个层，然后在其它两个层的属性面板中，将其“左”和“上”的值设置为和第一个层相同。 14.1 制作显示隐藏层页面 ⑤ 选择主菜单【窗口】|【时间轴】，打开时间轴面板，把3个层分别拖入到时间轴不同的动画通道，放置时第二个层和第一个层、第三个层和第二个层首尾相接，如图14.2所示。 ⑥ 由于每个层中的图片要设计显示2秒种，可把时间轴中FPS的值设定为8，把每个动画栏的长度设定为16帧。如图14.2所示。 ⑦ 选择主菜单【窗口】|【行为】，打开行为面板。 14.1 制作显示隐藏层页面 ⑧ 选中时间轴行为通道上第一帧，点击行为面板(添加行为)为第一帧的行为通道添加如图14.3所示的显示隐藏层动作：在第一帧时使layer1显示，其余两个层隐藏。 ⑨ 仿照步骤⑧依次在时间轴行为通道的第16帧添加行为：显示layer2，隐藏其余2层；在行为通道的第31帧添加行为：显示layer3，隐藏其余2层。 ⑩ 选中时间轴面板上“自动播放”和“循环”两项，按下F12，在浏览器中预览效果。 14.1 制作显示隐藏层页面 14.1.2 制作识别显示页面 识别显示页面效果如图14.4所示。当鼠标移动到图片中不同字样上时，显示相应的图片，鼠标移开字样范围时，所有图片隐藏。实现步骤如下： ① 在页面中插入一张设计好的带有“狮子、老虎、大象”字样的图片。 ② 选中图片，在其属性面板中，选择热点创建工具中的圆形工具。分别在图片中相应字样的圆形区域，创建3个圆形热点，热点大小覆盖其圆形区域。如图14.5所示。 14.1 制作显示隐藏层页面 ③ 在页面中创建一个层，在层中插入狮子图片。 ④ 仿照步骤③再创建2个层，分别插入老虎和大象的图片。 ⑤ 设置3个层的大小相同，层中图片大小也调整为相同。 ⑥ 把3个层的位置分别移动到相应热点区域下方。设置3个层间距大致相同，水平对齐(可在它们的属性面板中把“上”坐标的值设置相同)。设置完成后3个层在文档窗口中大小和位置如图14.6所示。 14.1 制作显示隐藏层页面 ⑦ 为方便记忆，分别将狮子、老虎和大象图片所在的层命名为：lion、tiger、elephant。 ⑧ 选中狮子字样上的热点区域，打开行为面板，点击(添加行为)，为该热点添加“显示隐藏层”行为，在行为面板中设置3个层的显示隐藏关系为：lion层显示，其余2层隐藏。如图14.7所示。 ⑨ 仿照步骤⑧，分别给另外两个热点区域添加行为，老虎字样热点显示tiger层，隐藏其余2层；大象字样热点显示elephant层，隐藏其余2层。 14.1 制作显示隐藏层页面 ⑩ 触发该动作的事件设定为onMouseOver。 11 由于要求当鼠标移开时，隐藏所有图层，则需要再给每一个热点区域添加一个隐藏所有层的行为，触发的事件是onMouseOut。设置后选中任意一个热点，行为面板显示为如图14.8所示。 12 页面载入时，所有3个层都是不可见的，故在层面板中设置初始状态所有层的显示属性为“隐藏”。如图14.9所示。 13 按下F12键，在浏览器中观察效果。 14.2 制作站点公告板 14.2.1 自动公告板 自动公告板是能够在页面中自动滚动发布信息的元素，在第十章时间轴中，曾介绍过自动公告板的制作方法，对于自动公告板，在页面载入时会自动播放时间轴。但是移动可能影响浏 览者阅读公告内容。因此需要通过设置，在浏览者要阅读公告