網頁佈局可以用兩種不同的方式完成：
- 固定寬度佈局 - 這些佈局是整個頁面的寬度用特定數值設置的。
- 液體佈局 - 這些是整個頁面的寬度根據瀏覽器的瀏覽器寬度而變化的佈局。
使用兩種佈局方法都有很好的理由，但是如果不理解每種方法的相對優點和缺陷，就無法對網頁的使用方式做出正確的決定。
固定寬度佈局
固定佈局是由網頁設計師確定的以特定大小開始的佈局。 無論查看頁面的瀏覽器窗口的大小如何，它們都保持這個寬度。 固定寬度佈局允許設計者更直接地控制頁面在大多數情況下的外觀。 他們通常被具有印刷背景的設計師所青睞，因為他們允許設計師對佈局進行微小調整，並使其在瀏覽器和計算機上保持一致。
液體佈局
液體佈局是基於當前瀏覽器窗口大小百分比的佈局。 即使當前查看者在查看網站時更改了瀏覽器大小，它們也會隨著窗口大小而變化。 液體寬度佈局允許非常有效地使用由任何給定的Web瀏覽器窗口或屏幕分辨率提供的空間。 它們通常被設計師們所喜歡，因為他們在盡可能小的空間內擁有大量信息，因為無論誰在瀏覽頁面，頁面大小和相對頁面重量都保持一致。
賭注是什麼？
為您的網站設計選擇的方法不僅會影響您的設計 。 根據您的選擇，您將影響您的讀者掃描文本，查找他們正在查找的內容或有時甚至使用您的網站的能力。 同樣，佈局風格也會影響您通過品牌推廣，房地產可用性和網站美學來營銷您的網站。
固定寬度佈局的好處
- 固定寬度的佈局允許設計人員構建無論誰在看他們都會看起來完全相同的頁面。
- 由於整個頁面的寬度將包含這些元素，因此固定寬度的元素（如圖像）不會超過較小顯示器上的文本。
- 無論Web瀏覽器有多寬，掃描長度都不會受到大量文本的影響。
液體佈局的好處
- 液體寬度佈局擴展並收縮以填充可用空間。
- 所有可用的房地產都被使用，允許設計師在更大的顯示器上顯示更多內容，但在小型顯示器上仍然可行。
- 液體佈局提供相對寬度的一致性，允許頁面更動態地響應客戶施加的限制，如較大的字體大小。
固定寬度佈局的缺點
- 固定寬度佈局可以導致在較小的瀏覽器窗口中水平滾動。 大多數人不喜歡水平滾動。
- 它們還可能在較大的顯示器中產生大量的空白區域，導致大量未使用的空間和垂直滾動，而不是必需的。
- 固定寬度佈局不能很好地處理客戶對字體大小的更改。 對於字體大小的小增加，它們可以沒問題，但是對於較大的增加，佈局可能會受到影響。
液體佈局的缺點
- 液體佈局允許對頁面各種元素的寬度進行精確控制。
- 它們可能會導致文本列太寬而無法輕鬆掃描，或者導致文本列太小而無法清晰顯示。
- 當固定寬度的元素（如圖像）放置在液柱內時，液體佈局會產生問題。 如果列沒有足夠的空間顯示圖像，某些瀏覽器會增加列寬，忽略設計者的指示，而其他瀏覽器會導致文本和圖像重疊以達到正確的百分比。
結論
許多需要在盡可能小的空間內傳達大量信息的站點在液體佈局方面效果良好。 這使他們能夠利用大型監視器提供的所有房地產，同時不縮短更小的顯示器。
需要精確控制頁面在每種情況下的外觀的網站都可以使用固定寬度的佈局。 這提供了更多的保證，無論您查看的是什麼尺寸的監視器，您的網站的品牌都是一致和清晰的。
佈局首選項
許多人喜歡混合的方法。 他們不喜歡在大塊文本中使用液體佈局，因為這可能會使文本在小型監視器上無法讀取，或在大型文件上無法讀取。 所以他們傾向於將主要的頁面列固定寬度，但是使頁眉，頁腳和側欄更加靈活，以佔用剩餘的不動產並且不會損失較大瀏覽器的容量。
有些網站使用腳本來確定您的瀏覽器窗口大小，然後相應地更改顯示元素。 例如，如果您在一個非常寬的窗口中打開這樣的網站，您可能會在左側獲得一列額外的鏈接，具有較小顯示器的客戶可能看不到。 此外，圍繞廣告的文字取決於您的瀏覽器窗口的寬度。 如果寬度足夠大，該網站將圍繞它環繞文字，否則，它會在廣告下方顯示文章文字。 雖然大多數網站不需要這種複雜程度，但它演示了利用大屏幕而不影響小屏幕顯示的方法。