第 6 章 加入超連結 著作權所有 © 旗標出版股份有限公司.

Presentation on theme: "第 6 章 加入超連結 著作權所有 © 旗標出版股份有限公司."— Presentation transcript:

1 第 6 章 加入超連結 著作權所有 © 旗標出版股份有限公司

2 本章提要 規劃超連結 加入網站內部的超連結 加入網站外部的超連結 使用書籤 啟用超連結強化效果 製作影像地圖 管理超連結

3 規劃超連結 使用超連結的好處 規劃超連結 超連結的形式與目標

4 使用超連結的好處 超連結最大的好處就是「資源共享」：

5 使用超連結的好處 超連結還可擺脫「循序閱讀」的模式, 將長篇大論分別放置不同網頁, 讓瀏覽者自行選擇連結閱讀；或者對於網頁中提到的艱澀詞句, 另寫解釋名詞的網頁, 讓有疑惑的瀏覽者點選超連結查詢, 便無需於文中插入解釋破壞了文章的完整性。

6 使用超連結的好處

7 規劃超連結 規劃網站的超連結 運用導覽模式建立網站架構的同時, 也規劃了超連結。
以本書的範例網站而言, 首頁要能連結到網站內的各個網頁, 而網頁間也要能相互連結。「編修技巧」網頁還會連結到「染髮效果」、「黑白/彩色照」...等網頁, 一長串的連結下來, 惟有透過事先的規劃才不會使網站組織雜亂無章。

8 規劃網站的超連結

9 在「導覽」模式建立網站架構的好處 如果你已經依第 3 章的方法建立了網站架構, 即可依第 13 章介紹的連結列功能自動加入各個網頁間的連結, 節省不少規劃的工作哦！ 如果沒有用導覽模式來建立網站架構, 那麼就得在每個網頁中手動加入超連結, 否則網頁間是沒有橋樑可互通的。

10 規劃外部超連結 除了規劃好網站內部連結的網頁, 當然還要能連到外面的花花世界, 否則就失去 Internet 資源共享的意義了。
關於外部超連結的規劃, 只要把自己喜歡、與網站主題相關的連結放進來就行了, 例如網站的主題是「數位相片編修」, 就可以多介紹幾個相關資訊的網站, 像是國內、外知名的攝影、數位相機討論網站。

11 超連結的形式與目標 超連結的形式 被加上連結的文字, 預設下方會出現一條底線, 並以藍色字體來表示, 讓人一眼就知道哪些文字具有超連結功能。
圖片也可以加入超連結, 瀏覽者只要將滑鼠移到 圖片上, 若變成了手指形 狀, 就表示這張圖片已 加入超連結：

12 超連結的目標 網站內部的超連結：指的是連結網站資料夾內的其它網頁、檔案或是以書籤標註的位置。
網站外部的超連結：可以是別人的 WWW 網站、FTP 站台、 信箱, 或是一個檔案的位置。而瀏覽器會依據超連結的語法指示, 對連結目標執行相關的動作, 例如按下 信箱的超連結, 就會自動開啟郵件編輯器。

13 超連結的目標 超連結的目標區分為 4 類, 請按下插入超連結鈕：

14 超連結的目標

15 加入網站內部的超連結 連結到網站內的其它網頁 移除超連結 連結至新文件 連結到檔案

16 連結到網站內的其它網頁 以本書範例網站的主頁 (mainframe.htm) 為例, 只要點一下左頁框中的編修技巧鈕, 就會連結到編修技巧網頁 (tips.htm), 你可以開啟範例網站來試試效果。

17 設定文字的超連結 請開啟練習檔 ex06-01.htm, 在設計模式選取要加入連結的文字：
按下工具列上的插入超連結鈕, 開啟插入超連結交談窗。 在交談窗裡選擇現存的檔案或網頁, 然後點選要連結的網頁：

18 設定文字的超連結

19 設定文字的超連結 接下來就可以切換到預覽模式或用瀏覽器試試效果了。你也可以在設計模式直接按下 [Ctrl] 鍵再點選加入超連結的文字或圖片, 這樣不僅會啟動超連結, 還會開啟連結頁面讓你編輯、修改內容。

20 從「資料夾清單」中拉曳網頁成為超連結

21 從「資料夾清單」中拉曳網頁成為超連結

