固定宽度布局剖析与制作方案.ppt

11.2.1 两列布局 图11.5 两列布局的网页 11.2.2 三列布局 （a） （b） 图11.6 “1-3-1”布局的网页及其示意图 11.2.3 多列布局 图11.7 使用多列布局的网页 11.2.4 布局结构的表达式与结构图 为了能够方便地表示各种网页结构，这里规定一套固定的表达方法来称呼各种布局结构。 图11.8所示的是最简单的布局形式，称为“1-1-1”布局，“1”表示一共1列，减号表示竖直方向上下排列。 图11.8 “1-1-1”布局 （a） （b） 图11.9 “1-2-1”布局和“1-3-1”布局 ? 图11.10 “1+(1?1)”布局 图11.11 “1? (1+(1-2)) ?1”布局 （a） （b） 图11.12 布局结构示意图 图11.13 “1?1?1”布局 图11.14 “1? (1+1) ?1”布局 ? 图11.15 “1? ((1?1)+1) ?1”布局 图11.16 “1? ((1? (1+1))+1) ?1”布局 图11.17 完成后的“1? ((1? ((1?2)+1))+1) ?1”布局结构图 11.3 单 列 布 局 图11.18 单列固定宽度的页面布局 11.4 “1-2-1”固定宽度布局 （a） （b） 图11.24 “1-2-1”布局的结构示意图 11.5 “1-3-1”固定宽度布局 图11.32 “1-3-1”布局 图11.33 “1-3-1”布局结构示意图 11.6 “1-((1-2)+1)-1”固定宽度布局 图11.34 “1? ((1?2)+1) ?1”布局效果 （a） （b） 图11.35 “1? ((1?2)+1) ?1”布局结构示意图 * 辽东学院信息技术学院 杨艳玲 第11章 固定宽度布局剖析与制作 向报纸学习排版思想 11.1 CSS排版观念 11.2 单列布局 11.3 “1-2-1”固定宽度布局 11.4 “1-3-1”固定宽度布局 11.5 “1-((1-2)+1)-1”固定宽度布局 11.6 CSS的排版是一种很新的排版理念，完全有别于传统的排版习惯。 它将页面首先在整体上进行div标记的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。 利用CSS排版的页面，更新起来十分容易，甚至连页面的拓扑结构都可以通过修改CSS属性来重新定位。 本章介绍固定宽度的网页布局，并给出一系列的实例。 11.1 向报纸学习排版思想 图11.1 8列方式的报纸布局 图11.2 6列方式的报纸布局 总之，可以从报纸的排版中学到很多经过多年积累下来的经验。 核心的思想是借鉴“网格”的布局思想，它具有如下优点。 （1）使用基于网格的设计可以使大量页面保持很好的一致性，这样无论是在一个页面内，还是在网站的多个页面之间，都可以具有统一的视觉风格，这是很重要的。 （2）均匀的网格以大多数认为合理的比例将网页划分为一定数目的等宽列，这样在设计中产生了很好的均衡感。 （3）使用网格可以帮助设计把标题、标志、内容和导航目录等各种元素合理地分配到适当的区域，这样可以为内容繁多的页面创建出一种潜在的秩序，或者称为“背后”的秩序。 报纸的读者通常并不会意识到这种秩序的存在，但是这种秩序实际上在起着重要的作用。 （4）网格的设计不但可以约束网页的设计，从而产生一致性，而且具有高度的灵活性。 在网格的基础上，通过跨越多列等手段，可以创建出各种变化的方式，这种方式既保持了页面的一致性，又具有风格的变化。 （5）网格可大大提高整个页面的可读性，因为在任何文字媒体上，一行文字的长度与读者的阅读效率和舒适度有直接的关系。 如果一行文字过长，读者在换行的时候，眼睛就必须剧烈的运动，以找到下一行文字的开头，这样既打断了读者的思路，又使眼睛和脖子的肌肉紧张，使读者疲劳感明显增加。 而通过使用网格，可以把一行文字的长度限制在适当的范围，使读者阅读起来