在網(wǎng)頁(yè)中插入各種超級(jí)鏈接

1、教 學(xué) 內(nèi) 容 總 體 安 排課程名稱Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作授課教師課程類別專業(yè)必修課課 時(shí) 2 學(xué)時(shí)教學(xué)章節(jié)第四章 在網(wǎng)頁(yè)中建立各種超級(jí)鏈接參考教材網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程主編：劉艷麗授課班級(jí)平面設(shè)計(jì)1401班書(shū)面作業(yè)P71頁(yè)-P72頁(yè)上機(jī)作業(yè)配套實(shí)訓(xùn)：超級(jí)鏈接教學(xué)準(zhǔn)備1、課件（超鏈接.ppt）2、上課資料（教材配備的素材，本校網(wǎng)站）教學(xué)方法案例式教學(xué)，任務(wù)驅(qū)動(dòng)，多媒體講授，講練結(jié)合。教學(xué)設(shè)備1、 硬件：教師用多媒體計(jì)算機(jī)1臺(tái)和學(xué)生用計(jì)算機(jī)60臺(tái)、投影儀。2、 軟件：多媒體網(wǎng)絡(luò)教學(xué)系統(tǒng)、WindowsXP、Dreamweaver 8學(xué)生分析1、通過(guò)前幾講的學(xué)習(xí)，學(xué)生已經(jīng)學(xué)會(huì)了創(chuàng)建

2、和管理站點(diǎn)的知識(shí)，自己可以創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。2、學(xué)生經(jīng)常上網(wǎng)，對(duì)于超級(jí)鏈接并不陌生。所以，概念的引入并不困難，但是，學(xué)生最熟悉的鏈接類型就是頁(yè)面和頁(yè)面之間的鏈接，而對(duì)于超鏈接的作用理解的不深入，對(duì)于多種建立超鏈接的方法也知之甚少。課堂教學(xué)目標(biāo)知識(shí)目標(biāo)：1、文字上建立各種超鏈接2、圖片上建立各種超鏈接3、電子郵件超鏈接能力目標(biāo)：1、通過(guò)發(fā)現(xiàn)問(wèn)題來(lái)尋找解決問(wèn)題的方法，養(yǎng)成勤思考、愛(ài)學(xué)習(xí)的習(xí)慣。2、培養(yǎng)學(xué)生養(yǎng)成動(dòng)手動(dòng)腦的自學(xué)能力。情感目標(biāo)：1、激發(fā)學(xué)生合理、合法使用超級(jí)鏈接組織網(wǎng)絡(luò)資源的興趣和意識(shí)。2、培養(yǎng)學(xué)生的實(shí)踐能力、審美能力及創(chuàng)新精神。教學(xué)重點(diǎn)內(nèi)部超級(jí)鏈接、外部超級(jí)鏈接、腳本鏈接、E-mai

3、l鏈接、錨點(diǎn)鏈接、圖像熱區(qū)的添加方法、導(dǎo)航欄的制作。教學(xué)難點(diǎn)鏈接路徑、腳本鏈接、設(shè)置鏈接顏色。授課思路及講解要點(diǎn)：超級(jí)鏈接是網(wǎng)頁(yè)的最基本要素，是web服務(wù)得以實(shí)現(xiàn)的核心。課程起始先以實(shí)例的形式展示幾種上網(wǎng)時(shí)經(jīng)常見(jiàn)到的鏈接形式，讓學(xué)生了解學(xué)習(xí)目標(biāo)，帶著問(wèn)題來(lái)學(xué)習(xí)，提高了學(xué)習(xí)興趣。采用案例式教學(xué)的思路，教學(xué)過(guò)程中結(jié)合實(shí)例，多設(shè)問(wèn)題，讓學(xué)生積極主動(dòng)思考，操作演示時(shí)分析不同操作產(chǎn)生的不同后果，通過(guò)分析，加深印象并掌握操作規(guī)律。本次課的講解要點(diǎn)是各種超級(jí)鏈接的添加方法及導(dǎo)航欄等。不僅介紹各種超鏈接的方法，還要介紹應(yīng)用的場(chǎng)合、優(yōu)點(diǎn)。導(dǎo)航欄實(shí)際上是通過(guò)自動(dòng)添加javascipt代碼來(lái)實(shí)現(xiàn)的。也可以讓學(xué)生有所

