网页设计中表格和层排版的使用技巧论文

　　摘要：文章指出，表格是网页设计中不可缺少的重要元素。使用表格排版可以规范整个页面，将页面中文字、图片、动画等众多元素有条理地统一组织起来。层是一种新的CSS定位技术，它具备许多表格所不具备的特点，比如可以重叠，移动方便，可以设为隐藏，还可以添加许多行为来丰富页面效果。所以，很多情况下，可以同时使用表格与层搭配进行排版，既可以使用到表格的整体规范性，又可以利用到层的灵活性与丰富功能，从而设计出更加精彩的页面。

　　关键词：Dreamweaver；表格；层；排版

　　作者简介：龙敏敏（1979-），女，湖南祁东，本科，讲师；研究方向：计算机教育教学

　　1Dreamweaver网页设计工具简介

　　浏览网页已经是现代社会人们生活中的一个重要组成部分，网页作为网络信息传播的主要载体，其设计也被大家所关注。网页设计的软件有多种，Dreamweaver是著名的“所见即所得”的可视化网站开发工具，是国内外普遍应用的专用网页设计软件。它被称为“织梦者”，即它的英文单词所表达的意思。Dreamweaver不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制。它是一个集网页创作和站点管理两大利器于一身的超重量级创作工具。网页设计的重点是版面的设计，即如何将所有的素材按照设计要求精美地罗列在页面中。所以，如何排版成为网页设计中的关键。

　　2使用表格和层排版

　　在Dreamweaver网页设计中，排版的方法有很多种，其中使用表格和层排版是基本的方法，通过设计模式可以轻松完成，简单易学，是大家常用的方法，对网页排版起到了重要的作用。

　　2.1表格排版

　　在制作网页时，要想将文本、图片等组织得美观，有条理，就需要排版人员头脑里有一个整体布局的概念。在Dreamweaver中，安排页面内容布局主要是依靠表格来完成的。通过表格的相互嵌套和合并、拆分，可以将自己的构思完整地表现出来。表格是网页设计制作时不可缺少的重要元素，它以简洁明了和高效快捷的方式将数据、文本、图片、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。使用表格排版的页面，在不同平台、不同分辨率的浏览器里都能保持其原有的布局，且在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。表格排版比较规范，整体性强，一般的网页排版中都会使用表格进行整体的排版，但其表现比较中规中矩，不会有太多其他的丰富功能。

　　2.2层排版

　　层是CSS中的定位技术，在Dreamweaver中可对其可视化操作。文本、图像、表格等元素只能固定其位置，不能相互叠加在一起，使用层功能，可以将其放置在网页文档内的任何一个位置，还可以按顺序排放网页文档中的其他构成元素。层体现了网页技术从二维空间向三维空间的一种延伸。层具有很多表格所不具备的特点，比如可以重叠，便于移动，可设为隐藏，还能为层添加一些行为，使页面具有更丰富的变化等。这些特点有助于设计思维不受局限，从而发挥更多的想象力。由于它是一种新的CSS定位技术，层在具有上述优点的同时，也存在着一些不可避免的缺陷，比如兼容性、定位问题。所以，目前比较大型的网站不会单独使用层来排版。

　　2.3层转换成表格排版

　　前面提到，层与表格都可以用来在页面中定位其他对象，它们有时可以互相取代，但两者并不完全相同，有时就必须使用其中的一种。比如，当需要用到表格来排版页面，但又觉得表格的添加比较烦琐，而层比较灵活，这时候，排版者可以使用层到表格的转换来实现。具体的操作步骤是：（1）首先在层面板中勾选“防止重叠”选项，这样绘制层的时候就不会出现叠加和嵌套的现象；（2）在页面中绘制若干个层，把页面中的各元素添加到层里面；（3）把每个层自由地排列到页面中各个相应的位置；（4）使用层排版结束之后，要将层排版转化为表格排版，选择“修改”—“转换”—“层到表格”命令，在对话框中设置好相应的参数，确定之后层就会转换成对应的表格。这种排版方法在排列对象时比较灵活一点，但有时也会产生一些多余的单元格。当然，这种方法一般适用于不太复杂的页面的排版，对于比较复杂的图文混排页面，最好还是采用传统的表格排版方法。

