《Web前端開發(fā)之網(wǎng)頁設計》課程教學單元設計

教學單元3CSS基礎

授課教師：授課班級：學時：20

教學條件預裝Web前端開發(fā)工具HBuilder等的計算機：局域網(wǎng)環(huán)境；教學廣播軟件

教學素材教材、教學文檔、教學課件、案例項目庫、教學平臺等

教學目標設計

知識目標：能力目標：

(1)CSS基本概念(1)了解CSS的基本概念，掌握CSS的基本語法以及

⑵CSS選擇器在網(wǎng)頁中引入CSS的方法。

(3)CSS文本樣式(2)理解選擇器的作用，掌握CSS各類型選擇器的使

(4)CSS背景和邊框樣式用。

(5)CSS盒子模型(3)了解網(wǎng)頁文本、網(wǎng)頁元素的背景和邊框的各種屬

(6)CSS設置超鏈接和外衣樣式性，掌握它們的設置方法。

⑺設置表格和表單樣式(4)理解盒子模型，掌握對網(wǎng)頁元素進行內(nèi)、外邊距

⑻CSS浮動布局控制的方法。

(9)CSS定位布局⑸掌握運用CSS靈活設置超鏈接、列表、表格以及

(10)css的繼承性與優(yōu)先級表單外觀樣式的技能。

(6)了解CSS樣式屬性的繼承性與優(yōu)先級。

(1)CSS概述、CSS各種加載方法

⑵CSS選擇器基砒，掌握選擇器類型特征、適合場景

⑶CSS文本樣式，理解文本表現(xiàn)形式，掌握文本樣式設計

(4)CSS背景和邊框樣式，理解不同網(wǎng)頁元素表現(xiàn)形式，掌握背景與邊框樣式設計

教學內(nèi)容(5)CSS盒子模型，理解盒子模型原理，掌握內(nèi)外邊距、邊等屬性的設計要點

(6)CSS設置超鏈接和列表樣式，掌握超鏈接的樣式設計，各導航列表的樣式設計

(7)CSS設置表格和表單樣式，掌握利用表格實現(xiàn)分類，綜合利用所學來實現(xiàn)表單設計

(8)CSS浮動布局+CSS定位布局，掌握基礎布局技術，靈活實現(xiàn)綜合頁面設計

(9)CSS的繼承性與優(yōu)先級，掌握網(wǎng)頁元素顯示順序

重點：難點：

(1)CSS不同場景對加載方式的要求。(1)基礎網(wǎng)頁元素的樣式設置。

⑵文本、圖片、超鏈接、列表、表格、表單⑵網(wǎng)頁基礎結(jié)構(gòu)的樣式的設置。

等各種元素的背景、邊框等樣式。(3)表單、列表等復雜結(jié)構(gòu)的設置。

⑶用浮動、定位布局實現(xiàn)頁面樣式設計。⑷靈活運用基礎結(jié)構(gòu)來設置復雜的網(wǎng)頁結(jié)構(gòu)。

(4)關注網(wǎng)頁元素的繼承性與優(yōu)行級順序。

教學過程設計

任務3-1：CSS概述(2學時)

主要

教學內(nèi)容教學方法教學手段師生活動

步驟

任務教師講授教師：問題提問

什么是CSS?多媒體

引入啟發(fā)引入學生：問題討論

(1)CSS的發(fā)展史

教師：知識講解

知識⑵CSS在網(wǎng)頁布局中的三大優(yōu)勢啟發(fā)講解多媒體

學生：記錄筆記

講解(3)CSS語法規(guī)則討論歸納課件演示

師生互動交流

(4)網(wǎng)頁引入CSS的方法

問題引導老師：操作演示

示范操作1：CSS樣式設置方法。多媒體

操作演示學生：觀摩思考

操作操作2：網(wǎng)頁引入CSS的各種方法。系統(tǒng)演示

分析歸納老師：歸納總結(jié)

實戰(zhàn)1：利用外部樣式設置網(wǎng)頁字體

實戰(zhàn)顏色。動手實踐多媒體學生：實踐操作

訓練實戰(zhàn)2：利用行內(nèi)、內(nèi)嵌樣式來設置做中學系統(tǒng)操作老師：巡視檢查

網(wǎng)頁背景等效果。

⑴展示學生實戰(zhàn)任務完成的效果。

⑵評估討論實戰(zhàn)任務完成的正確性。教師啟發(fā)

評估學生：演示交流

⑶評估討論實戰(zhàn)任務完成的規(guī)范性：討論歸納實訓項目單

