實(shí)驗(yàn)8 在網(wǎng)頁中添加樣式

1、實(shí)驗(yàn)8 在網(wǎng)頁中添加樣式 實(shí)驗(yàn)要求通過實(shí)驗(yàn)，了解如何在網(wǎng)頁中添加樣式，定義CSS樣式有三種：類、標(biāo)簽和高級(jí)，分別如何設(shè)置這三類樣式。 說明 默認(rèn)情況下，Dreamweaver使用層疊樣式表（CSS）樣式設(shè)置文本格式。使用屬性檢查器或菜單命令應(yīng)用于文本的樣式都將創(chuàng)建CSS規(guī)則，這些規(guī)則嵌入在當(dāng)前文檔的head部分中。CSS樣式使用用戶可以更加靈活地控制頁面外觀，從精確的布局定位到特定的字體和文本樣式。對(duì)應(yīng)知識(shí)點(diǎn)：創(chuàng)建CSS樣式應(yīng)用自定義CSS樣式對(duì)應(yīng)Macromedia Dreamweaver MX 2004標(biāo)準(zhǔn)教程第7章的內(nèi)容。實(shí)驗(yàn)課時(shí)：2課時(shí)實(shí)驗(yàn)素材沒有添加CSS樣式的網(wǎng)頁（可在本書配套光盤

2、exp8-9sucai08中查找）。實(shí)驗(yàn)步驟1.啟動(dòng)Dreamweaver MX 2004程序，打開本書配套光盤素材中準(zhǔn)備的實(shí)驗(yàn)素材“page08.htm”。如圖8-1所示。 說明 這是一個(gè)沒有進(jìn)行任何樣式設(shè)置的純文本網(wǎng)頁。我們通過這個(gè)網(wǎng)頁來完成在網(wǎng)頁中添加樣式的操作。2.選擇菜單“窗口”à“CSS樣式”命令，打開CSS樣式面板，如圖8-2 圖8-1 網(wǎng)頁素材 圖8-2CSS樣式面板 說明 按照定義CSS的方式，CSS在頁面中的使用方式主要有三種不同的類型。（1） 局部套用CSS樣式。將CSS語法定義在HTML標(biāo)記旁邊，這時(shí)定義的CSS樣式只能影響該HTML標(biāo)記，對(duì)于其他的HTML標(biāo)

3、記則無影響。（2） 在頁面開頭定義。這種方式是將CSS樣式表寫在<style></style>標(biāo)簽之間，內(nèi)置到HTML 的頭部，CSS樣式將影響整個(gè)頁面。這種方式適用于單個(gè)頁面的情況。（3） 鏈接外部樣式表。將編輯好的CSS樣式表存為CSS 文件，其擴(kuò)展名為.css.在設(shè)計(jì)網(wǎng)頁的過程中可以采用鏈接的方式將編輯好的CSS樣式表套用在頁面中，而無須在HTML中出現(xiàn)CSS語法。采用這種方法有個(gè)很大的優(yōu)點(diǎn)，就是可以一次讓多個(gè)頁面同時(shí)使用一個(gè)樣式表，當(dāng)更新或修改CSS樣式表的源文件.css時(shí)，所有使用該CSS樣式表的頁面將自動(dòng)更新。3.在CSS樣式面板中單擊“新建CSS樣式”按鈕

4、 ，或選擇菜單“文本”à “CSS樣式”> “新建”命令，打開“新建CSS樣式”對(duì)話框。如圖8-3所示。 說明 在Dreamweaver 中所能定義CSS樣式有三種。（1） 類（可應(yīng)用于各種標(biāo)簽）。即自定義CSS樣式，可以將CSS自定義樣式應(yīng)用到任何范圍或任何文本段中。（2） 標(biāo)簽（重新定義特定標(biāo)簽的外觀）。標(biāo)簽樣式將重新定義標(biāo)簽的格式，當(dāng)創(chuàng)建或修改標(biāo)簽的CSS樣式時(shí)，所有以該標(biāo)簽格式化的文本都將更新。（3） 高級(jí)（ID、上下文選擇器等）。CSS選擇器樣式將重新定義一些標(biāo)簽的特定格式或包含某指定屬性的所有標(biāo)簽的格式。4. 在“新建CSS樣式”對(duì)話框中，單擊“標(biāo)簽（重新定義特定標(biāo)

5、簽的外觀）”單選鈕，在“標(biāo)簽”下拉列表中選擇“td”選項(xiàng)，并單擊“僅對(duì)該文檔”單選鈕。如圖8-4所示。5.單擊“確定”按鈕，打開“td的CSS 樣式定義”對(duì)話框。在“大小”下拉列表中選擇“12像素”，單擊“顏色”調(diào)色板選擇黑色（色標(biāo)值為000000）。如圖8-5所示 圖8-4設(shè)置僅對(duì)該文檔定義td標(biāo)簽 圖8-5“td的CSS樣式定義 ”對(duì)話框6 單擊“確定”按鈕，在CSS 樣式面板上顯示標(biāo)簽td樣式，。如圖8-6所示此時(shí)網(wǎng)頁中的文字顯示為12px。7選中CSS 樣式面板上的“<樣式>”選項(xiàng)，單擊“編輯樣式表”按鈕 ，打開“樣式”對(duì)話框，在列表中顯示了已設(shè)置的CSS 樣式標(biāo)簽項(xiàng)。如圖

