iFrame 內頁框版面切割與應用
閱讀時間約 2 分鐘
iFrame 內頁框版面是可於頁面上任何可安排內容的區域，如任意表格、儲存格之內均可安排尺寸固定的局部捲動瀏覽內容，讓使用者可單獨瀏覽頁面局部內容，版面安排上也更為靈活， 尤其是安排特殊瀏覽互動效果時亦為不可或缺的重要技巧。
STEP1.
在 Photoshop 中開啟「dw02.psd」為預先已在Photoshop 所設計好的網站內頁版面，使用切片選取工具即可檢視切片內容，在版面上，切片03 是要組合內頁框的區域。
在 Photoshop 中開啟「dw02.psd」為預先已在Photoshop 所設計好的網站內頁版面，使用切片選取工具即可檢視切片內容，在版面上，切片03 是要組合內頁框的區域。
STEP2.
請執行「檔案」→「轉存」→「儲存為網頁用」指令，接著使用切片選取工具，複選上方二個切片，按下「儲存」，設定『檔名：dw02.html』、「存檔類型」為 HTML 和影像、「切片」為全部切片，儲存出網頁格式與影像圖檔至練習資料夾內。
請執行「檔案」→「轉存」→「儲存為網頁用」指令，接著使用切片選取工具，複選上方二個切片，按下「儲存」，設定『檔名：dw02.html』、「存檔類型」為 HTML 和影像、「切片」為全部切片，儲存出網頁格式與影像圖檔至練習資料夾內。
STEP3.
回到 Dreamweaver 直接開啟所儲存的 HTML 頁面dw02.html，頁面中已包含組合所有影像切片的隱形表格與影像，中央內容區影像尺寸為寬：650、高：450，選取表格設定『對齊：置中對齊』。
回到 Dreamweaver 直接開啟所儲存的 HTML 頁面dw02.html，頁面中已包含組合所有影像切片的隱形表格與影像，中央內容區影像尺寸為寬：650、高：450，選取表格設定『對齊：置中對齊』。
STEP4.
新增空白頁面dw02-iframe.html，於頁面中插入 1 列、1 欄、寬度 600（略小於650）、置中對齊之隱形表格，於表格內置入文字圖片內容，儲存檔案此頁面即為內嵌式頁框內容。
新增空白頁面dw02-iframe.html，於頁面中插入 1 列、1 欄、寬度 600（略小於650）、置中對齊之隱形表格，於表格內置入文字圖片內容，儲存檔案此頁面即為內嵌式頁框內容。
STEP5.
回到dw02.html，點取要嵌入內嵌式頁框的位置，目前此位置內是一張預留的圖片，請點取該圖片檢視圖片寬與高（650╳450）。點取該圖片，切換至程式碼編輯畫面，將原圖片< img>內容置換為【<iframe>…..</iframe>】正確內容。
回到dw02.html，點取要嵌入內嵌式頁框的位置，目前此位置內是一張預留的圖片，請點取該圖片檢視圖片寬與高（650╳450）。點取該圖片，切換至程式碼編輯畫面，將原圖片< img>內容置換為【<iframe>…..</iframe>】正確內容。
<iframe>設定『Source』iframe 內容來源網頁（dw02-iframe.html）、『height(高)：450（原影像高）、width(寬)：650（原影像寬）、『Scroll』捲軸：自動（auto）。
STEP6.
儲存檔案完成內頁框設定，內頁框區呈現灰色標示，按下【F12】即可預覽。內嵌頁框的捲軸功能也不會影響主頁面。
儲存檔案完成內頁框設定，內頁框區呈現灰色標示，按下【F12】即可預覽。內嵌頁框的捲軸功能也不會影響主頁面。
相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
作為一個非常不專業的前端初學者，有陣子常常卡在公司官網，要插入 Youtube 影片無法RWD(響應式)的問題。
跟不熟悉 網頁技術的朋友們介紹，RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排，在這個人手一機的時代，特別重要。
台灣旅外模特兒Wendy Huang黃琬妤去年曾經替時尚雜誌Schön! Magazine拍攝一組我個人覺得相當精彩的內頁特輯，近日總算是陸續曝光於網站及社群媒體上。
Netflix被爆出的一大問題，引起了廣大網友和好萊塢業內人士的關注。
導演克里斯多福·諾蘭，對當下流媒體的擔憂。導演克里斯多福·諾蘭曾談過多當下流媒體電影、還有電影創作人處境的各種擔憂。其中就包括：只存在於流媒體的電影，要是點擊率不高，沒有受到觀眾的喜歡，會面臨直接下架的問題。
小夥伴們，我們今天來講講日記本內頁的格式
現在的日記本格式百百種，今天來簡單分享幾種我遇過的日記本格式 分享給各位參考，也歡迎各位可以與我一起討論喜歡什麼樣的格式
想要了解一個地區的歷史及生活型態，最快的方式就是參觀當地的博物館。位於新北市瑞芳區金瓜石地區的黃金博物館，是國內首座以礦業文化保存為宗旨的公立博物館。以生態博物館為理念、希望透過博物館之文化載具，結合社區的力量將金瓜石地區的礦業文化、人文記憶與聚落紋理保存、傳承並活化。
黃金博物館相關資訊::
地址
《青芽兒》雜誌是我合作超過10年的美編工作，平均二個月一期的三農雜誌，邊看內容邊美編，每次美編完成，大概內容也都讀完了，到現在，每一期都還是會有收穫哩。而主編放手讓我設計全部的版面，相信我會以最適合的版面呈現，大概也是可以合作這麼久的原因吧。
《閱讀的島》雜誌，三欄是這本刊物最主要的版面設計，再加上大小圖、色塊、插畫等不同元素，依據當期主題內容，設計不同的版面。
《閱讀的島》內頁設計分為二欄、三欄。二欄主要用在用在總編輯寫的 “編輯室報告” ，有時也用在 “專題” 文章，偶爾用在文章調劑。
可能包含敏感內容
△匡偉一一點開所有的訊息，其中一封為杜文瑜寄發的訊息。
杜文瑜：老師，我今天跟您談過之後收穫很大，我最近剛完成一個短篇小說，我在想，是否可以跟您約個時間，請您幫我看一下？
匡 偉：（遲疑了一下，想到杜文瑜甜美的笑容與豐滿的身材，興起了見面的欲望）好啊，沒問題。
杜文瑜：老師什麼時候有空？
匡 偉：我
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
作為一個非常不專業的前端初學者，有陣子常常卡在公司官網，要插入 Youtube 影片無法RWD(響應式)的問題。
跟不熟悉 網頁技術的朋友們介紹，RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排，在這個人手一機的時代，特別重要。
台灣旅外模特兒Wendy Huang黃琬妤去年曾經替時尚雜誌Schön! Magazine拍攝一組我個人覺得相當精彩的內頁特輯，近日總算是陸續曝光於網站及社群媒體上。
Netflix被爆出的一大問題，引起了廣大網友和好萊塢業內人士的關注。
導演克里斯多福·諾蘭，對當下流媒體的擔憂。導演克里斯多福·諾蘭曾談過多當下流媒體電影、還有電影創作人處境的各種擔憂。其中就包括：只存在於流媒體的電影，要是點擊率不高，沒有受到觀眾的喜歡，會面臨直接下架的問題。
小夥伴們，我們今天來講講日記本內頁的格式
現在的日記本格式百百種，今天來簡單分享幾種我遇過的日記本格式 分享給各位參考，也歡迎各位可以與我一起討論喜歡什麼樣的格式
想要了解一個地區的歷史及生活型態，最快的方式就是參觀當地的博物館。位於新北市瑞芳區金瓜石地區的黃金博物館，是國內首座以礦業文化保存為宗旨的公立博物館。以生態博物館為理念、希望透過博物館之文化載具，結合社區的力量將金瓜石地區的礦業文化、人文記憶與聚落紋理保存、傳承並活化。
黃金博物館相關資訊::
地址
《青芽兒》雜誌是我合作超過10年的美編工作，平均二個月一期的三農雜誌，邊看內容邊美編，每次美編完成，大概內容也都讀完了，到現在，每一期都還是會有收穫哩。而主編放手讓我設計全部的版面，相信我會以最適合的版面呈現，大概也是可以合作這麼久的原因吧。
《閱讀的島》雜誌，三欄是這本刊物最主要的版面設計，再加上大小圖、色塊、插畫等不同元素，依據當期主題內容，設計不同的版面。
《閱讀的島》內頁設計分為二欄、三欄。二欄主要用在用在總編輯寫的 “編輯室報告” ，有時也用在 “專題” 文章，偶爾用在文章調劑。
可能包含敏感內容
△匡偉一一點開所有的訊息，其中一封為杜文瑜寄發的訊息。
杜文瑜：老師，我今天跟您談過之後收穫很大，我最近剛完成一個短篇小說，我在想，是否可以跟您約個時間，請您幫我看一下？
匡 偉：（遲疑了一下，想到杜文瑜甜美的笑容與豐滿的身材，興起了見面的欲望）好啊，沒問題。
杜文瑜：老師什麼時候有空？
匡 偉：我