《dw教学第五讲层布局ppt课件》由会员分享，可在线阅读，更多相关《dw教学第五讲层布局ppt课件（32页珍藏版）》请在金锄头文库上搜索。
1、网页三剑客网页三剑客主讲主讲:刘苗刘苗第五讲第五讲 层层n通通过过本本讲讲的的学学习习掌掌握握层层的的创创建建，层层的的参参数数设设置置以以及及层的相关操作。层的相关操作。教学目标教学目标3n层的创建及属性设置层的创建及属性设置n层的操作层的操作本讲主要内容本讲主要内容4任务一、层任务一、层1、概述、概述 层层有有自自由由排排版版重重要要功功能能，有有了了它它就就可可以以进进行行不不再再受受任任何何束束缚缚的的网网页页布布局局设设计计。通通过过层层可可以以载载入入所所有有的的页页面面元元素素，包包括括文文字字、图图片片、动动画画等等，也也可可以以设设置置背背景景图图案案。唯唯一一与与页页面面不
2、不同同的的是是，层层比比它它更更灵灵活活，可可以以放放置置在在页页面面上上的的任任何何一一个个位置，甚至隐藏在页面的边线以内。位置，甚至隐藏在页面的边线以内。 52、功能、功能为页面中的元素定位为页面中的元素定位可制作页面的区域重叠效果可制作页面的区域重叠效果可可以以隐隐藏藏层层的的某某些些部部分分，然然后后通通过过脚脚本本，使使其其在在某某段段时间或某事件发生后再次出现时间或某事件发生后再次出现3、HTML语言中的层标记语言中的层标记在在IE中通常中通常 区别：通用性与兼容性不同区别：通用性与兼容性不同在在Navigator中为中为和和6任务二、创建层任务二、创建层1、认识层面板、认识层面板
3、 “窗口窗口”层或者层或者“F2”72、创建层、创建层创建层的方法有创建层的方法有3种种是利用布局插入工具栏中的层按钮进行拖动是利用布局插入工具栏中的层按钮进行拖动是利用是利用“插入插入布局对象布局对象层命令。层命令。拖放层：把描述层按钮从对象面板中拖到文档窗口拖放层：把描述层按钮从对象面板中拖到文档窗口留意：留意：按住按住ctrl键可以绘制多个层。键可以绘制多个层。层中可以放置任何网页对象，包括文本，图像，表单，层中可以放置任何网页对象，包括文本，图像，表单，对象插件及其他层等。对象插件及其他层等。8任务三、层的属性设置任务三、层的属性设置1、Tag标签标签2、左左上上：实实现现层层相相对对
4、于于页页面面或或父父层层左左上上角角的的位位置置实实现层内元素在网页中的精确定位。现层内元素在网页中的精确定位。 层层属属性性面面板板中中的的左左(L)表表示示X坐坐标标值值，右右(R)表表示示垂垂直直位置位置Y坐标值坐标值93、z轴层的索引值轴层的索引值 若若以以x轴轴和和y轴轴来来定定义义一一个个平平面面网网页页，那那么么层层就就是是位位于于z轴上的网页内容。层具有三维性。轴上的网页内容。层具有三维性。4、层的可见性、层的可见性（设置初始状态下该层是否可见）（设置初始状态下该层是否可见） default默认默认 hidden隐藏隐藏:总隐藏该层的内容不管父层是否可见总隐藏该层的内容不管父层
5、是否可见 visible可见可见:显示该层的内容不管父层是否可见显示该层的内容不管父层是否可见 inherit继承：继承父层的可见性继承：继承父层的可见性105、剪辑、剪辑clip(层的可见区域层的可见区域) 通通过过设设置置该该选选项项组组可可对对层层进进行行剪剪切切操操作作。范范围围取取决决于于L、R、T、B文本框的值文本框的值6、OverFlow溢出方式溢出方式设置层中放置的内容超出层的边界时如何显示设置层中放置的内容超出层的边界时如何显示visible：当当层层中中内内容容尺尺寸寸超超出出层层的的范范围围时时，自自动动对对层层进进行行扩展扩展hidden：不改变层的大小，溢出的内容将被
6、隐藏：不改变层的大小，溢出的内容将被隐藏scroll：保持层的大小不变，在层上加入滚动条：保持层的大小不变，在层上加入滚动条auto：当当层层中中内内容容尺尺寸寸超超出出层层的的范范围围时时，自自动动为为层层加加上上滚动条滚动条11任务四、嵌套层任务四、嵌套层创建嵌套层的方法：创建嵌套层的方法：方法一：方法一：1、选择、选择window/other/layers命令或按命令或按f2打开打开layer面板面板2、按按住住ctrl键键，从从layers面面板板中中选选择择一一个个层层，将将其其拖拖到目标层到目标层方法二：方法二：1、定位光标在已有的层内、定位光标在已有的层内2、插入布局对象层、插入
7、布局对象层12方法三：方法三：按住按住Alt键键,在已经有的层内画层在已经有的层内画层留意：留意：在在层层中中再再加加入入层层，可可以以在在层层面面板板中中看看到到嵌嵌套套的的情情况况，选选择择Window窗口下窗口下Layers层）层）在在使使用用多多个个层层时时，可可以以统统一一这这些些层层的的风风格格。首首先先要要把把其其中中的的一一个个层层的的属属性性定定义义好好，然然后后，按按住住Shift选选中中其其它它各各 层层 ， 最最 后后 选选 中中 定定 义义 好好 的的 那那 个个 层层 ； 接接 下下 来来 按按Ctrl+Shift+，使使它它们们的的宽宽度度与与定定义义好好的的层层
8、一一致致；再再按按Ctrl+Shift+，使使它它们们的的高高度度与与定定义义好好的的层层一一致致。多多个个层的对齐，就要使用层的对齐，就要使用ctrl+Shift+方向键了方向键了13n嵌套层被拖动的同时被嵌套层也随嵌套层一起动嵌套层被拖动的同时被嵌套层也随嵌套层一起动n被嵌套层可以在嵌套层的外边被嵌套层可以在嵌套层的外边14任务五、任务五、 层的操作层的操作1、层的选定、层的选定单击层左上角的选定柄。单击层左上角的选定柄。按住按住shift键，并单击多个层。键，并单击多个层。按住按住shift键并在键并在layer子面板中单击多个层名。子面板中单击多个层名。按按住住ctrl+shift键键
9、并并单单击击要要选选择择的的编编辑辑窗窗口口部部分分，可以选择此层可以选择此层152、调整层的大小、调整层的大小选定并直接拖动控制柄。选定并直接拖动控制柄。选选定定层层后后按按住住ctrl键键，在在按按方方向向键键可可每每次次以以一一个个像像素素整整。选选定定层层后后按按住住shift+ctrl键键，再再按按方方向向键键可可每每次以一个网格次以一个网格(10象素象素)为单位调整。为单位调整。直接在直接在properties面板中，输入其大小。面板中，输入其大小。3、层的移动、层的移动 先先选选定定一一个个或或多多个个层层，再再拖拖动动选选定定柄柄，用用方方向向键键一一次移动个像素，次移动个像素
10、，Shift+方向键一次移动方向键一次移动10个像素个像素164、层的对齐、层的对齐 使使用用层层对对齐齐命命令令，可可将将一一个个或或多多个个层层与与最最后后选选定定的的层层的边界对齐选定多个层的边界对齐选定多个层修正修正-对齐对齐odify/Align）左对齐：左对齐：ctrl+shift+1右对齐：右对齐：ctrl+shift+3对齐上缘：对齐上缘：ctrl+shift+4对齐下缘：对齐下缘：ctrl+shift+6设成宽度相同：设成宽度相同：ctrl+shift+7设成高度相同：设成高度相同：ctrl+shift+917n利用网格作参照，直接拖拽层实现对齐利用网格作参照，直接拖拽层实现
11、对齐n层与网格的对齐层与网格的对齐n选择选择View/Grid/Show Grid命令命令n选择选择View/Grid/Grid setting设置网格设置网格n对齐网格：选择对齐网格：选择View/Grid/Snap to Grid命令命令n 选选定定并并拖拖动动一一个个层层，释释放放鼠鼠标标后后，如如果果层层与与网网格格靠靠的的很近，则会自动跳至最近的网格位置很近，则会自动跳至最近的网格位置185、层的叠放、层的叠放(层的顺序层的顺序) 层层的的Z-index属属性性决决定定了了层层的的叠叠放放位位置置，Z-index值值大大的层将被放在的层将被放在Z-index值小的层上面。值小的层上面
12、。6、层的可见性、层的可见性 ：表示该层的可见性为：表示该层的可见性为Visible,即可见即可见 ：表示该层的可见性为：表示该层的可见性为Hidden,即隐藏即隐藏 没没有有眼眼睛睛：表表示示该该层层的的可可见见性性为为Default，即即使使用用浏浏览览器的缺省设置，一般浏览器都将这个属性设为器的缺省设置，一般浏览器都将这个属性设为Inherit 19 留意留意: 设设置置层层的的可可见见性性时时，页页面面中中插插入入的的层层无无论论是是否否可可见见，都都将将占占据据页页面面上上的的一一定定空空间间。同同层层的的Clip属属性性，也也不不会改变原来层中的内容在文档中的大小。会改变原来层中的
13、内容在文档中的大小。 20任务六、层与表格任务六、层与表格1、层与表格的相互转换概述、层与表格的相互转换概述 层层的的局局限限性性是是需需要要较较高高版版本本的的浏浏览览器器的的支支持持，若若想想使使设设计计的的网网页页在在低低版版本本的的浏浏览览器器中中也也能能显显示，需要将层转化为表格。示，需要将层转化为表格。 包包含含了了层层的的网网页页只只有有在在支支持持层层的的浏浏览览器器上上才才能能被被正正常常地地浏浏览览，但但3.0版版本本的的浏浏览览器器，就就不不支支持持层，所以要将层转换为表格布局。层，所以要将层转换为表格布局。 在在层层向向表表格格转转化化之之前前，应应确确保保网网页页各各
14、层层之之间间没没有有重重叠叠，否否则则无无法法转转换换。如如果果网网页页中中存存在在重重叠叠的的层，应先将其移开。层，应先将其移开。21n防止层的重叠防止层的重叠n执行执行View/Prevent Layer Overlaps命令；命令；n在层面板中选中在层面板中选中Prevent Layer overlaps；n拖动层；拖动层；n2、层转换为表格、层转换为表格n 修正修正转换转换层到表格打开层到表格打开“层到表格对话框层到表格对话框”22任务七、利用层和时间轴制作动画任务七、利用层和时间轴制作动画1、时间轴、时间轴 时时间间轴轴是是为为了了制制作作动动态态网网页页而而设设计计的的，主主要要通
15、通过过该该变变层层的的位位置置，大大小小，可可见见性性和和索索引引值值等等属属性性来来创创建建网网页页动动画画的的，同同时时也也能能直直接接操操作作图图像像制作出动态图片。制作出动态图片。2、时间轴面板、时间轴面板窗口窗口时间轴或时间轴或 Alt+F923n时时间间线线下下拉拉列列表表：指指定定了了文文件件中中哪哪个个时时间间线线显显示示在在timeline面板上。面板上。n行行为为B通通道道：当当在在某某帧帧上上加加入入行行为为后后，用用于于帧帧要要触触发发的的行行为为。当当动动画画播播放放到到该该位位置置时时，将将启启动动所所设设置置的的行为。行为。n动动画画通通道道：用用于于显显示示和和
16、控控制制网网页页中中的的时时间间线线动动画画。在在播放动画时，所有通道都同步进行。播放动画时，所有通道都同步进行。nAuto play:选选中中该该复复选选框框使使当当前前页页面面被被载载入入时时自自动动开开始始播放时间线。播放时间线。nLoop:循环播放循环播放243、创建时间轴动画、创建时间轴动画(1)创建直线移动动画创建直线移动动画 选选 中中 该该 层层 ,执执 行行 modify/timelines/add object to timeline命令命令(修正修正时间轴时间轴增加对象到时间轴增加对象到时间轴)直接把选中的对象拖入到直接把选中的对象拖入到timelines面板面板右键右键
17、添加到时间轴添加到时间轴25(2)创建曲线移动动画创建曲线移动动画选选择择Modify Timeline Record Path of Layer修修正正时间轴时间轴录制层路径）录制层路径）右键层右键层记录路径记录路径选中层选中层-时间线中右击时间线中右击录制层路径录制层路径264、编辑动画的路径、编辑动画的路径延长动画时间：延长动画时间： 在在timelines面面板板上上向向右右拖拖动动结结束束关关键键帧帧，所所有有关关键键帧帧的的位位置置都都会会向向右右移移动动，以以保保证证它它们们之之间间的的相相对对位位置置不不动动，如如过过要要防防止止其其它它关关键键帧帧也也在在移移动动，则则在拖动
18、标签时按住在拖动标签时按住ctrl键。键。加快或减慢到达关键帧的速度加快或减慢到达关键帧的速度: 默认为默认为15fps改变整个动画路径的位置改变整个动画路径的位置27在时间线上添加和删除帧在时间线上添加和删除帧 添添加加帧帧可可以以使使动动画画的的播播放放速速度度变变慢慢，画画面面显显得得更更平平滑滑。删除帧能使动画播放速度加快，有时会出现跳跃现象。删除帧能使动画播放速度加快，有时会出现跳跃现象。在时间线上添加和删除关键帧在时间线上添加和删除关键帧28动画序列的选取、移动和删除动画序列的选取、移动和删除 每每向向时时间间轴轴添添加加一一个个对对象象即即可可增增加加一一个个动动画画 序序列列，
19、动动画序列一般以层的名称自动命名。画序列一般以层的名称自动命名。选择、添加和删除时间轴选择、添加和删除时间轴修正修正-时间轴时间轴-添加时间轴添加时间轴修正修正-时间轴时间轴- 移出时间轴移出时间轴29n本本讲讲主主要要学学习习了了层层在在网网页页中中的的灵灵活活运运用用，层层具具有有特特殊殊的的魅魅力力，只只有有运运用用好好层层的的特特殊殊属属性性，可可以以在在任任何何一一个个位位置置设设计计网网页页布布局局，结结合合行行为为还还可可以以使使用用动动态态功功能能。熟熟练练掌掌握握层层属属性性，网网页页文文档档制制作作将将变变得得更更加加简单、轻松。简单、轻松。本讲小结本讲小结30上机作业上机作业n练习本讲实例练习本讲实例31思考题思考题1、HTML中中定定义义层层的的标标签签有有哪哪些些，什什么么样样的的浏浏览览器器能能够够识识别别它它们们？Dreamweaver支支持持它它们们中中的的哪哪些些？2、如何在页面上已存在的层中绘制嵌入式的层、如何在页面上已存在的层中绘制嵌入式的层3、在文档窗口中选定一个层有几种方法？、在文档窗口中选定一个层有几种方法？4、制制作作含含有有层层的的页页面面在在被被浏浏览览时时有有什什么么限限制制，如如果果解决这个问题？解决这个问题？5、怎样防止层重叠？防止层重叠有什么意义？、怎样防止层重叠？防止层重叠有什么意义？32
