《第14章--网页布局与设计技巧.ppt》由会员分享，可在线阅读，更多相关《第14章--网页布局与设计技巧.ppt（23页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第14章网页布局与设计技巧在前面的章节里，介绍了HTML与CSS的基础知识，这些基础知识大多都是面对网页元素的。这些元素组合起来可以形成一个完整的网页。本章将会介绍如何组织这些网页元素来形成一个完整网页以及在网页设计中常用到的一些技巧。14.1 网页布局网页布局是指网页整体的布局，虽然网页的内容是很重要的，但是如果网页的布局很乱，用户看起来也会感觉很不舒服。当用户打开一个网页时，第一印象就是网页漂不漂亮，然后才会去看网页内容。本节就来详细介绍如何进行网页的布局，才能让网页变得更漂亮。14.1.1 网页大小设计网页的第一步，需要考虑的是网页的大小。网页过大，浏览器会出现滚动条，浏览不便。网页过小
2、，显示内容过少，影响美观。1.影响网页大小的因素2.如何设计网页大小3.其他设计网页大小的方法14.1.2 网页栏目划分在确定网页大小之后，就可以开始设计网页的布局了。网页布局是设计在网页上放些什么内容，以及这些内容放在网页的什么位置。网页设计是没有什么定论可言，只要设计得漂亮，想怎么设计都行。一个良好的网页，尤其是网站的首页（即网站的第一个页面），都会包含以下几个区域。1.页头2.banner3.导航区域4.内容5.页脚14.1.2 网页栏目划分下图所示是一个完整的网页。14.1.3 表格布局在CSS出现之前，都使用表格来对网页进行布局的。在使用表格布局时，利用了表格的无边框和间距的特性（将
3、表格的边框与单元格间距都设为零），然后再将网页元素按版面需要进行划分之后，插入到表格的各个单元格中，从而实现了网页排版的工作。图14.2是网易博客的首页，该页面里每个栏目都是一个小方块，可以把这些小方块都放在表格的单元格里。14.1.3 表格布局 14.1.3 表格布局图14.3简单地将网易博客首页用表格划分了一下，表格的每个单元格里可以放置网页的一个栏目。14.1.3 表格布局在划分完大栏目之后，可以根据大栏目中的具体情况，对大栏目中的具体显示情况再进行较小的划分，这种划分也可以用表格来完成。例如图14.2中的“最新更新”栏目，可以再用一个嵌套的表格进行细分，如图14.4所示。14.1.3
4、表格布局然后再将细分的栏目插入到所在单元格里，形成多个表格的嵌套，如图14.5所示。14.1.4 CSS布局使用表格布局，会大量地使用到表格的嵌套，并且会在表格里加入大量的如width、border、cellspacing、cellpadding等用于控制版面的属性，这些代码使得网页的源代码可读性大大降低。如果使用CSS布局可以从根本上改变这种混乱的局面。在CSS中可以使用DIV与CSS的结合来控制版面，而表格仅仅用来显示数据。如此一来，版面控制与内容就可以完全分来，每一个DIV层都是一个栏目内容。也可以将DIV层看着是一个个“块”，每一个块的作用是显示内容，而至于将块放在哪个位置，这就由样式
5、来控制了。14.1.4 CSS布局例如，图14.2可以按图14.6的方式来进行划分。14.2 CSS布局技巧使用CSS布局，虽然比使用表格布局要简洁、方便，但是DIV与表格还是有很大的区别，尤其是对于从表格布局转向CSS布局的开发者来说，CSS布局没有表格布局那么容易控制。使用表格布局，只要将表格划分好之后，就可以在单元格里填入内容，而使用CSS布局时，很多开发者会觉得DIV层不知道要如何控制，总是无法将其摆放到想要放置的位置上。14.2.1 一栏布局一栏布局，是一种最简单的布局方式。在这种布局方式中，将网页中所有内容都以一栏方式显示，如图14.7所示。14.2.1 一栏布局一栏布局里，宽度都
6、是一样的，对于这种情况，只需要使用一个简单的DIV层就可以现实整体的网页布局，代码如下所示：网页内容设置了DIV层之后，就可以为该层设置样式，例如层的大小、背景颜色、边框等，如以下代码：#mydiv width:600px;height:300px;background-color:#AEAEAE;border-style:solid;border-width:1px;border-color:blue;14.2.2 二栏布局二栏布局是将网页分为左侧与右侧两列，这种布局方式也是网络是使用得很多的布局方式，如图14.9所示。14.2.3 多栏布局多栏布局是将网页的内容分为左、中、右三大部分，这也
7、是网络中常用到的一种布局方式，如图14.11所示。14.3 CSS布局技巧本节的内容非常重要，因为盒子模型是CSS定位布局的核心内容。在前面章节的学习中，读者了解了网页各种布局的方法，仅仅通过div元素和列表元素，即可完成页面大部分的布局工作。但是前面的学习的知识点比较重实践操作，理解盒子模型的概念后，读者CSS布局定位将更加熟练。14.3.1 盒子模型的定义XHTML中大部分的元素（特别是块状元素）都可以看作一个盒子，而网页的元素的定位实际就是这些大大小小的盒子在页面中的定位。这些盒子在页面中是“流动”的，当某个块状元素被CSS设置了浮动属性，这个盒子就会“流”到上一行。网页布局即关注这些盒
8、子在页面中如何摆放、如何嵌套的问题，而这么多盒子摆在一起，最需要关注的是盒子尺寸计算、是否流动等要素。为什么要把XHTML元素作为盒模型来研究呢？因为XHTML元素的特性和一个盒子非常相似，如下图所示。14.3.2 外边距的控制在CSS中，margin属性可以统一设置，也可以上下左右分开设置#bmargin-left:5px;margin-right:5px;margin-top:6px;margin-bottom:6px;14.3.3 边框的样式设置边框（border）作为盒模型的组成部分之一，其样式非常受重视。边框的CSS样式设置不但影响到盒子的尺寸，还影响到盒子的外观。边框（border
9、）属性的值有3种，边框尺寸（像素）、边框类型和边框颜色（十六进制）。如果要分开设置4条边框，将border改为border-top（顶部边框）、border-bottom（底部边框）、border-left（左边框）和border-right（右边框）。而修改“类型”可以修改成不同样子的边框线条，常用的为solid（实线）、dashed（虚线）、dotted（点状线）、groove（立体线）、double（双线）、outset（浮雕线）等14.3.4 内边距的设置内边距（padding）类似于HTML中表格单元格的填充属性，即盒子边框和内容之间的距离。内边距（padding）和外边距（margin）很相似，都是不可见的盒子组成部分，只不过内边距（padding）和外边距（margin）之间夹着边框。14.3 小结本章主要讲解了网页布局与CSS布局技巧。其中，网页布局介绍了网页大小的设置、网页栏目划分、表格布局和CSS布局的方法；CSS布局技巧介绍了使用CSS如何进行一栏布局、二栏布局和多栏布局。