《静态网页综》PPT课件.ppt

1、第14章 静态网页综合应用实例,1,第14章 静态网页综合应用实例,第14章 静态网页综合应用实例,2,本章综合应用前面各章所介绍的网页设计技术设计三个应用实例：显示隐藏层页面、公告板的制作以及一个综合静态主页。其中包含了布局表格、文本和各种媒体元素的添加、CSS样式表的使用、层与时间轴、行为等各种网页设计技术，读者可以由此体会静态网页的设计流程以及各种技术在实际网页设计过程中的使用方法,第14章 静态网页综合应用实例,3,14.1 制作显示隐藏层页面,与显示隐藏层相关的实例有很多，本节介绍两个：利用层、时间轴以及行为技术制作幻灯片页面；利用图像热点结合显示隐藏层行为制作识别显示页面。 14.

2、1.1 制作幻灯片 使用Dreamweaver可以制作出幻灯片效果，即多张图片在同一位置以固定速度切换显示，循环播放。其效果虽没有在FLASH等软件中制作的出色，但优势也很明显：制作简单，浏览速度快，无需插件支持。本节例子的效果是：在浏览器中的图片每隔2秒种切换成另外一张，3张花瓣图片循环播放。图14.1是其中的一个幻灯片页面,第14章 静态网页综合应用实例,4,14.1 制作显示隐藏层页面,实现上述效果的步骤如下： 准备3张大小相同的花瓣图片，或者在设计过程中把图片的大小调整为相同。 在文档窗口创建一个层，在层中插入第一张花瓣图片。 仿照步骤再创建2个层，分别插入其他2张花瓣图片。 把文档中

3、的3个层的坐标设置为相同。先定位一个层，然后在其它两个层的属性面板中，将其“左”和“上”的值设置为和第一个层相同,第14章 静态网页综合应用实例,5,14.1 制作显示隐藏层页面,选择主菜单【窗口】|【时间轴】，打开时间轴面板，把3个层分别拖入到时间轴不同的动画通道，放置时第二个层和第一个层、第三个层和第二个层首尾相接，如图14.2所示。 由于每个层中的图片要设计显示2秒种，可把时间轴中FPS的值设定为8，把每个动画栏的长度设定为16帧。如图14.2所示。 选择主菜单【窗口】|【行为】，打开行为面板,第14章 静态网页综合应用实例,6,14.1 制作显示隐藏层页面,选中时间轴行为通道上第一帧，

4、点击行为面板(添加行为)为第一帧的行为通道添加如图14.3所示的显示隐藏层动作：在第一帧时使layer1显示，其余两个层隐藏。 仿照步骤依次在时间轴行为通道的第16帧添加行为：显示layer2，隐藏其余2层；在行为通道的第31帧添加行为：显示layer3，隐藏其余2层。 选中时间轴面板上“自动播放”和“循环”两项，按下F12，在浏览器中预览效果,第14章 静态网页综合应用实例,7,14.1 制作显示隐藏层页面,14.1.2 制作识别显示页面 识别显示页面效果如图14.4所示。当鼠标移动到图片中不同字样上时，显示相应的图片，鼠标移开字样范围时，所有图片隐藏。实现步骤如下： 在页面中插入一张设计好

5、的带有“狮子、老虎、大象”字样的图片。 选中图片，在其属性面板中，选择热点创建工具中的圆形工具。分别在图片中相应字样的圆形区域，创建3个圆形热点，热点大小覆盖其圆形区域。如图14.5所示,第14章 静态网页综合应用实例,8,14.1 制作显示隐藏层页面,在页面中创建一个层，在层中插入狮子图片。 仿照步骤再创建2个层，分别插入老虎和大象的图片。 设置3个层的大小相同，层中图片大小也调整为相同。 把3个层的位置分别移动到相应热点区域下方。设置3个层间距大致相同，水平对齐(可在它们的属性面板中把“上”坐标的值设置相同)。设置完成后3个层在文档窗口中大小和位置如图14.6所示,第14章 静态网页综合应

