关于ap元素面板.pptVIP

7.1 關於 AP 元素 AP 元素 (絕對定位元素) 可讓您以重疊並自由擺放的方式來配置網頁內容，此元素可以包含文字、影像或任何可放在 HTML 文件中的內容。 7.1.1 什麼是 AP 元素 在 Dreamweaver 中，透過 插入 面板 版面 項目下的 繪製 AP Div 鈕，可以拖曳出一個外觀為矩形中空的方框，不但大小可以任意繪製，像是文字、影像與表格等網頁元件也都能輕易加入，完全不受傳統網頁編輯排版時的表格限制；而其中最重要的觀念即是：AP 元素，可獨立於整個網頁平面上，彼此任意重疊而不受網頁束縛。 7.1.2 AP 元素的 HTML 程式碼 AP 元素也稱為 apDiv，apDiv 包括位置、寬高及 Z 軸 (亦稱為堆疊順序) 屬性值，其中「# 」則是代表此 AP 元素的 ID 識別，每一個 AP 元素都有一個唯一 ID。 以下是 AP Div 的 HTML 程式碼樣本： 7.1.3 AP 元素的屬性設定 選取 AP 元素時，會顯示如下圖的 AP 元素 屬性 面板，也可在此 ID 欄位中以合適的名稱為 AP Div 重新命名。 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 元素 (apDiv2) 內會出現屬於該連結區的景點影像。 三、 設定容器文字 請利用 設定容器文字 行為指令設定：當滑鼠指標移到該連結區時，會於 AP 元素(apDiv3) 顯示該景點名稱與簡述文字。 四、 完成其他景點的行 為指令設計 請依照前面相同的操作方式，參考下表說明，將另外十一個景點的連結區分別加入 顯示隱藏元素、調換影像 與 設定容器文字 三個行為指令。 7.2.6 設定 AP 元素水平置中 回到 Dreamweaver，置中的動作要設置在存放地圖影像的 AP 元素 (apDav1)，因為所有的影像，甚至其他的 AP 元素也是