實驗8 在網(wǎng)頁中添加樣式

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

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

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

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

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

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

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

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

9、選擇“下劃線”多選框。如圖8-13所示。 說明 “a:hover”的CSS樣式，表示當鼠標經(jīng)過鏈接文字時，所顯示的樣式。15單擊“確定”按鈕，返回網(wǎng)頁編輯窗口。選中“時尚話題”文字，在屬性面板“鏈接”編輯框內輸入“”，創(chuàng)建無址鏈接。如圖8-14所示。 圖 8-13 設置a:hover的CSS樣式 圖8-14 選中文字在連接編輯框輸入“#”16按Ctrl+S鍵保存網(wǎng)頁后，按F12鍵在瀏覽器中可以查看鏈接效果，如圖8-15所示。 鼠標指針經(jīng)過鏈接文字鼠標指針在鏈接文字外 圖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. 選擇“文件”>“導出”>“CSS樣式”命令，打開“導出樣式為CSS文件”對話框。在“保存在”列表中選擇導出的路徑，在“文件名”編輯框中輸入保存CSS文件的名稱“styli08”。如圖8-16所示。19. 單擊“保存”按鈕，完成CSS文件的保存。實驗作業(yè)模仿1.打開本書配套光盤07sucai08中提供的網(wǎng)頁page08.htm。2.創(chuàng)建標簽“td”的CSS樣式。3.創(chuàng)建類“.titli”的CSS樣式。4.在標題文字在應用“.titli”CSS樣式。5.創(chuàng)建鏈接效果的“高級”CSS樣式。6.創(chuàng)建文字標題無址鏈接，在瀏覽器中查看鏈接效果。7.導出CSS樣式表。創(chuàng)作1.創(chuàng)建HTML網(wǎng)頁，使用表格布局網(wǎng)頁結構。2.在表格和單元格內插入圖像和文字內容，填充網(wǎng)頁。3.在網(wǎng)頁中創(chuàng)建CSS樣式，定義網(wǎng)頁整體文字樣式。4.創(chuàng)建局部文字的CSS樣式，并在文字中