《dw教学课件》第五讲----层布局

1、网页三剑客主讲:刘苗1ppt课件第五讲 层2ppt课件通过本讲的学习掌握层的创建，层的参数设置以及层的相关操作。教学目标3ppt课件层的创建及属性设置层的操作本讲主要内容4ppt课件任务一、层1、概述 层有自由排版重要功能，有了它就可以进行不再受任何束缚的网页布局设计。通过层可以载入所有的页面元素，包括文字、图片、动画等，也可以设置背景图案。唯一与页面不同的是，层比它更灵活，可以放置在页面上的任何一个位置，甚至隐藏在页面的边线以内。 5ppt课件2、功能为页面中的元素定位可制作页面的区域重叠效果可以隐藏层的某些部分，然后通过脚本，使其在某段时间或某事件发生后再次出现3、HTML语言中的层标记在

2、IE中通常 区别：通用性与兼容性不同在Navigator中为和6ppt课件任务二、创建层1、认识层面板 “窗口”层”或者“F2”7ppt课件2、创建层创建层的方法有3种是利用布局插入工具栏中的层按钮进行拖动是利用“插入布局对象层”命令。拖放层：把描述层按钮从对象面板中拖到文档窗口注意：按住ctrl键可以绘制多个层。层中可以放置任何网页对象，包括文本，图像，表单，对象插件及其他层等。8ppt课件任务三、层的属性设置1、Tag标签2、左上：实现层相对于页面或父层左上角的位置实现层内元素在网页中的精确定位。 层属性面板中的左(L)表示X坐标值，右(R)表示垂直位置Y坐标值9ppt课件3、z轴层的索引

3、值 若以x轴和y轴来定义一个平面网页，那么层就是位于z轴上的网页内容。层具有三维性。4、层的可见性（设置初始状态下该层是否可见） default默认 hidden隐藏:总隐藏该层的内容不管父层是否可见 visible可见:显示该层的内容不管父层是否可见 inherit继承：继承父层的可见性10ppt课件5、剪辑clip(层的可见区域) 通过设置该选项组可对层进行剪切操作。范围取决于L、R、T、B文本框的值6、OverFlow溢出方式设置层中放置的内容超出层的边界时如何显示visible：当层中内容尺寸超出层的范围时，自动对层进行扩展hidden：不改变层的大小，溢出的内容将被隐藏scroll：

4、保持层的大小不变，在层上加入滚动条auto：当层中内容尺寸超出层的范围时，自动为层加上滚动条11ppt课件任务四、嵌套层创建嵌套层的方法：方法一：1、选择window/other/layers命令或按f2打开layer面板2、按住ctrl键，从layers面板中选择一个层，将其拖到目标层方法二：1、定位光标在已有的层内2、插入布局对象层12ppt课件方法三：按住Alt键,在已经有的层内画层注意：在层中再加入层，可以在层面板中看到嵌套的情况，选择Window（窗口）下Layers（层）在使用多个层时，可以统一这些层的风格。首先要把其中的一个层的属性定义好，然后，按住Shift选中其它各层，最后选

5、中定义好的那个层；接下来按Ctrl+Shift+，使它们的宽度与定义好的层一致；再按Ctrl+Shift+，使它们的高度与定义好的层一致。多个层的对齐，就要使用ctrl+Shift+方向键了13ppt课件嵌套层被拖动的同时被嵌套层也随嵌套层一起动被嵌套层可以在嵌套层的外边14ppt课件任务五、 层的操作1、层的选定单击层左上角的选定柄。按住shift键，并单击多个层。按住shift键并在layer子面板中单击多个层名。按住ctrl+shift键并单击要选择的编辑窗口部分，可以选择此层15ppt课件2、调整层的大小选定并直接拖动控制柄。选定层后按住ctrl键，在按方向键可每次以一个像素整。选定层

6、后按住shift+ctrl键，再按方向键可每次以一个网格(10象素)为单位调整。直接在properties面板中，输入其大小。3、层的移动 先选定一个或多个层，再拖动选定柄，用方向键一次移动个像素，Shift+方向键一次移动10个像素16ppt课件4、层的对齐 使用层对齐命令，可将一个或多个层与最后选定的层的边界对齐选定多个层修改-对齐（odify/Align）左对齐：ctrl+shift+1右对齐：ctrl+shift+3对齐上缘：ctrl+shift+4对齐下缘：ctrl+shift+6设成宽度相同：ctrl+shift+7设成高度相同：ctrl+shift+917ppt课件利用网格作参照

