互動局部捲動內容區
2020/05/12閱讀時間約 2 分鐘
網頁除了自動捲動的文字方式外，還可以製作出更捲動控制的內容，當滑鼠在捲動按鈕上時，內容就會互動捲動，這就是互動局部捲動內容區的製作。互動捲動區內容是固定座標位置，當無法固定位置時（如頁面置中），就需要藉由內嵌式頁框<iframe>的方式與版面整合。
STEP1.
開啟範例練習檔，已經處理完成版面內容的水平置中，內容區要插入互動捲動內容，包括向 上與向下按鈕，一共三個儲存格，請刪除此三張影像並將此三個儲存格合併為一，合併後的 儲存格尺寸為900X470(高為三張影像高總和)。
開啟範例練習檔，已經處理完成版面內容的水平置中，內容區要插入互動捲動內容，包括向 上與向下按鈕，一共三個儲存格，請刪除此三張影像並將此三個儲存格合併為一，合併後的 儲存格尺寸為900X470(高為三張影像高總和)。
STEP2.
新增dw06-iframe.html 空白頁面作為互動捲動內容區iframe內容頁，由頁面屬性設定頁面背景顏色為白色，切換至程式碼編輯狀態，刪除最上方<!doctype……>宣告程式碼，將HTML更改為傳統版本。
新增dw06-iframe.html 空白頁面作為互動捲動內容區iframe內容頁，由頁面屬性設定頁面背景顏色為白色，切換至程式碼編輯狀態，刪除最上方<!doctype……>宣告程式碼，將HTML更改為傳統版本。
STEP3.
接著拷貝參考檔案的相關CSS與javaScript貼入</head>之前:
接著拷貝參考檔案的相關CSS與javaScript貼入</head>之前:
繼續加入整個內容，注意<body>內需加入【onLoad="InitialiseScrollableArea( )"】，以及一共包含四個DIV的內容:
STEP4.
更改文字按鈕成預備的影像按鈕，請直接刪除 scroll up 文字並插入影像 dw06-up.jpg，同樣插入 dw06-down.jpg 取代 scroll down 文字，完成圖片式按鈕的安排。
更改文字按鈕成預備的影像按鈕，請直接刪除 scroll up 文字並插入影像 dw06-up.jpg，同樣插入 dw06-down.jpg 取代 scroll down 文字，完成圖片式按鈕的安排。
STEP5.
儲存檔案預覽圖片按鈕可控制內容動，但因圖片尺寸所以還需要整理 AP 元素的設定與 CSS 樣式。程式碼內反選【<div id="divContainer">】，再由設計畫面上選到該AP元素，即可由屬性控制板上修改設定上:75、高:320 讓內容區位置更準確，
儲存檔案預覽圖片按鈕可控制內容動，但因圖片尺寸所以還需要整理 AP 元素的設定與 CSS 樣式。程式碼內反選【<div id="divContainer">】，再由設計畫面上選到該AP元素，即可由屬性控制板上修改設定上:75、高:320 讓內容區位置更準確，
以及更改修正下方撥放器的<div>上: 400，讓整個撥放器位置更正確。
再由 CSS 設計工具控制板上點取來源<style>、選取器#divContent ，設定 Padding/Right:30px、Padding/Left:30px；儲存檔案按下【F12】預覽，所更內容即是最準 確呈現。
STEP6.
回到dw06.html，確認由標於內容區內，加入<iframe>標籤與相關內容:
回到dw06.html，確認由標於內容區內，加入<iframe>標籤與相關內容:
相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用
為什麼會看到廣告
留言0
查看全部