网页设计——HTML(3)布局基础

为什么要布局？

网页布局，也就是如何安排网页的内容。

一个好的网页布局能够使人眼前一亮，吸引流量。

本篇文章中我们不讨论相关的设计理论，我们只对布局所用到的HTML知识进行学习。

几种简单的布局方式

网页主要分为三部分——头部、主体、页脚。

头部：网页的头部主要包含网站和网页的名字以及LOGO，还会包含网站的导航栏。

主体：网页的主体承载网页的主要内容。

页脚：网页的页脚通常会包含网站的基本信息、版权信息、备案信息和相关链接。

三段式：

这是最简单直接的布局，但简单并不意味丑陋，这种布局因为简洁往往能够设计出效果出众的网页，最常见的就是搜索引擎和新闻门户的主页。

带侧边栏：

侧边栏通常是导航栏，一般是比顶部导航栏更详细的导航栏。这种布局常见于博客网站，侧边栏的放置相对随意，既可以在左边，也可以在右边，或者两边都有。通常来说，左侧导航栏会用来放置垂直导航，而右侧的侧边栏会放置公告栏、关键词云或其他挂件。

这两种是最简单也是最有效的布局，其他的布局往往是从这两种布局衍生而来的。更多的布局可以去各个博客网站或者QQ空间查看他们提供的布局。

行级元素与块级元素

从布局的角度，HTML中的元素包含两种：行级元素和块级元素。

接连使用两个行级元素，他们之间不会自动换行。

比如：<span>abc</span><span>123</span>

<span>元素本身不会使文本发生任何视觉上的变化，通常作为一个单纯的行级元素用于布局，它可以给同一行（段落）中的不同部分文字添加不同的属性，当我们学到CSS时，它的作用会体现得更明显。除此之外，<b>标签、<i>标签等标签均为行级元素。

块级元素会使文本从一个新的段落开始。

比如：<div>abc</div><div>123</div>

<div>标签也常常用于布局，起作用与<span>大同小异，具体的布局方法在学习CSS后会更好掌握。

表格布局

在初级阶段，我们需要掌握的是表格布局。虽然这种布局方法已经几乎被完全放弃，但是对于初学者来说，这是相较而言更容易掌握布局知识的方法。

表格的组成

表格由单元格组成，我们在网页中，我们认为表格由若干行（横着的）组成，每一行有若干列单元格。

table标签

<table border=1>

<tr>

<td>cell1</td>

<td>cell2</td>

</tr>

<tr>

<td>cell3</td>

<td>cell4</td>

</tr>

</table>

<table>标签用于在HTML中描述一个表格。

在<table>标签内，我们用<tr>标签描述一个行，在一个行中，我们使用<td>来描述行中的一列单元格（其实就是一个单元格）。

相关的属性

table标签的属性

border：表格的边框粗细，当表格用于布局时，往往设置为0。

align：单元格内内容的对齐方式，可以取left、rigth、center。

width：表格的宽度。

td的属性

width：单元格宽度。

colspan：单元格跨列。

rowspan：单元格跨行。