Dreamweaver 入門(mén):使用CSS設(shè)置頁(yè)面格式(4)_Dreamweaver教程
提示有關(guān) CSS 屬性的更多信息,請(qǐng)參見(jiàn) Dreamweaver 中包含的 O'Reilly 參考指南。若要顯示該指南,請(qǐng)選擇"幫助">"參考",然后從"參考"面板的彈出式菜單中選擇"O'Reilly CSS 參考"。
單擊"確定"。
單擊"CSS 樣式"面板頂部的"所有"按鈕。
若未展開(kāi) cafe_townsend.css 類別,則單擊該類別旁邊的加號(hào) ( ) 按鈕。
您可以看到,Dreamweaver 已將 .bold 類樣式添加到在外部樣式表中定義的規(guī)則列表中。假如您在"所有規(guī)則"窗格中單擊 .bold 規(guī)則,則該規(guī)則的屬性將出現(xiàn)在"屬性"窗格中。新規(guī)則還出現(xiàn)在"屬性"檢查器的"樣式"彈出式菜單中。
將類樣式應(yīng)用到文本
現(xiàn)在,您已經(jīng)創(chuàng)建了一個(gè)類規(guī)則,并將該規(guī)則應(yīng)用到某些段落文本。
在"文檔"窗口中,選擇第一段中文本的前四個(gè)單詞:Cafe Townsend's visionary chef。
在"屬性"檢查器("窗口">"屬性")中,從"樣式"彈出式菜單中選擇"bold"。

"粗體"類樣式將應(yīng)用到您的文本。
重復(fù)第 2 步,將"粗體"類樣式應(yīng)用到第二段的前四個(gè)單詞。

保存頁(yè)面。
設(shè)置導(dǎo)航條文本的格式
接下來(lái),您將使用 CSS 將樣式應(yīng)用到導(dǎo)航條的鏈接文本。許多 Web 頁(yè)面使用內(nèi)含文本的彩色矩形圖像來(lái)創(chuàng)建導(dǎo)航條。但是,假如使用 CSS,您所需要設(shè)置的只是鏈接文本和一些格式。通過(guò)使用 display: block 屬性并設(shè)置塊的寬度,您可以有效地創(chuàng)建矩形,而不需要另外使用圖像。
為導(dǎo)航創(chuàng)建新規(guī)則
若未打開(kāi) cafe_townsend.css 文件,則打開(kāi)該文件,或單擊其選項(xiàng)卡來(lái)顯示該文件。
定義一個(gè)新規(guī)則,方法是在該文件的 .bold 類樣式后面鍵入以下代碼:
.navigation {
}
這是一個(gè)空規(guī)則。
文件中的代碼應(yīng)類似于下面的示例:

保存 cafe_townsend.css 文件。
接下來(lái),您將使用"CSS 樣式"面板向規(guī)則添加屬性。
若未打開(kāi) index.html 文件,則打開(kāi)該文件。
在"CSS 樣式"面板中,確保選中了"全部"模式,選擇新的 .navigation 規(guī)則,然后單擊面板右下角的"編輯樣式"。

在"CSS 規(guī)則定義"對(duì)話框中,執(zhí)行下面的操作:
在"字體"文本框中,輸入 Verdana, sans-serif。
從"大小"彈出式菜單中選擇 16,然后從緊靠其右的彈出式菜單中選擇像素。
從"樣式"彈出式菜單中選擇"正常"。
從"修飾"列表中選擇"無(wú)"。
從"粗細(xì)"彈出式菜單中選擇"粗體"。
在"顏色"文本框中,輸入 #FFFFFF。

若要顯示該指南,請(qǐng)選擇"幫助">"參考",然后從"參考"面板的彈出式菜單中選擇"O'Reilly CSS 參考"。
單擊"確定"。
現(xiàn)在,您將使用"CSS 樣式"面板向 .navigation 規(guī)則添加更多屬性。
在"CSS 樣式"面板中,確保選中了 .navigation 規(guī)則,然后單擊"顯示列表視圖"。
- 用Dreamweaver在網(wǎng)頁(yè)中插入Flash按鈕
- 在Dreamweaver中編寫(xiě)CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁(yè)時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁(yè)的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開(kāi)發(fā)效率
- 在DreamWeaver中編寫(xiě)CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁(yè)
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- Dreamweaver 8來(lái)構(gòu)建符合標(biāo)準(zhǔn)的Web站點(diǎn)
- 用Dreamweaver 8 搞定“web標(biāo)準(zhǔn)”
- DW網(wǎng)頁(yè)設(shè)計(jì)教程-多彩文字鏈接
- Dreamweaver MX進(jìn)階教程(八) 操作框架
- Dreamweaver MX進(jìn)階教程(九)使用用于框架的“行為”
- Dreamweaver MX進(jìn)階教程(十)制作居中的網(wǎng)頁(yè)
- 去除DW MX 2004表格寬度輔助
- Dreamweaver MX進(jìn)階教程(七)創(chuàng)建基于框架的網(wǎng)頁(yè)
- Dreamweaver網(wǎng)頁(yè)制作教程:菜單概述
- Dreamweaver MX進(jìn)階教程(十一)使用“層”布局網(wǎng)頁(yè)
猜你也喜歡看這些
- Dreamweaver MX 2004中文版完全自學(xué)手冊(cè)
- DIV.CSS應(yīng)用視頻教程(DIV+CSS)
- 北風(fēng)網(wǎng)資深web講師李炎恢講師Dreamweaver系列課程(已完結(jié)|45課時(shí))陸續(xù)更新中
- Dreamweaver8中文版職業(yè)應(yīng)用視頻教程(打包下載)
- CSS設(shè)計(jì)徹底研究視頻教程
- Dreamweaver MX 2004 官方簡(jiǎn)體中文版教程
- Dreamweaver 8完美網(wǎng)頁(yè)設(shè)計(jì): 網(wǎng)頁(yè)特效篇
- Dreamweaver 8 ASP動(dòng)態(tài)網(wǎng)頁(yè)編程完全自學(xué)手冊(cè)
- 呂聰賢dreamweaver教程
- 新編Dreamweaver MX2004 中文版輕松入門(mén)視頻教程 2CD
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索Dreamweaver 入門(mén):使用CSS設(shè)置頁(yè)面格式(4)
- 教程說(shuō)明:
Dreamweaver教程-Dreamweaver 入門(mén):使用CSS設(shè)置頁(yè)面格式(4)
。