Dreamweaver Dreamweaver 6- URL URL URL http:// http://www.surpro.com.tw/ch08/images/logo.jpg 6-
6 設 超連結 images/logo.jpg Dreamweaver file:// file:// / /ch08/images/logo.jpg HTML 定網頁間的6-6-- ch06 ch06 - ch06 6-
開啟 6-.html 網頁 選取畫面中的 美東與加拿大 按 屬性 面板上的 鈕 再按一下 連結 屬性右側的 瀏覽檔案 圖示 出現 選取檔案 對話方塊 找到 美加 網頁 按 確定 鈕 4 屬性 面板中的 連結 方塊中會顯示 美加.html 且剛才所選取的文字下方 會顯示底線 字體顏色也會變成藍色 預設的超連結色彩 表示超連結已 經建立成功 6-4 ACU06600.indb 4 0//7 下午 0:6:50
5 在 目標 下拉式清單中選擇 _self 表示超連結目標在原網頁中顯示 6 顯示超連結底線 設定網頁間的超連結 表示已設定超連結 6 參考步驟 ~5 選取 中國北疆 建立連結到 中國 網頁的超連結 可以 改用 指向檔案 方式設定超連結的網頁 6-5 ACU06600.indb 5 0//7 下午 0:6:50
7 儲存檔案之後 按 鍵在瀏覽器中預覽 將滑鼠游標移到設有超連結的文 字上面時 游標會變成一隻 小手 按下滑鼠左鍵 會顯示連結的目標 網頁 說明 屬性 面板中的 目標 屬性是用來設定開啟超連結頁的方式 例如 _self 表示在同 一視窗中載入連結的網頁 此為預設值 若沒有設定會直接採用 詳細說明請參閱 6- 節 方法 插入 面板 常用 類別中的 超連結 指令圖示 可以直接用來產生超連結文字 先將插入點游標移到要插入超連結文字的位置 點選 插入 面板 常用 > 超連 結 指令 6-6 ACU06600.indb 6 0//7 下午 0:6:5
6 設定網頁間的超連結 出現 超連結 對話方塊 輸入要顯示的 文字 設定 連結 的目標檔案 等屬 性 完成後按 確定 鈕 說明 如果單純修改包含超連結的文字內容 不會影響到原先設定的超連結目標 若要移 除超連結的設定 請清除 屬性 面板 連結 屬性的內容即可 若要變更預設的超連結 文字色彩 請按 屬性 面板上的 頁面屬性 鈕 在 頁面屬性 對話方塊中設定 接下頁 6-7 ACU06600.indb 7 0//7 下午 0:6:5
6-- 建立圖片超連結 如果覺得使用文字超連結不夠活潑 也可以使用圖片當成超連結的起點 圖 片超連結的設定方式與文字一樣 只不過將選取的對象由文字換成圖片罷了 開啟 6-.html 網頁 選取畫面中的 肯亞之旅 圖片 在 屬性 面板上 中設定 連結 屬性 肯亞.html 在 替代 屬性方塊中輸入 肯亞野生動物 再將 目標 屬性改成 _self 4 6-8 ACU06600.indb 8 0//7 下午 0:6:5
點選 南極企鵝 圖片 以 指向檔案 的方式 連結到 南極.html 於 替代 方塊中輸入 南極企鵝 再將 目標 改成 _self 設定網頁間的超連結 6 4 4 儲存檔案之後 按 鍵在瀏覽器中預覽 將滑鼠游標移到設有超連結的圖 片上面時 游標會變成一隻 小手 按下滑鼠左鍵 會顯示連結的目標 網頁 接下頁 6-9 ACU06600.indb 9 0//7 下午 0:6:5
說明 通常圖片在網頁中下載的速度較慢 所以時常會看到文字已經顯示完畢 但是 圖片還沒有出現的情形 這就是為什麼要設定 替代 文字的用意 圖片尚未出現前先顯示替代文字 6-- 6-- 節無論是設定文字或圖片超連結 都是連結到同一網站中的其他 網頁 事實上也可以超連結到外部網站 只要在 連結 方塊中輸入對應的網站 網址即可 但是別忘了要加上 http:// 字樣哦 6-0 ACU06600.indb 0 0//7 下午 0:6:5
6-- 設定錨點 如果要超連結的目標 是連結到相同頁面中的某一個段落 這時可以在目標 成指定的路徑 此連結的用法 在十分複雜或特別冗長的網頁中成效特別顯著 進入這小節的範例操作之前 請先開啟 6-.html 網頁 網頁中包含多個主 題 用來介紹各國風景 若希望使用者在點選每一個主題時 可以直接跳到對應 主題的起始行 然後在每一個主題最後再做一個按鈕 以便瀏覽者點選此鈕可以 回到網頁視窗的最上方 6 設定網頁間的超連結 網頁的連結點建立數個類似索引的標記 這個標記稱為 錨點 提供來源網頁當 說明 點選 檢視 > 視覺輔助 > 隱藏元素 指令 可顯示 錨點 標記 方便檢視設定結果 請開啟 6-.html 網頁 將網頁捲動到主題表格的開始 並將插入點置於 左上角第一個儲存格 按 插入 面板 常用 > 命名錨點 指令 接下頁 6- ACU06600.indb 0//7 下午 0:6:5
出現 命名錨點 對話方塊 在 錨 點名稱 方塊中輸入 area 按 確定 鈕 此時原插入點游標所在位置是出現 錨點 圖示 接著 將游標移到第一個 主題的開頭 按 插入 面板 常用 > 命名錨點 指令插入新的錨點 設定 錨點 名稱 為 guga area 錨點 4 6- ACU06600.indb 0//7 下午 0:6:54
4 參考步驟 在其他主題前面加上對應的錨點 5 回到頁面上方 選取第一張圖片下面的名字 例如 瓜地馬拉與加拉巴哥群 內容會跳到 瓜地馬拉與加拉巴哥群島 錨點的位置 6 設定網頁間的超連結 島 在 屬性 面板的 連結 方塊中輸入 #guga 表示當滑鼠按下時 網頁 guga 錨點 6 重複步驟 5 將其他主題圖片的文字分別設定對應的錨點 6- ACU06600.indb 0//7 下午 0:6:54
6-6 6-6.html 6-4
設定網頁間的超連結 6 4 繪製完成後會顯示 連結區 屬性 按 連結 屬性右側的 瀏覽檔案 圖示 在 選取檔案 對話方塊中 選擇 美加 按 確定 鈕 接下頁 6-5 ACU06600.indb 5 0//7 下午 0:7:00
4 5 將 目標 屬性設成 _self 再將 地圖 屬性的 Map 字樣改成 美加 第一個連 結焦點設定就完成啦 6 使用 圓形連結區域工具 及 多邊形連結區域工具 在不同的區域也拖 曳繪出要建立超連結的區域 並設定 連結 目標 及 地圖 屬性 6-6 ACU06600.indb 6 0//7 下午 0:7:00
7 繪製連結區域後 可以點選 指標連結區域工具 即能拖曳週整連結區域 淺藍色的透明區 的位置 若是要重新繪製 可選取連結區域後 按 鍵刪除 再重新繪製 設定網頁間的超連結 6 8 設定完畢之後 請記得將檔案儲存 按 鍵在瀏覽器中預覽 接下頁 6-7 ACU06600.indb 7 0//7 下午 0:7:0
已在同一張影像上 建立不同區域的超連結 說明 之所以要設定 地圖 屬性的內容 是為了區分網頁影像地圖中的多個連結區域 以作為 HTML 程式碼辨識之用 而這些名稱不可重複 如果是使用 多邊形連結區域工具 所繪製的連結區域 點選該連結區後 按 住控制點拖曳 可以調整連結區域的範圍 繪製連結區域時 如果產生圖形重疊的現象 系統會採用第一個設定的連結為 目標 6-8 ACU06600.indb 8 0//7 下午 0:7:0