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

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