討論(4)記載學生實戰(zhàn)認為完成的考核結(jié)老師：點評激勵

分數(shù)激勵

果。

(1)歸納總結(jié)CSS的基本概念。

課堂多媒體學生：整理筆記

⑵歸納總結(jié)CSS三種樣式表適用不教師講解

總結(jié)課件演示老師：引導創(chuàng)新

同場景下元素樣式的設置。

老師:布置作業(yè)

諜后

3.1在線練習作業(yè)練習在線練習平臺提出要求

作業(yè)

學生：完成作業(yè)

教學過程設計

任務3-2：掌握CSS選擇器的用法。(2學時)

主要

教學內(nèi)容教學方法教學手段師生活動

步驟

任務教師講授教師：問題提問

選擇器的作用及基礎選擇器多媒體

引入啟發(fā)引入學生：問題討論

(l)CSS基本選擇器。

教師：知識講解

知識(2)CSS組合選擇器。啟發(fā)講解多媒體

學生：記錄筆記

講解(3)CSS屬性選擇器。討論歸納課件演示

師生互動交流

(4)CSS偽選擇器

操作1:使用基本選擇器選擇頁面元

索。

操作2：使用組合選擇器選擇頁面元問題引導老師：操作演示

示范多媒體

素。操作演示學生：觀摩思考

操作系統(tǒng)演示

操作3：使用屬性選擇㈱選擇頁面元分析歸納老師：歸納總結(jié)

素。

操作4：使用偽選擇器選擇頁面元素。

實戰(zhàn)1：使用基本選擇器選擇文本。

實戰(zhàn)實戰(zhàn)2：使用組合選擇器選擇文本。動手實踐多媒體學生：實踐操作

訓練實戰(zhàn)3：使用屬性選擇器選擇文本。做中學系統(tǒng)操作老師：巡視檢查

實戰(zhàn)4：使用偽選擇器選擇文本。

⑴展示學生實戰(zhàn)任務完成的效果。

⑵評估討論實戰(zhàn)任務完成的正確性。教師啟發(fā)

評估學生：演示交流

⑶評估討論實戰(zhàn)任務完成的規(guī)范性：討論歸納實訓1項目單

片論老師：點評激勵

(4)記載學生實戰(zhàn)認為完成的考核結(jié)分數(shù)激勵

果。

(1)歸納總結(jié)CSS基本、組合選擇器。

課黨多媒體學生：整理筆記

(2)歸納總結(jié)CSS屬性選擇器。教師講解

總結(jié)課件演示老師：引導創(chuàng)新

⑶歸納總結(jié)CSS偽選擇器。

老師：布置作業(yè)

諜后

3.2在線練習作業(yè)練習在線練習平臺提出要求

作業(yè)

學生：完成作業(yè)

教學過程設計

任務3-4：掌握CSS背景和邊框樣式。(2學時)

主要

教學內(nèi)容教學方法教學手段師生活動

步驟

任務分析文本、圖片等元素CSS教師講授教師：問題提問

多媒體

引入背景和邊框?qū)傩缘男枰獑l(fā)引入學生：問題討論

教師：知識講解

知識(l)CSS設置背景相關屬性啟發(fā)講解多媒體

學生：記錄筆記

講解⑵CSS設置邊框相關屬性討論歸納課件演示

師生互動交流

操作1:設置背景色、背景圖片的位

問題引導老師；操作演示

示范置、位置綁定以及重復樣式。多媒體

操作演示學生：觀摩思考

操作操作2：設置邊框線的顏色、粗細尺系統(tǒng)演示

分析歸納老師：歸納總結(jié)

寸、類型相關樣式。

實戰(zhàn)1：設置不同圖片背景效果。

實戰(zhàn)動于實踐多媒體學生；實踐操作

實戰(zhàn)2：為網(wǎng)頁元素設置邊框的各種

訓練做中學系統(tǒng)操作老師：巡視檢查

不同樣式效果。

⑴展示學生實戰(zhàn)任務完成的效果。

⑵評估討論實戰(zhàn)任務完成的正確性。教師啟發(fā)

評估學生：演示交流

⑶評估討論實戰(zhàn)任務完成的規(guī)范性：討論歸納實訓1項目單

討論(4)記載學生實戰(zhàn)認為完成的考核結(jié)老師：點評激勵

分數(shù)激勵

果。

(1)歸納總結(jié)CSS背景屬性的使用。

課堂⑵歸納總結(jié)漸變背景色的設置方法。多媒體學生：整理筆記

