返回列表 上一主題 發帖

[教學] (教學第15篇)框架控制 上篇

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-25 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
1# 跳轉到 » 正序看帖
打印
tT
發表於 2010-5-18 17:50 | 只看該作者

[教學] (教學第15篇)框架控制 上篇

什麼是框架？在瀏覽器視窗中並不是只限定可以出現一份網頁文件，而是可以同時在視窗內瀏覽多份網頁文件，如下面的畫面：


在上圖的瀏覽器畫面中共有三個網頁內容被同時顯現出來，在畫面上方是一個標題網頁，左方為一類似選單的網頁內容，右方則為主要內容的顯示區，這種可以在瀏覽器視窗中同時顯現多份網頁文件的方式就稱為『框架（Frame）』，也可以稱之為『分割視窗』或是『頁框』。你只要按下左方的超鏈結項目，便可以將該超鏈結的連結網頁內容顯現在右方的主要內容顯示區中，如此一來，瀏覽者可以很方便的從左方的項目選單中選取所需要的資料項目，而且不用每次都讀取相同的畫面內容(選項網頁)，所以框架就時常被用來當作『導引裝置』！


建立框架
要建立框架就必須使用HTML的「FRAME（框架）」標籤，框架標籤並不是建立在視窗畫面內所顯示的內容網頁中，而是必須另外撰寫一份放置框架標籤的專屬網頁文件，框架網頁中的內容並不會被顯示出來，它只是用來做『分割』的動作，你可以自由的規劃瀏覽器視窗中的畫面樣式，要分割成幾個或是分割方式（上下分割、左右分割…）：
  1. <FRAME NAME=”視窗名稱” SRC=”視窗內網頁”>框架標籤設定
複製代碼

  • NAME屬性：這個屬性用來做切割後的視窗命名，不可以忽略，將來我們利用JavaScript控制時必須用到！
  • SCR屬性：設定切割視窗建立所要載入的網頁名稱，當視窗切割完成後，這個網頁文件內容就會出現在該分割視窗中！

別以為使用「FRAME（框架）」標籤，就可以建立視窗喔！它只是用來設定框架的內容而已，要在瀏覽器視窗中建立幾個框架與每個框架的大小比例還得透過「FRAMESET（框架設定）」標籤！

實作學習：
假設我們要建立如下圖的視窗畫面，我們需要建立幾個網頁文件呢？

答案是三份喔：

6-1.htm：用來規劃瀏覽器視窗中的框架畫面樣式，網頁中的內容並不會被顯示出來。
6-1.htm(放置框架標籤)
  1. <HTML>
  2. <HEAD>
  3. <TITLE>小誌的網站家族</TITLE>
  4. </HEAD>
  5. <FRAMESET ROWS="40%,*">
  6. <FRAME NAME="top" SRC="6-1-1.htm">
  7. <FRAME NAME="buttom" SRC="6-1-2.htm">
  8. </FRAMESET>
  9. </HTML>
複製代碼
利用<FRAMESET>標籤來設定框架分割，『ROWS』屬性代表將瀏覽器視窗畫面分割為上下兩的框架，上方的框架為顯示畫面的40%，其餘的畫面空間則為下方框架的顯示範圍。
利用<FRAME>標籤個別定義上下兩個框架的內容，有順序之分喔！第一個<FRAME>標籤定義上方的框架名稱為「top」，而且載入的網頁為6-1-1.htm；第二個<FRAME>標籤定義下方的框架名稱為「buttom」，載入的網頁則為6-1-2.htm。


6-1-1.htm：將顯示在上方框架中的網頁文件，當6-1.htm中第一個框架標籤呼叫時，將出現在上方框架中。
6-1-1.htm(上方框架中的網頁文件)
  1. <HTML>
  2. <HEAD>
  3. <TITLE>小誌的網站家族</TITLE>
  4. </HEAD>
  5. <body>
  6. <p align="center">小誌家族共有三個網站喔！</p>
  7. </body>
  8. </HTML>
