第 6 章 加入超連結.

Presentation on theme: "第 6 章 加入超連結."— Presentation transcript:

1 第 6 章 加入超連結

2 本章重點 6-1 加入內部超連結 6-2 加入外部超連結 6-3 讓連結網頁開啟在新視窗 6-4 加入 E-Mail 連結
6-5 製作影像地圖 6-6 讓瀏覽者下載檔案 6-7 變換超連結文字狀態

3 6-1 加入內部超連結 若超連結是要連結到網站中其他網頁, 或是跳到同一網頁中的某些段落內容時, 此種超連結稱為「 內部超連結」 , 亦即連結到網站內部的超連結；而連結到其他網站的超連結則稱為「 外部超連結」。本節先為您介紹加入內部超連結的操作, 下一節再介紹外部超連結的操作。

4 加入內部超連結 加入超連結文字 連結下拉選單 為圖片加上超連結 超連結包含中文字的問題 加入錨點 (Anchor) 連結到其他網頁中的錨點

5 加入超連結文字 在範例網站首頁 (main.html) 最上方的選單部分, 要分別連結到推薦行程 (travel.html)、日本簡介 (aboutjapan.html)、旅遊日誌分享 (blog.html)、相關連結 (link.html)各頁面, 並且要讓瀏覽者可隨時按下選單右上方的 "回首頁" 文字跳回本站首頁, 因此需要為這些文字逐一設置超連結。底下以練習檔 Ex06-01.html 來說明內部超連結的設定方式：

6 加入超連結文字

7 加入超連結文字

8 加入超連結文字

9 加入超連結文字 使用同樣的方法, 就可以為其他欲連結到各頁面的文字一一加入超連結 (完成結果可參考 Ch06-01.html)：

10 加入超連結文字 另外, 修改已含有超連結的文字, 是不會影響超連結內容的。例如我們要將超連結文字改成英文：

11 加入超連結文字

12 連結下拉選單 屬性面板的連結下拉列示窗記錄了本次啟動 Dreamweaver後, 在連結欄曾連結的超連結資訊。所以若要指定超連結時, 可以先在連結下拉列示窗中尋找是否有您需要的超連結, 然後直接選取即可：

13 為圖片加上超連結 除了文字之外, 也可以使用圖片做為超連結, 其做法就和文字超連結一樣, 只要先選取圖片, 然後在屬性面板上的連結欄輸入要連結的網址即可, 在此我們示範另一種超連結的做法。請接續上例進行如下操作：

14 為圖片加上超連結

15 為圖片加上超連結

16 為圖片加上超連結 當文字設定超連結後, 預設會變成藍色文字 (若已經連結過則會變成紫色), 而圖片則是加入超連結後, 四周會自動增加藍色邊框, 影響到版面美觀, 因此我們接著要將邊框刪除：

17 為圖片加上超連結

18 超連結包含中文字的問題 有些非中文版的瀏覽器或網站伺服器並不支援中文字, 若網頁中的超連結目標, 也就是網頁的網址含有中文字, 則可能會出現找不到連結目標的情況。為了讓網頁在不同平台都具有相容性, 舉凡網頁的檔案、資料夾名稱、及連結路徑等, 再次提醒各位請不要使用中文字元。

19 加入錨點 (Anchor) 有時候網頁的內容很多, 必須不斷捲動網頁才能看完所有內容時, 建議你可在網頁的開頭加入網頁內容索引超連結, 也就是按下有興趣的內容索引, 即可直接跳到同網頁中該內容所在之處, 這樣瀏覽起來就方便多了。這種可直接顯示某一部分網頁內容的超連結, 只要在網頁內加入錨點 (Anchor) 即可做到。 例如範例網站中的推薦行程網頁 (travel.html) 就是以加入錨點的方式完成的,讓瀏覽者可以先按下某一天行程的超連結, 即直接往下跳到介紹該行程的內容。請開啟練習檔 Ex06-02.html, 我們來看看如何加入錨點：

20 加入錨點 (Anchor)

21 加入錨點 (Anchor)

22 加入錨點 (Anchor) 設定好錨點之後, 接下來我們要在網頁開頭列出的行程選單, 為文字行程第五天指定超連結：

23 加入錨點 (Anchor) 我們已指定好了可跳到網頁中介紹第五天行程的超連結！你可以按下 F12 鍵, 開啟預設瀏覽器來查看結果：

24 加入錨點 (Anchor)

25 連結到其他網頁中的錨點 若要指定可直接連結到某一網頁錨點的超連結, 直接在連結網頁的超連結之後加上錨點名稱即可：

26 6-2 加入外部超連結 在相關連結網頁 (link.html)中, 我們要加入幾個可連結到其他日本旅遊相關網站的超連結, 讓遊客在出國前可先查詢到各類有幫助的行前資訊。請開啟練習檔 Ex06-03.html, 我們已經事先幫您把大部分的連結都設定好, 現在只剩下中華航空尚未設定連結, 就以它來做練習吧： 外部超連結的設定方式