7、，直接拖拽层实现对齐层与网格的对齐选择View/Grid/Show Grid命令选择View/Grid/Grid setting设置网格对齐网格：选择View/Grid/Snap to Grid命令 选定并拖动一个层，释放鼠标后，如果层与网格靠的很近，则会自动跳至最近的网格位置18ppt课件5、层的叠放(层的顺序) 层的Z-index属性决定了层的叠放位置，Z-index值大的层将被放在Z-index值小的层上面。6、层的可见性 ：表示该层的可见性为Visible,即可见 ：表示该层的可见性为Hidden,即隐藏 没有眼睛：表示该层的可见性为Default，即使用浏览器的缺省设置，一般浏览器都

8、将这个属性设为Inherit 19ppt课件 注意: 设置层的可见性时，页面中插入的层无论是否可见，都将占据页面上的一定空间。同层的Clip属性，也不会改变原来层中的内容在文档中的大小。 20ppt课件任务六、层与表格1、层与表格的相互转换概述 层的局限性是需要较高版本的浏览器的支持，若想使设计的网页在低版本的浏览器中也能显示，需要将层转化为表格。 包含了层的网页只有在支持层的浏览器上才能被正常地浏览，但3.0版本的浏览器，就不支持层，所以要将层转换为表格布局。 在层向表格转化之前，应确保网页各层之间没有重叠，否则无法转换。如果网页中存在重叠的层，应先将其移开。21ppt课件防止层的重叠执行V

9、iew/Prevent Layer Overlaps命令；在层面板中选中Prevent Layer overlaps；拖动层；2、层转换为表格 修改转换层到表格打开“层到表格对话框”22ppt课件任务七、利用层和时间轴制作动画1、时间轴 时间轴是为了制作动态网页而设计的，主要通过该变层的位置，大小，可见性和索引值等属性来创建网页动画的，同时也能直接操作图像制作出动态图片。2、时间轴面板窗口时间轴或 Alt+F923ppt课件时间线下拉列表：指定了文件中哪个时间线显示在timeline面板上。行为（B）通道：当在某帧上加入行为后，用于帧要触发的行为。当动画播放到该位置时，将启动所设置的行为。动画

10、通道：用于显示和控制网页中的时间线动画。在播放动画时，所有通道都同步进行。Auto play:选中该复选框使当前页面被载入时自动开始播放时间线。Loop:循环播放24ppt课件3、创建时间轴动画(1)创建直线移动动画 选中该层,执行modify/timelines/add object to timeline命令(修改时间轴增加对象到时间轴)直接把选中的对象拖入到timelines面板右键添加到时间轴25ppt课件(2)创建曲线移动动画选择Modify Timeline Record Path of Layer（修改时间轴录制层路径）右键层记录路径选中层-时间线中右击录制层路径26ppt课件4

11、、编辑动画的路径延长动画时间： 在timelines面板上向右拖动结束关键帧，所有关键帧的位置都会向右移动，以保证它们之间的相对位置不动，如过要防止其它关键帧也在移动，则在拖动标签时按住ctrl键。加快或减慢到达关键帧的速度: 默认为15fps改变整个动画路径的位置27ppt课件在时间线上添加和删除帧 添加帧可以使动画的播放速度变慢，画面显得更平滑。删除帧能使动画播放速度加快，有时会出现跳跃现象。在时间线上添加和删除关键帧28ppt课件动画序列的选取、移动和删除 每向时间轴添加一个对象即可增加一个动画 序列，动画序列一般以层的名称自动命名。选择、添加和删除时间轴修改-时间轴-添加时间轴修改-时间轴- 移出时间轴29ppt课件本讲主要学习了层在网页中的灵活运用，层具有特殊的魅力，只有运用好层的特殊属性，可以在任何一个位置设计网页布局，结合行为还可以使用动态功能。熟练掌握层属性，网页文档制作将变得更加简单、轻松。本讲小结30ppt课件上机作业练习本讲实例31ppt课件思考题1