複製代碼
6-1-2.htm：將顯示在下方框架中的網頁文件，當6-1.htm中第二個框架標籤呼叫時，將出現在下方框架中。
6-1-2.htm(下方框架中的網頁文件)
  1. <HTML>
  2. <HEAD>
  3. <TITLE>小誌的網站家族</TITLE>
  4. </HEAD>
  5. <body>
  6. <table border="1" width="43%">
  7.   <tr>
  8.     <td width="39%">麻辣學園</td>
  9.     <td width="61%">網頁教學</td>
  10.   </tr>
  11.   <tr>
  12.     <td width="39%">築夢學園</td>
  13.     <td width="61%">程式設計教學</td>
  14.   </tr>
  15.   <tr>
  16.     <td width="39%">office學園</td>
  17.     <td width="61%">office軟體教學</td>
  18.   </tr>
  19. </table>
  20. </body>
  21. </HTML>
複製代碼
當我們打開瀏覽器載入6-1.htm這份網頁時，瀏覽器將會解譯網頁文件內的框架標籤，並按照框架標籤的設定分割畫面，將上方的框架視窗命名為「top」，並讀入6-1-1.htm網頁文件；下方的框架視窗命名為「buttom」，並讀入6-1-1.htm網頁文件。


注意！！
整體的瀏覽器畫面是6-1.htm（框架網頁）所有。
收藏 分享
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-25 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
4#
發表於 2010-5-18 18:04 | 只看該作者
框架樣式設定
框架視窗捲軸
  1. <FRAME NAME=”視窗名稱” SRC=”視窗內網頁” SCROLLING=”設定值”>
複製代碼
框架視窗是否出現捲動軸可由<FRAME>標籤的『SCROLLING』屬性來設定，其設定值有下列三種：

  • Auto：依照網頁文件內容自動判定是否出現捲動軸。
  • Yes：一定要出現捲動軸。
  • NO：一定不要出現捲動軸。



實例說明：
6-4.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>捲動軸設定</TITLE>
  4. </HEAD>
  5. <FRAMESET cols="30%,200,*">
  6. <FRAME NAME="top" SRC="b.htm" SCROLLING="Auto">
  7. <FRAME NAME="cent" SRC="b.htm" SCROLLING="Yes">
  8. <FRAME NAME="buttom" SRC="b.htm" SCROLLING="No">
  9. </FRAMESET>
  10. </HTML>
複製代碼

在上圖中，最左方的框架視窗，我們將其捲動軸屬性設定為『SCROLLING=”Auto”』，由於顯示的空間已經足夠了，所以捲動軸就不會出現，中間的框架視窗，我們將其捲動軸屬性設定為『SCROLLING=”Yes”』，雖然顯示的空間已經足夠了，但是捲動軸依然會出現！



框架視窗框線
  1. <FRAMESET COLS=”百分比/像數,百分比/像數,…” FRAMEBOARD=”設定值”>
複製代碼
框架視窗間的框線顯現與否可由<FRAMESET>標籤的『FRAMBOARD』屬性來設定，當設定值為No則將不會出現框線。

實例說明：
6-5.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>框線設定</TITLE>
  4. </HEAD>
  5. <FRAMESET cols="30%,200,*" frameborder="No">
  6. <FRAME NAME="top" SRC="a.htm">
  7. <FRAME NAME="cent" SRC="b.htm">
  8. <FRAME NAME="buttom" SRC="c.htm">
  9. </FRAMESET>
  10. </HTML>
複製代碼


雖然我們取消了框架視窗的框線，但從上圖中我們可以看到在：框架視窗之間仍然會有白色的空隙，這個時候我們則可以再加上『FRAMSPACING』屬性來設定：
  1. <FRAMESET COLS=”30%,200,*” FRAMEBOARD=”No” FRAMESPACING=”設定值”>
複製代碼
框架視窗間的距離寬度可由<FRAMESET>標籤的『FRAMSPACING』屬性來設定，當設定值為0則框架視窗將緊靠在一起。

實例說明：
6-6.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>框架視窗間距設定</TITLE>
  4. </HEAD>
  5. <FRAMESET cols="30%,200,*" frameborder="No" FRAMESPACING="0">
  6. <FRAME NAME="top" SRC="a.htm">
  7. <FRAME NAME="cent" SRC="b.htm">
  8. <FRAME NAME="buttom" SRC="c.htm">
  9. </FRAMESET>
  10. </HTML>
複製代碼
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-25 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
3#
發表於 2010-5-18 17:56 | 只看該作者
左右分割的視窗框架
  1. <FRAMESET COLS=”百分比/像數,百分比/像數,…”>