教師講解

總結(jié)⑶歸納總結(jié)網(wǎng)頁元素的邊框樣式設課件演示老師：引導創(chuàng)新

置方法。

老師：布置作業(yè)

諜后

3.4在線練習作業(yè)練習在線練習平臺提出要求

作業(yè)

學生：完成作業(yè)

教學過程設計

任務3-5：掌握CSS盒模型基本屬性。(2學時)

主要

教學內(nèi)容教學方法教學手段師生活動

步驟

任務教師講授教師：問題提問

講述盒模型的構(gòu)成及其基本屬性。多媒體

引入啟發(fā)引入學生：問題討論

⑴盒模型margin,padding?border

教師：知識講解

知識等基礎屬性啟發(fā)講解多媒體

學生：記錄筆記

講解(2)CSS顯示模式討論歸納課件演示

師生互動交流

⑶設置內(nèi)外邊距及外邊距合并

操作1：使用內(nèi)外邊距屬性設置盒模

型。問題引導老師：操作演示

示范多媒體

操作2：塊元素、行元素、行間塊元操作演示學生：觀摩思考

操作系統(tǒng)演示

素的設置。分析歸納老師：歸納總結(jié)

操作3：外邊距的合并。

實戰(zhàn)1：設置內(nèi)外邊距來改變頁面元

實戰(zhàn)素效果。動手實踐多媒體學生：實踐操作

訓練實戰(zhàn)2：使用外邊距合并實現(xiàn)垂直方做中學系統(tǒng)操作老師：巡視檢瓷

向效果。

(1)展示學生實戰(zhàn)任務完成的效果。

⑵評估討論實戰(zhàn)任務完成的正確性。教師啟發(fā)

評估學生：演示交流

⑶評估討論實戰(zhàn)任務完成的規(guī)范性：討論歸納實訓項目單

F論(4)記載學生實戰(zhàn)認為完成的考核結(jié)老師：點評激勵

分數(shù)激勵

果。

⑴歸納總結(jié)盒模型的基礎屬性。

課堂多媒體學生：整理筆記

⑵歸納總結(jié)CSS顯示模式的特性。教師講解

總結(jié)課件演示老師：引導創(chuàng)新

⑶歸納總結(jié)垂直方向的外邊距設置。

老師：布置作業(yè)

諜后

3.5在線練習作業(yè)練習在線練習平臺提出要求

作業(yè)

學生：完成作業(yè)

教學過程設計

任務3-6：掌握CSS設置超鏈接和列表樣式。(2學時)

主要

教學內(nèi)容教學方法教學手段師生活動

步驟

任務通過CSS設置各種超儲接和列表樣教師講授教師：問題提問

多媒體

引入式啟發(fā)引入學生：問題討論

