《建立網(wǎng)頁超鏈接》教學(xué)設(shè)計(jì)

九年級(jí)信息技術(shù)第三冊(cè)第二章第5節(jié)《建立網(wǎng)頁超鏈接》教學(xué)設(shè)計(jì)學(xué)習(xí)者分析本節(jié)課的教學(xué)對(duì)象是九年級(jí)的學(xué)生，通過之前對(duì)網(wǎng)頁和網(wǎng)站知識(shí)的學(xué)習(xí)，學(xué)生學(xué)會(huì)了創(chuàng)建站點(diǎn)和網(wǎng)頁，學(xué)會(huì)了用表格布局網(wǎng)頁和編輯網(wǎng)頁，能排版制作圖文并茂的網(wǎng)頁作品，為本節(jié)學(xué)習(xí)超鏈接奠定了基礎(chǔ)。建立網(wǎng)頁超鏈接是《網(wǎng)頁制作與發(fā)布》這章中比較重要的內(nèi)容，本節(jié)課的學(xué)習(xí)是運(yùn)用超鏈接把多張網(wǎng)頁連接起來，使網(wǎng)頁形成一個(gè)整體，方便網(wǎng)頁之間的來回跳轉(zhuǎn)。教材內(nèi)容分析本節(jié)的主要內(nèi)容及在本書中的地位《建立網(wǎng)頁超鏈接》是廣州市信息技術(shù)教科書九年級(jí)(2015.8版，2019.8重印）第二章第5節(jié)的內(nèi)容，本節(jié)的主要內(nèi)容有：超級(jí)鏈接的概念，建立內(nèi)部鏈接、錨點(diǎn)鏈接和電子郵件鏈接。教學(xué)重點(diǎn)、難點(diǎn)：重點(diǎn)：建立超鏈接的方法難點(diǎn)：建立錨點(diǎn)鏈接三、教學(xué)目標(biāo)1.知識(shí)與技能（1）理解超鏈接在網(wǎng)頁設(shè)計(jì)中的重要作用（信息意識(shí)）。（2）理解超鏈接的概念，了解鏈接的種類（數(shù)字化學(xué)習(xí)與創(chuàng)新）。（3）學(xué)會(huì)建立內(nèi)部鏈接、外部鏈接、錨點(diǎn)鏈接和電子郵件鏈接（數(shù)字化學(xué)習(xí)與創(chuàng)新）。2.過程與方法（1）通過講解了解網(wǎng)頁中超鏈接的類型（數(shù)字化學(xué)習(xí)與創(chuàng)新）。（2）通過聽講和探究，學(xué)會(huì)一般建立超鏈接的方法（數(shù)字化學(xué)習(xí)與創(chuàng)新）。情感態(tài)度價(jià)值觀在制作過程中激發(fā)學(xué)生的興趣和創(chuàng)造力；培養(yǎng)學(xué)生觀察能力、欣賞美創(chuàng)造美的能力。培養(yǎng)學(xué)生觀察歸納總結(jié)問題的能力（計(jì)算思維）。認(rèn)識(shí)到信息技術(shù)發(fā)展對(duì)社會(huì)進(jìn)步和人們的生活帶來影響（信息社會(huì)責(zé)任）。讓學(xué)生養(yǎng)成在日常生活和學(xué)習(xí)中應(yīng)用網(wǎng)頁技術(shù)解決問題、為學(xué)習(xí)生活服務(wù)的基本態(tài)度和基本能力，以提高學(xué)生的信息素養(yǎng)。四、教學(xué)理念和方法以學(xué)生的學(xué)習(xí)和發(fā)展為中心，基于真實(shí)情境，采用發(fā)現(xiàn)式、探究式的教學(xué)方法。借助微課導(dǎo)學(xué)的方式，方便學(xué)生有針對(duì)性地學(xué)習(xí)；運(yùn)用信息技術(shù)培養(yǎng)學(xué)生的情感價(jià)值觀。五、教學(xué)過程設(shè)計(jì)1.教學(xué)內(nèi)容的組織與呈現(xiàn)方式教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)目的導(dǎo)入師：前幾節(jié)課，我們已經(jīng)學(xué)會(huì)了制作網(wǎng)頁，現(xiàn)在我們要翻閱和查找網(wǎng)頁的內(nèi)容，一張張地打開網(wǎng)頁的方法是很低效率的。那有什么辦法能解決這個(gè)問題呢？對(duì)了，就是用超鏈接。那這節(jié)課我們要學(xué)習(xí)這個(gè)新的知識(shí)“超鏈接”，運(yùn)用超鏈接能把網(wǎng)頁連接起來，使網(wǎng)頁形成一個(gè)整體，方便我們實(shí)現(xiàn)來回跳轉(zhuǎn)。思考解決方法通過實(shí)際生活中的例子，引導(dǎo)學(xué)生思考，采用信息技術(shù)手段解決問題。新課學(xué)習(xí)我們先來看一下本節(jié)課的學(xué)習(xí)目標(biāo)：（1）理解超鏈接在網(wǎng)頁設(shè)計(jì)中的重要作用（2）理解超鏈接的概念，了解鏈接的種類（3）學(xué)會(huì)建立內(nèi)部鏈接、外部鏈接、錨點(diǎn)鏈接和電子郵件鏈接學(xué)生了解本節(jié)課學(xué)習(xí)目標(biāo)講解新課的學(xué)習(xí)目標(biāo)，讓學(xué)生對(duì)知識(shí)的總體脈絡(luò)有所了解。超鏈接的概念（一）超鏈接的概念超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系，它可以建立在文字、圖片或者圖片的某個(gè)位置上，鏈接跳轉(zhuǎn)的目標(biāo)可以是另一個(gè)網(wǎng)頁（內(nèi)部鏈接）、另一個(gè)網(wǎng)站（外部鏈接）、同一網(wǎng)頁內(nèi)的其他地方（錨點(diǎn)鏈接）、一個(gè)郵件地址（電子郵件鏈接）、一個(gè)文件等。跳轉(zhuǎn)的目標(biāo)是另一張網(wǎng)頁的，叫做內(nèi)部鏈接；跳轉(zhuǎn)的目標(biāo)是另一個(gè)網(wǎng)站的，叫做外部鏈接；跳轉(zhuǎn)的目標(biāo)是同一網(wǎng)頁內(nèi)的其他地方的，叫做錨點(diǎn)鏈接；跳轉(zhuǎn)的目標(biāo)是一個(gè)郵件地址的，叫做電子郵件鏈接；我們?cè)鯓优袛嘁粋€(gè)地方是否有“超鏈接”呢？對(duì)了，有“手”形的地方就證明有建立了超鏈接的。學(xué)生聽講并回答問題通過對(duì)超鏈接概念的講解，引出超鏈接的四種不同類型，方便學(xué)生理解概念之間的聯(lián)系與差異。超鏈接的分類（二）超鏈接的種類內(nèi)部鏈接、外部鏈接、錨點(diǎn)鏈接和電子郵件鏈接。下面我們就逐個(gè)看看吧！學(xué)生聽講并思考為下一步逐個(gè)鏈接類型講解做準(zhǔn)備。內(nèi)部鏈接1.內(nèi)部鏈接是把同一網(wǎng)站內(nèi)的網(wǎng)頁連接起來。下面我們通過微課來學(xué)習(xí)建立內(nèi)部鏈接的方法，和內(nèi)部鏈接的效果。播放微課：【內(nèi)部鏈接】（1）建立內(nèi)部鏈接的方法；（2）內(nèi)部鏈接的效果；學(xué)生觀察并學(xué)習(xí)內(nèi)部鏈接通過微課導(dǎo)入，讓學(xué)生了解內(nèi)部鏈接。外部鏈接2.外部鏈接就是不同網(wǎng)站網(wǎng)頁之間的鏈接。外部鏈接能給瀏覽者更廣闊的閱讀空間，那我們一起來學(xué)習(xí)建立外部鏈接的方法吧！播放微課：【外部鏈接】（1）建立外部鏈接的方法；（2）鏈接的“目標(biāo)”設(shè)置；播放微課【目標(biāo)下拉列表】下面老師講解一下超鏈接“屬性”面板中的“目標(biāo)”下拉列表。剛才我們學(xué)了“目標(biāo)”下拉列表有四個(gè)選項(xiàng)，而這四個(gè)選項(xiàng)中最常用的是_blank和_self。_blank:在新的窗口中打開鏈接_self:在當(dāng)前窗口中打開鏈接，默認(rèn)狀態(tài)就是這個(gè)我們通過實(shí)際的例子，了解一下這兩者的區(qū)別吧！待會(huì)，老師會(huì)在“發(fā)展歷程”和“風(fēng)格式樣”這里建立超鏈接，分別使用_blank和_self，看看有什么不同。第一步，建立超鏈接，方法：選中“發(fā)展歷程”這四個(gè)字，在鏈接旁邊打開“develop.html”。這樣也可以建立超鏈接。第二步，在下拉列表框中“_blank”。用同樣的方法，建立另一個(gè)鏈接。選中“風(fēng)格式樣”這四個(gè)字，在鏈接打開“style.html”。建立好超鏈接。在下拉列表框中選擇”_self”,什么都不選默認(rèn)狀態(tài)也是這個(gè)。好，我們保存文件，按小電腦或者F12測(cè)試一下文件。學(xué)生觀察并學(xué)習(xí)外部鏈接通過微課導(dǎo)入，讓學(xué)生了解外部鏈接。錨點(diǎn)鏈接3.使用錨點(diǎn)鏈接能快速的定位到同一網(wǎng)頁中的指定位置，讓我們一起來看看建立錨點(diǎn)鏈接的方法吧！播放微課：【錨點(diǎn)鏈接】1、錨點(diǎn)鏈接的方法；2、建立錨點(diǎn)鏈接的效果；學(xué)生觀察并學(xué)習(xí)錨點(diǎn)鏈接通過微課導(dǎo)入，讓學(xué)生了解錨點(diǎn)鏈接。電子郵件鏈接4.單擊電子郵件鏈接，可以發(fā)送電子郵件到指定郵箱，一般來說網(wǎng)站上的電子郵件鏈接設(shè)計(jì)是發(fā)送郵件給網(wǎng)頁的建立者，這樣就可以有效地實(shí)現(xiàn)網(wǎng)頁的使用者和建立者的互動(dòng)。【電子郵件鏈接微課】1、建立電子郵件鏈接的方法；2、電子郵件鏈接的效果；學(xué)生觀察并學(xué)習(xí)電子郵件鏈接通過微課導(dǎo)入，讓學(xué)生了解電子郵件鏈接。超鏈接的代碼（三）我們學(xué)完四種不同的超鏈接方法了，現(xiàn)在來看下他們各自的代碼。第一行是內(nèi)部鏈接的代碼，我們看到是以<ahref>開頭</a>結(jié)束，這行代碼就可以在“發(fā)展歷程”這幾個(gè)字上面，實(shí)現(xiàn)超鏈接到develop.html這個(gè)頁面了。第二行的代碼，可以實(shí)現(xiàn)外部鏈接到百度，這行代碼比上一行多了鏈接目標(biāo)是<_blank>，表示在新的頁面中打開百度。具體這行代碼的含義是：在“鏈接到百度”這幾個(gè)字上面，實(shí)現(xiàn)超鏈接到百度，并且是在新的頁面中打開。第三行代碼，可以實(shí)現(xiàn)電子郵件鏈接到學(xué)校的郵箱，這行代碼比上一行多了mailto這個(gè)詞，表示啟動(dòng)電子郵件程序發(fā)送郵件。最后看一下，這頁共兩行的代碼，可以實(shí)現(xiàn)錨點(diǎn)鏈接。第一行是命名錨點(diǎn)的名稱為m1，第二行是實(shí)現(xiàn)在“仿哥特式”這幾個(gè)文字上建立錨點(diǎn)鏈接到m1這個(gè)位置。<aname="m1"id="m1"></a><ahref="#m1">仿哥特式</a>學(xué)生觀察并學(xué)習(xí)四種超鏈接的代碼通過講解對(duì)比的方法，讓學(xué)生了解四種超鏈接的代碼構(gòu)成。超鏈接的字體顏色（四）在默認(rèn)狀態(tài)下，網(wǎng)頁超鏈接的字體會(huì)有下劃線，設(shè)置超鏈接后也會(huì)改變顏色，有沒有辦法來解決這個(gè)問題呢？我們一起看看實(shí)踐題，要求設(shè)置超鏈接后改變顏色的字體還原回本來的顏色。這題應(yīng)該怎么做呢？第一步：我們點(diǎn)擊網(wǎng)頁的屬性，找到“頁面屬性”這項(xiàng)。第二步：在左邊“分類”選項(xiàng)中選擇“鏈接”第三步：通過修改“鏈接顏色”，“已訪問鏈接”和“下劃線樣式”，這三項(xiàng)可以修改超鏈接的外觀設(shè)置。這里運(yùn)用的是CSS原理，使網(wǎng)頁所有的鏈接顏色得到統(tǒng)一的控制。CSS中文名是層疊樣式表，不單可以靜態(tài)修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)的對(duì)網(wǎng)頁各個(gè)元素進(jìn)行精確的控制。其中代碼的含義為：a:linka:hovera:visiteda:active學(xué)生觀察并學(xué)習(xí)CSS控制頁面顏色的方法，及閱讀CSS代碼。通過講解對(duì)比的方法，讓學(xué)生了解CSS控制超鏈接顏色的方法。課堂檢測(cè)我們一起做幾道單選題來鞏固今天所學(xué)的知識(shí)?！締芜x題1】網(wǎng)站是一個(gè)包含多個(gè)網(wǎng)頁的集合，這些網(wǎng)頁由()連在一起。正確答案C超鏈接。解析：多個(gè)網(wǎng)頁能通過超鏈接連接在一起，形成一個(gè)整體。【單選題2】在網(wǎng)頁中，下列對(duì)象不能插入超鏈接的是()。正確答案D表格。解析：超鏈接可以建立在文字、圖片或圖片中的某個(gè)區(qū)域上，但不能建立在表格上的。【單選題3】小明制作了一個(gè)“2022年新年彩燈”網(wǎng)頁，通過點(diǎn)擊網(wǎng)頁上不同的彩燈照片，能自動(dòng)跳轉(zhuǎn)到本頁面中的相應(yīng)的彩燈簡(jiǎn)介的位置，他可能使用了()。正確答案D錨點(diǎn)鏈接。解析：跳轉(zhuǎn)到同一頁面某個(gè)位置的超鏈接叫做錨點(diǎn)鏈接?！締芜x題4】在網(wǎng)頁中,必須使用()標(biāo)記來完成超級(jí)鏈接。正確答案A。解析：通過代碼窗口，可以看到超鏈接的代碼用<a>開始</a>結(jié)束?！締芜x題5】在屬性面板設(shè)置網(wǎng)頁打開的方式中,用新窗口打開超鏈接的是()。正確答案A_blank。解析：超鏈接的目標(biāo)方式_blank表示在新窗口打開超鏈接?！締芜x題6】在Dreamweaver中,創(chuàng)建E-mail鏈接,其正確的語句格式是()。正確答案D。解析：電子郵件鏈接的語句是mailto。學(xué)生完成練習(xí)題讓學(xué)生通過練習(xí)，鞏固所學(xué)知識(shí)。課堂小結(jié)們來總結(jié)一下今天所學(xué)的知識(shí)。今天我們學(xué)習(xí)了超鏈接。超鏈接，就是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系，它可以建立在文字、圖片或者圖片的某個(gè)位置上。超鏈接能夠使網(wǎng)頁形成一個(gè)整體，能方便地實(shí)現(xiàn)網(wǎng)頁之間的跳轉(zhuǎn)。具體說也通過微課學(xué)習(xí)了建立超鏈接的方法。還知道了超鏈接的種類有四種，分別是：內(nèi)部鏈接、外部鏈接、電子郵件鏈接和錨點(diǎn)鏈接。最后我們還知道了怎樣判斷網(wǎng)頁有沒有超鏈接的方法，就是將鼠標(biāo)移到過去看看有沒有出現(xiàn)“手”的形狀。同學(xué)們都掌握好本課的內(nèi)容了！那我們的課堂到此結(jié)束，謝謝大家的觀看，再見！跟隨老師，回顧本節(jié)課的知識(shí)點(diǎn)。小結(jié)本課知識(shí)【學(xué)科核心素養(yǎng)】針對(duì)給定的任務(wù)進(jìn)行需求分析，明確需要解決的問題。能提取問題的基本特征，進(jìn)行抽象處理，并用形式化的方法表述問題。利用Dreamweaver數(shù)字化工具實(shí)現(xiàn)超鏈接功能。【學(xué)業(yè)要求】1.理解超鏈接在網(wǎng)頁設(shè)計(jì)中的重要作用（信息意識(shí)）2.理解超鏈接的概念，了解鏈接的種類（數(shù)字化學(xué)習(xí)與創(chuàng)新）3.學(xué)