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