如何定義文本類 在Dreamweaver中

定義文本類

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

【操作步驟】

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

第2步，選擇“窗口” |“CSS設(shè)計(jì)器”命令，打開“CSS設(shè)計(jì)器”面板，如圖所示

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

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

第5步，在“屬性”列表框頂部分類選項(xiàng)中單擊“文本”按鈕(S,然后找到text-align屬性，在 右側(cè)單擊居中按鈕團(tuán)，定義一個(gè)居中類樣式

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

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

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

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

第10步，在“屬性”面板的“類”下拉列表框中選擇“應(yīng)用多個(gè)類”選項(xiàng)，打開“多類選區(qū)”

對(duì)話框，在該對(duì)話框的列表框中會(huì)顯示當(dāng)前文擋中所有類樣式，從中選擇為當(dāng)前段落文本應(yīng)用多個(gè)類

樣式，如.center和.red，如圖所示。

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