首頁技術文章正文

網頁一般用什么工具布局？常用的網頁流程布局介紹

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

好口碑IT培訓

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

　　圖 1 報紙排版

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

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

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

　　1) 確定頁面的版心寬度

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

　　圖 2 頁面尺寸和版心

　　 2) 分析頁面中的模塊

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