妙用dw图层与表格进行网页布局

作者:赵广复 来源:赛迪网 时间:2009-07-14 21:57:00 

使用图层可以像素为单位精确定位页面元素,并且可以将层放置在页面的任意位置。当把页面元素放入图层之中时,还可以控制哪个显示在前面、哪个显示在后面、哪个显示、哪个隐藏,可见,层的优点是很明显的。但是目前浏览器只有4.0以上的高版本才支持层,考虑到兼容性和修改时的方便,一般可在编辑网页时采用层布局或者部分页面采用层布局,而在发布网页时再将其转换为表格布局。

下面以Dreamweaver 4.0为例介绍图层与表格的相互转换操作。

将表格转换为图层

将表格转换为图层是为了调整网页布局时方便,具体操作步骤如下:

1、选中页面中欲转换为层的表格。
  2、单击菜单“Modify/Convert/Tables to Layers”,在弹出的对话框(如图1)中选择想要的选项。


Prevent Layer Overlaps防止层重叠选择此项可以在建立、移动层和调整层大小时防止层互相重叠。
Show Layer Palette显示层面板选择此项,在转换完成后显示层面板。
Show Grid显示网格选择此项,在转换完成后显示网格。
Snap to Grid吸附到网格选择此项,可借助网格来定位层。


3、单击OK按钮开始转换。




图层转换为表格

把图层转换为表格是为了与低版本的浏览器兼容,操作步骤如下:

1、选中页面中欲转换为表格的层。
  2、点击菜单“Modify/Convert/Layers to Table”,在弹出的对话框(如图2)中选择想要的表格布局选项。


Most Accurate最精确为每一层建一个表格单元,以及为保持层与层之间的间隔建立附加单元格。
Smallest:Collapse Empty Cells最小:压缩单元格指定如果n个层被定位在指定像素数之内,这些层的边缘应该对齐(选择此项生成的表格空行,空列最少)。
Use Transparent GIFS使用透明的GIF图像用透明的GIF图像填充表格的最后一行,这样可确保表格在所有浏览器中的显示相同。若选择此项,将不可能通过拖动生成的表格的列来改变表格的大小;不选择此项,转换成的表格中不包含透明GIF图像。
Center on Page在页面上居中使用生成的表格在页面上居中对齐。如果不选择此项,表格左对齐。


Layout区域各选项的含义同图1。

3、单击OK按钮开始转换。




转换时需注意的问题

1、将表格转换为图层时,空的表格单元不转换,表格之外的内容也被置于层中。

2、因为表格单元不会重叠,所以Dreamweaver不会把重叠的层转换为表格。如果计划把一个文档中的层转换为表格,就要在建立、移动层和调整层大小时防止层发生重叠。

3、要防止层重叠,可在层面板中选择Prevent Overlaps选项。但如果是在建立了重叠层之后才选择了此选项,不会改变以前发生的层重叠,此时只有通过移动层的方法把重叠的层分开。

4、即使选择了防止层重叠选项,有些操作也会使层发生重叠。比如使用插入菜单插入层,在属性检查器中输入层边距等。总之,如果发生了层重叠,就要在文档窗口拖动重叠的层,使它们分离开来。

在设计网页时,为使页面布局整齐、美观,需要对网页中元素进行定位。在Dreamweaver中,除了可以使用表格对页面元素进行定位之外,还有一种新的网页元素定位技术,那就是使用图层。


标签:Dreamweaver,表格,布局
0
投稿

猜你喜欢

  • 有关于IE8 Beta 1两个提醒

    2008-05-15 12:32:00
  • Microsoft VBScript 运行时错误 错误 800a0005 无效的过程调用或参数: chr

    2011-03-09 11:03:00
  • ASP使用缓存方法及缓存类详解

    2008-02-15 08:36:00
  • 段正淳的css笔记(5)未知图片垂直居中的方法

    2007-11-01 22:06:00
  • CSS+asp仿迅雷人气指数

    2009-08-03 14:11:00
  • SQL Server数据库超级管理员账号防护

    2008-12-22 16:30:00
  • asp操作Excel类源码

    2009-12-25 19:01:00
  • 简单代码实现可输入的下拉框功能(select)

    2008-10-20 19:52:00
  • 讲解SQL Server 2005数据库的同义词Bug

    2008-11-28 14:22:00
  • 二级域名原理以及asp实现程序

    2007-08-03 13:08:00
  • 一个拖动层和Onmouse自动下拉效果

    2007-10-08 21:25:00
  • 浏览器中的内存泄露

    2008-05-03 16:53:00
  • 我的“Orcas初览”讲座

    2007-09-23 12:53:00
  • phar绕过phar与HALT实现文件上传功能

    2023-05-25 06:47:36
  • ASP Recordset 分页显示数据的方法(修正版)

    2011-04-10 10:42:00
  • 兼容Firefox的点击复制js代码

    2008-08-28 12:17:00
  • ajax实现Dig程序中的投票

    2008-01-22 17:27:00
  • CSS盒模型

    2009-06-09 14:23:00
  • WEB前端开发规范文档

    2010-10-19 12:32:00
  • mysql myisam 优化设置

    2010-03-25 10:18:00
  • asp之家 网络编程 m.aspxhome.com