本節(jié)繼續(xù)使用表格來設(shè)計完整頁面，整個頁面在網(wǎng)站建設(shè)時通過多層嵌套表格設(shè)計3行3列的頁面布局樣式。

【操作步驟】

第1步，在設(shè)計頁面之前，使用Photoshop制作并處理網(wǎng)頁中使用的圖像，然后建立一個images文件夾，將這些圖像文件都放在該文件夾中，以備引用。整個首頁的布局思路在制作之前應(yīng)先在草稿紙上勾畫一下，然后用Photoshop制作一個模板。

第2步，根據(jù)需要再用切片工具切割圖像。

第3步，啟動Dreamweaver，新建文檔，保存為index.html。在主窗口中選擇【修改】|【頁面屬性】命令，打開【頁面屬性】對話框，在該對話框中單擊左側(cè)【分類】列表中的【標(biāo)題/編碼】選項，在【標(biāo)題】文本框中輸入網(wǎng)頁的標(biāo)題“個人主頁－桃花源”。當(dāng)用戶在瀏覽器中打開此網(wǎng)頁時，網(wǎng)頁標(biāo)題會出現(xiàn)在瀏覽器的標(biāo)題欄中。

第4步，單擊【分類】列表中的【外觀（CSS）】選項，在右側(cè)的【背景圖像】文本框中輸入網(wǎng)頁背景圖像的完整名稱。本例中，已將背景圖像復(fù)制到站點中的images文件夾中，因此輸入文件的相對路徑即可，單擊【瀏覽】按鈕可以在打開的對話框中快速找到背景圖像。

第5步，在【重復(fù)】下拉菜單中選擇repeat-x，即定義橫向重復(fù)，因為本頁背景圖像為漸變色圖像，只能在橫向上重復(fù)。

第6步，為使網(wǎng)頁在瀏覽器中不留空白邊距，可以在下面4個邊距文本框中輸入“0”，設(shè)置網(wǎng)頁與瀏覽器之間沒有邊距。

提示：在網(wǎng)頁設(shè)計時，如果使用的圖像文件不在站點中，可以單擊文本框右邊的【瀏覽】按鈕，在打開的對話框中查找圖像。單擊【確定】按鈕后，系統(tǒng)會彈出提示對話框詢問是否把該圖像保存到站點內(nèi)，并打開【復(fù)制文件為】對話框讓用戶保存該圖像到站點內(nèi)。

第7步，單擊【分類】列表中的【鏈接】選項，在右側(cè)的文本框中設(shè)置鏈接文本在不同狀態(tài)下的樣式。

本例中，為了使鏈接文本和網(wǎng)頁整體顏色協(xié)調(diào)一致，設(shè)置【鏈接顏色】（正常狀態(tài)下）為#663300，【交換圖像鏈接】（鼠標(biāo)指針經(jīng)過鏈接時）為#857940，【已訪問鏈接】（單擊后的文本鏈接）為#663300，和正常狀態(tài)顏色一致。

第8步，在【下劃線樣式】下拉列表框中選擇“交換圖像時隱藏圖像”選項，即當(dāng)鼠標(biāo)指針經(jīng)過鏈接時不再顯示系統(tǒng)默認(rèn)的顯示下劃線效果。

第9步，使用表格布局頁面。上下共插入兩個并列的表格，然后在第2個表格中嵌入多個不同層級的表格。

提示：插入的表格要隱藏邊框，設(shè)置單元格邊距和單元格間距為0，避免這些屬性對頁面的影響。關(guān)于表格的行數(shù)、列數(shù)可以根據(jù)需要自由設(shè)置，表格的長度一般設(shè)置原則為：最外圍表格建議指定固定數(shù)值，單位為像素；嵌套表格可以設(shè)置為百分比，一般情況下為100%。表格之間可以嵌套，嵌套表格的目的是為了更詳細(xì)地布局網(wǎng)頁，但建議不要嵌套太深，一般不要超過5層，最好保持在3層內(nèi)。此時可以放大視圖，以方便觀察。

第10步，在表格中插入圖像。在插入前，先在表格的單元格中單擊，選擇【插入】|【圖像】|【圖像】命令，打開【選擇圖像源文件】對話框。在該對話框的文件列表中選擇要插入的圖像文件。單擊【確定】按鈕，選定的圖像即被插入到單元格中。

第11步，在表格中插入背景圖像。網(wǎng)頁可以設(shè)置背景圖像，表格、單元格、行都可以設(shè)置背景圖像。背景圖像在插入表格之后會根據(jù)表格大小進行重復(fù)顯示。當(dāng)表格比圖像小時，則顯示局部圖像；當(dāng)表格比圖像大時，則重復(fù)顯示圖像；如果希望正好顯示背景圖像，可以設(shè)置單元格大小和圖像大小一致。

第12步，在網(wǎng)頁中輸入和設(shè)置文本。將插入點定位到需要插入文本的位置，然后輸入文本即可。

在設(shè)計網(wǎng)頁時要設(shè)置文本屬性，首先要選定文本。在【屬性】面板中設(shè)置：文本的顏色為深色，字體大小為12像素。在該頁面中運用了樣式maincontent，使用樣式的好處就是能夠快速便捷地控制頁面元素的屬性，例如，定義一個樣式maincontent，代碼如下：

..maincontent {   

font-size: 12px;   

color: #663300;   

line-height: 20px;   

font-family: arial, helvetica, sans-serif;   

text-decoration: none}

上面代碼就表示定義元素的字體大小為12像素，顏色為#663300，行高為20px，字體為arial、helvetica、sans-serif中的一種，不定義文本修飾。定義完畢樣式，就可以把這些樣式應(yīng)用到網(wǎng)頁中任何選中的文本。

第13步，設(shè)置超鏈接文本。選定要作為超鏈接載體的文本，在【屬性】面板中【鏈接】文本框中直接輸入目標(biāo)網(wǎng)頁文件的絕對URL，如files/documnets.html。

第14步，完成頁面設(shè)計操作，按Ctrl+S快捷鍵保存文檔，然后按F12鍵在瀏覽器中預(yù)覽。