資源簡(jiǎn)介

中小學(xué)教育資源及組卷應(yīng)用平臺(tái)
信息技術(shù) 第8課 網(wǎng)頁(yè)的數(shù)據(jù)呈現(xiàn)
課題 網(wǎng)頁(yè)的數(shù)據(jù)呈現(xiàn) 單元 第二單元 學(xué)科 信息技術(shù) 年級(jí) 八年級(jí)
教材分析 《網(wǎng)頁(yè)的數(shù)據(jù)呈現(xiàn)》該課時(shí)教材編排了“網(wǎng)頁(yè)數(shù)據(jù)呈現(xiàn)的方式—CSS樣式—樣式表的基本結(jié)構(gòu)”的系列學(xué)習(xí)活動(dòng)，旨在讓學(xué)生通過(guò)體驗(yàn)CSS樣式設(shè)置的效果，認(rèn)識(shí)CSS樣式表，了解樣式表的作用;通過(guò)網(wǎng)頁(yè)中添加樣式，掌握樣式表的基本結(jié)構(gòu);能理解使用CSS降低網(wǎng)頁(yè)代碼耦合度所帶來(lái)的便捷。教材編排合理，教學(xué)環(huán)節(jié)注重實(shí)踐與理論相結(jié)合，教材內(nèi)容貼近學(xué)生生活實(shí)際，符合八年級(jí)學(xué)生認(rèn)知特點(diǎn)。
教學(xué)目標(biāo) 1、信息意識(shí)：能夠了解CSS（層疊樣式表）是用于控制網(wǎng)頁(yè)布局和樣式的重要技術(shù)。 2、計(jì)算思維：能夠?qū)⒕W(wǎng)頁(yè)設(shè)計(jì)需求轉(zhuǎn)化為具體的CSS規(guī)則，鍛煉抽象思維能力。 3、數(shù)字化學(xué)習(xí)與創(chuàng)新：能夠了解并使用Bootstrap等CSS框架，提高開(kāi)發(fā)效率。培養(yǎng)創(chuàng)新意識(shí)和實(shí)踐能力。 4、信息社會(huì)責(zé)任：能夠在設(shè)計(jì)網(wǎng)頁(yè)時(shí)注重環(huán)保和節(jié)能，減少不必要的資源浪費(fèi)。
重點(diǎn) 一、網(wǎng)頁(yè)數(shù)據(jù)呈現(xiàn)的方式二、CSS樣式三、樣式表的基本結(jié)構(gòu)
難點(diǎn) 1、樣式表的基本結(jié)構(gòu)
教學(xué)過(guò)程
教學(xué)環(huán)節(jié) 教師活動(dòng) 學(xué)生活動(dòng) 設(shè)計(jì)意圖
導(dǎo)入新課 通過(guò)體驗(yàn)CSS樣式設(shè)置的效果，認(rèn)識(shí)CSS樣式表，了解樣式表的作用;通過(guò)網(wǎng)頁(yè)中添加樣式，掌握樣式表的基本結(jié)構(gòu);能理解使用CSS降低網(wǎng)頁(yè)代碼耦合度所帶來(lái)的便捷。探究：1、你瀏覽過(guò)的網(wǎng)頁(yè)中，看到過(guò)哪些網(wǎng)頁(yè)效果 2、你知道網(wǎng)頁(yè)中的文字效果是如何實(shí)現(xiàn)的 網(wǎng)站為了保證網(wǎng)頁(yè)風(fēng)格的整體性，在制作過(guò)程中往往要求文本、色彩等樣式要協(xié)調(diào)統(tǒng)一，可以對(duì)網(wǎng)頁(yè)數(shù)據(jù)各種呈現(xiàn)的效果進(jìn)行樣式的設(shè)置。 觀看通過(guò)老師講解和學(xué)生之間的相互討論生活中的CSS網(wǎng)頁(yè)代碼的運(yùn)用場(chǎng)景。 幫助學(xué)生理解CSS網(wǎng)頁(yè)代碼的概念，打開(kāi)課堂。
講授新課 一 、網(wǎng)頁(yè)數(shù)據(jù)呈現(xiàn)的方式HTML定義了網(wǎng)頁(yè)的內(nèi)容結(jié)構(gòu)，即網(wǎng)頁(yè)呈現(xiàn)的文字、圖文、視頻等內(nèi)容，用HTML設(shè)計(jì)網(wǎng)頁(yè)外觀樣式時(shí)需要使用大量的標(biāo)記，代碼相對(duì)多而復(fù)雜，使用CSS可以有效地對(duì)網(wǎng)頁(yè)中數(shù)據(jù)的布局、字體和背景等效果實(shí)現(xiàn)更精確的控制，同時(shí)可以將網(wǎng)頁(yè)的結(jié)構(gòu)和格式分離，實(shí)現(xiàn)解耦。比如對(duì)網(wǎng)站所有頁(yè)面的風(fēng)格可以應(yīng)用一個(gè)CSS，只要修改這個(gè)CSS文件就可以更新所有頁(yè)面的風(fēng)格樣式，既提高了更新和維護(hù)的效率，同時(shí)又縮減了網(wǎng)頁(yè)的代碼，提高了網(wǎng)頁(yè)的瀏覽速度。新知拓展你瀏覽過(guò)的網(wǎng)頁(yè)中，看到過(guò)哪些網(wǎng)頁(yè)效果 二 、CSS樣式CSS全稱(chēng)為層疊樣式表(CaseadingSlyle Sheels)，也是一種標(biāo)識(shí)語(yǔ)言CSS樣式可以方便地設(shè)置網(wǎng)頁(yè)效果，如網(wǎng)頁(yè)中文字的字號(hào)、字體、顏色、位置以及圖片的大小等，都涉及網(wǎng)頁(yè)顯示信息的樣式。如圖8-1。圖8-2所示，是添加了樣式表的網(wǎng)頁(yè)效果的前后對(duì)比圖。圖8-2所示的網(wǎng)頁(yè)是在標(biāo)簽之前添加了以下CSS字體、顏色等樣式的代碼。親身體驗(yàn)修改樣式表里的屬性和屬性參數(shù)，觀察網(wǎng)頁(yè)外觀變化，嘗試其他樣式的設(shè)置。新知拓展你知道網(wǎng)頁(yè)中的文字效果是如何實(shí)現(xiàn)的 CSS文本屬性三、樣式表的基本結(jié)構(gòu)