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】即可預覽。內嵌頁框的捲軸功能也不會影響主頁面。