整站网页设计攻略 网页宽度布局设计有哪几种方式

    网页宽度布局设计在一定程度上影响用户体验，设计师希望给每个访客同样的优质体验。设计的难点在于访客之间存在差异，不同的访客会使用不同分辨率的屏幕，不同浏览器的各种版本，根据个人使用习惯的不同，他们也许并不会将窗口最大化，也可能使用浏览器的额外组件（如历史，书签，Google工具栏等等），这就产生了网页宽度布局的难题——如何在各种分辨率、不同版本浏览器、不同大小浏览器窗口的条件下，均能让网页以适合浏览方式呈现下访问用户的电脑屏幕上。
    目前，任何一种宽度设计都不能兼顾所有的访客。下面，我们介绍3种普遍的整站网页设计的布局方式，它们各有优劣，根据网页特点不同，我们可以选用不同的设计方式：

1、自适应式布局
    网页采用自适应式的宽度布局，能自动以布满浏览器窗口的形式向访问用户展现网站页面，随着用户改变窗口的大小而相应地改变网页宽度。这种宽度布局方式能够适应用户改变浏览器窗口大小，支持宽屏的高分辨率以符合用户的个性需求，属于具有较高用户体验的方式。
    自适应式宽度布局设计的难点在于，站长们无法准确地控制像素精度，在网站运行之初，需要进行网页测试，花费较大时间精力和经济投入来对比各页面之间的效果，并作出技术调整以达到在各版本浏览器中自适应后像素精度正常的效果。

2、宽度固定式布局
    宽度固定式网页宽度布局设计，顾名思义，具有固定的网页宽度，无论浏览器窗口大小如何变化，网页宽度保持原有宽度不变。目前绝大多数显示器都支持 1024 x 768 及其以上分辨率，但在设定宽度时，我们会选择的再稍微小一点。为了有效的利用屏幕宽度同时保证栅格的灵活度，许多门户网站会选择950~960的宽度。800的分辨率一般设定760左右。
    宽度固定式的网页布局设计虽然不能布满较设计版式高的宽度窗口，但是它较容易实现的页面宽度布局设计，图像可以精确地显示在固定位置，使用大众用户的分辨率屏幕宽度作为页面固定宽度进行网站页面布局，是一种较为经济又不损失绝大部分用户体验的方式。

3、用户自定义式布局
   用户自动以式网页根据用户定义浏览器设置中的文本尺寸来确定网页显示宽度，用户定义的文本尺寸越大，网站宽度越宽。
从上面的图例可以看出，用户自动以式网页布局设计在不同分辨率下，只根据用户修改文本大小而相应的改变网页宽度，从而达到网页缩放的效果。
    用户自动式的整站网页设计布局，虽然不能像自适应式网页那样随着分辨率和浏览器窗口而改变宽度，但是可以让用户改变浏览器文本大小设置而改变网页宽度，从而以曲线方式达到用户的个性化页面宽度显示需求。用户自定义式网页是一种既集成了宽度固定式网页经济、设计易操作性，又以半自适应的方式集合了自适应式网页的个性化用户显示体验需求。然而用户自定义式网页宽度布局也继承了自适应式网页和宽度固定式网页两种布局方式的缺点，在一些不协调的尺寸大小设置和分辨率下，会让宽度或高度溢出一屏大小，需要通过滚动条拖拽来滚动查看网页。


    自适应式宽度布局容易被用户的操作破坏，相比之下固定宽度更安全稳妥，但它的兼容性相对较差，用户自定义对用户水平有一定要求，而且，有很大一部分用户会忽略你的一片苦心。同时，结合自适应式布局和固定布局的方式也值得考虑，如果运用得当，弹性布局能完全整合两大主要布局的优点。聪明的设计师懂得如何利用弹性设计的原则，在字体和容器大小上使用em单位，然后混合运用百分比和像素宽度来设定其他布局元素。

    如前面所说，选择何种布局应该由网站的性质决定，以作品集网站为例，这种网站可能固定宽度布局最为适用，这样你就能做出更有设计感的东西。你不仅能更好地控制设计中的单个元素，作品的图像展示也变得更易处理。对很多设计师来说（包括那些非作品集站点的设计师），固定布局就是一个既容易相处，又能给人安全感的好朋友，而那些要追求100%的兼容性的设计师最好就考虑一下花点时间在流动布局。总而言之，这3种整站网页设计布局方式没有优劣之分，权衡上述利弊，适合网站需求的就是最好的。

                                                                                                                                                                                                （一品威客网 Dahlia）