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

好酷屋教程网小编为您收集和整理了网页设计中表格和层排版的使用技巧的相关教程：表格是网页设计中不可缺少的重要元素。使用表格排版可以规范整个页面，将页面中文字、图片、动画等众多元素有条理地统一组织起来。层是一种新的CSS定位技术，它具备许多表格所不具备的特点，比如可以重叠，移动方

　　表格是网页设计中不可缺少的重要元素。使用表格排版可以规范整个页面，将页面中文字、图片、动画等众多元素有条理地统一组织起来。层是一种新的CSS定位技术，它具备许多表格所不具备的特点，比如可以重叠，移动方便，可以设为隐藏，还可以添加许多行为来丰富页面效果。所以，很多情况下，可以同时使用表格与层搭配进行排版，既可以使用到表格的整体规范性，又可以利用到层的灵活性与丰富功能，从而设计出更加精彩的页面。　　　　使用表格和层排版　　　　在Dreamweaver网页设计中，排版的方法有很多种，其中使用表格和层排版是基本的方法，通过设计模式可以轻松完成，简单易学，是大家常用的方法，对网页排版起到了重要的作用。　　

　　表格排版　　　　在制作网页时，要想将文本、图片等组织得美观，有条理，就需要排版人员头脑里有一个整体布局的概念。在Dreamweaver中，安排页面内容布局主要是依靠表格来完成的。通过表格的相互嵌套和合并、拆分，可以将自己的构思完整地表现出来。表格是网页设计制作时不可缺少的重要元素，它以简洁明了和高效快捷的方式将数据、文本、图片、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。使用表格排版的页面，在不同平台、不同分辨率的浏览器里都能保持其原有的布局，且在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。表格排版比较规范，整体性强，一般的网页排版中都会使用表格进行整体的排版，但其表现比较中规中矩，不会有太多其他的丰富功能。　　　　层转换成表格排版　　　　前面提到，层与表格都可以用来在页面中定位其他对象，它们有时可以互相取代，但两者并不完全相同，有时就必须使用其中的一种。比如，当需要用到表格来排版页面，但又觉得表格的添加比较烦琐，而层比较灵活，这时候，排版者可以使用层到表格的转换来实现。具体的操作步骤是：　　　　（1）首先在层面板中勾选“防止重叠”选项，这样绘制层的时候就不会出现叠加和嵌套的现象；　　　　（2）在页面中绘制若干个层，把页面中的各元素添加到层里面；　　　　（3）把每个层自由地排列到页面中各个相应的位置；　　　　（4）使用层排版结束之后，要将层排版转化为表格排版，选择“修改”—“转换”—“层到表格”命令，在对话框中设置好相应的参数，确定之后层就会转换成对应的表格。这种排版方法在排列对象时比较灵活一点，但有时也会产生一些多余的单元格。当然，这种方法一般适用于不太复杂的页面的排版，对于比较复杂的图文混排页面，最好还是采用传统的表格排版方法。　　　　排版时容易出现的问题及解决方法　　　　整体表格排版出现的问题　　　　有很多人在网页中用表格排版时习惯使用一个大表格，然后在大表格中嵌入一个个小表格，认为这保持了排版的整体性，其实这个习惯是不好的。一个大而长的表格在浏览器中打开时会加重浏览器的负担，浏览器一般是等待整个表格的内容都接收到以后才显示这个表格的内容，如果一个很长的页面使用一个大表格排版，那么这个网页显示速度就会比较慢，使得页面呈现的时间大大加长，很多时候有些网页的访问者会失去等待的耐心而放弃浏览这个网页。解决的方法是：拆分表格，将大表格化整为零，把表格打散，并要尽可能地避免表格的层层嵌套。注意，拆分后的表格的宽度要设置为相等，这样表格的排版效果和拆分前相比并没有改变，在浏览器中呈现时，页面会从上至下一个个表格呈现出来，明显加快了页面打开的速度。　　　　层排版出现位置偏差　　　　在页面中使用表格和层混合排版时，先加入表格进行页面的整体布局，然后在局部加入层。通常情况下，层加入到页面中之后是游离在表格之上的，它虽然移动方便，但在页面中的位置是固定的，由于表格的宽度是固定像素，设置在窗口中居中显示，所以当窗口变大时，表格会产生一个相对位移，但是层却还在原位，没有跟着相对位移，因而出现层与表格中其他内容位置上的偏差。所以，层排版的灵活性同样也体现了一定的不稳定性。要想办法使层与页面中其他元素一样，能够随浏览器的变化而产生相对位置上的变化。这个问题解决之后，接下来就可以在页面中利用层的一些行为来丰富页面。　　　　结语　　　　总之，网页设计中，内容虽然很重要，但是如果只有好的内容而没有精美的排版以及合理的布局，那么再好的内容也很难引起浏览者的阅读浏览兴趣。通过合理的、有新意的页面布局，特别是主页设计，才可以将网页的内容完美地呈现在浏览者面前。所以，排版者在平时要多参考他人优秀的网页排版作品，加强排版练习，这样才可能创造更漂亮的网页排版。

以上就是好酷屋教程网小编为您收集和整理的网页设计,使用技巧,表格,标签相关内容，如果对您有帮助，请帮忙分享这篇文章^_^

本文来源： https://www.haoku5.com/shenghuo/65dbf1194d1f947d960684d1.html

相关推荐