網頁製作 1032 數位教材 單元6 : 分割視窗 主講老師:徐培倫 單元6 分割視窗 分割視窗例子 表格標籤的基本架構 表格標籤的屬性 作業4 作業5 分割視窗例子 在HTML可以使用分割視窗標籤製作多網頁框架 分割視窗的特色  對網頁設計者而言  可以對網頁做更多的掌控與變化  使網站更具層次感  對瀏覽網站的使用者而言  容易找到所需要的連結  易於瀏覽網站 Frame 基本架構 標籤配合使用 COLS 或 ROWS 屬 性可以決定分割的方式: - 左右分割 - 上下分割 三個分割的視窗 FRAMESET.

Download Report

Transcript 網頁製作 1032 數位教材 單元6 : 分割視窗 主講老師:徐培倫 單元6 分割視窗 分割視窗例子 表格標籤的基本架構 表格標籤的屬性 作業4 作業5 分割視窗例子 在HTML可以使用分割視窗標籤製作多網頁框架 分割視窗的特色  對網頁設計者而言  可以對網頁做更多的掌控與變化  使網站更具層次感  對瀏覽網站的使用者而言  容易找到所需要的連結  易於瀏覽網站 Frame 基本架構 標籤配合使用 COLS 或 ROWS 屬 性可以決定分割的方式: - 左右分割 - 上下分割 三個分割的視窗 FRAMESET.

網頁製作
1032 數位教材
單元6 : 分割視窗
主講老師:徐培倫
單元6
分割視窗
分割視窗例子
表格標籤的基本架構
表格標籤的屬性
作業4
作業5
2
分割視窗例子
在HTML可以使用分割視窗標籤製作多網頁框架
分割視窗的特色
 對網頁設計者而言
 可以對網頁做更多的掌控與變化
 使網站更具層次感
 對瀏覽網站的使用者而言
 容易找到所需要的連結
 易於瀏覽網站
Frame 基本架構
<FRAMESET> 標籤配合使用 COLS 或 ROWS 屬
性可以決定分割的方式:
<FRAMESET COLS="*,*"> - 左右分割
<FRAMESET ROWS="*,*"> - 上下分割
三個分割的視窗
FRAMESET 邊界寬度的屬性
 FRAMEBORDER:設定是否顯示窗格的
邊界。
 BORDER:設定窗格分界處的厚度。
 BORDER COLOR:設定分割線的顏色。
 FRAMESPACING:與 BORDER 相同, 但
只有 IE 認得。
FRAME 標籤的屬性
 SRC 屬性:指定 HTML 檔, 其語法為
<FRAME SRC=“網頁的 URL">。
 NAME 屬性:為分割視窗命名, 分割視窗
的名字必須由英文字母或數字符號開頭。
其語法為 <FRAME NAME=“視窗名字">
。
FRAME 標籤的屬性
 SCROLLING 屬性:設定分割視窗的捲軸,
預設值是 AUTO, 表示內容沒有超過分割
視窗大小時就不加上捲軸;一旦內容超出
分割視窗的大小, 就自動加上捲軸。
 當指定 SCROLLING="YES" 時, 不管內容
多寡都會加上捲軸。反之, 當
SCROLLING="NO" 時, 不管內容多寡都不
會加上任何捲軸。
<FRAME> 標籤的屬性
 <FRAME MARGINWIDTH=與左右邊界距
離>, 用來設定內容與左右邊界的距離。
 左右邊界最好設定一點以上, 以防止視窗
內的內容觸碰到邊界。
FRAMESET 的巢狀結構
•外面的<FRAMESET>把裡面的<FRAMESET>包住了
•表示瀏覽器先執行第一組(外面)的<FRAMESET>先分割成1和2左、
右兩個頁框並載入a.htm
•再執行第二組(裡面)的<FRAMESET>把右頁框再分割成2和3上、下
兩個頁框並載入b.htm和c.htm
FRAMESET 的巢狀結構
作業 6:題目
 請修改範例檔 ex6.html 達成下列視窗結果
A: 健行首頁
B: 中央大學首頁
C: 元智大學首頁
D: 中原大學首頁
13
作業6: ex6.html
14
ex6.html 執行結果
15
請修改 ex6.html 成作業6
16
作業6 完成檔
 ex6a.html 為作業6的完成檔, 畫面如下:
17