網(wǎng)頁(yè)一般用什么工具布局？常用的網(wǎng)頁(yè)流程布局介紹

　　需要注意的是，為了提高網(wǎng)頁(yè)制作的效率，布局時(shí)通常需要遵循一定的布局流程，具體如下。

　　1) 確定頁(yè)面的版心寬度

　　版心指的是頁(yè)面的有效使用面積，是主要元素以及內(nèi)容所在的區(qū)域，一般在瀏覽器窗口中水平居中顯示。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，頁(yè)面尺寸寬度一般為1200~1920像素。但是為了適配不同分辨率的顯示器，一般設(shè)計(jì)版心寬度為1000~1200像素。例如屏幕分辨率為1024×768像素的瀏覽器，在瀏覽器內(nèi)有效可視區(qū)域?qū)挾葹?000像素，所以最好設(shè)置版心寬度為1000像素。設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站時(shí)盡量適配主流的屏幕分辨率。常見(jiàn)的寬度值為960px、980px、1000 px、1200px等。圖2所示即為某甜點(diǎn)網(wǎng)站頁(yè)面的版心和頁(yè)面寬度。

　　圖 2 頁(yè)面尺寸和版心

　　  2) 分析頁(yè)面中的模塊

　　在運(yùn)用CSS布局之前，首先要對(duì)頁(yè)面有一個(gè)整體的規(guī)劃，包括頁(yè)面中有哪些模塊，以及模塊之間關(guān)系(關(guān)系分為并列關(guān)系和包含關(guān)系)。例如，圖3所示為最簡(jiǎn)單的頁(yè)面布局，該頁(yè)面主要由頭部(header)、導(dǎo)航(nav)、焦點(diǎn)圖(banner)、內(nèi)容(content)、頁(yè)面底部(footer)五部分組成。

圖 3 頁(yè)面模塊分析

　　3) 控制網(wǎng)頁(yè)的各個(gè)模塊

　　當(dāng)分析完頁(yè)面模塊后，就可以運(yùn)用盒子模型的原理，通過(guò)DIV+CSS布局來(lái)控制網(wǎng)頁(yè)的各個(gè)模塊。初學(xué)者在制作網(wǎng)頁(yè)時(shí)，一定要養(yǎng)成分析頁(yè)面布局的習(xí)慣，這樣可以提高網(wǎng)頁(yè)制作的效率。