| 回教學網站 | 回網站規劃與設計首頁 | 作業繳交區 |
第十一章、多框架設計
第十一章內容重點：
  1. 何謂框架呢？請參考本週的連結範例：框架範例

  2. 上述連結的框架功能：
    1. 每個框架內都是一個『獨立的網頁檔案』，因此上述的視窗內共有『三個獨立的網頁』；
    2. 每個框架都可以設定『名稱』，所以每個框架都有名字；
    3. 透過超連結，『將網頁顯示在其他的框架上』，就是透過上述的框架名稱功能；

  3. 框架的製作：
    1. 先思考你的網站要用什麼類型存在？例如上面第一點的範例，有標頭(上方)、連結(左方)及實際顯示(中間)三個區塊；
    2. 切割區塊：利用 <frameset rows="xxx" cols="xxx" > ... </frameset> 來設定框架；
    3. 放置區塊：利用 <frame src="..." name="xxx" /> 來帶入每個區塊內要放置的實際網頁！

  4. 框架的寫法，假設我們要製作出如同第一點的範例內容之框架資料時 (框架用來取代 body ，所以有 frameset 不要有 body 存在)：
    <frameset rows="100,*" >
    <frame src="第一個網頁" name="最上面名稱" />
    <frameset cols="20,*" >
        <frame src="第二個網頁" name="左下方名稱" />
        <frame src="第三個網頁" name="右下方名稱" />
    </frameset>
</frameset>
  5. 練習題：請製作 chap11-1.html 檔案，將該視窗切成五個框架，樣式有點像底下這樣：



  6. <frame />獨立標籤的相關參數：
    1. src="網頁檔案的檔名"
    2. name="這個框架的名稱"
    3. marginwidth="距離左/右框架的距離，單位為像素"
    4. marginheight="距離上/下框架的距離，單位為像素"
    5. scrolling="yes,no,auto"：是否要顯示出捲軸？
    6. noresize="noresize"：不可以改變框架的大小！

本章習題：
  1. 實作題一：參考課本 page 11-30 頁，請設計出你的網頁

  2. 實作題二：新增一個進站畫面 (index02.html) 設計成類似 chap11-1.html 的樣式框架，框架內容：
    1. 上方框架請設計介紹你自己的畫面，可使用 photoimpact 的功能設計標頭頁；
    2. 左側為按鈕列，可利用按鈕來顯示每週的實作題，亦可直接使用原本的 index.html 內容來展現！
    3. 中間最大畫面部分則是每週的作業/習題內容！
    4. 右側的畫面隨便你填囉！看你喜歡什麼咚咚
    5. 最下方請填寫：(1)最佳網頁瀏覽解析度 (2)網站整體製作日期 (3)宣告一下你自己的版權 (4)你的 blog 與 email 連結等。
    6. 框架不可以被改變，請自行切割出你喜歡的樣式，在不影響畫面直覺美觀的環境下進行。

  3. 請修改 index.html 檔案，將本週之前的每週練習之連結分別在不同的行顯示出來！

回到最上方 (top)