27 加入外部超連結

28 外部超連結的設定方式 使用到最多的外部超連結, 是連結到 WWW 網站的超連結, 其超連結語法是以 開頭, 再填上網域名稱, 如 tw.yahoo.com。 但網路上除了 WWW 網站, 還有 FTP 站台, 若要連結到這類站台, 其超連結設定方式就與 WWW 網站有所不同。而除了這些外部超連結, 還有可以啟動電腦中其他網路服務程式的超連結, 如啟動電子郵件程式、遠端系統主機等等。以下就列出一些外部超連結與啟動其他網路服務程式的超連結設定方式：

29 外部超連結的設定方式

30 6-3 讓連結網頁開啟在新視窗 當我們用滑鼠按下超連結之後, 一般的情形是在目前的瀏覽器視窗直接開啟所連結的網頁, 這裡我們要介紹另一種顯示連結網頁的方式, 就是開啟一個新的瀏覽器視窗來顯示。 接續上例, 剛剛已經替中華航空設定超連結, 但目前按下連結會直接在同一個視窗開啟, 若希望按下連結後, 網頁能在新的瀏覽器視窗中開啟, 可如下操作：

31 讓連結網頁開啟在新視窗

32 讓連結網頁開啟在新視窗 您可以用瀏覽器開啟 Ch06-03.html 來測試效果如何！

33 讓連結網頁開啟在新視窗 設定外部超連結時的小提醒 在同一個新視窗中顯示超連結

34 設定外部超連結時的小提醒 建議您在設定連到外部網站的超連結時, 不要把別人網頁的內容直接開啟在自己網站的頁框中, 以免讓瀏覽的人誤以為該網頁屬於您網站的一部份而涉及侵權的可能性。

35 設定外部超連結時的小提醒

36 在同一個新視窗中顯示超連結 當你按下在屬性面板目標列示窗中選擇 _blank 的超連結, 便會開啟一個新視窗來顯示網頁, 所以瀏覽者在瀏覽網頁的過程中, 有可能會開啟很多個瀏覽器視窗在桌面上, 這對電腦的執行效能而言, 將是很大的負擔。如果您體貼到這一點, 有一個變通方式, 就是在同一個新視窗中開啟超連結網頁。做法很簡單, 只要預先為新視窗取好一個名稱即可。 請開啟練習檔 Ex06-04.html, 我們來練習設定按下超連結圖片及文字後, 如何讓網頁的內容開啟在同一個新視窗中：

37 在同一個新視窗中顯示超連結

38 在同一個新視窗中顯示超連結 接著請將航空公司分類下的其他超連結文字也按照上述方式, 在屬性面板的目標列示窗中輸入 "_dynamic"。然後預覽網頁, 就會發現這些連結網頁都會在同一個新視窗顯示。

39 6-4 加入 連結 在網頁中最常應用的電子郵件信箱超連結, 就是用於訪客意見回覆。除了提供一個和網友互動的管道外, 對於商業網站來說, 不但能提供產品諮詢服務、讓使用者投書, 也可蒐集到訪客信箱以推廣行銷活動...等等。所以網站中可能會有好幾個電子郵件信箱超連結, 若每個超連結都是不同的電子郵件信箱位址, 那倒還好, 若是只有共用一個電子郵件信箱, 就要在電子郵件信箱超連結中指定「 主旨」 , 才好為郵件分類。 加入電子郵件信箱超連結

40 加入電子郵件信箱超連結 我們要在首頁 (main.html) 最上方的連絡我們加入電子郵件信箱的超連結, 讓網站管理者能收到瀏覽者的意見回覆。為了方便辨識, 我們將郵件的主旨輸入為 "網站意見"。 在常用面板有一個電子郵件連結鈕, 讓我們不用自己手動打原始碼, 就可以做好電子郵件的超連結。下面就來示範如何使用, 請開啟練習檔 Ex06-05.html：

41 加入電子郵件信箱超連結

42 加入電子郵件信箱超連結

43 6-5 製作影像地圖 影像地圖 (Image Map) 是網頁上常見的超連結技巧, 瀏覽者在圖片上的不同位置按下滑鼠左鈕, 就會分別連到不同的地方, 例如本書範例網站的日本簡介網頁(aboutjapan.html), 就有一個標準的影像地圖應用：

44 製作影像地圖

45 製作影像地圖 利用 Dreamweaver 提供的影像地圖工具, 就能直接在圖片上劃分出不同的連結區域喔！底下將為您做示範。

46 製作影像地圖 建立影像地圖的連結區域 連結區重疊 修改與刪除影像地圖的連結區域