4、認(rèn)識(shí)，為以后學(xué)習(xí)行為作鋪墊。教學(xué)過(guò)程上一講回顧，上次作品點(diǎn)評(píng)，課程導(dǎo)入、設(shè)計(jì)目標(biāo)、課程內(nèi)容講解、歸納小結(jié)、課后提問(wèn)、布置課后實(shí)訓(xùn)課題第四章 在網(wǎng)頁(yè)中建立各種超鏈接上一講回顧：（5分鐘）回顧上一講內(nèi)容，展示、交流、評(píng)價(jià)上次課布置的課題“制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)”，讓大家評(píng)比一下誰(shuí)做的最好，并掌聲鼓勵(lì)。通過(guò)點(diǎn)評(píng)作品讓學(xué)生增強(qiáng)榮譽(yù)感。課程導(dǎo)入：（5分鐘）進(jìn)入本校網(wǎng)站，告訴學(xué)生什么是超鏈接，讓同學(xué)們?cè)跒g覽本校網(wǎng)站的同時(shí)，提出問(wèn)題。提問(wèn)：讓學(xué)生把在本校網(wǎng)站上見(jiàn)過(guò)的超鏈接指出來(lái)，讓老師分析這是什么超鏈接?；钴S學(xué)習(xí)氣氛，讓同學(xué)們對(duì)新課內(nèi)容產(chǎn)生興趣。介紹本節(jié)課素材及設(shè)計(jì)目標(biāo)：（5分鐘）說(shuō)明素材所在路徑，并確立設(shè)計(jì)目

5、標(biāo)。4.1超鏈接應(yīng)用實(shí)例 設(shè)計(jì)目標(biāo)制作一個(gè)具有超鏈接的網(wǎng)頁(yè)。其瀏覽效果如圖4.1所示。 頁(yè)面分析（1）內(nèi)部超鏈接（2）外部超鏈接（3）空鏈接和腳本鏈接（4）E-mail超鏈接（5）設(shè)置超鏈接顏色 實(shí)訓(xùn)引導(dǎo)制作網(wǎng)頁(yè)前素材的準(zhǔn)備。 制作步驟（1）創(chuàng)建內(nèi)部超鏈接（2）創(chuàng)建外部超鏈接（3）創(chuàng)建空鏈接和腳本鏈接（4）創(chuàng)建E-mail超鏈接（5）設(shè)置鏈接顏色重點(diǎn)：（20分鐘）講解內(nèi)部和外部超鏈接的含義、制作方法、應(yīng)用場(chǎng)合及優(yōu)點(diǎn)。舉一些我們平時(shí)上網(wǎng)用到的超鏈接的例子，并讓同學(xué)們區(qū)別是什么超鏈接。先演示一遍，再帶著學(xué)生做一遍，最后再讓學(xué)生自己做一遍。難點(diǎn)：鏈接路徑，腳本鏈接4.2 創(chuàng)建超鏈接 創(chuàng)建內(nèi)部超鏈接內(nèi)

6、部鏈接： 在同一網(wǎng)站文件之間的鏈接。1.鏈接網(wǎng)頁(yè)文件 2.鏈接到其它文件鏈接路徑：1、絕對(duì)路徑：被鏈接文檔的完整的URL。2、相對(duì)路徑：以當(dāng)前文檔所在位置為起點(diǎn)，到被鏈接文檔經(jīng)過(guò)的路徑。文檔相對(duì)路徑是最適合用于本地鏈接的路徑。3、根相對(duì)路徑：從站點(diǎn)根文件夾到被鏈接文檔經(jīng)過(guò)的路徑。 在新的瀏覽窗口中打開(kāi)鏈接文件在“目標(biāo)”下拉列表框中，有四個(gè)選項(xiàng)：“blank”表示在新的未命名的瀏覽器窗口中打開(kāi)鏈接文檔，其余三個(gè)選項(xiàng)的具體含義將在后續(xù)課程中講解。 創(chuàng)建外部超鏈接外部鏈接：不同網(wǎng)站文件之間的鏈接。如： 創(chuàng)建空鏈接和腳本鏈接1.創(chuàng)建空鏈接：# 2.創(chuàng)建腳本鏈接： 當(dāng)單擊網(wǎng)頁(yè)中“關(guān)閉窗口”時(shí)，窗口即可關(guān)

