資源簡介

單元基本信息
單元教學主題 第一單元 互聯網信息編碼 單元課時 5
單元項目情境與任務 科技文化藝術節是學校一項頗具特色的活動，每年都會邀請一大批校外人士參加。為了能讓更多人了解并積極參與，需要你組建一支團隊，運用語文、英語、美術等學科知識，來設計制作一份便于社交媒體轉發的、以“向世界介紹我的學校”為主題的宣傳網頁。
單元學習目標 1.知識技能 （1）知道網頁的代碼組成部分，能夠說出瀏覽器是如何渲染網頁繪制出視覺效果的。 （2）知道視頻是存儲原理，并說出流媒體是如何實現流暢地播放。 （3）知道HTTP協議存在的缺陷，并能說出HTTPS通過哪些改進確保信息在網絡傳輸中的安全。 （4）知道根據需求來設計網頁，能夠選擇合適的工具根據設計來制作、測試和發布網頁。 2.素養指向 （1）信息意識：能夠認識到互聯網對人類社會的影響，并應用于項目問題的解決。 （2）計算思維：能夠根據學校科技文化藝術節的宣傳需求，設計出便于社交媒體轉發的宣傳網頁。 （3）數字化學習與創新：按照任務需求，能夠選擇合適的網頁制作工具來設計、制作網頁，能根據需求收集、加工網頁素材，小組成員協同解決相關項目問題。 （4）信息社會責任：在收集、處理和使用網絡素材的過程中學習和了解版權知識，負責任地使用網絡資源，設計和制作網頁。
單元教學整體規劃 項目活動 對應課題 擬解決的項目子問題或子任務 課時
項目籌備 第1節精彩盡在網頁中——從制作到渲染 規劃項目實施方案 1
知識探究 了解網站與網頁之間的關系、網頁的制作標準與設計制作工具、瀏覽器是如何渲染網頁的，為項目制作儲備知識
第2節流暢的網絡視頻——視頻壓縮、流媒體及版權保護 了解視頻的存儲原理及流媒體是如何實現流暢播放的，為收集、編輯適合的視頻做儲備 1
第3節信息傳輸保安全——Web 安全協議 了解HTTP和HTTPS的兩個協議，為更安全地選擇網頁發布平臺儲備知識 1
整理展示 第4節跨學科活動：向世界介紹我的學校 合理設計、制作并交流分享“向世界介紹我的學校”網頁 2
項目實施
課題名稱 第1課 精彩盡在網頁中——從制作到渲染
課時目標 1.合理規劃項目實施方案，能夠基于小組情況與實驗條件進行規劃。 2.知道網頁誕生的過程，能夠說出網站與網頁之間的關系。 3.知道網頁的制作標準，能夠說出網頁設計制作工具有哪些。 4.知道瀏覽器渲染網頁的過程。
教學準備 計算機網絡，課件，瀏覽器，AIGC平臺
導學過程 意圖說明
一、項目籌備 1.展示單元項目情境：略 2.提出單元項目任務：你會如何規劃設計“向世界介紹我的學校”的網頁？ （1）提供項目方案范例 知識學習實施步驟預期成果學習教材中的相關知識 了解如何根據需求來收集、處理制作網頁所需要的各類素材（文字、圖片、音頻、視頻等） 了解如何根據需求來設計網頁 了解根據設計來制作網頁 掌握如何對網頁進行測試、優化和發布確定網頁的欄目 選寫出網頁欄目對應的宣傳內容要求 收集并處理素材 設計制作網頁 測試優化發布網頁（1）向世界介紹我的學校網頁 （2）項目成果匯報文檔（PPT格式）
姓名角色職責組長主持整個項目開展過程，協調處理各種情況以確保完成項 目任務組織員組織各成員共同開展需求分析、規劃實施與交流評價等具 體活動記錄員記錄并整理需求分析、規劃實施與交流評價等活動的相關 信息檢查員核查各項任務的完成情況，制作匯報 PPT 并負責對外展示 交流
（2）引導開展自主規劃 　　　——要求以小組為單位，基于自身情況進行規劃，并將結果填入下表1、表2。 表1 項目實施規劃 學習知識實施步驟預期成果
表2 小組合作分工 姓名角色職責
（3）各小組匯報展示交流 　　　——展示小組規劃成果，交流規劃緣由。 知識探究 項目子任務引入 ——了解網站與網頁之間的關系、網頁的制作標準與設計制作工具、瀏覽器是如何渲染網頁的，為項目制作儲備知識。 2.探究內容與要求 （1）方法引導：遵循“概念→實現→應用”的認知規律。 （2）主要內容： ①網站和網頁之間的關系是什么？——變革基礎（概念）習得 ②瀏覽器是如何渲染網頁的？——關鍵技術（實現）運用 ③在網上搜索適合的網頁制作工具制作網頁？——重要工具（應用）探究 3.知識習得 （1）自主閱讀：以書本P3-9為主，網絡知識作補充 （2）知識梳理： ①網站與網頁之間是 和 的關系。 ②網站是 上用來存放 ，它是所有相關網頁的 ，而 則是網站中的文檔元素。 ③ 是用于標識網站的名稱， 是指輸入網站地址后，默認被打開的第一張網頁。 ④在網站中， 是用來導航與鏈接其他內頁，而 就是網站內部的其他頁面。 4.核心素養培育 （1）學會分析：使用瀏覽器訪問兩個你喜歡的網站，并通過單擊超鏈接切換不同的網頁，在這個過程中，瀏覽的網頁內有哪些基本元素，基本的結構是什么，是通過什么實現的？ 輔助分析支架：用戶通過 來架設網頁的結構，通過 控制網頁的樣式，通過_________來為網頁添加交互功能和動態效果。 學會解釋： ①編寫生成的網頁可直接在客戶端的任意軟件上顯示出來，這種說法對嗎？請說明理由。 輔助分析支架：無論是采用哪種制作工具，編寫生成的網頁都是一種包含HTML標簽、CSS樣式與JavaScript的純文本文件。而它真實的視覺效果與功能，則必須經過_________，才能正常顯示出來。 ②使用瀏覽器打開網頁，嘗試將 UTF-8 字符編碼更改為 GBK 或者其他編碼，網頁中的文字發生了變化，為什么？ 輔助分析支架：UTF-8 是互聯網中使用最廣泛的_________，能夠滿足不同語言字符的_________，因此在文字解析時不容易出現“亂碼”現象。 （3）學會求證：W3C 標準的網頁就是一段由 HTML 標簽組成的描述性文本文檔，其各所有代碼的功能都是用來創建網頁的結構的。你同意這個觀點嗎？ ①求證技能：請自行了解并選擇一款人工智能大語言模型工具，來幫你生成一張用 HTML 語言編寫的簡單網頁，并要求對每一行代碼進行注釋。然后閱讀并理解這些 HTML 代碼的意思，再將它們完整地復制到記事本中，并命名為web.html文件，最后用瀏覽器打開并觀察該網頁的頁面效果，看看它是否與你的理解保持一致。 網頁代碼編程語言效果結構表現行為
②求證活動：嘗試修改web.html中的代碼，并觀察修改后的網頁效果，看看它與W3C標準要求是否一致。（具體操作見課件） （4）對學科方法、工具或作品進行評價反思 ①請搜索更多關于網頁制作工具的知識，并與同學分享交流哪一款工具更適合現有的實驗條件。 習題測試 1.瀏覽器渲染網頁時，首先解析的是（ ） A. HTML 標簽 B. CSS 樣式 C. JavaScript 腳本 D. 視頻 小結回顧 請同學按照下列提示進行總結回顧： 1.學到了哪些知識與技能？ 2.提升了哪些方面的能力？ 3.生成了怎樣的觀點？ 布置作業 1.項目實施作業 請各小組對項目探究的階段成果進行整理并提交，整理內容： （1）項目方案與小組分工表 （2）查找并匯總關于網頁制作工具的知識，并與同學分享交流，選擇適合自己的網頁制作工具 2.課后挑戰作業 使用瀏覽器打開某一網頁，按 F12 鍵，在彈出的源代碼窗口中仔細閱讀網頁的源代碼，找出標題、文本、圖片等元素，并對其進行修改編輯，注意觀察瀏覽器的實時渲染結果。 通過范例來幫助學生降低設計制作網頁的難度 通過自主閱讀，培養學生自習能力，通過知識梳理幫助學生厘清知識脈絡。 以瀏覽網站、網頁時常見的現象為情境，將所學知識內化為分析、解釋和求證的能力。 通過習題測試檢測學生掌握程度。

展開更多......

收起↑