Dreamweaver 4 简明教程(八、为网页增添互动效果2)

dreamweaver|教程|网页

八、为网页增添互动效果

  制作更复杂的互动效果

  在Dreamweaver中,更复杂的效果是通过一个叫Behaviors的功能实现的,Behaviors的从字面上理解是“行为”,我们又称为事件的响应。通过网页元素的变化,如鼠标的移动、点击等“事件” (Events),触发弹出窗口,关闭页面等“响应”(Actions),就是一个事件的响应。而值得高兴的是,“行为”的制作过程几乎是傻瓜式的。

  按Shift+F3,打开行为面板,如下图:

  在网页加入行为,需要以下三个步骤:

  1、选取产生行为的元素,例如图片、带链接的文字、层等。如果需要在页面一载入就开始出现效果,可以选择状态栏上的标签
  2、按 按钮选择一种响应(不同的元素,对应的响应也有所不同),并在随后的对话框中设置此响应的属性;以下是可以供选择的响应说明:

  Call JavaScript:呼叫一段JavaScript;

  Change Property:改变Html标签的CSS样式;

  Check Browser:根据不同的浏览器,进入不同的页面;

  Check Plugin:检查浏览器是否装有必要的插件;

  Control Shockwave or Flash:控制Shockwave或Flash动画的播放;

  Drag Layer:使浏览者可拖动层中的元素;

  Go To URL:链接到指定的网址;

  Jump Menu、Jump Menu Go:跳页式的菜单及Go按钮;

  Open Browser Window:打开新浏览窗口;

  Play Sound:播放声音;

  Popup Message:弹出警告窗口;

  Preload Images:提前读入图片;

  Set Nav Bar Image:设定导航栏的图片;

  Set Text:在特定的地方显示文字;

  Show Hide Layer:显示或隐藏层;

  Swap Image、Swap Image Restore:变换图片和恢复原来的图片;

  Timeline:控制时间线的播放;

  Validate Form:验证表单的正确性;

  Get More Behaviors:下载更多的行为事件。

  3、 选择事件(Events),决定在什么情况下触发响应。常见的的事件有:

  onMouseOver:鼠标移到目标上;

  onMouseUp:按下鼠标再放开左键时;

  onMouseOut:鼠标移开时;

  onMouseDown:按下鼠标时(不需要放开左键);

  onClink:点击时;

  onDblClick:双击时;

  onLoad:载入网页时;

  onUnload:离开页面时;

  onResize:当浏览者改变浏览窗口的大小时;

  onScroll:当浏览者拖动滚动条的时。

时间: 2024-08-01 14:04:51

Dreamweaver 4 简明教程(八、为网页增添互动效果2)的相关文章

Dreamweaver 4 简明教程(八、为网页增添互动效果3)

dreamweaver|教程|网页 八.为网页增添互动效果 举例:如何打开一个没有工具栏的浏览窗口 在文字或图片的链接中,只要把Target设为"_blank"就可是使链接到的网页在一个新窗口中打开.但你是不是见过看到有的网页,开启的新窗口是不含工具栏,状态栏,网址栏的?这样的窗口是怎么做的呢? 先将光标选定在一个链接上(可以是图片链接,也可以是文字链接),按行为面板上的 按钮,选择:Open Browser Window,如下图: 接着看到如下对话框: 举例:如何打开一个没有工具栏的

Dreamweaver 4 简明教程(八、为网页增添互动效果)

dreamweaver|教程|网页 八.为网页增添互动效果 制作简单的互动效果 在网页上经常看到这样的效果,当鼠标移到一张图片上的时候,原来的图片就切换为另一张图片,鼠标移开后,又恢复原来的模样,是怎么做的呢?在开篇的时候,提到Dreamweaver比Frontpage优胜的其中一个地方是Dreamweaver能做出能具互动性的网页.现在,我们就利用Dreamweaver制作这个最简单的互动效果--变换图片. 准备两张大小相同的图片,一张是鼠标还没有移上的状态,另一张是鼠标移上去后的图片,例如以

Dreamweaver 4 简明教程(七、网页的排版4)