6、8-7所示。 圖8-6在CSS樣式面板上添加標(biāo)簽td樣式 圖8-7 樣式 對(duì)話框8單擊“新建”按鈕，打開“新建CSS 樣式”對(duì)話框。單擊“類（可應(yīng)用于任何標(biāo)簽）”單選鈕，在“名稱”編輯框中輸入“.title”，單擊“僅對(duì)該文檔”單選鈕。如圖8-8所示。9單擊“確定”按鈕，打開“.title”的CSS 樣式定義“對(duì)話框。在對(duì)話框中選擇字體為”黑體“。如果在”字體菜單“中沒有”黑體“選項(xiàng)，則可選擇”編輯字體列表“進(jìn)行設(shè)置，方法與本書前面實(shí)驗(yàn)介紹的相同。在”大小“下拉列表中選擇”24像素“。在”粗細(xì)“下拉列表中選擇”特粗“選項(xiàng)。在”顏色“調(diào)色板中選取藍(lán)色（色標(biāo)值為0033CC）。如圖8-9所示。10

7、單擊“確定“按鈕，返回”樣式“對(duì)話框，在列表中顯示了”.title“項(xiàng)，單擊“完成”按鈕，完成“.title“的CSS樣式定義。圖8-8 設(shè)置僅對(duì)該文檔定義.title類11選中“時(shí)尚生活“標(biāo)題，選擇菜單”文本“>”CSS樣式“>” title“選項(xiàng)，或右擊標(biāo)題在菜單中選擇”CSS樣式“>” title“選項(xiàng)，標(biāo)題應(yīng)用了title的樣式定義。如圖8-10所示。 圖8-9定義.title的CSS樣式 圖8-10 標(biāo)題應(yīng)用title的樣式定義 12再次選擇CSS樣式面板中的“編輯樣式表“按鈕，在”樣式“對(duì)話框中單擊”新建“，在”新建CSS樣式“對(duì)話框中選擇”高級(jí)（ID、上下文選擇

8、器等）“單選鈕，在”選擇器“下拉列表中選擇”a:link”選項(xiàng)，單擊“僅對(duì)該文檔”單選鈕，如圖8-11所示。13單擊“確定”按鈕，打開“a:link的CSS 樣式定義”對(duì)話框。在“顏色”調(diào)色板中選擇深藍(lán)色（色標(biāo)值為#003399），并單擊“修飾”區(qū)的“無”多選框。如圖8-12所示。 圖8-11僅對(duì)該文檔新建a:link樣式 圖8-12設(shè)置a:link的CSS樣式14單擊“確定”按鈕，返回“樣式”對(duì)話框。再次單擊“新建”按鈕，設(shè)置“高級(jí)”選擇器中的其他項(xiàng)的CSS樣式，設(shè)置方法以上步驟相同。需要注意的是在設(shè)置“a:hover”的CSS樣式時(shí)，選擇顏色為紅色（色標(biāo)值為#FF0000”）,“修飾”區(qū)中

9、選擇“下劃線”多選框。如圖8-13所示。 說明 “a:hover”的CSS樣式，表示當(dāng)鼠標(biāo)經(jīng)過鏈接文字時(shí)，所顯示的樣式。15單擊“確定”按鈕，返回網(wǎng)頁編輯窗口。選中“時(shí)尚話題”文字，在屬性面板“鏈接”編輯框內(nèi)輸入“”，創(chuàng)建無址鏈接。如圖8-14所示。 圖 8-13 設(shè)置a:hover的CSS樣式 圖8-14 選中文字在連接編輯框輸入“#”16按Ctrl+S鍵保存網(wǎng)頁后，按F12鍵在瀏覽器中可以查看鏈接效果，如圖8-15所示。 鼠標(biāo)指針經(jīng)過鏈接文字鼠標(biāo)指針在鏈接文字外 圖8-15瀏覽完也鏈接效果17返回Dreamweaver編輯窗口，單擊“顯示代碼視圖”按鈕 ，切換到代碼視圖模式，在網(wǎng)頁代碼&l

10、t;head></head>中顯示了如下CSS代碼：<style type=”text/css”><!TdFont-size:12px;Color:#000000;.titleFont-family:”黑體”；Font-size:24px;Font-weight:bolder;Color:#0033CC;a:linkcolor:#003399;text-decoration:none;A:visitedColor:#003399;Text-decoration:none;A:hoverColor:#FF0000;Text-decoration:underli

11、ne; -></style>18. 選擇“文件”>“導(dǎo)出”>“CSS樣式”命令，打開“導(dǎo)出樣式為CSS文件”對(duì)話框。在“保存在”列表中選擇導(dǎo)出的路徑，在“文件名”編輯框中輸入保存CSS文件的名稱“styli08”。如圖8-16所示。19. 單擊“保存”按鈕，完成CSS文件的保存。實(shí)驗(yàn)作業(yè)模仿1.打開本書配套光盤07sucai08中提供的網(wǎng)頁page08.htm。2.創(chuàng)建標(biāo)簽“td”的CSS樣式。3.創(chuàng)建類“.titli”的CSS樣式。4.在標(biāo)題文字在應(yīng)用“.titli”CSS樣式。5.創(chuàng)建鏈接效果的“高級(jí)”CSS樣式。6.創(chuàng)建文字標(biāo)題無址鏈接，在瀏覽器中查看鏈接效果。7.導(dǎo)出CSS樣式表。創(chuàng)作1.創(chuàng)建HTML網(wǎng)頁，使用表格布局網(wǎng)頁結(jié)構(gòu)。2.在表格和單元格內(nèi)插入圖像和文字內(nèi)容，填充網(wǎng)頁。3.在網(wǎng)頁中創(chuàng)建CSS樣式，定義網(wǎng)頁整體文字樣式。4.創(chuàng)建局部文字的CSS樣式，并在文字中