資源簡介 (共23張PPT)信息技術七年級 下冊第一單元第1課 精彩盡在網頁中-從制作到渲染一、 項目籌備科技文化藝術節是學校一項頗具特色的活動，每年都會邀請一大批校外人士參加。為了能讓更多人了解并積極參與，需要你組建一支團隊，運用語文、英語、美術等學科知識，來設計制作一份便于社交媒體轉發的、以“向世界介紹我的學校”為主題的宣傳網頁。1.單元項目情境一、 項目籌備2.單元項目任務你會如何設計制作“向世界介紹我的學校”宣傳網頁？01 準備過程02 整體結構03 重點說明04 名詞解釋（1）項目方案范例知識學習 實施步驟 預期成果（1）學習教材中的相關知識 （2）了解如何根據需求來收集、處理制作網頁所需要的各類素材（文字、圖片、音頻、視頻等） （3）了解如何根據需求來設計網頁 （4）了解根據設計來制作網頁 （5）掌握如何對網頁進行測試、優化和發布 （1）確定網頁的欄目 （2）選寫出網頁欄目對應的宣傳內容要求 （3）收集并處理素材 （4）設計制作網頁 （5）測試優化發布網頁 （1）向世界介紹我的學校網頁（2）項目成果匯報文檔（PPT格式）01 準備過程02 整體結構03 重點說明04 名詞解釋（2）項目分工姓名 角色 職責 組長 主持整個項目開展過程，協調處理各種情況以確保完成項 目任務 組織員 組織各成員共同開展需求分析、規劃實施與交流評價等具 體活動 記錄員 記錄并整理需求分析、規劃實施與交流評價等活動的相關 信息 檢查員 核查各項任務的完成情況，制作匯報 PPT 并負責對外展示 交流為此，我們需要學習哪些知識？二、知識探究第1節精彩盡在網頁中——從制作到渲染主要內容/01/02/03第2節流暢的網絡視頻——視頻壓縮、流媒體及版權保護第3節信息傳輸保安全——Web 安全協議01 準備過程02 整體結構03 重點說明04 名詞解釋項目任務評估完成整個項目：預計需要5課時本節課的任務：了解網站與網頁之間的關系、網頁的制作標準與設計制作工具、瀏覽器是如何渲染網頁的，為項目制作儲備知識。01 準備過程02 整體結構03 重點說明04 名詞解釋學習網頁知識，該從哪里開始？二、 知識探究01 準備過程02 整體結構03 重點說明04 名詞解釋探究內容遵循“概念→實現→應用”的認知規律。1.網站和網頁之間的關系是什么？——變革基礎（概念）習得2.瀏覽器是如何渲染網頁的？——關鍵技術（實現）運用3.在網上搜索適合的網頁制作工具制作網頁？——重要工具（應用）探究……知識習得（1）自主閱讀：以書本P3-9為主，網絡知識作補充。（2）知識梳理：①網站與網頁之間是 和 的關系。②網站是 上用來存放 ，它是所有相關網頁的 ，而 則是網站中的文檔元素。③ 是用于標識網站的名稱， 是指輸入網站地址后，默認被打開的第一張網頁。④在網站中， 是用來導航與鏈接其他內頁，而 就是網站內部的其他頁面。將知識轉為能力學會分析：使用瀏覽器訪問兩個你喜歡的網站，并通過單擊超鏈接切換不同的網頁，在這個過程中，瀏覽的網頁內有哪些基本元素，基本的結構是什么，是通過什么實現的？用戶通過_________來架設網頁的結構，通過_________控制網頁的樣式，通過_________來為網頁添加交互功能和動態效果。將知識轉為能力學會解釋：編寫生成的網頁可直接在客戶端的任意軟件上顯示出來，這種說法對嗎？請說明理由。無論是采用哪種制作工具，編寫生成的網頁都是一種包含HTML標簽、CSS樣式與JavaScript的純文本文件。而它真實的視覺效果與功能，則必須經過_________，才能正常顯示出來。將知識轉為能力學會解釋：使用瀏覽器打開網頁，嘗試將 UTF-8 字符編碼更改為 GBK 或者其他編碼，網頁中的文字發生了變化，為什么？UTF-8 是互聯網中使用最廣泛的_________，能夠滿足不同語言字符的_________，因此在文字解析時不容易出現“亂碼”現象。將知識轉為能力學會求證：W3C 標準的網頁就是一段由 HTML 標簽組成的描述性文本文檔，其各所有代碼的功能都是用來創建網頁的結構的。你同意這個觀點嗎？方法：請自行了解并選擇一款人工智能大語言模型工具，來幫你生成一張用 HTML 語言編寫的簡單網頁，并要求對每一行代碼進行注釋。然后閱讀并理解這些 HTML 代碼的意思，再將它們完整地復制到記事本中，并命名為web.html文件，最后用瀏覽器打開并觀察該網頁的頁面效果，看看它是否與你的理解保持一致。https://www..cn/tiy/t.asp f=eg_html_intro）將知識轉為能力學會求證：W3C 標準的網頁就是一段由 HTML 標簽組成的描述性文本文檔，其各所有代碼的功能都是用來創建網頁的結構的。你同意這個觀點嗎？網頁代碼 編程語言 效果結構 表現 行為 將知識轉為能力求證活動：嘗試修改web.html中的代碼，并觀察修改后的網頁效果，看看它與W3C標準要求是否一致。觀察當改變HTML基本元素后發生的變化生成的效果，分析HTML的基本結構。修改后的： <title><br/>增加一行：<p> <p><br/>修改<style>：原始代碼： <br/>修改后代碼： <br/>將知識轉為能力<br/>對學科方法、工具或作品進行評價反思<br/>①請搜索更多關于網頁制作工具的知識，并與同學分享交流哪一款工具更適合現有的實驗條件。<br/>測試題<br/>1.瀏覽器渲染網頁時，首先解析的是（ ）<br/>A. HTML 標簽 B. CSS 樣式<br/>C. JavaScript 腳本 D. 視頻<br/>三、 習題測試<br/>學到了哪些知識與技能？<br/>提升了哪些方面的能力？<br/>生成了怎樣的觀點？<br/>四、 小結回顧<br/>1.項目實施作業<br/>請各小組對項目探究的階段成果進行整理并提交，整理內容：<br/>（1）項目方案與小組分工表<br/>（2）查找并匯總關于網頁制作工具的知識，并與同學分享交流，選擇適合自己的網頁制作工具<br/>2.課后挑戰作業（對應B版中的“挑戰”部分）<br/>使用瀏覽器打開某一網頁，按 F12 鍵，在彈出的源代碼窗口中仔細閱讀網頁的源代碼，找出標題、文本、圖片等元素，并對其進行修改編輯，注意觀察瀏覽器的實時渲染結果。<br/>五、 作業制作簡單網頁<br/>實驗目標：初步學會制作簡單網頁，并能通過修改代碼瀏覽網頁效果驗HTML各元素的作用。<br/>器材要求：信息科技實驗室（計算機、網絡、AIGC平臺）<br/>實驗步驟：<br/>觀察與記錄<br/>1.觀察HTML文檔的基本格式生成效果。（可以使用W3C提供的在線HTML編輯器https://www..cn/tiy/t.asp f=eg_html_intro）<br/>請自行了解并選擇一款人工智能大語言模型工具，來幫你生成一張用 HTML 語言編寫的簡單網頁，并要求對每一行代碼進行注釋。然后閱讀并理解這些 HTML 代碼的意思，再將它們完整地復制到記事本中，并命名為web.html文件，最后用瀏覽器打開并觀察該網頁的頁面效果，看看它是否與你的理解保持一致。<br/>AI大模型生成代碼：<br/>生成效果<br/>識別特征<br/>觀察當改變HTML基本元素后發生的變化生成的效果，分析HTML的基本結構。<br/>修改后的：<title> <title><br/>增加一行：<p> <p><br/>修改<style>：原始代碼： <br/>修改后代碼： <br/>修改后的HTML經瀏覽器生成的效果<br/>三、綜合判斷<br/>問題思考：<br/>在網頁代碼中，HTML的作用是什么？CSS的作用是什么？JS（JavaScript腳本語言）的作用是什么？<br/>網頁代碼 編程語言 效果<br/>結構<br/>表現<br/>行為<br/>附：參考代碼<br/>使用百度AI助手生成的<br/>https://www./tryit/tryit.asp filename=tryhtml_hello<br/>當然！以下是一個簡單的HTML網頁示例，包含基本的結構和一些內容：<br/>html<br/>Copy Code<br/><!DOCTYPE html><br/><html lang="zh-CN"><br/><head><br/><meta charset="UTF-8"><br/><meta name="viewport" content="width=device-width, initial-scale=1.0"><br/><title>簡單網頁示例歡迎來到我的簡單網頁這是一個標題這是一個段落，包含一些示例文本。您可以在這里添加您想要展示的內容。列表項1列表項2列表項3希望您能喜歡這個簡單的網頁示例！