[轉貼自]http://www.flag.com.tw/book/cento-5105.asp?bokno=F9400&id=544
利用 iframe 內置框架, 做到在網頁中嵌入網頁的效果
不想用頁框將網頁割得支離破碎, 又想製作內嵌網頁的效果？就交給 iframe 來幫你吧！
有時候我們只想在網頁的某部分嵌入其他網頁的內容, 如果為此就動用頁框來分割網頁, 一口氣將網頁切割成 3、4 個複雜的頁框, 還外帶一個頁框組, 反而增加了編輯的複雜度。這時候就可以改用 iframe 來呈現網頁的內容。
認識 iframe 的妙用
iframe 是「Inline Frame」(內置框架) 的簡稱, 它和前面介紹的頁框差別在於, 使用 iframe 可以直接在網頁裡插入一個方形區域, 讓你嵌入其他網頁的內容, 不必再將網頁切割成多個頁框。你可開啟範例網站的日本寫真館頁面, 下方頁框中其實就是運用 iframe 來顯示圖片選單的超連結目標：
使用 iframe 嵌入網頁, 便可以控制內嵌網頁的大小, 假如嵌入的網頁資料很長, 只要在 iframe 周圍加上捲軸便可以讓使用者瀏覽, 而不會破壞版型的設計。如下圖所示：
（泡泡）加上捲軸來捲動內容, 便不會因網頁過長而破壞版面
!!! 以捲軸控制內嵌網頁的大小是頁框和 iframe 都有的功能。
插入 iframe 來嵌入網頁
下面我們就實際來練習建立這個效果。開啟 Ex16-06.html, 我們已經製作好網頁中需要的選單和圖片, 並在圖片旁插入一個空白的 Div 區塊, 接下來就要在該區塊內插入一個 iframe, 之後就可以讓圖片選單的目標網頁開啟在該 iframe 裡面。
STEP 1將插入點置於空白區塊內, 開啟插入面板並切換到版面頁次, 如下操作：
STEP 2插入點出現了一個灰色方塊, 就是我們插入的 iframe, 同時 Dreamweaver 會自動切換到分割模式, 讓你檢視我們插入的 這組標籤 (就是 iframe 的語法標籤)：
STEP3 iframe
STEP 4 接下來就可以透過設定, 讓左側選單中的圖片超連結目標顯示在 iframe 內了。做法和顯示在頁框中完全相同, 上個步驟我們已經將 iframe 命名為 "content", 便可以如下指定給圖片：
STEP 5 請比照相同的方式分別為其他按鈕設定超連結目標 (japanphotos/02.html、03.html、04.html) 並指定開啟在 "content" 內, 結果可參考 Ch16-06.html。 
到目前為止我們已介紹過許多排版網頁的方法, 包括 CSS、頁框、iframe…等, 要製作網站時, 建議依自己網站的需求, 適當地整合各種適合的排版方式來編排。例如當你的客戶使用太舊版本的瀏覽器 (如 IE 5.0 以前版本), 可能會看不到頁框的內容, 你就可以選擇 CSS 或其他的替代方案來排版。
留言列表
