HTML頁面布局怎么設(shè)計（圖文）
網(wǎng)頁布局是網(wǎng)頁設(shè)計制作的基礎(chǔ)，按照一定的規(guī)律把網(wǎng)頁中的圖像、文字、視頻等頁面元素排列到最佳位置。
在設(shè)計網(wǎng)頁前需要對網(wǎng)頁的布局進行整體規(guī)劃，也就是確定網(wǎng)頁中包含的網(wǎng)站標(biāo)志、導(dǎo)航欄及菜單等元素的位置。不同布局的網(wǎng)頁元素所處的位置也不同，一般來說，重要的元素應(yīng)該放置在突出位置。網(wǎng)頁布局大致可以分為“國”字型、“廠”字型、“三”字型、標(biāo)題正文型、框架型、封面型和Flash型。
根據(jù)HTML頁面布局設(shè)計構(gòu)想，可將網(wǎng)頁布局分為6個區(qū)域，這6個區(qū)域分別是：
?、倬W(wǎng)站標(biāo)志(Logo)所在區(qū)域；
?、诰W(wǎng)站主菜單區(qū)域；
?、劬W(wǎng)站Banner所在區(qū)域；
?、芫W(wǎng)站課程分類所在區(qū)域；
?、菥W(wǎng)站向客戶傳達信息的主體正文區(qū)域；
⑥網(wǎng)站版權(quán)區(qū)域。
通過以上環(huán)節(jié)的設(shè)計，網(wǎng)站規(guī)劃布局工作基本完成。
分割、組織頁面進行分塊，并傳達重要信息使網(wǎng)頁容易閱讀，使頁面更具有親和力和可用性是網(wǎng)頁設(shè)計最重要的目標(biāo)。可以把網(wǎng)頁中的內(nèi)存看成是一個個的“盒子矩形塊”，把多個“盒子”按照行和列的方式組織起來，就構(gòu)成了一個網(wǎng)頁。
DIV是網(wǎng)頁布局中最為常用的一種盒子，目前DIV+CSS是定位和布局是較為有效的方式，這種方法排版具有靈活性、容易操作和功能強大等特點，越來越多用于網(wǎng)頁布局中。
DIV是HTML語言中的一個標(biāo)記，是一種常用的分塊容器元素；CSS是一種用來表現(xiàn)HTML元素樣式的計算機語言。DIV元素用來對頁面內(nèi)容進行分塊，而CSS對這些分塊進行樣式控制。
當(dāng)然這并不是說布局僅能使用DIV+CSS，廣義地說應(yīng)該是“BOX+CSS”，DIV只是布局中最常用的一種盒子而已，HTML5新增的結(jié)構(gòu)標(biāo)記<header>、<footer>、<nav>、<aside>、<section>等都是用于布局非常實用的BOX。
首先在整體上考慮如何用div對其分塊，即考慮網(wǎng)頁需要劃分為幾個部分，每個部分所顯示的主要內(nèi)容或功能。
網(wǎng)頁排版通?？梢圆捎蒙现邢陆Y(jié)構(gòu)、左右結(jié)構(gòu)或者三列結(jié)構(gòu)。例如采用上中下結(jié)構(gòu)，可以先把頁面分成三塊，從上到下依次排列為頁眉塊、主體塊和頁腳塊，將這三個塊放在一個父div中，方便整體調(diào)整和后期排版維護，最后根據(jù)具體內(nèi)容調(diào)整分塊中所包含的子塊數(shù)目和布局方式。
網(wǎng)頁布局規(guī)劃完成后，進行頁面版面的設(shè)計，通常首先設(shè)計主頁面結(jié)構(gòu)與內(nèi)容。網(wǎng)站前端開發(fā)人員可以使用Photoshop完成版面結(jié)構(gòu)設(shè)計及網(wǎng)頁圖像處理以及板式設(shè)計等工作，利用網(wǎng)頁制作工具Dremweaver完成網(wǎng)頁的具體內(nèi)容設(shè)計。