在經過前面幾個部分的操作之後,我們的網頁已經圖文並茂,具有相當的效果了,但是這對於網頁來說還不夠,為了網站中的眾多網頁能夠成為一個有機的整體,必須將各個網頁通過超連結方式連結起來,這樣才能夠讓瀏覽者在不同的頁面之間跳轉。
一、連結圖片和文字
為一些文字或圖片建立連結非常方便,只要用滑鼠選取需要變成連結的圖片或文字,然後在屬性面板的「Link」輸入框中輸入需要跳轉的目標頁面地址,或者按下輸入框旁邊的資料夾圖示來選擇需要跳轉的檔案。除此之外,Dreamweaver MX 2004還提供了一種透過網站視窗來快速連結文件的方法。
第一步:先執行「Site→Manage Sites」指令,並且從彈出式選單中選擇一個已經建立好的站點,此時可以在右部看見彈出的站點管理視窗。
步驟二:在編輯區選取文字或圖片,直接拖曳屬性面板中「Link」輸入框旁的圓形標靶圖標,這時會出現一個箭頭,當箭頭指向網站管理員中的某一個檔案時,文件周圍會出現一個方框(如圖1)。
圖1
第三步:放開滑鼠之後,選取的文字下部就會出現底線,同時單字的顏色變成藍色,而且「Link」輸入框中也會自動顯示目標檔案的位址。
提示:在建立連結的時候需要注意URL的兩種方式。 1.絕對地址:例如www. abc. com/test. htm;2.相對位址:如download/1. htm,說明頁1. htm在伺服器的根目錄中。
二、在一張圖片上設定多個鏈接
有些網頁在一張大圖片上做了多個鏈接,這樣訪問者可以通過點擊圖片的不同位置進入不同的頁面,這是應用了圖像熱區域的概念,我們可以參考下述步驟實現。
第一步:在Dreamweaver MX 2004中可以先選取影像,此時可以在影像屬性面板上看見一個「Map」區域,在其下方有三個淡藍色的工具圖標,即矩形、圓形和多邊形。
第二步:根據需要用滑鼠選取其中的一個,再把滑鼠移到影像上拖曳出一塊淡藍色的區域。
第三步:在屬性面板中的「Link」輸入框中填寫需要連結的網頁位址,這樣一個圖像熱區就做好了。
同樣,再對這幅圖像設定多個圖像熱區域,也就可以實現點擊圖片的不同區域進入不同的頁面了。
三、客製化頁面內跳轉的連結
如果你經常在網路上訂閱免費的電子雜誌,或者瀏覽超長的頁面應該對這種標籤連結不陌生,這是透過一個類似目錄的清單來方便地跳到頁面內任何部分。
第一步:在Dreamweaver MX 2004中先確定連結指向的位置,也就是螢幕跳轉後停留的位置,接著選取目標文字並執行「Insert→Named Anchor」指令。
第二步:在「Anchor name」輸入框中鍵入標籤名稱(例如test3),這時在文字下方會自動出現一個錨式標記來區分開普通的文字內容(如圖2)。
圖2
第三步:在屬性板的“Link”輸入框中輸入“#test3”,其中test3就是剛才設定的名字,這樣即可實現頁面內跳躍功能了。
提示:如果想指向另外一頁中的某個位置也可以,把這個錨式標記放過去就行了。
四、快速檢查網頁連結
上網衝浪的時候,最討厭的就是看見「Web Server error 4004:File Not Found」之類的出錯訊息。由於一個網站中的連結數量很多,稍有不甚就會導致很多連結出錯,不過在Dreamweaver MX 2004中可以很方便地對連結進行檢查。
第一步:在Dreamweaver MX 2004中執行「Site→Check Links SideWide」指令,此時將會啟動連結檢查面板。
第二步:從面板左上部的「Show」下拉式選單中可以選擇Broken Links(斷掉的連結)、Extrenal Links(外部的連結)、OrphanedFiles(孤立檔案)三種,例如我們選取Orphaned Files之後,Dreamweaver MX 2004將對目前連結情況進行檢查,並且將孤立的文件清單顯示出來。
第三步:對於有問題的文件,直接雙擊滑鼠左鍵即可開啟進行修改。
提示:外部連結是連結到外部網站的連結位址,Dreamweaver無法對其正確性進行檢查。
在為網頁建立連結的時候需要提醒大家一定要格外小心,因為網站通常都有數百個頁面,稍不留神就會導致空鏈接或者是鏈接錯誤的情況,這對你的網站形象可是有很不好的影響喲!