(DC5S超鏈接偽類樣式。教師：知識講解

知識啟發(fā)講解多媒體

⑵CSS超鏈接的不同類型樣式。學生：記錄筆記

講解討論歸納課件演示

⑶CSS各種不同列表的樣式設置。師生互動交流

操作1：根據(jù)文本、圖片等類型設置

相應的樣式效果。問題引導老師：操作演示

示范多媒體

操作2：設置超鏈接的背景色與背景操作演示學生：觀摩思考

操作系統(tǒng)演示

圖片。分析歸納老師：歸納總結(jié)

操作3：設置超鏈接的各中鼠標樣式。

實戰(zhàn)1：設置超鏈接的基本樣式。

實戰(zhàn)動手實踐多媒體學生：實踐操作

實戰(zhàn)2：設置超鏈接的背景效果。

訓練做中學系統(tǒng)操作老師：巡視檢查

實戰(zhàn)3：設置超鏈接的鼠標效果。

(1)展示學生實戰(zhàn)任務完成的效果。

⑵評估討論實戰(zhàn)任務完成的正確性。教師啟發(fā)

評估學生：演示交流

⑶評估討論實戰(zhàn)任務完成的規(guī)范性：討論歸納實訓項目單

討論(4)記載學生實戰(zhàn)認為完成的考核結(jié)老師：點評激勵

分數(shù)激勵

果。

⑴歸納總結(jié)CSS超鏈接樣式的設置。

課堂多媒體學生：整理筆記

(2)歸納總結(jié)CSS列表的設置。教師講解

總結(jié)課件演示老師：引導創(chuàng)新

⑶歸納總結(jié)CSS的超鏈接嗣標效果。

老師：布置作業(yè)

課后

3.6在線練習作業(yè)練習在線練習平臺提出要求

作業(yè)

學生：完成作業(yè)

教學過程設計

任務3-7：掌握設置表格和表單樣式。(2學時)

主要

教學內(nèi)容教學方法教學手段師生活動

步驟

任務教師講授教師：問題提問

通過CSS設置各種超鏈接和列表樣式多媒體

引入啟發(fā)引入學生：問題討論

(l)C'bb超鏈接偽類樣式。教師；知識講解

知識啟發(fā)講解多媒體

(2)CSS超鏈接的不同類型樣式。學生：記錄筆記

法解討論歸納課件演示

(3)CSS各種不同列表的樣式設置…師生互動交流

操作1：根據(jù)文本、圖片等類型設置相

應的樣式效果。問題引導老師：操作演示

示范多媒體

操作2：設置超鏈接的背景色與背景圖操作演示學生：觀摩思考

操作系統(tǒng)演示

片。分析歸納老師：歸納總結(jié)

操作3：設置超鏈接的各中鼠標樣式。

實戰(zhàn)1：設置超鏈接的基本樣式。

實戰(zhàn)動手實踐多媒體學生：實踐操作

實戰(zhàn)2：設置超鏈接的背景效果。

訓練做中學系統(tǒng)操作老師：巡視檢查

實戰(zhàn)3：設置超鏈接的鼠標效果。

⑴展示學生實戰(zhàn)任務完成的效果。

⑵評估討論實戰(zhàn)任務完成的正確性。

教師啟發(fā)

評估學生：演示交流

(3)評估討論實戰(zhàn)任務完成的規(guī)范性：討論歸納實訓項目單

討論老師：點評激勵

(4)記載學生實戰(zhàn)認為完成的考核結(jié)果。分數(shù)激勵

⑴歸納總結(jié)CSS超鏈接樣式的設置。

課堂多媒體學生：整理筆記

(2)歸納總結(jié)CSS列表的設置。教師講解

總結(jié)課件演示老師：引導創(chuàng)新

(3)歸納總結(jié)CSS的超鏈接鼠標效果。

老師：布置作業(yè)

課后

3.6在線練習作業(yè)練習在線練習平臺提出要求

作業(yè)

學生：完成作業(yè)

教學過程設計

任務3-8/9：掌握CSS浮動布局、定位布局。(4學時)

主要

教學內(nèi)容教學方法教學手段師生活動

步驟

任務教師講授教師：問題提問

通過CSS設置網(wǎng)頁元素的樣式多媒體

引入啟發(fā)引入學生：問題討論

(1)C5S浮動命局樣式。教師：知識講解

知識啟發(fā)講解多媒體

(2)CSS定位布局。學生：記錄筆記

講解討論歸納課件演示

⑶CSS頁面綜合布局。師生互動交流

操作1：利用DIV+CSS實現(xiàn)網(wǎng)頁元素

的浮動布局。問題引導老師：操作演示

示范多媒體

操作2：利用DIV+CSS實現(xiàn)網(wǎng)頁元素操作演示學生：觀摩思考

操作系統(tǒng)演示

的精確定位布局。分析歸納老師：歸納總結(jié)

操作3：實現(xiàn)綜合頁面的禰.局。

實戰(zhàn)1：設置網(wǎng)頁元素的浮動樣式。

實戰(zhàn)動手實踐多媒體學生：實踐操作

實戰(zhàn)2：設置網(wǎng)頁元素的定位樣式。

訓練做中學系統(tǒng)操作老師：巡視檢查

(1)展示學生實戰(zhàn)任務完成的效果。

⑵評估討論實戰(zhàn)任務完成的正確性。教師啟發(fā)

評估學生：演示交流

⑶評估討論實戰(zhàn)任務完成的規(guī)范性：討論歸納實訓項目單

討論老師：點評激勵

(4)記載學生實戰(zhàn)認為完成的考核結(jié)分數(shù)激勵

果c

(1)歸納總結(jié)CSS中元素浮動布局的

設置。

課堂多媒體學生：整理筆記

⑵歸納總結(jié)CSS中元素定位布局的教師講解

總結(jié)課件演示老師：引導創(chuàng)新

設置。

⑶歸納總結(jié)CSS的超鏈接鼠標效果。

老師：布置作業(yè)

諜后

3.8-3.9在線練習作業(yè)練習在線練習平臺提出要求

作業(yè)

學生：完成作業(yè)

教學過程設計

任務3-10：掌握CSS的繼承性與優(yōu)先級。(2學時)

主要

教學內(nèi)容教學方法