如何定義文本類 在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ì)效果。
點(diǎn)擊加載更多評(píng)論>>