通過Dreamweaver_CS3學習HTML+DIV+CSS_第3章__網(wǎng)頁主體Body.ppt

第3章網(wǎng)頁主體Body 在第1章中讀者了解到網(wǎng)頁主體的內(nèi)容是網(wǎng)頁呈現(xiàn)給瀏覽者的信息 是網(wǎng)頁的中心和重心所在 標簽設置關系到網(wǎng)頁的全局效果 例如 網(wǎng)頁背景為網(wǎng)頁增添了一份色彩 鏈接文字顏色的正確設置為瀏覽者在瀏覽過程中提供了許多的方便 本章將詳細地介紹網(wǎng)頁主體的標簽設置及其源碼 3 1網(wǎng)頁背景 網(wǎng)頁背景的適當設置 可以輔助突出主題 所以是網(wǎng)站風格定位的一個重要元素 網(wǎng)頁背景可以是單純的顏色 也可以是圖片 下面介紹如何進行設置 3 1 1修改背景顏色 沒有設置背景顏色的網(wǎng)頁都是白底黑字 設置背景顏色可以使網(wǎng)頁改變這種單調(diào)枯燥的外觀 設置背景顏色的具體步驟如下 無背景效果圖 屬性 面板 3 1 1修改背景顏色 單擊 頁面屬性 按鈕 彈出 頁面屬性 對話框 單擊 背景顏色 下三角按鈕 彈出調(diào)色板 頁面屬性 對話框調(diào)色板 3 1 1修改背景顏色 單擊 確定 按鈕 完成背景顏色的設置 背景顏色效果 3 1 1修改背景顏色 手動設置背景顏色的具體步驟如下 屬性 面板 3 1 2設置背景圖像 前面講解了如何設置網(wǎng)頁背景顏色 雖然設置背景顏色為網(wǎng)頁增添了不少色彩 但是還略顯單調(diào) 本小節(jié)將介紹如何設置背景圖像 具體步驟如下 選擇圖像源文件 對話框 3 1 2設置背景圖像 單擊 確定 按鈕 完成背景圖像設置 效果如圖 設置背景圖像效果 3 1 3設置背景圖片的重復方式 默認背景圖像以重復方式布滿整個頁面 可以設置不同的重復方式 具體步驟如下 不重復方式效果橫向重復效果縱向重復效果 3 2文字顏色 為網(wǎng)頁內(nèi)容加上色彩 可以更好地表達內(nèi)容的主題 網(wǎng)頁內(nèi)容包含鏈接文字和普通文字 本節(jié)將介紹如何設置文字的顏色 3 2 1設置文字默認顏色 在網(wǎng)頁中 普通文字在 設計 視圖中的默認顏色是黑色 設置文字默認顏色的具體步驟如下 默認顏色效果設置默認顏色效果 3 2 2更改超鏈接文字顏色 超鏈接文字有3種狀態(tài) 分別是未訪問 激活和已訪問 為了方便瀏覽者清楚哪些網(wǎng)頁已經(jīng)被瀏覽過 可以把超鏈接文字的3種狀態(tài)設置為不同的顏色 以示區(qū)分 在默認狀態(tài)下 超鏈接未訪問文字的顏色和激活文字的顏色是藍色 已訪問文字的顏色是紫色 可以通過設置改變超鏈接不同狀態(tài)的顏色 以適合頁面的統(tǒng)一 具體步驟如下 含超鏈接效果 3 2 2更改超鏈接文字顏色 分別為已訪問鏈接 活動鏈接和變化圖像鏈接設置顏色值為 3300FF 00FF00和 006633 保存文檔并按F12鍵進行預覽 單擊超鏈接后 效果如圖 設置鏈接顏色效果圖 激活鏈接效果 已訪問鏈接效果 變化圖像鏈接效果 3 3設置頁面邊距 頁面邊距指網(wǎng)頁中的內(nèi)容與頁面四邊之間的距離 如果內(nèi)容布滿了整個頁面且沒有一點空隙 那么網(wǎng)頁會非常不美觀 適當?shù)卦O置頁面邊距 會使頁面看起來大方得體 3 3設置頁面邊距 如果需要重新設置頁面邊距 如下 默認邊距效果零邊距效果 3 4專家總結 通過本章的學習 掌握了背景顏色 背景圖像 文