Download - 旅人印象 - 頁框網站的製作
![Page 1: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/1.jpg)
![Page 2: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/2.jpg)
0909
旅人印象旅人印象 --頁框網站的製作頁框網站的製作
![Page 3: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/3.jpg)
9.1 9.1 認識頁框網站認識頁框網站
• 所謂 「頁框」,是將一個網頁分割成數個小範圍,這些一個個的範圍即是頁框 (Frame) ,不僅可以放置獨立的網頁,還可以編輯;而網頁則為頁框組 (Frameset) ,呈現分割狀態及各頁框屬性。
![Page 4: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/4.jpg)
台灣咁仔店 http://www.taiwan123.com.tw :左及上巢狀頁框。
![Page 5: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/5.jpg)
旗津觀光旅遊 http://invest.kcg.gov.tw/cijin/chinesecijin/allframe.htm :上頁框。
![Page 6: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/6.jpg)
• 以下是 Dreamweaver 中預設可使用的頁框型式;如果運用得宜,不但能豐富網站上內容,對網站也有加分的效果!
![Page 7: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/7.jpg)
9.2 9.2 頁框網站的製作頁框網站的製作
• 將手邊一張張的旅遊影像,分成單一影像瀏覽網頁及縮圖清單網頁,然後透過頁框功能,統合二個網頁於一個頁面,完成「旅人印象」單元!
![Page 8: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/8.jpg)
![Page 9: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/9.jpg)
9.2.1 分割頁框與設定大小• 在進行頁框網站的製作前,必須依照網站欲呈現的結果,
進行頁框分割。為了讓操作更加順手,以下我們先針對網頁的呈現,佈置一個頁框區域架構圖。原則上,上頁框 mainFrame 為單張影像的瀏覽頁面;而下頁框 bottomFrame 則為橫向捲軸式的影像縮圖清單。
![Page 10: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/10.jpg)
9.2.2 儲存頁框• 完成頁框的分割動作後,請先儲存整個頁框組。
![Page 11: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/11.jpg)
9.2.3 指定上下頁框的內容• 完成頁框的分割後,接著就是指定上下頁框的內容。• 為了讓操作更加順手,以下我們將針對上下頁框需呈現的
網頁內容,佈置一個頁框內容架構圖。原則上,上頁框 mainFrame 指定內容為 <photo001.htm> ;而下頁框 bottomFrame 指定內容為 <bottomframe.htm> 。
![Page 12: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/12.jpg)
9.2.4 指定頁框的連結頁面• <photoalbum.htm> 網頁是由頁框所組成,所以當瀏覽者
選按下頁框 bottomFrame 的影像縮圖時,會將指定連結的頁面顯示於上頁框 mainFrame 中,所以必須調整連結頁面顯示的目標區,讓頁面可以正確顯示。
當選按下方影像縮圖時,會於上方顯示所屬大圖頁面。
![Page 13: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/13.jpg)
9.3 9.3 在網頁中透過 在網頁中透過 iframe iframe 嵌入其他網嵌入其他網頁頁
• 前面的頁框功能是將一個頁面分割成多個框架,並指定相關連結頁面,但如果我們只想在頁面的一處放置某個網頁時,似乎頁框設定就稍嫌繁複,此時透過 iframe 運用,即可讓頁面的呈現更靈活。
![Page 14: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/14.jpg)
透過 iframe 的運用,讓 <photoalbum.htm> 頁面內嵌於 <medias.htm> 。
![Page 15: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/15.jpg)
9.3.1 認識 iframe• iframe 是所謂的「內置框架」,它跟頁框的差別在於:
一個是在網頁中的某個區域插入一個框架,並將其他欲顯示的網頁內容嵌入其中;一個則是將網頁分割成幾個頁框,並透過所謂的頁框組將這些頁框包含其中。
左及下巢狀頁框 iframe 內置框架
![Page 16: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/16.jpg)
9.3.2 插入 iframe• 進入「東京慢旅行」範例網站,開啟 <medias.htm> 檔
案,我們將在「旅人印象」單元文字下方插入一個 iframe ,準備放置先前 9.2 節完成的 <photoalbum.htm> 網頁內容。
![Page 17: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/17.jpg)
![Page 18: 旅人印象 - 頁框網站的製作](https://reader036.vdocuments.net/reader036/viewer/2022082212/56813466550346895d9b4ae1/html5/thumbnails/18.jpg)
習作園地實作題• 依照如下提示,完成
「 KNOWLEDGE 宇宙與太陽系」 網站的製作。