iFrame 內頁框版面切割與應用

閱讀時間約 2 分鐘
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專業網頁編輯應用
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
對於網站內頁,尤其是左右分欄的內頁版面,同樣也是設計好版面之後,經由Photoshop切割後儲存成HTML頁面,再到Dreamweaver中處理設定,以完美呈現頁面內容,包括滑鼠變換影像按鈕,以及內頁的龐大頁面內容資料加入版型版面後,需保持版面的完整。 STEP1. 在Photoshop中開啟範例
對於網站內頁,尤其是左右分欄的內頁版面,同樣也是設計好版面之後,經由Photoshop切割後儲存成HTML頁面,再到Dreamweaver中處理設定,以完美呈現頁面內容,包括滑鼠變換影像按鈕,以及內頁的龐大頁面內容資料加入版型版面後,需保持版面的完整。 STEP1. 在Photoshop中開啟範例
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
作為一個非常不專業的前端初學者,有陣子常常卡在公司官網,要插入 Youtube 影片無法RWD(響應式)的問題。 跟不熟悉 網頁技術的朋友們介紹,RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排,在這個人手一機的時代,特別重要。
Thumbnail
台灣旅外模特兒Wendy Huang黃琬妤去年曾經替時尚雜誌Schön! Magazine拍攝一組我個人覺得相當精彩的內頁特輯,近日總算是陸續曝光於網站及社群媒體上。
Thumbnail
Netflix被爆出的一大問題,引起了廣大網友和好萊塢業內人士的關注。 導演克里斯多福·諾蘭,對當下流媒體的擔憂。導演克里斯多福·諾蘭曾談過多當下流媒體電影、還有電影創作人處境的各種擔憂。其中就包括:只存在於流媒體的電影,要是點擊率不高,沒有受到觀眾的喜歡,會面臨直接下架的問題。
Thumbnail
小夥伴們,我們今天來講講日記本內頁的格式 現在的日記本格式百百種,今天來簡單分享幾種我遇過的日記本格式 分享給各位參考,也歡迎各位可以與我一起討論喜歡什麼樣的格式
Thumbnail
想要了解一個地區的歷史及生活型態,最快的方式就是參觀當地的博物館。位於新北市瑞芳區金瓜石地區的黃金博物館,是國內首座以礦業文化保存為宗旨的公立博物館。以生態博物館為理念、希望透過博物館之文化載具,結合社區的力量將金瓜石地區的礦業文化、人文記憶與聚落紋理保存、傳承並活化。 黃金博物館相關資訊:: 地址
Thumbnail
《青芽兒》雜誌是我合作超過10年的美編工作,平均二個月一期的三農雜誌,邊看內容邊美編,每次美編完成,大概內容也都讀完了,到現在,每一期都還是會有收穫哩。而主編放手讓我設計全部的版面,相信我會以最適合的版面呈現,大概也是可以合作這麼久的原因吧。
Thumbnail
《閱讀的島》雜誌,三欄是這本刊物最主要的版面設計,再加上大小圖、色塊、插畫等不同元素,依據當期主題內容,設計不同的版面。
Thumbnail
《閱讀的島》內頁設計分為二欄、三欄。二欄主要用在用在總編輯寫的 “編輯室報告” ,有時也用在 “專題” 文章,偶爾用在文章調劑。
Thumbnail
可能包含敏感內容
△匡偉一一點開所有的訊息,其中一封為杜文瑜寄發的訊息。 杜文瑜:老師,我今天跟您談過之後收穫很大,我最近剛完成一個短篇小說,我在想,是否可以跟您約個時間,請您幫我看一下? 匡 偉:(遲疑了一下,想到杜文瑜甜美的笑容與豐滿的身材,興起了見面的欲望)好啊,沒問題。 杜文瑜:老師什麼時候有空? 匡 偉:我
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
作為一個非常不專業的前端初學者,有陣子常常卡在公司官網,要插入 Youtube 影片無法RWD(響應式)的問題。 跟不熟悉 網頁技術的朋友們介紹,RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排,在這個人手一機的時代,特別重要。
Thumbnail
台灣旅外模特兒Wendy Huang黃琬妤去年曾經替時尚雜誌Schön! Magazine拍攝一組我個人覺得相當精彩的內頁特輯,近日總算是陸續曝光於網站及社群媒體上。
Thumbnail
Netflix被爆出的一大問題,引起了廣大網友和好萊塢業內人士的關注。 導演克里斯多福·諾蘭,對當下流媒體的擔憂。導演克里斯多福·諾蘭曾談過多當下流媒體電影、還有電影創作人處境的各種擔憂。其中就包括:只存在於流媒體的電影,要是點擊率不高,沒有受到觀眾的喜歡,會面臨直接下架的問題。
Thumbnail
小夥伴們,我們今天來講講日記本內頁的格式 現在的日記本格式百百種,今天來簡單分享幾種我遇過的日記本格式 分享給各位參考,也歡迎各位可以與我一起討論喜歡什麼樣的格式
Thumbnail
想要了解一個地區的歷史及生活型態,最快的方式就是參觀當地的博物館。位於新北市瑞芳區金瓜石地區的黃金博物館,是國內首座以礦業文化保存為宗旨的公立博物館。以生態博物館為理念、希望透過博物館之文化載具,結合社區的力量將金瓜石地區的礦業文化、人文記憶與聚落紋理保存、傳承並活化。 黃金博物館相關資訊:: 地址
Thumbnail
《青芽兒》雜誌是我合作超過10年的美編工作,平均二個月一期的三農雜誌,邊看內容邊美編,每次美編完成,大概內容也都讀完了,到現在,每一期都還是會有收穫哩。而主編放手讓我設計全部的版面,相信我會以最適合的版面呈現,大概也是可以合作這麼久的原因吧。
Thumbnail
《閱讀的島》雜誌,三欄是這本刊物最主要的版面設計,再加上大小圖、色塊、插畫等不同元素,依據當期主題內容,設計不同的版面。
Thumbnail
《閱讀的島》內頁設計分為二欄、三欄。二欄主要用在用在總編輯寫的 “編輯室報告” ,有時也用在 “專題” 文章,偶爾用在文章調劑。
Thumbnail
可能包含敏感內容
△匡偉一一點開所有的訊息,其中一封為杜文瑜寄發的訊息。 杜文瑜:老師,我今天跟您談過之後收穫很大,我最近剛完成一個短篇小說,我在想,是否可以跟您約個時間,請您幫我看一下? 匡 偉:(遲疑了一下,想到杜文瑜甜美的笑容與豐滿的身材,興起了見面的欲望)好啊,沒問題。 杜文瑜:老師什麼時候有空? 匡 偉:我