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

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