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

  • 时间:
  • 浏览:3
  • 来源:SSYCMS

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

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

本篇文章中我们不讨论相关的设计理论,我们只对布局所用到的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:单元格跨行。