加入超连结文字.ppt

* 新增 CSS 規則 * 新增 CSS 規則 設定完成後, 請按下確定鈕, 即可使用瀏覽器預覽網頁, 便可以看到當指標移到超連結文字上時, 字體上下皆出現水平線且色彩會改變： * 其他 3 種狀態說明 a:active：「滑鼠按下」 狀態―定義滑鼠按下超連結文字時的文字格式。 a:link：「滑鼠未經過」 狀態―定義滑鼠尚未移到超連結文字上的文字格式, 也就是一般情況下的超連結文字。 a:visited：「超連結已拜訪過」 狀態―定義已經拜訪過的超連結文字格式。 * 讓連結網頁開啟在新視窗 * 讓連結網頁開啟在新視窗 您可以用瀏覽器開啟 Ch06-03.html 來測試效果如何！ * 讓連結網頁開啟在新視窗 設定外部超連結時的小提醒 在同一個新視窗中顯示超連結 * 設定外部超連結時的小提醒 建議您在設定連到外部網站的超連結時, 不要把別人網頁的內容直接開啟在自己網站的頁框中, 以免讓瀏覽的人誤以為該網頁屬於您網站的一部份而涉及侵權的可能性。 * 設定外部超連結時的小提醒 * 在同一個新視窗中顯示超連結 當你按下在屬性面板目標列示窗中選擇 _blank 的超連結, 便會開啟一個新視窗來顯示網頁, 所以瀏覽者在瀏覽網頁的過程中, 有可能會開啟很多個瀏覽器視窗在桌面上, 這對電腦的執行效能而言, 將是很大的負擔。如果您體貼到這一點, 有一個變通方式, 就是在同一個新視窗中開啟超連結網頁。做法很簡單, 只要預先為新視窗取好一個名稱即可。 請開啟練習檔 Ex06-04.html, 我們來練習設定按下超連結圖片及文字後, 如何讓網頁的內容開啟在同一個新視窗中： * 在同一個新視窗中顯示超連結 * 在同一個新視窗中顯示超連結 接著請將航空公司分類下的其他超連結文字也按照上述方式, 在屬性面板的目標列示窗中輸入 _dynamic。然後預覽網頁, 就會發現這些連結網頁都會在同一個新視窗顯示。 * 6-4 加入 E-Mail 連結 在網頁中最常應用的電子郵件信箱超連結, 就是用於訪客意見回覆。除了提供一個和網友互動的管道外, 對於商業網站來說, 不但能提供產品諮詢服務、讓使用者投書, 也可蒐集到訪客信箱以推廣行銷活動...等等。所以網站中可能會有好幾個電子郵件信箱超連結, 若每個超連結都是不同的電子郵件信箱位址, 那倒還好, 若是只有共用一個電子郵件信箱, 就要在電子郵件信箱超連結中指定「 主旨」 , 才好為郵件分類。 加入電子郵件信箱超連結 * 加入電子郵件信箱超連結 我們要在首頁 (main.html) 最上方的連絡我們加入電子郵件信箱的超連結, 讓網站管理者能收到瀏覽者的意見回覆。為了方便辨識, 我們將郵件的主旨輸入為 網站意見。 在常用面板有一個電子郵件連結鈕, 讓我們不用自己手動打原始碼, 就可以做好電子郵件的超連結。下面就來示範如何使用, 請開啟練習檔 Ex06-05.html： * 加入電子郵件信箱超連結 * 加入電子郵件信箱超連結 * 6-5 製作影像地圖 影像地圖 (Image Map) 是網頁上常見的超連結技巧, 瀏覽者在圖片上的不同位置按下滑鼠左鈕, 就會分別連到不同的地方, 例如本書範例網站的日本簡介網頁(aboutjapan.html), 就有一個標準的影像地圖應用： * 製作影像地圖 * 製作影像地圖 利用 Dreamweaver 提供的影像地圖工具, 就能直接在圖片上劃分出不同的連結區域喔！底下將為您做示範。 * 製作影像地圖 建立影像地圖的連結區域 連結區重疊 修改與刪除影像地圖的連結區域 * 建立影像地圖的連結區域 製作影像地圖的步驟, 就是先在圖片上畫出想要的區域, 然後再賦予該區域一個超連結位址即可。請開啟練習檔 Ex06-06.html, 先選取日本地圖的圖片, 在屬性面板中按下多邊形連接區域鈕, 然後一個點、一個點地連接出藍色半透明的連結區域 (如果選擇的是形狀工具, 則是在圖片上以拉曳的方式做出連結範圍)： * 建立影像地圖的連結區域 * 在圖片上劃分連結區域時, 若不小心發生了連結區重疊的情況, 則重疊區域的連結位址將以較早設定的連結為準。例如下圖中,我們先設立了A連結區 (圓形連結區), 接著又設定了B連結區 (矩形連結區), 但 不小心讓 B 連結區 與A 連結區重疊, 那 麼當我們按下重疊 的區域時, 會以 A 的連結設定為準： 連結區重疊 * 修改與刪除影像地圖的連結區域 要修改或刪除已畫出的連結區域前, 請先按下屬性面板的 鈕, 讓指標變回箭頭樣式, 這樣才能選取連結區域, 而不會繼續畫出新的區域。 當連結區域的劃分有誤時, 請先選取該半透明區域, 再按下鍵盤上的 Delete 鍵, 即可刪除此連結區域。若要移動連結區域的位置, 請將指標移