dreamweaver|教程|网页 七.网页的排版 新增的排版功能 前面之所以以将图层与表格互换的功能一笔带过,是因为在DW4,推出了一个新的Layout排版功能,能够更加直接方便地对页面布局进行编排.在对象面板的最下方有四个按钮: 标准视图(Standard View):默认状态下的视图: 排版视图(Layout View):转入排版视图,就是这次要介绍的功能: 按下 按钮后,上面的Layout的两个按钮就可以使用了: 表格排版(LayOut Table):象画图一样在页面里面排版表格: 单元

Dreamweaver 4 简明教程(七、网页的排版2)

dreamweaver|教程|网页 七.网页的排版 表格的使用之二 根据上面对表格和单元格的参数,我们可以做出以下的表格: 以上是一个3×2的表格,表格宽度为350个像素,每个单元格的宽度为33%,即占表格的三分之一,其中单元格1和单元格4 已经合并:单元格边距.单元格间距.表格线宽度都为10:表格的底色为灰色,单元格5的边框颜色为红色,单元格6的底色为绿色: 在上面的例子,我们将表格线宽度设置为0,在编辑状态下,看到的表格是: 宽度为0的边框线,在编辑状态下会以虚线表示,而实际的浏览效果为:

Dreamweaver 4 简明教程(七、网页的排版)

dreamweaver|教程|网页 七.网页的排版 表格的使用 表格是网页的一个非常重要元素,因为HTML本身并没有提供更多的排版手段,我们往往就要借助表格实现网页的精细排版.可以说表格的是网页制作中最为重要的一个技巧,表格运用得好坏,直接反映了了网页设计师的水平. 点击对象面板的 ,看到如下的对话框: ① Rows:表格的行数:Columns:表格的列数: ② Width:表格的宽度,单位可以是Pixels(像数)或Percent(百分比).按像素定义的表格大小是固定的,而按百分比定义的表格,

Dreamweaver 4 简明教程(七、网页的排版3)

dreamweaver|教程|网页 层的使用 如果你觉得用表格对页面元素进行定位太难掌握,不妨尝试利用层(Layer)这个好东西.点击属性面板的 按钮,光标会成为一个十字,在编辑窗口上拖动,就可以创建出一个层,我们可以在层上输入绝大部分的网页元素,例如图片.文字等.层的好处是可以放置在页面的任何位置,如下图: 选择一个层后,对应的属性面板如下: ① Layer ID:层的名称,用于识别不同的层: ② L,T:层的位置,L是距离页面左边界的距离,T是距离页面上边界的距离: W,H:层的宽和高: ③

教程/dreamweaver/入门 Dreamweaver 4 简明教程15(互动效果)

dreamweaver|教程 制作更复杂的互动效果 在Dreamweaver中,更复杂的效果是通过一个叫Behaviors的功能实现的,Behaviors的从字面上理解是"行为",我们又称为事件的响应.通过网页元素的变化,如鼠标的移动.点击等"事件" (Events),触发弹出窗口,关闭页面等"响应"(Actions),就是一个事件的响应.而值得高兴的是,"行为"的制作过程几乎是傻瓜式的. 按Shift+F3,打开行为面板,如

教程/dreamweaver/入门 Dreamweaver 4 简明教程14(互动效果)

dreamweaver|教程 制作简单的互动效果 在网页上经常看到这样的效果,当鼠标移到一张图片上的时候,原来的图片就切换为另一张图片,鼠标移开后,又恢复原来的模样,是怎么做的呢?在开篇的时候,提到Dreamweaver比Frontpage优胜的其中一个地方是Dreamweaver能做出能具互动性的网页.现在,我们就利用Dreamweaver制作这个最简单的互动效果--变换图片. 准备两张大小相同的图片,一张是鼠标还没有移上的状态,另一张是鼠标移上去后的图片,例如以下两图,左图是一个凸起的按钮,

教程/dreamweaver/入门 Dreamweaver 4 简明教程10(网页的排版)

dreamweaver|教程|网页 表格的使用 表格是网页的一个非常重要元素,因为HTML本身并没有提供更多的排版手段,我们往往就要借助表格实现网页的精细排版.可以说表格的是网页制作中最为重要的一个技巧,表格运用得好坏,直接反映了了网页设计师的水平. 点击对象面板的  ,看到如下的对话框: ① Rows:表格的行数:Columns:表格的列数: ② Width:表格的宽度,单位可以是Pixels(像数)或Percent(百分比).按像素定义的表格大小是固定的,而按百分比定义的表格,会按照浏览器的