利用层精确定位网页元素.ppt

第十一章利用层精确定位网页元素 2011 4 26 学习要点 层的基础知识创建层层的基本操作应用层排版 如果您觉得用表格定位页面元素太难掌握 不妨尝试利用层 层的好处是可以放置在页面上任何位置 层是一种页面元素 可以包含文本 图像或是其他HTML文档 可以使页面上的元素进行重叠或复杂的布局 使用DW8可以方便地在页面上创建层 并精确地定位层 可以对层进行选择 移动 调整大小和对齐等操作 11 1层的基础知识 最初的页面排版是完全平面式的 在HTML2 0被应用以后 表格得到了广泛的应用 设计者可以精确地布置页面上的元素 但是随着页面复杂程度的增加 设计者越想精确布局 页面的表格就越复杂 从而给设计者和浏览者都带来了一定的困难 设计者无法随心所欲的放置页面元素 而表格的复杂化带来了浏览器解释时间的增加 使用户等待时间加长 为了解除这些困扰 W3C在新的CSS中包含了一个绝对定位的特性 它允许设计者将页面上的某个元素定位到任何地方 而且除了平面上的并行定位 还增加了三维空间的定位z index 因为z index定义了的顺序 类似于图形设计中使用的图层 所以拥有了z index属性的元素被的称为层 层的出现使网页从二维平面拓展到三维 可以使页面上元素进行重叠和复杂的布局 层的主要功能如下 有了层以后可以将元素置于层中 因为层可以重叠 所以就产生了许多重叠效果 可以利用层来精确定位网页元素 它可以包含文本 图像甚至其他层 凡是HTML文件可包含的元素均可包含在层中 层还有非常特殊的功能 就是通过应用时间轴可以使其移动和变换 这样在层中放置一些图片或文本 就能够实现动画效果 层可以转换为表格 为不支持层的浏览器提供解决方法 层可以显示和隐藏 利用这一功能可以实现网页导航中的下拉菜单 在HTML中 层的描述如下 层一般放置在标签中 但它也可以是标签 只是在跨浏览器的情况下 标签有更好的兼容性 虽然IE和NC都支持这两个标签 11 2创建层 DW8可以方便的在网页上创建层 并精确的定位层的位置 创建层主要有两种方法 使用插入菜单使用插入栏注意 当在面板中勾选 防止重叠 选项后 可以在现有层前面创建层 在现有层上移动层或调整层大小或将某个层嵌套在现有层中 11 3设置层的属性 选把一个层后 就可以设置层的属性了 层编号 层的名称 用于识别不同的层左 层的左边界距离浏览器窗口左边界的距离 上 层的上边界距离浏览器窗口上边界的距离 宽 层的宽高 层的高Z轴 层的Z轴顺序 背景图像 层的背景图可见性 层的显示状态 包括default inherit visible和hidden四个选项背景颜色 层的背景颜色剪辑 用来指定层的哪一部分是可见的 输入的数值是距离层4个边界的距离 溢出 如果层里面的文字太多或图像太大 层的大小不足以全部显示的时候 有以下选择 Visible 超出的部分照样显示Hidden 超出的部分隐藏Scrool 不管是否超出 都显示流动条Auto 有超出时 才出现滚动条 11 4层的基础操作 利用层可以精确的定位网页元素 本节通过一个简单的实例讲述如何选择层 设置层的背景颜色 设置层的可见性等基本操作 步骤1在网页文档中单击选中层layer1 在属性面板中将 左 上 宽 高 分别设置为191px 82px 78px 156px 提示 选择层有如下方法 单击文档窗口左上角的层标签来选定层将光标置于层内 然后在文档窗口底边标签条中选择标签单击层的边框线单击层面板上的层名称如果要选定两个以上的层 只要按住shift键 然后逐个单击层手柄 就将层同时选定 步骤2单击选中层layer2 在属性面板中从 背景颜色 中选择相应的颜色 步骤3在属性面板中的 可见性 选择hidden选项 步骤4选择 窗口 层 命令 打开 层 面板 在层layer1前面双击 出现图标 一个页面中可以画出很多的层 这些层都会列在层面板中 层之间也可以相互重叠 层面板可以通过菜单 窗口 菜单 选 层 打开 这里我们需要对几个概念进行解释 层有隐藏和显示的属性 这是层的一个重要属性和以后说到的行为相结合就变成了重要的参数 单击层面板列表的左边 可以打开关闭眼睛 眼睛睁开和关闭表示层的显示和隐藏 层还有一个概念就是层数 层数决定了重叠时哪个层在上面哪个层在下面 比如层数为 的层在层数为 的层的上面 改变层数就可以改变层的重叠顺序 层面板上面还有一个参数就是防止层重叠 一旦选中 页面中层就无法重叠了 层还有一种父子关系也就是隶属关系 在层面板中是这样表示的 图中Layer2挂在Layer1的下面 Layer1为父层 Layer2为子层 在页面中拖动Layer1 Layer2也跟着动起来 因为他们已经链在一起了 并且Layer2隶属于Layer1 父层移动会影响到子层 移动layer2层 Layer1层不动 也就是子层不会影响到父层 要建立这样的一种隶属关系方法很简单 在层面板中按Ctrl键将子层拖拽到父层即可 11 5应用层排版 虽然通过层定位网页元素比表格方便很多 但是由于受到浏览器版本的限制 不是所有的浏览器都支持层 只有IE4 0以上的版本才能支持 11 5 1将层转换为表格 一般先使用层将元素精确定位 然后再将层转换为表格 具体操作步骤如下 在网页中单击选中层layer1 选择 修改 转换 层到表格 命令 弹出 转换层为表格 对话框 转换层为表格 对话框主要有以下参数 最精确 以精确方式转换 为每一层建立一个单元格 并且创建所有附加单元格以保证各单元格之间的距离 最小 以最小方式转换 去掉宽度和高度小于指定像素数目的空单元格 使用透明GIF 用来定义是否使用透明GIF图像 置于页面中央 选择该选项 转换的表格将在页面中居中对齐 否则将左对齐 防止层重叠 该选项一般要选择 如果有层发生重叠 将无法进行转换工作 显示层面板 显示网格 靠齐到网格这3个选项可根据需要勾选 步骤2 单击确定 层转换为表格后的效果 11 5 2表格转换为层 如果要改变网页中各元素的布局 使用表格灵活性受到一定的限制 最灵活的方法就是将元素置于层中 然后通过移动层来灵活改变网页的布局 这可能需要将表格转换为层 具体操作步骤如下 步骤1 在上例的基础上 选中选换后的表格 选择 修改 转换 表格到层 命令 弹出 转换表格到层 对话框 步骤2 单击确定 将表格转换为层 11 6实战演练 本章主要讲述如何创建层 层的基本操作 层和表格的互相转换等 下面通过两个实验讲述层的应用利用层布局网页版面利用层制作网页下拉菜单 补充 时间轴 时间轴实根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面 在时间轴中包含了制作动画时所必须的各种功能 1 时间轴的各项功能 1 时间轴弹出菜单 表示当前的时间轴名称 2 时间轴指针 在界面上显示当前位置的帧 3 不管时间轴在哪个位置 一直移动到第一帧 4 表示时间指针的当前位置 5 表示每秒显示的帧数 默认值时15帧 增加帧数值 则动画播放的速度将加快 6 自动不放 选中该项 则网页文档中应用动画后自动运行 7 LOOP 循环 选中该项 则继续反复时间轴上的动画 8 行为通道 在指定帧中选选择要运行的行为 9 关键帧 可以变化的帧 10 图层条 意味着插入了 层 等对象 11 图层通道 它是用于编辑图层的空间 2 在DW8中显示时间轴 选择菜单栏的窗口 时间轴或按快捷键Alt F9 则显示时间轴 3 创建时间轴动画 时间线只能移动分层对象 如果想移动文本或图像之类的对象 可以将其放在层中 1 打开文件 把光标放到页面左上方的位置 在插入面板选择布局 绘制层 创建六个层 分别输入文字 小 木 web 欢 迎 你 将图层排列在适当的位置 2 打开时间轴 选择层1后 拖动到时间轴的第一行上 3 用同样的方法 把包含有其它文字的层也根据文字的顺序拖动到时间轴的第2 6行上 4 为了减慢文字移动的速度 把时间轴中的15帧全部扩展为25帧 5 在时间轴中选择Layer1的第一帧 在属性面板的顶端坐标值 T 中输入 50 这样 可以把文字放置到上侧 6 用同样的方法选择其余层的第一帧后 把顶端坐标值 T 统一设定为 50 7 为了每个一段时间下落一个文字 从第二个动画条开始向后移动10帧 勾选 自动播放选项 8 按F12浏览效果