| 回教學網站 | 回網站規劃與設計首頁 | 作業繳交區 |
第九章、多框架設計

第九章內容重點:
  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. 練習題:請製作 chap09-1.html 檔案,將該視窗切成五個框架,樣式有點像底下這樣:



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


本章習題:
  1. 實作題一:參考課本 page 9-41 頁,請:
    1. 依據課本範例的分割狀態,分割出三個框架,此框架檔名 chap09-01.html;
    2. 最上方的框架為展示用途,可自行加上一些科技大學介紹字樣的文字或圖示說明 chap09-01-top.html
    3. 左側請自行找出至少十間科技大學的網站連結,將連結建置為 chap09-01-left.html
    4. 右側請預設使用崑山科技大學的 WWW 作為進站畫面,且此畫面為左側連結的主要呈現位置。 檔名為 chap09-01-main-xx.html 。

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

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


回到最上方 (top)