Adobe Dreamweaver 设计川 三制作 钱海军讲师
Adobe Dreamweaver 钱海军 讲师 设计 制作
制作动态效果页面 ·使用层和表格的配合进行排版 ·利用层溢出属性排版 ·使用时间轴制作动画 ·使用各种行为制作页面中的动态效果 ·制作显示隐藏层得特效 ·制作显示层文本特效 ·制作拖动层特效 ·制作控制时间轴动画的特效 ZhuHai Radio And Television University
ZhuHai Radio And Television University 制作动态效果页面 • 使用层和表格的配合进行排版 • 利用层溢出属性排版 • 使用时间轴制作动画 • 使用各种行为制作页面中的动态效果 • 制作显示隐藏层得特效 • 制作显示层文本特效 • 制作拖动层特效 • 制作控制时间轴动画的特效
使用层排版 层是CSS中的定位技术，在Dreamweaver8中可将其进行可视化操作。文本、图像、表格 等元素只能固定其位置，不能互相叠加在一起，使用层功能，可以将其放置在网页文档内任何 位置，还可以按顺序排放网页文档中的其他构成元素。层体现了网页技术从二维空间向三维空 间的一种延伸。 1.利用层与表格的配合进行排版 2.利用层溢出属性排版 ZhuHai Radio And Television University
ZhuHai Radio And Television University 一、使用层排版 层是CSS中的定位技术，在Dreamweaver8中可将其进行可视化操作。文本、图像、表格 等元素只能固定其位置，不能互相叠加在一起，使用层功能，可以将其放置在网页文档内任何 位置，还可以按顺序排放网页文档中的其他构成元素。层体现了网页技术从二维空间向三维空 间的一种延伸。 1. 利用层与表格的配合进行排版 2. 利用层溢出属性排版
1.1利用层与表格的配合进行排版 层与表格都是页面对象的定位技术，有时候可以相互取代，但并不相同。由于层是后 来定义的HTML元素，并且标准不一，导致了早期版本的浏览器不支持，在这种情况下， 就需要利用表格定位元素。利用层的易操作性先将各个对象进行定位，然后将层转化为表 格，从而实现在低版本浏览器正常浏览页面。 1.选择“窗口”→“层”，打开“层”面板，然后勾选“层”面板上的“防止重叠”选项 消除绘制层的叠加和嵌套。 2.单击“插入”快捷工具栏中的“布局”对象组，单击左侧第三个“绘制层”按钮，在网 页编辑窗口中左侧的位置，拖动光标即可绘制出一个层。 3.选中层后，将鼠标放到层得边缘处，鼠标会变成手柄即可拖动做变层的大小。 4.在层中插入图片。 5.再次选择“插入”快捷工具栏中的“布局”对象组，单击左侧第三个“绘制层”按钮， 在网页编辑窗口中右侧的位置，拖动光标再绘制一个层并插入另一幅图片。 6:使用层排版结束后，选择“修改”→“转换”→“层到表格”。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.1 利用层与表格的配合进行排版 层与表格都是页面对象的定位技术，有时候可以相互取代，但并不相同。由于层是后 来定义的HTML元素，并且标准不一，导致了早期版本的浏览器不支持，在这种情况下， 就需要利用表格定位元素。利用层的易操作性先将各个对象进行定位，然后将层转化为表 格，从而实现在低版本浏览器正常浏览页面。 1. 选择“窗口”→“层”，打开“层”面板，然后勾选“层”面板上的“防止重叠”选项 消除绘制层的叠加和嵌套。 2. 单击“插入”快捷工具栏中的“布局”对象组，单击左侧第三个“绘制层”按钮，在网 页编辑窗口中左侧的位置，拖动光标即可绘制出一个层。 3. 选中层后，将鼠标放到层得边缘处，鼠标会变成手柄即可拖动改变层的大小。 4. 在层中插入图片。 5. 再次选择“插入”快捷工具栏中的“布局”对象组，单击左侧第三个“绘制层”按钮， 在网页编辑窗口中右侧的位置，拖动光标再绘制一个层并插入另一幅图片。 6. 使用层排版结束后，选择“修改” →“转换” →“层到表格
7.选择“布局表格”中的“最精确”，会严格按照层得排版生成表格，但表格结构会很复杂。选 择“最小”可以设定删除宽度小于一定像素的单元格，在“像素宽度”中添加像素值。这里选择 “最精确”。选中“使用透明GF”,在表格中插入透明图像起到支撑作用。选中“置于页面中央 “让表格在页面居中。 8.将层转换为表格之后，如果希望调整层在页面中的位置，可以将表格选中，然后选择”“修改 一“转换”→“表格到层”。在打开的对话框中设定转换过程中要显示的辅助定位工具，单击” 确定“按钮后，表格就被转换回了层。 Convert Layers to Table Table ayout: OK Cancel ☑Use transparent GIFs Center on page Layout toos:☑Prevent layer overap网 p□ Convert Tables to Layers X Layout toos:Prevent layer overlaps OK ☑Show layers panel Cancel 同Show grid ☑Snap togrid Help ZhuHai Radio And Tele vision University
ZhuHai Radio And Television University 7. 选择“布局表格”中的“最精确”，会严格按照层得排版生成表格，但表格结构会很复杂。选 择“最小”可以设定删除宽度小于一定像素的单元格，在“像素宽度”中添加像素值。这里选择 “最精确”。选中“使用透明GIF”,在表格中插入透明图像起到支撑作用。选中“置于页面中央 “让表格在页面居中。 8. 将层转换为表格之后，如果希望调整层在页面中的位置，可以将表格选中，然后选择”“修改 →“转换”→ “表格到层” 。在打开的对话框中设定转换过程中要显示的辅助定位工具，单击” 确定“按钮后，表格就被转换回了层
1.2利用层溢出属性排版 层的溢出属性控制当层得内容超过层得指定大小时如何在浏览器中显示层。层溢出使 用“自动”时，可以实现内嵌滚动条的排版效果。 1.打开网页文件，选择“插入”快捷工具栏中的“布局”对象组，单击左侧第三个“绘制 层”按钮，在网页编辑窗口中右侧中间的位置，拖动光标绘制出个层 2:在层的属性面板中，设置层得位置和大小。然后将“溢出”设置为"auto“。”auto使浏 览器仅在需要时（即当层的内容超过其边界时）才显示出层得滚动条。”vsbe"指示在层 中显示额外的内容；实际上，该层会通过延伸来容纳额外的内容。hidden”指定不在浏览 器显示额外的内容。”sco'指定浏览器应在层上添加滚动条，而不管是否需要滚动条 Layer ID L 213px W 425px Z-Index 1 Bg image Class None Layer1 I 60px H 181px vis default Ba color B■ ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.2 利用层溢出属性排版 层的溢出属性控制当层得内容超过层得指定大小时如何在浏览器中显示层。层溢出使 用“自动”时，可以实现内嵌滚动条的排版效果。 1. 打开网页文件，选择“插入”快捷工具栏中的“布局”对象组，单击左侧第三个“绘制 层”按钮，在网页编辑窗口中右侧中间的位置，拖动光标绘制出一个层。 2. 在层的属性面板中，设置层得位置和大小。然后将“溢出”设置为”auto“。”auto“使浏 览器仅在需要时（即当层的内容超过其边界时）才显示出层得滚动条。”visible“指示在层 中显示额外的内容；实际上，该层会通过延伸来容纳额外的内容。”hidden”指定不在浏览 器显示额外的内容。”scroll“指定浏览器应在层上添加滚动条，而不管是否需要滚动条
二、使用时间轴制作动画 制作作画需要将层和”时间轴”面板配合起来。利用时间轴，可以更改层得位置、大小、可 见性和层叠顺序。这里我们利用“时间轴”面板制作页面中常见的漂浮图片特效。 1.直接漂浮动画 2.曲线漂浮动画 ZhuHai Radio And Television University
ZhuHai Radio And Television University 二、使用时间轴制作动画 制作作画需要将层和”时间轴”面板配合起来。利用时间轴，可以更改层得位置、大小、可 见性和层叠顺序。这里我们利用“时间轴”面板制作页面中常见的漂浮图片特效。 1. 直接漂浮动画 2. 曲线漂浮动画
2.1直接漂浮动画 1.打开网页文件，然后从“窗口”菜单中打开“时间轴”面板。 2.单击“插入”快捷工具栏“布局”中的“层”按钮，然后再文档窗石中绘制一个层，并插入 图片。 3.使用鼠标将选定层拖至“时间轴”面板中，一个条将出现在时间轴的第一个通道中。层的名 称将在该条中出现。 4.单击位于条末端的关键帧标记。在页面上将层移至它在动画结束时应处于的位置。这时将出 现一条线，它显示文档窗口中动画的轨迹。 5.勾选“时间轴”面板中的“自动播放”和“循环播放”。可以设置使时间轴连续播放和使时 间轴于页面浏览器中打开时自动播放。 6.若要使动画的播放时间更长，请将结束帧标记向右拖动即可。但是请不要忘记，将行为通道 Timelines EE46DFs15□Autoplay口Loop 0502535 70 1001051015120125130135140145 Radio And Television University
ZhuHai Radio And Television University 2.1 直接漂浮动画 1. 打开网页文件，然后从“窗口”菜单中打开“时间轴”面板。 2. 单击“插入”快捷工具栏“布局”中的“层”按钮，然后再文档窗口中绘制一个层，并插入 图片。 3. 使用鼠标将选定层拖至“时间轴”面板中，一个条将出现在时间轴的第一个通道中。层的名 称将在该条中出现。 4. 单击位于条末端的关键帧标记。在页面上将层移至它在动画结束时应处于的位置。这时将出 现一条线，它显示文档窗口中动画的轨迹。 5. 勾选“时间轴”面板中的“自动播放”和“循环播放”。可以设置使时间轴连续播放和使时 间轴于页面浏览器中打开时自动播放。 6. 若要使动画的播放时间更长，请将结束帧标记向右拖动即可。但是请不要忘记，将行为通道 中的循环也向后拖动到动画最后一帧的后面
2.2曲线漂浮动画 两点确定一条直线，三点确定一个平面，如果为动画增添一个新的关键帧，就可以使之沿 曲线运动感。 1.请选择动画条，然后按住CTRL键并单击动画条中部的一个帧，从而在单击的帧处添加一个 关键帧。 2.然后选中此关键帧，拖动层在页面中的位置。 3.重复此过程，在时间轴上添加更多的关键帧而创建处更为复杂的动画。 4.通过上面的方法，可以创建出曲线动画，但是创建过程太复杂，下面用一种简便的方法制作： 选中打开的网页文件中插入好图像的层，单击鼠标右键，从其快捷菜单中选择“记录路径”。 5.然后直接使用鼠标在页面上拖动层以创建轨迹，当到达动画应停止的点时释放该层。然后， 在DW8就会在时间轴上添加一个动画条，其中包含适当数量的关键帧。 6.勾选“时间轴”面板上的“自动播放”和“循环”。 Tmelne123中Frs15☐Autopay☐Loop 51015202530354045505560657D7580859095100105110115120125130135140145 ZhuHai Radio And Television University
ZhuHai Radio And Television University 两点确定一条直线，三点确定一个平面，如果为动画增添一个新的关键帧，就可以使之沿 曲线运动感。 1. 请选择动画条，然后按住CTRL键并单击动画条中部的一个帧，从而在单击的帧处添加一个 关键帧。 2. 然后选中此关键帧，拖动层在页面中的位置。 3. 重复此过程，在时间轴上添加更多的关键帧而创建处更为复杂的动画。 4. 通过上面的方法，可以创建出曲线动画，但是创建过程太复杂，下面用一种简便的方法制作： 选中打开的网页文件中插入好图像的层，单击鼠标右键，从其快捷菜单中选择“记录路径”。 5. 然后直接使用鼠标在页面上拖动层以创建轨迹，当到达动画应停止的点时释放该层。然后， 在DW8就会在时间轴上添加一个动画条，其中包含适当数量的关键帧。 6. 勾选“时间轴”面板上的“自动播放”和“循环”。 2.2 曲线漂浮动画
三、使用行为制作动态效果 在DW8中使用JAVASCRIPT行为所提供的互动功能和动画能给访问者带来更多兴趣。行为 是指能够简单运用制作动态网页的JAVASCRIPTE的功能，它提高了网站的可交互性。行为是由 动作和事件组成的。事实上，动作是由预先写好的能够执行某种任务的JAVASCRIPT代码组成。 1.弹出信息 2.打开浏览器窗口 3.控制Shockwave或FLASH动画 4.播放声音 5.检查表单 6.转到URL 7.显示弹出式菜单 8.设置文本域文字 9.设置状态栏文本 ZhuHai Radio And Television University
ZhuHai Radio And Television University 三、使用行为制作动态效果 在DW8中使用JAVASCRIPT行为所提供的互动功能和动画能给访问者带来更多兴趣。行为 是指能够简单运用制作动态网页的JAVASCRIPT的功能，它提高了网站的可交互性。行为是由 动作和事件组成的。事实上，动作是由预先写好的能够执行某种任务的JAVASCRIPT代码组成。 1. 弹出信息 2. 打开浏览器窗口 3. 控制Shockwave或FLASH动画 4. 播放声音 5. 检查表单 6. 转到URL 7. 显示弹出式菜单 8. 设置文本域文字 9. 设置状态栏文本