第七讲 用行为丰富网页效果.

Slides:



Advertisements
Similar presentations
2014 年 10 月. 学生入学考试 15 位编号 号工号 ****** 北科 MBA 网址: 如: 初试密码为身份证 后六位,登录成功 后可进行修改。
Advertisements

广州市小学信息技术教学同步资源 第一册 第二章 第六节 《 Window窗口》 广州市荔湾区西华路小学 董绮珊.
第六 章数据库访问页 6.1 数据访问页视图 6.2 创建数据访问页 6.3 编辑数据访问页 6.4 查看数据访问页 退出.
中国农业银行客户端签约及入金流程
活力校園 5C 顏慧玲.
插入超链接 高邮市第一实验小学 范太国 任务一:设置文本超链接 任务一:设置文字超链接 步骤:1、选定文字并右击,在快捷菜单 中选择“超链接”命令。 2、在弹出的对话框中选择左侧“链接到:”中的“本文档中的位置(A)”项,在“请选择文档中的位置(C):”中选择需要链接的幻灯片,单击“确定”按钮。
案例2 胸卡的制作. 案例2 胸卡的制作 知识要点: 学习重点及制作思路 学习目的: 邀请函的制作步骤: 1.掌握邮件合并功能 2.掌握比较并合并文档方法 3.掌握页面插入背景图 4.熟练使用文本框 知识要点: 1.邮件合并功能 2.文档中插入域内容 3.文本框的使用 技能要点: 1.域、文档部件操作.
《网页设计与制作》 教学课件 主讲人:湖南铁道职业技术学院 陈承欢
Dreamweaver的工作界面.
在PHP和MYSQL中实现完美的中文显示
网页制作 第五讲 Dreamweaver基础.
第15章 行为 Dreamweaver CS4提供了丰富的行为,这些行为的使 用可以为网页对象添加一些动态效果和简单的交互功 能,使那些不熟悉JavaScript语言的网页设计师也可 以方便的设计出通过编写JavaScript语言才能实现的 功能。本章将首先介绍一些基本概念,以及“行为” 面板的基本操作;接着结合实例具体讲解常用的.
第16章 行為指令的應用 16-1 認識行為面板 16-2 常用的行為指令.
第7章 层与行为.
第11章 行 为.
第八章 菜单设计 §8.1 Visual FoxPro 系统菜单 §8.2 为自己的程序添加菜单 §8.3 创建快捷菜单.
计算机网络与网页制作 Chapter 18:用行为增加页面的互动
大学计算机基础 典型案例之一 构建FPT服务器.
第五讲 四则运算计算器(一) 精品教程《C#程序设计与应用(第2版)清华大学出版社 谭恒松 主编
Hub Web System 主要功能: 1.查询库存(Query Current Storage) 2.创建PL(Create PL) 3.查询、打印PL单(Query & Print PL) 4.查询允交量、在途量 5.修改用户的基本信息(Update Password) 6.查询GR(Query.
如何下载英飞凌单片机相关资料? 中英文用户手册、数据手册、应用笔记等.
网页设计与制作 网页基本标签(三) 北京农业职业学院刘丽霞.
Windows 7 的系统设置.
POWERPOINT TEMPLATE HI.
PRESENTED BY OfficePLUS
现代教育技术部 张建威
点击此处添加标题 TEXT TEXT TEXT TEXT TEXT
新PQDT论文全文库提交平台.
黑板手绘粉笔风格PPT模板【赠多款纹理+教程】
Web安全基础教程
产品推广 PRODUCT PROMOTION PRESENTED BY OfficePLUS.
直接扫描保存成TIF格式, 其他图片格式用Windows XP自带的 Windows图片与传真查看器打开
PRESENTED BY OfficePLUS
线 性 代 数 厦门大学线性代数教学组 2019年4月24日6时8分 / 45.
第1章 c++概述 1.1 C++语言的简史及特点 1.2 简单的C++程序 1.3 C++语言的基本组成
PRESENTED BY OfficePLUS
姚金宇 MIT SCHEME 使用说明 姚金宇
Logo语言. Logo语言 视图窗口 小海龟 ?: 提示符 l: 光标 命令窗口.
工业机器人知识要点解析 (ABB机器人) 主讲人:王老师
POWERPOINT TEMPLATE PRESENTED BY OfficePLUS.
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
项目二:HTML语言基础.
3Glasses SDK for Unreal Engine Plugin
成绩是怎么算出来的? 16级第一学期半期考试成绩 班级 姓名 语文 数学 英语 政治 历史 地理 物理 化学 生物 总分 1 张三1 115
1 月 日 一 二 三 四 五 六 元旦 11/20 11/21 11/22 11/23 11/ /25 11/26 11/27 11/28 11/29 11/30 12/ /2.
iSIGHT 基本培训 使用 Excel的栅栏问题
PPT中视频的播放控制 苏州电教馆在线课程培训教程:PPT2003教程   制作:赵立锋 更多教程请见:
第六章 素材的加工与处理 第13讲 用GoldWave进行音频的截取、合并、淡入淡出操作
LOGIX500软件入门 西安华光信息技术有限公司 2008年7月11日.
Visual Basic程序设计 第13章 访问数据库
VRP教程 2011.
Delphi 7.0开发示例.
SCI收录号查询方法介绍 上海大学情报研究所
熟悉PowerDesiner12操作环境 菜单栏 标题栏 工具栏 导航栏 工作区 浮动工具条 导航选项卡 控制信息栏 状态栏.
Python 环境搭建 基于Anaconda和VSCode.
工业机器人知识要点解析 (ABB机器人) 主讲人:王老师
点击此处添加标题 ADD YOUR TEXT ADD YOUR TEXT ADD YOUR TEXT ADD YOUR TEXT
如何处理WORD中的图片.
武汉纺织大学传媒学院 cm.wtu.edu.cn
翻转学习 穿越雾霾 ——小锐作业介绍.
单击此处添加您的标题 单击此处添加副标题或简单介绍.
YOUR SUBTITLE GOES HERE
Flash动作.
创建、启动和关闭Activity 本讲大纲: 1、创建Activity 2、配置Activity 3、启动和关闭Activity
HALLOWEEN 管理资源吧.
使用Fragment 本讲大纲: 1、创建Fragment 2、在Activity中添加Fragment
LOGO HERE 单击此处添加 您的标题标题标题 PRESENTED BY JANE DOE
培训课件 AB 变频器的接线、操作及参数的备份 设备动力科.
多个Activity的使用 本讲大纲: 1、使用Bundle在Activity之间交换数据 2、调用另一个Activity并返回结果
04 03 add your text. add your text. add your text. add your text add your text. add your text. add your text. add your text. add your text add your text.
Presentation transcript:

第七讲 用行为丰富网页效果

本章重点介绍了Dreamweaver自带的20种“行为”的定义和基本功能。通过本章的学习,应该掌握以下内容: ■ 行为的意义以及【行为】面板的使用方法 ■ 根据具体的行为设置相对应的事件 ■ 对所使用的事件进行修改

行为可以说是Dreamweaver 中最有特色的功能,它可以让你不用书写一行JavaScript代码即可实现多种动态网页效果。行为的关键在于Dreamweaver 中提供了很多动作,其实就是标准的JavaScript程序,每个动作可以完成特定的任务。这样,如果你所需要的功能在这些动作中,那么就不要自己编写JavaScript程序了。

弹出消息框 如果希望别人进入网站首页的时候可以看见一个弹出的消息框来显示一些内容,则可以通过下述方法实现。   第一步 在Dreamweaver MX 2004主窗口中新建一个页面,接着运行“Windows→Behaviors”命令激活行为面板。

第二步 在行为面板中点击“+”按钮,并且从弹出菜单中选取“Popup Message”命令,这时可以看见如图所示的窗口,在其中可以输入诸如“欢迎光临中国电脑教育报网站!”之类的提示信息。

第三步 添加好提示文字之后,控制面板中就多出一个名为“Popup Message”的行为,此时还要点击左部的下拉菜单,并且从中选择“onLoad”一项,这样当别人进入页面之后就会自动执行设置的行为,自然也就能够看见弹出的消息框了。   提示:从下拉菜单中还可以选择“onKeyDown”、“onMouseDown”之类的行为,使得按下键盘或者点击鼠标之后出现消息框。

链接解释文字 在浏览一些网页的时候,将鼠标放在图像或者链接上会有解释文字出现,实现这种效果可以通过下述步骤实现。   第一步 先在Dreamweaver MX 2004的编辑窗口中插入一幅图像,单击这幅图像之后在属性面板的链接输入框内填写“#”号让它链接本页。

第二步 通过“Insert→Layer Objects→Layer”命令在图像旁边添加一个层,并且输入需要显示的话。选择这个层之后,在属性面板中将“Vis”属性设置为“hiddend”来隐藏该层(如图2)。

第三步 选择图像之后,通过“Windows→Behaviors”命令激活行为面板,单击“+”按钮并选择“Show-Hide Layers”一项。在弹出的窗口中选取需要显示的层,接着点击下部的“Show”按钮,这样确认之后就可以在行为面板中多出了一个名为onMouseOver的事件。此时点击“+”按钮并击选择“OnMouseOver”一项,这样当鼠标放在图像上就可以显示该层,也就是可以出现浮动的文字解释了。

第四步 接着参照第三步为刚才的层添加“Hide”事件,并且将行为设置为“OnMouseOut”,这样鼠标拿开时就可以隐藏该层了。 完成上述操作之后,按下“F12”按钮即可打开IE浏览器进行预览,当鼠标移动到这个图片上的时候会出现预先设置好的提示字样,而鼠标移开图片时字样自动隐藏。

自动调整窗口大小 有些网页在改变窗口大小的时候也会随之调整网页页面大小,因此窗口过大就不会有空白处,窗口过小边缘就不会跑出移动条,对于这种自动调整页面大小的功能,在Dreamweaver MX 2004中可以参照下述步骤来很容易的实现。   第一步 新建一个页面,然后通过“Insert→Table”命令插入一个一行三列的表格,此时可以先不管它的宽度,而是通过下述设置让它自动伸展适合浏览器窗口。

第二步 这时可以看见每个单元格下部都标明了宽度且有一个小三角形(如下图)。在这个表格中,可以设定哪部分是需要固定的,不过只能让一列自动伸展,比如此处我们设定最后一列随着窗口大小的变化自动伸展。

第三步 选中最后一列,运行“View→Table Mode→Layout Mode”命令,并且在弹出的菜单中选择“Make Column Autostrach”一项。

第四步 接着将出现对话框,并且会提示为了能够使行伸展,Dreamweaver需要放置一些间隔图片在其它列中,在此选择“Create a spacer image file”一项,这样图片在浏览器窗口不会显示出来,而是起着固定表格的作用。

第五步 确认之后返回原先的编辑窗口,可以看见最后一列已经自动伸展填充了整个浏览器窗口,而另外两列则保持着固定的宽度。  小提示:设定自动伸展的列可以在列上端看见一个波浪线。

完成上述操作之后,在IE浏览器中预览页面效果的时候,如果改变窗口的大小,则最后一列的宽度也会随之变化,而前两列的宽度维持不变,这样就可以实现自动调整窗口大小了。   上文介绍的仅仅是Dreamweaver MX 2004中行为功能的一些方法,灵活地把行为和图层结合运用还可以实现诸如动态图片、可拖拽的图层等等功能,让你的主页看起来更加丰富多彩!

触发行为的事件(Events) Onchange:当网页上某元素的内容发生改变时产生该事件。 Onclick:单击网页上的某元素时产生该事件。 Ondblclick:双击网页上的某元素时产生该事件。 Onkeydown:按下任意键时产生该事件。 Onload:网页或图像调入完成后产生该事件。 Onmousedown:在网页的某元素上按下鼠标时产生该事件。 Onmousemove:在网页的某元素上移动鼠标时产生该事件。 Onmouseout:在网页的某元素移出鼠标时产生该事件。 Onmouseover:鼠标移入网页的某元素时产生该事件。 Onsubmit:提交表单时产生该事件。 Onunload:从当前网页退出时产生该事件。

Dreamweaver自带的行为动作 时间轴 交换图像/恢复交换图像 播放声音 注意:两个图像的大小要一致,否则,将为了适应原图像的尺寸,在显示时会被拉伸或压缩。 播放声音

打开浏览器窗口 调用 JavaScript 弹出消息 在新的浏览器窗口中打开指定的网页 执行用户自定义的Javascript脚本。 网页中用到的音频文件主要有: Mp3格式:提供高质量的数字音频,保持较高的压缩率,主要提供较长的音频文件。 ra/ram格式:是一种流音频格式,主要用于提供网络实时广播。 Midi格式:由重新创作音乐演奏的指令组成,文件较小,常用于提供背景音乐。 wav格式:即波形音频文件,由Microsoft和IBM联合开发,在windows系统中经常被用到。 注意:播放背景音乐也要首先进行下载,因此,切记音频文件容量不要太大,否则很可能整个网页都浏览完了,声音却还没有下载完。在背景音乐格式方面,mid格式是最好的选择。 弹出消息 基于用户在网页上的活动显示指定的信息 打开浏览器窗口 在新的浏览器窗口中打开指定的网页 调用 JavaScript 执行用户自定义的Javascript脚本。 Javascript是一种脚本语言,它可以直接加入HTML文档中,与混合在一起由浏览器直接解释执行。 改变属性

控制 Shockwave or Flash Go to URL 跳转菜单 /跳转菜单开始 Set Nav Bar Image 控制Shockwave或Flash媒体,如播放、停止播放 Go to URL 在指定的窗口中打开指定的网页 跳转菜单 /跳转菜单开始 编辑和控制跳转菜单 当用户选择了跳转菜单中的某项后,浏览器却不打开相应的网页,“跳转菜单开始”可以强制打开相应的网页。 Set Nav Bar Image 将图像转换为导航图标 Set Text Of layer/text field/status bar Show-Hide Layers 显示/隐藏层 推动层 拖动层 最好将此行为附加到<body>元素上,且事件设为“onload”

Preload Images Get More Behaviors 预调入图像,以减少图像显示时的延迟。 获得更多的行为 Download—extension 将行为文件复制到configuration\Behaviors\Actions 重新启动DW

课堂练习 完成例6.1

相关网站 建站资源网:http://www.jzzy.com/ 织梦乱弹:http://www.bihu.net 网酷中国:ttp://www.chinawebcool.com/