22 設定圖片的超連結 如果要為圖片加上超連結, 只要先點選一張圖片, 再按下插入超連結鈕來建立連結即可。
也可以在圖片上按右鈕, 選擇『圖片內容』命令：

23 設定圖片的超連結

24 設定圖片的超連結

25 設定圖片的超連結 如果要讓人一眼就看出圖片具有超連結, 可繼續切換到外觀頁次, 將圖片的框線粗細設為 "1" 以上, 就會在圖片周圍加上藍色框線, 便可明白告知瀏覽者此張圖片具有超連結功能。

26 移除超連結 只要將插入點移至設定超連結的文字間, 或是選取已設定超連結的圖片, 在其上按右鈕選擇『超連結』命令, 再按下交談窗中的移除超連結鈕, 即可輕鬆移除超連結的設定。

27 替超連結加上工具提示 當我們替文字或圖片加上超連結後, 除了滑鼠指標移至連結的文字或圖片上會變成手指狀外, 我們還可以替超連結加上工具提示做為註解, 讓瀏覽者更清楚此超連結的用意或目標。

28 替超連結加上工具提示 請先切換至設計模式中, 選取要加入工具提示的文字或圖片, 或是將插入點移至已設定超連結的位置。

29 替超連結加上工具提示 按下工具列上的插入超連結鈕, 再按下工具提示鈕, 在工具提示文字欄中輸入提示文字後, 完成後按下確定鈕即可。

30 替超連結加上工具提示

31 替超連結加上工具提示 然後再按下編輯超連結交談窗的確定鈕, 請切換到預覽模式, 來看看設定結果：

32 超連結目標的 3 個選項 目前資料夾：可選擇目前存在網站中的資料夾及檔案。

33 超連結目標的 3 個選項 已瀏覽的頁面：顯示最近曾在 IE 瀏覽過的頁面, 即 IE 記錄資料夾中記錄的網頁。

34 超連結目標的 3 個選項 最近使用的檔案：最近曾編輯過的 Office 文件, 包含 Word、Excel、Access...等。

35 連結至新文件 可在連結至欄選擇建立新文件立即建立新網頁, 並與之產生連結：

36 連結至新文件

37 連結到檔案 插入超連結交談窗中的瀏覽檔案鈕, 不僅可用來尋找網頁檔案並與之連結, 還可以連結使用者電腦上的檔案, 甚至可以是網路上的芳鄰 (區域網路內) 的檔案：

38 連結到檔案

39 連結到檔案 連結到檔案的方式, 並不適合放到 Internet 上, 因為讀取的是電腦中的檔案, 別人的電腦不一定有相同的路徑、相同的檔案, 因此建議不要使用這種連結方式。 若是連結到區域網路內的檔案, 也不適合放到 Internet 上, 因為除非瀏覽者的電腦, 與你的電腦在同一個區域網路中, 否則瀏覽者不會和你有相同的區域網路環境及設定, 當然就會找不到連結的檔案囉！

40 如何放置可供人下載的檔案 檔案匯入網站中後執行『檔案/匯入』命令, 在匯入交談窗中選擇新增檔案鈕, 將檔案匯入網站。
選取要建立連結的文字或圖形, 將連結的目標指定為剛剛匯入網站的檔案。 瀏覽者點選此連結時, 瀏覽器將發現所連結的是一個不支援的檔案, 就會出現如下的交談窗：

41 如何放置可供人下載的檔案

42 如何放置可供人下載的檔案 如果要供人下載的檔案, 不在自己的網站裡, 那麼就將連結目標指定為其它網站 (這樣也可以節省自己網站的空間) , 但網址、路徑、檔名一定要正確才行。 大部份的軟體都是有版權的, 也不允許你放在網站上公開散播, 所以請小心不要違法了！

43 加入網站外部的超連結 開啟新視窗連結到其它網站 連結到電子郵件信箱 連結 Internet 上的其它服務

44 開啟新視窗連結到其它網站 請在瀏覽器開啟相關網站網頁：

45 開啟新視窗連結到其它網站

46 開啟新視窗連結到其它網站 請開啟練習檔 ex06-04.htm,先選取網頁中要加入連結的文字, 例如：旗標出版公司, 再按下工具列的插入超連結鈕： 在插入超連結交談窗中如下操作。

47 開啟新視窗連結到其它網站 接著會開啟預設的瀏覽器, 請連上 Internet 並開啟想要加入的網站：