7、閉。操作：在“鏈接”文本框中輸入javascript:windows.close() 或者 javascript:self.close()重點(diǎn)：（10分鐘）通過(guò)讓同學(xué)們自己動(dòng)手，創(chuàng)建一個(gè)到自己郵箱的超鏈接，使同學(xué)們很有成就感。難點(diǎn)：設(shè)置鏈接顏色 創(chuàng)建E-mail超鏈接1在網(wǎng)頁(yè)ex4_1.htm文件中的最下端輸入“與我聯(lián)系”文本。2選中“與我聯(lián)系”文本。3在文本“屬性”面板上的“鏈接”文本框中輸入4保存網(wǎng)頁(yè)。練習(xí)：為“與我聯(lián)系”文本創(chuàng)建一個(gè)超鏈接，鏈接到自己的QQ郵箱。 設(shè)置鏈接顏色文本具有幾種顏色狀態(tài)：未訪問(wèn)過(guò)鏈接的文本顏色、已訪問(wèn)過(guò)鏈接的文本顏色、以及正在訪問(wèn)過(guò)鏈接的文本顏色。在Dreamw

8、eaver未訪問(wèn)過(guò)和已訪問(wèn)過(guò)的鏈接文本的默認(rèn)顏色為藍(lán)色和紫紅色。設(shè)置顏色的辦法：利用網(wǎng)頁(yè)屬性對(duì)話框來(lái)設(shè)置鏈接的顏色。重點(diǎn)：（10分鐘）講解錨點(diǎn)的含義、制作步驟、返回首鏈接。邊講解邊演示，在讓學(xué)生自己動(dòng)手制作錨點(diǎn)鏈接及返回頂部時(shí)，可把課件里制作步驟那一部分投影到大屏幕上；讓學(xué)習(xí)能力差的學(xué)生照著步驟制作。4.3 創(chuàng)建錨點(diǎn)鏈接錨點(diǎn)(也稱作錨記、書(shū)簽)常用于包含大量文本信息的網(wǎng)頁(yè)，通過(guò)在網(wǎng)頁(yè)上設(shè)置錨點(diǎn)，再通過(guò)錨點(diǎn)鏈接，就可以直接瀏覽到相應(yīng)的網(wǎng)頁(yè)內(nèi)容。大大加快了瀏覽速度。錨點(diǎn)鏈接：同一網(wǎng)頁(yè)或不同網(wǎng)頁(yè)的指定位置的鏈接。 錨點(diǎn)鏈接應(yīng)用實(shí)例1、設(shè)計(jì)目標(biāo)、制作一個(gè)如圖2所示的錨點(diǎn)鏈接。2、實(shí)訓(xùn)引導(dǎo)制作網(wǎng)頁(yè)前素材

9、的準(zhǔn)備。3、制作步驟（1）在頁(yè)面中插入錨點(diǎn)（2）為錨點(diǎn)建立鏈接 插入命名錨點(diǎn)命名錨點(diǎn)簡(jiǎn)稱為錨點(diǎn)，在網(wǎng)頁(yè)中用于標(biāo)記和鏈接的跳轉(zhuǎn)位置，以便引用。l 在菜單欄中選擇“插入”“命名錨記”命令l 在“錨記名稱”文本框中，輸入錨記的名稱，單擊“確定”按鈕。 鏈接錨點(diǎn) l 在“屬性”面板中的“鏈接”文本框中，輸入“#”和錨點(diǎn)名稱。 設(shè)置返回首鏈接 l 選中正文中“Go Top”文本。l 在“屬性”面板的“鏈接”文本框中輸入“#top”。重點(diǎn)：（10分鐘）先用中國(guó)地圖舉例：當(dāng)我們?cè)谥袊?guó)地圖上點(diǎn)陜西省時(shí)，頁(yè)面就轉(zhuǎn)到陜西省地圖的頁(yè)面了。讓學(xué)生對(duì)熱區(qū)鏈接有一定的了解，再提出設(shè)計(jì)目標(biāo)。4.4 制作圖像地圖 熱區(qū)鏈接應(yīng)

