网页制作-九.行为(特效、Javascript)

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

扩展：lightbox特效
（4）给图片一个链接（5）选择图片，“拆分视图”下，对比代码的<a>有什么不同默认的链接只有一个<a href=“…”>，而lightbox是这样的 <a href="images/image-3.jpg" rel="lightbox[plants]" title="Mouseover image to move forward."> <a href="images/image-2.jpg" rel="lightbox" title="Optional caption."> 不同的效果有点不同，把rel=“…”这部分内容复制过去，title 根据需要复制
2.创建层动画
通过在不同时间改变层的位置、大小、可见性和叠放顺序来创建动画。 “窗口”－“时间轴”把时间轴面板选择出来其中B为行为通道，显示时间轴对应时间所附近的行为，使用浅蓝色方块来表示存在的行为
2.创建层动画
（1）直接创建时间轴动画时间轴只能移动层（2）删除某段动画右键点击要删除的部分，选择“移除时间轴” （3）拖动路径创建动画右键单击选定的层，选择“记录路径”；或右键点击时间轴，选择“录制层路径”
1.创建和使用AP层
（1）创建层和嵌套层 “查看”菜单－“可视化助理”－“层边框（AP元素轮廓线）” 创建层：“插入栏”－“布局”－“绘制AP DIV” 或通过“插入”菜单－“布局对象”－“AP DIV” 嵌套层：鼠标插入点放置在要创建嵌套层的层中，然后通过“插入”菜单－“布局对象”－“AP DIV”；或按住ALT键在层中直接绘制嵌套
（一）行为
1.认识行为面板 “窗口”－>“行为”把行为面板调出来 2.为对象附加行为在DW中，可以将行为附加给整个文档、链接、图像、表单元素或其他任何HTML元素，并由浏览器决定哪些元素可以接受行为，哪些元素不能接受行为。在为对象附加动作时，可以一次为每个事件关联多个动作，并按照行为面板的动作列表中的顺序执行动作。
（一）行为
注意问题：留意面板上面的“标签”的变化，特别注意文本的变化为文本附加行为：在DW中，不能为纯文本附加行为。但是可以为链接文本附加行为。因此，要给纯文本附加行为，可以先给文本添加一个空链接（＃）。
（一）行为
3.行为实例弹出提示信息打开浏览器窗口跳转菜单：前面已经讲述设置文本设置效果（增大/收缩、挤压、晃动、高亮颜色等）重点是这部分，在行为第三部分内容讲述
九.行为（特效、Javascript）
九.行为（特效）
第9章创建和使用AP元素第14章生成动态效果第16章添加Spry构件和行为效果
九.行为
网上各种纷繁多样的动态交互式网页效果非常吸引，而这些交互效果很多都需要具有Javascript知识。在 DW中，内置了强大的行为面板。使用DW行为，普通的网页设计者也可以做出复杂的动态网页。行为是指在网页中进行的一系列动作，通过这些动作，可以实现用户同网页的交互，也可以通过动作使某个任务被执行。脚本语言Javascript（JS），有些网页制作者会把 js代码写在一个文件进行调用，后缀名为“.js”
1.创建和使用AP层
（2）显示层面板（AP元素面板）选项设置：显示或隐藏：如果前面什么都没有的话，则该层的可见性继承其父层的显示属性（默认）在层名处双击可修改层名在Z列单击可修改层的层次属性值，数值大的位于上层。单击可以修改层次。也可以选定一个层，把层直接拖到想要的层次也可以。 “防止重叠” ：有嵌套层时应选定
1.创建和使用AP层
激活层：要把对象插入层中，首先要激活层。 ① 把光标移动到层内的任何地方单击。就可以在里面插入文本，图像等对象了 ② 激活层不等于选择层。
Βιβλιοθήκη Baidu
1.创建和使用层
（4）设置层属性 ① 左、上：设定层相对与页面或父层的位置（坐标） ② Z轴：设置层的层次属性值 ③ 显示：设置层的可见性，default指不指明可见性，但一般default是“继承”。
1.创建和使用AP层
（3）选择层和激活层选择层：要对层进行移动，调整大小等就要先选择层，选择层才能对层进行操作。 ①要选择层的话，可以在层面板里面选择，或点击层边框，或点击层标记等 ②选中后，可以直接移动或调整层的大小了。 ③选择多个时，shift键。 ④要对齐层，多个选定之后通过“修改”菜单－“排列顺序” －“对齐”。
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab) { this.showPanel(tab); };
其它几个Spry找到相应的事件进行修改
扩展：lightbox特效
Lightbox在下一个内容“HTML基础”讲完之后会继续讲述，提前讲下要点（1）代码开头<head></head>之间的link和script开头的几行代码复制到网页中（2）查看刚才复制的link和script中用到了什么文件，把所用到的文件夹和文件复制到站点中（3）<body onload=“initLightbox()”> 不同的效果表述有点不同
（二）AP元素
层是一种HTML内容的容器，通常由DIV及SPAN标记说明。层可定位在页面上的任意位置，并且其中可包含文本、图像、表单等所有可直接用于文档的元素。层的定位和显示跟不同浏览器有关，需精确定位。 AP是绝对定位（absolute）的div，所以容易出问题…除了简单的层动画，尽量少用AP。而是使用普通的DIV实现效果。
（一）行为
通常在DW中创建一个行为的步骤： 1）选择一个特定的元素，如文本链接或一个图片等等。行为将被附加到此特定的元素上。 2）点击行为面板上的添加按钮（＋），打开可选动作菜单列表。 3）在菜单选择“显示事件”，在里面选择希望兼容的浏览器，如可以选择IE5.0、IE5.5等。
九.行为
4）选择好“显示事件”后，在刚才的动作列表菜单中选择希望执行的动作。当选择动作后，将弹出一个参数对话框，设置好参数。（这里简单任选一动作）注意：不同版本的浏览器，支持的事件也是不同的。在刚才下拉列表的“显示事件”中选择希望兼容的浏览器，这样到时显示出来的事件也会不一样。 5）这时在行为面板中将显示添加的事件和对应的动作 6) 如果该事件不是希望的事件，可单击事件列表中的箭头，选择其它事件。
练习
14.3 时间轴动画操作一次层动画，由于层动画很少用了，练习了解下就可以了。
（三）Spry框架
Spry框架：Adobe公司出的一组Ajax（Javascript）效果框架。“DW将网上常用的一些JS效果直接集成，然后起了个名字叫Spry”。注意事项：使用Spry之后，DW会自动创建对应的2个文件。修改效果，要修改两个对应的文件： ①外观--》修改样式表文件 Spry的样式修改（对应的样式表CSS文件） ②具体效果触发--》修改JS文件动作修改（对应的JS文件）
2.创建层动画
动态HTML（DHTML）是HTML与特定脚本语言的结合，该脚本语言可以用来改变HTML元素的样式或定位属性。在DW中时间轴面板使用动态HTML来改变层及图片在一段时间内的属性，如位置、尺寸、可见性及堆栈顺序等，从而制作出动画效果。此外，可以使有时间轴加载其它操作，如执行行为。
（一）行为
行为由事件Event和动作Action两个基本元素组成。通过事件的响应进而执行对应的动作。 ① 通常，动作是一段Javascript代码，利用这些代码可以完成相应的任务。例如打开浏览器、播放声音等。 ②事件则是由浏览器所定义，它可以被附加到各种页面元素上，也可以被附加到HTML标记中，并且一个事件总是针对页面元素或标记而言的。例如onMouseOver， onMouseOut等，它们在大多数浏览器中和链接相关联，而onLoad则是和图像以及文档正文相关联的事件。
1.创建和使用层
④ 溢出：层内容超出层范围（尺寸）时的处理方法 Visible：自动增加层的尺寸 hidden：保持层尺寸不变，隐藏超出部分内容 scroll：无论是否超出范围，显示滚动条 auto：当层内容超出层范围时，自动增加滚动条，默认值。 ⑤ 剪辑：设置层的可视区域。其中的数值表示可视区域与层边界的像素值
（三）Spry框架
2.Spry选项卡式面板例子：16.2.8 3.Spry折叠式例子：16.2.9 4.Spry可折叠面板例子：16.2.10 5. spry工具提示使用CS6以上版本，CS3没有
（三）Spry框架
Spry选项卡式面板修改默认JS事件，默认是点击（onTabClick）
（三）Spry框架
（1）Spry效果：注意起作用的对象书本 P267 16.3 添加行为效果 ①增大/收缩 div… ②挤压 div、img… ③显示/渐隐 ④晃动 div、img、P… ⑤滑动 div ⑥遮帘 div
（三）Spry框架
（2）Spry控件 1.Spry菜单栏（弹出菜单、下拉菜单） DW 8行为面板有个“弹出菜单” ，CS3版本不推荐使用旧方法，推荐使用Spry菜单栏。注意：（1）Spry菜单栏是DIV+li实现，留意什么小缺点例子：16.2.7 （2）DW 8的弹出菜单兼容性较好（3）也可以直接使用Javascript代码实现例子：js实现下拉菜单