資源簡介

中小學(xué)教育資源及組卷應(yīng)用平臺
第4課《組建網(wǎng)站跟我做》教學(xué)設(shè)計
課題 組建網(wǎng)站跟我做 單元 第一單元 學(xué)科 信息科技 年級 七年級下
核心素養(yǎng)目標 信息意識:理解超鏈接在網(wǎng)頁中用于連接不同頁面、資源或外部網(wǎng)站的作用，認識到它對信息傳播和用戶導(dǎo)航的重要性。計算思維:將復(fù)雜的網(wǎng)頁結(jié)構(gòu)分解為多個頁面和模塊，通過超鏈接實現(xiàn)它們之間的邏輯連接。數(shù)字化學(xué)習(xí)與創(chuàng)新:嘗試創(chuàng)新的超鏈接形式，如動態(tài)鏈接、多媒體鏈接或交互式導(dǎo)航菜單，提升網(wǎng)頁的互動性和吸引力。信息社會責任:不創(chuàng)建或傳播虛假信息的鏈接，避免惡意鏈接對用戶造成誤導(dǎo)或傷害。
教學(xué)重點 1、理解超鏈接在網(wǎng)頁設(shè)計中的作用2、生應(yīng)該學(xué)會如何使用HTML 標簽創(chuàng)建超鏈接，并了解常見的屬性如 href, target, title 等。
教學(xué)難點 1、超鏈接在網(wǎng)頁設(shè)計中的運用。
教學(xué)過程
教學(xué)環(huán)節(jié) 教師活動 學(xué)生活動 設(shè)計意圖
導(dǎo)入新課 板書課題。1. 展示一些設(shè)計精美的網(wǎng)站，引導(dǎo)學(xué)生觀察網(wǎng)頁之間的跳轉(zhuǎn)效果，提問：“大家在瀏覽這些網(wǎng)站時，有沒有注意到是如何從一個頁面跳轉(zhuǎn)到另一個頁面的呢？”
2. 壯壯和小伙伴們各自負責的網(wǎng)頁已經(jīng)設(shè)計得差不多了，接下來就要考慮如何將制作好的網(wǎng)頁關(guān)聯(lián)起來，形成一個完整的網(wǎng)站。壯壯回想起以前認識的老朋友——“超鏈接”。網(wǎng)頁之間的超鏈接設(shè)置跟以前學(xué)習(xí)的超鏈接設(shè)置一樣嗎？網(wǎng)頁之間的超鏈接是指通過一個鏈接將一個網(wǎng)頁與另一個網(wǎng)頁連接起來。這種鏈接可以是：站內(nèi)鏈接或者站外鏈接。 1. 認真觀察網(wǎng)站頁面跳轉(zhuǎn)，思考老師提出的問題。
2. 學(xué)習(xí)新知引入，觀看教學(xué)視頻。 1. 通過展示有趣的網(wǎng)站實例，激發(fā)學(xué)生的學(xué)習(xí)興趣和好奇心。
2. 以故事情景引入，讓學(xué)生更容易理解本節(jié)課知識在實際中的應(yīng)用，增強學(xué)習(xí)的積極性。
講授新課 新知講解：頁面的跳轉(zhuǎn)
1. 結(jié)合 PPT 中 “五色糯米飯?zhí)矫刂谩?的網(wǎng)頁示例，演示點擊導(dǎo)航欄 “制作過程” 時網(wǎng)頁的跳轉(zhuǎn)過程，引導(dǎo)學(xué)生思考跳轉(zhuǎn)的原理。
2. 打開 “開發(fā)者工具”，展示對應(yīng)代碼，講解實現(xiàn)網(wǎng)頁跳轉(zhuǎn)的關(guān)鍵代碼部分，如 制作過程 。
二、開發(fā)者工具
1. 讓學(xué)生對比瀏覽器窗口和 “開發(fā)者工具” 的內(nèi)容，引導(dǎo)學(xué)生觀察代碼結(jié)構(gòu)和元素與頁面顯示的對應(yīng)關(guān)系。
2. 組織學(xué)生進行探究實踐，在 “開發(fā)者工具” 中找出能實現(xiàn)網(wǎng)頁跳轉(zhuǎn)效果的 HTML 代碼，比較它們的異同。
三、頁面跳轉(zhuǎn)的實現(xiàn)方式
1. 講解超鏈接的常見類型為文本超鏈接和圖像超鏈接，通過 PPT 展示對應(yīng)的代碼示例和實際效果。
2. 讓學(xué)生結(jié)合之前設(shè)計的網(wǎng)站結(jié)構(gòu)圖，使用箭頭表示跳轉(zhuǎn)方向，完善網(wǎng)站鏈接關(guān)系圖，實現(xiàn)網(wǎng)頁之間的鏈接。
四、知識討論
1. 讓學(xué)生選擇一個自己喜歡的網(wǎng)站進行瀏覽，感受超鏈接的效果，觀察超鏈接的設(shè)置特點，包括位置、顯示效果、作用等。
2. 組織學(xué)生填寫表格，分享自己的瀏覽體驗，引導(dǎo)學(xué)生總結(jié)設(shè)計得好的超鏈接的特點。五、課堂練習(xí)。完成PPT22頁到17頁練習(xí)題。
六、拓展延伸1、絕對URL：完整的網(wǎng)址，如 https://www.。相對URL：相對于當前頁面的網(wǎng)址，如 /about 或 ../contact.html。協(xié)議相關(guān)：了解不同協(xié)議（如 http, https, ftp）對鏈接行為的影響。2、hreflang：指定鏈接內(nèi)容的語言，有助于多語言網(wǎng)站的SEO。type：指定鏈接資源的MIME類型，有助于瀏覽器正確處理資源。3、JavaScript：使用JavaScript動態(tài)生成鏈接，如在用戶交互后創(chuàng)建鏈接。服務(wù)器端語言：如PHP、Python等，可以在服務(wù)器端生成動態(tài)鏈接。4、防止鏈接欺騙：確保鏈接指向正確的地址，避免用戶被誤導(dǎo)到惡意網(wǎng)站。安全協(xié)議：使用HTTPS協(xié)議來保護鏈接的數(shù)據(jù)傳輸安全。 一、頁面的跳轉(zhuǎn)
1. 認真觀察網(wǎng)頁跳轉(zhuǎn)過程，思考跳轉(zhuǎn)原理，積極回答老師的問題。
二、開發(fā)者工具
1. 仔細對比瀏覽器窗口和 “開發(fā)者工具” 內(nèi)容，觀察代碼與頁面元素的對應(yīng)關(guān)系。
三、頁面跳轉(zhuǎn)的實現(xiàn)方式
1. 理解文本超鏈接和圖像超鏈接的概念和代碼示例，記錄筆記。
2. 根據(jù)網(wǎng)站結(jié)構(gòu)圖，完成網(wǎng)站鏈接關(guān)系圖，實現(xiàn)網(wǎng)頁之間的鏈接設(shè)置。
四、知識討論
1. 選擇網(wǎng)站瀏覽，仔細觀察超鏈接的設(shè)置特點。
2. 填寫表格，分享瀏覽體驗，參與討論，總結(jié)超鏈接的優(yōu)點。
五、超鏈接的其他知識
1. 理解相對地址的使用方法和原因，記憶不同層級相對地址的代碼格式。
2. 了解超鏈接結(jié)構(gòu)、屬性、動態(tài)生成和安全性等方面的知識，拓寬知識面。 一、頁面的跳轉(zhuǎn)
1. 幫助學(xué)生直觀理解網(wǎng)頁跳轉(zhuǎn)的原理和實現(xiàn)方式。
2. 培養(yǎng)學(xué)生觀察和分析代碼的能力，為后續(xù)學(xué)習(xí) HTML 代碼打下基礎(chǔ)。
二、開發(fā)者工具
1. 讓學(xué)生熟悉 “開發(fā)者工具” 的使用，提高學(xué)生對網(wǎng)頁代碼的認知。
2. 通過實踐探究，培養(yǎng)學(xué)生自主學(xué)習(xí)和探索的能力。
三、頁面跳轉(zhuǎn)的實現(xiàn)方式
1. 讓學(xué)生掌握超鏈接的常見類型和代碼編寫方法。
2. 鍛煉學(xué)生將理論知識應(yīng)用到實際網(wǎng)站建設(shè)中的能力，培養(yǎng)學(xué)生的邏輯思維。
四、知識討論
1. 培養(yǎng)學(xué)生的觀察能力和對知識的歸納總結(jié)能力。
2. 通過分享交流，讓學(xué)生從多個角度了解超鏈接的設(shè)計要點。
五、超鏈接的其他知識
1. 確保學(xué)生在設(shè)置超鏈接時能正確使用相對地址，避免錯誤。
2. 拓寬學(xué)生的知識面，讓學(xué)生了解超鏈接相關(guān)的前沿知識，激發(fā)學(xué)生的學(xué)習(xí)興趣。
課堂小結(jié) 圖書的查找算法1、進行新知引入2、學(xué)習(xí)超鏈接的使用方法3、學(xué)習(xí)使用超鏈接的注意事項4、完成課堂練習(xí)5、進行知識拓展 總結(jié)回顧 對本節(jié)課內(nèi)容進行總結(jié)概括。
課后作業(yè) 1. 布置作業(yè)：在 HTML 中創(chuàng)建一個指向 "https://www. ( https: / / www. / " \t "https: / / www. / chat / _blank )" 的超鏈接，并且當用戶點擊這個鏈接時，它應(yīng)該在新的瀏覽器標簽頁中打開；設(shè)計一個簡單的網(wǎng)頁導(dǎo)航欄，包含三個超鏈接，分別指向 “首頁”、“關(guān)于我們” 和 “聯(lián)系我們” 三個頁面，使用 HTML 編寫代碼，假設(shè)這三個頁面的文件名分別為 index.html、about.html 和 contact.html，它們都位于網(wǎng)站的根目錄下。
2. 提醒學(xué)生認真完成作業(yè)，下節(jié)課進行檢查和點評。 布置作業(yè) 拓展學(xué)生的學(xué)習(xí)能力
課堂板書 觀看板書 強調(diào)教學(xué)重點內(nèi)容。
21世紀教育網(wǎng) www.21cnjy.com 精品試卷·第 2 頁 （共 2 頁）
HYPERLINK "http://www.21cnjy.com/" 21世紀教育網(wǎng)(www.21cnjy.com)

展開更多......

收起↑