- Dreamweaver 使用手冊
- 簡介
- Dreamweaver 和 Creative Cloud
- Dreamweaver 工作區和檢視
- 設定網站
- 管理檔案
- 版面和設計
- CSS
- 頁面內容和資產
- 設定頁面屬性
- 設定 CSS 標題屬性和 CSS 連結屬性
- 處理文字
- 尋找和取代文字、標籤和屬性
- DOM 面板
- 在即時檢視中編輯
- 在 Dreamweaver 中進行文件編碼
- 在文件視窗中選取並檢視元素
- 在屬性檢視窗中設定文字屬性
- 檢查網頁拼字
- 在 Dreamweaver 中使用水平線
- 在 Dreamweaver 中新增和修改字體組合
- 使用資源
- 在 Dreamweaver 中插入和更新日期
- 在 Dreamweaver 中建立和管理最愛資源
- 在 Dreamweaver 中插入及編輯影像
- 新增媒體物件
- 在 Dreamweaver 中加入視訊
- 插入 HTML5 視訊
- 插入 SWF 檔
- 新增音效效果
- 在 Dreamweaver 中插入 HTML5 音效
- 使用圖庫項目
- 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
- 連結和導覽
- jQuery Widget 和效果
- 撰寫網站程式碼
- 關於在 Dreamweaver 中撰寫程式碼
- Dreamweaver 的程式碼撰寫環境
- 設定程式碼撰寫偏好設定
- 自訂程式碼色彩標示
- 撰寫和編輯程式碼
- 程式碼提示和程式碼完成
- 收合和展開程式碼
- 利用片段重複使用程式碼
- Lint 程式碼
- 最佳化程式碼
- 在設計檢視中編輯程式碼
- 使用頁面的檔頭內容
- 在 Dreamweaver 中插入伺服器端包含
- 在 Dreamweaver 中使用標籤資料庫
- 匯入自訂標籤到 Dreamweaver
- 使用 JavaScript 行為 (一般說明)
- 套用內建的 JavaScript 行為
- 關於 XML 與 XSLT
- 在 Dreamweaver 中執行伺服器端 XSL 轉換
- 在 Dreamweaver 中執行用戶端 XSL 轉換
- 在 Dreamweaver 中新增 XSLT 字元實體
- 格式化程式碼
- 跨產品工作流程
- 範本
- 行動裝置和多螢幕
- 動態網站、網頁和網站表單
- 以視覺化方式建立應用程式
- 測試、預覽和發佈網站
- 疑難排解
了解如何在 Dreamweaver 中使用影像地圖,為您的網站建立互動式連結區.
影像地圖指的是已分成數個稱為連結區之區域的影像,當用戶按一下連結區時,就會發生動作 (例如,開啟新檔案)。
客戶端影像地圖會在 HTML 文件中儲存超文字連結資訊,不像伺服器端影像地圖是在個別的地圖檔案中儲存。當網頁瀏覽者按一下影像中的連結區時,就會將相關的 URL 直接傳送給伺服器。這讓用戶端影像的地圖比伺服器端影像的地圖還快,因為伺服器不需要轉譯瀏覽者所按的位置。
Dreamweaver 不會變更現有文件中對伺服器端影像地圖的參考,您可以在同一個文件中使用客戶端影像地圖和伺服器端影像地圖。但是,可同時支援兩種影像地圖類型的瀏覽器會優先處理用戶端影像地圖。若要在文件中包含伺服器端影像地圖,您必須撰寫適當的 HTML 程式碼。
插入客戶端影像地圖
當您插入客戶端影像地圖時,就會建立連結區,然後定義用戶按一下連結區時會開啟的連結。
您可以建立多個連結區,但是它們仍屬於同一個影像地圖。
-
在「文件」視窗中,選取影像。
-
在「屬性」檢視窗中,按一下右下角的展開器箭頭,查看所有屬性。
-
在「地圖」欄位中,輸入影像地圖的唯一名稱。如果您正在同一文件中使用多個影像地圖,請確定每個地圖都有唯一的名稱。
-
若要定義影像地圖區,請執行下列其中一項作業:
選取圓形工具 並拖曳指標滑過影像,建立圓形連結區。
選取矩形工具 並拖曳指標滑過影像,建立矩形連結區。
選取多邊形工具 並按一下每一個端點,定義不規則形狀的連結區。按一下箭頭工具關閉形狀。
在您建立連結區之後,就會出現連結區「屬性」檢視窗
-
在「連結」欄位中,按一下資料夾圖示,以瀏覽並選取您希望在用戶按一下連結區時開啟的檔案,或是輸入路徑。
-
在「目標」下拉式清單中,請選取要在其中開啟檔案的視窗,或輸入其名稱。
您在目前文件中命名的所有頁框名稱,都會在彈出式清單中出現。如果指定了不存在的頁框,連結頁面會在含有您所指定名稱的新視窗中載入。您也可以從下列保留的目標名稱中選取:
- _blank 會在新的、未命名的瀏覽器視窗中載入連結的檔案。
- _parent 會在上一層頁框組或包含連結的頁框之視窗中載入連結的檔案。如果包含連結的頁框不是巢狀的,則會在完整的瀏覽器視窗中載入連結的檔案。
- _self 會在與連結所在的同一個頁框或視窗中,載入連結的檔案。這個目標是預設值,因此您通常不需要指定它。
- _top 會在完整的瀏覽器視窗中載入連結的檔案,然後移除所有頁框。
- _new 會在新的瀏覽器視窗中載入連結的檔案。
註解:除非選取的連結區包含連結,否則目標選項無法使用。
-
在「替代」方塊中,鍵入要顯示在純文字瀏覽器或手動下載影像之瀏覽器中的替代文字。有些瀏覽器會在用戶移動指標滑過連結區時,顯示這個文字做為工具提示。
-
重複步驟 4 至 7 便能在影像地圖中定義其他連結區。
-
當您完成影像對應時,請在文件的空白區中按一下以變更「屬性」檢視窗。
修改影像地圖連結區
您可以輕易地編輯在影像地圖中建立的連結區。您可以移動連結區、調整連結區大小,或在絕對定位元素 (AP 元素) 中前後移動連結區。
您也可以將含連結區的影像在文件之間複製,或複製影像中的一或多個連結區,再貼到另一個影像中,與影像相關的連結區也會被複製到新文件中。
選取影像地圖中的多個連結區
-
使用指標連結區工具選取連結區。
-
請執行下列其中一項作業:
Shift+按一下您要選取的其他連結區。
按 Control+A 鍵 (Windows) 或 Command+A 鍵 (Macintosh) 來選取所有連結區。
移動連結區
-
使用指標連結區域工具來選取連結區。
-
請執行下列其中一項作業:
將連結區拖曳到新區域。
使用 Control+方向鍵,將連結區往選取的方向移動 10 個像素。
使用方向鍵將連結區往選取的方向移動 1 個像素。
調整連結區大小
-
使用指標連結區域工具 選取連結區。
-
拖曳連結區選取器控制點,變更連結區的大小或形狀。