赣州众联网络8年专注于赣州网站建设,赣州做网站、网站SEO优化就找众联!
赣州众联网络
赣州做网站 > 网站策划 > 网页布局排版设计怎么做?

网页布局排版设计怎么做?

时间 : 2019-01-27 12:41 浏览量 : 28

  网页布局设计也可以理解为版面设计,所谓网页布局,就是以最适合浏览的方式将图片和文字排放在页面的不同位置,就像一张报纸、一本杂志来进行排版布局。在浏览器上看的一个图文并茂的页面,是设计师按照视觉原理将所有要体现的内容进行有机的整合和分布。

  

网页布局


  浏览器按顺序方式解析网页文件,若不对网页进行布局设置,浏览器将按照从左到右、从上到下的方式,依次显示网页内容。因此,要想设计优雅的界面,页面布局非常重要。早期的网页设计,设计师常常会使用表格或框架进行布局。随着互联网技术的发展,为了更好地将网页结构和表现分离,目前主要使用CSS(层叠样式表)和DIV进行网页布局。为了简化网页布局工作,也可使用AP元素(绝对定位元素)进行布局。

  

  一般来说,赣州做网站有3种技术以实现网页的结构布局,分别为:帧布局技术、表格布局技术和层布局技术。

  

帧布局

  

  这里所说的帧对应于HTML文档中的一个Frame元素。帧布局就是将页面分成不重叠的几个部分,每个部分称为一帧并对应于一个独立的网页。

  

  采用帧布局最大的好处在于可以随意调整各个帧在页面中所占的比例,并且在显示网页时,拖动—个帧的滚动条只会滚动该帧画面的内容而不会影响其他帧。但是帧布局也有一个缺点,就是当某帧的内容超过该帧显示的范围时,就会自动出现滚动条,这在许多情况下将会破坏整个页面的美观。

  

表格布局

  

  这里所说的表格对应于HTML文档中的一个Table元素。表格布局是最常用的页面布局技术,目前大多数网页都采用表格作为其基本布局技术。

  

  表格布局的最大好处在于可以根据需要将整个页面分隔成任意数量和任意大小的单元格,并且可以在单元格内嵌入任何网页对象。而且在对每个单元格中的对象进行单独操作时,都不会影响其他单元格中的对象。与帧布局相比,表格布局技术也是将页面划分为多个不同的区域,但各区域不会像帧布局一样出现滚动条。

  

层布局

  

  层(Layer)布局是一种较新的技术,其最大优点是将页面的布局从平面空间扩展到立体空间。采用层布局技术可以将一个页面看作是由多个层面重叠而成的,各个层面不仅允许以像素为单位精确地定位其在整个空间中的位置,而且还可以通过一定的设置来控制某一层是否显示以及层与层之间的叠放次序。在网页设计中,层有Div和Layer两种不同的标记,并且不同的浏览器对层的支持是不一样的。

  

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

  

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

  

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


网页布局的整体造型

  

网页布局的整体造型


  一张网页就是一个整体,在显示器端呈现的页面中的文本、图形(或视频)的布局应该是排列有序的。虽然显示器和浏览设备器一般是矩形,但对于页面的造型,可以充分运用自然界中的其他形状以及它们的组合来设计,比如矩形、圆形、三角形、菱形等。不同的形状所代表的意义是不同的。例如,矩形代表着正式、规则;圆形则代表着柔和、团结、温暖等:三角形代表着力量、权威、牢固、侵略等;菱形代表着平衡、协调和公平。

  

  虽然不同形状代表着不同意义,但目前的网页制作多是结合多种形状加以设计,只是其中某一种形状的构图比例可能占得多一些。但由于显示器设备(如显示器、手机屏幕)一般是矩形,设计者一般按照矩形设计页面版面。

  

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


WEBSITE CONSTRUCTION

网站建设资讯

打开客服菜单
cache
Processed in 0.030817 Second.