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

時間：2021-04-22 09:36:53 論文我要投稿

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

　　摘要：超鏈接是網頁間聯(lián)系的橋梁，是網頁的魅力所在。超鏈接按鏈接范圍分有外部鏈接和內部鏈接；按鏈接路徑來說，一般包含文檔鏈接、書簽鏈接、電子郵件鏈接、空鏈接、腳本鏈接。網頁制作工具Dreamwraver提供了非常簡便的創(chuàng)建超鏈接的方法，用戶可將文字、圖片、Flash等網頁元素設置為鏈接對象，進而美化鏈接，讓網頁更豐富多彩。

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

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

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

　　1超鏈接的分類

　　按鏈接范圍一般分為內部鏈接和外部鏈接。外部鏈接：與外部網站的頁面間的鏈接；內部鏈接：網站內部頁面間的鏈接。按鏈接路徑來說，一般包含以下類型：文檔鏈接：鏈接到其他文檔，最為常見；電子郵件鏈接：創(chuàng)建允許用戶給網頁制作人員發(fā)送郵件的鏈接；書簽鏈接：鏈接到相同文檔或其他文檔的書簽位置；空鏈接：不會跳轉到任何位置，用于附加Dreamweaver行為；腳本鏈接：執(zhí)行JavaScript代碼或調用JavaScript函數。

　　2超鏈接的創(chuàng)建及應用

　　2.1外部鏈接和內部鏈接

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

　　2.2電子郵件鏈接

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

　　2.3書簽鏈接

　　“書簽鏈接”可讓用戶在頁面內容較多時只瀏覽自己感興趣的內容。制作“書簽鏈接”通常會在網頁上端位置設置一個內容列表，列表下面分別是針對各列表項的詳細說明位置。當用戶單擊內容列表中感興趣的某一項后，網頁會自動跳轉到該列表項的詳細說明位置�！皶灐币辉~是轉譯而來的，它的英語原詞是anchor，意即“錨”，所以“書簽鏈接”也常稱為“錨點鏈接”�！皶炴溄印笨勺層脩舾鶕枨蟾奖憧旖莸卣业较鄳獌热�，而不必瀏覽網頁中的所有內容，使網頁更具人性化。“書簽鏈接”的制作方法：將光標定位到內容介紹的標題處―――單擊“插入記錄/命名錨記”或按Cutrl+Alt+A快捷鍵，在出現(xiàn)的對話框中輸入書簽名，然后單擊“確定”按鈕―――選取列表中的文字，在“屬性”面板的“鏈接”域中，輸入符號“#”和書簽名。數字和字母都可以作為書簽名，但是最好不要使用中文。除了使用菜單命令外還可以通過“插入欄”中的“常用”項插入“命名錨記”進行操作。

　　2.4無址鏈接和腳本鏈接

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

　　3超鏈接的目標窗口

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

　　4超鏈接的美化

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

　　5結語

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

　　參考文獻

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

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

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

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

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

【網頁設計制作中超鏈接的運用論文】相關文章：

《網頁設計與制作》課程中過程考核的運用論文11-20

網頁設計中FLASH的運用論文11-19

網頁設計中色彩的運用分析論文11-19