在设计布局页面时,每个元素的重要性不同,因此所采用的排列和布局方式也不同,考虑好不同内容的排列顺序是最重要的。如果要根据页面内容决定网页版式布局,最常见的布局形式为左侧排列、水平居中排列、水平和垂直居中排列以及满屏排列四种。
此外有些网站在设计布局时,会依据网站的目的和性质来考虑网站的普遍性。因为一般用户都会依据个人爱好来设计网页布局。但如果想要使设计出来的网页更具创意和与众不同,还需要让浏览者感受到网站的实用性和美观性。
1、左侧的网页布局
左侧网页布局是指页面中的内容居左排列。普通的4:3屏幕分辨率多为1024×768px,所以制作网页时,一般会确定页面的固定宽度为1024px,长度可根据具体内容进行调整,如果大于768px,则需要使用滚动条。
如果用户使用16:9宽屏来浏览网页,那么1024px宽度的页面将无法完成填满整个屏幕,此时按左侧布局的页面,将自动对右侧的像素进行平铺,直至填满整个屏幕。
该网站页面中的布局结构简练而富有新意,通过色彩的运用,将页面背景处理为小鸟的剪影,将主体部分设置在了页面的左侧,在更改分辨率时,在右侧自动填充白色背景色,整个界面简练且美观。
2、水平居中的页面布局
水平居中的页面布局是指页面内容居中布局,这是最常见的一种页面布局方式。采用水平居中的方式布局页面虽然很保险,但很容易导致版面呆板和单调,因此需要在求稳的基础上,在装饰性元素上多花精力。
当用户使用宽频浏览页面时,页面的左右两侧会被同时扩充,以填满屏幕,比较常用的方法是使用纯色、渐变色或图案。
3、水平和垂直居中的页面布局
水平和垂直居中布局是指将页面的横向和纵向都设定为100%的布局方式,这类网页在任何分辨率的屏幕中都会绝对居中显示。
如果一款页面采用了整体性很强,或者很独特的排列方式,任何细微的改动都可能导致页面的美观度大幅下降,那么就需要使用这种方式布局页面。
4、满屏的网页布局
满屏的网页布局是指在搭建程序时,不为页面中的各个部分设置固定的位置,而是采集相对的百分比放置元素。这样在不同分辨率下,页面中的各个元素就会自动调整显示的位置,使页面永远满屏显示。
但是这种布局方式也存在一个缺点,如果屏幕分辨率发生变化,页面中的图像也可能被缩放,这就无法保证图像的清晰度。解决这个问题的方法就是使用矢量图形和Flash动画代替位图图像。