网页宽度布局设计的最高标准是在各种分辨率、不同版本浏览器、不同大小浏览器窗口的条件下,均能让网页以适合浏览方式呈现下访问用户的电脑屏幕上。网站页面的宽度布局设计在一定程度上影响着用户体验,接下来就网页宽度布局设计的三种方式进行图文分析,来看看三种方式的优势和弱点。
1、自适应式网页
网页采用自适应式的宽度布局,能自动以布满浏览器窗口的形式向访问用户展现网站页面,随着用户改变窗口的大小而相应地改变网页宽度。
从上面的图例可以看出,自适应式网页布局设计在1024*768的低分辨率和1280*800的宽屏高分辨率下都能够布满浏览器窗口。
这种宽度布局方式能够适应用户改变浏览器窗口大小,支持宽屏的高分辨率以符合用户的个性需求,属于具有较高用户体验的方式。自适应式宽度布局设计的难点在于,站长们无法准确地控制像素精度,在网站运行之初,需要进行网页测试,花费较大时间精力和经济投入来对比各页面之间的效果,并作出技术调整以达到在各版本浏览器中自适应后像素精度正常的效果。
2、宽度固定式网页
宽度固定式网页宽度布局设计,顾名思义,具有固定的网页宽度,无论浏览器窗口大小如何变化,网页宽度保持原有宽度不变。
从上面的图例可以看出,以1024px宽度固定式网页布局设计在1024*768的低分辨率模式能正常布满全屏大小的浏览器窗口,但是在1280*800的宽屏高分辨率模式下页面会显示一大片宽度的空白。
宽度固定式的网页布局设计虽然不能布满较设计版式高的宽度窗口,但是对于站长而言,属于较容易实现的页面宽度布局设计,图像可以精确地显示在固定位置,使用大众用户的分辨率屏幕宽度作为页面固定宽度进行网站页面布局,是一种较为经济又不损失绝大部分用户体验的方式。
3、用户自定义式网页
用户自动以式网页根据用户定义浏览器设置中的文本尺寸来确定网页显示宽度,用户定义的文本尺寸越大,网站宽度越宽。
从上面的图例可以看出,用户自动以式网页布局设计在不同分辨率下,只根据用户修改文本大小而相应的改变网页宽度,从而达到网页缩放的效果。
用户自动以式网页宽度布局设计,虽然不能像自适应式网页那样随着分辨率和浏览器窗口而改变宽度,但是可以让用户改变浏览器文本大小设置而改变网页宽度,从而以曲线方式达到用户的个性化页面宽度显示需求。用户自定义式网页是一种既集成了宽度固定式网页经济、设计易操作性,又以半自适应的方式集合了自适应式网页的个性化用户显示体验需求。然而用户自定义式网页宽度布局也继承了自适应式网页和宽度固定式网页两种布局方式的缺点,在一些不协调的尺寸大小设置和分辨率下,会让宽度或高度溢出一屏大小,需要通过滚动条拖拽来滚动查看网页。
上述三种网页宽度布局设计,站长们的取舍需要根据网站自身的定位结合每种宽度布局设计的优缺点来选择,正确地选择合适于网站的宽度页面布局设计,在经济高效的同时又保障用户体验。