HTML+CSS+DIV网页设计与布局 作者 聂斌 第13章 网页布局与设计技巧.pptVIP

第13章 网页布局与设计技巧 在前面的章节里，介绍了HTML与CSS的基础知识，这些基础知识大多都是面对网页元素的。这些元素组合起来可以形成一个完整的网页。本章将会介绍如何组织这些网页元素来形成一个完整网页以及在网页设计中常用到的一些技巧。 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 13.1 网页布局 网页布局是指网页整体的布局，虽然网页的内容是很重要的，但是如果网页的布局很乱，用户看起来也会感觉很不舒服。当用户打开一个网页时，第一印象就是网页漂不漂亮，然后才会去看网页内容。本节就来详细介绍如何进行网页的布局，才能让网页变得更漂亮。 13.1.1 网页大小 设计网页的第一步，需要考虑的是网页的大小。网页过大，浏览器会出现滚动条，浏览不便。网页过小，显示内容过少，影响美观。 1.影响网页大小的因素 2.如何设计网页大小 3.其他设计网页大小的方法 13.1.2 网页栏目划分 在确定网页大小之后，就可以开始设计网页的布局了。网页布局是设计在网页上放些什么内容，以及这些内容放在网页的什么位置。网页设计是没有什么定论可言，只要设计得漂亮，想怎么设计都行。一个良好的网页，尤其是网站的首页（即网站的第一个页面），都会包含以下几个区域。 1.页头 2.banner 3.导航区域 4.内容 5.页脚 13.1.2 网页栏目划分 下图所示是一个完整的网页。 13.1.3 表格布局 在CSS出现之前，都使用表格来对网页进行布局的。在使用表格布局时，利用了表格的无边框和间距的特性（将表格的边框与单元格间距都设为零），然后再将网页元素按版面需要进行划分之后，插入到表格的各个单元格中，从而实现了网页排版的工作。 图13.2是网易博客的首页，该页面里每个栏目都是一个小方块，可以把这些小方块都放在表格的单元格里。 13.1.3 表格布局 13.1.3 表格布局 图13.3简单地将网易博客首页用表格划分了一下，表格的每个单元格里可以放置网页的一个栏目。 13.1.3 表格布局 在划分完大栏目之后，可以根据大栏目中的具体情况，对大栏目中的具体显示情况再进行较小的划分，这种划分也可以用表格来完成。例如图13.2中的“最新更新”栏目，可以再用一个嵌套的表格进行细分，如图13.4所示。 13.1.3 表格布局 然后再将细分的栏目插入到所在单元格里，形成多个表格的嵌套，如图13.5所示。 13.1.4 CSS布局 使用表格布局，会大量地使用到表格的嵌套，并且会在表格里加入大量的如width、border、cellspacing、cellpadding等用于控制版面的属性，这些代码使得网页的源代码可读性大大降低。 如果使用CSS布局可以从根本上改变这种混乱的局面。在CSS中可以使用DIV与CSS的结合来控制版面，而表格仅仅用来显示数据。如此一来，版面控制与内容就可以完全分来，每一个DIV层都是一个栏目内容。也可以将DIV层看着是一个个“块”，每一个块的作用是显示内容，而至于将块放在哪个位置，这就由样式来控制了。 13.1.4 CSS布局 例如，图13.2可以按图13.6的方式来进行划分。 13.2 CSS布局技巧 使用CSS布局，虽然比使用表格布局要简洁、方便，但是DIV与表格还是有很大的区别，尤其是对于从表格布局转向CSS布局的开发者来说，CSS布局没有表格布局那么容易控制。 使用表格布局，只要将表格划分好之后，就可以在单元格里填入内容，而使用CSS布局时，很多开发者会觉得DIV层不知道要如何控制，总是无法将其摆放到想要放置的位置上。 13.2.1 一栏布局 一栏布局，是一种最简单的布局方式。在这种布局方式中，将网页中所有内容都以一栏方式显示，如图13.7所示。 13.2.1 一栏布局 一栏布局里，宽度都是一样的，对于这种情况，只需要使用一个简单的DIV层就可以现实整体的网页布局，代码如下所示： div id=mydiv 网页内容 /div 设置了DIV层之后，就可以为该层设置样式，例如层的大小、背景颜色、边框等，如以下代码： #mydiv {width:600px;height:300px;background-color:#AEAEAE; border-style:solid;border-width:1px;border-color:blue;} 13.2.2 二栏布局 二栏布局是将网页分为左侧与右侧两列，这种布局方式也是网络是使用得很多的布局方式，如图13.9所示。 13.2.3 多栏布局 多栏布局是将网页的内容分为左、中、右三大部分，这也是网络中常用到的一种布局方式，如图13.11所示。 13.3 小结 本章