网页设计如何排成一列_HTML页面布局怎么设计（图文）

网页布局是网页设计制作的基础，按照一定的规律把网页中的图像、文字、视频等页面元素排列到最佳位置。

在设计网页前需要对网页的布局进行整体规划，也就是确定网页中包含的网站标志、导航栏及菜单等元素的位置。不同布局的网页元素所处的位置也不同，一般来说，重要的元素应该放置在突出位置。网页布局大致可以分为“国”字型、“厂”字型、“三”字型、标题正文型、框架型、封面型和Flash型。

根据HTML页面布局设计构想，可将网页布局分为6个区域，这6个区域分别是：

①网站标志(Logo)所在区域；

②网站主菜单区域；

③网站Banner所在区域；

④网站课程分类所在区域；

⑤网站向客户传达信息的主体正文区域；

⑥网站版权区域。

通过以上环节的设计，网站规划布局工作基本完成。

网页布局基本思想

分割、组织页面进行分块，并传达重要信息使网页容易阅读，使页面更具有亲和力和可用性是网页设计最重要的目标。可以把网页中的内存看成是一个个的“盒子矩形块”，把多个“盒子”按照行和列的方式组织起来，就构成了一个网页。

DIV+CSS布局

DIV是网页布局中最为常用的一种盒子，目前DIV+CSS是定位和布局是较为有效的方式，这种方法排版具有灵活性、容易操作和功能强大等特点，越来越多用于网页布局中。

DIV是HTML语言中的一个标记，是一种常用的分块容器元素；CSS是一种用来表现HTML元素样式的计算机语言。DIV元素用来对页面内容进行分块，而CSS对这些分块进行样式控制。

当然这并不是说布局仅能使用DIV+CSS，广义地说应该是“BOX+CSS”，DIV只是布局中最常用的一种盒子而已，HTML5新增的结构标记、、、、等都是用于布局非常实用的BOX。

将页面用DIV分块

首先在整体上考虑如何用div对其分块，即考虑网页需要划分为几个部分，每个部分所显示的主要内容或功能。

网页排版通常可以采用上中下结构、左右结构或者三列结构。例如采用上中下结构，可以先把页面分成三块，从上到下依次排列为页眉块、主体块和页脚块，将这三个块放在一个父div中，方便整体调整和后期排版维护，最后根据具体内容调整分块中所包含的子块数目和布局方式。

网页布局规划完成后，进行页面版面的设计，通常首先设计主页面结构与内容。网站前端开发人员可以使用Photoshop完成版面结构设计及网页图像处理以及板式设计等工作，利用网页制作工具Dremweaver完成网页的具体内容设计。