网页设计 动态效果海德体育
栏目:行业动态 发布时间:2024-04-04
 海德体育• (2)在【弹出信息】对话框中,输入要显示的信息内 (2)在 弹出信息】对话框中, 如图所示。 容,如图所示。  • (3)单击 按钮,在行为面板中显示了添加的行为,事 (3)单击 按钮,在行为面板中显示了添加的行为, 件选择“onLoad” 如图所示。 件选择“onLoad”,如图所示。  • (4)打开【拖动AP元素】对话框,在【基本】选项 打开【拖动AP元素 对话框, 元素】

  海德体育• (2)在【弹出信息】对话框中,输入要显示的信息内 (2)在 弹出信息】对话框中, 如图所示。 容,如图所示。

  • (3)单击 按钮,在行为面板中显示了添加的行为,事 (3)单击 按钮,在行为面板中显示了添加的行为, 件选择“onLoad” 如图所示。 件选择“onLoad”,如图所示。

  • (4)打开【拖动AP元素】对话框,在【基本】选项 打开【拖动AP元素 对话框, 元素】 基本】 卡中, AP元素 设置为div“apDiv1”,“移动 元素” 移动” 卡中,将“AP元素”设置为div“apDiv1”,“移动”设置 不限制” 如图所示。 为“不限制”,如图所示。

  • 在菜单栏中选择【窗口】→【行为】命令,即可打 在菜单栏中选择【窗口】 行为】命令, 行为】面板,如图所示。 开【行为】面板,如图所示。

  • 【交换图像】行为动作通过更改图像标签的src属性, 交换图像】行为动作通过更改图像标签的src属性 属性, 将一个图像和另一个图像交换。 将一个图像和另一个图像交换。使用该动作可以创 建【鼠标经过图像】和其它的图像效果(包括一次 鼠标经过图像】和其它的图像效果( 交换多个图像)。 交换图像】 )。【 交换多个图像)。【交换图像】动作的创建步骤如 下: • (1)在网页文档中选择要添加行为的图像,在菜单栏 (1)在网页文档中选择要添加行为的图像, 在网页文档中选择要添加行为的图像 中选择【窗口】 中选择【窗口】→【行为】命令,打开【行为】面 行为】命令,打开【行为】 单击【添加行为】 板。单击【添加行为】按钮 ,在弹出的菜单中选择 交换图像】动作,如下图所示。 【交换图像】动作,如下图所示。

  • (2)在AP Div中插பைடு நூலகம்光标,在【插入】面板的【常 Div中插入光标 中插入光标, 插入】面板的【 按钮,然后插入“welcome.png” 用】模式中单击 按钮,然后插入“welcome.png” 图像文件,如图所示。 图像文件,如图所示。

  • (3)选择网页文档左下角的body 标签,打开 选择网页文档左下角的body 标签 标签, 行为】面板,单击【添加行为】 【行为】面板,单击【添加行为】按钮 ,在弹出 的菜单中选择【拖动AP元素 动作,如图所示。 元素】 的菜单中选择【拖动AP元素】动作,如图所示海德体育。

  • 在网页中插入各种媒体文件。 在网页中插入各种媒体文件。 • 行为面板。 行为面板。 • 创建网站相册。 创建网站相册。

  • 利用Dreamweaver内建的多媒体组件,可以在网页 利用Dreamweaver内建的多媒体组件 内建的多媒体组件, 中制作开场动画、播放影片与声音、 中制作开场动画、播放影片与声音、显示网页更新 日期以及互动行为效果等, 日期以及互动行为效果等,各种媒体与程序文件都 能使画面的呈现方式更丰富多元化。 能使画面的呈现方式更丰富多元化。 • 相册与人们的生活密切相关,它可以用来收集、查 相册与人们的生活密切相关,它可以用来收集、 看相片。在制作个人网站时, 看相片。在制作个人网站时,也可以把自己的电子 相册放到网页中去。利用CSS样式可将网站相册修饰 相册放到网页中去海德体育。利用CSS样式可将网站相册修饰 得更精美。 得更精美。

  • (2)在弹出的【交换图像】对线)在弹出的 交换图像】对话框中, 在弹出的【 在选择【图像源文件】 钮,在选择【图像源文件】对线.jpg”文件。 “ line_2.jpg”文件。

  • (3)保存文件,按F12键在浏览器中观看网页效果,当 (3)保存文件, F12键在浏览器中观看网页效果 键在浏览器中观看网页效果, 保存文件 鼠标移到图像上时交换到另一张图像,如图所示。 鼠标移到图像上时交换到另一张图像,如图所示。

  • 使用【弹出信息】行为动作可以显示一个带有指定 使用【弹出信息】 信息的JavaScript警告 因为JavaScript警告只有一个 警告。 信息的JavaScript警告。因为JavaScript警告只有一个 按钮,所以使用该动作可以提供信息, 按钮,所以使用该动作可以提供信息,而不能为用 户提供选择。 弹出信息】行为的制作步骤如下: 户提供选择。【弹出信息】行为的制作步骤如下: • (1)单击文档窗口状态中的body标签,然后打开 (1)单击文档窗口状态中的 单击文档窗口状态中的body标签 标签, 行为】面板,单击【添加行为】 【行为】面板,单击【添加行为】按钮 ,在弹出的 菜单中选择【弹出信息】动作,如下图所示。 菜单中选择【弹出信息】动作,如下图所示。

  • (1)将光标移到要插入音乐文件的位置,然后到 将光标移到要插入音乐文件的位置, 插入】面板的【常用】模式上“媒体” 【插入】面板的【常用】模式上“媒体”中单击 插件外挂程序按钮。 插件外挂程序按钮。 • (2)在打开的【选择文件】对话框中选取文件。 在打开的【选择文件】对话框中选取文件。 • (3)回到Dreamweaver窗口后,光标位置会出现音 回到Dreamweaver窗口后 窗口后, 乐插件图标, 按钮, 乐插件图标,移动鼠标在属性面板单击 按钮, 如下图所示。 如下图所示。

  • 在网页中除了可插入Flas外,还可插入其它的视频 在网页中除了可插入Flas外, 动画外 ,如*.mpg、*.avi、*.mov等。 .mpg、 .avi、 .mov等 • (1)将光标移到要插入影片的位置,然后到【插入】面 将光标移到要插入影片的位置,然后到【插入】 板的【常用】模式上“媒体” 板的【常用】模式上“媒体”中单击 插件外挂程序按 如图所示。 钮,如图所示。

  • hidden参数用来设置是否隐藏播放器面板,autostart参数则 hidden参数用来设置是否隐藏播放器面板,autostart参数则 参数用来设置是否隐藏播放器面板 是设置是否自动开始播放。 是设置是否自动开始播放海德体育。

  • 在Dreamweaver中,对行为的添加和控制主要是通过 Dreamweaver中 行为】面板来实现的。 行为】面板中, 【行为】面板来实现的。在【行为】面板中,可以先指 定一个动作,然后指定触发该动作的事件, 定一个动作,然后指定触发该动作的事件,从而将行为 添加到页面中。如将鼠标指针移到对象(事件)上时, 添加到页面中。如将鼠标指针移到对象(事件)上时, 对象会发生预定义的变化(动作)。 对象会发生预定义的变化(动作)。 • 对象是产生行为的主体,很多网页元素都可以成为对象。 对象是产生行为的主体,很多网页元素都可以成为对象。 事件是触发动态效果的原因, 事件是触发动态效果的原因,一个事件总是针对页面元 素或标记而言的,例如:onMouseOver、onMouseOut和 素或标记而言的,例如:onMouseOver、onMouseOut和 onClick等 动作是指最终需要完成的动态效果, onClick等。动作是指最终需要完成的动态效果,例如交 换图像、弹出信息、拖动AP元素和显示隐藏元素等都是 换图像、弹出信息、拖动AP元素和显示隐藏元素等都是 动作,动作通常是一段JavaScript代码 代码, 动作,动作通常是一段JavaScript代码,在Dreamweaver 中使用内置的行为时, 中使用内置的行为时,系统会自动地向页面中添加 JavaScript代码 用户完全不必自己编写。 JavaScript代码,用户完全不必自己编写。将事件和动作 代码, 组合起来就构成了行为。 组合起来就构成了行为。

  • (2)出现【选择文件】对话框后,在“查找范围” 出现【选择文件】对话框后, 查找范围” 栏中选择文件所在磁盘与文件夹, 栏中选择文件所在磁盘与文件夹海德体育,接着在列表中选 择文件名, 按钮。 择文件名,然后单击 按钮。 • (3)回到Dreamweaver窗口后,光标位置会出现视 回到Dreamweaver窗口后 窗口后, 频插件图标, 属性】面板的“ 频插件图标,在【属性】面板的“宽”和“高”栏 分别输入影片的宽度和高度,如下图所示。 分别输入影片的宽度和高度,如下图所示。

  • (1)将光标移到要插入Flas文件的位置,然后到【 将光标移到要插入Flas文件的位置,然后到【 动画文件的位置 插入】面板的【常用】模式上“媒体”中单击SWF按钮 插入】面板的【常用】模式上“媒体”中单击SWF按钮 如图所示。 ,如图所示。

  • 学会在网页中插入各种媒体文件,如flash、视频、 学会在网页中插入各种媒体文件, flash、视频、 音乐等。 音乐等。 • 掌握行为面板中的交换图像、弹出信息、拖动AP元 掌握行为面板中的交换图像、弹出信息、拖动AP元 素等操作。 素等操作。 • 能够创建“都市夜景”网站相册。 能够创建“都市夜景”网站相册。

  • (4)出现“参数”窗口后,在“参数”栏输入 出现“参数”窗口后, 参数” hidden,并在“ hidden,并在“值”栏输入false,接着单击 按钮新 栏输入false, 增设置项目,然后在“参数”栏输入autostart, 增设置项目,然后在“参数”栏输入autostart,在 “值”栏输入true,最后单击 按钮(同前“参数”对 栏输入true, 按钮(同前“参数” 话框),如图所示。 ),如图所示 线)从打开的【选择文件】对话框中找到所需的文件, 从打开的【选择文件】对话框中找到所需的文件, 按钮,如图所示。 然后单击 按钮,如图所示。

  • (3)回到Dreamweaver窗口后,光标位置会出现插入的 回到Dreamweaver窗口后 窗口后, 动画文件图标。移动鼠标在【属性】 动画文件图标。移动鼠标在【属性】面板单击 按钮预览 动画,如图所示。 动画,如图所示。

  • (4)选择动画文件,然后在【属性】面板单击 选择动画文件,然后在【属性】 按 如下图所示,出现【参数】对话框后, 参数” 钮,如下图所示,出现【参数】对话框后,在“参数” 栏输入wmode,并在“ 栏输入transparent, 栏输入wmode,并在“值”栏输入transparent,然后单 按钮,可将Flash背景透明化 如图所示。 背景透明化, 击 按钮,可将Flash背景透明化,如图所示。

  • (4)保存文件,按F12键在浏览器中观看网页效果,可 (4)保存文件, F12键在浏览器中观看网页效果 键在浏览器中观看网页效果, 保存文件 看到进入网页时【弹出信息】对话框,如图所示。 看到进入网页时【弹出信息】对线 拖动AP元素 拖动AP元素

  • 【拖动AP元素】行为动作允许访问者拖动网页页面 拖动AP元素 元素】 中的AP元素 使用此行为可制作拼图游戏、 元素, 中的AP元素,使用此行为可制作拼图游戏、滑块控 件和其它可移动的页面元素。本例将介绍行为与AP 件和其它可移动的页面元素。本例将介绍行为与AP 元素结合使用的效果, Div中按住鼠标并移动时 中按住鼠标并移动时, 元素结合使用的效果,在AP Div中按住鼠标并移动时, AP元素将跟随鼠标指针移动 元素将跟随鼠标指针移动。 该AP元素将跟随鼠标指针移动。 • (1)在菜单栏中选择【插入】→【布局对象】→AP 在菜单栏中选择【插入】 布局对象】 Div命令,在网页文档中插入一个AP Div,在属性面 Div命令 在网页文档中插入一个AP Div, 命令, 板中, 都设置为0px, 板中,将“左”和“上”都设置为0px,将“宽”和 分别设置为100px、130px,如下图所示 如下图所示。 “高”分别设置为100px、130px,如下图所示海德体育。