第4章超鏈接本章簡介：本章主要講解超鏈接的概念和使用方法，包括文本鏈接、圖像鏈接、電子郵件鏈接和鼠標經(jīng)過圖像鏈接等內容。通過這些內容的學習，可以熟練掌握網(wǎng)站鏈接的設置與使用方法，并精心編織網(wǎng)站的鏈接，為網(wǎng)站訪問者能夠盡情地遨游在網(wǎng)站之中提供必要的條件。課堂學習目標掌握設置文本超鏈接的方法和技巧掌握設置電子郵件鏈接的方法和技巧掌握設置圖像超鏈接的方法和技巧掌握設置鼠標經(jīng)過圖像鏈接的方法和技巧4.1文本超鏈接創(chuàng)建文本鏈接文本鏈接的狀態(tài)電子郵件鏈接課堂案例——建筑模型網(wǎng)頁4.1.1創(chuàng)建文本鏈接創(chuàng)建文本鏈接的方法非常簡單，主要是在鏈接文本的“屬性”面板中指定鏈接文件。指定鏈接文件的方法有3種。1．直接輸入要鏈接文件的路徑和文件名2．使用“瀏覽文件”按鈕3．使用指向文件圖標4.1.2文本鏈接的狀態(tài)一個未被訪問過的鏈接文字與一個被訪問過的鏈接文字在形式上是有所區(qū)別的，以提示瀏覽者鏈接文字所指示的網(wǎng)頁是否被看過。每當瀏覽者單擊包含電子郵件超鏈接的網(wǎng)頁對象時，就會打開郵件處理工具（如微軟的OutlookExpress），并且自動將收信人地址設為網(wǎng)站建設者的郵箱地址，方便瀏覽者給網(wǎng)站發(fā)送反饋信息。1．利用“屬性”面板建立電子郵件超鏈接2．利用“電子郵件鏈接”對話框建立電子郵件超鏈接4.1.3電子郵件鏈接

使用“電子郵件鏈接”按鈕，制作電子郵件鏈效果；使用“屬性”面板，為文字制作下載鏈接效果；使用“頁面屬性”命令，改變鏈接的顯示效果。4.1.4課堂案例——建筑模型網(wǎng)頁效果圖

圖像超鏈接鼠標經(jīng)過圖像超鏈接課堂案例——美容SPA健身網(wǎng)頁4.2圖像超鏈接建立圖像超鏈接的操作步驟如下。（1）在文檔窗口中選擇圖像。（2）在“屬性”面板中，單擊“鏈接”選項右側的“瀏覽文件”按鈕

，為圖像添加文檔相對路徑的鏈接。（3）在“替代”選項中可輸入替代文字。設置替代文字后，當圖片不能下載時，會在圖片的位置上顯示替代文字；當瀏覽者將鼠標指針指向圖像時也會顯示替代文字。（4）按F12鍵預覽網(wǎng)頁的效果。4.2.1圖像超鏈接4.2.2鼠標經(jīng)過圖像超鏈接“鼠標經(jīng)過圖像”是一種常用的互動技術，當鼠標指針經(jīng)過圖像時，圖像會隨之發(fā)生變化。一般，“鼠標經(jīng)過圖像”效果由兩張大小相等的圖像組成，一張稱為主圖像，另一張稱為次圖像。主圖像是首次載入網(wǎng)頁時顯示的圖像，次圖像是當鼠標指針經(jīng)過時更換的另一張圖像?！笆髽私?jīng)過圖像”經(jīng)常應用于網(wǎng)頁中的按鈕上。4.2.3課堂案例——美容SPA健身網(wǎng)頁

使用“鼠標經(jīng)過圖像”按鈕，制作導航條效果。效果圖

使用“PolygonHotspotTool”工具，繪制熱點并添加鏈接；使用“代碼”視圖，手動輸入代碼插入錨點，制作內部鏈接效果。課堂練習——在線商城網(wǎng)頁效果圖

使用“電子郵件鏈接”按鈕，制作電子郵件鏈