搜索
CSS的排版是一种很新的排版理念，完全有别于传统的排版习惯。它将页面首先在整体上进行div标记的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。利用CSS排版的页面，更新起来十分容易，甚至连页面的拓扑结构都可以通过修改CSS属性来重新定位。本章介绍固定宽度的网页布局，并给出一系列的实例。1向报纸学习排版思想图8列方式的报纸布局图6列方式的报纸布局总之，可以从报纸的排版中学到很多经过多年积累下来的经验。核心的思想是借鉴“网格”的布局思想，它具有如下优点。（1）使用基于网格的设计可以使大量页面保持很好的一致性，这样无论是在一个页面内，还是在网站的多个页面之间，都可以具有统一的视觉风格，这是很重要的。（2）均匀的网格以大多数认为合理的比例将网页划分为一定数目的等宽列，这样在设计中产生了很好的均衡感。（3）使用网格可以帮助设计把标题、标志、内容和导航目录等各种元素合理地分配到适当的区域，这样可以为内容繁多的页面创建出一种潜在的秩序，或者称为“背后”的秩序。报纸的读者通常并不会意识到这种秩序的存在，但是这种秩序实际上在起着重要的作用。（4）网格的设计不但可以约束网页的设计，从而产生一致性，而且具有高度的灵活性。在网格的基础上，通过跨越多列等手段，可以创建出各种变化的方式，这种方式既保持了页面的一致性，又具有风格的变化。（5）网格可大大提高整个页面的可读性，因为在任何文字媒体上，一行文字的长度与读者的阅读效率和舒适度有直接的关系。如果一行文字过长，读者在换行的时候，眼睛就必须剧烈的运动，以找到下一行文字的开头，这样既打断了读者的思路，又使眼睛和脖子的肌肉紧张，使读者疲劳感明显增加。而通过使用网格，可以把一行文字的长度限制在适当的范围，使读者阅读起来既方便，又舒适。如果把报纸排版中的概念和CSS的术语进行对比，如图11.3所示。板块列缝内容Padding盒子Margin图报纸排版术语与CSS属于对比（a）（b）图报纸排版中，列可以灵活地组合2CSS排版观念在过去使用表格布局的时候，在设计的最开始阶段就要确定页面的布局形式。由于使用表格来进行布局，一旦确定下来就无法再更改了，因此有极大的缺陷。使用CSS布局则完全不同，设计者首先考虑的不是如何分割网页，而是从网页内容的逻辑关系出发，区分出内容的层次和重要性。然后根据逻辑关系，把网页的内容使用div或其他适当的HTML标记组织好，再考虑网页的形式如何与内容相适应。实际上，即使是很复杂的网页，也都是一个模块一个模块逐步搭建起来的。下面以一些访问量较大的实际网站为例，看看它们都是如何布局的，有哪些布局形式。2.1两列布局图两列布局的网页2.2三列布局（a）（b）图“1-3-1”布局的网页及其示意图2.3多列布局图使用多列布局的网页2.4布局结构的表达式与结构图为了能够方便地表示各种网页结构，这里规定一套固定的表达方法来称呼各种布局结构。图11.8所示的是最简单的布局形式，称为“1-1-1”布局，“1”表示一共1列，减号表示竖直方向上下排列。如何实现一下的布局结构图图“1-1-1”布局（a）（b）图“1-2-1”布局和“1-3-1”布局图“1+(1−1)”布局图“1−(1+(1-2))−1”布局（a）（b）图布局结构示意图图“1−1−1”布局图“1−(1+1)−1”布局图“1−((1−1)+1)−1”布局图“1−((1−(1+1))+1)−1”布局图完成后的“1−((1−((1−2)+1))+1)−1”布局结构图3单列布局图单列固定宽度的页面布局4“1-2-1”固定宽度布局contentsidepagefooterheadercontentcontentsidepagefooterheadercontainer（a）（b）图“1-2-1”布局的结构示意图11.5“1-3-1”固定宽度布局图“1-3-1”布局contentcontentsidepagefooterheadercontainernavi图“1-3-1”布局结构示意图6“1-((1-2)+1)-1”固定宽度布局图“1−((1−2)+1)−1”布局效果pagefootercol-abannersidecol-bheadercontainercontentcolumns（a）（b）图“1−((1−2)+1)−1”布局结构示意图