第10课行为技术(3).ppt

注意 1 表格画在表单范围里面 2 跳转菜单中的网址别忘记http 3 别忘记删除按钮前面的菜单的行为 保留按钮的行为即可 问题导入 弹出信息框 打开浏览器窗口 播放声音等 通常这些功能是通过编写JavaScript代码完成的 现在DWMX2004已经内置了20多种代码在 行为面板 中 不熟悉代码编写或者不会编写代码的朋友也能轻松的制作带有这些效果的网页了 行为是由一个事件触发一个动作组成的事件是访问者对网页所做的事情 比如把鼠标移动到一个链接上 这就生一个鼠标经过的事件 这个事件触发浏览器去执行执行一段JavaSceipt代码 这就是动作 然后产生了JavaScript设计的效果 打开窗口 播放音乐等 这就是行为 1使用行为面板 操作步骤 1 选择 窗口 中的 行为 命令 2 打开 行为 面板 只显示已设置的事件列表 显示所有事件列表 打开行为菜单 选择相应的行为命令后 会打开相应的对话框 设置完成后将为指定的对象添加行为 如菜单呈灰色显示 说明指定的对象不能添加该行为 删除选中的行为 向上移动或向下移动所选动作 演示 对图片加行为 1交换图片2 单击弹出信息 显示事件 打开级联菜单 提供10种不同浏览器的版本 不同的浏览器支持的事件种类和数量是不一样的 通常高版本的浏览器支持更多的事件 1 交换图像 交换图像 将一个图像和另一个图像进行交换 恢复图像交换 恢复交换图像 是将最后一组交换的图像恢复为以前的源文件 回忆 插入鼠标经过图像会自动将一个 交换图像 行为添加到网页中选择 插入 菜单 图像对象 鼠标经过图像 选择原始图像 鼠标经过图像 再设置其链接 弹出信息 行为将在访问者触发某个事件时打开一个显示指定信息的对话框 2 弹出消息 鼠标滑过弹出信息 文本和图片弹出信息 htm 1 新建一个文档2 输入 单击看效果 选中文本 在其链接输入一个 建立一个空链接 3 选中文本 添加行为 弹出信息 在对话框中输入 canusee 4 将动作设置为 onclick 图片不需要建空链接 直接加动作 重复3 4步骤即可 3 打开浏览器窗口 注意区别 超级链接 打开新窗口打开浏览器窗口 可以设置弹出的窗口大小 属性 是否可调整大小 是否有菜单栏等 以及名称 对比 Seered建立链接看red htmlAlsoseered空链接添加行为 打开浏览器窗口 实例1在图片上按下鼠标弹出新窗口 1 新建一个文档被打开的浏览器窗口 htm 插入 img动物 里的d jpg图像 300 300像素设置页面属性 左边距和上边距均设为0像素 3 在行为面板添加行为 打开浏览器窗口 2 再新建一个文档打开浏览器窗口主页 htm 插入 dog jpg 图片 鼠标选中 4 对事件进行设置 下拉菜单中选则选择 onClick 鼠标单击 效果 用浏览器打开这个网页 用鼠标图片在图片上按下的时候 弹出一个新的窗口 提示 本例中使用了鼠标点击 可以改为鼠标经过 鼠标移开 鼠标按下 鼠标双击等来触发 窗口宽度指定窗口的宽度 以像素为单位 窗口高度指定窗口的高度 以像素为单位 导航工具栏是一行浏览器按钮 包括 后退 前进 主页 和 重新载入 地址工具栏浏览器选项 包括地址文本框 状态栏是位于浏览器窗口底部的区域 在该区域中显示消息 菜单栏 需要时显示滚动条指定如果内容超出可视区域应该显示滚动条 调整大小手柄指定用户能否调整窗口的大小 方法是拖动窗口的右下角或单击右上角的最大化按钮 Windows 或大小框 Macintosh 窗口名称是新窗口的名称 如果您要通过JavaScript使用链接指向新窗口或控制新窗口 则应该对新窗口进行命名 此名称不能包含空格或特殊字符 如果指定窗口无属性 则窗口将按启动窗口的属性大小打开 指定任何属性都将自动关闭所有其他属性不指定任何属性以启动窗口的属性大小打开 具有导航工具栏 位置栏 状态栏和菜单栏 明确设置了窗口宽度高度640 480 而没有设置其他属性 以640 480像素打开窗口 无导航工具栏 位置栏等 4 拖动层 在众多网页制作软件中DreamweaverMX2004独有层的功能 DreamweaverMX2004的层与FlashMX和Photoshop中的层不同 DreamweaverMX2004的层可以游离在文档之上 因此可以用来精确定位网页元素 可以通过时间轴来移动或者变换位置 实现动画效果 建立层 步骤一 选择 布局 标准 格式 步骤二 此时在文档窗口就能看到建立了一个层 鼠标点击手柄或层标签都能选中层 层编号 给层命名 使用行为或者JavaScrip来控制层的时候 就必须用到名称 左 上 层与浏览器窗口左边 上边 的距离 宽 高 层的宽度和高度 Z轴 屏幕X Y轴 逻辑上增加了一个垂直于屏幕的Z轴 其数值代表垂直平面的方向上层的序号 背景图像 颜色 用来设置层的背景图像和颜色 溢出 当层内的内容超过层的大小时的显示方式visible 层将向右向下扩大显示层内的全部内容 hidden 只显示层尺寸以内的内容 scroll 不改变层的大小 但增加滚动条 不管层够不够大均显示滚动条 auto 只有在层不够大的时候才出项滚动条 实践 在小层中添加大图片改变 溢出 看效果 可见性 层的可见性 default 默认 inherit 继承 visible 可见 hidden 隐藏 剪辑 指定层的哪一部分是可见的 例如 若要使一个层中左上角50像素宽75像素高的矩形区域可见而其他内容均不可见 请将 左 设置为0 将 右 设置为50 将 上 设置为0 将 下 设置为75 层面板 窗口 层 或者使用快捷键 F2 都可以打开层面板 可以实现以下功能 选一个或者多个层 shift 鼠标单击 修改层的Z轴顺序 直接修改 修改层的可见性禁止或者允许层重叠 5 显示 隐藏层 显示 隐藏层 动作显示 隐藏或恢复一个或多个层的默认可见性 效果 鼠标指向左侧书名 右侧显示相应书籍内容简介 1 建立6行2列表格 按图示合并单元格 2 在右侧合并后的表格内插入6个层 layer1 layer6 分别在每个层内插入内容简介及封面图片 3 选中 WAP基础及应用教程 文本 建立空链接 将光标挺在文本内 添加行为 显示 隐藏层 事件 OnMouseOver 动作 显示layer1 隐藏其他层 4 依次为下面几行设置同样的行为 5 将层初始均设为隐藏层 地图示例 选择热点添加显示 隐藏层的行为 嵌套层 建立一个嵌套层 插入一个层 打开 嵌套 选项 首选参数 层 嵌套将鼠标光标定位在这个层内 然后插入层 这就形成了嵌套层 嵌套层 在 层 面板中将一个层嵌套到另一个层选择一个层 然后通过按住Ctrl键并拖动 将层移动到目标层 按住Ctrl键并拖出 则取消 树型结构 开始建立的层叫做父层 后插入的那个层叫做子层 父层和子层的Z轴位置是一样的 这种 父子关系 是结构的关系 子层不一定要在父层内 子层移动位置 父层不发生变化 而父层移动 子层会随着父层移动 建立二层看效果 时间轴与层密切相关随着时间的变化改变层的位置 尺寸 可视性以及叠放顺序可以实现更多的效果 层结合时间轴 时间轴 面板 用于创建时间轴 1 打开 时间轴 窗口 时间轴 Alt F9 播放头 显示当前页面上的层是时间轴的哪一帧 动画通道 动画通道 显示层的动画条 动画条 显示每个对象的动画持续时间 关键帧 在动画条中被指定动画属性的帧 行为通道 显示在时间轴上某一帧执行指令 帧频 每秒钟播放的帧数 但超过用户浏览器可处理的速率则会被忽略掉 15Fps是平均较好的速率 行为通道中可以看到循环的标签 1 直线运动 1 插入层 层内插入图像qiqiu gif 确定动画的起始位置2 选中层 右键 添加到时间轴3 单击时间轴的最后一帧 确定动画结束位置 创建时间轴动画 4 使动画播放的时间变长 拖动结尾帧标记5 改变动画开始的时间 拖动开始帧 2 曲线运动 1 插入层 层内插入图像qiqiu gif 确定动画的起始位置2 选中层 右键 添加到时间轴3 单击时间轴的最后一帧 确定动画结束位置 4 选中动画条增加关键帧 5 移动层的位置 按住关键帧处的层手柄 只改变关键帧处层的位置 若想改变整个动画路径的位置 层在非关键帧位置时 按住手柄移动使层到达关键帧位置的时间提前或延后 拖动该关键帧 3 创建复杂路径的动画选中层 右键 录制路径 应注意 层虽然能够自由定位 但在不同浏览器中显示时可能效果不同 有时还可能出现网页元素显示不正常的情况 因此 层只适于制作页面元素较少的网页 或结合表格等技术进行 复习 直线播放 1 将层移动到起始的位置 添加到时间轴 2 鼠标按住最后的关键桢拖动 调节播放快慢 3 保持最后的关键桢被选中的状态 如图 将层移到需要的位置 4 将循环勾选 弧线播放 1 选中前面的直线的时间轴 变色表示选中 2 在播放头 红色 鼠标右键 添加关键祯 3 拖动关键桢对应的层 则变成弧线 4 添加其他关键桢 拖动关键桢对应的层 则改变形状 多个层添加到时间轴 直线 弧线 1 将层移到起始的位置 均添加到时间轴 2 拖动其始的关键祯 确定层开始出现的时间 3 调整各个层的结束的关键祯 确定结束位置 4 在不同的时间轴上添加各自的关键祯 多个层添加到时间轴 任意路径 1 选中层 2 右键 记录路径 3 选中其他层 4 右键 记录路径 添加行为 1 点击行为通道 2 右键添加行为 3 选择行为 4 当播放到该桢时 有播放音乐的行为 勾选首选参数 层 嵌套插入一个层 在层面板取消防止重叠 将鼠标光标定位在这个层内 然后插入子层 尺寸略小于第一个层 并向层内添加文字 4 有第二个子层添加在时间轴中 用层的嵌套结合时间轴创建滚动的公告牌 5 在时间轴面板用鼠标选中初始帧 确定位置在第一层的下方 6 选中最后帧 用鼠标移动到公告牌的上方 从而定最后的帧位置 7 层面板选中第一个层 属性面板的 溢出 属性设置为 hidden 第一个层父层溢出设定为隐藏 也就是在父层显示范围内可见 给滚动的公告条添加行为 光标移上停止时间轴 移走播放时间轴 8 选中滚动的层 9 为层添加行为 滚动条的文本可以有链接 水平欢迎词的加入 1 加父层2 加稍小的子层3 子层拖到起始位置 添加到时间轴 确定最后帧的位置 勾选循环和自动 4 父层 溢出 属性设置为 hidden 注意 调整时间轴的最后帧的位置要确保行为通道的循环没被勾选 确定好时间轴的快慢和最后位置后在勾选 加上循环 使用marquee标签制作滚动字幕 1 把光标插入点放在需要插入滚动字幕的地方 2 点击插入面板的 标签选择器 3 选择marquee标签 点击 插入 按钮 4 转换到代码视图 把光标插入点放在marquee标签内 输入滚动的字 分行等全部输入后在设计窗口再调整 5 选择 窗口 标签检查器 可以在 标签检查器 中设置标签的各种用法 6 点击behavior设置项右边的下拉箭头 选择滚动字幕内容的运动方式behavior用法内容alternate在相反两个方向滚来滚去scroll内容向同一个方向滚动slide内容接触到字幕边框就停止滚动 direction属性设置字幕内容的滚动方向 direction用法down向下运动left向左运动right向右运动up向上运动Scrollamount控制快慢2和100比较 当需要对不同时间轴添加行为时时 应该分别添加到不同的时间轴分别控制 添加多个时间轴 1 添加五个层 分别放置模特和四件衣服 2 修改 时间轴 添加时间轴 3 将红上衣所在的层添加到时间轴 4 选中最后一个关键桢 拖到第十五桢处 5 将最后的关键桢层的位置设置在模特上面 6 选中红上衣图片 添加行为 时间轴 转到时间轴桢OnclickOnDbclick前往时间轴1第1桢 7 修改 时间轴 添加时间轴28 将绿上衣所在的层添加到时间轴2 9 选中最后一个关键桢 拖到第十五桢处 10 将最后的关键桢层的位置设置在模特上面 11 选中绿上衣图片 添加行为 时间轴 转到时间轴桢OnclickOnDbclick前往时间轴2第1桢 5 拖动层 拖动层 动作允许访问者拖动层 使用此动作可创建拼板游戏和其他可移动的界面元素 最佳的方法是 使用onLoad事件 将 拖动层 附加到body对象上 从 移动 弹出菜单中选择 限制 或 不限制 不限制移动适用于拼板游戏和其它拖放游戏 对于限制移动 在 上 下 左 和 右 文本框中输入值 以像素为单位 这些值是相对于层的起始位置的 限制在矩形区域中的移动 则四个都输入正值 只允许垂直移动 上 和 下 正值 左 和 右 0 只允许水平移动 在 左 和 右 中正值 上 和 下 0 层的左坐标和上坐标与输入的值匹配 认为层已经到达拖放目标 这些值是与浏览器窗口的左上角相对的 单击 取得目前位置 用层的当前位置自动填充这些文本框 确定访问者必须放目标多近 才能将层靠齐到目标 较大的值可以使访问者较容易找到拖放目标 指定单击层的特定区域才能拖动层 请从 拖动控制点 弹出菜单中选择 层内区域 然后输入左坐标和上坐标以及拖动控制点的宽度和高度 如果要让访问者单击层的任何位置都可以拖动层 则不要设置此选项 层在被拖动时应该移动到堆叠顺序的顶部 则选择 将层移至最前 输入JavaScript代码或函数名称在拖动层时反复执行该代码或函数 例如 可以编一个函数 monitorLayer 该函数监视层的坐标并在一个文本框中显示提示 如 您正在接近目标 或 您离拖放目标还很远 输入在放下层时执行JavaScript代码或函数名称如果只有在层到达目标时才执行 则选择 只有在靠齐时 呼叫JavaScript脚本 alert 你真棒 1 插入一个层 layer1 层内插入图片小猫拼图 mao10 xt gif 2 再插入层 layer2 layer5 层内分别插入图片 3 将四个层拖入layer1的相应位置 4 选中body文档 添加行为 拖动层 5 选定layer2取得目前位置 靠齐距离50像素 可改变 时放下目标 在 高级 选项卡中设置 放下时 呼叫JavaScript脚本 alert 你真棒 即可 6 重复4 5步设置其他层的行为7 设置完毕 将layer2 layer5打乱顺序 从layer1上拖出即可 6 控制Shockwave或Flash 播放 停止 倒放或转到MacromediaShockwave或MacromediaFlashSWF文件中的帧 1 选择 插入 媒体 Shockwave 或 插入 媒体 Flash 分别插入文件 2 属性面板输入名称 若要用 控制Shockwave或Flash 动作对影片进行控制 您必须进行命名 3 选择要用于控制Shockwave或FlashSWF文件的项 例如 播放 按钮 4 打开 行为 面板 窗口 行为 5 单击加号 按钮并从 动作 弹出菜单中选择 控制Shockwave或Flash 6 从 影片 弹出菜单中选择一个影片 7 选择是否播放 停止 倒带或转到影片中的帧 播放 选项从动作发生的帧开始播放影片 例子 动画播放 停止控制 7 播放声音 用户在每次鼠标指针滑过某个链接时播放一段声音效果 或在页载入时播放音乐剪辑 操作 选择一个对象并打开 行为 面板 单击加号 按钮并从 动作 弹出菜单中选择 播放声音 单击 浏览 选择一个声音文件 或在 播放声音 文本框中输入路径和文件名 单击 确定 9 显示弹出菜单 步骤 1 选中文字 对其进行空链接 2 添加行为 显示弹出菜单 3 对弹出菜单进行编辑 双击 显示弹出菜单 10 检查插件 可以检查访问者的浏览器中是否安装了指定的插件 可以分别为安装插件和未安装插件的用户显示不同的