Dreamweaver的行为体验

  Dreamweaver(以下简称DW)提供了一种称为“Behavior”(行为)的机制,帮助你构建页面中的交互行为。行为,就是在网页中进行一系列动作,通过这些动作实现用户与页面的交互。利用DW的行为,你不需要书写一行代码,就可以实现丰富的动态页面效果,达到用户与页面的交互。

  一个行为是由事件和动作组成的。事件是动作被触发的结果,而动作是用于完成特殊任务的预先编好的javaScript代码,诸如打开一个浏览器窗口,播放声音等。

  当对一个页面元素使用行为时,你可以指定动作和所触发的事件。在DW中已经提供了一些确定的动作,你可以把它们应用在页面元素中。

  一、内置的一些基本行为

  1.调用Javascript(Call JavaScript)

  这个行为允许你设置当某些事件被触发时,调用相应的JavaScript脚本,以实现相应的动作。在这个行为设置时,你可以直接输入JavaScript脚本或者函数。

  2.改变属性(Change PRoperty)

  这个行为允许你动态地改变对象属性,比如图像的大小、层的背景色等等。需要注意的是,这个行为的设置取决于浏览器的支持。

  3.检查浏览器(Check Brower)

  不同浏览器的支持能力有一定的差异,利用这个行为,我们可以检查浏览器的版本,以跳转到不同的页面。

  4.检查插件(Check Plugin)

  有时候我们制作的页面需要某些插件的支持,比如使用Flash制作的网页,所以有必要对用户浏览器的插件进行检查,看看它是否安装了指定的插件。这个行为就可以实现这一点。

  5.控制Shockwave或者Flash(Control Shockwave or Flash)

  Shockwave和Flash是目前网页制作经常插入的对象,这个行为就是用于控制这些对象的。用它可以控制动画的播放、停止、返回,还可以控制直接跳转到第几帧。

  6.移动分层(Drag Layer)

  “移动分层”行为可以实现在页面上分层的移动,甚至是分层内容的移动。

  7.跳转到URL(Go To URL)

  你可以制定当前浏览器窗口或者指定的框架窗口载入指定的页面。

  8.跳转表单(Jump Menu)

  “跳转表单”行为主要是用于编辑跳转表单。

  9.弹出信息对话框(Popup Message)

  如果你要在页面上显示一个信息对话框,或者给用户一个提示信息,就可以使用这个行为了。

  二、简单实例

  下面我们就以动态图片为例,介绍一下行为的使用。首先你要制作两张大小相同的图片1和图片2。下面是具体步骤。

  1.打开DW创建一个页面,在这个页面中插入图1。

  2.在DW编辑窗口选择好图1。

  3.在菜单“windows”中选择“Behaviors”或者是按F8来打开Behavior面板。注意,在Events For的弹出式菜单中,“3.0 and Later Browsers”应该被选择。

  4.按“+”号按钮添加一个新的行为——“Swap Image”(变换图片),这时会弹出“Swap Image”的对话框。在图片列表中,你将看见在页面中的所有图片的列表,选中你要变换的图片1,这是原始图片,当鼠标指针移到它上面时,它将会被一张高亮显示的图片2所替代。

  5.单击Browse按钮,选择好你要替换的,通过“onMouSEOver”事件,选择的图片2代替了原图片1。

  6.选择默认设置进行图片的预调用和存储。

  “Preload Images”选项表示在整个页面下载时,把进行变换的图片放进浏览器的缓存里,当浏览者第一次把鼠标指针移到Our Story图片上时,他几乎感觉不到高亮图片的出现有什么延迟。“Restore Images onMouseOut”选项表示当“onMouseOut”(鼠标移开)事件发生时,自动地将图片恢复原状。

  7.设置完成后点击“OK”按钮关闭“Swap Image“对话框,应用刚才的设置。

  这时Behavior面板包含了你刚才为图片所设置的事件和动作。“OnMouseOver”事件旁有一个“Swap Image”动作的标记,在它上面还有“onMouseOut”事件以及相应的“Swap Image Restore”的动作(该behavior是当你在Swap Image对话框中接受缺省的选项而被定义的)。

  8.关闭Behavior面板。按F12预览页面。当你把鼠标指针分别移到图片1上,你会发现已经被图片2所替代。

  以上的例子只是DW的Behavior的一个简单应用实例。用途还有很多,这里就不作一一说明了。此外,DW还允许用户使用扩展的行为,在Macromedia公司的主页可以下载

时间: 2024-10-05 07:42:40

Dreamweaver的行为体验的相关文章

Emmet for Dreamweaver 体验分享

我是一名技术不是很到位的前端,每次做项目总要写大量的HTML和CSS,耳边经常听到的是快.快点.再快点!我真想说快你妹!但是,我不得不承认的是:我只有两只手... 后来,在群里看到有人分享了一个连接大名鼎鼎的Zen Coding(Emmet的前身)觉得不错,打算研究下.后来一忙,一忙就找不到了... 转眼间,时过境迁.昨日的记忆重新浮现在眼前,瞬间感悟,这次不能再错过!于是,百而度之,获,大喜,乃此篇前因.用,大爽,乃此篇后果. 好了,言归正传.下面来分享一下我的体验: Emmet并不依赖某个特

