資源簡介

課題名稱 互聯(lián)網(wǎng)數(shù)據(jù)——網(wǎng)頁的數(shù)據(jù)呈現(xiàn)
備課教師 評課教師 年級 九年級 課時 1
教學(xué)目標(biāo) 1. 通過體驗CSS設(shè)置的效果，認(rèn)識 樣式表，了解樣式表的作用。 2. 通過網(wǎng)頁中添加樣式，掌握樣式表的基本結(jié)構(gòu)。 3. 能理解使用 CSS降低網(wǎng)頁代碼耦合度所帶來的便利性。
教學(xué)重點 通過網(wǎng)頁中添加樣式，掌握樣式表的基本結(jié)構(gòu)。
教學(xué)難點 理解使用CSS降低網(wǎng)頁代碼耦合度所帶來的便利性。
教學(xué)過程 備注
“導(dǎo)”（6分鐘） 老師這里有一個介紹“人工智能應(yīng)用”的網(wǎng)頁設(shè)計，請同學(xué)們思考這個頁面有什么問題？內(nèi)容樣式不協(xié)調(diào)統(tǒng)一、缺乏整體性。針對這樣的呈現(xiàn)問題，那么如何對網(wǎng)頁的數(shù)據(jù)內(nèi)容進(jìn)行樣式設(shè)置呢？復(fù)習(xí)上節(jié)課通過HTML標(biāo)簽中屬性設(shè)置樣式:給每個元素的標(biāo)簽中聲明一個或多個屬性來設(shè)置樣式，比較直觀，便于單個修改，但是缺點是同類別的元素樣式設(shè)置會出現(xiàn)代碼重復(fù)性，造成代碼冗余，當(dāng)網(wǎng)頁數(shù)據(jù)較多時，一定程度上會影響瀏覽器的解析（呈現(xiàn)）速度。 引出本節(jié)課的內(nèi)容：使用CSS設(shè)置樣式。 “思”（12分鐘） 什么是CSS呢？閱讀p39頁內(nèi)容。 CSS的樣式 字號、字體、顏色、位 置以及圖片的大小...... CSS的優(yōu)點 1、樣式與內(nèi)容分離 2、網(wǎng)頁加載速度快 3、一致的樣式設(shè)計 4、容易維護(hù)和更新 5、響應(yīng)式設(shè)計 6、可擴展性 接下來我們通過任務(wù)活動來認(rèn)識并學(xué)習(xí)使用CSS，在同學(xué)們的桌面上有一個“index.html”半成品網(wǎng)頁，打開看看哪些內(nèi)容的樣式需要調(diào)整？怎么調(diào)整？（大標(biāo)題的顏色；三個小標(biāo)題的位置、字體、字號、顏色；三張圖片的大?。槐尘吧龋?任務(wù)一：修改大標(biāo)題的顏色、修改圖片的大小、設(shè)置三個小標(biāo)題的樣式。 閱讀課本p41頁樣式表的基本結(jié)構(gòu)： 1.CSS語法結(jié)構(gòu)： 選擇符{樣式屬性1：屬性值1；樣式屬性2：屬性值2；樣式屬性……}選擇符：用來選擇要定義樣式的對象。 2.CSS的類型：內(nèi)部樣式表、外部樣式表、內(nèi)聯(lián)樣式表。 優(yōu)先級：內(nèi)聯(lián)樣式＞內(nèi)部樣式＞外部樣式 任務(wù)二：美化頁面——給三個標(biāo)題單元格及網(wǎng)頁添加合適的背景。 學(xué)習(xí)背景樣式的設(shè)置。（可設(shè)置背景色，也可設(shè)置背景圖。顏色可借助“顏色代碼”網(wǎng)站來設(shè)置屬性值。）展示學(xué)生作品，師生點評頁面效果。 “議”（7分鐘） 任務(wù)三：CSS是專門用來設(shè)置樣式的，使用它可以將內(nèi)容結(jié)構(gòu)和樣式設(shè)置分離，那么如果有多個頁面需要應(yīng)用同一種樣式，該如何呢？以小組為單位，觀察教師展示網(wǎng)頁文件范例的代碼，里面沒有對元素有樣式設(shè)置的代碼，卻有頁面樣式效果，討論這是為什么？ “展”（7分鐘） 教師請小組展示討論結(jié)果：在標(biāo)簽中出現(xiàn)了一個標(biāo)簽，頁面的樣式就是通過標(biāo)簽這個語句來實現(xiàn)。這樣多個頁面應(yīng)用同一個CSS，只要通過一句標(biāo)簽語句行就可以實現(xiàn)，且只要修改這個CSS文件，就可以更新所有頁面的樣式。 “評”（8分鐘） 1.教師對勇于展示的同學(xué)進(jìn)行鼓勵，并鼓勵其他學(xué)生質(zhì)疑、挑戰(zhàn)、糾錯、補充。 2.師生共同總結(jié)本節(jié)課收獲： ①認(rèn)識了CSS（層疊樣式表） ②CSS語法結(jié)構(gòu)： 選擇符{樣式屬性1：屬性值1；樣式屬性2：屬性值2；樣式屬性……}選擇符：用來選擇要定義樣式的對象。 ③CSS的類型：內(nèi)部樣式表、外部樣式表、內(nèi)聯(lián)樣式表。 優(yōu)先級：內(nèi)聯(lián)樣式＞內(nèi)部樣式＞外部樣式 ④分離式的CSS優(yōu)點：提高網(wǎng)頁加載速度易于維護(hù)和更新提高開發(fā)效率，利用CSS可以實現(xiàn)多樣的頁面樣式效果 六、“練”（5分鐘） 1. 用CSS 樣式表美化網(wǎng)頁。 2. 嘗試使用圖像標(biāo)簽，在網(wǎng)頁里加入一張平鋪模式的背景圖。
教學(xué)板書 一、網(wǎng)頁數(shù)據(jù)呈現(xiàn)的方式 二、CSS 三、樣式表的基本結(jié)構(gòu)
教學(xué)反思 本節(jié)課內(nèi)容比較抽象枯燥，但也是本單元核心知識點，注意講解與布置任務(wù)時要分解成小任務(wù)，確保學(xué)生都能學(xué)會、完成，逐步攻破難點。

展開更多......

收起↑