網頁設計製作中超鏈接的運用論文

摘要：超鏈接是網頁間聯繫的橋樑，是網頁的魅力所在。超鏈接按鏈接範圍分有外部鏈接和內部鏈接；按鏈接路徑來説，一般包含文檔鏈接、書籤鏈接、電子郵件鏈接、空鏈接、腳本鏈接。網頁製作工具Dreamwraver提供了非常簡便的創建超鏈接的方法，用户可將文字、圖片、Flash等網頁元素設置為鏈接對象，進而美化鏈接，讓網頁更豐富多彩。

關鍵詞：網頁；超鏈接；分類；應用；美化

超鏈接可將因特網上眾多分散的網頁聯繫起來，構成一個有機整體。如何製作和應用超鏈接？網頁製作工具Dreamwraver提供了非常簡便的創建超鏈接的方法，用户可以將文字、圖片、Flash等網頁元素設置為鏈接對象，實現網頁間的跳轉功能。

1超鏈接的分類

按鏈接範圍一般分為內部鏈接和外部鏈接。外部鏈接：與外部網站的頁面間的鏈接；內部鏈接：網站內部頁面間的鏈接。按鏈接路徑來説，一般包含以下類型：文檔鏈接：鏈接到其他文檔，最為常見；電子郵件鏈接：創建允許用户給網頁製作人員發送郵件的鏈接；書籤鏈接：鏈接到相同文檔或其他文檔的書籤位置；空鏈接：不會跳轉到任何位置，用於附加Dreamweaver行為；腳本鏈接：執行JavaScript代碼或調用JavaScript函數。

2超鏈接的創建及應用

2.1外部鏈接和內部鏈接

建立超鏈接到外部站點有兩種方法可以實現：一是直接輸入地址，在屬性面板中的“鏈接”文本框中直接輸入外部鏈接的地址，如；二是使用“常用”插入欄中的“超級鏈接”對話框，分別對文本、鏈接、目標、標題、訪問鍵等五個屬性進行設置。如何快速在站點內創建鏈接？有三種創建和修改的方法：一是使用“屬性”面板創建鏈接，鍵入文件路徑或單擊瀏覽按鈕選取需鏈接的文件；二是使用“指向文件”圖標直接指向想要鏈接的文件；三是使用“資源”面板創建或修改超級鏈接。

2.2電子郵件鏈接

在網頁中設置電子郵件鏈接已經非常普遍，電子郵件鏈接可以附加在按鈕圖片上，也可以附加在文本上。當頁面瀏覽者單擊具在電子郵件鏈接的文本或按鈕時，可以直接打開安裝在系統中的電子郵件應用程序，例如Outlook等並且在“收件人”位置已經自動填寫好電子郵件的地址，瀏覽者只需在填寫完內容後，直接發送即可。若要在圖片或文字上直接附加電子郵件鏈接，可選中該對象，然後在“屬性”面板的“鏈接”欄中輸入“mailto：電子郵件”。在“mailto：”後面不要添加空格，例如：，按回車鍵確定。

2.3書籤鏈接

“書籤鏈接”可讓用户在頁面內容較多時只瀏覽自己感興趣的內容。製作“書籤鏈接”通常會在網頁上端位置設置一個內容列表，列表下面分別是針對各列表項的詳細説明位置。當用户單擊內容列表中感興趣的某一項後，網頁會自動跳轉到該列表項的詳細説明位置。“書籤”一詞是轉譯而來的，它的英語原詞是anchor，意即“錨”，所以“書籤鏈接”也常稱為“錨點鏈接”。“書籤鏈接”可讓用户根據需求更方便快捷地找到相應內容，而不必瀏覽網頁中的所有內容，使網頁更具人性化。“書籤鏈接”的製作方法：將光標定位到內容介紹的標題處―――單擊“插入記錄/命名錨記”或按Cutrl+Alt+A快捷鍵，在出現的'對話框中輸入書籤名，然後單擊“確定”按鈕―――選取列表中的文字，在“屬性”面板的“鏈接”域中，輸入符號“#”和書籤名。數字和字母都可以作為書籤名，但是最好不要使用中文。除了使用菜單命令外還可以通過“插入欄”中的“常用”項插入“命名錨記”進行操作。

2.4無址鏈接和腳本鏈接

