第 7 章

Size: px

Start display at page:

Download "第 7 章"

鲜卢龚
4 years ago
Views:

1 加入超連結

2 本章重點加入內部超連結加入錨點 (Anchor) 加入外部超連結讓連結網頁開啟在新視窗加入連結讓瀏覽者下載檔案變換超連結文字狀態 2

3 操作方式插入列 > 常用面版插入功能 > 加入內部超連結加入錨點 (Anchor) 加入外部超連結讓連結網頁開啟在新視窗 ( 目標 _blank) 加入連結讓瀏覽者下載檔案變換超連結文字狀態 3

4 超連結設定方式內部超連結 : 連結到網站內部的超連結超連結是要連結到網站中其他網頁同一層級 : 直接連網頁, 如 content.htm 或 content.html 不同資料匣連結方式回上一層 :../index.htm#top 回上二層 :../../index.htm#top 或是同一網頁中的其他內容時用法 :#top(# 加上錨點的名稱 ) Dreamweaver 錨點 (Anchor) FrontPage 書籤 (bookmark) 外部超連結 : 連結到其他網站的超連結, 網站以外, 如 FTP WWW telnet 4

5 超連結設定方式插入 > 超連結內部連結同一網頁之連結外部連結網頁以外, 如 FTP WWW 插入 > 書籤 / 錨點 ( 同網站狀況下 ) 先建立書籤 / 錨點, 再使用超連結功能設定同一網頁書籤 / 錨點之超連結 :#top 另一網頁書籤 / 錨點之超連結 :index.htm#top 不同資料匣連結回上一層 :../index.htm#top 回上二層 :../../index.htm#top 5

6 加入內部超連結若超連結是要連結到網站中其他網頁, 或是跳到同一網頁中的某些段落內容時, 此種超連結稱為內部超連結, 亦即連結到網站內部的超連結而連結到其他網站的超連結則稱為外部超連結 6

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

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

9 加入超連結文字 9

10 加入超連結文字 10

11 加入超連結文字 11

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

13 加入超連結文字修改已含有超連結的文字, 是不會影響超連結內容的例如要將超連結文字改成英文 13

14 加入超連結文字 14

15 連結下拉選單屬性面板 / 連結下拉列示窗 : 記錄在連結欄曾連結的超連結資訊若要指定超連結時, 可以先在連結下拉列示窗中尋找是否有需要的超連結, 然後直接選取 15

16 為圖片加上超連結圖片加上超連結做法就和文字超連結一樣只要先選取圖片, 然後在屬性面板上的連結欄輸入要連結的網址即可 16

17 為圖片加上超連結 17

18 為圖片加上超連結 18

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

20 為圖片加上超連結 20

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

22 加入錨點 (Anchor) 網頁的內容很多時可在網頁的開頭加入網頁內容索引超連結可在網頁內加入錨點 (Anchor), 直接顯示某一部分網頁內容例如範例網站中的推薦行程網頁 (travel.html)( Ex06-02.html) 就是以加入錨點的方式完成的, 讓瀏覽者可以先按下某一天行程的超連結, 即直接往下跳到介紹該行程的內容 22

23 加入錨點 (Anchor) 23

24 加入錨點 (Anchor) 24

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

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

27 加入錨點 (Anchor) 27

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

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

30 加入外部超連結 30

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

32 外部超連結的設定方式以下列出一些外部超連結與啟動其他網路服務程式的超連結設定方式 32

33 讓連結網頁開啟在新視窗當用滑鼠按下超連結之後, 開啟一個新的瀏覽器視窗來顯示當按下在屬性面板目標列示窗中選擇 _blank 的超連結, 便會開啟一個新視窗來顯示網頁所以瀏覽者在瀏覽網頁的過程中, 有可能會開啟很多個瀏覽器視窗在桌面上, 這對電腦的執行效能而言, 是很大的負擔 33

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

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

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

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

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

39 在同一個新視窗中顯示超連結就是在同一個新視窗中開啟超連結網頁預先為新視窗取好一個名稱即可如在屬性面板的目標列示窗中為新視窗取好一個名稱 : _dynamic 然後預覽網頁, 就會發現這些連結網頁都會在同一個新視窗顯示 39

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

41 加入電子郵件信箱超連結加入電子郵件信箱超連結將郵件的主旨輸入為網站意見在常用面板 / 電子郵件連結鈕請開啟檔案 Ex06-05.html 41

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

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

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

45 讓瀏覽者下載檔案 45

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

47 變換超連結文字狀態一般超連結文字給人的印象便是在網頁中加了一條底線的超連結文字讓超連結文字顯得與眾不同, 例如讓超連結文字不出現底線, 或是當滑鼠指在超連結文字上時, 文字會變大等請用瀏覽器預覽完成檔 Ch06-08.html 讓超連結文字在滑鼠移到超連結文字上時, 底線會消失而且色彩會改變 47

48 變換超連結文字狀態 48

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

50 修改頁面屬性的設定請開啟練習檔案按下屬性面板 / 頁面屬性 / 切換到連結頁次 50

51 修改頁面屬性的設定在 Dreamweaver 中無法預覽所定義的超連結效果請按 F12 用瀏覽器預覽網頁 51

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

53 新增 CSS 規則利用 CSS 樣式設定更多的超連結文字變化效果請先展開 CSS 面板 53

54 新增 CSS 規則 54

55 新增 CSS 規則 55

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

57 4 種狀態說明 a:link: 滑鼠未經過狀態定義滑鼠尚未移到超連結文字上的文字格式, 也就是一般情況下的超連結文字 a:hover: 滑鼠經過狀態 a:active: 滑鼠按下狀態定義滑鼠按下超連結文字時的文字格式 a:visited: 超連結已拜訪過狀態定義超連結文字的超連結已經拜訪過的文字格式 57

投影片 1

投影片 1 何謂 CSS 本章摘要操作方式 CSS 規則定義交談窗的各頁次說明設定不會捲動的背景圖片 (bg-sample-fixed) 變換超連結文字狀態 (bg-sample-fixed) 修改頁面屬性的設定其他超連結狀態說明使用 CSS 樣式狀態說明 CSS 在網頁中的使用方式 1. 使用外部連結樣式表 2. 以內嵌方式, 在網頁的開頭定義 3. 局部套用 CSS 樣式當樣式衝突時的優先順序將 HTML