互動局部捲動內容區

網頁除了自動捲動的文字方式外，還可以製作出更捲動控制的內容，當滑鼠在捲動按鈕上時，內容就會互動捲動，這就是互動局部捲動內容區的製作。互動捲動區內容是固定座標位置，當無法固定位置時（如頁面置中），就需要藉由內嵌式頁框iframe的方式與版面整合。

STEP1. 開啟範例練習檔，已經處理完成版面內容的水平置中，內容區要插入互動捲動內容，包括向 上與向下按鈕，一共三個儲存格，請刪除此三張影像並將此三個儲存格合併為一，合併後的 儲存格尺寸為900X470(高為三張影像高總和)。

STEP2. 新增dw06-iframe.html 空白頁面作為互動捲動內容區iframe內容頁，由頁面屬性設定頁面背景顏色為白色，切換至程式碼編輯狀態，刪除最上方!doctype……宣告程式碼，將HTML更改為傳統版本。

STEP3. 接著拷貝參考檔案的相關CSS與javaScript貼入/head之前:

繼續加入整個內容，注意body內需加入【onLoad="InitialiseScrollableArea( )"】，以及一共包含四個DIV的內容:

STEP4. 更改文字按鈕成預備的影像按鈕，請直接刪除 scroll up 文字並插入影像 dw06-up.jpg，同樣插入 dw06-down.jpg 取代 scroll down 文字，完成圖片式按鈕的安排。

STEP5. 儲存檔案預覽圖片按鈕可控制內容動，但因圖片尺寸所以還需要整理 AP 元素的設定與 CSS 樣式。程式碼內反選【div id="divContainer"】，再由設計畫面上選到該AP元素，即可由屬性控制板上修改設定上:75、高:320 讓內容區位置更準確，

以及更改修正下方撥放器的div上: 400，讓整個撥放器位置更正確。

再由 CSS 設計工具控制板上點取來源style、選取器#divContent ，設定 Padding/Right:30px、Padding/Left:30px；儲存檔案按下【F12】預覽，所更內容即是最準 確呈現。

STEP6. 回到dw06.html，確認由標於內容區內，加入iframe標籤與相關內容:

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

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