加入超连结重点课件

第6章加入超連結著作權所有©旗標出版股份有限公司本章提要規劃超連結加入網站內部的超連結加入網站外部的超連結使用書籤啟用超連結強化效果製作影像地圖管理超連結規劃超連結使用超連結的好處規劃超連結超連結的形式與目標使用超連結的好處超連結最大的好處就是「資源共享」：使用超連結的好處超連結還可擺脫「循序閱讀」的模式,將長篇大論分別放置不同網頁,讓瀏覽者自行選擇連結閱讀；或者對於網頁中提到的艱澀詞句,另寫解釋名詞的網頁,讓有疑惑的瀏覽者點選超連結查詢,便無需於文中插入解釋破壞了文章的完整性。使用超連結的好處規劃超連結

規劃網站的超連結運用導覽模式建立網站架構的同時,也規劃了超連結。以本書的範例網站而言,首頁要能連結到網站內的各個網頁,而網頁間也要能相互連結。「編修技巧」網頁還會連結到「染髮效果」、「黑白/彩色照」...等網頁,一長串的連結下來,惟有透過事先的規劃才不會使網站組織雜亂無章。規劃網站的超連結在「導覽」模式建立網站架構的好處如果你已經依第3章的方法建立了網站架構,即可依第13章介紹的連結列功能自動加入各個網頁間的連結,節省不少規劃的工作哦！如果沒有用導覽模式來建立網站架構,那麼就得在每個網頁中手動加入超連結,否則網頁間是沒有橋樑可互通的。規劃外部超連結除了規劃好網站內部連結的網頁,當然還要能連到外面的花花世界,否則就失去Internet資源共享的意義了。關於外部超連結的規劃,只要把自己喜歡、與網站主題相關的連結放進來就行了,例如網站的主題是「數位相片編修」,就可以多介紹幾個相關資訊的網站,像是國內、外知名的攝影、數位相機討論網站。超連結的形式與目標

超連結的形式被加上連結的文字,預設下方會出現一條底線,並以藍色字體來表示,讓人一眼就知道哪些文字具有超連結功能。圖片也可以加入超連結,

瀏覽者只要將滑鼠移到

圖片上,若變成了手指形

狀,就表示這張圖片已

加入超連結：超連結的目標網站內部的超連結：指的是連結網站資料夾內的其它網頁、檔案或是以書籤標註的位置。網站外部的超連結：可以是別人的WWW網站、FTP站台、E-mail信箱,或是一個檔案的位置。而瀏覽器會依據超連結的語法指示,對連結目標執行相關的動作,例如按下E-mail信箱的超連結,就會自動開啟郵件編輯器。超連結的目標超連結的目標區分為4類,請按下插入超連結鈕：超連結的目標加入網站內部的超連結 連結到網站內的其它網頁移除超連結連結至新文件連結到檔案連結到網站內的其它網頁以本書範例網站的主頁

(mainframe.htm)為例,只要點一下左頁框中的編修技巧鈕,就會連結到編修技巧網頁(tips.htm),你可以開啟範例網站來試試效果。設定文字的超連結請開啟練習檔ex06-01.htm,在設計模式選取要加入連結的文字：按下工具列上的插入超連結鈕,開啟插入超連結交談窗。在交談窗裡選擇現存的檔案或網頁,然後點選要連結的網頁：設定文字的超連結設定文字的超連結接下來就可以切換到預覽模式或用瀏覽器試試效果了。你也可以在設計模式直接按下[Ctrl]鍵再點選加入超連結的文字或圖片,這樣不僅會啟動超連結,還會開啟連結頁面讓你編輯、修改內容。從「資料夾清單」中拉曳網頁成為超連結從「資料夾清單」中拉曳網頁成為超連結設定圖片的超連結如果要為圖片加上超連結,只要先點選一張圖片,再按下插入超連結鈕來建立連結即可。也可以在圖片上按右鈕,選擇『圖片內容』命令：設定圖片的超連結設定圖片的超連結設定圖片的超連結如果要讓人一眼就看出圖片具有超連結,可繼續切換到外觀頁次,將圖片的框線粗細設為"1"以上,就會在圖片周圍加上藍色框線,便可明白告知瀏覽者此張圖片具有超連結功能。移除超連結只要將插入點移至設定超連結的文字間,或是選取已設定超連結的圖片,在其上按右鈕選擇『超連結』命令,再按下交談窗中的移除超連結鈕,即可輕鬆移除超連結的設定。替超連結加上工具提示當我們替文字或圖片加上超連結後,除了滑鼠指標移至連結的文字或圖片上會變成手指狀外,我們還可以替超連結加上工具提示做為註解,讓瀏覽者更清楚此超連結的用意或目標。替超連結加上工具提示請先切換至設計模式中,選取要加入工具提示的文字或圖片,或是將插入點移至已設定超連結的位置。替超連結加上工具提示按下工具列上的插入超連結鈕,再按下工具提示鈕,在工具提示文字欄中輸入提示文字後,完成後按下確定鈕即可。替超連結加上工具提示替超連結加上工具提示然後再按下編輯超連結交談窗的確定鈕,請切換到預覽模式,來看看設定結果：超連結目標的3個選項目前資料夾：可選擇目前存在網站中的資料夾及檔案。超連結目標的3個選項已瀏覽的頁面：顯示最近曾在IE瀏覽過的頁面,即IE記錄資料夾中記錄的網頁。超連結目標的3個選項最近使用的檔案：最近曾編輯過的Office文件,包含Word、Excel、Access...等。連結至新文件可在連結至欄選擇建立新文件立即建立新網頁,並與之產生連結：連結至新文件連結到檔案插入超連結交談窗中的瀏覽檔案鈕,不僅可用來尋找網頁檔案並與之連結,還可以連結使用者電腦上的檔案,甚至可以是網路上的芳鄰