6、用实例,9,14.1 制作显示隐藏层页面,为方便记忆，分别将狮子、老虎和大象图片所在的层命名为：lion、tiger、elephant。 选中狮子字样上的热点区域，打开行为面板，点击(添加行为)，为该热点添加“显示隐藏层”行为，在行为面板中设置3个层的显示隐藏关系为：lion层显示，其余2层隐藏。如图14.7所示。 仿照步骤，分别给另外两个热点区域添加行为，老虎字样热点显示tiger层，隐藏其余2层；大象字样热点显示elephant层，隐藏其余2层,第14章 静态网页综合应用实例,10,14.1 制作显示隐藏层页面,触发该动作的事件设定为onMouseOver。 11 由于要求当鼠标移开时，隐

7、藏所有图层，则需要再给每一个热点区域添加一个隐藏所有层的行为，触发的事件是onMouseOut。设置后选中任意一个热点，行为面板显示为如图14.8所示。 12 页面载入时，所有3个层都是不可见的，故在层面板中设置初始状态所有层的显示属性为“隐藏”。如图14.9所示。 13 按下F12键，在浏览器中观察效果,第14章 静态网页综合应用实例,11,14.2 制作站点公告板,14.2.1 自动公告板 自动公告板是能够在页面中自动滚动发布信息的元素，在第十章时间轴中，曾介绍过自动公告板的制作方法，对于自动公告板，在页面载入时会自动播放时间轴。但是移动可能影响浏 览者阅读公告内容。因此需要通过设置，在浏

8、览者要阅读公告内容时，让滚动文字停止，阅读完成后继续滚动播放。故还应对第10章中的例子做相应的补充。操作步骤如下,第14章 静态网页综合应用实例,12,14.2 制作站点公告板,在第十章中例子的基础上，选中子层layer2。 打开行为面板，为子层layer2添加行为：当onMouseOver事件触发时，停止时间轴；当onMouseOut事件触发时，播放时间轴。添加后选中layer2，行为面板如图14.10所示。 按下F12在浏览器中预览。当鼠标放到运动文字上时，时间轴停止，鼠标移开文字继续运动,第14章 静态网页综合应用实例,13,14.2 制作站点公告板,14.2.2 手动公告板 在自动公告

9、板的基础上，还可以制作出功能较强的手动公告板。手动公告板的特点是：用户可以通过交互控制公告文字的移动方向。如图14.11所示。当鼠标放到图中男孩头像上时，公告文字自下向上垂直运动；当鼠标放到图中女孩头像上时，公告文字自上向下垂直运动；当鼠标移出头像范围时，公告文字停止运动,第14章 静态网页综合应用实例,14,14.2 制作站点公告板,实现手动公告板的步骤如下： 在页面中插入一个两行一列的表格进行定位。表格的第一行输入文字“本站公告”，在文字两侧分别插入准备好的男孩和女孩头像图片。 在表格的第二行插入一个层，用鼠标或键盘把层的水平中心定位到和第一行对应的位置。设置适当的层背景色。 把鼠标定位到

10、现有层的内部，使用插入层的方法插入一个新层。使新层成为现有层的子层。调整子层的位置大小，使子层位于父层的中心对称位置，略小于父层。 在子层中添加要显示在公告板中的文字。将其拖动到时间轴当中,第14章 静态网页综合应用实例,15,14.2 制作站点公告板,选中该动画栏中的第一个关键帧，将层移动到父层的下方(子层顶部和父层底部重合)，再选中其最后一个关键帧，把层移动到父层的上方(子层的底部和父层的顶部重合)，移动时可使用键盘上“”“”方向键，以保证创建的移动路径垂直。 时间轴面板中显示当前时间轴为“Timeline1”，该条时间轴控制的自下向上的垂直运动，若使上述子层还可以自上向下运动，则要再添加

11、一条时间轴。可在原有时间轴的通道区任意位置点击右键，在弹出的快捷菜单中选择【添加时间轴】命令，添加一个新的时间轴编辑面板区“Timeline2”，如图14.12所示,第14章 静态网页综合应用实例,16,14.2 制作站点公告板,把子层拖入到时间轴“Timeline2”当中，仿照步骤的方法创建自上向下的运动。只需要把第一个关键帧上子层的位置和最后一个关键帧互换即可。页面中的两条时间轴：Timeline1用来控制子层自下向上运动，Timeline2控制子层自上向下运动。 打开行为面板，选择男孩头像图片，添加以下行为：onMouseOver时触发动作播放时间轴Timeline1；onMouseOv

