利用Div+CSS布局网.ppt

第10章 利用Div+CSS布局网页,CSS布局与table表格式布局是两种完全不同的布局方式，什么样的方式才能算得上是CSS布局呢？本章将着重进行讲解。DIV是XHTML中指定的，专门用于布局设计的容器对象。本章主要讲解CSS布局，Div则是这种布局方式的核心对象。,10.1 网站布局概述,网站的布局不是盲目地在网页里面罗列各种构成要素。怎么样才能达到网页构成的目的，怎么样才能使网站看起来既美观又实用，这是我们每一个网页布局设计者首先应该考虑的问题。如果网页布局不合理，则会在向浏览者传达网页内容的时候发生困难，也不会让人对其产生兴趣。因此，?四芄簧杓瞥黾让拦邸掠保质褂梅奖愕耐巢季郑颐怯斜匾喽?参考别人的布局方法。我们应该在仔细研究别人优秀的布局方式的同时，对如何能在有限的空间里把页面中丰富多彩的内容更加有机地搭配起来，如何才能营造出一种良好的视觉效果这些问题进行认真思考。,10.2 CSS布局思路,在过去使用表格进行布局时，设计的最开始阶段就要确定页面的布局形式。由于使用表格来进行布局，一旦确定下来就无法再更改了，因此有很大的缺陷。使用CSS布局则完全不同，设计者首先考虑的不是如何分割网页，而是从网页内容的逻辑关系出发，区分出内容的层次的重点。然后根据逻辑关系，把网页的内容使用或其他的HTML标记组织好，再考虑网页的形式如何与内容相适应。下面简单介绍几种常见的网页布局形式。,10.2.1 两列布局,图10.1是一个典型的两列布局页面，这样的页面通常是：一列较宽，用于展示页面主要内容；一列较窄，用于放置公告板、用户登陆框、目录等信息。,10.2.2 三列布局,图10.2所示为一个典型的三列布局页面，这种布局方式主要出现在网站的首页或频道页。,10.2.3 多列布局,搜狐网是一个很有名的门户网站，该网站经营综合性业务、社区、无线等增值性服务。图10.3为该网站的首页截图。由于网站的信息量比较大，要呈现的信息种类很多，因此采用四列布局，可以使网站结构看起来更加清晰。,10.3 利用Div+CSS布局网页,Div标签作为页面元素的主要容器，可容纳所有子Div标签、图像和文字等内容，并根据具体需要对各子Div标签和对象进行格式化。读者要能灵活掌握Div+CSS准确定位页面元素的排版技术，创建布局合理、美观的网页。,10.3.1 使用Div+CSS搭建页面,通常用Div标签来定义网页上的一个特定的区域，将文字、图片和表格等网页元素放到此区域中，再用CSS对该Div标签定义的区域进行定位和样式的设置。CSS样式表不仅是定义页面样式的最佳工具，同时也具有精确地定位独享的控制能力，因此，它成为不可多得的网页布局工具。为了提高设计效率，可以事先定义好布局所需的CSS样式规则，然后在“插入Div标签”对话框中应用。使用这种方法排版的网页中的代码简洁且更新方便，更能兼容更多的浏览器。 1CSS的盒子模式 2Div+CSS布局操作方法,10.3.3 Div+CSS标准的优点,使用Div+CSS布局网页已经成为一种潮流，下面是使用Div+CSS标准的优点。 符合W3C标准。W3C标准是现在主流的标准，这样可以保证网站不会因为网络的升级而惨遭淘汰。 结构清晰，容易被搜索引擎搜索到，并能够优化搜索引擎。 有很强的易用性，可以进行一次设计后，在其他地方发布。支持浏览器的向后兼容，几乎在所有的浏览器上都可以使用。 表现和内容分离。这是使用CSS布局的特色所在，网页有许多内容，而将网页设计部分剥离出来放在一个独立的样式文件中，代码会更加简洁，页面和样式可以方便地进行更新，也能大大提高网页下载速度。 在使用表格布局时，会产生很多垃圾代码，并且一些修饰的样式及布局的代码混合在一起。相比之下，Div更着重体现样式和结构相分离，因此结构的重构性强。,10.4 本章小结,当标签用于网页布局和定位时，需要与CSS配合实现页面的精确定位，同时CSS作为一种新的布局技