1 / 18

旅人印象 - 頁框網站的製作

09. 旅人印象 - 頁框網站的製作. 9.1 認識頁框網站. 所謂 「頁框」，是將一個網頁分割成數個小範圍，這些一個個的範圍即是頁框 (Frame) ，不僅可以放置獨立的網頁，還可以編輯；而網頁則為頁框組 (Frameset) ，呈現分割狀態及各頁框屬性。. 台灣咁仔店 http://www.taiwan123.com.tw ：左及上巢狀頁框。. 旗津觀光旅遊 http://invest.kcg.gov.tw/cijin/chinesecijin/allframe.htm ：上頁框。.

benedict-tyler
Télécharger la présentation

旅人印象 - 頁框網站的製作

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 09 旅人印象- 頁框網站的製作

  2. 9.1 認識頁框網站 • 所謂 「頁框」，是將一個網頁分割成數個小範圍，這些一個個的範圍即是頁框 (Frame)，不僅可以放置獨立的網頁，還可以編輯；而網頁則為頁框組 (Frameset)，呈現分割狀態及各頁框屬性。

  3. 台灣咁仔店 http://www.taiwan123.com.tw：左及上巢狀頁框。

  4. 旗津觀光旅遊 http://invest.kcg.gov.tw/cijin/chinesecijin/allframe.htm：上頁框。

  5. 以下是 Dreamweaver 中預設可使用的頁框型式；如果運用得宜，不但能豐富網站上內容，對網站也有加分的效果！

  6. 9.2 頁框網站的製作 • 將手邊一張張的旅遊影像，分成單一影像瀏覽網頁及縮圖清單網頁，然後透過頁框功能，統合二個網頁於一個頁面，完成「旅人印象」單元！

  7. 9.2.1 分割頁框與設定大小 • 在進行頁框網站的製作前，必須依照網站欲呈現的結果，進行頁框分割。為了讓操作更加順手，以下我們先針對網頁的呈現，佈置一個頁框區域架構圖。原則上，上頁框 mainFrame 為單張影像的瀏覽頁面；而下頁框 bottomFrame 則為橫向捲軸式的影像縮圖清單。

  8. 9.2.2 儲存頁框 • 完成頁框的分割動作後，請先儲存整個頁框組。

  9. 9.2.3 指定上下頁框的內容 • 完成頁框的分割後，接著就是指定上下頁框的內容。 • 為了讓操作更加順手，以下我們將針對上下頁框需呈現的網頁內容，佈置一個頁框內容架構圖。原則上，上頁框 mainFrame 指定內容為 <photo001.htm>；而下頁框bottomFrame 指定內容為 <bottomframe.htm>。

  10. 9.2.4 指定頁框的連結頁面 • <photoalbum.htm> 網頁是由頁框所組成，所以當瀏覽者選按下頁框 bottomFrame 的影像縮圖時，會將指定連結的頁面顯示於上頁框 mainFrame 中，所以必須調整連結頁面顯示的目標區，讓頁面可以正確顯示。 當選按下方影像縮圖時，會於上方顯示所屬大圖頁面。

  11. 9.3 在網頁中透過 iframe 嵌入其他網頁 • 前面的頁框功能是將一個頁面分割成多個框架，並指定相關連結頁面，但如果我們只想在頁面的一處放置某個網頁時，似乎頁框設定就稍嫌繁複，此時透過 iframe 運用，即可讓頁面的呈現更靈活。

  12. 透過 iframe 的運用，讓 <photoalbum.htm> 頁面內嵌於 <medias.htm>。

  13. 9.3.1 認識 iframe • iframe 是所謂的「內置框架」，它跟頁框的差別在於：一個是在網頁中的某個區域插入一個框架，並將其他欲顯示的網頁內容嵌入其中；一個則是將網頁分割成幾個頁框，並透過所謂的頁框組將這些頁框包含其中。 左及下巢狀頁框 iframe 內置框架

  14. 9.3.2 插入 iframe • 進入「東京慢旅行」範例網站，開啟 <medias.htm> 檔案，我們將在「旅人印象」單元文字下方插入一個 iframe，準備放置先前 9.2 節完成的 <photoalbum.htm> 網頁內容。

  15. 習作園地 實作題 • 依照如下提示，完成 「KNOWLEDGE 宇宙與太陽系」 網站的製作。

More Related