网页设计基础-层.ppt

第八讲 使用层 (AP元素)•创建和设置层 •层的基本操作 •层的基本操作实例 •层和表格间的相互转换 •时间轴 •层的应用实例一、创建和设置层l层的概念Ø层是一种具有透明性、能任意定位、可重叠、浮动的独 立载体Ø利用层，可以在网页的任意位置添加内容信息，或对网 页元素进行精确定位Ø在层中可以添加文本、图像、表格和多媒体等Ø层在页面中可以自由移动、按指定顺序排放、显示或隐 藏通常和行为或脚本语言配合使用，实现特殊效果l创建层 – 利用菜单创建 l打开网页，光标定位（嵌套层定位于层中） • 选择菜单[插入][布局对象][层] 在光标位置即得到一默认大小的层200pxX115px一、创建和设置层– 利用工具创建 l打开网页 • 选择[插入]工具栏[布局对象][绘制层]• 在所需位置拖放鼠标l设置层属性 • 选中层，[属性]窗口 • 选择层参数：层编号、边距、大小、Z轴顺序、背景、 可见性、溢出、剪辑处理等 可见性：default(默认)、inherit(继承)、visible(可见 )、hidden(隐藏) 溢出：visible(可见)、hidden(隐藏)、scroll(滚动条) 、auto(自动)二、层的基本操作l [层]面板的使用F2打开层面板层的 操作选定 （单击某一层）调整z轴顺序（鼠标按下拖放 ）对齐（shift+单击选中所有层， [修改][排列顺序]）显示/隐藏层 （单击某层的第一列 ）重命名 （双击层名称）三、层的基本操作实例l 打开Ch16\16.1.4.html l 在网页空白处插入一个层 l 在层中插入图像dress.jpg l 设置层属性：左/上为35pxX85px，宽/高为 218pxX220px l 打开［层］面板，设置所有层为可见 l 将apDiv3调至第二层 l 设置apDiv1、 apDiv2、 apDiv3同宽度，且 上缘对齐 l 预览 l 保存四、层和表格间的相互转换l由于层所具有的灵活性是表格无法比拟的，因此 可以通过在层中添加内容，使其布局在页面中的 任何位置，而且不会使其他页面元素受到影响。

l层转换为表格 ：菜单[修改][转换][层到表格]l表格转换为层：菜单[修改][转换][表格到层]五、时间轴l利用层与时间轴的结合创建简单的位移动画，即沿 着一条轨迹移动层 l[时间轴]面板用于显示层与图像随时间变化的属性 l选择[窗口][时间轴]命令，打开[时间轴]面板后退 回放 播放 帧数 自动播放 循环播放六、层的应用实例l创建浮动广告动画 – 打开网页 Ch16\16.3.2.html– 插入层，在层中插入图像，调整层大小（略） – 将层移动到动画的起始位置 – 打开[时间轴]面板，将层拖曳到[动画通道]中的第一帧上 – 将时间轴上的最后一帧拖至第90帧处，再将层移动到动 画的结束位置 – 调整动画：每隔15帧插入一关键帧（快捷菜单），并移动 层的位置 – 选择[时间轴]面板中的[自动播放]和[循环播放]– 预览 – 保存上机操作• 利用层定位网页元素（P457）• 创建网页浮动广告动画（P462 ）。