一、教學(xué)目標(biāo)
1.能夠為網(wǎng)頁中的文本和圖像設(shè)置超鏈接。
2.通過教師演示、自主探究等方法，提高觀察和動手操作的能力。
3.在探究設(shè)置超鏈接的過程中，能夠感受到網(wǎng)頁制作的樂趣，提高學(xué)習(xí)的積極性。
二、教學(xué)重難點
【重點】網(wǎng)頁中文本和圖像的超鏈接設(shè)置。
【難點】網(wǎng)頁中圖像超鏈接的靈活設(shè)置。
三、教學(xué)過程
(一)導(dǎo)入新課
教師通過多媒體展示制作完成的“沈陽簡介”網(wǎng)站，讓學(xué)生觀察在網(wǎng)站首頁上和之前制作的首頁有哪些區(qū)別?學(xué)生會發(fā)現(xiàn)有些文字下方出現(xiàn)了下劃線，顏色也不同。教師演示鼠標(biāo)單擊首頁中的帶有下劃線的文字和網(wǎng)頁中的圖片，讓學(xué)生觀察出現(xiàn)了什么變化?學(xué)生發(fā)現(xiàn)頁面跳轉(zhuǎn)到了另一個頁面。教師繼而引導(dǎo)學(xué)生思考：當(dāng)點擊頁面上的文本或圖片時，怎么跳轉(zhuǎn)到其他頁面呢?網(wǎng)頁之間的聯(lián)系應(yīng)該如何建立呢?從而引入本節(jié)課的學(xué)習(xí)。
(二)新課講授
1.建立文本超鏈接
教師激發(fā)學(xué)生思考：如果想要為網(wǎng)頁中的文本設(shè)置超鏈接，首先應(yīng)該做什么?【選中文本】教師表揚(yáng)學(xué)生反應(yīng)迅速，并進(jìn)行演示操作，選中文字“地理環(huán)境”后，利用“屬性”面板，在“鏈接”右側(cè)選擇文件“地理環(huán)境.html”，在“目標(biāo)”下拉列表中選擇“_blank”選項，創(chuàng)建文本鏈接。演示完成后讓學(xué)生觀察文字“地理環(huán)境”的變化。【文字變成了藍(lán)色，文字下方出現(xiàn)下劃線】
教師布置任務(wù)：嘗試自己完成文本超鏈接的設(shè)置，實現(xiàn)單擊“地理環(huán)境”能夠跳轉(zhuǎn)到“地理環(huán)境.html”頁面。學(xué)生操作過程中，教師加以巡視，并提示學(xué)生：完成后可以通過單擊“在瀏覽器中預(yù)覽/調(diào)試”按鈕，在瀏覽器中預(yù)覽設(shè)置的超鏈接效果，查看是否設(shè)置成功。學(xué)生操作完成后，教師拋出問題：_blank的作用是什么?_blank和_self的區(qū)別是什么?教師讓學(xué)生嘗試修改目標(biāo)中的選項，操作完成后指定學(xué)生回答?！臼褂胈blank，是在新的窗口中顯示頁面，使用_self，是在當(dāng)前網(wǎng)頁窗口中顯示頁面，不會打開新的窗口】教師表揚(yáng)學(xué)生操作認(rèn)真，回答的準(zhǔn)確。
教師激發(fā)學(xué)生思考：有沒有其他的方法可以為文本設(shè)置超鏈接?教師布置任務(wù)：讓學(xué)生閱讀課本，自行探究，為文本“風(fēng)土人情”設(shè)置超鏈接，鏈接到“風(fēng)土人情.html”頁面。學(xué)生操作結(jié)束后指定學(xué)生說出操作要點?！具x中后，在“常用”插入欄中，點擊“超級鏈接”按鈕，在彈出的對話框中，設(shè)置鏈接的目標(biāo)文檔，并在“目標(biāo)”下拉列表中選擇_blank選項】教師評價學(xué)生歸納總結(jié)能力強(qiáng)，思路清晰。
2.創(chuàng)建圖像鏈接
教師提問：如果想要為沈陽簡介中的太陽鳥建筑圖片設(shè)置超鏈接，是否和文字設(shè)置的方法一樣呢?教師布置任務(wù)：按照設(shè)置文本超鏈接的方法嘗試自主操作，實現(xiàn)單擊圖片后跳轉(zhuǎn)到“太陽鳥介紹.html”頁面。學(xué)生操作過程中教師進(jìn)行巡視指導(dǎo)，完成后教師根據(jù)學(xué)生操作情況進(jìn)行總結(jié)：如果是對整個圖像建立鏈接，和文字設(shè)置方法一樣。
教師拋出問題：如果想要為圖像的部分區(qū)域設(shè)置超鏈接，怎樣進(jìn)行設(shè)置?教師組織學(xué)生以小組為單位進(jìn)行討論和操作，將太陽鳥區(qū)域設(shè)為鏈接區(qū)域，鏈接到“太陽鳥介紹.html”頁面。討論后由小組代表演示及講解操作要點。【選中圖像，在屬性面板中找到橢圓形熱點工具，在圖像上拖動，選中太陽鳥區(qū)域，并設(shè)置鏈接的目標(biāo)文檔和目標(biāo)】教師評價學(xué)生操作很熟練，并解釋：這屬于熱點鏈接，單擊設(shè)置的鏈接區(qū)域，從而跳轉(zhuǎn)到相應(yīng)頁面。圖像屬性欄中的“替換”中可以寫明圖片的含義，當(dāng)圖片無法顯示的時候，替換中的文字就會顯示出來。教師讓學(xué)生繼續(xù)完善對圖像鏈接的設(shè)置。
(三)鞏固提高
在學(xué)生了解了如何為文字和圖像設(shè)置超鏈接后，教師布置任務(wù)：學(xué)生獨(dú)立操作，將首頁中的其他欄目以及圖片設(shè)置對應(yīng)的超鏈接。操作完成后同桌兩人進(jìn)行相互展示，在瀏覽器中預(yù)覽是否能夠?qū)崿F(xiàn)正確的跳轉(zhuǎn)。
(四)小結(jié)作業(yè)
小結(jié)：教師提問為文字設(shè)置超鏈接的兩種方式。根據(jù)學(xué)生的回答點評學(xué)生對知識掌握得牢固。
作業(yè)：思考為網(wǎng)頁中圖片設(shè)置熱點鏈接，可以設(shè)置兩個熱點區(qū)域嗎?
四、板書設(shè)計
渝公網(wǎng)安備 50010802004932號