第一節(jié) CSS樣式表基礎(chǔ)
教學(xué)課題：CSS樣式表基礎(chǔ)
教學(xué)目標(biāo)：1、了解CSS樣式表的定義及特點(diǎn)
2、掌握CSS樣式表的四種基本類型
教學(xué)重點(diǎn)：了解四種CSS樣式表基本類型的區(qū)別
教學(xué)難點(diǎn)：四種CSS樣式表基本類型的代碼實(shí)現(xiàn)
教學(xué)方法：教師講授法、任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：2節(jié)
教學(xué)過程：
1、導(dǎo)入：略
2、講解新課
【技能要點(diǎn)】
- CSS樣式表的定義
- CSS樣式表的特點(diǎn)
- CSS樣式表的四種樣式定義
- CSS樣式表的四種樣式的代碼實(shí)現(xiàn)
【知識(shí)點(diǎn)詳解】
- CSS樣式表的定義
- CSS樣式表的特點(diǎn)
- 將網(wǎng)頁格式與結(jié)構(gòu)分離
- 更加精確的控制頁面外觀
- 更快更容易的將多個(gè)網(wǎng)頁同時(shí)更新
- 制作體積更小，下載更快的網(wǎng)頁
- 瀏覽器支持完善
3、 CSS樣式表的四種樣式代碼實(shí)現(xiàn)
(1) 重定義HTML標(biāo)簽
代碼實(shí)現(xiàn)： tr{color:#0088CC;font-size:24px}
(2) 類樣式
代碼實(shí)現(xiàn)：.bg{background-image:url(bg.gif);}
(3) 包含特定ID屬性的標(biāo)簽
代碼實(shí)現(xiàn)：#pencil{font-family:”宋體”}
(4) 復(fù)合內(nèi)容
代碼實(shí)現(xiàn)：
a:link{color:#FF3366;font-family:”宋體”;text-decoration:none;}
4、作業(yè)
(1) 了解CSS樣式表的定義和特點(diǎn)
(2) 能夠書寫數(shù)CSS樣式表四種樣式的代碼
第二節(jié) 頁面中使用CSS樣式表
教學(xué)課題：頁面中使用CSS樣式表
教學(xué)目標(biāo)：掌握使用CSS樣式表設(shè)置頁面各種樣式
教學(xué)重點(diǎn)：設(shè)置文本，區(qū)塊，文字樣式
教學(xué)難點(diǎn)：使用CSS樣式表設(shè)置頁面樣式
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：2節(jié)
教學(xué)過程：
1、導(dǎo)入：略
2、講解新課
演示案例1：頁面中使用CSS樣式表—我的博客幫
【需求分析】
CSS樣式可以定義許多類型的樣式，例如：文本樣式，區(qū)塊樣式，邊框樣式等等，定義這些樣式都有相應(yīng)的對(duì)話框。
【技能要點(diǎn)】
- 插入CSS樣式的方法。
- CSS樣式中各個(gè)屬性的設(shè)置
【操作步驟】
步驟一：展示原始圖8-1
圖8-1
步驟二：設(shè)置背景樣式
步驟三：設(shè)置文本樣式
步驟四：設(shè)置邊框樣式
步驟五：設(shè)置擴(kuò)展樣式
步驟六：設(shè)置鏈接樣式
【我的博客幫CSS樣式要求】
- Judie Liang：
類選擇器 命名：.biaoti
字體顏色：橘色
字體：Georgia, "Times New Roman", Times, serif
字體大?。?.5em
Font-weight:bold(黑體)
行高(line-height)：1.4em
Text-align:右對(duì)齊 right
(2) 2012-11-20：
類選擇器 命名：.date
字體顏色：灰色
字體：Georgia, "Times New Roman", Times, serif
字體大?。?em
Font-weight:bold(黑體)
Text-align:右對(duì)齊 right
(3) 我的博客幫圖片：
類選擇器 命名：.form
邊框：小圓點(diǎn) 8px 橘色
(4)照片：類選擇器 命名：.pic
模糊度：Alpha 屬性：Opacity為90 X型放射
(5)正文： 類選擇器 命名：.content
字體顏色：紅色
字體：幼圓
字體大?。?.2em
Font-weight:bold(黑體)
行高(line-height)：1.6em
Text-align:右對(duì)齊 right
(6) 水平線：長(zhǎng)度：50%，右對(duì)齊，顏色自選
按快捷鍵F12預(yù)覽頁面，如圖8-2所示。
圖8-2
【作業(yè)】
為自己創(chuàng)建一個(gè)個(gè)人頁面，并運(yùn)用上課講的CSS樣式美化頁面。
第三節(jié) 將CSS樣式表應(yīng)用于整個(gè)網(wǎng)站
教學(xué)課題：將CSS樣式表應(yīng)用于整個(gè)網(wǎng)站
教學(xué)目標(biāo)：掌握頁面中導(dǎo)入外部樣式表的方法
教學(xué)重點(diǎn)：1、導(dǎo)出外部樣式表
2、應(yīng)用外部樣式表導(dǎo)入頁面
教學(xué)難點(diǎn)：導(dǎo)入style.css樣式表的方法
教學(xué)方法：教師講授法、任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：1節(jié)
教學(xué)過程：
1、導(dǎo)入：略
2、講解新課
演示案例2：將外部CSS樣式表導(dǎo)入頁面
【需求分析】
根據(jù)已有的CSS樣式表，添加“附加樣式表”命令，將樣式應(yīng)用到整個(gè)網(wǎng)頁中。
【技能要點(diǎn)】
- 導(dǎo)入外部CSS樣式表的方法
- 外部CSS樣式表的樣式理解
【操作步驟】
(1) 打開完成頁面，切換到“代碼”視圖，復(fù)制其中關(guān)于CSS樣式表的部分，即在標(biāo)簽<style>和</style>之間的代碼，如圖8-3所示。
圖8-3
(2) 在Dreamweaver CS5菜單欄中選擇“文件”—>”新建”，在打開的“新建文檔”中，選擇“空白頁”的“CSS”，點(diǎn)擊“創(chuàng)建”按鈕，將復(fù)制的代碼粘貼到新建的CSS頁面文件中，并保存到站點(diǎn)文件夾中，如圖8-4和圖8-5所示。
圖8-4
圖8-5
(3) 打開另一個(gè)事例頁面，單擊“CSS樣式”面板右上方的擴(kuò)展按鈕，從下拉菜單中選擇“附加樣式表”命令，如圖8-6所示。
圖8-6
(4) 最后將各自的項(xiàng)目，加上各自的樣式表，可以看到頁面美化完成的效果，最后頁面效果如圖8-7。
圖8-7
【作業(yè)】
學(xué)生上機(jī)練習(xí)利用外部CSS樣式表來加入CSS樣式。
第四節(jié) 綜合案例
教學(xué)課題：綜合案例
教學(xué)目標(biāo)：利用綜合案例考察本章所學(xué)知識(shí)點(diǎn)
教學(xué)重點(diǎn)：考察鏈接的四種樣式的設(shè)置
教學(xué)難點(diǎn)：各種CSS樣式設(shè)置的方法和特點(diǎn)
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：2節(jié)
教學(xué)過程：
1、導(dǎo)入：略
2、講解新課
演示案例3：綜合案例
【需求分析】
根據(jù)之前學(xué)過的添加CSS樣式的方法，將綜合案例中的各部分內(nèi)容添加樣式，利用Dreamweaver CS5設(shè)置網(wǎng)頁的文字樣式，背景樣式，區(qū)塊樣式，邊框樣式，圖像透明度樣式以及鏈接樣式等等。
【操作步驟】
1 打開“css.html”文件
2 將其中的圖片設(shè)置Alpha透明度
3 正文部分“類選擇器”設(shè)置相應(yīng)的字體
4 鏈接用“復(fù)合內(nèi)容”設(shè)置鏈接的四種樣式
5 “會(huì)員登錄”部分用“HTML選擇器”設(shè)置表格的列的樣式進(jìn)行設(shè)置。
6 頁面原始圖，如圖8-8所示
圖8-8
7 添加CSS樣式之后的頁面效果，如圖8-9
圖8-9
【作業(yè)】
學(xué)生上機(jī)練習(xí)斯美泰網(wǎng)頁添加CSS樣式的方法。
