第16課探秘網頁與網站教案人教版（2024）初中信息科技七年級全一冊_第1頁
第16課探秘網頁與網站教案人教版（2024）初中信息科技七年級全一冊_第2頁
第16課探秘網頁與網站教案人教版（2024）初中信息科技七年級全一冊_第3頁
第16課探秘網頁與網站教案人教版（2024）初中信息科技七年級全一冊_第4頁
第16課探秘網頁與網站教案人教版（2024）初中信息科技七年級全一冊_第5頁
已閱讀5頁，還剩3頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

課題探秘網頁與網站——我給哪吒安個家學科信息技術學段初中年級七年級課型新授課課時1課時授課時間4月10日教學內容及教材分析本節課是人教版《初中信息技術七年級》第四單元《校園活動線上展》第16課《探秘網頁與代碼》這一課內容加上部分組建web網站相關內容，教材內容緊密結合初中生的認知水平和興趣點，通過簡單的的案例和實際的代碼示例，循序漸進地介紹了HTML語言的基本結構和常用標簽，體驗簡單的網站發布。教材注重理論與實踐的結合，不僅讓學生了解網頁的構成要素，還引導他們動手實踐，通過編寫簡單的HTML代碼來體驗網頁制作和發布網站的樂趣。同時，教材還注重啟發學生的思維，鼓勵他們探索和發現，從而培養他們的信息素養和創新能力。課標要求了解網頁與代碼之間的對應關系。初步認識HTML語言，知道常用標簽的作用。體驗網站的發布。核心素養目標信息意識：增強學生對網頁與代碼關系的認識，理解網頁背后的工作原理，體驗簡單的網站發布，提高信息獲取和處理的能力。計算思維：初步掌握HTML語言的基本概念和常用標簽的作用，學會用計算思維分析和解決網頁制作中的問題。數字化學習與創新：通過實踐操作，培養學生數字化學習的能力，激發他們的創新思維和創造力。信息社會責任：引導學生遵守網絡道德規范，樹立信息社會責任感，學會安全、合法地使用網絡資源。教學重點掌握認識HTML語言，知道常用標簽的作用，體驗簡單網頁制作。教學難點理解驗證Base64編碼保存網頁內容、體驗網站的發布。教學方法任務驅動法、演示講解法、自主學習和小組合作。學習方法觀察學習、合作探究、實踐操作、反思總結教學工具多媒體教室，確保每臺計算機能夠正常上網，信息技術教學平臺、Web服務器軟件、網頁模版載入程序、圖像編碼轉換網頁，并且瀏覽器功能正常。教學過程教學過程教學過程教學過程教學過程教學過程教師活動學生活動新課導入（約3分鐘）：從今年春節的電影《哪吒2》引入課程，提出問題：同學們當時是從哪些途徑了解到有《哪吒2》這部電影的，引導學生說出從抖音、門戶網站、微博、微信公眾號等網絡途徑。這些網絡途徑看到的信息，本質上都是通過網頁傳播的。提出問題：“大家在瀏覽網頁的時候，有沒有想過這些網頁是怎么制作出來的？為什么我們在瀏覽器中輸入一個網址就能看到各種各樣的內容呢？”設計意圖：以熱門電影《哪吒2》為切入點，通過生活化場景激活學生網絡使用經驗，引導其關注日常網頁傳播現象，激發對網頁制作原理的探究興趣。問題鏈設計旨在銜接學生已有認知與信息技術新知，為后續講解網頁開發與網絡通信原理作鋪墊，培養數字化思維。提出問題，學生思考回答。提出問題，學生思考回答。新課教學：簡要介紹本節課的學習內容：“現在我們就一起來探秘網頁與代碼之間的奧秘，了解網頁是如何通過代碼來實現圖文聲像展示和各種功能的，同時簡單體驗一下網站的發布。”一、網頁與HTML代碼（約8分鐘）講解：1、上網瀏覽時會接觸風格各異的網頁，里面有文字、圖像、音頻、視頻等多種資源。通過網頁中的超鏈接，可以方便地在網頁和資源之間跳轉。這一切到底是怎樣完成的呢？2、課件展示網頁與HTML代碼，引導學生發現網頁源代碼，與原網頁里的元素的聯系。左邊原網頁的元素和右邊的源代碼是_一一對應_的。這里的代碼我們稱為HTML；代碼中使用<>尖括號的部分我們稱為_標簽。3、結合上面的對比圖片，講解：超文本標記語言（HyperTextMarkupLanguage），簡稱HTML，是用于創建網頁的標準標記語言。HTML不是一種編程語言，而是一種標記語言，標記語言是一套標記標簽（markuptag）。HTML使用標記標簽來描述網頁。HTML文檔包含了HTML標簽及文本內容。HTML文檔也叫做web頁面，包含很多因素，音樂、文字、鏈接、圖片等設計意圖:這部分教學內容旨在通過引導學生瀏覽網頁并觀察其背后的HTML代碼，使學生初步了解網頁與HTML代碼之間的關系。通過對比，學生可以直觀地看到網頁背后的代碼結構，認識到HTML代碼是構建網頁的基礎。通過觀察和了解HTML標簽的使用，學生將進一步理解HTML語言的基本概念和組成元素，為后續深入學習HTML編程奠定基礎。這一活動不僅培養了學生的觀察能力，還激發了他們對網頁設計和開發的興趣。二、顯示網頁的過程（約8分鐘）HTML語言是標記語言，標簽就是標記符號，瀏覽器獲得網頁代碼后，就會按照標簽的標記，顯示相應的文字、圖片等，進而呈現出完整的網頁效果1、什么是標簽HTML語言中用于標記內容、格式或超鏈接的代碼符號叫標簽。2、結合前面網頁代碼認識標簽3、網頁中常用標簽表示的含義：標簽作用<head></head>設置文檔頭部<title></title>設置網頁標題<body></body>設置文檔主體<h1></h1>、<h2></h2>等設置內容的一級、二級等標題<p></p>設置新一行<imgsrc='***/***.jpg'>設置圖像<ahref='xxxx'></a>設置超鏈接HTML語言的大部分標簽是成對出現的，但也存在不成對的情況雙標簽：成對出現如<HTML>和</HTML><title>和</title>等單標簽：上圖代碼中有一個如<meta>和<img>，現實中還有很多這樣的標簽。4、講解：瀏覽器獲得網頁代碼后，就會按照這些代碼的要求，顯示相應的文字、圖像等，進而呈現出完整的網頁效果。結合電影哪吒2情節，類比：網頁設計就像太乙真人用蓮藕為哪吒重塑肉身！我們設計網頁的過程就像太乙真人用蓮藕拼哪吒！我們用HTML標簽搭積木，標簽<h1>是頂天立地的標題牌，標簽<p>是壘故事的文字磚塊，標簽<img>像畫框掛出圖片窗。每個標簽像一節神奇蓮藕，拼出網頁的胳膊、腿和笑臉。最后敲下<html>和<body>標簽，就像念動復活咒語，空白的屏幕“噗”地跳出會說話的小哪吒！只要我們掌握標簽語言，就能在代碼世界玩出重塑肉身的境界！5、通過觀察，可以看到整個網頁代碼大體上可以分為如下區域。引導學生了解：瀏覽器之所以能夠顯示網頁的內容，是因為瀏覽器翻譯了一段HTML代碼，最終讓我們看到了代碼所要呈現的網頁的內容。整個過程就像用說明書搭積木一樣，瀏覽器是個超級聽話的機器人工程師，你只要給它正確的代碼指令，它就能在很短的時間內建造出你設計的數字世界！設計意圖:讓學生深入理解瀏覽器如何根據HTML代碼顯示網頁的過程。從而理解HTML代碼中圖像標簽的工作原理以及網頁如何加載和顯示本地或編碼后的圖像文件。這一過程旨在加深他們對HTML語言和網頁構建原理的理解。自主活動1哪吒的第1個網頁（約10分鐘）登入教學平臺，點擊活動1哪吒的第1個網頁。完成修改網頁標題、更換圖像、增加圖像說明等任務。（1）點擊活動1頁面的右邊“開始創作”按鈕，進入網頁的設計頁面。（2）進入網頁設計頁面后，點擊右上角的“哪吒安家模版”，頁面自動加載一個哪吒主題網頁模版。（3）根據老師演示和頁面中圖片提示在合適的標簽位置修改代碼，不懂創作的文字內容，學會使用AI工具，參考AI給大家提示的文字內容完善頁面設計。（4）制作好自己滿意的網頁后，點擊保存后，點擊瀏覽器按鈕查看欣賞。設計意圖：本活動旨在通過簡單易懂的網頁設計平臺，引導七年級學生初步接觸網頁設計的基礎知識。通過使用“哪吒安家模版”，學生能夠快速上手，體驗網頁設計的樂趣，同時培養基礎編程能力和邏輯思維。活動還引入AI工具，激發學生的創新意識和對新技術的興趣。通過修改代碼、更換圖像和添加說明，學生能夠動手實踐，最終看到自己的勞動成果，增強自信心和學習動力。三、簡單的網站發布（約15分鐘）講解網站發布的目的：此刻，你們創作的網頁雖已存在于學習平臺，卻如同鎖在玻璃展柜中的藝術品。若想讓作品真正"活"起來，還需構建專屬的展示舞臺——將個人電腦變身為微型服務器，讓局域網內的同學都能實時訪問你的創作。技術本質解析：專業級方案如Windows自帶的IIS服務器，雖能承載大型平臺（如我們的學習平臺），但其配置復雜專業，不好快速掌握。今日我們使用不到1MB的輕量工具即可開啟你的個人作品展。自主活動2體驗簡單的網站發布講解演示如何將剛才制作的網頁發布分享：1、活動1設計的網頁，并保存到本地（比如桌面）。2、根據網站發布的要求，網站首頁通常要使用index命名，修改的網頁的重命名為index.html，并在桌面上新建一個文件夾，作為網站目錄，將index.html文件移動到新建的文件夾中。3、網站發布軟件到新建的文件夾中，運行該程序，查看瀏覽器顯示的網站內容。（引導學生查看圖片丟失）。4、體驗網站圖片顯示兩種方法（從前面發現的問題引入）。方法一：指向了一個圖像文件，找到的圖像，保存到剛才新建的文件夾中，使用記事本打開index.html，修改圖像位置代碼。方法二：把圖像文件中的數據按Base64編碼方案進行了編碼。編碼后，二進制的圖像數據就可以用字符串的形式表示出來。瀏覽器可以識別Base64編碼，并顯示圖像。此時，圖像數據保存在字符串中，因而不再需要原始圖像文件。圖片Base64編碼基本原理：讀取圖片的二進制數據，編譯成瀏覽器可以識別的Base64編碼，圖片在網頁中就可以使用編碼形式存在而不依耐原來的圖片文件。Base64會導致體積膨脹，但在特定場景（如網頁內聯圖片）中不可或缺。使用時需權衡其優缺點，避免濫用大文件編碼。5、同學之間可以使用瀏覽器，輸入IP地址的方式訪問各自的網站。設計意圖：通過網站發布實踐，引導學生在操作中理解網頁文件存儲、路徑關聯及Base64編碼原理，掌握圖片內嵌與外鏈的技術邏輯。設置圖片丟失情境激發問題意識，對比兩種方案培養技術選型思維，結合IP訪問體驗網絡通信本質，實現知識遷移與工程思維的雙重滲透。四、課程小結布置作業（約2分鐘）引導學生回顧本節課的學習內容：1．HTML是一種可用于描述網頁的語言。2．HTML語言中用于標記內容、格式或超鏈接的代碼符號叫標簽。3．修改標簽及內容，可以改變網頁的顯示效果。4．網站發布可以快速分享自己的作品布置作業：1、完成教學平臺活動3的課堂知識測試2、拓展思考：網頁中包含的圖像、音頻、視頻等必須保存在網頁所在的那個網站中嗎？嘗試驗證你的猜想。認真聽講思考問題認真對比，發現對應聯系。認真聽講，回答問題了解常用的標簽表示的含義。認真聽講，了解HTML代碼如何讓瀏覽器顯示相關內容。了解網頁中標簽在哪里了解常用的標簽及其表示

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論