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

如题所述

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

网页组成部分
从上而下,传统的经典网页可以分为基本的页头、主体、页尾三个部分,各个部分又可以细分。
网页的页头称为header。标志logo、登陆条loginbar、页面横幅广告banner、菜单栏nav(navigation bar)等内容都可以放在页头。
网页的主体是网页的内容部分,称为content。一般的,可以把content分为两到三个竖列,包括侧栏sidebar、栏目column等。
网页的页尾称为footer,用来放置版权申明、使用协议等,也可放一些导航链接。
网页布局:使用表格或层(div)布局网页
传统的网页布局方法主要有表格布局和层(div)布局方法。两者都是按照网页结构框架把网页的内容组织安排起来。
使用表格布局需要知道表格的标签和属性等知识。表格由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标签部分内容。
使用层(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
温馨提示:答案为网友推荐,仅供参考
相似回答