Dreamweaver实例教程第8章.ppt

第八章 表单的使用 学习目标 1）理解层和时间轴的概念。 2）能在层中添加文字、图片、表格。 3）会使用行为面板中关于层“显示－隐藏层”和“拖动层”的操作。 4）制作层的时间轴动画。 5）学习录制层路径。 6）为时间轴添加行为。 　　　文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。 8.1 层 重点提示 1）理解层的概念，学会层的建立方法。 2）能利用属性面板对层的属性进行设置，体会“Ｚ”轴。 3）能在层中放入文字、图片和表格。 4）用层制作出一个阴影文字。 1．层是什么 层就像是含有文字或图形等元素的透明胶片，一张张按顺序叠放在一起，组合起来形成效果，使网页具有了三维空间。层是一种新的网页元素定位技术，可以较方便的定位。 2．层的特点 1）可以在层中插入文本、图片、表格、插件，还可在层里面嵌套层。 2）可以在三维中定位，层与层之间可以重叠。 3）可以不受网页版面的约束，放到网页的任何位置，而整个页面不受影响。 4）页面被装载时，可以隐藏层，也可以隐藏层的一部分。 5）配合时间轴的使用，可同时移动一个或多个层，轻松制作出动感效果。 3．层的建立 （1） 插入层 （2） 拖放层 （3） 绘制层 （4）创建和取消嵌套层 要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl键将子层拖拽到父层即可。 我们还可以分离嵌入层：按住Ctrl键，在层面板中选择一层，然后拖它出目标层。此时，完成了嵌入层的分离。 4、层的属性设置 5、层的基本操作 1）选择层 2）调整层的大小 3）移动层 4）对齐层 5）层靠齐到网格 实例1：利用层的显示和隐藏属性行为，实现当鼠标移上附加行为的文本上，即刻在本页显示层的内容。（请点击进入助教视频） 思考： 为什么在实例1中在预览前在层面板中将layer1至layer4全部隐藏，不执行这步操作会怎么样，请尝试操作。 实例2：制作网页的弹出菜单。实现效果：当鼠标指针指向主菜单项时，即下拉出子菜单项，点击其中的某个子菜单项，即执行相应的功能；当鼠标指针离开菜单时，子菜单项即自动隐藏（不可见），实例效果如下图所示。 实例3：网上购物筐。实现效果：利用拖动层的功能制作一个购物筐，它既可以把要的东西拖进来，也可以把不要的东西拿出去。 课堂练习 在一幅图片上实现鼠标指向局部区域即刻在本页显示多行（大小任意）文字说明（如地图说明、动植物局部的说明）。 8.2 层和表格之间转换 重点提示 层与表格之间的转换 实例4：将层转换为表格。 课堂练习 练习表格和层之间的转换。 8.3 时间轴 重点提示 1）制作层的时间轴动画 2）录制层路径 3）为时间轴添加行为 实例5：创建一个简单的时间轴动画。 实例6：创建比较复杂的时间轴动画。 实例7：创建比较复杂的时间轴动画。实现效果：多架飞机在页面上循环飞行。 实例8：利用层、时间线和事件的结合，创建一个幻灯片。 本 章 小 结 层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠。时间轴是根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面，在时间轴中包含了制作动画时所必须的各种功能。