iFrame 內頁框版面切割與應用

iFrame 內頁框版面是可於頁面上任何可安排內容的區域，如任意表格、儲存格之內均可安排尺寸固定的局部捲動瀏覽內容，讓使用者可單獨瀏覽頁面局部內容，版面安排上也更為靈活， 尤其是安排特殊瀏覽互動效果時亦為不可或缺的重要技巧。

STEP1. 在 Photoshop 中開啟「dw02.psd」為預先已在Photoshop 所設計好的網站內頁版面，使用切片選取工具即可檢視切片內容，在版面上，切片03 是要組合內頁框的區域。

STEP2. 請執行「檔案」→「轉存」→「儲存為網頁用」指令，接著使用切片選取工具，複選上方二個切片，按下「儲存」，設定『檔名：dw02.html』、「存檔類型」為 HTML 和影像、「切片」為全部切片，儲存出網頁格式與影像圖檔至練習資料夾內。

STEP3. 回到 Dreamweaver 直接開啟所儲存的 HTML 頁面dw02.html，頁面中已包含組合所有影像切片的隱形表格與影像，中央內容區影像尺寸為寬：650、高：450，選取表格設定『對齊：置中對齊』。

STEP4. 新增空白頁面dw02-iframe.html，於頁面中插入 1 列、1 欄、寬度 600（略小於650）、置中對齊之隱形表格，於表格內置入文字圖片內容，儲存檔案此頁面即為內嵌式頁框內容。

STEP5. 回到dw02.html，點取要嵌入內嵌式頁框的位置，目前此位置內是一張預留的圖片，請點取該圖片檢視圖片寬與高（650╳450）。點取該圖片，切換至程式碼編輯畫面，將原圖片 img內容置換為【iframe…../iframe】正確內容。

iframe設定『Source』iframe 內容來源網頁（dw02-iframe.html）、『height(高)：450（原影像高）、width(寬)：650（原影像寬）、『Scroll』捲軸：自動（auto）。

STEP6. 儲存檔案完成內頁框設定，內頁框區呈現灰色標示，按下【F12】即可預覽。內嵌頁框的捲軸功能也不會影響主頁面。

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

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