第九章、多框架設計
第九章內容重點：
- 何謂框架呢？請參考本週的連結範例：第九章框架範例
- 上述連結的框架功能：
- 每個框架內都是一個『獨立的網頁檔案』，因此上述的視窗內共有『三個獨立的網頁』；
- 每個框架都可以設定『名稱』，所以每個框架都有名字；
- 透過超連結，『將網頁顯示在其他的框架上』，就是透過上述的框架名稱功能；
- 框架的製作：
- 先思考你的網站要用什麼類型存在？例如上面第一點的範例，有標頭(上方)、連結(左方)及實際顯示(中間)三個區塊；
- 切割區塊：利用 <frameset rows="xxx" cols="xxx" > ... </frameset> 來設定框架；
- 放置區塊：利用 <frame src="..." name="xxx" /> 來帶入每個區塊內要放置的實際網頁！
- 框架的寫法，假設我們要製作出如同第一點的範例內容之框架資料時 (框架用來取代 body ，所以有 frameset 不要有 body 存在)：
<frameset rows="100,*" >
<frame src="第一個網頁" name="最上面名稱" />
<frameset cols="20,*" >
<frame src="第二個網頁" name="左下方名稱" />
<frame src="第三個網頁" name="右下方名稱" />
</frameset>
</frameset>
- 練習題：請製作 chap09-1.html 檔案，將該視窗切成五個框架，樣式有點像底下這樣：
- <frame />獨立標籤的相關參數：
- src="網頁檔案的檔名"
- name="這個框架的名稱"
- marginwidth="距離左/右框架的距離，單位為像素"
- marginheight="距離上/下框架的距離，單位為像素"
- scrolling="yes,no,auto"：是否要顯示出捲軸？
- noresize="noresize"：不可以改變框架的大小！
本章習題：
- 實作題一：參考課本 page 9-41 頁，請：
- 依據課本範例的分割狀態，分割出三個框架，此框架檔名 chap09-01.html；
- 最上方的框架為展示用途，可自行加上一些科技大學介紹字樣的文字或圖示說明 chap09-01-top.html
- 左側請自行找出至少十間科技大學的網站連結，將連結建置為 chap09-01-left.html
- 右側請預設使用崑山科技大學的 WWW 作為進站畫面，且此畫面為左側連結的主要呈現位置。
檔名為 chap09-01-main-xx.html 。
- 實作題二：新增一個進站畫面 (index02.html) 設計成類似 chap09-1.html 的樣式框架，框架內容：
- 上方框架請設計介紹你自己的畫面，可使用 photoimpact 的功能設計標頭頁(第八章的第三題實作)；
- 左側為按鈕列，可利用按鈕來顯示每週的實作題，亦可直接使用原本的 index.html 內容來展現！
- 中間最大畫面部分則是每週的作業/習題內容！
- 右側的畫面隨便你填囉！看你喜歡什麼咚咚
- 最下方請填寫：(1)最佳網頁瀏覽解析度 (2)網站整體製作日期 (3)宣告一下你自己的版權 (4)你的 blog 與 email 連結等。
- 框架不可以被改變，請自行切割出你喜歡的樣式，在不影響畫面直覺美觀的環境下進行。
- 請修改 index.html 檔案，將本週之前的每週練習之連結分別在不同的行顯示出來！
|