网页设计与制作 第2版 项目教学 教学课件 作者 王君学 古淑强 项目八 层和时间轴──制作海底探秘网页-.ppt

网页设计与制作 第2版 项目教学 教学课件 作者 王君学 古淑强 项目八 层和时间轴──制作海底探秘网页-.ppt

ID:50068968

大小:1.76 MB

页数:28页

时间:2020-03-08

网页设计与制作 第2版 项目教学 教学课件 作者 王君学 古淑强 项目八 层和时间轴──制作海底探秘网页-.ppt_第1页
网页设计与制作 第2版 项目教学 教学课件 作者 王君学 古淑强 项目八 层和时间轴──制作海底探秘网页-.ppt_第2页
网页设计与制作 第2版 项目教学 教学课件 作者 王君学 古淑强 项目八 层和时间轴──制作海底探秘网页-.ppt_第3页
网页设计与制作 第2版 项目教学 教学课件 作者 王君学 古淑强 项目八 层和时间轴──制作海底探秘网页-.ppt_第4页
网页设计与制作 第2版 项目教学 教学课件 作者 王君学 古淑强 项目八 层和时间轴──制作海底探秘网页-.ppt_第5页
资源描述:

《网页设计与制作 第2版 项目教学 教学课件 作者 王君学 古淑强 项目八 层和时间轴──制作海底探秘网页-.ppt》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库

1、网页设计与制作老虎工作室2012年12月项目八层和时间轴──制作海底探秘网页任务一使用层布局页面任务二使用时间轴制作动画实训制作“演员表”网页层是分配有绝对位置的HTML页面元素,它和Div标签使用同一个HTML标识“

”,但这并不意味着层和Div标签是完全相同的,它们之间既有区别又有联系。时间轴是Dreamweaver8实现动画的关键功能,但它需要与层相结合才能发挥这一作用。本项目以创建海底探秘网页为例,介绍使用层布局网页以及使用层和时间轴创建动画的基本方法。在项目中,首先使用层布局整个页面,然后制作时间轴动画。任务一使用层布局页面(一)创建层(二)设

2、置层(一)创建层需要掌握的内容主要有:1、层概念的理解2、创建层3、【层】面板4、选定层5、缩放层6、移动层7、对齐层层是一种能够随意定位的页面元素,如同浮动在页面里的透明层,可以将层放置在页面的任何位置。由于层中可以放置包含文本、图像或多媒体对象等内容,很多网页设计者会使用层定位一些特殊的网页内容。1、层概念的理解可以通过以下途径来创建层。(1)在主菜单中选择【插入】/【布局对象】/【层】命令。(2)将【插入】/【布局】面板上的(绘制层)按钮拖曳到文档窗口松开鼠标。(3)在【插入】/【布局】面板中单击(绘制层)按钮,在文档窗口中按住鼠标左键并拖曳可绘出一个自定

3、义大小的层。如果按住Ctrl键不放,按住鼠标左键拖曳可在文档窗口中连续绘制多个层。2、创建层在【层】面板中可以实现以下操作。(1)双击层的名称,可以对层进行重命名。(2)单击层后面的数字可以修改层的z轴顺序,数字大的将位于上层。(3)勾选【防止重叠】复选框可以禁止层重叠。(4)在层的名称前面有一个眼睛图标,单击眼睛图标可显示或隐藏层。(5)单击层名称可以选定层,按住Shift键不放,依次单击层可以选中多个层。3、【层】面板选定层还有以下几种方法:(1)在【层】面板中单击层的名称选定层。(2)单击文档中的图标来选定层。如果没有显示该图标,可以在【首选参数】对话框的

4、【不可见元素】分类中勾选【层锚记】复选框。(3)将光标置于层内,然后在文档窗口底部标签条中选择“

”标签。(4)单击层的边框线来选定层。(5)如果要选定两个以上的层,只要按住Shift键,然后逐个单击层手柄或在【层】面板中逐个单击层的名称即可。4、选定层可以根据需要调整层的大小,其方法有:(1)使用鼠标直接拖曳;(2)在【属性】面板的【宽】和【高】文本框中输入精确数值;(3)还可以将所有选择层的宽度和高度变为最后选择的层的宽度和高度。当选择多个层时,最后选择的层四周的控制点将以实心显示,其他的层四周的控制点将以空心显示。5、缩放层层具有很强的灵活性,可以

5、随意移动到页面中的任何位置。移动层的方法有很多:(1)可以使用鼠标进行拖曳;(2)也可以先选中层然后按键盘上的方向键进行移动(每按1次方向键移动1个像素,如果按住Shift键1次移动10个像素);(3)还可以在【属性】面板的【左】和【上】文本框中输入数值进行精确定位。6、移动层如果需要对多个层进行对齐操作,直接用鼠标拖动层可能不太精确,通常需要使用对齐层的功能来实现。方法是:首先选择需要对齐的层,然后在主菜单的【修改】/【排列顺序】中选择【左对齐】、【右对齐】【对齐上缘】或【对齐下缘】命令,即可将所有选择的层以最后选择的层为标准进行对齐操作。7、对齐层(二)设置

6、层需要掌握的内容主要有:1、层【属性】面板2、层与Div标签选中层,在其【属性】面板中可以设置相关参数。1、层【属性】面板层与Div标签既有区别又有联系,它们的共同点是在源代码中都使用HTML标签“

”进行标识,不同的是,在插入层时,层同时被赋予了CSS样式,通过【属性】面板还可以修改这些CSS样式,而插入Div标签时,需要再单独创建CSS样式对它进行控制,而且也不能通过【属性】面板设置其CSS样式。另外,Div标签是相对定位,层是绝对定位,这就意味着Div标签不能重叠,而层可以重叠。但在实践中,层和Div标签可以相互转换。转换的方法是,在

7、【CSS规则定义】对话框的【定位】分类中,将【类型】选项设置为“绝对”,即表示层,否则即为Div标签,这是层与Div标签转换的关键因素。2、层与Div标签任务二使用时间轴制作动画需要掌握的内容主要有:1、【时间轴】面板2、增加对象到时间轴3、帧和关键帧4、控制动画播放5、添加或删除帧6、用时间轴改变图像与层的属性7、录制层路径时间轴是与层密切相关的一项功能,它可以在Dreamweaver中实现动画的效果。时间轴可以使层的位置、尺寸、可视性和重叠次序以及层中对象的属性,随着时间的变化而改变,从而创建出具有Flash效果的动画。在主菜单中选择【窗口】/【时间轴】命令

8、打开【时间轴】面板。1、

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。