線上地圖 - AP 元素的應用

2. 07 線上地圖- AP 元素的應用

3. 7.1 關於 AP 元素 • AP 元素 (絕對定位元素) 可讓您以重疊並自由擺放的方式來配置網頁內容，此元素可以包含文字、影像或任何可放在 HTML 文件中的內容。

4. 7.1.1 什麼是 AP 元素 • 在 Dreamweaver 中，透過 插入 面板 版面 項目下的 繪製 AP Div 鈕，可以拖曳出一個外觀為矩形中空的方框，不但大小可以任意繪製，像是文字、影像與表格等網頁元件也都能輕易加入，完全不受傳統網頁編輯排版時的表格限制；而其中最重要的觀念即是：AP 元素，可獨立於整個網頁平面上，彼此任意重疊而不受網頁束縛。

5. AP元素 可獨立於整個網頁平面上，彼此任意重疊。 AP元素 為空心的方框，可插入文字、影像與表格等網頁物件。

6. 7.1.2 AP 元素的 HTML 程式碼 • AP 元素也稱為 apDiv，apDiv 包括位置、寬高及 Z 軸 (亦稱為堆疊順序) 屬性值，其中「# 」則是代表此 AP 元素的 ID 識別，每一個 AP 元素都有一個唯一 ID。 • 以下是 AP Div 的 HTML 程式碼樣本： A P元素是使用 C S S來定義它的位置、寬高及堆疊順序。

7. 7.1.3 AP 元素的屬性設定 • 選取 AP 元素時，會顯示如下圖的 AP 元素 屬性 面板，也可在此 ID 欄位中以合適的名稱為 AP Div 重新命名。

8. 7.2 AP 元素與行為指令建置 • 想讓瀏覽網站的朋友更確切知道文章中所描述的景點位置嗎？想要簡單表現出此趟旅行的路線嗎？以地圖的方式整理、規納出所經過的景點以及回憶，是個既方便又令人印象深刻的設計。

9. 「線上地圖」單元中如果僅以一整張靜態的影像做為說明，在表現的形式上會顯得有些呆板，此作品將直接在地圖影像上面，利用連結區與圖層的方式，讓地圖更加活潑。「線上地圖」單元中如果僅以一整張靜態的影像做為說明，在表現的形式上會顯得有些呆板，此作品將直接在地圖影像上面，利用連結區與圖層的方式，讓地圖更加活潑。

10. 7.2.1 建立地圖的連結區 • 請進入「東京慢旅行」範例網站，開啟 <map.htm> 檔案。請先為頁面中地圖影像建立十二個連結區域，以便讓 Dreamweaver 知道該於何處執行相關動作。

11. 依照前面的操作步驟，參考下表說明，請完成另外十一個景點連結區的建置：依照前面的操作步驟，參考下表說明，請完成另外十一個景點連結區的建置：

13. 7.2.2 繪製 AP 元素 • AP 元素是一個非常方便的網頁製作工具，可以讓文字、影像、表格...等擺放在任何位置，還可以調整物件的階層位置、大小、顯示與否...等，讓網頁製作更加靈活生動。當插入 AP Div 時，Dreamweaver 會在 設計檢視 模式中顯示 AP Div 的外框。

14. 7.2.3 將 AP 元素調整為巢狀結構 一、 關於 AP 元素面板 • 網頁中的 AP 元素愈來愈多時，可選按功能表列 視窗 \AP元素 開啟 AP 元素 面板管理。

15. 網頁中的 AP 元素是由 Z 軸 決定堆疊順序，當 Z 軸 的值愈大時，表示堆疊的順序愈上層。網頁中第一個繪製出的 AP 元素，其 Z 軸 的值預設為 「1」，之後依序往上遞增。 • 利用拖曳圖層名稱的方式，可將該圖層拖曳至想要放置的順序後放開滑鼠，調整圖層順序。 二、 調整結構 • 前面建置的三個 AP 元素，因為有絕對定位的特性，所以必須調整一下結構：第一個放置地圖影像的 AP 元素 (apDiv1)，必須包含第二與第三個放置景點影像及文字的 AP 元素 (apDiv2、apDiv3)，以便後續調整地圖影像的位置時，景點影像及文字也會隨著移動。

16. 7.2.4 加入影像 • 接著要在 apDiv2 中加入景點影像，因為這個 AP 元素預設是隱藏的，所以請先選按功能表列 視窗 \ AP元素 開啟其相關面板，再選取 apDiv2 即可在編輯區顯示該 AP 元素。 • 請在 AP 元素 (apDiv2) 內加入一張影像。

18. 7.2.5 加入行為指令 • 這節中將利用三個行為指令設計滑鼠與連結區的親密關係： • 當滑鼠指標移至該景點連結區時，會於地圖下方出現該景點的相關影像、景點名稱與簡述文字。 • 當滑鼠指標於該景點連結區上按一下滑鼠左鍵時，則會連結至 「名勝景點」<scenicspots.htm> 頁面，並顯示相關景點的詳細介紹。

19. 在尚未選按時，於地圖右下方會出現操作方式的說明文字。在尚未選按時，於地圖右下方會出現操作方式的說明文字。 將滑鼠指標移至該景點連結區上方時，會出現相關的影像及文字。

20. 一、 顯示隱藏元素 • 以 「東京迪士尼樂園」 景點為例，請利用 顯示隱藏元素 行為指令設定：當滑鼠指標移到該連結區時 (onMouseOver)，會在 AP 元素 (apDiv2) 出現景點影像。

21. 二、 調換影像 • 請利用 調換影像 行為指令設定：在 AP 元素 (apDiv2) 內會出現屬於該連結區的景點影像。

22. 三、 設定容器文字 • 請利用 設定容器文字 行為指令設定：當滑鼠指標移到該連結區時，會於 AP 元素(apDiv3) 顯示該景點名稱與簡述文字。

23. 四、 完成其他景點的行 為指令設計 請依照前面相同的操作方式，參考下表說明，將另外十一個景點的連結區分別加入 顯示隱藏元素、調換影像 與 設定容器文字 三個行為指令。

25. 7.2.6 設定 AP 元素水平置中 • 回到 Dreamweaver，置中的動作要設置在存放地圖影像的 AP 元素 (apDav1)，因為所有的影像，甚至其他的 AP 元素也是放置在其中，所以只要該 AP 元素置中即可完成設定動作。 於CSS樣式 面板 全部 模式，選按style中的 #apDiv1再按 編輯樣式 鈕。

26. 7.2.7 設定 AP 元素的字型、背景、方框 • 完成前面 「線上地圖」 的內容與行為建置後，現在要再次透過 CSS 樣式為存放文字說明的 AP 元素 (apDav3) 設計字型、背景、方框屬性，為此頁面做最後的調整。 • 回到 Dreamweaver，首先選取 AP 元素 (apDav3)： 於 CSS樣式 面板 全部 模式，選按 style中的 #apDiv3再按 編輯樣式 鈕。

27. 習作園地 實作題 • 依照如下提示，完成拼圖遊戲的製作。 作品最左側有完成後的縮圖供玩遊戲的人參考，要完成此拼圖遊戲必需拖曳右側零亂的拼圖 (共九片) 至中間灰色虛線框中擺放，當該片拼圖接近正確位置時，放開滑鼠左鍵會有吸附的效果，讓該片拼圖可以正確的擺放。