1.5 多彩文案稿——網(wǎng)頁背景

在本章綜述了網(wǎng)頁文本的使用之后，將會發(fā)現(xiàn)文本的表現(xiàn)效果還比較單調(diào)，此時可通過對文本定義背景顏色、應(yīng)用背景圖像等操作，快速轉(zhuǎn)變文本的表現(xiàn)效果。

1.5.1 文本的背景顏色

在設(shè)計網(wǎng)頁時，網(wǎng)頁文本的背景顏色是以文本當前所在對象的背景顏色為基礎(chǔ)的。例如文本直接在網(wǎng)頁中，文本的背景顏色以網(wǎng)頁背景顏色為依據(jù)；如果文本是在表格的單元格中，則文本的背景顏色將以表格單元格背景顏色為依據(jù)。

當然，除了依賴文本所在對象的背景顏色為自身背景顏色外，還可以對文本進行單獨定義背景顏色。同樣，此時還將使用CSS進行定義。

01 如圖1-36所示，新建一個網(wǎng)頁“index.html”，并在Dreamweaver文檔窗口中打開。

02 打開【CSS樣式】面板，單擊面板底部的【新建CSS規(guī)則】按鈕。

03 彈出【新建CSS規(guī)則】對話框：

ⅰ.在【選擇器類型】中選擇“類（可應(yīng)用于任何標簽）”單選按鈕。

ⅱ.在【名稱】中輸入“txtbg”表示設(shè)置文本背景。

ⅲ.在【定義在】中選擇“僅對該文檔”單選按鈕。

04 單擊【確定】按鈕進行該自定義樣式的具體設(shè)置。

01 如圖1-37所示，在打開的【.txtbg的CSS規(guī)則定義】對話框的【分類】列表中選擇“背景”選項。

02 在對話框右側(cè)單擊【背景顏色】拾取器，在色盤上選擇顏色為“#3333CC”。這就表示了設(shè)置當前自定義樣式的背景顏色為十六進制是“#3333CC”的藍色。

03 此外，還可以繼續(xù)定義文本的顏色。如圖1-38所示，在【分類】列表中選擇“類型”選項，選項單擊右側(cè)【顏色】拾取器，在彈出的色盤中選擇“#FFFFFF”白色。

04 定義了文本的顏色以及背景色后，單擊【確定】按鈕完成該樣式的設(shè)定。

01 如圖1-39所示，在網(wǎng)頁文檔中輸入文本“這里有一段藍色背景白色文字的文本”。

02 選擇該段文本中的“藍色背景白色文字”，打開【屬性】面板，在【樣式】下拉列表框中選擇樣式“txtbg”。

03 保存網(wǎng)頁文件，按【F12】鍵查看預(yù)覽效果，“藍色背景白色文字”如實展示了背景色和前景色。

1.5.2 文本的背景圖像

在網(wǎng)頁應(yīng)用中，除了可以對文本定義背景顏色以外，還可以對文本的背景圖像進行定義以獲得更好的視覺效果。

首先，準備一張圖像文件，該圖像文件與網(wǎng)頁文件最好能保持在同一站點之下的關(guān)系。如圖1-40所示，網(wǎng)頁文件“index.html”即與圖像文件“l(fā)ine.gif”在同一文件夾內(nèi)，并將它們建立一個Dreamweaver站點便于本節(jié)操作講解所用（文件路徑為：光盤“\Pages\Part1\1-5\”文件夾）。

在圖1-40所示的圖像“l(fā)ine.gif”預(yù)覽中可以看出，其是由一段虛線組成的圖形，在應(yīng)用的文本中可以用作文本底部的虛線，形成類似于在信件稿紙寫字的效果。那么如果實現(xiàn)這樣的要求呢？

01 在文檔窗口中打開網(wǎng)頁文件“index.html”。

02 打開【CSS樣式】面板，單擊面板底部的【新建CSS規(guī)則】按鈕。

03 彈出【新建CSS規(guī)則】對話框，如圖1-41所示：

ⅰ.在【選擇器類型】中選擇“類（可應(yīng)用于任何標簽）”單選按鈕。

ⅱ.在【名稱】中輸入“bgimg”表示設(shè)置背景圖像。

ⅲ.在【定義在】中選擇“僅對該文檔”單選按鈕。

04 單擊【確定】按鈕進行該自定義樣式的具體設(shè)置。

01 如圖1-42所示，在打開的【.bgimg的CSS規(guī)則定義】對話框中，選擇【分類】列表中的“背景”選項。

02 通過單擊【背景圖像】后的【瀏覽】按鈕選取獲得“背景圖像”，即“l(fā)ine.gif”。

03 在【重復(fù)】下拉列表框中選擇“橫向重復(fù)”，表示當前的“l(fā)ine.gif”在橫向上可以任意次的重復(fù)顯示，這樣就可以拼湊成無縫任意長的虛線背景。

04 在【垂直位置】下拉列表框中選擇“底部”。

05 單擊【確定】按鈕即可完成對該CSS樣式的定義。

01 如圖1-43所示，在文檔中輸入“一個段落內(nèi)強制換行的三段文本”。

02 依次選擇每段文本，打開【屬性】面板，在【樣式】下拉列表框中選擇剛定義的“bgimg”樣式。

03 設(shè)置完成后，保存網(wǎng)頁并按【F12】鍵進行預(yù)覽。此時即可看到每段文本的底部均出現(xiàn)了虛線的背景圖像，并且背景圖像的橫向長度是隨著應(yīng)用了樣式的文本的長度變化而變化的。

注：關(guān)于本小節(jié)介紹的CSS【背景】的使用，不僅僅是針對文本，在本章下面要介紹的各類元素，諸如圖像、多媒體，甚至是整個網(wǎng)頁均可應(yīng)用該樣式，表現(xiàn)出樣式定義了的視覺效果。