5.1设置页眉（课件）-高二《网页设计与制作》同步教学（人民邮电版）

项目五 制作教育导航网页 任务一 设置页眉 任务二 设置网页主体 项目五： 制作教育导航网页 网页设计与制作Dreamweaver 8 任务一 任务二 任务三 设置页脚 任务四 设置锚记超级链接 任务三 小 结 任务四 实 训 任务一 设置页眉 本任务主要是对网页页眉部分的超级链接进行设置，主要使用鼠标经过图像和导航条技术，它们是基于图像的比较特殊的链接形式，属于图像对象的范畴。 Dreamweaver 8 网页设计与制作 项目五： 制作教育导航网页 任务一 任务二 任务三 小 结 任务四 实 训 2 操作一 设置鼠标经过图像对象 Dreamweaver 8 网页设计与制作 项目五： 制作教育导航网页 本操作主要介绍设置页眉中的鼠标经过图像对象的方法。通过本操作的学习，应该掌握的内容主要有： 1.鼠标经过图像对象的涵义及状态 鼠标经过图像是指在网页中，当鼠标经过或者按下按钮时，按钮的形状、颜色等属性会随之发生变化，如发光、变形或者出现阴影，使网页变得生动有趣。 鼠标经过图像有两种状态： （1）原始状态：在网页中的正常显示状态。 （2）变换图像：当鼠标经过或者按下按钮时显示的变化图像。 设置鼠标经过图像对象操作动画 任务一 任务二 任务三 小 结 任务四 实 训 Dreamweaver 8 网页设计与制作 操作一 设置鼠标经过图像对象 项目五： 制作教育导航网页 2.设置鼠标经过图像对象的方法 在主菜单中选择【插入】／【图像对像】／【鼠标经过图像】命令或者在【插入】／【常用】面板中单击 （鼠标经过图像）按钮，打开【插入鼠标经过图像】对话框进行设置即可。 任务一 任务二 任务三 小 结 任务四 实 训 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 Dreamweaver 8 网页设计与制作 操作一 设置鼠标经过图像对象 项目五： 制作教育导航网页 3.设置鼠标经过图像对象应该注意的问题 两幅图像的尺寸大小必须是一样的。网页将第1幅图像的尺寸大小作为标准，在显示第2幅图像时，将按照第1幅的尺寸大小来显示。如果第2幅图像比第1幅图像大，那么将缩小显示；反之，则放大显示。第2幅图像有可能会发生失真现象，因此，在制作和选择两幅图像时，尺寸应保持一致。  一般要先在图像处理软件中将两种状态的图像文件制作好，分别保存到网站的图像文件夹内，然后才能创建鼠标经过图像。当包含“鼠标经过图像”的网页被浏览器下载时，会将这两种状态图像一起下载。暂时不显示的图像被存放在浏览器的缓存中，当鼠标经过图像时，再从缓存中将变化的图像调出来，这样图像的变化就没有停滞的感觉，也节省了用户的等待时间。 任务一 任务二 任务三 小 结 任务四 实 训 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 操作二 设置导航条图像对像 Dreamweaver 8 网页设计与制作 项目五： 制作教育导航网页 本操作主要介绍设置页眉中的导航条的方法。通过本操作的学习，应该掌握的内容主要有： 1.导航条的涵义及状态 导航条是由一组按钮或者图像组成的，这些按钮或者图像链接各分支页面，起到导航的作用。导航条包括以下4种状态： （1）状态图像：用户还未单击按钮或按钮未交互时显现的状态。 （2）鼠标经过图像：当鼠标指针移动到按钮上时，元素发生变换而显现的状态。例如，按钮可能变亮、变色、变形，从而让用户知道可以与之交互。 设置导航条图像对象操作动画 任务一 任务二 任务三 小 结 任务四 实 训 操作二 设置导航条图像对像 Dreamweaver 8 网页设计与制作 项目五： 制作教育导航网页 （3）按下图像：按钮被单击后显现的状态。例如，当用户单击按钮时，新页面被载入且导航条仍是显示的；但被单击过的按钮会变暗或者凹陷，以表明此按钮已被按下。 （4）按下时鼠标经过图像：按钮被单击后，鼠标指针移动到被按下元素上时显现的图像。例如，按钮可能变暗或变灰，可以用这个状态暗示用户：在站点的这个部分该按钮已不能被再次单击。 制作导航条不一定要包括所有4种状态的导航条图像。即使只有一般状态图像和鼠标经过图像，也可以创建一个导航条，不过最好还是将4种状态的图像都包括，这样会使导航条看起来更生动一些。 任务一 任务二 任务三 小 结 任务四 实 训 操作二 设置导航条图像对像 Dreamweave