在Dreamweaver中除了上述內容所講到的鏈接方式外，還有無址鏈接和腳本鏈接，這兩種鏈接方式不再是實現簡單意義上網頁間的跳轉，而是賦予了鏈接更多的含義。無址鏈接如同它的名字一樣，它不會跳轉到任何地方。但是，這種鏈接對於讀取某些JavaScript事件是非常有用的，例如：在大多數瀏覽器中，圖像不能識別onMouseOer事件，可以通過使用無址鏈接實現圖像變換，此外，在製作具有較多內容的網頁時，通常都要在網頁最底端添加“返回頁首”的鏈接，以方便瀏覽者在瀏覽完所有網頁內容後直接返回頁面頂端。創建無址鏈接的方法很簡單，選取“返回頁首”，在“屬性”面板的“鏈接”域中鍵入“#”號，在“目標”下拉菜單中選取“-top”。腳本鏈接能夠在不離開當前Web頁面的情況下為訪問者提供有關某項的附加信息。通過javaScript腳本鏈接，可以執行JavaScript代碼或調用JavaScript函數，也可以用來在用户單擊時執行計算、表單驗證和其他處理任務。如在介紹某一景點的旅遊網站中，選取網頁logo“***旅遊網”，在“屬性”面板的“鏈接”框中輸入“javascript:”後接JavaScript代碼或函數調用，即可在“鏈接”域中鍵入“javacript:alert(‘歡迎光臨***旅遊網’)”，在預覽網頁效果時，單擊網頁logo，就會彈出一個JavaScript提示框“歡迎光臨***旅遊網”。因為Javascript代碼中出現在雙引號之間，因此在腳本代碼中必須使用單引號或在雙引號之前加斜槓，例如：”歡迎光臨”。

3超鏈接的目標窗口

當用户在互聯網上瀏覽網頁時，一般都是通過單擊網頁上的超級鏈接，跳轉到不同的頁面。當新頁面出現時，可能會出現三種情況：原有的頁面被覆蓋；原有的網頁並不被覆蓋，而是彈出一個新的窗口；原有的網頁內部分被替換。這三種情況的出現是由於網頁在製作時對超級鏈接的目標窗口進行了設置。在Dreamweaver中通過“屬性”面板中的選項可以輕鬆的完成這項工作。在“目標”下拉菜單中可以設置4個超級鏈接目標，其意義分別為：_blank：將文件載入新的無標題瀏覽器窗口中。_parent：將文件載入到上級框架集或包含該鏈接的框架窗口中。_self：將文件載入到相同框架或窗口中。_top：將文件載入到整個瀏覽器窗口中，取消所有框架。

4超鏈接的美化

在製作超鏈接時，可通過“超級鏈接”對話框設置相關屬性或利用導航條、fash按鈕、fash文本等對超鏈接進行美化。使用“超級鏈接”對話框是美化鏈接的基本方法。在對話框中，文本用來設置超鏈接顯示的文本；鏈接用來設置超鏈接的路徑，最好是相對路徑；目標用來設置超鏈接的打開方式；標題用來設置超鏈接的標題；訪問鍵用來設置鍵盤等價鍵，可輸入一個字母，在瀏覽器中打開網頁後，單擊鍵盤上的這個字母將選中這個超鏈接。導航條製作的超鏈接可在鏈接時產生圖像變換的效果，在插入記錄/圖像對象/導航條中執行。在導航條中，可設置原始圖像、鼠標經過圖像、按下鼠標時圖像，在“按下時，前往的URL”處設置鏈接地址。值得注意的是每個頁面只能有一個導航條。Flash按鈕製作的超鏈接可在經過和點擊鏈接標題時產生立體感和動態感，在插入記錄/媒體/fash按鈕中執行。用户可根據網頁的美化效果添加豐富多彩的按鈕樣式，在按鈕文本中添加所鏈接網頁的標題，在“鏈接”對話框中輸入所要鏈接的網址。必須注意的是按鈕要保存在與相應網頁的同一路徑下。Flash文本中轉滾顏色的設置可在經過和點擊鏈接時產生色彩變換的動態效果，在插入記錄/媒體/fash文本中執行。用户可根據網頁的美化需要設置鏈接標題的轉換顏色，如標題初始顏色為黑色，在點擊鏈接時可轉換為藍色。和fash按鈕一樣，fash文本也要保存在與相應網頁的同一路徑下。

5結語

超鏈接是網頁間聯繫的橋樑，是網頁的魅力所在，通過鏈接，瀏覽者可在信息海洋中盡情遨遊！在製作網頁時應綜合運用外部鏈接和內部鏈接讓網頁更豐富！同時充分利用文字、圖片、Flash等網頁元素設置鏈接來增添網頁魅力。

參考文獻

[1]陸瑩.網頁製作DreamweaverCS3[M].上海市：華東師範大學出版社，2010（04）.

[2]馬增友,於俊麗,劉輝mweavercs3網頁設計與製作技能實訓教程[M].北京：科學出版社，

[3]孫良軍.網頁設計與製作全方位學習[M].北京：中國青年出版社，2003.

[4]王書娟.網頁製作中超鏈接的應用-使用Dreamweaver創建超鏈接[J].科技風,2012(05).

[5]張燁.關於網頁設計中路徑使用的思考[J].漯河職業技術學院學報,2005(02).