多图真相:Adobe Dreamweaver CC 2014.1来了-体验卓越PSD提取和诸多精彩云功能!

 作为经典的web开发工具,DW此次版本更新提供了更加丰富的云功能,是网页开发者的利器! 直接发多图(来源:zoomla!逐浪CMS UED):

Dreamweaver简明手册——常用功能介绍

1.概述 Dreamweaver 是一款集网页制作和管理网站于一身的所见即所得网页编辑器,在开发前端视图页面的时候,用这个工具,能让代码更清晰化,界面更整洁,可以大大的提升Web前端开发效率.基于数通畅联的AEAI DP开发平台可以直接生成JSP前端页面,通常在AEAI DP中使用JSP编辑器编辑JSP页面,但是JSP编辑器强于在JSP页面上写JAVA代码片段,但调整页面里的表单元素以及CSS样式等不方便,因此,一般采用AEAI D跟Dreamweaver配合进行前端JSP页面扩展开发.本文对D

PHPWeb开发入门体验学习笔记

一.PHP应用程序开发须知 1.入门要点 程序员三个阶段:码农(速成技能)->工程师(长期知识)->专家(研究论文) 编程三要素:声明变量(系统.全局.字段等).数据算法(应用.比较.计算等) .控制结构(变更.判断.循环等) 类三要素:封装.继承.多态 PHPweb应用程序开发分两端:前台Html+Css+JavaScript静态页面或UI美工平面设计,后台PHP+MySQL动态网页设计或交互式数据处理 php知识要点:函数.数组.面向对象 php运行开发环境:lwamp集成运行环境Linu

用户体验至上:用线框和原型工具打造理想产品

引言:交互的概念是很难用语言描述的,怎样才能让一个抽象的想法得到充分沟通和测试呢?一个原型工具就能回答这个问题. 原型是一个想法成为App或者网页的旅途上的伴侣.一个建筑师不会从一开始就去挖地下室,他会在绘制完草图后,一步一步地设计电脑上的和真实的模型,并且反复地测试和修订.同样平面设计师也会在UI界面上一点一滴地修复和调整各种设计元素. 但是除了需要打造一个美观的UI界面之外,还应该让用户可以享受使用产品的过程,产生粘度,最起码不会产生厌烦的情绪.这就关乎到一个好的用户体验的问题.因此,为了避

嫁给程序员是一种什么体验

我曾经跟朋友开玩笑说,这个时代,有两种人的妻子应该要受人尊敬,第一种是军嫂,这是毫无争议的,第二种就是像我这样的,程序员的老婆.当然,这个玩笑半分自嘲半分真.我的本科是穿着大白褂在各种挂着植物.动物.有机化学.无机化学的门牌的实验室里度过的,在显微镜下给三段生的夹竹桃画过横切片图,在大头针和解剖剪子的辅助下找过蚯蚓的三条神经,闻过带有臭鸡蛋味的硫化氢气体-- 是的,你们都猜对了,我确实是相貌平平,不修边幅,素面朝天的理科女.见了人就开始习惯性地科普:蝴跟蝶,蜻跟蜓,其实是不一样的,还有,白菜跟萝

Dreamweaver cc 2018精简版

Adobe Dreamweaver cc 2018绿色精简版点击下载Dreamweaver cc 2018精简版打开方法 1.绿色无需安装,下载数据包后解压鼠标双击"Dreamweaver.exe"运行即可 2.第一次打开可能需要一些时间,等待程序初始化完成即可进去软件界面免费使用了 新功能 1.Dreamweaver中的HiDPI分辨率支持 (Windows)现在,Dreamweaver CC为 Windows 提供 HiDPI 显示器支持.通过引入高分辨率,在使用现代显示器时,Dr

Dreamweaver 1 网页制作

1.站点 1.1 创建站点 点击菜单栏中站点进行站点创建,输入站点名称,路径 1.2 设置图像文件夹 1.3 站点管理 站点的编辑.复制.删除 2.页面属性栏 2.1 外观 1.设置页面整体的字体.大小.颜色 2.背景颜色,背景图像,图像是否重复,怎么重复 3.页面边距 2.2 链接 1.链接的字体.大小.颜色 2.链接颜色: 链接颜色:      本身颜色 变换图像链接:鼠标经过链接时的颜色    已访问链接:  已访问之后的颜色   活动链接:     鼠标点击时的颜色 2.3标题 1.能分

Spring Boot 学习笔记1---初体验之3分钟启动你的Web应用

前言 早在去年就简单的使用了一下Spring Boot,当时就被其便捷的功能所震惊.但是那是也没有深入的研究,随着其在业界被应用的越来越广泛,因此决定好好地深入学习一下,将自己的学习心得在此记录,本文主要围绕以下几点进行说明: Spring Boot 简介 使用Spring Boot快速搭建一个Web应用如有不对的地方,请指正. 1. Spring Boot简介 Spring Boot是一个基于Spring的衍生框架,其主要的目的是帮助我们快速构建独立.生产级别的Spring的应用,其崇尚的理念