網頁設計製作中超連結的運用論文
摘要：超連結是網頁間聯絡的橋樑，是網頁的魅力所在。超連結按連結範圍分有外部連結和內部連結；按連結路徑來說，一般包含文件連結、書籤連結、電子郵件連結、空連結、指令碼連結。網頁製作工具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).
