什么是網(wǎng)頁布局？DIV+CSS技術(shù)的布局流程是怎樣的？

更新時間:2020-12-18 來源:黑馬程序員瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

　　讀者在閱讀報紙時會發(fā)現(xiàn)，雖然報紙中的內(nèi)容很多，但是經(jīng)過合理的排版，版面依然清晰、易讀，例如圖1所示的報紙排版。同樣，在制作網(wǎng)頁時，也需要對網(wǎng)頁進(jìn)行“排版”。網(wǎng)頁的“排版”主要是通過布局來實現(xiàn)的。在網(wǎng)頁設(shè)計中，布局是指對網(wǎng)頁中的模塊進(jìn)行合理的排布，使頁面排列清晰、美觀易讀。

　　圖 1 報紙排版

　　網(wǎng)頁設(shè)計中布局主要依靠DIV+CSS技術(shù)來實現(xiàn)。說到DIV大家肯定非常熟悉，但是在本章它不僅指前面我們講到過的

標(biāo)簽，還包括所有能夠承載內(nèi)容的容器標(biāo)簽(如p、li等)。在DIV+CSS布局技術(shù)中，DIV負(fù)責(zé)內(nèi)容區(qū)域的分配，CSS負(fù)責(zé)樣式效果的呈現(xiàn)，因此網(wǎng)頁中的布局，也常被稱作“DIV+CSS”布局。

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

　　1) 確定頁面的版心寬度

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

　　圖 2 頁面尺寸和版心

　　 2) 分析頁面中的模塊

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