10、用實(shí)例1.設(shè)計(jì)目標(biāo)制作一個(gè)如圖3所示的熱區(qū)鏈接。2.頁(yè)面分析 在圖3頁(yè)面中使用了“圖像地圖”，其中各個(gè)組成部分分別對(duì)應(yīng)一個(gè)熱區(qū)。3.實(shí)訓(xùn)引導(dǎo)制作網(wǎng)頁(yè)前素材的準(zhǔn)備。4.制作步驟（1）制作熱區(qū)（2）制作超鏈接 制作熱區(qū)單擊“圖像”，此時(shí)“屬性”面板上顯示的是圖像的有關(guān)屬性，在“屬性”面板的左下方有選取工具，單擊“選取工具”，在圖像上拖動(dòng)鼠標(biāo)可繪制出熱區(qū)。 為熱區(qū)添加說(shuō)明文字和制作超級(jí)鏈接.1單擊“熱區(qū)”2在熱區(qū)“屬性”面板上，做普通鏈接。4.4.4 編輯熱區(qū)1.同時(shí)選中多個(gè)熱區(qū)2.移動(dòng)熱區(qū)3.調(diào)整熱區(qū)大小4.刪除熱區(qū)重點(diǎn)：（5分鐘）把事先制作好的導(dǎo)航條讓同學(xué)們看看，知道設(shè)計(jì)目標(biāo)完成后，網(wǎng)頁(yè)應(yīng)該達(dá)到

11、什么樣的效果。然后利用投影儀帶著同學(xué)們一步一步制作完成。4.5 制作導(dǎo)航條 導(dǎo)航條實(shí)例1、設(shè)計(jì)目標(biāo)制作一個(gè)如圖4所示的導(dǎo)航條。2、頁(yè)面分析 在這個(gè)導(dǎo)航條中共有4個(gè)元素，每個(gè)元素由4個(gè)圖像構(gòu)成，其中一個(gè)圖像用于正常顯示狀態(tài)，另一個(gè)圖像用于鼠標(biāo)移上時(shí)的狀態(tài)，還有兩個(gè)圖像分別用于單擊元素后的狀態(tài)及鼠標(biāo)移到被單擊過(guò)的元素上時(shí)的狀態(tài)，為此制作這個(gè)導(dǎo)航條一共需要16個(gè)圖像。3、實(shí)訓(xùn)引導(dǎo)制作網(wǎng)頁(yè)前素材的準(zhǔn)備。 制作導(dǎo)航條方法1：在菜單欄中選擇“插入”“圖像對(duì)像”“導(dǎo)航條”命令。方法2：在“插入”工具欄的“常用”類別中，單擊“圖像”菜單并選擇“插入導(dǎo)航條”。注意：一個(gè)網(wǎng)頁(yè)只能設(shè)一個(gè)導(dǎo)航條，可以只設(shè)置第一個(gè)狀態(tài)

