《中文版Dreamweaver CS5網頁設計實用教程》第6章 Div+CSS布局網頁

中文版DreamweaverCS5網頁設計實用教程網頁布局的基本知識6.1第6章Div+CSS布局網頁6.2使用Div+CSS布局網頁6.1網頁布局的基本知識

在建立網頁前先制定一個網頁布局。通常，一個網頁布局包括頁眉、正文和頁腳三大部分。然后再根據需要細分這三個部分的結構。本章準備建立的網頁布局結構圖如圖6-1所示。（1）頁眉被分為兩個部分，左側區(qū)域用來放置網站的標識圖，右側用來放置一些鏈接文字。（2）正文被分為三個部分，兩側的小欄和中間一個大欄。（3）頁腳保持為一個完整的通欄。頁眉正文頁腳圖6-1網頁布局結構圖6.2使用Div+CSS布局網頁

（1）如圖6-2所示，雙擊文件面板中的index.html文件圖標，打開該文件。也可以新建一個文件，跟隨練習。圖6-2新建文件6.2使用Div+CSS布局網頁

（2）如圖6-3所示，單擊插入面板的布局標簽，切換到布局選項卡。圖6-3切換到布局選項卡6.2使用Div+CSS布局網頁

（3）執(zhí)行“修改/頁面屬性”命令，打開圖6-4所示的“頁面屬性”對話框。圖6-4“頁面屬性”對話框6.2使用Div+CSS布局網頁

（4）設置上邊距為0像素，單擊“確定”按鈕。（5）如圖6-5所示，單擊“插入Div標簽”按鈕，打開“插入Div標簽”對話框。圖6-5“插入Div標簽”對話框6.2使用Div+CSS布局網頁

（6）如圖6-6所示，在打開的Div標簽對話框的ID欄中，輸入準備新建Div區(qū)域的名稱。ID命名需要以英文字母開頭，不要以數字或其他字符開頭。圖6-6輸入準備新建的Div區(qū)域的名稱6.2使用Div+CSS布局網頁

（7）如圖6-7所示，單擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框。圖6-7“新建CSS規(guī)則”對話框6.2使用Div+CSS布局網頁

（8）如圖6-8所示，選擇“（僅限該文檔）”，然后單擊“確定”按鈕進入到CSS規(guī)則定義對話框。圖6-8進入CSS規(guī)則定義對話框6.2使用Div+CSS布局網頁

圖6-9所示為“CSS規(guī)則定義”對話框。在該對話框的分類欄中包含了類型、背景、區(qū)塊等設置項，通過這些分類項就可以設置目標內容的樣式。圖6-9“CSS規(guī)則定義”對話框6.2使用Div+CSS布局網頁9）如圖6-10所示，先單擊分類欄中的背景，然后再單擊右側的Bachground-color按鈕，選擇該Div區(qū)域的背景顏色，或者直接在Bachground-color按鈕右側的欄中輸入色彩值。圖6-10選擇Div區(qū)域的背景顏色6.2使用Div+CSS布局網頁

（10）如圖6-11所示，單擊分類欄中的方框，然后設置Width為720像素，Height為120像素。圖6-11設置寬度和高度6.2使用Div+CSS布局網頁

（11）如圖6-12所示，取消“margin”中對“全部相同”復選框的勾選，然后分別設置Right和Left均為auto。這樣設置可以保證Div區(qū)域在網頁中居中顯示。圖6-12設置網頁中居中6.2使用Div+CSS布局網頁

（12）如圖6-13所示，單擊分類欄中的定位，然后設置Overflow為hidden。圖6-13設置Overflow為hidden6.2使用Div+CSS布局網頁

（13）單擊“CSS規(guī)則定義”對話框的“確定”按鈕，回到圖6-14所示的界面。圖6-14設置Div的工作界面6.2使用Div+CSS布局網頁

（14）單擊“插入Div標簽”對話框的“確定”按鈕，完成Div插入，結果如圖6-15所示。圖6-15完成Div插入6.2使用Div+CSS布局網頁（15）選擇Div區(qū)域中的文字，然后刪除。（16）單擊插入面板的“插入Div標簽”按鈕，打開“插入Div標簽”對話框。（17）如圖6-16所示，在插入Div標簽對話框的ID欄中命名該ID為h-logo。圖6-16在ID欄中命名6.2使用Div+CSS布局網頁（18）如圖6-17所示，單擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框。圖6-17“新建CSS規(guī)則”對話框6.2使用Div+CSS布局網頁（19）單擊“新建CSS規(guī)則”的“確定”按鈕，打開“CSS規(guī)則定義”對話框。（20）如圖6-18所示，在CSS規(guī)則對話框中設置分類項方框的Width為240像素，Height為120像素，F(xiàn)loat為left。圖6-18設置分類項方框6.2使用Div+CSS布局網頁（21）設置分類項定位的Overflow值為hidden。（22）連續(xù)單擊“確定”按鈕，完成Div區(qū)域的插入，最終結果如圖6-19所示。圖6-19完成Div區(qū)域的插入6.2使用Div+CSS布局網頁（23）單擊插入面板的“插入Div標簽”按鈕，打開“插入Div標簽”對話框。（24）如圖6-20所示，設置插入欄為“在標簽之后”。圖6-20設置插入欄6.2使用Div+CSS布局網頁（25）如圖6-21所示，選擇目標標簽。圖6-21選擇目標標簽6.2使用Div+CSS布局網頁（26）在插入Div標簽對話框的ID欄中設置ID為h-right。（27）如圖6-22所示，單擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框。圖6-22“新建CSS規(guī)則”對話框6.2使用Div+CSS布局網頁（28）單擊新建CSS規(guī)則對話框的“確定”按鈕，打開“CSS規(guī)則定義”對話框。（29）如圖6-23所示，設置分類項方框的Width為480像素，Height為120像素，F(xiàn)loat為left。圖6-23設置分類項方框6.2使用Div+CSS布局網頁（30）設置分類項定位的Overflow為hidden。（31）連續(xù)單擊“確定”按鈕，完成新的Div區(qū)域添加。最終結果如圖6-24所示。圖6-24完成新的Div區(qū)域添加6.2使用Div+CSS布局網頁

（32）單擊插入面板的“插入Div標簽”按鈕，打開“插入Div標簽”對話框。（33）按圖6-25所示設置，然后單擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框。圖6-25“新建CSS規(guī)則”對話框6.2使用Div+CSS布局網頁（34）單擊“新建CSS規(guī)則”對話框的“確定”按鈕，打開“CSS規(guī)則定義”對話框。（35）按圖6-26所示，設置正文部分的背景色。圖6-26設置正文部分的背景色6.2使用Div+CSS布局網頁（36）按圖6-27所示，設置方框的寬、高和邊界。圖6-27設置方框的寬、高和邊界6.2使用Div+CSS布局網頁

（37）設置分類項定位的Overflow為hidden。

（38）連續(xù)單擊“確定”按鈕，完成正文部分的區(qū)域建立，結果如圖6-28所示。圖6-28完成正文部分的區(qū)域建立6.2使用Div+CSS布局網頁

當需要對已建立區(qū)域的屬性進行修改時，可以進行以下操作：（1）執(zhí)行“窗口/CSS樣式”命令，如圖6-29所示，打開CSS樣式面板。圖6-29打開