变换影像连结.PPTVIP

第7章 設定超連結以暢行無阻 各種連結方式 超連結的其他設定 網站內部連結(1) 建立超連結文字 網站內部連結(2) 使用插入列的超連結功能 網站內部連結(3) 建立超連結圖片 網站外部連結(1) 建立連結方式 網站外部連結(2) 以新視窗顯示連結頁面 電子郵件連結(1) 利用插入列 電子郵件連結(2) 使用連結圖片 使用圖片好處是可以利用「動態gif影像」來加強頁面動態效果，讓整個頁面看起來更加活潑，同時也可藉由圖片的「替代文字」功能來說明此連結的主要用途。 檔案下載連結(1) 建立連結方式 檔案下載連結(2) 連結注意事項 如果所連結的檔案是屬於.jpg、.gif或是.png等圖片格式時，瀏覽器會將連結的圖片直接顯示於畫面上而不會出現「檔案下載」的視窗畫面。 像影片、音樂檔等媒體格式或是DOC及PDF文件格式，當我們點選下載連結時，若系統中已安裝對應的軟體時便會自動開啟，若是希望對方可以下載完成後再開啟時，可以事先將要下載的檔案壓縮成ZIP或RAR等壓縮檔格式。 錨點連結(1) 加入命名錨點 錨點連結(2) 建立錨點連結 影像地圖 建立影像連結區域 1.矩形連結區域 2.圓形連結區域 3.多邊形連結區域 取消連結底線 底線樣式的相關設定 超連結的文字格式 各項連結效果如下 快速建立超連結(1) 1.連結欄位的下拉清單 快速建立超連結(2) 2.利用「資源」面板 刪除超連結 應用範例-「好站相連」的頁面設計(1) 請開啟「班級網站」中的「好站相連」頁面「links.html」。 應用範例-「好站相連」的頁面設計(2) 設定網頁背景 執行「修改/頁面屬性」指令，再從設定視窗中選擇「frame_main_links.jpg」來做為背景影像，同時將重覆效果設定為「不重覆」。 應用範例-「好站相連」的頁面設計(3) 設計頁面表格 應用範例-「好站相連」的頁面設計(4) 建立超連結內容 7-2 超連結的其他設定 ? 執行「視窗/資源」指令，開啟資源面板。 下方的清單會顯示網站中現有的外部連結 點選此圖示 7-2 超連結的其他設定 ? 將清單中的連結直接拖曳到頁面中 ? 先拖曳選取連結文字範圍，再重新輸入文字即可。 7-2 超連結的其他設定 ? 1.先選取要去除超連結的文字 2.再將連結的文字內容刪除即可 7-2 超連結的其他設定 7-2 超連結的其他設定 ? 7-2 超連結的其他設定 ? 3.設定2列2欄，建立新表格。 1.按幾下Enter鍵，讓滑鼠游標移到此位置。 2.按下此鈕，建立表格。 7-2 超連結的其他設定 繼續插入影像檔案 7-2 超連結的其他設定 * * * * 7-1 各種連結方式 ? 2. 重新輸入六組連結文字 1. 開啟「班級網站」中的index.html網頁 7-1 各種連結方式 2.按下此鈕 1.選取「最新消息」連結文字 建立完成的超連結 7-1 各種連結方式 1.先點取要加入超連結的位置 2.再點取此圖示 7-1 各種連結方式 2.按此鈕確定 建立完成的超連結 1.輸入頁面上的連結文字及選擇連結位置 7-1 各種連結方式 開啟範例檔案7-1-1.html 7-1 各種連結方式 2.再點取此圖示，接著選擇news.html。 1.先點取「最新消息」影像 7-1 各種連結方式 ? 2.在連結的欄位內輸入網址「.tw」輸入完成後請按下「Enter」鍵 1.先點選要設定連結的影像 7-1 各種連結方式 ? 2.從下方的目標清單中選擇「_blank」 1.先點取要設定的影像 7-1 各種連結方式 2.再點取此圖示 1.先點取要加入電子郵件連結的位置 7-1 各種連結方式 ? 加入完成的電子郵件連結 2.再輸入電子郵件位置 1.先輸入要顯示於頁面上的連結文字 7-1 各種連結方式 ? 2.再從連結欄位中輸入「mailto:dreamweaver@」 1.先點取圖片檔案 7-1 各種連結方式 在IE中點選連結圖片後，畫面上會出現撰寫新郵件的視窗，而收件者就是剛才輸入的電子郵件位置。 7-1 各種連結方式 ? 2.再點取此圖示 1.先點取要設定連結的圖片 7-1 各種連結方式 建立完成的檔案連結 在瀏覽時點取此影像，就會出現檔案下載的視窗畫面。 7-1 各種連結方式 7-1 各種連結方式 ? 1.先點取要加入命名錨點的位置 2.再點取此圖示 7-1 各種連結方式 加入完成的命名錨點 輸入錨點名稱 7-1 各種連結方式 ? 1.先選取要建立連結的文字範圍 2.在連結位置輸入錨點名稱「#Ans1」 7-1 各種連結方式 ? 已建立超連結