第 9 章 分割視窗 - Frame 著作權所有 © 旗標出版股份有限公司.

Slides:



Advertisements
Similar presentations
E-portfolio 個人履歷網站教學
Advertisements

第四週課程 1 (10/10~10/16) 如何建立資料. 原始資料範例 a1~a5 表示選擇題,輸入原始答案,如 A 、B、C、D b1~b5 表示填充題, c1~c5 表示計算題,輸入得分.
Chapter 5 全球資訊網 5-1 World Wide Web 的誕生 5-2 使用Internet Explorer
專題製作 許惠淑.
第5章 HTML 標籤介紹.
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
第三讲 站点链接与表格布局.
第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
dreamweavercs5 页面的框架结构
A級無障礙網頁製作 主講人:劉威良 臺南大學資訊教育所
HTML 語法教學 授課:彭穎聰 老師.
数据访问页.
第 2 章 HTML語法 製作.
第二章 網際網路網頁的設計.
HTML.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
建國技術學院資訊管理學系 饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 2004/7/5.
网 页 制 作 DREAMWEAVERMX 2004.
DreamWeaver MX (VI) 林偉川.
DreamWeaver MX (II) 林偉川.
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
Q101 在701 SDX Linux上的標準安裝與使用程序v2
第2章 超文本标记语言HTML.
網頁製作入門 電算中心 – 蔡京甫.
第 7 章 設定網頁背景與音樂.
R教學 安裝RStudio 羅琪老師.
What’s New in HTML5.
W3C标准网页制作 主讲教师:张 涛.
W3C标准网页制作 主讲教师:张 涛.
网 站 设 计 与 建 设 Website design and developments
Word與PowerPoint的結合 建功國小 陳旻杰 健行國小 張慧如.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
项目9 使用框架布局制作网页.
系統設定 IE8相容性檢視
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
SuperGIS 2.0 基本架構介紹.
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
CHAPTER 11 善用框架分割網頁版面.
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
Ch20. 計算器 (Mac 版本).
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
網路程式設計期末project B 張芸菱.
Dreamweaver 8 潘雅真老師.
PowerPoint 2019/4/9.
電子商務新版面問題排除.
HTML – 超連結與圖片 資訊教育.
伸峰科技股份有限公司 李書帆 SanfongWeb 網頁編修 伸峰科技股份有限公司 李書帆
如何利用範本來製作網頁.
Prepared by : Au Kit Ming
Word – 排版 資訊教育.
個人網路空間 資訊教育.
CVPlayer下載及安裝& IVS操作說明
HTML大探索.
MiRanda Java Interface v1.0的使用方法
CHAPTER 14 視窗與超連結的各種變化.
第6章 框架实现多窗口网页.
網站的設計 HTML 超文本標記語言( Hyper Text Markup Language)
從HTML表格到CSS 靜宜大學 資管系 楊子青.
Dreamweaver 進階網頁製作 B 許天彰.
Brief Guide of FrontPage
連結 (anchor link).
DreamWeaver MX (IV) 林偉川.
使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師
網頁製作 1032 數位教材 單元7 : 超連結 主講老師:徐培倫.
第五章 自訂佈景主題與文字處理 講授者:詹雅愔.
HTML5.
教师:李金双 网页制作 教师:李金双
Presentation transcript:

第 9 章 分割視窗 - Frame 著作權所有 © 旗標出版股份有限公司

本章提要 令人眼睛為之一亮的分割視窗 Frame 基本架構介紹 <FRAME> 標籤的進階使用 Target Window 介紹 Inline Frames

令人眼睛為之一亮的分割視窗

令人眼睛為之一亮的分割視窗 分割視窗的操作特色 如何在有分割視窗的網站內進退自如

分割視窗的操作特色 對網頁設計者而言 可以對網頁做更多的掌控與變化 使網站更具層次感 對瀏覽網站的使用者而言 易於瀏覽網站

如何在有分割視窗的網站內 進退自如 若遇到沒有留下覽用的超連結網站, 請使用工具列上的上一頁或下一頁鈕切換。或在分割視窗中按滑鼠右鈕:

Frame 基本架構介紹 Frame 實作初探 製作分割視窗--<FRAMESET>…</FRAMESET> 標籤 將 HTML 檔嵌入分割視窗-- <FRAME> 標籤 <NOFRAMES> 標籤

Frame 實作初探

製作分割視窗 <FRAMESET>…</FRAMESET> 標籤:

製作分割視窗

FRAMESET 的 COLS 與 ROWS 屬性 <FRAMESET ROWS="*,*"> - 上下分割

使用 COLS 與 ROWS 屬性來設定分割視窗的大小

使用 COLS 與 ROWS 屬性來設定分割視窗的大小

使用 COLS 與 ROWS 屬性來設定分割視窗的大小 將上面範例改寫, 則結果會與上面範例相同:

使用 COLS 與 ROWS 屬性來設定分割視窗的大小

設定 FRAMESET 邊界寬度的屬性 FRAMEBORDER:設定是否顯示窗格的邊界。 BORDER:設定窗格分界處的厚度。 BORDER COLOR:設定分割線的顏色。 FRAMESPACING:與 BORDER 相同, 但只有 IE 認得。

<FRAME> 標籤的屬性 SRC 屬性:指定 HTML 檔, 其語法為 <FRAME SRC="HTML 網頁的 URL">。 NAME 屬性:為分割視窗命名, 分割視窗的名字必須由英文字母或數字符號開頭。其語法為 <FRAME NAME="這個視窗的名字">。

