收藏 分享(赏)

项目dw中层及应用.ppt

上传人:无敌 文档编号:306119 上传时间:2018-03-27 格式:PPT 页数:27 大小:1.36MB
下载 相关 举报
项目dw中层及应用.ppt_第1页
第1页 / 共27页
项目dw中层及应用.ppt_第2页
第2页 / 共27页
项目dw中层及应用.ppt_第3页
第3页 / 共27页
项目dw中层及应用.ppt_第4页
第4页 / 共27页
项目dw中层及应用.ppt_第5页
第5页 / 共27页
点击查看更多>>
资源描述

1、,教学目标1、理解层的用途;2、掌握层的创建、层的设置;3、熟练运用行为和时间轴实现对层的操纵;,下一页,上一页,教学重点1、层的创建与属性设置;2、使用行为实现层的动态效果;,下一页,上一页,教学难点1、层的操纵2、层的定位,下一页,上一页,教学方法1、项目教学、案例教学,下一页,上一页,一、 理解层对象的概念 层在网页中主要有两个方面的应用: 1、制作动态效果 层可以自由地移动,层可以显示隐藏,这是应用层创建动态效果的重要原因。 2、排版 因为层比表格有更大的自由度,可以自由地放置,同时还可以相互嵌套、叠加,所以很大程度上弥补了表格排版的不足。,下一页,上一页,二、在网页中添加层(一)插入

2、层和嵌套层 创建层的方法如下: 1、在菜单中选择“插入”-“布局对象”-“层”。 2、鼠标变为十字形,按住鼠标画出矩形的层,如图所示。可以在网页的任何位置插入层,在网页编辑窗口的左上角出现一个图标,代表插入的层。,下一页,上一页,在网页上绘制层后,Dreamweaver具有层面板,可以提供对多个层的综合管理,选择“窗 口”-“层”,打开层面板,如图所示。,下一页,上一页,层面板共有三栏内容,其作用如下: 1、左侧一栏有眼睛的图标。选中一层之后,单击眼睛图标,可以设置层的显示或隐藏。 2、中间一栏为“名称”,通过给层命名可以区分各个层,同时在层上应用行为也要先给层命名。 3、最右面一栏显示Z,意

3、思是网页的Z轴。网页之中通过X和Y轴来给网页中的对象定位。Z轴的作用就是排定各个层的叠加顺序。z轴数值大的层在数值小的层的上面,覆盖数值小的层。,下一页,上一页,创建嵌套关系的层: 1、将光标放置在层中。 2、选择“插入”-“布局对象”-“层”,一个新层就出现在原来的层中,如图所示。,下一页,上一页,可以直接绘制嵌套层:1、选择“编辑”-“首选参数”,打开参数选择面板,然后切换到“层”面板,选中“如果在层中则使用嵌套”,如图所示。2、打开“插入”面板,单击“插入层”按钮,这时在已有的层中绘制的层都会成为嵌套层。,下一页,上一页,通过层面板创建嵌套层: 1、选择“窗口”-“层”,打开层面板。 2

4、、按住Ctrl键的同时用鼠标拖动层到其他层上方,当另一层的外部出现矩形框之后松开鼠标。 如图所示。,下一页,上一页,(二)设置层参数和属性 双击层的图标或者层的手柄都可以打开层的属性面板,如图所示。层编号:实际就是层的名称。在对层应用行为的时候,层的名称将十分重要。 左:到左侧的距离。 上:到顶端的距离。,下一页,上一页,(三)层的“溢出”与剪辑设置层的溢出与剪辑面板如图: 溢出:设定对超出层的范围的内容的处理。 Visible为显示超出范围的内容。 Hidden为隐藏超出范围的内容。 Scroll会给层添加滚动条,无论内容是否超出层的范围。 Auto会在内容超出层的范围时给层填加滚动条。,下

5、一页,上一页,三、 操纵层 1、绘制层 2、将层添加到时间轴 3、调整时间轴 4、创建位置移动动画 5、自动播放和循环 6、调整帧速率,下一页,上一页,拖动层创建动画的方法如下:1、选中要创建动画的层。2、选择“窗口”-“时间轴”,打开时间轴面板。3、在选中的层上单击鼠标右键,在弹出菜单中选择“记录路径”,如图。,下一页,上一页,4、使用鼠标拖动层沿着需要的轨迹运动,这时编辑窗口中出现层运动的轨迹,时间轴面板上出现对应的关键帧,如图所示。 5、使用拖动方法创建的层动画还可以继续通过调整关键帧和时间轴的长度进行修改。,下一页,上一页,四、 表格和层的相互转换 要将层排版转化为表格排版,选择“修改

6、”-“转换”-“层到表格”,如图所示。,下一页,上一页,弹出窗口如图:,下一页,上一页,五、层的行为(一) 拖动层选择“插入”-“布局对象”-“层”,在文档窗口中插入一个层。该层为:Layer1。通过单击“文档”窗口底部标签选择器中的 选择 body 标签。打开“行为”面板,从“动作”中选择“拖动层”。如图:,下一页,上一页,(二) 显示-隐藏层操作步骤如下:1、在页面上添加两个层,分别为layer1和layer2,在layer1中插入一个事先准备好的图片,在layer2中添加文字,如图:,下一页,上一页,2、调整这两个层在页面中的显示位置。设置layer2的显示属性为隐藏,如图:,下一页,上

7、一页,3、在layer1层中的图片上添加显示和隐藏层的行为动作”。选择图片,打开行为面板。单击加号 (+) 按钮并从“动作”弹出菜单中选择“显示隐藏层”。选中layer2,单击“显示”按钮如图,单击确定。,下一页,上一页,4、单击事件下拉菜单,选择触发动作的事件为onMouseOver;5、再次选中图片,打开行为面板,单击加号 (+) 按钮并从“动作”弹出菜单中选择“显示隐藏层”。选中layer2,单击“隐藏”按钮如图,单击确定。,下一页,上一页,6、再次单击事件下拉菜单,选择触发动作的事件为onMouseOut;7、设置完成后,行为面板如图:保存按F12可以预览到效果:当鼠标移入图片时,显示相关说明信息, 当鼠标移开图片时,隐藏说明信息。,下一页,上一页,(三)设置层文本具体实现的步骤: 1、选择“插入”-“布局对象”-“层”。2、在层内输入你需要的文字,如图:,下一页,上一页,3、打开行为面板,从“动作”中选择“设置文本”-“设置层文本”,如图: 4、单击确定,设定激活行为的事件,按F12预览。,下一页,上一页,【小结】 层在网页排版和层在动态效果在网页设计中得到了广泛的应用。层的显示与隐藏效果已经成为优秀设计中不可缺少的因素。运用好层,可以使平面受限的网页获得更广阔的空间。,下一页,上一页,

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 企业管理 > 经营企划

本站链接:文库   一言   我酷   合作


客服QQ:2549714901微博号:道客多多官方知乎号:道客多多

经营许可证编号: 粤ICP备2021046453号世界地图

道客多多©版权所有2020-2025营业执照举报