網(wǎng)頁(yè)設計制作中超鏈接的運用論文
摘要：超鏈接是網(wǎng)頁(yè)間聯(lián)系的橋梁，是網(wǎng)頁(yè)的魅力所在。超鏈接按鏈接范圍分有外部鏈接和內部鏈接；按鏈接路徑來(lái)說(shuō)，一般包含文檔鏈接、書(shū)簽鏈接、電子郵件鏈接、空鏈接、腳本鏈接。網(wǎng)頁(yè)制作工具Dreamwraver提供了非常簡(jiǎn)便的創(chuàng )建超鏈接的方法，用戶(hù)可將文字、圖片、Flash等網(wǎng)頁(yè)元素設置為鏈接對象，進(jìn)而美化鏈接，讓網(wǎng)頁(yè)更豐富多彩。
關(guān)鍵詞：網(wǎng)頁(yè)；超鏈接；分類(lèi)；應用；美化
超鏈接可將因特網(wǎng)上眾多分散的網(wǎng)頁(yè)聯(lián)系起來(lái)，構成一個(gè)有機整體。如何制作和應用超鏈接？網(wǎng)頁(yè)制作工具Dreamwraver提供了非常簡(jiǎn)便的創(chuàng )建超鏈接的方法，用戶(hù)可以將文字、圖片、Flash等網(wǎng)頁(yè)元素設置為鏈接對象，實(shí)現網(wǎng)頁(yè)間的跳轉功能。
1超鏈接的分類(lèi)
按鏈接范圍一般分為內部鏈接和外部鏈接。外部鏈接：與外部網(wǎng)站的頁(yè)面間的鏈接；內部鏈接：網(wǎng)站內部頁(yè)面間的鏈接。按鏈接路徑來(lái)說(shuō)，一般包含以下類(lèi)型：文檔鏈接：鏈接到其他文檔，最為常見(jiàn)；電子郵件鏈接：創(chuàng )建允許用戶(hù)給網(wǎng)頁(yè)制作人員發(fā)送郵件的鏈接；書(shū)簽鏈接：鏈接到相同文檔或其他文檔的書(shū)簽位置；空鏈接：不會(huì )跳轉到任何位置，用于附加Dreamweaver行為；腳本鏈接：執行JavaScript代碼或調用JavaScript函數。
2超鏈接的創(chuàng )建及應用
2.1外部鏈接和內部鏈接
建立超鏈接到外部站點(diǎn)有兩種方法可以實(shí)現：一是直接輸入地址，在屬性面板中的“鏈接”文本框中直接輸入外部鏈接的地址，如http://www.sohu.com；二是使用“常用”插入欄中的“超級鏈接”對話(huà)框，分別對文本、鏈接、目標、標題、訪(fǎng)問(wèn)鍵等五個(gè)屬性進(jìn)行設置。如何快速在站點(diǎn)內創(chuàng )建鏈接？有三種創(chuàng )建和修改的方法：一是使用“屬性”面板創(chuàng )建鏈接，鍵入文件路徑或單擊瀏覽按鈕選取需鏈接的文件；二是使用“指向文件”圖標直接指向想要鏈接的文件；三是使用“資源”面板創(chuàng )建或修改超級鏈接。
2.2電子郵件鏈接
在網(wǎng)頁(yè)中設置電子郵件鏈接已經(jīng)非常普遍，電子郵件鏈接可以附加在按鈕圖片上，也可以附加在文本上。當頁(yè)面瀏覽者單擊具在電子郵件鏈接的文本或按鈕時(shí)，可以直接打開(kāi)安裝在系統中的電子郵件應用程序，例如Outlook等并且在“收件人”位置已經(jīng)自動(dòng)填寫(xiě)好電子郵件的地址，瀏覽者只需在填寫(xiě)完內容后，直接發(fā)送即可。若要在圖片或文字上直接附加電子郵件鏈接，可選中該對象，然后在“屬性”面板的“鏈接”欄中輸入“mailto：電子郵件”。在“mailto：”后面不要添加空格，例如：mailto:39989511@qq.com，按回車(chē)鍵確定。
2.3書(shū)簽鏈接
“書(shū)簽鏈接”可讓用戶(hù)在頁(yè)面內容較多時(shí)只瀏覽自己感興趣的內容。制作“書(shū)簽鏈接”通常會(huì )在網(wǎng)頁(yè)上端位置設置一個(gè)內容列表，列表下面分別是針對各列表項的詳細說(shuō)明位置。當用戶(hù)單擊內容列表中感興趣的某一項后，網(wǎng)頁(yè)會(huì )自動(dòng)跳轉到該列表項的詳細說(shuō)明位置。“書(shū)簽”一詞是轉譯而來(lái)的，它的英語(yǔ)原詞是anchor，意即“錨”，所以“書(shū)簽鏈接”也常稱(chēng)為“錨點(diǎn)鏈接”。“書(shū)簽鏈接”可讓用戶(hù)根據需求更方便快捷地找到相應內容，而不必瀏覽網(wǎng)頁(yè)中的所有內容，使網(wǎng)頁(yè)更具人性化。“書(shū)簽鏈接”的制作方法：將光標定位到內容介紹的標題處―――單擊“插入記錄/命名錨記”或按Cutrl+Alt+A快捷鍵，在出現的對話(huà)框中輸入書(shū)簽名，然后單擊“確定”按鈕―――選取列表中的文字，在“屬性”面板的“鏈接”域中，輸入符號“#”和書(shū)簽名。數字和字母都可以作為書(shū)簽名，但是最好不要使用中文。除了使用菜單命令外還可以通過(guò)“插入欄”中的“常用”項插入“命名錨記”進(jìn)行操作。
2.4無(wú)址鏈接和腳本鏈接
在Dreamweaver中除了上述內容所講到的鏈接方式外，還有無(wú)址鏈接和腳本鏈接，這兩種鏈接方式不再是實(shí)現簡(jiǎn)單意義上網(wǎng)頁(yè)間的跳轉，而是賦予了鏈接更多的含義。無(wú)址鏈接如同它的名字一樣，它不會(huì )跳轉到任何地方。但是，這種鏈接對于讀取某些JavaScript事件是非常有用的，例如：在大多數瀏覽器中，圖像不能識別onMouseOer事件，可以通過(guò)使用無(wú)址鏈接實(shí)現圖像變換，此外，在制作具有較多內容的網(wǎng)頁(yè)時(shí)，通常都要在網(wǎng)頁(yè)最底端添加“返回頁(yè)首”的鏈接，以方便瀏覽者在瀏覽完所有網(wǎng)頁(yè)內容后直接返回頁(yè)面頂端。創(chuàng )建無(wú)址鏈接的方法很簡(jiǎn)單，選取“返回頁(yè)首”，在“屬性”面板的“鏈接”域中鍵入“#”號，在“目標”下拉菜單中選取“-top”。腳本鏈接能夠在不離開(kāi)當前Web頁(yè)面的情況下為訪(fǎng)問(wèn)者提供有關(guān)某項的附加信息。通過(guò)javaScript腳本鏈接，可以執行JavaScript代碼或調用JavaScript函數，也可以用來(lái)在用戶(hù)單擊時(shí)執行計算、表單驗證和其他處理任務(wù)。如在介紹某一景點(diǎn)的旅游網(wǎng)站中，選取網(wǎng)頁(yè)logo“***旅游網(wǎng)”，在“屬性”面板的“鏈接”框中輸入“javascript:”后接JavaScript代碼或函數調用，即可在“鏈接”域中鍵入“javacript:alert(‘歡迎光臨***旅游網(wǎng)’)”，在預覽網(wǎng)頁(yè)效果時(shí)，單擊網(wǎng)頁(yè)logo，就會(huì )彈出一個(gè)JavaScript提示框“歡迎光臨***旅游網(wǎng)”。因為Javascript代碼中出現在雙引號之間，因此在腳本代碼中必須使用單引號或在雙引號之前加斜杠，例如：”歡迎光臨”。
3超鏈接的目標窗口
當用戶(hù)在互聯(lián)網(wǎng)上瀏覽網(wǎng)頁(yè)時(shí)，一般都是通過(guò)單擊網(wǎng)頁(yè)上的超級鏈接，跳轉到不同的頁(yè)面。當新頁(yè)面出現時(shí)，可能會(huì )出現三種情況：原有的頁(yè)面被覆蓋；原有的網(wǎng)頁(yè)并不被覆蓋，而是彈出一個(gè)新的.窗口；原有的網(wǎng)頁(yè)內部分被替換。這三種情況的出現是由于網(wǎng)頁(yè)在制作時(shí)對超級鏈接的目標窗口進(jìn)行了設置。在Dreamweaver中通過(guò)“屬性”面板中的選項可以輕松的完成這項工作。在“目標”下拉菜單中可以設置4個(gè)超級鏈接目標，其意義分別為：_blank：將文件載入新的無(wú)標題瀏覽器窗口中。_parent：將文件載入到上級框架集或包含該鏈接的框架窗口中。_self：將文件載入到相同框架或窗口中。_top：將文件載入到整個(gè)瀏覽器窗口中，取消所有框架。
4超鏈接的美化
在制作超鏈接時(shí)，可通過(guò)“超級鏈接”對話(huà)框設置相關(guān)屬性或利用導航條、fash按鈕、fash文本等對超鏈接進(jìn)行美化。使用“超級鏈接”對話(huà)框是美化鏈接的基本方法。在對話(huà)框中，文本用來(lái)設置超鏈接顯示的文本；鏈接用來(lái)設置超鏈接的路徑，最好是相對路徑；目標用來(lái)設置超鏈接的打開(kāi)方式；標題用來(lái)設置超鏈接的標題；訪(fǎng)問(wèn)鍵用來(lái)設置鍵盤(pán)等價(jià)鍵，可輸入一個(gè)字母，在瀏覽器中打開(kāi)網(wǎng)頁(yè)后，單擊鍵盤(pán)上的這個(gè)字母將選中這個(gè)超鏈接。導航條制作的超鏈接可在鏈接時(shí)產(chǎn)生圖像變換的效果，在插入記錄/圖像對象/導航條中執行。在導航條中，可設置原始圖像、鼠標經(jīng)過(guò)圖像、按下鼠標時(shí)圖像，在“按下時(shí)，前往的URL”處設置鏈接地址。值得注意的是每個(gè)頁(yè)面只能有一個(gè)導航條。Flash按鈕制作的超鏈接可在經(jīng)過(guò)和點(diǎn)擊鏈接標題時(shí)產(chǎn)生立體感和動(dòng)態(tài)感，在插入記錄/媒體/fash按鈕中執行。用戶(hù)可根據網(wǎng)頁(yè)的美化效果添加豐富多彩的按鈕樣式，在按鈕文本中添加所鏈接網(wǎng)頁(yè)的標題，在“鏈接”對話(huà)框中輸入所要鏈接的網(wǎng)址。必須注意的是按鈕要保存在與相應網(wǎng)頁(yè)的同一路徑下。Flash文本中轉滾顏色的設置可在經(jīng)過(guò)和點(diǎn)擊鏈接時(shí)產(chǎn)生色彩變換的動(dòng)態(tài)效果，在插入記錄/媒體/fash文本中執行。用戶(hù)可根據網(wǎng)頁(yè)的美化需要設置鏈接標題的轉換顏色，如標題初始顏色為黑色，在點(diǎn)擊鏈接時(shí)可轉換為藍色。和fash按鈕一樣，fash文本也要保存在與相應網(wǎng)頁(yè)的同一路徑下。
5結語(yǔ)
超鏈接是網(wǎng)頁(yè)間聯(lián)系的橋梁，是網(wǎng)頁(yè)的魅力所在，通過(guò)鏈接，瀏覽者可在信息海洋中盡情遨游！在制作網(wǎng)頁(yè)時(shí)應綜合運用外部鏈接和內部鏈接讓網(wǎng)頁(yè)更豐富！同時(shí)充分利用文字、圖片、Flash等網(wǎng)頁(yè)元素設置鏈接來(lái)增添網(wǎng)頁(yè)魅力。
參考文獻
[1]陸瑩.網(wǎng)頁(yè)制作DreamweaverCS3[M].上海市：華東師范大學(xué)出版社，2010（04）.
[2]馬增友,于俊麗,劉輝.Dreamweavercs3網(wǎng)頁(yè)設計與制作技能實(shí)訓教程[M].北京：科學(xué)出版社，
[3]孫良軍.網(wǎng)頁(yè)設計與制作全方位學(xué)習[M].北京：中國青年出版社，2003.
[4]王書(shū)娟.網(wǎng)頁(yè)制作中超鏈接的應用-使用Dreamweaver創(chuàng )建超鏈接[J].科技風(fēng),2012(05).
[5]張燁.關(guān)于網(wǎng)頁(yè)設計中路徑使用的思考[J].漯河職業(yè)技術(shù)學(xué)院學(xué)報,2005(02).
【網(wǎng)頁(yè)設計制作中超鏈接的運用論文】相關(guān)文章：
《網(wǎng)頁(yè)設計與制作》課程中過(guò)程考核的運用論文11-20
網(wǎng)頁(yè)設計中FLASH的運用論文11-19
“網(wǎng)頁(yè)設計與制作”課程中的應用分析論文11-18
網(wǎng)頁(yè)設計教學(xué)中DIV+CSS布局的運用論文11-11
視覺(jué)元素下網(wǎng)頁(yè)設計的運用論文11-19