第一篇：在HTML中加入CSS教案
《在HTML中加入CSS》教學(xué)設(shè)計
文昌華僑中學(xué) 陳文芳
模 塊： 信息技術(shù)·選修《網(wǎng)絡(luò)技術(shù)應(yīng)用》第五章第二節(jié)：在HTML中加入CSS 教材版本： 教育科學(xué)出版社 學(xué) 生： 高中二年級 課 時： 1課時
一、教材分析
《在HTML中加入CSS》屬于5.2.2 CSS樣式表這一教學(xué)內(nèi)容，是高中信息技術(shù)·選修《網(wǎng)絡(luò)技術(shù)應(yīng)用》的第五章第二節(jié)動態(tài)網(wǎng)頁中的內(nèi)容。本節(jié)內(nèi)容包括嵌入樣式表、內(nèi)聯(lián)式樣式表、外聯(lián)式樣式表，教材安排的思路：由具體標(biāo)簽——當(dāng)前網(wǎng)頁——多張網(wǎng)頁的整體風(fēng)格進(jìn)行設(shè)置，重點是外聯(lián)式樣式表的使用。
二、教學(xué)對象分析
通過前階段的學(xué)習(xí)，學(xué)生已經(jīng)認(rèn)識了動態(tài)網(wǎng)頁，并對HTML的標(biāo)簽及屬性、樣式表的概念及書寫格式也有了了解。由于學(xué)生的水平有限，而且《在HTML中加入CSS》對于學(xué)生來說是全新的內(nèi)容，不易掌握，但學(xué)生有著非常強(qiáng)烈的求知欲，渴望通過css優(yōu)化自己的主題網(wǎng)站。
三、教學(xué)目標(biāo)
1、知識與技能
(1)熟練掌握CSS的基本應(yīng)用：嵌式樣式表、內(nèi)聯(lián)式樣式表、；(2)掌握CSS的價值體現(xiàn)：外聯(lián)式樣式表的應(yīng)用。
2、過程與方法
(1)嘗試?yán)么a選擇進(jìn)行CSS的初步設(shè)計，以取感性的認(rèn)識；(2)通過在網(wǎng)頁內(nèi)加入嵌入式和內(nèi)聯(lián)式的CSS樣式表來達(dá)到熟練掌握CSS基本應(yīng)用的目的；
(3)通過任務(wù)的完成學(xué)會應(yīng)用同一CSS樣式表來掌握外聯(lián)式CSS樣式表的。
3、情感態(tài)度與價值觀
（1）通過CSS樣式表的學(xué)習(xí)，提高學(xué)生美化網(wǎng)頁的技能。（2）培養(yǎng)學(xué)生的探索、實踐能力。
四、教學(xué)重點與難點
1、教學(xué)重點：
(1)CSS的基本應(yīng)用：嵌入式樣式表、內(nèi)聯(lián)式樣式表；
(2)CSS的價值體現(xiàn)：外聯(lián)式樣式表的應(yīng)用對于網(wǎng)站頁面風(fēng)格統(tǒng)一的作用。
2、教學(xué)難點：
外聯(lián)式樣式表的應(yīng)用；
五、教學(xué)設(shè)計思路
首先提問學(xué)生如何在網(wǎng)頁中改變文字的格式，提出像新浪網(wǎng)這樣的網(wǎng)站包含很多文字，同時又要保持統(tǒng)一的風(fēng)格格式時，這樣一一設(shè)置格式就很費(fèi)時、費(fèi)力，設(shè)疑，有沒有更快的方法對網(wǎng)頁元素的格式進(jìn)行設(shè)置呢？然后在網(wǎng)頁中添加樣式，引出學(xué)生思考：為什么文字的格式?jīng)]有改變，添加的樣式在那里呢？目的，復(fù)習(xí)舊知識引出本節(jié)課的內(nèi)容。
其次，講解本節(jié)內(nèi)容，通過教師演示——學(xué)生操作、探究——學(xué)生總結(jié)的方式進(jìn)行。目的，培養(yǎng)學(xué)生的獨(dú)立思維、操作技能、歸納能力。
最后，教師進(jìn)行概括性的總結(jié)。目的，理清脈絡(luò)。
六、教學(xué)方法
講授法、任務(wù)驅(qū)動法、個別指導(dǎo)法、賞識教育法、問題教學(xué)法
七、教學(xué)準(zhǔn)備
基于網(wǎng)絡(luò)的多媒體計算機(jī)教室、PowerPoint教學(xué)課件
八、教學(xué)過程
教師活動：在FrontPage中呈現(xiàn)已準(zhǔn)備好的兩句話，提問學(xué)生如何改變文字的格式，并請一位學(xué)生操作。
教師提問：如果要完成像新浪網(wǎng)包含這么多文字的格式，又要保持統(tǒng)一風(fēng)格，大家覺得我們所用的方法快捷嗎？ 學(xué)生活動：回答老師問題。
教師活動：但會費(fèi)時費(fèi)力。那有沒有更快的方法呢? 學(xué)生活動：思考問題。
教師活動：在網(wǎng)頁中可以使用CSS樣式表來規(guī)定文字的格式。
教師活動：簡單介紹css樣式，然后演示添加樣式的過程，并要求學(xué)生觀察在哪里添加了樣式。教師提問：請同學(xué)們說說在哪里添加了樣式呢？ 學(xué)生活動：思考、回答問題。
教師活動：給出答案，在HTML代碼視圖中。這就是今天我們要學(xué)習(xí)的內(nèi)容——在HTML中加入CSS。簡單介紹CSS。
教師活動：請同學(xué)們把課本打開到P115頁，并請一位同學(xué)回答在HTML中加入CSS有幾種方法。
教師活動：演示在HTML中加入CSS的幾種方法
教師活動：講授嵌入式樣式表的使用方法。
1、樣式表
方法：只需在每個要用樣式的HTML的標(biāo)記后寫上屬性就可以了。CSS屬性書寫格式：
Style=”color:red;font-size:24pt;”
任務(wù)1：用嵌入式樣式表對網(wǎng)頁gushi1的標(biāo)題“靜夜思”進(jìn)行設(shè)置，字體為紅色，字號為24pt。
學(xué)生活動：依據(jù)教師的方法，進(jìn)行練習(xí)。
教師活動：巡回輔導(dǎo)，對樣式的書寫格式進(jìn)行糾錯。教師活動：總結(jié)嵌入式的使用方法。
嵌入式樣式表主要用于對具體的標(biāo)簽作具體的調(diào)整，其作用的范圍只限于本標(biāo)簽。并不能體現(xiàn)出css的優(yōu)越性。
教師提問：如果我想改變整張網(wǎng)頁的文字格式，使用嵌入式好用嗎？ 學(xué)生活動：回答老師問題。
教師活動：這時我們就可以使用內(nèi)聯(lián)式樣式表。
1、內(nèi)聯(lián)式樣式表：作用于當(dāng)前頁
教師活動：教師講授內(nèi)聯(lián)式樣式表的使用方法。
方法：把樣式表定義語句放在標(biāo)簽中，并把這一部分語句放在HTML文件的
標(biāo)簽之前。 任務(wù)2：使用內(nèi)聯(lián)式改變gushi1中的詩句，樣式自定義。學(xué)生活動：依據(jù)教師講授的方法，進(jìn)行練習(xí)。教師活動：巡回輔導(dǎo)，對格式進(jìn)行糾錯。教師提問：如果站內(nèi)有幾十張網(wǎng)頁都要用到此格式，該如何做呢？有沒有更簡單的方法？
學(xué)生活動：回答老師。
教師提問：我們可以用外聯(lián)式樣式表，不僅可以快速改變文字的格式，而且能夠保持網(wǎng)頁的整體風(fēng)格。
2、外聯(lián)式樣式表
教師活動：教師講授外聯(lián)式樣式表的使用方法。
方法：（1）將樣式定義成一個”.css”的文件。
（2）在網(wǎng)頁中的
標(biāo)簽對之間插入引用代碼： 任務(wù)3：①用外聯(lián)式改變gushi1的詩句。②使用外聯(lián)式改變gushi1、gushi2、gushi3、的詩句，使之具有統(tǒng)一的格式。
學(xué)生活動：完成任務(wù)3，教師活動：巡回輔導(dǎo)，糾錯學(xué)生的書寫格式。
教師活動：對學(xué)生完成的情況進(jìn)行評價。并請一名學(xué)生演示操作過程。教師活動：我們來總結(jié)一下，CSS樣式表有什么樣的優(yōu)點？ 學(xué)生活動：總結(jié)CSS樣式表的優(yōu)點。
教師活動：總結(jié)CSS的優(yōu)點。
1、避免在標(biāo)識字符和設(shè)置段落格式等操作時重復(fù)定義需要的樣式（如字體、字號、顏色），從而使應(yīng)用該樣式的網(wǎng)頁具有相同的風(fēng)格。
2、只需要修改一個CSS代碼就可以改變頁數(shù)不定的網(wǎng)頁外觀和格式，提高網(wǎng)頁編輯效率。
3、可以“隨心所欲”地控制頁面布局和外觀。
4、在所有瀏覽器和平臺之間具有較好的兼容性。
教師活動：今天，我們一起學(xué)習(xí)了如何在HTML中加入不同類型的CSS樣式表。那請同學(xué)們回憶一下，在HTML中加入CSS樣式表有幾種方法，分別是什么？ 學(xué)生活動：回憶、總結(jié)。
教師活動：總結(jié)本節(jié)課的教學(xué)內(nèi)容。
第二篇：html和css總結(jié)
Html 超文本標(biāo)簽語言，用<>表示一個一個標(biāo)簽，必須有頭有尾，
….
網(wǎng)頁內(nèi)容寫在里面 分為兩大類：行級標(biāo)簽和塊級標(biāo)簽 行級標(biāo)簽以行為單位，不會自動換行 塊級標(biāo)簽以塊為單位，新建是自動換行 塊級標(biāo)簽分為基本塊級標(biāo)簽 標(biāo)題標(biāo)簽到 段落標(biāo)簽
分割線標(biāo)簽
布局塊級標(biāo)簽 有序列表標(biāo)簽
無序列表標(biāo)簽
- 標(biāo)題
- …
| … | … |
| … | … |
圖像標(biāo)簽 src 導(dǎo)入圖片的地址，alt是當(dāng)圖片打不開時顯示的文字，title表示鼠標(biāo)懸停時提示的文字 鏈接標(biāo)簽
… Href 要打開鏈接的路徑，target表示鏈接打開的位置，…表示點擊那里觸動鏈接 常用的超鏈接 頁面間 錨鏈接 創(chuàng)建跳轉(zhuǎn)標(biāo)記
乙位置 創(chuàng)建跳轉(zhuǎn)鏈接
甲位置 表示在頁面上從甲位置通過name=“marker”跳轉(zhuǎn)到乙位置。功能性鏈接
行級標(biāo)簽： 范圍標(biāo)簽 用style設(shè)置屬性 換行標(biāo)簽
表單元素： 單行文本框：text 密碼框：password 單選按鈕：radio 提交按鈕：submit 重置按鈕：reset 普通按鈕：button 圖片按鈕：image 復(fù)選框：checkbox 下拉列表：select 文本域：textarea 文件域：file 下拉列表 文本域 其他都是 幾個表單元素的屬性需要特殊記憶 readonly 表示只讀 disable表示禁用
selected表示下拉列表默認(rèn)選中項
checked表示設(shè)置單選或者復(fù)選的默認(rèn)選中項
name表示在服務(wù)器端可以通過該屬性來獲得表單元素的值
框架