資源簡介 《網頁的數據呈現》教學設計一、學習內容分析《網頁的數據呈現》是浙江教育出版社《信息科技》八年級上冊第二單元第8課。本課通過學習使用CSS（層疊樣式表）來設置網頁樣式和布局，包括認識CSS及其作用、掌握CSS的語法結構、理解CSS的優點等內容。本課是在學習了前一課《網頁的數據組織》基礎上，進一步學習樣式美化設置，了解網頁數據呈現樣式的原理，為下一課更好地呈現網頁交互做好準備，起到承上啟下的作用。二、學情分析本課的學習對象是八年級學生，該年段的學生在日常學習與生活中已經能夠熟練使用各種瀏覽器查看網頁，對于網頁的編輯有著濃厚的學習興趣，并且已經掌握了HTML語言基本結構和簡單屬性設置，但頁面效果較簡陋，且HTML主要是用于描述網頁的結構和內容，需要教師進一步進行引導學習。所以引入新知：CSS樣式設置，讓學生學習便捷的樣式設計方法，通過任務活動，施展設計技能，提高制作網頁的興趣，為今后創作有價值的網頁作品創造條件。學習目標教學目標 核心素養指向1.通過體驗CSS設置的效果，認識CSS，了解CSS的作用。 2.通過在網頁中添加樣式的探究，掌握CSS的語法結構。 3.通過鏈接CSS文件設置樣式的體驗，理解分離式CSS的便捷性。 【計算思維】用計算機科學領域的思想方法，在形成問題解決方案的過程中產生一系列思維活動。 【數字化學習與創新】通過對導學單等學習支架的自主學習，提升學生的數字化學習能力。四、教學重難點教學重點：通過網頁中添加樣式，掌握樣式表的基本結構。教學難點：理解使用CSS降低網頁代碼耦合度所帶來的便利性。五、課前準備學習資源：學習單、資源包（上節課作品、圖片、半成品網頁文檔1.0和2.0、顏色卡片圖）設計思路問題鏈：1.在這個網頁中設置了哪些內容？2.修改國家博物館網頁的樣式發生什么變化？3.兩種方式有什么不同點？4.CSS設置樣式有什么優點？5.如果有多個頁面需要應用同一種樣式，該怎么辦呢？七、學習過程（一）復習回顧，引出主題教學內容與活動 設計意圖上節課學習認識了HTML文檔的基本結構，并學習使用HTML標簽給網頁設置標題，給網頁添加各種類型的元素：文本、圖像、超鏈接等。 請同學們思考并解析下：在這個網頁中設置了哪些內容？（上一節課某個學生作品） 網頁的數據呈現》與前一課《網頁的數據組織》是遞進關系，是在學習了HTML對網頁數據元素組織的基礎上，進一步學習樣式美化設置，為了能有效地開展新知學習，則需對前面知識進行復習回顧，以便學生扎實所學、有序前進。（二）探究學習，動手實踐教學內容與活動 設計意圖1.問題導入 我們通過瀏覽器來呈現這個代碼文檔（上一節課某個學生的無樣式設置作品）的頁面效果，出現了什么問題？ 反饋交流：思考、提出樣式方案。 2.對比試驗探究，提出CSS優勢。 通過HTML標簽中屬性設置樣式。（上節課學習） 活動一：完成學案中的玩一玩和想一想活動。 提問：兩種方式有什么不同點？ 同類別的元素樣式設置會出現代碼重復性，造成代碼冗余，當網頁數據較多時，一定程度上會影響瀏覽器的解析（呈現）速度。 3.div與css 教師介紹div標簽和css,觀看視頻。 CSS全稱為層疊樣式表（Cascading Style Sheets）,它是一種用來描述網頁樣式和布局的語言，如網頁中文字的字體、字號、顏色、位置以及圖片的大小等。 4.自主探究實踐 活動二：利用半成品1.0或半成品2.0，修改CSS樣式中的屬性和參數美化上一節課網頁作品。 （主要包括協調內容——修改各個div顏色、修改圖片的大小、設置文本樣式。） 反饋交流：展示并總結主要問題與解決方法。 5.深入學習體驗，理解CSS便捷 教師演示CSS的三種導入方式，學生深刻理解CSS的層疊性與解耦性。 以問題為導向，試圖讓學生分析問題、構思樣式、提出方案，從中灌輸思維能力的培養。 通過兩個代碼范例呈現，讓學生直觀感受兩種樣式設置方式的區別，能夠理解HTML標簽屬性設置樣式的缺點，提出優化的設置方式，從而引出對CSS的學習。 以半成品的形式來補充代碼，適于初學者，便于仿照學習。通過兩個任務活動，展開探究學習，實現樣式的修改和添加，從中認識樣式表，掌握其語法結構，以此落實本課的學習重點，同時體會樣式表帶來的作用效果。 以問題激發學生思考，帶領學生一步步探索認知CSS的其他形式，通過任務體驗，切身感受應用CSS文件設置樣式的便捷性，從而理解分離式CSS的優點。（三）課堂小結，知識延伸教學內容與活動 設計意圖課堂小結與作品展示 展示作品并對作品進行自評互評，對本課所學知識進行總結。引導學生進行作品點評、課堂總結。 對本課知識進行總結，將所學的知識進行內化。同時提出作品還需要完善的地方，為后續作品的更新迭代做鋪墊。(共14張PPT)第8課 網頁的數據呈現/八上信息技術網頁數據呈現瀏覽網頁時，網頁上呈現的文本、圖像等樣式需要統一。網頁數據呈現活動一：完成學案中的玩一玩和想一想活動。https://www./fw/網頁數據呈現HTML定義了網頁的內容結構，即網頁呈現的文本、圖像、音頻、視頻等內容。使用CSS同樣能對網頁中數據的布局、字體和背景等效果進行設置，同時還能將網頁的結構和格式分離，實現解耦。優點：網站所有頁面的風格可以應用一個CSS，只要修改這個CSS文件，就可以更新所有頁面的樣式，既提升了更新和維護的效率，縮減了網頁的代碼，又提高了網頁的瀏覽速度。CSS標簽可以用來定義HTML文檔中的某一區域，相當于一個容器盒子，可以放置段落、圖片、視頻等。CSSCSS全稱為層疊樣式表（Cascading Style Sheets）,可以用于控制網頁布局與樣式，用于定義HTML文檔中元素的外觀和表現形式。如網頁中文字的字號、宋體、顏色、位置以及圖片的大小等。CSSCSS【活動二】利用半成品1.0或半成品2.0，修改CSS樣式中的屬性和參數美化上一節課網頁作品。樣式表的結構樣式表的基本結構樣式表的結構樣式表的基本結構<標記名 style="屬性:屬性值;">加在之間樣式表的結構<標記名 style="屬性:屬性值;">內聯樣式表內部樣式表樣式表的結構外部樣式表格式：HTML標簽活動二：根據學案和半成品文檔完成“人工智能”主題網站的首頁。課堂小結八年級（上）第二單元互聯網數據第8課 網頁的數據呈現【活動一】玩一玩網站為了保證網頁風格的整體性，在制作過程中往往要求文本、色彩等樣式要協調統一。請你打開https://www./fw/并嘗試修改圖1的①中文字大小和顏色。圖1【活動一】想一想在【玩一玩】的過程中，修改一個樣式屬性，①中的文字樣式都會發生改變，請你思考該設置樣式的方法和直接用HTML標簽設置樣式對比，有哪些好處？【活動二】利用半成品1.0或半成品2.0，修改CSS樣式中的屬性和參數美化上一節課網頁作品。【知識庫】一、常見的元素選擇符和樣式屬性將bj.jpg設置為背景圖片并覆蓋背景區域 body{background-image:url('bj.jpg');background-size: cover;}設置h1標簽的顏色、大小和字體 {color:red;font-size:35px;font-family:黑體}設置p標簽的顏色、大小和字體 {color:red;font-size:35px;font-family:黑體}二、CSS的層疊性CSS具有層疊性，意味著可以通過多個規則來定義相同元素的樣式，樣式將按照優先級的順序層疊在一起。例如有以下兩個CSS規則：h1 {color: red;font-size: 24px;} h1 {font-weight: bold;font-size: 30px}這兩個規則都選擇了標題元素，第一個規則指定了標題的顏色為紅色，字體大小為24像素。第二個規則指定了標題的字體粗細為粗體，字體大小為30像素。根據層疊性的原則，后面的規則會覆蓋先前的規則。因此，最終應用到標題元素上的樣式將是紅色文本、30像素大小和粗體字。三、CSS的導入方式1.內聯樣式（Inline Styles）：可以直接在HTML元素的style屬性中編寫CSS樣式。例如：這是一段紅色字體、16像素大小的文本。2.內部樣式表（Internal Stylesheet）：將CSS樣式代碼放置在HTML文檔的這是一段紅色字體、16像素大小的文本。內部樣式表適用于整個HTML文檔或指定范圍內的元素，它的優先級高于外部樣式表。3.外部樣式表（External Stylesheet）：將CSS代碼保存在一個獨立的外部文件（通常是以.css為擴展名）中，并通過HTML文檔的標簽進行引用。外部樣式表可以在多個HTML文檔之間共享。例如：在一個名為styles.css的外部樣式表文件中： 在HTML文檔中引用外部樣式表：p { color: red; font-size: 16px; } 這是一段紅色字體、16像素大小的文本。 展開更多...... 收起↑ 資源列表 《網頁的數據呈現》學習單.docx 《網頁的數據呈現》教學設計.docx 《網頁的數據呈現》課件.pptx 縮略圖、資源來源于二一教育資源庫