複製代碼

  • COLS屬性：這個屬性用來切割水平方向的視窗，依照分割的個數，在其後方填入相對個數的百分比或像素。
  • 與ROWS屬性相同，在<FRAMESET>標籤中指定所需的視窗個數大小後，就得分別設定對應個數的<FRAME NAME=”視窗名稱” SRC=”視窗內網頁”>標籤！


實做學習：
改寫實做學習6-2.htm，將瀏覽器視窗分割成水平方向三個框架視窗。
6-3.htm(分割水平三個框架視窗)
  1. <HTML>
  2. <HEAD>
  3. <TITLE>小誌的網站家族</TITLE>
  4. </HEAD>
  5. <FRAMESET cols="30%,200,*">
  6. <FRAME NAME="top" SRC="a.htm">
  7. <FRAME NAME="cent" SRC="b.htm">
  8. <FRAME NAME="buttom" SRC="c.htm">
  9. </FRAMESET>
  10. </HTML>
複製代碼
分割後框架視窗內的網頁文件依然採用a.htm、b.htm、c.htm：
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-25 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
2#
發表於 2010-5-18 17:54 | 只看該作者
上下分割的視窗框架
  1. <FRAMESET ROWS=”百分比/像數,百分比/像數,…”>
複製代碼

  • ROWS屬性：這個屬性用來切割垂直方向的視窗，依照分割的個數，在其後方填入相對個數的百分比或像素，例如：<FRAMESET rows="40%,200,*">，這樣就可以得當三個上下分割的框架視窗，這三個框架視窗大小由上而下分別為：佔整體畫面40%大小、200個像素大小、前兩個框架視窗用剩的其餘空間。
  • 當我們在<FRAMESET>標籤中指定幾個視窗的大小後，就得分別設定對應個數的<FRAME NAME=”視窗名稱” SRC=”視窗內網頁”>標籤！而這些框架視窗的大小將依照<FRAMESET>標籤中所指定的百分比或像素來分配。


實作學習：
6-2.htm(分割垂直三個框架視窗)
  1. <HTML>
  2. <HEAD>
  3. <TITLE>小誌的網站家族</TITLE>
  4. </HEAD>
  5. <FRAMESET rows="30%,200,*">
  6. <FRAME NAME="top" SRC="a.htm">
  7. <FRAME NAME="cent" SRC="b.htm">
  8. <FRAME NAME="buttom" SRC="c.htm">
  9. </FRAMESET>
  10. </HTML>
複製代碼
a.htm(上方框架視窗)
  1. <HTML>
  2. <HEAD>
  3. <TITLE>小誌的網站家族</TITLE>
  4. </HEAD>
  5. <body bgcolor="#FFCC99">
  6. <p align="center">小誌家族共有三個網站喔！</p>
  7. </body>
  8. </HTML>
複製代碼
b.htm(中間框架視窗)
  1. <HTML>
  2. <HEAD>
  3. <TITLE>小誌的網站家族</TITLE>
  4. </HEAD>
  5. <body bgcolor="#00CCFF">
  6. <table border="1" width="43%">
  7.   <tr>
  8.     <td width="39%">麻辣學園</td>
  9.     <td width="61%">網頁教學</td>
  10.   </tr>
  11.   <tr>
  12.     <td width="39%">築夢學園</td>
  13.     <td width="61%">程式設計教學</td>
  14.   </tr>
  15.   <tr>
  16.     <td width="39%">office學園</td>
  17.     <td width="61%">office軟體教學</td>
  18.   </tr>
  19. </table>
  20. </body>
  21. </HTML>
複製代碼
c.htm(下方框架視窗)
  1. <HTML>
  2. <HEAD>
  3. <TITLE>小誌的網站家族</TITLE>
  4. </HEAD>
  5. <body bgcolor="#99CC00">
  6. <p align="center">歡迎光臨我們的家族網站喔!!</p>
  7. </body>
  8. </HTML>
複製代碼
編輯好上列的四個網頁網件後，當我們打開瀏覽器讀取6-2.htm檔案後，就可以獲得如下圖的三框架視窗畫面：
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 有心就有福，有願就有力，自造福田，自得福緣。
返回列表 上一主題