您现在的位置: IT课程网站 >> 网站设计 >> Dreamweaver设计 >> 网站设计正文
[组图]第九章 互动效果(行为应用高级篇)          【字体:
第九章 互动效果(行为应用高级篇)
作者:未知    网站设计来源:http://www.tastelife.net    点击数:    更新时间:2004-10-16

DREAMWEAVER MX 中文版教程第九章:互动效果(行为应用高级篇)

一、浮动提示:

1.首先插入一个两行三列的表格,第二行的三个单元格合并起来,边框为0,并填充文字,文字加上应该的链接,第二行的单元格插上一个图层(命名为:good),如下:

2.选取“品味人生”四个字,按Shift+F3,打开行为面板,点击行为面板上的,选取设置文本,再选设置层文本,如下图:

3.然后出现对话框如下(在新建HTML里填上需要的文字),然后按确:

4.再点击一次重复刚才的步骤,不过这次,新建HTML里不填任何文字,然后确定。行为面板变为下图:

5.把第二次加进的行为onMouseover改为onMouseout,(点onMouseover旁边的,找到onMouseout后选中它,如果找不到,选显示事件,再选其它版本浏览器,这样就有onMouseout了),如:

6.再选取网易两个字,操作和上面的步骤一样,只不过加入的文字不同。

7.再选取搜狐两个字,操件同理。

8.把网页保存下来,按F2看看你的大作吧,呵呵,也可以看看下面的例子:↓↓

品味人生 网易 搜狐
    

[提示:层是可以定义位置大小(注意属性面板)的,如果在第2步的时候,设置的不是层文本,是状态条文本,提示将出现在状态条(此做法不必插入图层)]

二、网页中做动画

1.准备一张图片:

2.了解一下Dreamweaver MX中的时间轴。

在下图的方法中你可以找到时间轴(或者按下快捷键ALT+F9):

Dreamweaver的时间轴和FLASH中的时间轴是差不多的,我们的目的是让图片按时间轴上的设定进行运动。

3.点一下对象面板上的,在网页设计区画出一个图层,在图层里插入刚准备好的图片,调整图层的大小,让其适合于图片:

4.用鼠标选中图层,并将其拖到时间轴的的第1个小格:

然后将第15那个格拉远一些,如拉到40,这样可以让动画放得慢些:

5.再次选中图层,并用鼠标再次把它拖到时间轴,如下图:

用鼠标点一下时间轴上的第55点,并把它拉到第80点:

用鼠标点一下时间轴第40那个格子,然后把目光移动属性面板,把层的左(L),加上300(即让其右移300像素);

用鼠标点一下时间轴第41那个格子,然后把目光移动属性面板,把层的左(L),加上300(即让其右移300像素):

请注意上图带有红色框处,原来为73px,加上300后变为373px。

6.插进两个按钮,第一个的标签(L)播放,第二个为停止,如下图:

选中播放这个按钮,加上播放时间轴的动作:

选中停止这个按钮,加上停止时间轴的动作:

7.把时间轴上的循环勾上:

大功告成了,按F12就可以看到你的大作了。

网站设计录入:duqikang    责任编辑:duqikang 
  • 上一篇网站设计:

  • 下一篇网站设计:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关网站设计
  • 第十一章 框架和表单使用
  • 第十章 CSS样式表的设置和应
  • 第八章 互动效果(行为应用)
  • 第七章 网页的排版(层的使用
  • 第六章 网页的排版(表格篇)
  • 第五章 文字处理与链接
  • 第四章 在网页中插入图片
  • 第三章 开始建立简单的网页
  • 点击申请点击申请点击申请点击申请
    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 |