第5章　串連網頁超連結.

Presentation on theme: "第5章　串連網頁超連結."— Presentation transcript:

1 第5章　串連網頁超連結

2 目錄 5-1　在網頁上建立超連結 5-2　多樣化的超連結 5-3　影像地圖製作技巧 5-4　關於超連結的二三事

3 5-1　在網頁上建立超連結 5-1.1　在文字和圖片上建立超連結 5-1.2　連結到同一網站中其它網頁

4 在網頁上建立超連結： 網頁最大的特色就是可以為文字和圖片設定超連結，這個超連結可以讓您連到與指定文字或圖片相關的其它網頁，而這個被連結網頁可以是同一個網站中的其它畫面，或根本就在另一個網站中。

5 在文字和圖片上建立超連結： 如果您在網頁上列出了其它網站的名稱，可以把這一段文字變成一個超連結，這樣就可以讓瀏覽網頁的人，藉由點選這個超連結文字，連到指定的網站去。

6 建立文字超連結的操作方法如下：

7

8 回到編輯畫面後，這一段超連結文字會變成藍色並加上底線。如果一時忘記要連結的網址，可以在插入超連結視窗選擇　瀏覽Web鈕，連線到要找的網站後，切回插入超連結視窗，網址欄就會顯示這個網址。

9 建立文字超連結的補充說明：

10 記住囉： 在設計模式下，按住　　鍵，再移動指標選擇超連結文字或圖片，就可以連線到連結的網站。

11 連結到同一網站中其它網頁： 設定超連結到其它網站，您得要輸入網址，如果連到自己網站中的其它網頁，則可以從清單中選擇網頁檔案，操作上十分方便。

12 連結到網站中其它網頁的操作方法如下：

13

14 5-2 多樣化的超連結 5-2.1 建立下載檔案超連結 5-2.2 提高互動性的電子郵件超連結 5-2.3 在網頁中加入書籤
5-2　多樣化的超連結 5-2.1　建立下載檔案超連結 5-2.2　提高互動性的電子郵件超連結 5-2.3　在網頁中加入書籤 5-2.4　連結到網頁中的書籤

15 多樣化的超連結： 無論連到外部網站或其它網頁，基本上都是連結到HTML檔案，其實超連結也可以是其它類型的檔案或電子郵件地址，甚至您可以在超過一個畫面的長網頁中設下一些書籤，再設定超連結到書籤的位置，以方便瀏覽內容超長的網頁。總之就是要讓您像能幹的蜘蛛一樣，編織出方便的“網”。

16 建立下載檔案超連結： 您大概常常去逛提供檔案下載的網站吧，這些download網站通常也是利用超連結的方式來讓您選擇檔案。

17 建立下載檔案超連結的操作方法如下：

18

19 下載檔案的補充說明： 只要連結的目標不是HTML檔案、txt文字檔或圖片檔案，點選這個超連結通常會出現檔案下載視窗，讓人把檔案下載回去。

20 提高互動性的電子郵件超連結： 想要透過網站和別人互動嗎？曉不曉得參觀者對您的網站有什麼看法呢？不妨在首頁加個 超連結，這樣別人就可以寫信給您了。

21 設定 連結的操作方法如下：

22

23 完成後，畫面顯示如下：

24 設定 連結的補充說明：

25 記住囉： 如果想在收件者欄顯示收件人的名字，可以在輸入 地址時，以名字< 地址>的格式設定收件者欄的內容。

26 在網頁中加入書籤： 當網頁內容很長，超出一個畫面的長度時，您可以在適當位置標上一個書籤，這樣就可以在網頁上設定超連結到書籤位置，方便參觀者瀏覽您的網頁。

27 在網頁中加入書籤的操作方法如下：

28

29 完成後，畫面顯示如下：

30 記住囉： 若要刪除已經建立的書籤，則在書籤視窗中選擇書籤名稱，再選擇　　　鈕。

31 連結到網頁中的書籤： 只有書籤當然沒什麼作用，還得要設定超連結到書籤，才能讓所設定的書籤發生效果。

32 連結到網頁中書籤的操作方法如下：

33

34

35

36 記住囉： 您也可以在插入超連結視窗選擇這份文件中的位置，再從清單中選擇要連結的書籤名稱。