12、er时触发动作停止时间轴Timeline2；onMouseOut时触发动作停止时间轴Timeline1。即当鼠标移到男孩头像图片上时，播放向上运动的时间轴，同时停止向下运动的时间轴。当鼠标移出图片范围时，停止向上运动的时间轴,第14章 静态网页综合应用实例,17,14.2 制作站点公告板,选择女孩头像图片，为该图片添加以下行为：onMouseOver时触发动作播放时间轴Timeline2；onMouseOver时触发动作停止时间轴Timeline1；onMouseOut时触发动作停止时间轴Timeline2。即当鼠标放到女孩头像图片上时，播放向下运动的时间轴，同时停止向上运动的时间轴。当鼠标移

13、出图片范围时，停止向下运动的时间轴。设置完成后男孩和女孩图片上各有3个行为。如图14.13所示,第14章 静态网页综合应用实例,18,14.2 制作站点公告板,通过降低FPS的值和增加时间轴中动画栏长度的方法，减慢两条时间轴播放的速度。例如，设置FPS的值为8，动画栏的长度设置为55帧。 11 选中两条时间轴上的“循环”按钮，使动画可以循环播放。 12 按下F12键在浏览器中预览页面,第14章 静态网页综合应用实例,19,14.3 制作静态主页,主页是一个网站的核心，主页设计的优劣关系到网站能否吸引浏览者目光。主页中包含了网站的主要内容介绍和指向各个子页面的链接。在主页设计完成后，可以将其页面

14、风格固定的部分转换成模板，从而可以基于模板创建其他风格相同的子页面，所以主页的设计和制作在整个网站的设计中占据着重要地位。示例主页如图14.14所示。从上到下依次可分为：顶部图片、导航菜单、主体页面和版权声明4个部分,第14章 静态网页综合应用实例,20,14.3 制作静态主页,14.3.1 使用布局视图规划页面 在制作页面之前，使用布局视图对页面进行规划是十分必要的。对于收集和制作好的素材，将来如何分配，在布局规划的时候要做好准备。使用布局视图规划页面的步骤如下： 打开【插入】面板的【布局】项，单击【布局】按钮，切换到布局视图，插入面板中(绘制布局表格)按钮和(绘制布局单元格)按钮为可用状态

15、。如图14.15所示,第14章 静态网页综合应用实例,21,14.3 制作静态主页,使用(绘制布局表格)按钮，在文档区中绘制布局：首先绘制一个容纳所有页面内容的布局表格，然后从上到下依次绘制顶部图片区域、导航菜单区域、主区域和版权声明区域。 由于在顶部图片区域中需要插入的5张图片(如图14.14所示)：左侧2张较大图片和右侧3张较小图片行数不同，故先用(绘制布局表格)按钮在顶部图片区域绘制两个布局表格。 在主区域中用(绘制布局表格)按钮绘制出左、中、右3个布局表格。布局完成后，如图14.16所示,第14章 静态网页综合应用实例,22,14.3 制作静态主页,14.3.2 添加顶部图片 添加顶部

16、图片的步骤如下： 在页面布局视图状态下，使用(绘制布局单元格)按钮为顶部的5张图片分别创建如图14.17所示的布局单元格。左侧布局表格中创建左右两个单元格，右侧布局表格中创建上、中、下三个单元格。 在布局单元格中，选择主菜单【插入】|【图像】，分别插入素材图片。 调整图片的大小，使整个顶部图片区域高度一致，图片之间无缝隙。图14.14中左侧两图片高度为66px，右侧每个小图片高度为22px,第14章 静态网页综合应用实例,23,14.3 制作静态主页,14.3.3 设计导航菜单 导航菜单采用的是单线表格的形式，第一个单元格中放置显示当前日期的JavaScript脚本代码，其余每个单元格中放置一

