Dreamweaver实例教程第8章.ppt

1、第八章,表单的使用,学习目标 1）理解层和时间轴的概念。 2）能在层中添加文字、图片、表格。 3）会使用行为面板中关于层“显示隐藏层”和“拖动层”的操作。 4）制作层的时间轴动画。 5）学习录制层路径。 6）为时间轴添加行为。,文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。,8.1 层,重点提示 1）理解层的概念，学会层的建立方法。 2）能利用属性面板对层的属性进行设置，体会“”轴。 3）能在层中放入文字、图片和表格。

2、4）用层制作出一个阴影文字。,1层是什么 层就像是含有文字或图形等元素的透明胶片，一张张按顺序叠放在一起，组合起来形成效果，使网页具有了三维空间。层是一种新的网页元素定位技术，可以较方便的定位。 2层的特点 1）可以在层中插入文本、图片、表格、插件，还可在层里面嵌套层。 2）可以在三维中定位，层与层之间可以重叠。 3）可以不受网页版面的约束，放到网页的任何位置，而整个页面不受影响。 4）页面被装载时，可以隐藏层，也可以隐藏层的一部分。 5）配合时间轴的使用，可同时移动一个或多个层，轻松制作出动感效果。,3层的建立 （1） 插入层 （2） 拖放层 （3） 绘制层 （4）创建和取消嵌套层 要建立这

3、样的一种隶属关系方法很简单。在层面板中按Ctrl键将子层拖拽到父层即可。 我们还可以分离嵌入层：按住Ctrl键，在层面板中选择一层，然后拖它出目标层。此时，完成了嵌入层的分离。,4、层的属性设置 5、层的基本操作 1）选择层 2）调整层的大小 3）移动层 4）对齐层 5）层靠齐到网格,实例1：利用层的显示和隐藏属性行为，实现当鼠标移上附加行为的文本上，即刻在本页显示层的内容。（请点击进入助教视频） 思考： 为什么在实例1中在预览前在层面板中将layer1至layer4全部隐藏，不执行这步操作会怎么样，请尝试操作。,实例2：制作网页的弹出菜单。实现效果：当鼠标指针指向主菜单项时，即下拉出子菜单项

4、，点击其中的某个子菜单项，即执行相应的功能；当鼠标指针离开菜单时，子菜单项即自动隐藏（不可见），实例效果如下图所示。,实例3：网上购物筐。实现效果：利用拖动层的功能制作一个购物筐，它既可以把要的东西拖进来，也可以把不要的东西拿出去。,课堂练习 在一幅图片上实现鼠标指向局部区域即刻在本页显示多行（大小任意）文字说明（如地图说明、动植物局部的说明）。,8.2 层和表格之间转换,重点提示 层与表格之间的转换,实例4：将层转换为表格。 课堂练习 练习表格和层之间的转换。,8.3 时间轴,重点提示 1）制作层的时间轴动画 2）录制层路径 3）为时间轴添加行为,实例5：创建一个简单的时间轴动画。,实例6：创建比较复杂的时间轴动画。,实例7：创建比较复杂的时间轴动画。实现效果：多架飞机在页面上循环飞行。,实例8：利用层、时间线和事件的结合，创建一个幻灯片。,本 章 小 结,层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由