使用层和时间轴.ppt

第7章使用层和时间轴
本章简介:
如果用户想在网页上实现多个元素重叠的效果,可以使用层。层是网页中的一个区域,并且游离在文档之上。利用层可精确定位和重叠网页元素。通过设置不同层的显示或隐藏,实现特殊的效果。
Dreamweaver CS3提供了在网页上制作动态效果的功能,利用时间轴组织、控制层和图像等对象,在一定时间内播放,从而产生动态效果。
层的引入
在网页设计当中,层的概念的引入主要表现出两大优势:
在层出现之前,所有页面的布局具有很大的空间局限性,早期的网页设计人员一般用表格来控制图形等网页元素的位置。但是如果要精确定位一个图形,则必须在表格内进行表格嵌套,使设计变得十分复杂。当层出现以后,定位技术及其相关的设计就变的非常容易实现了。
在层出现之前,所有的网页设计和制作都是在同一个平面内进行的,可以利用的空间和设计的技术手段都十分有限,人们不得不在有限的空间对页面进行细致的略显繁琐布局规划,而在层出现之后,网页设计的空间由二维拓展成了三维,从而大大增加了设计人员的自由空间。
层的理解
网页中的层,就好像一张张透明的画布,每张画布都画着一些独立的色彩,而一幅完整的画就是由许多张这样的画布叠加在一起组成的,每一个层的色彩都能够和其它层进行叠加,而修改其中的某一层却不会影响其他层的效果,这就是层的概念核心,也体现了层的作用。
课堂学****目标
层的基本操作
应用层设计表格
时间轴动画
制作时间轴动画的技巧
层的基本操作
课堂案例——圣诞礼品屋
创建层
选择层
设置层的默认属性
AP元素面板
更改层的堆叠顺序
更改层的可见性
调整层的大小
嵌套层
移动层
对齐层
层靠齐到网格
课堂案例——圣诞礼品屋
使用“绘制 AP Div”按钮绘制层。使用“AP元素”控制面板选择层。使用“背景颜色”按钮改变层的背景颜色。
创建层
若想利用层来定位网页元素,先要创建层,再根据需要在层内插入其他表单元素。有时为了布局,还可以显示或隐藏层边框。
创建层
单击“插入”面板“布局”选项卡中的“绘制AP Div”按钮,在文档窗口中拖曳鼠标绘制。
将“插入”面板“布局”选项卡中的“绘制AP Div”按钮拖曳到文档窗口中。
将光标放置文档窗口中,选择“插入记录>布局对象>AP Div”命令。
如果需要连续绘制新的层?
单击“插入”面板“布局”选项卡中的“绘制AP Div”按钮,在文档窗口中,按住Ctrl键的同时拖曳鼠标左键绘制层。只要不放Ctrl键,就可以连续绘制新的层。
创建层
在默认情况下,每当用户创建一个新的层,都会使用DIV标志它,并将层标记显示到网页左上角的位置。
若要显示层标记?
编辑>首选参数>AP元素的锚点
查看>可视化助理>不可见元素
创建层
显示或隐藏层边框
若要显示或隐藏层边框,可选择“查看> 可视化助理> 隐藏所有”命令。
选择层
选择一个层
(1)利用层面板选择一个层。
窗口>AP元素
(2)在文档窗口中选择一个层。
单击层的边框
按住Ctrl+shift,在层中单击
单击选择柄