資源簡介 (共32張PPT)第一單元 第4課組建網(wǎng)站跟我做（桂科版）七年級(jí)下1核心素養(yǎng)目標(biāo)3新知講解5拓展延伸7板書設(shè)計(jì)2新知導(dǎo)入4課堂練習(xí)6課堂總結(jié)課后作業(yè)801核心素養(yǎng)目標(biāo)信息意識(shí)計(jì)算思維數(shù)字化學(xué)習(xí)與創(chuàng)新信息社會(huì)責(zé)任不創(chuàng)建或傳播虛假信息的鏈接。避免惡意鏈接對(duì)用戶造成誤導(dǎo)或傷害。嘗試創(chuàng)新的超鏈接形式，如動(dòng)態(tài)鏈接、多媒體鏈接或交互式導(dǎo)航菜單。提升網(wǎng)頁的互動(dòng)性和吸引力。能夠?qū)?fù)雜的網(wǎng)頁結(jié)構(gòu)分解為多個(gè)頁面和模塊。通過超鏈接實(shí)現(xiàn)這些頁面和模塊之間的邏輯連接。理解超鏈接在網(wǎng)頁設(shè)計(jì)中的作用，資源或外部網(wǎng)站。認(rèn)識(shí)到超鏈接對(duì)于信息傳播和用戶導(dǎo)航的重要性。02新知導(dǎo)入活動(dòng)背景壯壯和小伙伴們各自負(fù)責(zé)的網(wǎng)頁已經(jīng)設(shè)計(jì)得差不多了，接下來就要考慮如何將制作好的網(wǎng)頁關(guān)聯(lián)起來，形成一個(gè)完整的網(wǎng)站。壯壯回想起以前認(rèn)識(shí)的老朋友——“超鏈接”。網(wǎng)頁之間的超鏈接設(shè)置跟以前學(xué)習(xí)的超鏈接設(shè)置一樣嗎？網(wǎng)頁之間的超鏈接是指通過一個(gè)鏈接將一個(gè)網(wǎng)頁與另一個(gè)網(wǎng)頁連接起來。這種鏈接可以是：站內(nèi)鏈接或者站外鏈接。02新知導(dǎo)入活動(dòng)目標(biāo)1、理解網(wǎng)頁設(shè)計(jì)超鏈接的跳轉(zhuǎn)過程。2、了解開發(fā)著工具的用法。3、體驗(yàn)網(wǎng)頁之間的跳轉(zhuǎn)過程。03新知講解一、頁面的跳轉(zhuǎn)03新知講解二、開發(fā)者工具對(duì)比瀏覽器窗口和“開發(fā)者工具”的內(nèi)容。03新知講解點(diǎn)擊導(dǎo)航欄的“制作過程”時(shí)，網(wǎng)頁從圖 1-4-1跳轉(zhuǎn)到了圖 1-4-2，這說明了什么？這在“開發(fā)者工具”中對(duì)應(yīng)的 HTML代碼是哪部分？探究實(shí)踐制作過程。 03新知講解仔細(xì)查看圖 1-4-3 的“開發(fā)者工具”窗口中的代碼，能實(shí)現(xiàn)網(wǎng)頁跳轉(zhuǎn)效果的 HTMI代碼有哪些？找一找，比一比，寫下它們之間的異同。探究實(shí)踐制作原料制作過程制作過程。 03新知講解超鏈接就像網(wǎng)頁之間的橋梁，常見類型為文本超鏈接和圖像超鏈接，對(duì)應(yīng)的常見代碼如下表所示。其中，的src 屬性指向的是圖像地址，中的 href屬性指向的是網(wǎng)頁鏈接地址。小貼士03新知講解三、頁面跳轉(zhuǎn)的實(shí)現(xiàn)方式類型 代碼舉例文本超鏈接 需要顯示的文字圖像超鏈接 03新知講解結(jié)合你之前設(shè)計(jì)的網(wǎng)站結(jié)構(gòu)圖，使用箭頭來表示跳轉(zhuǎn)的方向，實(shí)現(xiàn)網(wǎng)頁之間的鏈接，完善表內(nèi)的網(wǎng)站鏈接關(guān)系圖。馬上行動(dòng)03新知講解在設(shè)置超鏈接時(shí)，不可使用文件管理系統(tǒng)中的絕對(duì)路徑來表示網(wǎng)頁的位置，要使用相對(duì)地址。如果目標(biāo)文件與當(dāng)前文件在同一目錄下，直接使用文件名即可；如果目標(biāo)文件位于當(dāng)前文件的子目錄中，需要標(biāo)明子目錄名和文件名；如果目標(biāo)文件位于當(dāng)前文件的父目錄或更上級(jí)目錄中，可以使用“../”來表示上一級(jí)目錄，如下表所示。小貼士03新知講解小貼士層級(jí) 代碼舉例指向當(dāng)前文件夾 顯示文字指向子文件夾 顯示文字指向上一層文件夾 顯示文字03新知講解四、知識(shí)討論選擇一個(gè)你喜歡的網(wǎng)站進(jìn)行瀏覽，感受超鏈接的效果。觀察這些超鏈接是怎么設(shè)置的，比如所處的位置是否顯眼？點(diǎn)擊后網(wǎng)頁的跳轉(zhuǎn)是否流暢？有沒有遇到過點(diǎn)擊了沒反應(yīng)，或者跳轉(zhuǎn)到了錯(cuò)誤頁面的情況？把你的瀏覽體驗(yàn)記錄在下表中和大家分享。03新知講解四、知識(shí)討論超鏈接的形式 所在位置/顯示效果 主要作用 我的感受圖像文本我發(fā)現(xiàn)設(shè)計(jì)得好的超鏈接具有的特點(diǎn)：按鈕列表錨點(diǎn)鏈接導(dǎo)航欄，鼠標(biāo)懸停時(shí)放大提供視覺吸引力，引導(dǎo)點(diǎn)擊直觀、吸引人，易于識(shí)別段落中，下劃線并改變顏色直接引導(dǎo)用戶到相關(guān)內(nèi)容清晰、直接，易于理解頁面底部，懸停時(shí)顏色變化突出重要操作明顯、易點(diǎn)擊，提高轉(zhuǎn)化率側(cè)邊欄，項(xiàng)目符號(hào)前組織信息，方便瀏覽結(jié)構(gòu)化、易于導(dǎo)航頁面內(nèi)不同部分實(shí)現(xiàn)頁面內(nèi)快速導(dǎo)航提高頁面內(nèi)導(dǎo)航效率直觀、清晰、一致、易于訪問、提供反饋、增強(qiáng)用戶體驗(yàn)。這些特點(diǎn)確保了超鏈接不僅在視覺上吸引人，而且在功能上也能滿足用戶的需求，提高網(wǎng)站的可用性和用戶滿意度。04課堂練習(xí)一、選擇題1、在HTML中，創(chuàng)建指向外部網(wǎng)站的超鏈接，應(yīng)該使用哪個(gè)標(biāo)簽？( )A. B. C. D. 2、以下哪個(gè)屬性用于在新標(biāo)簽頁中打開超鏈接？（ ）A. href B. target C. src D. alt3、在HTML中，哪個(gè)屬性可以為超鏈接提供額外的信息，當(dāng)用戶將鼠標(biāo)懸停在鏈接上時(shí)顯示？（ ）A. title B. altC. href D. srcBBA04課堂練習(xí)4、如果你有一個(gè)圖片鏈接到一個(gè)網(wǎng)頁，你應(yīng)該將標(biāo)簽放在哪個(gè)標(biāo)簽內(nèi)部？（ ）A. B. C. D. 5、 HTML超鏈接屬性 。（ ）以下哪個(gè)選項(xiàng)正確描述了HTML中標(biāo)簽的href屬性的作用？A. 定義鏈接文本的樣式B. 指定鏈接的目標(biāo)URL地址C. 控制鏈接在何種設(shè)備上打開D. 確定鏈接文本的顯示語言二、判斷題1、在HTML中，給超鏈接設(shè)置target="_blank"屬性時(shí)，該鏈接總會(huì)在新的瀏覽器標(biāo)簽頁中打開。( )ABX04課堂練習(xí)三、操作題1、改變顏色，在 標(biāo)簽內(nèi)添加一個(gè) style 屬性，用于定義內(nèi)聯(lián)樣式。如制作原料，將超鏈接文字的顏色設(shè)置為白色，效果如圖所示。制作原料04課堂練習(xí)2、去掉下劃線，修改style屬性,如制作原料，將超鏈接文字的下劃線效果去掉，效果如圖所示。制作原料04課堂練習(xí)3、設(shè)置背景色，修改 style 屬性，如制作原料，給超鏈接文字設(shè)置背景色效果如圖所示。制作原料05拓展延伸超鏈接的結(jié)構(gòu)和格式絕對(duì)URL：完整的網(wǎng)址，如 https://www.。相對(duì)URL：相對(duì)于當(dāng)前頁面的網(wǎng)址，如 /about 或 ../contact.html。協(xié)議相關(guān)：了解不同協(xié)議（如 http, https, ftp）對(duì)鏈接行為的影響。05拓展延伸超鏈接的屬性hreflang：指定鏈接內(nèi)容的語言，有助于多語言網(wǎng)站的SEO。type：指定鏈接資源的MIME類型，有助于瀏覽器正確處理資源。05拓展延伸鏈接的動(dòng)態(tài)生成JavaScript：使用JavaScript動(dòng)態(tài)生成鏈接，如在用戶交互后創(chuàng)建鏈接。服務(wù)器端語言：如PHP、Python等，可以在服務(wù)器端生成動(dòng)態(tài)鏈接。05拓展延伸鏈接的安全性防止鏈接欺騙：確保鏈接指向正確的地址，避免用戶被誤導(dǎo)到惡意網(wǎng)站。安全協(xié)議：使用HTTPS協(xié)議來保護(hù)鏈接的數(shù)據(jù)傳輸安全。06課堂總結(jié)1引入新知內(nèi)容組建網(wǎng)站2學(xué)習(xí)超鏈接的使用方法3學(xué)習(xí)使用超鏈接的注意事項(xiàng)4完成課題練習(xí)5進(jìn)行相關(guān)知識(shí)拓展1234507板書設(shè)計(jì)組建網(wǎng)站1、進(jìn)行新知引入2、學(xué)習(xí)頁面的跳轉(zhuǎn)方式3、學(xué)習(xí)超鏈接的使用4、完成課堂練習(xí)5、進(jìn)行知識(shí)拓展課后作業(yè)。1、完成頁面跳轉(zhuǎn)練習(xí)08課后作業(yè)1、在HTML中創(chuàng)建一個(gè)指向 "https://www." 的超鏈接，并且當(dāng)用戶點(diǎn)擊這個(gè)鏈接時(shí)，它應(yīng)該在新的瀏覽器標(biāo)簽頁中打開。請?zhí)顚懸韵翲TML代碼中的空白部分：點(diǎn)擊訪問示例網(wǎng)站。點(diǎn)擊訪問示例網(wǎng)站08課后作業(yè)2、設(shè)計(jì)一個(gè)簡單的網(wǎng)頁導(dǎo)航欄，包含三個(gè)超鏈接，分別指向“首頁”、“關(guān)于我們”和“聯(lián)系我們”三個(gè)頁面。使用HTML編寫代碼。要求：鏈接文本應(yīng)該清晰描述鏈接的目的。假設(shè)這三個(gè)頁面的文件名分別為 index.html、about.html 和 contact.html，它們都位于網(wǎng)站的根目錄下。08課后作業(yè)首頁關(guān)于我們聯(lián)系我們https://www.21cnjy.com/recruitment/home/fine 展開更多...... 收起↑ 資源列表 【桂科版】《信息科技》七年級(jí)下冊第1單元第4課《組建網(wǎng)站跟我做》.pptx 錨點(diǎn)鏈接和圖片鏈接.mp4 縮略圖、資源來源于二一教育資源庫