現(xiàn)在，越來(lái)越多的人想要建立自己的網(wǎng)站，通過(guò)自助建站系統(tǒng)就可以自己進(jìn)行網(wǎng)頁(yè)制作了。這無(wú)疑是一件好事，但是，很多設(shè)計(jì)師，尤其是新手設(shè)計(jì)師或者壓根兒就不是設(shè)計(jì)師的小白，都在網(wǎng)頁(yè)設(shè)計(jì)上走過(guò)不少?gòu)澛贰＞W(wǎng)頁(yè)制作最重要的就是網(wǎng)頁(yè)布局，先布局，后細(xì)節(jié)，只有在選擇了合適的網(wǎng)站布局以后，才可以順利的進(jìn)行接下來(lái)的工作。你要問(wèn)網(wǎng)站布局有哪些？今天，深圳網(wǎng)站建設(shè)就為你介紹下下面幾個(gè)常見(jiàn)的網(wǎng)頁(yè)布局類(lèi)型。
一、固定布局
固定網(wǎng)頁(yè)布局（見(jiàn)圖1)是指網(wǎng)站內(nèi)容被一個(gè)固定寬度的容器包裹，容器內(nèi)的區(qū)塊以像素作為頁(yè)面的基本單位，只需設(shè)計(jì)一套尺寸，也只展現(xiàn)一種布局。固定網(wǎng)頁(yè)布局不管用戶(hù)使用的是PC端還是移動(dòng)端，也不管屏幕分辨率如何變化，大家看到的都是固定寬度的內(nèi)容。
圖1 固定網(wǎng)頁(yè)布局
不足：不能根據(jù)用戶(hù)的屏幕尺寸做出不同的表現(xiàn)，大屏幕上會(huì)出現(xiàn)大量空白，而小屏幕上可能會(huì)出現(xiàn)水平滾動(dòng)條影響用戶(hù)體驗(yàn)。
如某某的官網(wǎng)采用了該布局方式，其二級(jí)頁(yè)面固定寬度布局為1093像素，無(wú)論用哪種設(shè)備瀏覽該網(wǎng)站，其布局都不變，可是用手機(jī)查看時(shí)網(wǎng)站時(shí)界面卻未能全部顯示完整。
二、流動(dòng)布局
流動(dòng)網(wǎng)頁(yè)布局（見(jiàn)圖2)是將大多數(shù)組件（包括主容器）都以百分比的形式作為頁(yè)面的基本單位，根據(jù)用戶(hù)的屏幕分辨率自適應(yīng)，完美地利用有效空間展現(xiàn)最佳效果。使用這種布局方式，無(wú)論終端分辨率尺寸如何變化，網(wǎng)頁(yè)都能自適應(yīng)寬度。不過(guò)，單純地使用流動(dòng)布局的頁(yè)面比較少見(jiàn)，它可以搭配固定布局的局部功能使用，還可以為響應(yīng)式布局提供局部版式的自適應(yīng)。
圖5.7 流動(dòng)網(wǎng)頁(yè)布局
不足：寬度使用百分比定義，而高度和文字大小等大都是用px來(lái)固定，在較大分辨率下的顯示效果會(huì)變成有些頁(yè)面元素寬度被拉得很長(zhǎng)，但是高度、文字大小還是和原來(lái)一樣（即這些東西無(wú)法變得“流式”），顯得非常不協(xié)調(diào)。
如國(guó)外某后臺(tái)管理界面（見(jiàn)圖3）布局上就結(jié)合了固定布局與流動(dòng)布局兩種方式：其左側(cè)全局導(dǎo)航固定寬度為235像素；右側(cè)內(nèi)容區(qū)域則運(yùn)用了百分比的形式來(lái)控制各元件的寬度，最終保證了不同分辨率設(shè)備上視覺(jué)空間的均衡布局。
圖3 國(guó)外某后臺(tái)管理界面
三、響應(yīng)式布局
響應(yīng)式網(wǎng)頁(yè)布局（見(jiàn)圖4）是分別為不同的屏幕分辨率終端所定義的布局。其布局原理是網(wǎng)頁(yè)根據(jù)屏幕或?yàn)g覽器的寬度選擇最合適的那套進(jìn)行布局，同時(shí)在每個(gè)布局中應(yīng)用流式布局的理念，讓頁(yè)面元素寬度隨著窗口調(diào)整而自動(dòng)適配。
圖4 響應(yīng)式網(wǎng)頁(yè)布局
不足：一是由于代碼素材多，導(dǎo)致加載速度慢；二是響應(yīng)式布局適用的網(wǎng)站類(lèi)型有限。由于它的特點(diǎn)是適應(yīng)不同終端、不同尺寸屏幕分辨率上的信息版式布局。由于圖片、文字信息的柵格響應(yīng)比較容易，因此響應(yīng)式布局比較適用于內(nèi)容較少、結(jié)構(gòu)簡(jiǎn)單的公司活動(dòng)宣傳網(wǎng)站，而不適用于內(nèi)容、功能復(fù)雜的電子商務(wù)類(lèi)網(wǎng)站等。
如星巴克官網(wǎng)（見(jiàn)圖5)就使用了響應(yīng)式網(wǎng)頁(yè)布局，即便是使用不同的終端、改變?yōu)g覽器的寬度，其頁(yè)面版式也會(huì)通過(guò)字段自動(dòng)換行，圖片自適大小變化而呈現(xiàn)出與設(shè)備寬度匹配的最佳狀態(tài)。這種因?qū)挾扰袛嗟牟煌缑娌季肿赃m應(yīng)地改變的節(jié)點(diǎn)被叫作斷點(diǎn)。目前大多網(wǎng)站選擇響應(yīng)式斷點(diǎn)的設(shè)計(jì)模式，主要有基于設(shè)備和內(nèi)容優(yōu)先兩種。
圖5 星巴克官網(wǎng)
第一種基于設(shè)備的模式是通過(guò)主流設(shè)備的類(lèi)型及尺寸來(lái)確定布局?jǐn)帱c(diǎn)（見(jiàn)圖6），從而設(shè)計(jì)多套樣式，再分別投射到響應(yīng)的設(shè)備。如你的頁(yè)面主要兼容的設(shè)備為手機(jī)、平板、桌面電腦3種，那么就需要根據(jù)主流手機(jī)分辨率尺寸設(shè)置兩個(gè)斷點(diǎn)。下圖中設(shè)置的斷點(diǎn)是720像素與990像素，即若你的屏幕寬度小于720像素的將會(huì)出現(xiàn)A的版式，而當(dāng)寬度大于等于720像素且小于990像素的將會(huì)出現(xiàn)B的版式，大于990像素則會(huì)顯示C的版式。
圖6 基于設(shè)備確定斷點(diǎn)
圖7 基于內(nèi)容確定斷點(diǎn)
第二種基于內(nèi)容優(yōu)先的模式是根據(jù)內(nèi)容的可讀性、易讀性作為確定斷點(diǎn)的標(biāo)準(zhǔn)（見(jiàn)圖7），從小到大共設(shè)計(jì)了A、B、C、D4種版式，在對(duì)內(nèi)容進(jìn)行布局設(shè)計(jì)的時(shí)候，我們首先是基于內(nèi)容來(lái)決定何時(shí)需要采用不同的呈現(xiàn)方式，再參考設(shè)備的物理尺寸，最終確定斷點(diǎn)數(shù)值分別為360像素、720像素、1080像素。
今天的網(wǎng)頁(yè)設(shè)計(jì)分享就到這了，如果您喜歡這篇文章，您可以分享給你的朋友！深圳網(wǎng)站建設(shè)-博納網(wǎng)絡(luò)編輯整理。