37 5-3 影像地圖製作技巧 5-3.1 在圖片上建立連結區域 5-3.2 設定不規則形狀的連結區域 5-3.3 修改超連結作用區範圍
5-3　影像地圖製作技巧 5-3.1　在圖片上建立連結區域 5-3.2　設定不規則形狀的連結區域 5-3.3　修改超連結作用區範圍 5-3.4　刪除超連結作用區

38 影像地圖製作技巧： 一般在為圖片設定超連結時，都是把整張圖片變成一個連結，但若有特殊需要，您可以在圖片上劃分若干區域，並個別指定不同的超連結位址。像這樣具有地圖作用的圖片超連結設計方式，就稱為影像地圖(image map)。

39 在圖片上建立連結區域： 製作影像地圖的工具鈕是放在圖片工具列中，因此您得要先叫出圖片工具列。

40 在圖片上建立超連結區域的操作方法如下：

41

42

43

44 設定不規則形狀的連結區域： 除了矩形或圓形等幾何圖形的超連結作用區外，在圖片上還可以劃出一塊不規則形狀的區域，變成一個超連結作用區。

45 設定不規則形狀作用區的操作方法如下：

46

47 記住囉： 在點選的過程中，按下滑鼠右鍵，隨時可以取消前面設好的點，重新來過。

48 修改超連結作用區範圍： 無論規則的幾何式或不規則形的超連結作用區，設好區域後，您都可以修改原先定下來的區域範圍。

49 修改超連結作用區範圍的操作方法如下：

50

51

52 刪除超連結作用區： 用不到的超連結作用區，您可以把它從影像地圖上移除。

53 刪除超連結作用區的操作方法如下：

54

55 刪除超連結作用區的補充說明： 刪除指定的作用區後，標示作用區也會跟著消失並回到一般的圖片顯示模式。　醒目提示作用區鈕是一個切換開關，按一下會隱藏圖片顯示作用區，再按一下又會恢復圖片。

56 5-4 關於超連結的二三事 5-4.1 不可不知1：設定滑鼠移過超連結文 字的效果 5-4.2 不可不知2：在新視窗開啟連結網頁
5-4　關於超連結的二三事 5-4.1　不可不知1：設定滑鼠移過超連結文 字的效果 5-4.2　不可不知2：在新視窗開啟連結網頁 5-4.3　不可不知3：連結到其它網頁中的書 籤 5-4.4　不可不知4：設定超連結色彩

57 關於超連結的二三事： 不想讓您的超連結文字一成不變嗎？您可以設定滑鼠移過時的文字顯示效果；設定超連結時，您可以讓連結網頁開啟在新的視窗中；此外，您也可以設定超連結到其它網頁中的指定書籤位置，而不限於只能連到同一個網頁中的書籤。

58 不可不知1：設定滑鼠移過超連結文字的效果 FrontPage 2003可以設定滑鼠連結的變化，當滑鼠移過超連結文字時，文字會變色，或做不同效果的顯示，稱為超連結強化效果。

59 設定滑鼠移過超連結文字時顯示效果的操作方法如下：

60

61

62 完成後，畫面顯示如下：

63 記住囉： 超連結強化效果只對個別網頁有效，所以在不同網頁，您都要個別進行設定。此外，如果要取消超連結強化效果，只要在網頁內容視窗的進階標籤內取消勾選啟用超連結變換效果項目就可以了。

64 不可不知2：在新視窗開啟連結網頁 在不特別設定的情況下，點選超連結後，新的畫面會取代原來的畫面，顯示在相同的視窗中。其實如果有特殊需要，您也可以開啟一個新視窗來顯示連結網頁。

65 在新視窗開啟連結網頁的操作方法如下：

66

67

68

69 不可不知3：連結到其它網頁中的書籤 超連結不只可以連到同一個網頁中的書籤，也可以連到不同網頁中的書籤。

70 連結到其它網頁中書籤的操作方法如下：

71

72

73

74 不可不知4：設定超連結色彩 當網頁上的超連結還未被點選時，文字是藍色的，拜訪過的超連結則變成紫色，其實您可以自己設定這些色彩，而不要用系統內定的顏色。

75 設定超連結色彩的操作方法如下：

76

77

78 完成後，畫面顯示如下：