Download presentation
Presentation is loading. Please wait.
1
第 9 章 分割視窗 - Frame 著作權所有 © 旗標出版股份有限公司
2
本章提要 令人眼睛為之一亮的分割視窗 Frame 基本架構介紹 <FRAME> 標籤的進階使用 Target Window 介紹
Inline Frames
3
令人眼睛為之一亮的分割視窗
4
令人眼睛為之一亮的分割視窗 分割視窗的操作特色 如何在有分割視窗的網站內進退自如
5
分割視窗的操作特色 對網頁設計者而言 可以對網頁做更多的掌控與變化 使網站更具層次感 對瀏覽網站的使用者而言 易於瀏覽網站
6
如何在有分割視窗的網站內 進退自如 若遇到沒有留下覽用的超連結網站, 請使用工具列上的上一頁或下一頁鈕切換。或在分割視窗中按滑鼠右鈕：
7
Frame 基本架構介紹 Frame 實作初探 製作分割視窗--<FRAMESET>…</FRAMESET> 標籤
將 HTML 檔嵌入分割視窗-- <FRAME> 標籤 <NOFRAMES> 標籤
8
Frame 實作初探
9
製作分割視窗 <FRAMESET>…</FRAMESET> 標籤：
10
製作分割視窗
11
FRAMESET 的 COLS 與 ROWS 屬性
<FRAMESET ROWS="*,*"> - 上下分割
12
使用 COLS 與 ROWS 屬性來設定分割視窗的大小
13
使用 COLS 與 ROWS 屬性來設定分割視窗的大小
14
使用 COLS 與 ROWS 屬性來設定分割視窗的大小
將上面範例改寫, 則結果會與上面範例相同：
15
使用 COLS 與 ROWS 屬性來設定分割視窗的大小
16
設定 FRAMESET 邊界寬度的屬性 FRAMEBORDER：設定是否顯示窗格的邊界。 BORDER：設定窗格分界處的厚度。
BORDER COLOR：設定分割線的顏色。 FRAMESPACING：與 BORDER 相同, 但只有 IE 認得。
17
<FRAME> 標籤的屬性 SRC 屬性：指定 HTML 檔, 其語法為 <FRAME SRC="HTML 網頁的 URL">。 NAME 屬性：為分割視窗命名, 分割視窗的名字必須由英文字母或數字符號開頭。其語法為 <FRAME NAME="這個視窗的名字">。
18
<FRAME> 標籤的屬性 SCROLLING 屬性：設定分割視窗的捲軸, 預設值是 AUTO, 表示內容沒有超過分割視窗大小時就不加上捲軸；一旦內容超出分割視窗的大小, 就自動加上捲軸。 當指定 SCROLLING="YES" 時, 不管內容多寡都會加上捲軸。反之, 當 SCROLLING="NO" 時, 不管內容多寡都不會加上任何捲軸。
19
<FRAME> 標籤的屬性 NORESIZE 屬性：鎖住分割視窗的大小。若不希望使用者可以任意更動分割視窗的大小, 加上 NORESIZE 屬性。
20
<FRAME> 標籤的屬性 <FRAME MARGINWIDTH=與左右邊界距離>, 用來設定內容與左右邊界的距離。
左右邊界最好設定一點以上, 以防止視窗內的內容觸碰到邊界。
21
<FRAME> 標籤的屬性 <FRAME MARGINHEIGHT=與上下邊界距離>：
22
<FRAME> 標籤的屬性
23
<NOFRAMES> 標籤 為了照顧尚未支援分割視窗語法的瀏覽器, 可以在 <FRAMESET>… </FRAMESET> 之間加上 <NOFRAMES>…</NOFRAMES> 標籤。 然後在 <NOFRAMES> 標籤中加入一段說明文字, 而未支援分割視窗標籤的瀏覽器, 可以看到這段說明文字。
24
<FRAME> 標籤的進階使用
<FRAMESET> 的巢狀結構 <FRAME> 的 NAME 屬性與 <A HREF> 的 TARGET 屬性 有 FRAME 相助, 層次分明
25
<FRAMESET> 的巢狀結構
26
<FRAMESET> 的巢狀結構
27
<FRAME> 的 NAME 屬性與 <A HREF> 的 TARGET 屬性
28
<FRAME> 的 NAME 屬性與 <A HREF> 的 TARGET 屬性
29
<FRAME> 的 NAME 屬性與 <A HREF> 的 TARGET 屬性
在 Ex09-08.htm 檔中, 會分別載入 Ex09-08a.htm 與 Ex09-08b.htm：
30
<FRAME> 的 NAME 屬性與 <A HREF> 的 TARGET 屬性
在 Ex09-08a.htm 中, 當按下左邊視窗中的超連結時, 右邊的分割視窗, 就會出現新的網頁內容：
31
有 FRAME 相助, 層次分明
32
有 FRAME 相助, 層次分明
33
有 FRAME 相助, 層次分明
34
<BASE TARGET="分割視窗的名字">
以 Ex09-09a.htm 為例, 可加上 <BASE TARGET="HOMEBODY"> 來取代所有的 TARGET="HOMEBODY"：
35
<BASE TARGET="分割視窗的名字">
36
Target Windows 介紹 TARGET=_blank TARGET=_self 再開啟一瀏覽視窗, 並顯示所要連結的網頁。
在目前視窗中顯示所要連結的網頁。 若目前網頁上設定 <BASE TARGET="某個分割視窗">, 會讓連結的畫面呈現在某個分割視窗中。
37
Target Windows 介紹 TARGET=_top TARGET=_parent
將瀏覽器內所有分割視窗拆掉, 使連結的網頁顯示在瀏覽器的主視窗上。 TARGET=_parent 將上一層 <FRAMESET> 所設定的分割視窗拆掉, 使連結的網頁顯示在上一層分割視窗內。
38
Frame 疑難雜症解決- Frame 外的天空
在指向外面的 <A HREF> 中加上 TARGET="_top" 可避免讓別人的網頁陷在自己的網頁上, 而造成侵權的爭議。
39
Frame 疑難雜症解決-Frame 與 Frame 相疊, 如何尋回來時路
40
Frame 疑難雜症解決-Frame 與 Frame 相疊, 如何尋回來時路
41
Frame 疑難雜症解決-Frame 與 Frame 相疊, 如何尋回來時路
42
Frame 疑難雜症解決-Frame 與 Frame 相疊, 如何尋回來時路
43
Frame 疑難雜症解決-Frame 與 Frame 相疊, 如何尋回來時路
44
Frame 疑難雜症解決-Frame 與 Frame 相疊, 如何尋回來時路
45
Inline Frames 為了解決 <FRAME> 與 <BODY> 標籤無法共用之缺點, 微軟提出了 Inline Frames 的觀念。 Inline Frames 的性質近似於 <IMG> 標籤所置入的圖片, 所以稱為 Inline Frames。
46
<IFRAME>…</IFRAME>-- 定義窗格
<IFRAME> 標籤不是用在 <FRAMESET> 之中, 而是用在 <BODY>…</BODY> 中。它的功能是在一般的網頁中建立窗格, 有點像電視上的子母畫面：
47
<IFRAME>…</IFRAME>-- 定義窗格
48
<IFRAME> 的屬性 ALIGN – 設定窗格與文字的對齊方式。 FRAMEBORDER – 設定窗格邊線的厚度。
HEIGHT、WIDTH – 設定窗格的高度與寬度。 MARGINHEIGHT、MARGINWIDTH – 設定顯示內容與上下、左右邊界的距離。 NAME – 設定窗格的名稱。 SCROLLING – 設定捲軸顯示的方式。
49
妙用無窮的 <OBJECT>
50
妙用無窮的 <OBJECT>
Similar presentations