　　3排版时容易出现的问题及解决方法

　　3.1整体表格排版出现的问题

　　有很多人在网页中用表格排版时习惯使用一个大表格，然后在大表格中嵌入一个个小表格，认为这保持了排版的整体性，其实这个习惯是不好的。一个大而长的表格在浏览器中打开时会加重浏览器的负担，浏览器一般是等待整个表格的内容都接收到以后才显示这个表格的内容，如果一个很长的页面使用一个大表格排版，那么这个网页显示速度就会比较慢，使得页面呈现的时间大大加长，很多时候有些网页的访问者会失去等待的耐心而放弃浏览这个网页。解决的方法是：拆分表格，将大表格化整为零，把表格打散，并要尽可能地避免表格的层层嵌套。注意，拆分后的表格的宽度要设置为相等，这样表格的排版效果和拆分前相比并没有改变，在浏览器中呈现时，页面会从上至下一个个表格呈现出来，明显加快了页面打开的速度。

　　3.2层排版出现位置偏差

　　在页面中使用表格和层混合排版时，先加入表格进行页面的整体布局，然后在局部加入层。通常情况下，层加入到页面中之后是游离在表格之上的，它虽然移动方便，但在页面中的位置是固定的，由于表格的宽度是固定像素，设置在窗口中居中显示，所以当窗口变大时，表格会产生一个相对位移，但是层却还在原位，没有跟着相对位移，因而出现层与表格中其他内容位置上的偏差。所以，层排版的灵活性同样也体现了一定的不稳定性。要想办法使层与页面中其他元素一样，能够随浏览器的变化而产生相对位置上的变化，排版者可以将层嵌入到表格的单元格中，使层成为单元格中的一个元素，就像插入到单元格中的文本、图片一样，层就是属于单元格中的对象，当浏览器窗口大小变化时，表格必然会产生相对的变化，层也就会随着单元格的位置变化而产生相应的变化，这样就不会出现页面中元素相对位置的偏差。整个排版会变得很规范，就相当于是利用表格整体排版，层只是嵌入到单元格中的一个元素，又可以使用到层的丰富功能，两全其美。解决的方法是：先使用表格对整个网页的整体进行规划，然后添加一个层到表格中的某个单元格中。添加的方法：直接将工具栏中的层拖动到单元格中，这样该层就成为该单元格的嵌入层，该层在单元格中默认是靠左对齐，垂直方向居中，而且在水平方向是不能移动的，只要移动便会脱离该单元格，即成为普通层，不会是单元格的嵌入对象，如果在水平方向一定要移动的话，可以将该单元格的位置进行调整，进而单元格中的嵌入层也会随之移动。而在垂直方向上的位置是可以调整的，不过不要用鼠标拖动，这样容易使层脱离单元格，可以选中层通过方向箭上下移动或将该单元格垂直方向上的位置由“居中”改为“顶端”或“底端”。采用这种方法设置层后，无论窗口大小怎么变化，层始终是跟着单元格位置变化而变化，因而不会出现之前那种位置上的偏差。这个问题解决之后，接下来就可以在页面中利用层的一些行为来丰富页面。

　　4结语

　　总之，网页设计中，内容虽然很重要，但是如果只有好的内容而没有精美的排版以及合理的布局，那么再好的内容也很难引起浏览者的阅读浏览兴趣。通过合理的、有新意的页面布局，特别是主页设计，才可以将网页的内容完美地呈现在浏览者面前。所以，排版者在平时要多参考他人优秀的网页排版作品，加强排版练习，这样才可能创造更漂亮的网页排版。

　　[参考文献]

　　[1]李爱军.网页的排版布局[J].办公自动化：综合版，2009（7）：29-30.

　　[2]艺博，张明真.网页设计与制作——MacromediaDreamweaver8[M].北京：高等教育出版社，2007.

　　[3]王锦.DreamweaverMX2004中文版基础教程[M].北京：机械工业出版社，2005.