<FRAME> 標籤的屬性 SCROLLING 屬性:設定分割視窗的捲軸, 預設值是 AUTO, 表示內容沒有超過分割視窗大小時就不加上捲軸;一旦內容超出分割視窗的大小, 就自動加上捲軸。 當指定 SCROLLING="YES" 時, 不管內容多寡都會加上捲軸。反之, 當 SCROLLING="NO" 時, 不管內容多寡都不會加上任何捲軸。

<FRAME> 標籤的屬性 NORESIZE 屬性:鎖住分割視窗的大小。若不希望使用者可以任意更動分割視窗的大小, 加上 NORESIZE 屬性。

<FRAME> 標籤的屬性 <FRAME MARGINWIDTH=與左右邊界距離>, 用來設定內容與左右邊界的距離。 左右邊界最好設定一點以上, 以防止視窗內的內容觸碰到邊界。

<FRAME> 標籤的屬性 <FRAME MARGINHEIGHT=與上下邊界距離>:

<FRAME> 標籤的屬性

<NOFRAMES> 標籤 為了照顧尚未支援分割視窗語法的瀏覽器, 可以在 <FRAMESET>… </FRAMESET> 之間加上 <NOFRAMES>…</NOFRAMES> 標籤。 然後在 <NOFRAMES> 標籤中加入一段說明文字, 而未支援分割視窗標籤的瀏覽器, 可以看到這段說明文字。

<FRAME> 標籤的進階使用 <FRAMESET> 的巢狀結構 <FRAME> 的 NAME 屬性與 <A HREF> 的 TARGET 屬性 有 FRAME 相助, 層次分明

<FRAMESET> 的巢狀結構

<FRAMESET> 的巢狀結構

<FRAME> 的 NAME 屬性與 <A HREF> 的 TARGET 屬性

<FRAME> 的 NAME 屬性與 <A HREF> 的 TARGET 屬性

<FRAME> 的 NAME 屬性與 <A HREF> 的 TARGET 屬性 在 Ex09-08.htm 檔中, 會分別載入 Ex09-08a.htm 與 Ex09-08b.htm:

<FRAME> 的 NAME 屬性與 <A HREF> 的 TARGET 屬性 在 Ex09-08a.htm 中, 當按下左邊視窗中的超連結時, 右邊的分割視窗, 就會出現新的網頁內容:

有 FRAME 相助, 層次分明

有 FRAME 相助, 層次分明

有 FRAME 相助, 層次分明

<BASE TARGET="分割視窗的名字"> 以 Ex09-09a.htm 為例, 可加上 <BASE TARGET="HOMEBODY"> 來取代所有的 TARGET="HOMEBODY":

<BASE TARGET="分割視窗的名字">

Target Windows 介紹 TARGET=_blank TARGET=_self 再開啟一瀏覽視窗, 並顯示所要連結的網頁。 在目前視窗中顯示所要連結的網頁。 若目前網頁上設定 <BASE TARGET="某個分割視窗">, 會讓連結的畫面呈現在某個分割視窗中。

Target Windows 介紹 TARGET=_top TARGET=_parent 將瀏覽器內所有分割視窗拆掉, 使連結的網頁顯示在瀏覽器的主視窗上。 TARGET=_parent 將上一層 <FRAMESET> 所設定的分割視窗拆掉, 使連結的網頁顯示在上一層分割視窗內。

Frame 疑難雜症解決- Frame 外的天空 在指向外面的 <A HREF> 中加上 TARGET="_top" 可避免讓別人的網頁陷在自己的網頁上, 而造成侵權的爭議。

Frame 疑難雜症解決-Frame 與 Frame 相疊, 如何尋回來時路

Frame 疑難雜症解決-Frame 與 Frame 相疊, 如何尋回來時路

Frame 疑難雜症解決-Frame 與 Frame 相疊, 如何尋回來時路

Frame 疑難雜症解決-Frame 與 Frame 相疊, 如何尋回來時路

Frame 疑難雜症解決-Frame 與 Frame 相疊, 如何尋回來時路

Frame 疑難雜症解決-Frame 與 Frame 相疊, 如何尋回來時路

Inline Frames 為了解決 <FRAME> 與 <BODY> 標籤無法共用之缺點, 微軟提出了 Inline Frames 的觀念。 Inline Frames 的性質近似於 <IMG> 標籤所置入的圖片, 所以稱為 Inline Frames。

<IFRAME>…</IFRAME>-- 定義窗格 <IFRAME> 標籤不是用在 <FRAMESET> 之中, 而是用在 <BODY>…</BODY> 中。它的功能是在一般的網頁中建立窗格, 有點像電視上的子母畫面:

<IFRAME>…</IFRAME>-- 定義窗格

<IFRAME> 的屬性 ALIGN – 設定窗格與文字的對齊方式。 FRAMEBORDER – 設定窗格邊線的厚度。 HEIGHT、WIDTH – 設定窗格的高度與寬度。 MARGINHEIGHT、MARGINWIDTH – 設定顯示內容與上下、左右邊界的距離。 NAME – 設定窗格的名稱。 SCROLLING – 設定捲軸顯示的方式。

妙用無窮的 <OBJECT>

妙用無窮的 <OBJECT>