首頁技術(shù)文章正文

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

更新時(shí)間:2020年12月18日10時(shí)57分來源:傳智教育瀏覽次數(shù):

好口碑IT培訓(xùn)

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

　　圖 1 報(bào)紙排版

　　網(wǎng)頁設(shè)計(jì)中布局主要依靠DIV+CSS技術(shù)來實(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)頁制作的效率，布局時(shí)通常需要遵循一定的布局流程，具體如下。

　　1) 確定頁面的版心寬度

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

　　圖 2 頁面尺寸和版心

　　 2) 分析頁面中的模塊

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