3.4 案例實(shí)戰(zhàn)：定義類文本

文本【屬性】面板中有一個(gè)【類】下拉列表框，在該下拉列表框中可以為選中文本應(yīng)用類樣式。下面通過一個(gè)案例演示如何應(yīng)用類樣式，設(shè)計(jì)類文本效果。

【操作步驟】

第1步，啟動Dreamweaver CC，新建文檔，保存為test.html。模仿3.3節(jié)方法完成多段文本的輸入操作。

第2步，選擇【窗口】｜【CSS設(shè)計(jì)器】命令，打開【CSS設(shè)計(jì)器】面板，如圖3.13所示。

圖3.13 打開【CSS設(shè)計(jì)器】面板

第3步，在【源】列表框標(biāo)題欄右側(cè)，單擊按鈕，從彈出的下拉列表中選擇【在頁面中定義】選項(xiàng)，定義一個(gè)內(nèi)部樣式表，如圖3.14所示。

圖3.14 定義內(nèi)部樣式表

第4步，在【@媒體】列表框中選擇【全局】選項(xiàng)，在【選擇器】列表框標(biāo)題欄右側(cè)，單擊按鈕添加一個(gè)樣式，然后輸入樣式選擇器的名稱為“.center”，如圖3.15所示。

圖3.15 定義樣式的選擇器名稱

第5步，在【屬性】列表框頂部分類選項(xiàng)中單擊【文本】按鈕，然后找到text-align屬性，在右側(cè)單擊【居中】按鈕，定義一個(gè)居中類樣式，如圖3.16所示。

圖3.16 定義居中類樣式

第6步，重復(fù)第3~5步操作，定義一個(gè).red類樣式，定義字體顏色為紅色，設(shè)置如圖3.17所示。

圖3.17 定義紅色類樣式

第7步，切換到【代碼】視圖下，在頁面頭部區(qū)域可以看到Dreamweaver CC自動生成的樣式代碼如下所示。如果用戶熟悉CSS語法，也可以直接手動輸入代碼，快速定義類樣式。

     <style type="text/css">
     .center { text-align: center; }
     .red { color: #FF0000; }
     </style>

第8步，切換到【設(shè)計(jì)】視圖，選中“《雨霖鈴》”文本，在【屬性】面板的【類】下拉列表框中可以看到剛才定義的類樣式，如圖3.11所示。在下拉列表框中可以預(yù)覽到類樣式的效果。從中選擇一種類樣式，如選擇紅色類（red），在編輯窗口中會立即看到選中文本顯示為紅色，如圖3.18所示。

圖3.18 應(yīng)用紅色類樣式

第9步，切換到【代碼】視圖下，Dreamweaver CC會為<p>標(biāo)記應(yīng)用red類樣式。

     <p class="red">《雨霖鈴》 </p>

第10步，在【屬性】面板的【類】下拉列表框中選擇【應(yīng)用多個(gè)類】選項(xiàng)，打開【多類選區(qū)】對話框，在該對話框的列表框中會顯示當(dāng)前文檔中所有類樣式，從中選擇為當(dāng)前段落文本應(yīng)用多個(gè)類樣式，如.center和.red，如圖3.19所示。

圖3.19 應(yīng)用多個(gè)類樣式

第11步，以同樣的方法為段落文本“柳永”應(yīng)用red和center類樣式，最后所得的頁面設(shè)計(jì)效果如圖3.20所示。

圖3.20 頁面設(shè)計(jì)效果