(區域網路內)的檔案：連結到檔案連結到檔案連結到檔案的方式,並不適合放到Internet上,因為讀取的是電腦中的檔案,別人的電腦不一定有相同的路徑、相同的檔案,因此建議不要使用這種連結方式。若是連結到區域網路內的檔案,也不適合放到Internet上,因為除非瀏覽者的電腦,與你的電腦在同一個區域網路中,否則瀏覽者不會和你有相同的區域網路環境及設定,當然就會找不到連結的檔案囉！如何放置可供人下載的檔案檔案匯入網站中後執行『檔案/匯入』命令,在匯入交談窗中選擇新增檔案鈕,將檔案匯入網站。選取要建立連結的文字或圖形,將連結的目標指定為剛剛匯入網站的檔案。瀏覽者點選此連結時,瀏覽器將發現所連結的是一個不支援的檔案,就會出現如下的交談窗：如何放置可供人下載的檔案如何放置可供人下載的檔案如果要供人下載的檔案,不在自己的網站裡,那麼就將連結目標指定為其它網站(這樣也可以節省自己網站的空間),但網址、路徑、檔名一定要正確才行。大部份的軟體都是有版權的,也不允許你放在網站上公開散播,所以請小心不要違法了！加入網站外部的超連結開啟新視窗連結到其它網站連結到電子郵件信箱連結Internet上的其它服務開啟新視窗連結到其它網站請在瀏覽器開啟相關網站網頁：開啟新視窗連結到其它網站開啟新視窗連結到其它網站請開啟練習檔ex06-04.htm,先選取網頁中要加入連結的文字,例如：旗標出版公司,再按下工具列的插入超連結鈕：在插入超連結交談窗中如下操作。開啟新視窗連結到其它網站接著會開啟預設的瀏覽器,請連上Internet並開啟想要加入的網站：開啟新視窗連結到其它網站本例為連到旗標出版公司網站(http://.tw)。開啟新視窗連結到其它網站將瀏覽器縮到最小並回FrontPage中,你就會看到交談窗的網址欄自動變成剛剛的網址了,再按下確定鈕就完成一個超連結設定。開啟新視窗連結到其它網站開啟新視窗連結到其它網站請按下插入超連結交談窗中的目標框架鈕來指定：開啟新視窗連結到其它網站開啟新視窗連結到其它網站再介紹另一種加入外部連結的方法,請先開啟IE並連上欲設定的網頁,再將IE的視窗縮小一點,接著如下操作：開啟新視窗連結到其它網站開啟新視窗連結到其它網站連結到電子郵件信箱E-mail可做為與瀏覽者互動的溝通管道。在本書範例網站中,於左框架的導覽列下方設定了E-mail的超連結,當瀏覽者按下E-MAIL

的超連結,會立即開啟電腦中預設的電子郵件軟體。請開啟練習檔案ex06-05.htm,選定要設定的文字或圖片,本例請選擇E-MAIL的圖片,然後按下插入超連結鈕：連結到電子郵件信箱連結到電子郵件信箱請切換到預覽模式或用瀏覽器來預覽：連結到電子郵件信箱連結Internet上的其它服務Internet上除了WWW網頁外,還包含許多各式各樣的網路服務,如E-mail、FTP、NEWS…等,都屬於Internet的服務範疇。我們可以在網址欄中輸入對應的語法來與之連結,例如要連結WWW網站就用"http://網站位址"、要連結E-mail信箱就用"mailto:電子郵件信箱位址",其它的連結語法也都大同小異：連結Internet上的其它服務使用書籤連結至同一網頁中的書籤連結至其它網頁的書籤更改、刪除書籤使用書籤FrontPage的書籤,目的是用來建立網頁內的連結點,當網頁內容很多時,瀏覽者不必從頭看起,只要點選我們加在網頁最前面的索引標題,就可以立即跳至網頁中已設定書籤的相關主題,省去在網頁中拉曳捲軸及尋找的麻煩。連結至同一網頁中的書籤本書範例網站中的拍攝技巧網頁(camerawork.htm),共介紹了8個實用的攝影技巧,為了讓瀏覽者快速找到自己想查詢的內容,我們在網頁開頭加入了索引連結,你可以在瀏覽器開啟該網頁來試試看。加入書籤我們必須先在各個特定的位置放入一個記號,讓FrontPage知道連結的目的應該在什麼地方,而這個記號就是所謂的書籤。請開啟練習檔ex06-06.htm,先將插入點移到下方的"持穩相機..."標題前,然後執行『插入/書籤』命令：加入書籤加入書籤連結至書籤請先選好要建立連結的文字或圖片,然後按下插入超連結鈕：連結至書籤完成後就可以在預覽模式,或開啟瀏覽器測試看看了。如果一個網頁內要加入很多書籤連結,建議你先把所有書籤都加入完畢後,再替所有書籤建立連結,這樣會比較有效率。適時加入回到頁首的書籤連結運用書籤雖可以迅速跳到特定位置,但瀏覽者想回到網頁最頂端時,還是得慢慢地拉動捲軸才行。這時我們可以在網頁頂端加入一個top

書籤,然後於網頁中放幾個GoTop的連結,這樣瀏覽者都可以隨時跳回文章最前面：適時加入回到頁首的書籤連結適時加入回到頁首的書籤連結連結至其它網頁的書籤假設我們要在練習檔案ex06-07.htm中,加上ex06-06.htm已設定好的書籤內容,請確定ex06-06.htm與ex06-07.htm的檔案置於同一網站資料夾內,然後開啟ex06-07.htm並選取欲加入超連結的文字,再按下插入超連結鈕。連結至其它網頁的書籤連結至其它網頁的書籤連結至其它網頁的書籤「這份文件中的位置」與「書籤」鈕有什麼不同？在設定書籤的超連結時,利用這份文件中的位置鈕開啟的書籤選單,只會顯示這份文件中的書籤；按下書籤鈕開啟的書籤選單,則是可以指定網頁檔案,再選取其中的書籤。如果沒有選擇任何網頁就按下書籤鈕,那麼其開啟的書籤選單仍會是這份文件中的書籤。更改、刪除書籤要更改或刪除已加入的書籤名稱,只要將插入點移到已加入書籤的文字間,或選取書籤圖示,然後按下滑鼠右鈕選擇『書籤內容』命令,就會開啟如下的書籤交談窗：更改、刪除書籤更改、刪除書籤利用書籤交談窗刪除網頁中的書籤時,同樣要先選取書籤名稱,再按下到鈕(網頁會自動移至書籤的位置),才可按下清除鈕將之刪除。你也可以選取網頁上的書籤圖示,直接按下[Delete]鍵來刪除,不過若要刪除的書籤數量很多時,還是利用書籤交談窗會比較省事哦！啟用超連結強化效果請開啟本書範例網站的拍攝技巧網頁(camerawork.htm)：啟用超連結強化效果請開啟ex06-08.htm並在網頁上按滑鼠右鈕選擇『網頁內容』命令,然後切換到進階頁次：啟用超連結強化效果啟用超連結強化效果設定完成後,網頁中的所有超連結都會套用相同設定。由於超連結強化效果是由CSS所控制,因此若該瀏覽器未完全支援CSS時,可能無法顯示正確的結果。製作影像地圖一般而言,一張圖片只能建立一個超連結。若是運用影像地圖

(ImageMap)的技術,則可以使同一張圖片包含多個超連結,也就是說,在圖片的不同位置按下滑鼠左鈕,就會分別連到相關的內容。本書範例網站中的編修技巧網頁(tips.htm),就是一個影像地圖的應用：製作影像地圖製作影像地圖製作影像地圖的方法,是先將一張完整的圖片分割成幾塊區域,再分別為每個區域指定超連結。請開啟練習檔ex06-09.htm並選取圖片,此時會自動顯示圖片工具列。若沒有顯示,請在圖片上按右鈕選擇『顯示圖片工具列』命令：建立矩形與圓形連結區域我們已在ex06-09.htm中加入一張現成的圖片,請選定圖片後,按下圖片工具列上的矩形鈕：建立矩形與圓形連結區域建立矩形與圓形連結區域接著利用前面學過的方法,指定一個網站內部或外部的超連結,並重複以上的步驟,就可以在圖片上建立多個作用區及超連結了。劃分連結作用區時,如果不小心發生了作用區重疊的情況,則重疊區域的連結目標將以最先設定的為主。修改與刪除作用區的範圍如果想要刪除圖片中的作用區,可以點選該作用區後(作用區的框線周圍會出現控點),再按下鍵盤上的[Delete]鍵。若要修改作用區的位置,可以直接拉曳作用區到目的位置；而拉曳作用區的控點,則可以改變作用區的大小。建立多角形連結區域使用多角形作用區鈕,可建立不規則形狀的連結作用區。建立多角形連結區域當起始與結束是同一個地方時,也就是將多角形封閉起來,表示作用區已經繪製完成。若是在繪製時雙按滑鼠左鈕,這樣不規則區域也會自動封閉起來。三個劃分工具,可依據圖片的內容、特性來選擇。不管使用哪一種劃分方法,都儘量不要有重疊的情況發生,這樣才能提供瀏覽者一個真正方便又實用的影像地圖。不遺漏圖片中任何區域的連結技巧如果你希望瀏覽者點選圖片中沒有被劃分的區域時,也能連結到某個地方,那麼可以為整張圖片建立超連結。當圖片中作用區發生重疊狀況時,超連結的目的會以先設定的為主。假設先設定了作用區,又設定整張圖片連結的情況下,圖片中作用區的超連結優先性將高於圖片本身的超連結。不遺漏圖片中任何區域的連結技巧我們以右圖來說明其作用

區及超連結的優先順序：此時A作用區超連結目的

優先順序為：2>3>1。

即當圖片上沒有建立影像

地圖作用區時,才會啟動

圖片的超連結；當影像地

圖作用區重疊時,則會以先設定的作用區為優先。管理超連結「超連結」檢視模式「報告」檢視模式管理超連結網站中的超連結模式,可以做為你檢視超連結的好幫手；而報告模式,則可以輕鬆修復中斷的超連結哦！建議你開啟練習檔網站ex06-10來進行稍後的練習。該網站是本書範例網站在修正超連結前的版本,你可以藉由我們稍後的說明,來練習修正錯誤的超連結。「超連結」檢視模式網站的超連結檢視模式,可以清楚地看到每個網頁之間的連結情形,以及頁裡共加入了多少超連結,甚至放了哪些圖片也都可一目了然。若連結發生了中斷的情形,也可以在此模式中馬上立即發現。以下用本書的範例網站來做說明：「超連結」檢視模式將其它的網頁設為檢視中心一般我們會以首頁為中心,來檢視超連結的情況,不過也可以其它網頁做為檢視中心,以方便觀察特定網頁的連結狀況。你可用以下兩種方式來達成：將其它的網頁設為檢視中心將其它的網頁設為檢視中心設定超連結的顯示方式在右方窗格空白處按下滑鼠右鈕,可設定超連結的顯示方式：設定超連結的顯示方式檢視內部連結的狀況如果網站內的連結有中斷的情形,那麼原本網頁間的連接線會斷成兩半：檢查外部連結的狀況網站外部的超連結常常不是我們所能掌控的,因為別人的網站可能隨時會搬家、關閉,甚至是網址輸入錯誤,使得瀏覽者無法順利連結過去。在超連結模式檢查外部連結時,只要選定以http://開頭的URL網頁,然後按下滑鼠右鈕選擇『檢查超連結』命令,即可針對該網站進行檢查,當然必須先連上Internet才行。檢查外部連