實驗15使用CSS美化網(wǎng)頁

1、實驗15 CSS選擇器1實驗?zāi)康模?）掌握CSS不同選擇器在網(wǎng)頁中的使用方法。（2）掌握在網(wǎng)頁上應(yīng)用CSS的方法。2實驗內(nèi)容利用CSS對“網(wǎng)絡(luò)與信息安全實驗教學(xué)”網(wǎng)站首頁進(jìn)行美工設(shè)計，效果如圖15-1所示。 圖15-1首頁效果圖3. 實驗步驟一創(chuàng)建“網(wǎng)絡(luò)與信息安全實驗教學(xué)”站點（1）將“實驗14”文件夾中的syjx文件夾復(fù)制到D盤；（2）啟動Dreamweaver，使用“站點新建站點”命令創(chuàng)建“網(wǎng)絡(luò)與信息安全實驗教學(xué)”站點，并指定syjx文件夾為“網(wǎng)絡(luò)與信息安全實驗教學(xué)”站點的本地根文件夾。二鏈接“首頁”的CSS樣式（1）將實驗14中定義好的網(wǎng)站首頁的樣式鏈接到首頁，在CSS樣式面板中選擇附加

2、樣式表按鈕，如圖所示15-2所示。 圖15-2 CSS面板 打開“鏈接外部樣式表”對話框，選擇已經(jīng)定義好的CSS樣式，如圖所示15-3所示。 圖15-3 “鏈接外部樣式表”對話框（2）方法2：在區(qū)域添加標(biāo)簽，通過設(shè)置其屬性來鏈接外部樣式表，代碼如下所示：。三應(yīng)用CSS樣式表中的相關(guān)樣式（1）導(dǎo)航樣式 選中導(dǎo)航菜單中的文字，在屬性面板上選擇樣式中的“menu”樣式，如圖15-4所示。 圖15-4 CSS菜單樣式（2）標(biāo)題樣式 選中每個模塊的標(biāo)題文字，在屬性面板上選擇樣式中的“new_title”樣式，如圖15-5所示。 圖15-5 CSS標(biāo)題樣式（3）正文樣式 選中每個模塊的標(biāo)題文字，在屬性面板

3、上選擇樣式中的“nr ”樣式，如圖15-6所示。 圖15-6CSS正文樣式（4）表格樣式 選中相應(yīng)的布局表格，在屬性面板上選擇樣式中的“table1”樣式，如圖15-7所示。 圖15-7 CSS表格樣式（5）版權(quán)信息欄樣式 選中相應(yīng)的布局表格，在屬性面板上選擇樣式中的“bq”樣式，如圖15-8所示。 圖15-8 CSS版權(quán)信息欄樣式4問題解答（1）使用樣式表有哪幾種方式？使用樣式表有4種方法，每種方法都有其不同的優(yōu)點： 將樣式表植入HTML文件中。 將一個外部樣式表鏈接到HTML文件上。 將一個外部樣式表輸入到HTML文件中。 將樣式表加入到HTML文件行中。（2）CSS的主要用途是什么？在網(wǎng)頁制作時采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。 它的作用可以達(dá)到： 在幾乎所有的瀏覽器上都可以使用。 以前一些非得通過圖片轉(zhuǎn)換實現(xiàn)的功能，現(xiàn)在只要用CSS就可以輕松實現(xiàn)，從而更快地下載頁面。 使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。 可以輕松地控制頁面的布局。 可以將站點上所有的網(wǎng)頁風(fēng)格都使用一個CSS文件進(jìn)行控制，只要修改這個CSS文件中相應(yīng)的行，那么整個站點的所有頁面都會隨之發(fā)生變動。5思考題（1）如何應(yīng)用不同的CSS選