17、个站点栏目文字。表格中的文字用CSS样式表定义字体、大小、颜色以及对齐方式等属性。制作导航菜单的步骤如下： 切换到标准视图，把鼠标定位在用做导航菜单的表格当中。然后点击属性面板中“拆分单元格”按钮，在拆分单元格对话框中把该单元格拆分成9列,第14章 静态网页综合应用实例,24,14.3 制作静态主页,根据页面的宽度设置各个单元格的大小，由于第一列单元格中需要放置文字较多的“当前日期时间”，故选中该单元格后，在其属性面板中设置列宽为较大值(图14.14中列宽为240px)，其余各列宽度可设置为相同值(图14.14中列宽为60px)。 把鼠标定位在导航表格第一列中，选择主菜单【插入】|【HTML】

18、|【脚本对象】|【脚本】，在弹出的插入脚本对话框中输入显示当前日期时间的脚本内容。点击“确定”插入脚本,第14章 静态网页综合应用实例,25,14.3 制作静态主页,在其余列中分别输入导航菜单中设计的各个栏目名称：如网页特效、作品展示等等。对于表格中内容的样式，可使用第8章中介绍的重定义HTML标签的方法，对单元格标记定义CSS样式。例如，图14.18中标记中的样式定义为：字体：宋体；字体大小：12px；字体颜色：red；对齐方式：水平居中、垂直中线对齐。 选中整个导航菜单所在的表格，设置背景色为红色，间距值为1；再分别选中其9个单元格，在单元格属性面板中为每个单元格添加比表格背景略浅的红色背

19、景图片(或背景颜色,第14章 静态网页综合应用实例,26,14.3 制作静态主页,14.3.4 设计主体页面 主页中的主要内容在主体页面中显示，图14.14中的主页为典型的三分栏结构：左侧部分、右侧部分和中央部分。 1左侧部分 左侧部分分为3个栏目，分别是“极限论坛”、“图片链接”和“文字链接”。设计的过程中以“极限论坛”为例，其余两个栏目的设计可仿照进行。设计和制作“极限论坛”栏目的步骤如下,第14章 静态网页综合应用实例,27,14.3 制作静态主页,切换到布局视图，在左侧区域的布局表格中，用绘制布局单元格工具分别绘制栏目标题单元格和内容单元格。标题单元格和标题图片素材“极限论坛”等高。

20、切换到标准视图，选中标题单元格，为其添加带有“极限论坛”字样的背景图片，调整单元格大小使图片中的文字位于单元格中央。如图14.19所示。 在栏目内容单元格中，分别插入以下表单项目：用户名称和相应的文本字段、用户密码和相应的密码文本域，两个复选按钮“记住密码”和“隐身登陆”，最后放置两个图像域“登陆”和“注册”。在换行时用Shift+回车以节省空间。(注意：栏目中只是按照表单的形式进行显示，具体表单提交后数据的处理参见第17章,第14章 静态网页综合应用实例,28,14.3 制作静态主页,为该栏目内容单元格设置背景色，由于整个主页以红色为主，可以新建一个“类”类型的CSS样式，在样式中定义背景属

21、性为pink(粉红色)。为要添加背景色的单元格设置为该CSS样式类。 2右侧部分 右侧部分分为3个栏目：“公告板”、“本站调查”和“本站成员”。操作步骤如下： 切换到布局视图，在右侧区域的布局表格中，用绘制布局单元格工具分别绘制栏目标题单元格和内容单元格。标题单元格要和标题图片素材“公告板”等高,第14章 静态网页综合应用实例,29,14.3 制作静态主页,切换到标准视图，选中标题单元格，为其添加带有“公告板”字样的背景图片，调整单元格的大小使图片中的文字位于单元格中央。如图14.20所示。 仿照步骤和分别设计“本站调查”和“本站成员”两栏目的版面。 在“公告板”栏目的内容区域，添加本章14.2.1中介绍的“自动公告板”。 在“本站调查”栏目中输入：“你觉得本站还应该改进哪些内容”字样，然后分别创建3个单选按钮，在其后分别输入相应的文字，再放置两个表单按钮即可。具体设置参考左侧部分的“极限论坛”栏目。 为右侧3个栏