0707

線上地圖線上地圖 --AP AP 元素的應用元素的應用

7.1 7.1 關於 關於 AP AP 元素元素

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

7.1.1 什麼是 AP 元素

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

AP 元素 為空心的方框，可插入文字、影像與表格等網頁物件。

AP 元素 可獨立於整個網頁平面上，彼此任意重疊。

7.1.2 AP 元素的 HTML 程式碼• AP 元素也稱為 apDiv ， apDiv 包括位置、寬高及 Z 軸

( 亦稱為堆疊順序 ) 屬性值，其中「 # 」則是代表此 AP 元素的 ID 識別，每一個 AP 元素都有一個唯一 ID 。

• 以下是 AP Div 的 HTML 程式碼樣本：

A P 元素是使用 C S S 來定義它的位置、寬高及堆疊順序。

7.1.3 AP 元素的屬性設定• 選取 AP 元素時，會顯示如下圖的 AP 元素 屬性 面板，

也可在此 ID 欄位中以合適的名稱為 AP Div 重新命名。

7.2 AP 7.2 AP 元素與行為指令建置元素與行為指令建置

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

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

7.2.1 建立地圖的連結區• 請進入「東京慢旅

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

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

7.2.2 繪製 AP 元素• AP 元素是一個非常方便的網頁製作工具，可以讓文字、

影像、表格 ... 等擺放在任何位置，還可以調整物件的階層位置、大小、顯示與否 ... 等，讓網頁製作更加靈活生動。當插入 AP Div 時， Dreamweaver 會在 設計檢視 模式中顯示 AP Div 的外框。

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

AP 元素 開啟 AP 元素 面板管理。

網頁中的 AP 元素是由 Z 軸 決定堆疊順序，當 Z 軸 的值愈大時，表示堆疊的順序愈上層。網頁中第一個繪製出的 AP 元素，其 Z 軸 的值預設為 「 1 」，之後依序往上遞增。

利用拖曳圖層名稱的方式，可將該圖層拖曳至想要放置的順序後放開滑鼠，調整圖層順序。

二、 調整結構• 前面建置的三個 AP 元素，因為有絕對定位的特性，所以必須調整一下結構：第一個放置地圖影像的 AP 元素 (apDiv1) ，必須包含第二與第三個放置景點影像及文字的 AP 元素 (apDiv2 、 apDiv3) ，以便後續調整地圖影像的位置時，景點影像及文字也會隨著移動。

7.2.4 加入影像• 接著要在 apDiv2 中加入景點影像，因為這個 AP 元素預

設是隱藏的，所以請先選按功能表列 視窗 \ AP 元素 開啟其相關面板，再選取 apDiv2 即可在編輯區顯示該 AP 元素。

• 請在 AP 元素 (apDiv2) 內加入一張影像。

7.2.5 加入行為指令

• 這節中將利用三個行為指令設計滑鼠與連結區的親密關係：當滑鼠指標移至該景點連結區時，會於地圖下方出現該景

點的相關影像、景點名稱與簡述文字。當滑鼠指標於該景點連結區上按一下滑鼠左鍵時，則會連

結至 「名勝景點」 <scenicspots.htm> 頁面，並顯示相關景點的詳細介紹。

在尚未選按時，於地圖右下方會出現操作方式的說明文字。

將滑鼠指標移至該景點連結區上方時，會出現相關的影像及文字。

一、 顯示隱藏元素• 以 「東京迪士尼樂園」 景點為例，請利用 顯示隱藏元

素 行為指令設定：當滑鼠指標移到該連結區時 (onMouseOver) ，會在 AP 元素 (apDiv2) 出現景點影像。

二、 調換影像• 請利用 調換影像 行為指令設定：在 AP 元素 (apDiv

2) 內會出現屬於該連結區的景點影像。

三、 設定容器文字• 請利用 設定容器文字 行為指令設定：當滑鼠指標移到該

連結區時，會於 AP 元素 (apDiv3) 顯示該景點名稱與簡述文字。

四、 完成其他景點的行 為指令設計• 請依照前面相同的操作方

式，參考下表說明，將另外十一個景點的連結區分別加入 顯示隱藏元素、調換影像 與 設定容器文字 三個行為指令。

7.2.6 設定 AP 元素水平置中• 回到 Dreamweaver ，置中的動作要設置在存放地圖影像

的 AP 元素 (apDav1) ，因為所有的影像，甚至其他的 AP 元素也是放置在其中，所以只要該 AP 元素置中即可完成設定動作。

於 CSS 樣式 面板 全部 模式，選按 style 中的 #apDiv1 再按 編輯樣式 鈕。

7.2.7 設定 AP 元素的字型、背景、方框• 完成前面 「線上地圖」 的內容與行為建置後，現在要再次透過 CSS 樣式為存放文字說明的 AP 元素 (apDav3) 設計字型、背景、方框屬性，為此頁面做最後的調整。

• 回到 Dreamweaver ，首先選取 AP 元素 (apDav3) ：

於 CSS 樣式 面板 全部 模式，選按 style 中的 #apDiv3 再按 編輯樣式 鈕。

習作園地實作題• 依照如下提示，完成拼圖遊戲的製作。

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