47 建立影像地圖的連結區域 製作影像地圖的步驟, 就是先在圖片上畫出想要的區域, 然後再賦予該區域一個超連結位址即可。請開啟練習檔 Ex06-06.html, 先選取日本地圖的圖片, 在屬性面板中按下多邊形連接區域鈕, 然後一個點、一個點地連接出藍色半透明的連結區域 (如果選擇的是形狀工具, 則是在圖片上以拉曳的方式做出連結範圍)：

48 建立影像地圖的連結區域

49 連結區重疊 在圖片上劃分連結區域時, 若不小心發生了連結區重疊的情況, 則重疊區域的連結位址將以較早設定的連結為準。例如下圖中,我們先設立了A連結區 (圓形連結區), 接著又設定了B連結區 (矩形連結區), 但 不小心讓 B 連結區 與A 連結區重疊, 那 麼當我們按下重疊 的區域時, 會以 A 的連結設定為準：

50 修改與刪除影像地圖的連結區域 要修改或刪除已畫出的連結區域前, 請先按下屬性面板的 鈕, 讓指標變回箭頭樣式, 這樣才能選取連結區域, 而不會繼續畫出新的區域。 當連結區域的劃分有誤時, 請先選取該半透明區域, 再按下鍵盤上的 Delete 鍵, 即可刪除此連結區域。若要移動連結區域的位置, 請將指標移到半透明區域裡面, 再按住滑鼠左鈕不放即可移動該區域；而拉曳區域框線周圍的控點, 則可改變連結區域的形狀。

51 6-6 讓瀏覽者下載檔案 網站中若要提供檔案讓瀏覽者下載, 方法很簡單, 只要加入連結到檔案的超連結
就可以了 (也就是將超連結目標直接指定成該檔案）。例如範例網站中的推薦行程網頁 (travel.html), 有興趣者只要按下載行程表鈕, 即可下載有詳細行程說明的 Word 檔。請開啟練習檔 Ex06-07.html, 選取下載行程表鈕, 並設置檔案連結路徑：

52 讓瀏覽者下載檔案

53 讓瀏覽者下載檔案 日後要提供瀏覽者下載檔案, 就可以利用上述的方法來連結到對應的檔案, 這樣很快就可以完成指定下載檔案連結的工作了。

54 下載檔案的格式 將超連結指向除 HTML 格式之外的檔案, 是不是都會成為下載檔案的連結呢？答案是：不一定。
若超連結指向瀏覽器無法分辨的檔案格式, 如 .rar、.exe 等等, 瀏覽器就會當成是要下載的檔案, 進而啟動下載功能。但如果超連結指向 .gif、.jpg、.png 等圖片格式, 這些都是瀏覽器目前普遍支援顯示的圖檔, 那麼就不會當成下載檔案, 而是直接顯示在瀏覽器中。如果你還是想將這些圖片當成下載檔案, 那麼就把它壓縮成 .zip 檔案吧。

55 6-7 變換超連結文字狀態 一般超連結文字給人的印象便是在網頁中加了一條底線的超連結文字。如果想要讓超連結文字顯得與眾不同, 例如讓超連結文字不出現底線, 或是當滑鼠指在超連結文字上時, 文字會變大…等, 這些都是可以設定的喔。 請用瀏覽器預覽完成檔 Ch06-08.html, 看看我們接下來要示範的效果, 讓超連結文字在「 滑鼠移到超連結文字上」 時, 底線會消失而且色彩會改變：

56 變換超連結文字狀態

57 變換超連結文字狀態 修改頁面屬性的設定 其他超連結狀態說明 新增 CSS 規則 其他 3 種狀態說明

58 修改頁面屬性的設定 請開啟練習檔 Ex06-08.html, 按下屬性面板的頁面屬性鈕, 切換到連結頁次中設定：

59 修改頁面屬性的設定 在 Dreamweaver 中無法預覽所定義的超連結效果, 請用瀏覽器預覽網頁, 結果會和完成檔 Ch06-08.html 相同。

60 其他超連結狀態說明 超連結狀態共分為 4 種, 相對應的設定位置如下圖所示：

61 新增 CSS 規則 利用 CSS 樣式則可以有更多的連結文字變化效果, 以下我們仍以 Ex06-08.html 為例。請先展開 CSS 面板, 並如下操作：

62 新增 CSS 規則

63 新增 CSS 規則

64 新增 CSS 規則 設定完成後, 請按下確定鈕, 即可使用瀏覽器預覽網頁, 便可以看到當指標移到超連結文字上時, 字體上下皆出現水平線且色彩會改變：

65 其他 3 種狀態說明 a:active：「滑鼠按下」 狀態―定義滑鼠按下超連結文字時的文字格式。
a:link：「滑鼠未經過」 狀態―定義滑鼠尚未移到超連結文字上的文字格式, 也就是一般情況下的超連結文字。 a:visited：「超連結已拜訪過」 狀態―定義已經拜訪過的超連結文字格式。