传统的网页结构及布局方法 / 木子杰软件教程

此处介绍的是传统的网页结构组成部分，以及基本的布局方法。

网页组成部分

01

从上而下，传统的经典网页可以分为基本的页头、主体、页尾三个部分，各个部分又可以细分。
02

网页的页头称为header。标志logo、登陆条loginbar、页面横幅广告banner、菜单栏nav（navigation bar）等内容都可以放在页头。
03

网页的主体是网页的内容部分，称为content。一般的，可以把content分为两到三个竖列，包括侧栏sidebar、栏目column等。
04

网页的页尾称为footer，用来放置版权申明、使用协议等，也可放一些导航链接。

网页布局：使用表格或层（div）布局网页

01

传统的网页布局方法主要有表格布局和层（div）布局方法。两者都是按照网页结构框架把网页的内容组织安排起来。
02

使用表格布局需要知道表格的标签和属性等知识。表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。 <table>标签的主要属性包括height、width、cellpadding（规定单元边沿与其内容之间的空白，单元格边距）、cellspacing（规定单元格之间的空白，单元格间距）、border（规定表格边框的宽度）、align（规定表格相对周围元素的对齐方式）。<table>标签的属性可以参考W3C的HTML参考手册中HTML <table> 标签部分内容。 <td>标签的主要属性包括height、width、align（规定单元格内容的水平对齐方式）、valign（规定单元格内容的垂直排列方式）、background等。<td>标签的属性可以参考W3C的HTML参考手册中HTML <td>标签部分内容。
03

使用层（DIV）布局网页需要掌握基本的DIV知识，DIV又与CSS密不可分，通常又称为DIV+CSS布局。熟练掌握Div和CSS的布局方法需要对盒子模型有足够的了解。一个盒子由4个独立部分组成：最外边的是边界（margin）；第二部分是边框（border），边框可以有不同的样式；第三部分是填充（padding），填充用来定义内容区域与边框（border）之间的空白；第四部分是内容区域。使用DIV+CSS布局的基本理念是：将页面用Div分块；设计各块的位置。使用CSS来定义样式。一般使用<div id="id选择符">的方式。注：熟悉CSS、DIV命名规则，例如样式文件命名主要的:master.cs 布局版面:layout.css专栏:columns.css文字:font.css打印样式:print.css主题:themes.css

传统的网页结构及布局方法

网页组成部分

网页布局：使用表格或层（div）布局网页

相关推荐