48 開啟新視窗連結到其它網站 本例為連到旗標出版公司網站 (

49 開啟新視窗連結到其它網站 將瀏覽器縮到最小並回 FrontPage 中, 你就會看到交談窗的網址欄自動變成剛剛的網址了, 再按下確定鈕就完成一個超連結設定。

50 開啟新視窗連結到其它網站

51 開啟新視窗連結到其它網站 請按下插入超連結交談窗中的目標框架鈕來指定：

52 開啟新視窗連結到其它網站

53 開啟新視窗連結到其它網站 再介紹另一種加入外部連結的方法, 請先開啟 IE 並連上欲設定的網頁, 再將 IE 的視窗縮小一點, 接著如下操作：

54 開啟新視窗連結到其它網站

55 開啟新視窗連結到其它網站

56 連結到電子郵件信箱 E-mail 可做為與瀏覽者互動的溝通管道。
在本書範例網站中, 於左框架的導覽列下方設定了 的超連結, 當瀏覽者按下 的超連結, 會立即開啟電腦中預設的電子郵件軟體。 請開啟練習檔案 ex06-05.htm, 選定要設定的文字或圖片, 本例請選擇 的圖片, 然後按下插入超連結鈕 ：

57 連結到電子郵件信箱

58 連結到電子郵件信箱 請切換到預覽模式或用瀏覽器來預覽：

59 連結到電子郵件信箱

60 連結 Internet 上的其它服務 Internet 上除了 WWW 網頁外, 還包含許多各式各樣的網路服務, 如 、FTP、NEWS… 等, 都屬於 Internet 的服務範疇。 我們可以在網址欄中輸入對應的語法來與之連結, 例如要連結 WWW 網站就用 " 信箱就用 " mailto:電子郵件信箱位址", 其它的連結語法也都大同小異：

61 連結 Internet 上的其它服務

62 使用書籤 連結至同一網頁中的書籤 連結至其它網頁的書籤 更改、刪除書籤

63 使用書籤 FrontPage 的書籤, 目的是用來建立網頁內的連結點, 當網頁內容很多時, 瀏覽者不必從頭看起, 只要點選我們加在網頁最前面的索引標題, 就可以立即跳至網頁中已設定書籤的相關主題, 省去在網頁中拉曳捲軸及尋找的麻煩。

64 連結至同一網頁中的書籤 本書範例網站中的拍攝技巧網頁 (camerawork.htm), 共介紹了 8 個實用的攝影技巧, 為了讓瀏覽者快速找到自己想查詢的內容, 我們在網頁開頭加入了索引連結, 你可以在瀏覽器開啟該網頁來試試看。

65 加入書籤 我們必須先在各個特定的位置放入一個記號, 讓 FrontPage 知道連結的目的應該在什麼地方, 而這個記號就是所謂的書籤。
請開啟練習檔 ex06-06.htm, 先將插入點移到下方的 "持穩相機..." 標題前, 然後執行『插入/書籤』命令：

66 加入書籤

67 加入書籤

68 連結至書籤 請先選好要建立連結的文字或圖片, 然後按下插入超連結鈕：

69 連結至書籤 完成後就可以在預覽模式, 或開啟瀏覽器測試看看了。
如果一個網頁內要加入很多書籤連結, 建議你先把所有書籤都加入完畢後, 再替所有書籤建立連結, 這樣會比較有效率。

70 適時加入回到頁首的書籤連結 運用書籤雖可以迅速跳到特定位置, 但瀏覽者想回到網頁最頂端時, 還是得慢慢地拉動捲軸才行。
這時我們可以在網頁頂端加入一個 top 書籤, 然後於網頁中放幾個 Go Top 的連結, 這樣瀏覽者都可以隨時跳回文章最前面：

71 適時加入回到頁首的書籤連結

72 適時加入回到頁首的書籤連結

73 連結至其它網頁的書籤 假設我們要在練習檔案 ex06-07.htm 中, 加上 ex06-06.htm 已設定好的書籤內容, 請確定 ex06-06.htm 與 ex06-07.htm 的檔案置於同一網站資料夾內, 然後開啟 ex06-07.htm 並選取欲加入超連結的文字, 再按下插入超連結鈕。

74 連結至其它網頁的書籤

75 連結至其它網頁的書籤

76 連結至其它網頁的書籤

77 「這份文件中的位置」與「書籤」鈕有什麼不同？
在設定書籤的超連結時, 利用這份文件中的位置鈕開啟的書籤選單, 只會顯示這份文件中的書籤；按下書籤鈕開啟的書籤選單, 則是可以指定網頁檔案, 再選取其中的書籤。 如果沒有選擇任何網頁就按下書籤鈕, 那麼其開啟的書籤選單仍會是這份文件中的書籤。

78 更改、刪除書籤 要更改或刪除已加入的書籤名稱, 只要將插入點移到已加入書籤的文字間, 或選取書籤圖示, 然後按下滑鼠右鈕選擇『書籤內容』命令, 就會開啟如下的書籤交談窗：

79 更改、刪除書籤

80 更改、刪除書籤 利用書籤交談窗刪除網頁中的書籤時, 同樣要先選取書籤名稱, 再按下到鈕 (網頁會自動移至書籤的位置), 才可按下清除鈕將之刪除。 你也可以選取網頁上的書籤圖示, 直接按下 [Delete] 鍵來刪除, 不過若要刪除的書籤數量很多時, 還是利用書籤交談窗會比較省事哦！

81 啟用超連結強化效果 請開啟本書範例網站的拍攝技巧網頁 (camerawork.htm) ：

82 啟用超連結強化效果 請開啟 ex06-08.htm 並在網頁上按滑鼠右鈕選擇『網頁內容』命令, 然後切換到進階頁次：

83 啟用超連結強化效果

84 啟用超連結強化效果 設定完成後, 網頁中的所有超連結都會套用相同設定。
由於超連結強化效果是由 CSS 所控制, 因此若該瀏覽器未完全支援 CSS 時, 可能無法顯示正確的結果。

85 製作影像地圖 一般而言, 一張圖片只能建立一個超連結。若是運用影像地圖 (Image Map) 的技術, 則可以使同一張圖片包含多個超連結, 也就是說, 在圖片的不同位置按下滑鼠左鈕, 就會分別連到相關的內容。 本書範例網站中的編修技巧網頁 (tips.htm), 就是一個影像地圖的應用：

86 製作影像地圖

87 製作影像地圖 製作影像地圖的方法, 是先將一張完整的圖片分割成幾塊區域, 再分別為每個區域指定超連結。
請開啟練習檔 ex06-09.htm 並選取圖片, 此時會自動顯示圖片工具列。若沒有顯示, 請在圖片上按右鈕選擇『顯示圖片工具列』命令：

88 建立矩形與圓形連結區域 我們已在 ex06-09.htm 中加入一張現成的圖片, 請選定圖片後, 按下圖片工具列上的矩形鈕：

89 建立矩形與圓形連結區域

90 建立矩形與圓形連結區域 接著利用前面學過的方法, 指定一個網站內部或外部的超連結, 並重複以上的步驟, 就可以在圖片上建立多個作用區及超連結了。 劃分連結作用區時, 如果不小心發生了作用區重疊的情況, 則重疊區域的連結目標將以最先設定的為主。

91 修改與刪除作用區的範圍 如果想要刪除圖片中的作用區, 可以點選該作用區後 (作用區的框線周圍會出現控點) , 再按下鍵盤上的 [Delete] 鍵。 若要修改作用區的位置, 可以直接拉曳作用區到目的位置；而拉曳作用區的控點, 則可以改變作用區的大小。

92 建立多角形連結區域 使用多角形作用區鈕, 可建立不規則形狀的連結作用區。

93 建立多角形連結區域 當起始與結束是同一個地方時, 也就是將多角形封閉起來, 表示作用區已經繪製完成。若是在繪製時雙按滑鼠左鈕, 這樣不規則區域也會自動封閉起來。 三個劃分工具, 可依據圖片的內容、特性來選擇。不管使用哪一種劃分方法, 都儘量不要有重疊的情況發生, 這樣才能提供瀏覽者一個真正方便又實用的影像地圖。

94 不遺漏圖片中任何區域的連結技巧 如果你希望瀏覽者點選圖片中沒有被劃分的區域時, 也能連結到某個地方, 那麼可以為整張圖片建立超連結。
當圖片中作用區發生重疊狀況時, 超連結的目的會以先設定的為主。假設先設定了作用區, 又設定整張圖片連結的情況下, 圖片中作用區的超連結優先性將高於圖片本身的超連結。

95 不遺漏圖片中任何區域的連結技巧 我們以右圖來說明其作用 區及超連結的優先順序：
此時 A 作用區超連結目的 優先順序為：2 > 3 > 1。 即當圖片上沒有建立影像 地圖作用區時, 才會啟動 圖片的超連結；當影像地 圖作用區重疊時, 則會以先設定的作用區為優先。

96 管理超連結 「超連結」檢視模式 「報告」檢視模式

97 管理超連結 網站中的超連結模式, 可以做為你檢視超連結的好幫手；而報告模式, 則可以輕鬆修復中斷的超連結哦！
建議你開啟練習檔網站 ex06-10 來進行稍後的練習。該網站是本書範例網站在修正超連結前的版本, 你可以藉由我們稍後的說明, 來練習修正錯誤的超連結。

98 「超連結」檢視模式 網站的超連結檢視模式, 可以清楚地看到每個網頁之間的連結情形, 以及頁裡共加入了多少超連結, 甚至放了哪些圖片也都可一目了然。 若連結發生了中斷的情形, 也可以在此模式中馬上立即發現。以下用本書的範例網站來做說明：

99 「超連結」檢視模式

100 將其它的網頁設為檢視中心 一般我們會以首頁為中心, 來檢視超連結的情況, 不過也可以其它網頁做為檢視中心, 以方便觀察特定網頁的連結狀況。
你可用以下兩種方式來達成：

101 將其它的網頁設為檢視中心

102 將其它的網頁設為檢視中心

103 設定超連結的顯示方式 在右方窗格空白處按下滑鼠右鈕, 可設定超連結的顯示方式：

104 設定超連結的顯示方式

105 檢視內部連結的狀況 如果網站內的連結有中斷的情形, 那麼原本網頁間的連接線會斷成兩半：

106 檢查外部連結的狀況 網站外部的超連結常常不是我們所能掌控的, 因為別人的網站可能隨時會搬家、關閉, 甚至是網址輸入錯誤, 使得瀏覽者無法順利連結過去。 在超連結模式檢查外部連結時, 只要選定以 開頭的 URL 網頁, 然後按下滑鼠右鈕選擇『檢查超連結』命令, 即可針對該網站進行檢查 , 當然必須先連上 Internet 才行。

107 檢查外部連結的狀況

108 檢查外部連結的狀況

109 重整超連結 若發現網站內部的超連結狀況有些不對勁, 例如明明網頁還在, 但就是會發生中斷, 或已經套用了佈景主題, 卻無法顯示佈置主題中的按鈕、背景等圖案, 此時可以執行『工具/重整超連結』命令, 由 FrontPage 將網站的連結架構重新組織一次, 並自動修復、更新有錯誤的地方：

110 重整超連結

111 「報告」檢視模式 我們可以利用報告模式來一口氣檢查所有的超連結。
報告模式可以將網站內容做一個完整的總體檢, 並像報表一樣地將明細都列出在你面前, 當然其中也包括最重要的超連結狀況。

112 「報告」檢視模式

113 檢視所有中斷的超連結 光看超連結數量是沒有用的, 我們主要的目的是想把中斷的超連結找出來, 以及偵測網站外部的連結有無問題。 請如下操作：

114 檢視所有中斷的超連結

115 檢視所有中斷的超連結

116 檢視所有中斷的超連結

117 修復斷裂的超連結 先選定一個中斷的連結, 然後按下滑鼠右鈕, 執行『編輯超連結』命令：

118 修復斷裂的超連結

119 偵測未知的超連結 如果連結狀態是一個大問號, 表示 FrontPage 目前尚未得知連結是否有問題
請先選定前面有打問號的超連結 (可以用 [Ctrl] 或 [Shift] 鍵來選取多個項目), 然後按下滑鼠右鈕, 執行『檢查超連結』命令：

120 偵測未知的超連結

121 偵測未知的超連結

122 偵測未知的超連結 如果想一次將所有超連結檢查完畢, 可以按下視窗右上角的驗證目前 web 中的超連結鈕：

123 偵測未知的超連結 檢查完之後, 如果發現有連結中斷的情形, 可以用前面學過的方法, 直接把錯誤的連結修正。或者用瀏覽器連到該網站, 看看是網址打錯、還是主機暫時關閉、搬家, 再來做適當的修正。 最後我們要建議你, 最好定期檢查網站的外部超連結是否有問題, 以免瀏覽者連不上你介紹的網站, 那就白費了你一番苦心了哦！