旗標知識網 Banner Advertisement
     
 
Dreamweaver CS4 魔法書
Dreamweaver CS4 魔法書

作者:施威銘研究室著
書號:F9400
附件:附1片光碟片
定價:490 元
 
 
 
 
 
 
 
利用 iframe 內置框架, 做到在網頁中嵌入網頁的效果

利用 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></iframe> 這組標籤 (就是 iframe 的語法標籤):




STEP3 iframe 這麼小該怎麼呈現網頁呢?你可為 <iframe></iframe> 標籤撰寫大小、顏色等屬性的程式碼, 若你不熟悉相關的程式碼, 請選取 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 或其他的替代方案來排版。

 

 

 
Down Logo 旗 標 出 版 股 份 有 限 公 司   100 台北市中正區杭州南路一段15-1號19樓 TEL: 02-2396-3257
Copyright © 2005 Flag Publishing Co.,Ltd. All Rights Reserved    版權所有聯絡我們合作提案隱私權政策
 
現在購買《DSLR 完全探索》《數位相片編修聖經》《數位列印/輸出聖經》《數位相機Raw檔聖經》四書,超值優惠2299元 下載訂購單