網(wǎng)頁布局設計技術問題探究

韋春暖

（臨沂職業(yè)學院，臨沂 276017）

Dreamweaver CS6作為一個所見即所得的網(wǎng)頁編輯器深受廣大網(wǎng)頁設計者的厚愛，設計者可以利用它輕而易舉的完成各類網(wǎng)頁的設計、編碼和開發(fā)。運用該軟件進行開發(fā)使用的過程中，雖然很多操作步驟在相關書籍或資料中都有介紹，但很多使用者尤其是初學者常常會在學習操作過程中遇到各種類型的問題，不能實現(xiàn)預期的設計效果。常見的問題如 “不清楚眾多網(wǎng)頁布局方式的區(qū)別、用法”、“不能準確的運用CSS樣式美化網(wǎng)頁，實現(xiàn)預期的排版效果”、“布局時不能準確進行排版定位”等。本文將對這些常見的問題或者疑惑進行詳細的分析解讀，從而幫助大家形成一個完整清晰的網(wǎng)頁布局設計思路。

網(wǎng)頁設計制作中的兩個既基本、又重要的環(huán)節(jié)為“網(wǎng)頁布局”和“網(wǎng)頁美化”，網(wǎng)頁布局是網(wǎng)頁設計的核心工作，所以選擇好的網(wǎng)頁布局方式至關重要。常見的網(wǎng)頁布局包括表格布局、框架布局、流體網(wǎng)格布局、Div布局等多種布局方式，而作為傳統(tǒng)布局方式的“表格布局和框架布局”與當今主流的布局方式“流體網(wǎng)格布局和Div布局”相比，前者使得網(wǎng)頁的制作、修改、維護和更新復雜，代碼雜亂無章，而后者是基于Web標準的網(wǎng)頁設計的核心理念將網(wǎng)頁內(nèi)容與形式相分離，引入以Div標簽為代表的區(qū)塊標簽，憑借CSS樣式強大的設置功能，使網(wǎng)頁布局更加規(guī)范，瀏覽器加載更快，深受設計者的歡迎。在網(wǎng)頁設計過程中對于網(wǎng)頁布局方式的選擇主要還是根據(jù)網(wǎng)頁的復雜程度、用戶行為以及網(wǎng)頁瀏覽所對應的設備環(huán)境來選擇，如果是網(wǎng)頁內(nèi)容較少，結構簡單的網(wǎng)頁可以采取傳統(tǒng)的布局模式，但如果是綜合型的大型網(wǎng)站，一般應選擇“Div+CSS布局”模式布局網(wǎng)頁，如果要實現(xiàn)在“智能手機、平板電腦、桌面電腦”等多種設備上能夠自適應瀏覽網(wǎng)頁內(nèi)容時，需要采用“流體網(wǎng)格布局”的模式來布局網(wǎng)頁。

采用表格布局和框架布局網(wǎng)頁時操作相對簡單，當采用Div布局網(wǎng)頁時，主要采用兩種布局模式，一種是采用AP Div布局方式，另一種是采用Div布局方式。AP Div是絕對定位的Div標簽，是Div的特殊形式，可以通過設置position屬性是否為absolute進行相互轉(zhuǎn)換。在Dreamweaver CS6環(huán)境下，Div標簽由虛線框表示，而AP Div是實線框。用鼠標拖動AP Div標簽可以任意移動位置，而Div標簽的位置不能通過鼠標拖動移動。放在AP Div中的網(wǎng)頁元素，可以通過控制AP Div的位置、堆疊次序等屬性，實現(xiàn)網(wǎng)頁的精確布局。由于使用CSS布局網(wǎng)頁，真正實現(xiàn)了網(wǎng)頁內(nèi)容與形式的分離，且排版靈活，更新容易，所以，運用CSS+Div布局版式已經(jīng)成為網(wǎng)頁布局的主流技術。網(wǎng)頁版塊劃分以及網(wǎng)頁版塊間的位置關系的設置需要通過設置CSS樣式來實現(xiàn)。運用Div進行網(wǎng)頁布局時，首先應對頁面進行整體規(guī)劃，劃分模塊，理清模塊間的嵌套關系等。簡單網(wǎng)頁通常由標題、導航、內(nèi)容和版權信息等幾個模塊構成。各模塊間的有機組合，構成不同的網(wǎng)頁版式。目前常見CSS+Div布局版式主要有三種，分別為網(wǎng)頁內(nèi)容居中布局、兩列式布局、三列式布局。其中，多列式布局又可分為多列百分比布局、多列固定寬度居中布局、多列左、右列寬度自適應布局。要實現(xiàn)上面介紹的三種布局版式，主要是通過設置各Div板塊的CSS樣式中width的值來實現(xiàn)。例如：一網(wǎng)頁布局為三列，如果將該網(wǎng)頁三列設置成左（left）、右（right）板塊固定寬度，中間（main）板塊自適應的布局方式，需先把left、right Div的CSS樣式中“float”屬性值分別設置為left、right后，在把left、right Div的width屬性設置成一個絕對像素值即可。如果要將網(wǎng)頁設置成兩列百分比布局布局版式，先把left和right Div的CSS樣式中float屬性設置其浮動屬性為“l(fā)eft”，在把設置left、right Div的寬度分別設置為如“20%”和“80%”的比例值便可實現(xiàn)百分比的布局效果。對于采用Div進行兩列式或者多列式布局時，最關鍵的是通過設置float屬性來實現(xiàn)網(wǎng)頁左、中、右的結構布局模式，但這里需要注意的是代碼中Div塊通常是按照順序流方向進行布局的，也就是說在用Div布局設置的時候，要有先后設置的順序，如果在布局時達不到預期效果，很多就是因為沒有按照這個設計原則操作造成的。

網(wǎng)頁結構布局完成后，需要根據(jù)網(wǎng)頁布局模式的不同采取不同設置方案使得網(wǎng)頁能夠在瀏覽器中以居中或者自適應等形式顯示。當采用框架布局方式布局時，不必調(diào)整框架的高度和寬度，它的寬度、高度默認方式是自適應瀏覽器大小的方式顯示，只需調(diào)整框架之間的寬度和高度即可。如果運用表格布局網(wǎng)頁，居中顯示的設置方式是將布局表格選中后，設置它的“對齊”方式為“居中對齊”，而對于用Div或者AP Div布局網(wǎng)頁時，需要通過建立CSS或者直接設置CSS里面width、height及margin屬性值來進行網(wǎng)頁的定位。網(wǎng)頁的布局寬度一般分為固定寬度和自適應寬度兩種模式。將Div+CSS布局的網(wǎng)頁設置為自適應寬度時，只需要將最外層的Div標簽的width值設為100%即可實現(xiàn)居中顯示的效果，而把固定寬度布局的網(wǎng)頁設置為居中顯示時，首先需要將最外層的Div標簽的width值設置為所需寬度的固定像素值，然后通過設置CSS樣式表中的margin屬性中l(wèi)eft和right的值來實現(xiàn)，即通過設置網(wǎng)頁與左右邊距的距離寬度值或比例值來實現(xiàn)網(wǎng)頁布局的居中效果。在布局網(wǎng)頁時設置margin、border、padding的屬性可以按照規(guī)定的順序使用2個、3個或者4個屬性值來表示，不同個屬性值的含義分別為：用2個屬性值表示時前值為上下邊框的屬性，后值為左右邊框的屬性；用3個屬性值表示時，前值為上邊框的屬性值，中間的數(shù)值為左右邊框的屬性值，后值為下邊框的屬性值；用4個屬性值表示時各值依次代表上、右、下、左邊框的屬性值，即按順時方向設置屬性值。