HTML页面布局怎么设计(图文)

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


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



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


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


  ②网站主菜单区域;


  ③网站Banner所在区域;


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


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


  ⑥网站版权区域。


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


网页布局基本思想


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



DIV+CSS布局


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


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


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


将页面用DIV分块


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


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


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


标签:网页设计网页制作