第8章__制作网页特效

1,第8章 制作网页特效,为了丰富网页内容，使网页新颖有风格。设计师在制作网页时，通常会添加各种特殊效果。而网页中的各种效果是通过JavaScript脚本编写而成的，对于没有任何编程基础的设计师而言，则可以通过Dreamweaver中的行为命令来完成。 网页中的AP元素既可以进行网页布局，也可以与行为命令相结合制作拖动、显示或者隐藏效果的网页特效，还可以与时间轴结合制作网页中的动画。,2,本章知识要点：,创建AP元素 应用AP元素 添加行为 创建动画,3,8.1 AP元素创建与应用,在Dreamweaver中，除了表格与布局表格可以布局网页外，还可以使用AP元素来对网页进行布局。AP元素（绝对定位元素）是分配有绝对位置的HTML页面元素，可以包含文本、图像或其它任何可放置到HTML文档正文中的内容。,8.1.1 创建AP元素,AP元素的创建方法与布局表格相似，同样可以通过拖动创建，并且可以在网页中的任何位置。在AP元素中既可以插入任何网页元素，也可以创建嵌套的AP元素。,4,8.1.2 AP元素基本操作,当创建AP Div后，会有两个面板来设置该AP Div。一个是【AP元素】面板，一个是AP元素【属性】面板。前者是用来查看与调整页面中所有AP Div；后者是用来具体设置某个或者几个AP Div各个属性。 1使用【AP元素】面板 2使用AP元素【属性】面板 3AP元素与表格之间的转换,5,8.1.3 AP元素样式自定义,当创建AP元素后，该AP Div自动建立相应的CSS样式，其CSS规则名称与AP元素名称相同。,6,8.2 网页行为,行为有三个重要组成部分：对象，事件和动作。对象是产生行为的主体，许多网页元素都可以成为对象，如图片、文字、多媒体文件等；事件是触发动态效果的条件，它可以被添加到各种页面元素上，也可以被添加到HTML标签中。,7,8.2.1 行为面板,Dreamweaver提供了一个专门管理和编辑行为的工具，即【行为】面板。利用【行为】面板，可以为对象添加JavaScript行为，还可以修改以前添加过的行为参数。行为将以事件的字母顺序在面板中显示。同一事件如果引发不同的行为，这个行为将以其执行顺序在【行为】面板中显示。,8,8.2.2 编辑行为,编辑行为时，选择一个添加了行为的对象，如果要改变动作参数，可以选中该行为，然后单击右键，在弹出的菜单中，重新进行编辑。如果要修改动作的事件，可以在事件列表中，单击该事件，然后在下拉事件列表中进行选择。,9,8.3 应用各种行为,Dreamweaver预定义有20多种行为，如果在网页中适当的添加行为，可以起到动态效果并使用户与网页之间具有交互性。例如在多媒体章节中提到的插入音频的方法之一就是利用行为来完成的；还有图像章节中的鼠标经过图像的创建方法也包含行为中的事件。下面就来具体介绍几个Dreamweaver中的行为。,10,11,8.3.1 文本信息行为,在【行为】面板中，【设置文本】行为包括四种：一种是设置容器文本；一种是设置文本域文字；一种是设置框架文本；一种是设置状态栏文本。其中某些文本设置需要在一定的条件，而有些则不需要。,12,8.3.2 窗口信息行为,行为命令中包括两种窗口信息，一种是文字信息警告框，一个是能够插入网页元素的窗口。两种不同的窗口其作用也各不相同。,8.3.3 图像效果行为,在Dreamweaver的行为命令中，有些应用在图像中能够很好地表现出其效果。例如交换图像、改变属性与拖动AP元素等行为命令。,13,8.3.4 效果行为,Spry效果是视觉增强功能，可以将它们应用于使用JavaScript的HTML页面上几乎所有的元素。效果通常用于在一段时间内高亮显示信息，创建动画过渡或者以可视方式修改页面元素。可以将效果直接应用于HTML元素，而无需其它自定义标签。 Spry效果被添加在【行为】面板中，所以其应用方法与其他的行为相同。只是要向某个元素应用效果，该元素当前必须处于选定状态，或者它必须具有一个ID。在所有的Spry效果中，有些可以应用于所有的网页元素，有些则必须应用于AP元素。,14,15,8.4 时间轴动画,【时间轴】行为可以构建丰富多彩的动态网页，实现极具魅力的网页效果。时间轴用通俗的话说是一条贯穿时间的轴，用于表示网页活动时间中发生的各种状态。通过往这条时间轴上不同的时间部位放置不同的内容或者是添加相应的行为，就可让对应的时间发生对应事件，从而实现网页的动态效果。,16,8.4.1 创建时间轴,在Dreamweaver中，时间轴使用动态HTML来更改AP元素和图像在一段时间内的属性。要创建时间轴动画，首先要了解时间轴面板。执行【窗口】|【时间轴】命令（快捷键Alt+F9），打开【时间轴】面板。,8.4.2 修改时间轴,创建时间轴动画后，还可以在【时间轴】面板中重新设置参数，比如添加和删除帧、更改动画开始时间、改变动画移动路径等。 1延长动画时间 2改变到达关键帧的速度 3改变动画开始时间 4改变动画路径 5其他属性,17,8.5 课堂练习：多方面产品展示,在产品展示网页中，针对一个产品而展开的多方面图片展示，最常用的是在另外一个网页中展示。而Dreamweaver中的行为命令，其中的一个子命令则可以当鼠标指向某个图片时，临时展示其他图片，当鼠标移开后恢复原来的图片，而不用另外新建网页，那就是交换图像命令。,18,8.6 课堂练习：产品详细介绍,为了网页版面的美观，要想展示更多的产品，就无法在同一页面显示相关产品的信息。如果使用行为中的打开浏览器窗口功能，可以在不影响产品展示页面的同时，打开简化窗口浏