第7章行为与时间轴.ppt

《网页设计技术》 第7章 行为与时间轴 7.1 行为 前面的学习停留在静态的设计水平，那么如何设置网页的动感效果呢，如变换的图像、弹出的公告、滚动的新闻等等。利用层、时间轴、行为等非常容易的实现这些动感效果，这就是DW的精华所在。 行为由事件和动作所组成。动作是DW已定义好的javascript代码，是DW预置的已编好的功能；事件是引发动作的方式，如onload事件、onclick事件等。 例如，将鼠标移动到导航条中的一幅图像上，就产生了一个“移动到”事件，如果这时候图像变化，此时引发了一个动作。 下面请看几个操作案例： 7.1 行为 例1：利用“弹出信息行为”在网页中弹出信息框。 操作要求：当访问者打开某一页面时弹出“欢迎来到本网站！”的欢迎词。 打开一网页文档，单击body标签，选定整个文档； 打开“行为”面板，单击其上的“添加行为”按钮，在弹出的菜单中选择“弹出信息”动作菜单项，将打开“弹出信息”对话框； 在对话框的“消息”文本框中设置好参数即可（输入文字“欢迎来到本网站！” ）； 此时body对象添加了“弹出信息”行为，将默认事件改为onload事件； 保存网页，预览该网页，在加载网页时同时也弹出“欢迎来到本网站！”的对话框。 7.1 行为 例2：使用“打开浏览器行为”制作网页加载时弹出公告页的效果。 操作要求：当打开某一网页时，同时弹出通知事项、特殊消息的小窗口。 首先制作一个网页文档，用来显示通告信息； 打开主文档，单击body标签，选定整个文档； 在“行为”面板上，单击“添加行为”按钮，在弹出的菜单中选择“打开浏览器行为”动作菜单项，打开“打开浏览器行为”对话框； 在对话框中设置好用作通告的网页文档及窗口的大小等参数； 设置事件为onload 7.1 行为 例3：使用“显示弹出式菜单”行为制作一个下拉式的菜单 要求如下：在已经制作好的一个具有导航条的页面的基础上，对其中的一个名为“产品目录”的导航制作一个弹出式菜单，当鼠标经过“产品目录”导航时就弹出菜单，如图所示，鼠标离开后就隐藏菜单。 7.1 行为 其具体操作如下： 打开一个已制作好导航条的页面，选中页面中的“产品目录”对应的导航图像。 在“行为”菜单中选择“显示弹出式菜单”菜单项，打开“显示弹出式菜单”对话框。 在内容选项卡的文本框中输入菜单名“彩妆系列”，这是第一个菜单项。 单击“添加项”按钮添加菜单项，然后在文本框中输入第二个菜单项“护肤系列”。 重复第（3）步操作，分别添加名为、“美体系列”、“美容器材”的菜单项，添加完后。 选中“护肤系列”菜单项，单击“添加项”按钮添加菜单项，然后在“文本”文本框中输入菜单名“日常护理”，用相同方法，添加“特别护理”。 7.1 行为 选中“日常护理”菜单项，单击“缩进项”按钮使其成为“护肤系列”菜单项的下一级子菜单。 选中“特别护理”菜单项做同样的操作，这时会发现“特别护理”菜单并没有成为“护肤系列”菜单项的下一级子菜单，而是成为了“特别护理”菜单项的下一级菜单。 显然这是不符合要求的，这时可以选中“特别护理”菜单项，再单击“左缩进项”按钮使“特别护理”菜单项和“日常护理”菜单项同级，成为“护肤系列”菜单项的下一级子菜单。 在“字体”下拉列表框中选择“楷体”，使用“大小”文本框中文本大小的默认设置。 7.1 行为 在“一般状态”栏中设置“文本”和“单元格”在一般状态下显示的颜色分别为“黑色”和“粉红色”(#FFCCFF)，在“滑过状态”栏中设置鼠标经过时“文本”颜色依然为“黑色”，“单元格”颜色为“白色” 。 对“高级”选项卡中的参数都采用默认设置，切换到“位置”选项卡。 在“菜单位置”栏中，单击 按钮使弹出式菜单显示在“产品目录”导航图像的下方并对齐其左边缘。 选中 复选框，当鼠标离开触发器时隐藏菜单。 完成设置后，单击“确定”按钮，在“行为”面板中将出现“显示弹出式菜单”和“隐藏弹出式菜单”两个行为。其默认事件分别为“onMouseOver”和“onMouseOut”。 7.1 行为 例4：行为和层的综合应用。 要求如下：制作一个具有预览功能的图库页面，单击缩略的小图片，就能显示它的放大图片，怎样实现这种预览功能呢？请看操作 首先制作一个图库页面； 创建一个大小合适的层来插入放大的图片，层的大小由放大图片的大小所决定，在新层中插入放大的图片； 用同样的方法创建几个大小相同的层，分别用来插入对应的放大图片； 选择第一个小图片，在“行为”面板上，单击“添加行为”按钮，在弹出的菜单中选择“显示隐藏层”命令，将打开“显示隐藏层”对话框，设置好对应的参数； 将事件改为onclick即可； 7.1 行为 行为 所谓“行为”是指触