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