第11章固定宽度布局与制作.ppt

小结 本章以几种不同的布局方式介绍了如何灵活地运用CSS的布局性质，使页面按照需要的方式进行排版。重点掌握以下3个方面。 （1）页面结构的分析方法。只有先正确地分析出布局结构的表达式，然后画出结构示意图，才能正确地进行下一步编写代码的工作。 （2）对横向并列的div使用“绝对定位法”进行布局，并了解它的缺陷及其产生原因。 （3）对横向并列的div使用“浮动法”进行布局。 第11章 固定宽度布局剖析与制作 本章简介： CSS的排版是一种很新的排版理念，完全有别于传统的排版习惯。它将页面首先在整体上进行div标记的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。利用CSS排版的页面，更新起来十分容易，甚至连页面的拓扑结构都可以通过修改CSS属性来重新定位。 向报纸学习排版思想 11.1 CSS排版观念 11.2 单列布局 11.3 “1-2-1”固定宽度布局 11.4 “1-3-1”固定宽度布局 11.5 “1-((1-2)+1)-1”固定宽度布局 11.6 11.1　向报纸学习排版思想 在网页出现之前大约400年，报纸就开始发展并承担起向大众传递信息的使命。经过400余年的发展，报纸已经成为世界上最成熟的大众传媒载体之一。网页与报纸在视觉上有着很多类似的地方，因此网页的布局和设计也可以把报纸作为非常好的参考和借鉴。 8列方式的报纸布局 6列方式的报纸布局 11.2　 CSS排版观念 在过去使用表格布局的时候，在设计的最开始阶段就要确定页面的布局形式。由于使用表格来进行布局，一旦确定下来就无法再更改了，因此有极大的缺陷。使用CSS布局则完全不同，设计者首先考虑的不是如何分割网页，而是从网页内容的逻辑关系出发，区分出内容的层次和重要性。然后根据逻辑关系，把网页的内容使用div或其他适当的HTML标记组织好，再考虑网页的形式如何与内容相适应。 实际上，即使是很复杂的网页，也都是一个模块一个模块逐步搭建起来的。下面以一些访问量较大的实际网站为例，看看它们都是如何布局的，有哪些布局形式。 11.2.1　两列布局 一个典型的两列布局的页面。这种布局形式几乎是网站最简单的布局形式了。两列布局中，通常一个侧列比较窄，用于放置目录等信息，另一个宽列则用于展示主要内容。这种布局形式的结构清晰，对访问者的引导性很好。 两列布局的网页 11.2.2　三列布局 ESPN是著名体育网站，它也是最早开始使用CSS布局的大型网站之一。 “1-3-1”布局的网页及其示意图 11.2.3　多列布局 纽约时报（The Nev York Times）网站是一个新闻类的知名站点，它具有深厚的报纸传统，因此它的布局带有非常明显的报纸排版风格。列数很多，看这个页面就像在看报纸，各个分栏会在适当位置合并，适应于不同类别的内容。 使用多列布局的网页 11.2.4　布局结构的表达式与结构图 为了能够方便地表示各种网页结构，这里规定一套固定的表达方法来称呼各种布局结构。 “1-1-1”布局 11.3　单 列 布 局 这显然是最简单的一种布局形式。 单列固定宽度的页面布局 11.3.1　放置第一个圆角框 先在页面中放置第一个圆角框，HTML代码如下： body div class=rounded h2Page Header/h2 div class=main p 这是一行文本，这里作为样例，显示在布局框中。br / 这是一行文本，这里作为样例，显示在布局框中。 /p /div div class=footer p 查看详细信息 /p /div /div /body 11.3.2　设置圆角框的CSS样式 通过CSS样式设置圆角效果。 放置第一个圆角框 11.3.3　放置其他圆角框 接下来，将放置的圆角框再复制出两个，并分别设置id为“content”和“footer”，分别代表“内容”和“页脚” 。 实现了单列布局的效果 11.4　 “1-2-1”固定宽度布局 现在来制作最经常用到的“1-2-1”布局 。 “1-2-1”布局的结构示意图 11.4.1　创建基本代码 将上节实例另存为一个新的文件。在HTML中复制出一个新的content部分，并将其id设置为side。然后在它们的外面套一个div，命名为container 。 “1-2-1”布局准备工作完成后的效果 11.4.2　 绝对定位法 为了使content能够使用绝对定位，应该选择container这个div作为定位基准。因此将#contatiner的position属性设置为relative，使它成为下级元素的绝对定位基准，然后将content这个d