HTML+CSS+DIV网页设计与布局 教学课件 作者 聂斌 1_ 第13章 网页布局与设计技巧.ppt

《HTML+CSS+DIV网页设计与布局 教学课件 作者 聂斌 1_ 第13章 网页布局与设计技巧.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第13章网页布局与设计技巧在前面的章节里，介绍了HTML与CSS的基础知识，这些基础知识大多都是面对网页元素的。这些元素组合起来可以形成一个完整的网页。本章将会介绍如何组织这些网页元素来形成一个完整网页以及在网页设计中常用到的一些技巧。13.1网页布局网页布局是指网页整体的布局，虽然网页的内容是很重要的，但是如果网页的布局很乱，用户看起来也会感觉很不舒服。当用户打开一个网页时，第一印象就是网页漂不漂亮，然后才会去看网页内容。本节就来详细介绍如何进行网页的布局，才能让网页变得更漂亮。13.1.1网页大小设计网页的第

2、一步，需要考虑的是网页的大小。网页过大，浏览器会出现滚动条，浏览不便。网页过小，显示内容过少，影响美观。1.影响网页大小的因素2.如何设计网页大小3.其他设计网页大小的方法13.1.2网页栏目划分在确定网页大小之后，就可以开始设计网页的布局了。网页布局是设计在网页上放些什么内容，以及这些内容放在网页的什么位置。网页设计是没有什么定论可言，只要设计得漂亮，想怎么设计都行。一个良好的网页，尤其是网站的首页（即网站的第一个页面），都会包含以下几个区域。1.页头2.banner3.导航区域4.内容5.页脚13.1.2网页

3、栏目划分下图所示是一个完整的网页。13.1.3表格布局在CSS出现之前，都使用表格来对网页进行布局的。在使用表格布局时，利用了表格的无边框和间距的特性（将表格的边框与单元格间距都设为零），然后再将网页元素按版面需要进行划分之后，插入到表格的各个单元格中，从而实现了网页排版的工作。图13.2是网易博客的首页，该页面里每个栏目都是一个小方块，可以把这些小方块都放在表格的单元格里。13.1.3表格布局13.1.3表格布局图13.3简单地将网易博客首页用表格划分了一下，表格的每个单元格里可以放置网页的一个栏目。13.1.

4、3表格布局在划分完大栏目之后，可以根据大栏目中的具体情况，对大栏目中的具体显示情况再进行较小的划分，这种划分也可以用表格来完成。例如图13.2中的“最新更新”栏目，可以再用一个嵌套的表格进行细分，如图13.4所示。13.1.3表格布局然后再将细分的栏目插入到所在单元格里，形成多个表格的嵌套，如图13.5所示。13.1.4CSS布局使用表格布局，会大量地使用到表格的嵌套，并且会在表格里加入大量的如width、border、cellspacing、cellpadding等用于控制版面的属性，这些代码使得网页的源代码可

5、读性大大降低。如果使用CSS布局可以从根本上改变这种混乱的局面。在CSS中可以使用DIV与CSS的结合来控制版面，而表格仅仅用来显示数据。如此一来，版面控制与内容就可以完全分来，每一个DIV层都是一个栏目内容。也可以将DIV层看着是一个个“块”，每一个块的作用是显示内容，而至于将块放在哪个位置，这就由样式来控制了。13.1.4CSS布局例如，图13.2可以按图13.6的方式来进行划分。13.2CSS布局技巧使用CSS布局，虽然比使用表格布局要简洁、方便，但是DIV与表格还是有很大的区别，尤其是对于从表格布局转向C

6、SS布局的开发者来说，CSS布局没有表格布局那么容易控制。使用表格布局，只要将表格划分好之后，就可以在单元格里填入内容，而使用CSS布局时，很多开发者会觉得DIV层不知道要如何控制，总是无法将其摆放到想要放置的位置上。13.2.1一栏布局一栏布局，是一种最简单的布局方式。在这种布局方式中，将网页中所有内容都以一栏方式显示，如图13.7所示。13.2.1一栏布局一栏布局里，宽度都是一样的，对于这种情况，只需要使用一个简单的DIV层就可以现实整体的网页布局，代码如下所示：网页内容

7、v>设置了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多栏布局多栏布局是将网页的内容分为左、中、右三大部分，这也是网络中常用到的

8、一种布局方式，如图13.11所示。13.3小结本章主要讲解了网页布局与CSS布局技巧。其中，网页布局介绍了网页大小的设置、网页栏目划分、表格布局和CSS布局的方法；CSS布局技巧介绍了使用CSS如何进行一栏布局、二栏布局和多栏布局。