水平滑動切換顯示內容

可應用在 AP 元素(DIV)內的影像水平滑動切換，搭配巢狀 AP 元素(DIV)與內嵌式頁框，媲美 Animate 互動瀏覽影像效果。

在 Dreamweaver 中，要加入 AP DIV 除了設定 CSS 外，更簡單的方式是使用繪製 AP DIV 工具， 繪製出 AP DIV 後就可以在 AP DIV 範圍內插入圖片、文字、表格，並且可以針對 AP DIV 進行相關屬性的設定。Dreamweaver CC 版本已經無繪製 AP DIV 工具，為了方便可以將舊版的繪製 AP DIV 工具檔案置入 CC 版本的資料夾之中， 即可繼續使用。切換插入工具列(視窗>插入)的類別為『最愛』，準備開始來繪製 AP DIV 於頁面上。

STEP1.
開啟範例練習檔，內容區左側按鈕來控制右側內容圖片滑動，此二影像儲存格將合併成一個內頁框範圍。

新增空白頁面dw07-iframe.html，設定頁面屬性邊界均為0，插入影像3-2-4_03.jpg、3-2-4_04.jpg，準備好內頁框內容頁。

STEP2.
繪製 AP 元素為 apDiv1，設定寬:2400px(600X4)、高:340px，在 AP 元素上加入要滑動的四張影像dw07-p1.jpg ~ dw07-p4.jpg；

再繪製第二個 AP 元素為 apDiv2，設定座標位置為左:300px、上:0px、寬 600px、高 340px（同單張影像尺寸），覆蓋於 apDiv1 之上，apDiv2 將作為控制 apDiv1 顯示的範圍使用。

STEP3.
組合兩個為巢狀 AP 元素，切換至程式碼選取【<div id=”apDiv1”……</div>】剪下並貼入<div id=”apDiv2”……>之內(</div>之前)；

點取 apDiv1，修正 apDiv1 的座標 左 0、上 0，完成apDiv1 於 apDiv2 之內的巢狀 AP 元素安排。

STEP4.
點取 apDiv2 設定「溢位：hidden、裁切：左 0 上 0 右 600 下 340」，藉由巢狀 AP 元 素與溢位設定將包含影像的 apDiv1 顯示 範圍控制於 apDiv2 之內，僅顯示單張影 像內容。

STEP5.
修正 AP 元素 CSS 配合 AP 元素滑動擴充元件使用，請複選上方#apDiv1 的 CSS 內
【position:absolute;……z-index:1;】複製，至下方<div id=”apDiv1”>標籤內加上【style=””】，將複製的 CSS 屬性貼入雙引號之間。

STEP6.
為左側影像按鈕上加上影像地圖一共四個:

由dw07-hScrollDiv.html內複製相關 javaScript，並回到dw07-iframe.html頁面內的</head>之前貼上:

點取影像地圖切換至程式碼編輯，加入【onclick="flevSlideDiv('apDiv1',0,0,10,0,0)"】，繼續貼至下方另外三個影像地圖標籤內，更 改控制座標左 Left 的值各為-600、-1200 與-1800 即可。（每張圖寬 600，依序設定 AP 元素向左移動後的座 標位置）

STEP9.
最後回到「dw07.html」，「dw07-iframe.html」以內嵌式 頁框組合回來。dw07.html頁面上各點取內容區二影像並直接刪除，並將二儲存格合併為一，確定滑鼠游標在要插入內頁框儲存格內，加入<iframe>內容即可。

儲存檔案按下【F12】瀏覽，即可由左方按鈕控制以AP 元素承載之滑動動態移動位置。

【檢視範例】【下載範例】

相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用