2023學(xué)年完整公開課版超鏈接

第5章超鏈接網(wǎng)頁設(shè)計(jì)與制作DreamweaverCS6標(biāo)準(zhǔn)教程1.超鏈接的概念與路徑知識(shí)2.文本超鏈接3.圖像超鏈接4.熱點(diǎn)鏈接5.錨點(diǎn)超鏈接6.鏈接管理本章學(xué)習(xí)的主要內(nèi)容：超級(jí)鏈接由兩個(gè)端點(diǎn)和一個(gè)方向構(gòu)成，通常將起始端點(diǎn)（即鼠標(biāo)單擊的位置）稱為源端點(diǎn)（或源錨），將跳轉(zhuǎn)到的目標(biāo)位置稱為目標(biāo)端點(diǎn)（或目標(biāo)錨）。源端點(diǎn)可以是文本、按鈕、圖像等對(duì)象，目標(biāo)端點(diǎn)可以是同一頁面的不同位置，也可以是一個(gè)其他頁面、一幅圖像、一個(gè)文件或一段程序等。5.1超鏈接的概念與路徑知識(shí)5.1.1按超鏈接端點(diǎn)分類5.1.2按超鏈接路徑分類5.1超鏈接的概念與路徑知識(shí)按照源端點(diǎn)來劃分，超級(jí)鏈接可以分為文本超鏈接和非文本超鏈接兩種。文本超鏈接是把文本作為源端點(diǎn)，而非文本超鏈接是用除文本外的其他對(duì)象作為源端點(diǎn)。按照目標(biāo)端點(diǎn)來劃分，超級(jí)鏈接可分為外部鏈接、內(nèi)部鏈接和電子郵件鏈接等5.1.1按超鏈接端點(diǎn)分類5.1.2按超鏈接路徑分類文本超鏈接是以文本為對(duì)象構(gòu)建的超級(jí)鏈接，鏈接的源端點(diǎn)是文本。文本超鏈接是網(wǎng)頁中最常使用的一種鏈接方式。5.2文本超鏈接5.2.1課堂案例—婚禮公司5.2.2創(chuàng)建文本鏈接5.2.3頁面文本鏈接的狀態(tài)5.2.4下載文件鏈接5.2.5電子郵件鏈接5.2.6空鏈接5.2文本超鏈接案例學(xué)習(xí)目標(biāo)：學(xué)習(xí)創(chuàng)建內(nèi)部鏈接、外部鏈接、下載文件鏈接和電子郵件鏈接等多種文本超鏈接。案例知識(shí)要點(diǎn)：使用【屬性】面板、【插入】菜單和直接拖曳等方法創(chuàng)建文本超鏈接。素材所在位置：光盤/案例素材/ch05/課堂案例-婚禮網(wǎng)站。案例效果如圖5-1所示。5.2.1課堂案例—婚禮公司1．直接輸入要鏈接文件的路徑和文件名2．使用【瀏覽文件】按鈕3．使用【指向文件】圖標(biāo)4．設(shè)定鏈接【目標(biāo)】5.2.2創(chuàng)建文本鏈接可通過【頁面屬性】設(shè)置文本鏈接狀態(tài)，操作步驟如下。選擇菜單【修改】|【頁面屬性】，打開【頁面屬性】對(duì)話框，在【分類】列表中選擇【鏈接（CSS）】。單擊【鏈接顏色】右側(cè)的圖標(biāo)，打開調(diào)色板，選擇一種顏色來設(shè)置鏈接文字的顏色。采用同樣的方式，分別設(shè)置【已訪問鏈接】、【變換圖像鏈接】和【活動(dòng)鏈接】的顏色。單擊【下劃線樣式】下拉列表，設(shè)置鏈接文字是否帶有下劃線。5.2.3頁面文本鏈接的狀態(tài)下載文件鏈接是通過單擊鏈接來實(shí)現(xiàn)文件下載，建立方法和文字鏈接建立方法類似，所不同的是所鏈接的文件不是網(wǎng)頁文件而是其他文件，如.rar壓縮文件等，單擊鏈接后并不是打開網(wǎng)頁，而是實(shí)現(xiàn)下載。具體創(chuàng)建步驟如下：在【文檔】窗口中選擇需要添加下載文件鏈接的對(duì)象。在【屬性】面板的【鏈接】下拉文本框中設(shè)置鏈接的文件。5.2.4下載文件鏈接電子郵件鏈接是當(dāng)單擊鏈接時(shí)打開郵件收發(fā)軟件，并自動(dòng)將設(shè)定好的郵箱地址作為收信人，方便瀏覽者發(fā)送郵件。建立電子郵件鏈接有以下兩種方法。1．使用【電子郵件鏈接】對(duì)話框2．使用【屬性】面板5.2.5電子郵件鏈接空鏈接是一種特殊的鏈接，它實(shí)際上并沒有指定具體的鏈接目標(biāo)。創(chuàng)建空鏈接的步驟如下：在【文檔】窗口中選擇需要設(shè)置鏈接的文本、圖像或其他對(duì)象；在【屬性】面板的【鏈接】文本框中輸入“#”。5.2.6空鏈接網(wǎng)頁設(shè)計(jì)中經(jīng)常需要實(shí)現(xiàn)單擊圖像打開鏈接的效果，這就需要給圖像建立超鏈接。圖像超鏈接可以分為普通圖像鏈接和鼠標(biāo)經(jīng)過圖像超鏈接。5.3圖像超鏈接5.3.1課堂案例-手機(jī)商城5.3.2創(chuàng)建圖像超鏈接5.3.3鼠標(biāo)經(jīng)過圖像鏈接5.3圖像超鏈接案例學(xué)習(xí)目標(biāo)：學(xué)習(xí)建立圖像超鏈接和鼠標(biāo)經(jīng)過圖像超鏈接。案例知識(shí)要點(diǎn)：使用【屬性】面板為圖像設(shè)置超鏈接，使用菜單【插入】|【圖像對(duì)象】|【鼠標(biāo)經(jīng)過圖像】建立鼠標(biāo)經(jīng)過圖像超鏈接。素材所在位置：光盤/案例素材/ch05/課堂案例-手機(jī)商城。案例效果如圖5-23所示。5.3.1課堂案例-手機(jī)商城建立圖像超鏈接的操作步驟如下。在【文檔】窗口中選擇需要建立超鏈接的圖像。在【屬性】面板中，單擊【鏈接】項(xiàng)文本框后的【瀏覽文件】按鈕，為圖像添加鏈接。在【替換】項(xiàng)中可以輸入替換文字。設(shè)置替換文字后，當(dāng)圖像不能正常顯示時(shí)，會(huì)在圖像的位置顯示替換文字；瀏覽時(shí)把鼠標(biāo)懸停在圖像上也會(huì)顯示替換文字。5.3.2創(chuàng)建圖像超鏈接鼠標(biāo)經(jīng)過圖像是指當(dāng)鼠標(biāo)指針經(jīng)過一幅圖像時(shí)，圖像的顯示會(huì)變?yōu)榱硪环鶊D像。鼠標(biāo)經(jīng)過圖像實(shí)際上是由兩張圖像組成，一張稱為原始圖像，另一張稱為鼠標(biāo)經(jīng)過圖像。一般來說，原始圖像和鼠標(biāo)經(jīng)過圖像尺寸必須相同，如果圖像的大小不同，Dreamweaver會(huì)自動(dòng)調(diào)整鼠標(biāo)經(jīng)過圖像的大小，使之與原始圖像匹配。5.3.3鼠標(biāo)經(jīng)過圖像鏈接建立鼠標(biāo)經(jīng)過圖像的操作步驟如下。在【文檔】窗口中將光標(biāo)置于需要添加鼠標(biāo)經(jīng)過圖像的位置。選擇菜單【插入】|【圖像】|【鼠標(biāo)經(jīng)過圖像】，在【插入鼠標(biāo)經(jīng)過圖像】對(duì)話框中分別單擊【原始圖像】和【鼠標(biāo)經(jīng)過圖像】文本框右側(cè)的【瀏覽】按鈕設(shè)置圖像路徑。在【替換文本】文本框中設(shè)置替換文字。在【按下時(shí)，前往的URL】文本框中設(shè)置跳轉(zhuǎn)的網(wǎng)頁文件路徑，當(dāng)瀏覽者單擊圖像時(shí)打開此網(wǎng)頁。單擊【確定】按鈕，按<F12>鍵預(yù)覽網(wǎng)頁效果。5.3.3鼠標(biāo)經(jīng)過圖像鏈接在一個(gè)圖像中創(chuàng)建的不同幾何圖形區(qū)域稱為熱點(diǎn)或熱區(qū)，以這些區(qū)域?yàn)槌溄拥脑炊它c(diǎn)，建立的不同超鏈接被稱為熱點(diǎn)鏈接。5.4熱點(diǎn)鏈接5.4.1課堂案例-兒童課堂5.4.2創(chuàng)建熱點(diǎn)鏈接5.4熱點(diǎn)鏈接案例學(xué)習(xí)目標(biāo)：學(xué)習(xí)創(chuàng)建熱點(diǎn)鏈接。案例知識(shí)要點(diǎn)：使用【屬性】面板創(chuàng)建熱點(diǎn)鏈接。素材所在位置：光盤/案例素材/ch05/課堂案例-兒童課堂。案例效果如圖5-32所示。5.4.1課堂案例-兒童課堂創(chuàng)建熱點(diǎn)鏈接的操作步驟如下。在【文檔】窗口中單擊選擇一張圖像，在【屬性】面板的【地圖】選項(xiàng)中選擇熱點(diǎn)工具。鼠標(biāo)放在圖像上，指針變成“+”，在圖像上拖曳出相應(yīng)形狀的藍(lán)色區(qū)域?？梢酝ㄟ^【指針熱點(diǎn)工具】選擇不同的熱區(qū)，并通過熱區(qū)邊框的控制點(diǎn)調(diào)整熱區(qū)大小，還可以通過復(fù)制得到多個(gè)相同的熱區(qū)，建立多個(gè)矩形熱區(qū)。用【指針熱點(diǎn)工具】選取某個(gè)熱區(qū)，出現(xiàn)【屬性】面板，在【鏈接】文本框中輸入鏈接地址，在【替換】文本框中輸入替換文字，這樣就在一個(gè)圖像上創(chuàng)建了幾個(gè)熱點(diǎn)鏈接。5.4.2創(chuàng)建熱點(diǎn)鏈接錨點(diǎn)鏈接是指目標(biāo)端點(diǎn)位于網(wǎng)頁中某個(gè)指定位置的一種超鏈接。創(chuàng)建錨點(diǎn)鏈接可分兩步完成，首先在網(wǎng)頁的某個(gè)指定位置創(chuàng)建超鏈接的目標(biāo)端點(diǎn)（即錨點(diǎn)），并為其命名；然后在超鏈接的源端點(diǎn)處建立指向該錨點(diǎn)的超鏈接。5.5錨點(diǎn)鏈接5.5.1練習(xí)案例-數(shù)碼商城5.5.2創(chuàng)建錨點(diǎn)鏈接5.5錨點(diǎn)鏈接案例學(xué)習(xí)目標(biāo)：學(xué)習(xí)建立錨點(diǎn)鏈接。案例知識(shí)要點(diǎn)：使用菜單【插入】|【命名錨記】和【屬性】面板創(chuàng)建錨點(diǎn)鏈接。素材所在位置：光盤/案例素材/ch05/課堂案例-數(shù)碼商城。案例效果如圖5-43所示。5.5.1練習(xí)案例-數(shù)碼商城創(chuàng)建錨點(diǎn)鏈接的步驟如下。1．創(chuàng)建錨點(diǎn)2．鏈接到錨點(diǎn)5.5.2創(chuàng)建錨點(diǎn)鏈接網(wǎng)站鏈接設(shè)置好后，Dreamweaver還提供了自動(dòng)更新鏈接和鏈接檢查功能，以便對(duì)網(wǎng)站內(nèi)的鏈接進(jìn)行管理。5.6鏈接管理5.6.1練習(xí)案例-百適易得商城5.6.2自動(dòng)更新鏈接5.6.3鏈接檢查5.6.4修復(fù)鏈接5.6鏈接管理案例學(xué)習(xí)目標(biāo)：學(xué)習(xí)網(wǎng)站的鏈接管理。案例知識(shí)要點(diǎn)：使用菜單【窗口】|【結(jié)果】|【鏈接檢查器】，打開【鏈接檢查器】面板管理網(wǎng)站鏈接。素材所在位置：光盤/案例素材/ch05/課堂案例-百事易得商城。案例效果如圖5-58所示。5.6.1練習(xí)案例-百適易得商城新建一個(gè)站點(diǎn)后，有時(shí)需要修改文件的名稱或調(diào)整文件的位置。文件名或位置變了，其相關(guān)的超鏈接如果不發(fā)生相應(yīng)的變化，就會(huì)出現(xiàn)“斷鏈”。如果采用手動(dòng)逐個(gè)修改鏈接，工作量很大，Dreamweaver提供的自動(dòng)更新鏈接功能可以在文件名修改或文件位置移動(dòng)時(shí)自動(dòng)進(jìn)行相關(guān)鏈接更新。5.6.2自動(dòng)更新鏈接1．更改站內(nèi)文件名稱2．更改站內(nèi)文件位置5.6.2自動(dòng)更新鏈接網(wǎng)站制作好之后，在上傳到服務(wù)器之前，必須對(duì)站點(diǎn)中所有鏈接進(jìn)行檢查，如果發(fā)現(xiàn)存在中斷的鏈接，則需要進(jìn)行修復(fù)。如果在各個(gè)網(wǎng)頁文件中手工逐一單擊進(jìn)行鏈接檢查，工作量將會(huì)很大，也不可避免會(huì)出現(xiàn)疏漏，Dreamweaver提供的鏈接檢查器功能可以快速地對(duì)某一頁面、部分頁面和整個(gè)站點(diǎn)的鏈接進(jìn)行檢查。5.6.3鏈接檢查1．檢查當(dāng)前文檔中的鏈接2．檢查站點(diǎn)中所選文件的鏈接3．檢查整個(gè)當(dāng)前本地站點(diǎn)的鏈接5.6.3鏈接檢查修復(fù)鏈接是對(duì)檢查出的斷掉鏈接進(jìn)行重新設(shè)置，可以通過以下兩種方法完成。（1）雙擊【鏈接檢查器】面板右側(cè)列表中斷掉鏈接的【文件】中的文件名，Dreamweaver會(huì)在【代碼】窗口和【設(shè)計(jì)】窗口中定位到鏈接出錯(cuò)的位置，同時(shí)【屬性】面板也會(huì)指示出鏈接，可以進(jìn)行修改，如圖5-74所示。（2）在【鏈接檢查器】面板的【斷掉的鏈接】下面單擊鼠標(biāo)左鍵，直接修改鏈接路徑，或單擊【瀏覽文件】按鈕重新定位鏈接文件，如圖5-75所示。5.6.4修復(fù)鏈接5.7.1練習(xí)案例-室內(nèi)設(shè)計(jì)網(wǎng)5.7.2練習(xí)案例-多美味餐廳5.7.3練習(xí)案例-生物科普網(wǎng)5.7練習(xí)案例5.7.1練習(xí)案例-室內(nèi)設(shè)計(jì)網(wǎng)案例練習(xí)目標(biāo)：練習(xí)創(chuàng)建鼠標(biāo)經(jīng)過圖像超鏈接和熱點(diǎn)超鏈接。案例操作要點(diǎn)：1．在頁面頂部導(dǎo)航位置，創(chuàng)建“網(wǎng)站首頁”、“最新消息”、“會(huì)員地帶”、“餐廳位置”和“聯(lián)系我們”鼠標(biāo)經(jīng)過圖像，并為“最新消息”設(shè)置鏈接為news.html。2．在頁面的左下角，為“送貨上門”和“餐廳動(dòng)態(tài)”創(chuàng)建兩個(gè)熱點(diǎn)鏈接，分別鏈接到文件sale.html和文件news.html。素材所在位置：光盤/案例素材/ch05/練習(xí)案例-多美味餐廳，效果如圖5-77所示。5.7.2練習(xí)案例-多美味餐廳案例練習(xí)目標(biāo)：練習(xí)創(chuàng)建錨點(diǎn)鏈接。案例操作要點(diǎn)：1．在網(wǎng)頁scie.html中的文字“鳥類”、“昆蟲類”和“植物類”前面，分別插入錨點(diǎn)bird、insect、plant；在頁面底部“快速導(dǎo)航”區(qū)域內(nèi)，分別為“鳥類”、“昆蟲類”和“植物類”建立錨點(diǎn)鏈接指向錨點(diǎn)bird、insect、plant