12、。4.5.3 修改導(dǎo)航條“修改導(dǎo)航條”，調(diào)整順序、刪除、修改間距、改變方向小結(jié)：（4分鐘）教師和學(xué)生一起總結(jié)和歸納知識(shí)點(diǎn)，師生互動(dòng)。小 結(jié)本章詳細(xì)介紹了網(wǎng)頁(yè)中鏈接的應(yīng)用和各種鏈接的創(chuàng)建方法。在Dreamweaver中不僅可以把文本制成超鏈接，還可以把圖像制成超鏈接。被鏈接的對(duì)象不僅是網(wǎng)頁(yè)，還可以是其他圖像、多媒體文件、E-Mail、可供下載的軟件以及其他網(wǎng)站等。超鏈接有以下幾種：內(nèi)部鏈接：在同一網(wǎng)站文件之間的鏈接。外部鏈接：不同網(wǎng)站文件之間的鏈接。錨點(diǎn)鏈接：同一網(wǎng)頁(yè)或不同網(wǎng)頁(yè)的指定位置的鏈接。E-mail鏈接：電子郵件的鏈接。理解絕對(duì)路徑、文檔相對(duì)路徑、根相對(duì)路徑的含義。通過(guò)本章學(xué)習(xí)，我們可以

13、將本地站點(diǎn)下的網(wǎng)頁(yè)有機(jī)地鏈接在了一起。教學(xué)板書(shū)：（1分鐘） 第四章 在網(wǎng)頁(yè)中建立各種超級(jí)鏈接（一） 1、文本超鏈接：內(nèi)部鏈接、外部鏈接、空鏈接、腳本鏈接、E-Mail鏈接、錨點(diǎn)鏈接。（二） 2、圖片超鏈接：熱區(qū)鏈接3、導(dǎo)航欄：導(dǎo)航欄的制作提問(wèn)：（10分鐘）通過(guò)提問(wèn)課后作業(yè)來(lái)了解學(xué)生本次課的學(xué)習(xí)效果；要因材施教，按學(xué)習(xí)能力分層次提問(wèn)，遇到回答不上來(lái)的同學(xué)，可以讓他點(diǎn)名求助其他同學(xué)，重點(diǎn)表?yè)P(yáng)學(xué)習(xí)有進(jìn)步的同學(xué)。并給予掌聲鼓勵(lì)。提 問(wèn) 課 后 作 業(yè)一、填空題。1、超鏈接有以下幾種類型： 、 、 、 。2、如果要鏈接到新浪網(wǎng)站，網(wǎng)址為“”，應(yīng)在文本“屬性”面板上的“鏈接”文本框中輸入 。3、為一段文字

14、添加E-mail鏈接，郵件地址為“”，則應(yīng)在文本“屬性”面板上的“鏈接”文本框中輸入 。二、單選題。1、如果要使超鏈接目標(biāo)在新的窗口打開(kāi)，應(yīng)在“屬性”面板的“目標(biāo)”下拉列表框中選擇（ ）A. _ blandB. _ parentC. _ selfD. _ top2、將網(wǎng)頁(yè)中“返回首頁(yè)”文本鏈接到top錨點(diǎn)，應(yīng)在文本“屬性”面板上的“鏈接”文本框中輸入（ ）A. *top B. topC. # topD. # top三、思考題。1、超鏈接有幾種類型？2、鏈接路徑分為哪幾種情況？3、如何使超鏈接目標(biāo)在新的窗口中打開(kāi)？4、如何在頁(yè)尾設(shè)置鏈接，使單擊鏈接時(shí)能返回到頁(yè)首？5、如何設(shè)置鏈接文本在各種狀態(tài)下的顏色？布置課題：（5分鐘）要求學(xué)生獨(dú)立完成；按時(shí)上交作品。并在下次課點(diǎn)評(píng)本次課的作品。布 置 實(shí) 訓(xùn) 課 題 并 提 出 要 求利用所學(xué)知識(shí)，繼續(xù)完善第3套配套實(shí)訓(xùn)中所做的“信樂(lè)團(tuán)”網(wǎng)站，要求如下：1打開(kāi)實(shí)訓(xùn)素材index.htm文件，設(shè)置超鏈接。如圖4 1所示。l 為“個(gè)人檔案”、“新聞?dòng)嵪ⅰ?、“作品介紹”和“返回首頁(yè)”創(chuàng)建超鏈接，分別鏈接到相應(yīng)的網(wǎng)頁(yè)。l 在頁(yè)面中單擊“友情鏈接”文本將打開(kāi)搜狐網(wǎng)站的首頁(yè)。l 在網(wǎng)頁(yè)中為“與我聯(lián)系”文本