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

来源:酷知科普网 1.62W

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

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

网页组成部分

(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命名规则,例如样式文件命名主要的:布局版面:专栏:文字:打印样式:主题:

传统的网页结构及布局方法 第2张
热门标签