如何定義文本類 在Dreamweaver中

定義文本類

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

【操作步驟】

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

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

第3步，在“源”列表框標題欄右側單擊加號按鈕泰，從彈出的下拉列表中選擇“在頁面中定義” 選項，定義一個內部樣式表，如圖所示。

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

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

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

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

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

第9步，切換到代碼視圖下 Dreamweaver CC會為<p>標簽應用red類樣式。

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

對話框，在該對話框的列表框中會顯示當前文擋中所有類樣式，從中選擇為當前段落文本應用多個類

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

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