CHAPTER 11 善用框架分割網頁版面.

Slides:



Advertisements
Similar presentations
會計學 Chapter 1 基本概念 1-2 基本概念 第一節 單式簿記 第二節 會計學的定義與功用 第三節 會計學術與會計人員 第四節 企業組織 第五節 會計學基本第五節 會計學基本慣例 第六節 會計方程式 第七節 財務報表.
Advertisements

林佳漢 亞洲大學 資訊傳播學系. 大綱 建立表格 表格屬性與外觀的調整 版面配置基礎 調整表格來建立網頁版面 能力指標 課堂活動.
Chapter 5 全球資訊網 5-1 World Wide Web 的誕生 5-2 使用Internet Explorer
槍砲病菌與鋼鐵 第三組.
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
財務報表的內容 四種報表格式 財務報表的補充說明 會計師簽證的重要性 合併報表 財務報表分析 Chapter 2 財務報表的內容.
無線寬頻分享器設定範例 銜接硬體線路 推斷無線基地台的IP 設定無線基地台 相關觀念解釋.
HTML 語法教學 授課:彭穎聰 老師.
陳維魁 博士 儒林圖書公司 第九章 資料抽象化 陳維魁 博士 儒林圖書公司.
第 2 章 HTML語法 製作.
HTML.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
網頁的版面配置 許明宗.
第 1 章 使用 APP INVENTOR 2 開發 ANDROID APP
DreamWeaver MX (VI) 林偉川.
DreamWeaver MX (II) 林偉川.
Chapter14 HTML簡介與簡易網頁製作
第2章 超文本标记语言HTML.
網頁製作入門 電算中心 – 蔡京甫.
第 7 章 設定網頁背景與音樂.
R教學 安裝RStudio 羅琪老師.
What’s New in HTML5.
影格速率與時間軸刻度比例 接著我們再來看看時間軸面板上其它的功能。在時間軸面板下方會顯示目前動畫所設定的影格速率 (Frame Rate ) 等資訊:
W3C标准网页制作 主讲教师:张 涛.
W3C标准网页制作 主讲教师:张 涛.
安裝JDK 安裝Eclipse Eclipse 中文化
网 站 设 计 与 建 设 Website design and developments
自由軟體介紹(一) 把flash通通帶回家 報告人:陳俊銘.
第 9 章 分割視窗 - Frame 著作權所有 © 旗標出版股份有限公司.
项目9 使用框架布局制作网页.
檔案與磁碟的基本介紹.
系統設定 IE8相容性檢視
FTP檔案上傳下載 實務與運用.
網頁切換移轉 JS vs. ASP.NET.
Chap3 Linked List 鏈結串列.
VS.NET 2003 IDE.
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
(ex. 博客來 Internet上有功能的網站 (ex. 博客來
班級網頁與部落格 自由軟體簡介 校網資源說明 文雅國小 資訊組.
網路程式設計期末project B 張芸菱.
Dreamweaver 8 潘雅真老師.
PowerPoint 2019/4/9.
電子商務新版面問題排除.
HTML – 超連結與圖片 資訊教育.
伸峰科技股份有限公司 李書帆 SanfongWeb 網頁編修 伸峰科技股份有限公司 李書帆
網頁程式概論 建國科技大學資管系 饒瑞佶 2015/9 V1 2016/4 V2 2016/9 V3.
網頁資料知多少? 事 實 ? 謠言?.
Install OpenCV C++ with Visual Studio 2017 on Windows PC
如何利用範本來製作網頁.
VS.NET 2003 IDE.
GridView操作 (II).
六年級電腦科 KompoZer w3.dhps.tp.edu.tw.
取得與安裝TIDE 從TIBBO網站取得TIDE
MiRanda Java Interface v1.0的使用方法
CHAPTER 14 視窗與超連結的各種變化.
第6章 框架实现多窗口网页.
網站的設計 HTML 超文本標記語言( Hyper Text Markup Language)
Dreamweaver 進階網頁製作 B 許天彰.
義守大學資訊管理研究所 在職專班 網頁色彩學--- 以顏色分析網頁設計 指導老師:吳有龍教授 學生:陳正忠 學號: G.
Brief Guide of FrontPage
國立台灣大學 關懷弱勢族群電腦課程 By 資訊工程 黃振修
連結 (anchor link).
電子郵件簡報.
DreamWeaver MX (IV) 林偉川.
多國語系 建國科技大學 資管系 饒瑞佶.
網頁製作 1032 數位教材 單元7 : 超連結 主講老師:徐培倫.
第五章 自訂佈景主題與文字處理 講授者:詹雅愔.
NFC (近場通訊, Near Field Communication) 靜宜大學資管系 楊子青
Chapter 4 Multi-Threads (多執行緒).
HTML5.
Presentation transcript:

CHAPTER 11 善用框架分割網頁版面

11-1 網頁版型與框架 當您瀏覽網站時,應該會經常看到被分割成不同區塊的網頁,這就是所謂的框架效果。 11-1 網頁版型與框架 當您瀏覽網站時,應該會經常看到被分割成不同區塊的網頁,這就是所謂的框架效果。 透過視窗的分割可以讓網頁呈現更多的東西,也便於網頁觀眾瀏覽網頁。

認識框架 框架就是將網頁加以分割,使網頁分隔為不同的版面,每個版面都可以放置不同的內容。 部份框架的內容是固定的,而部份框架的內容則是活動的,可以此來進行版面配置。

圖11-1 框架網頁

使用框架網頁的優缺點 使用框架的好處是不需要在每個網頁都放置導覽列或選單等固定的內容,只有變動的主頁區需要讀取,可以加快網頁的讀取效率。 缺點則是在設計含框架的網站時,必須考量到網頁的整體設計和版面,而且在設定超連結時,也會較為複雜。

11-2 製作框架網頁 要在網頁上製作分割為兩個以上網頁的效果,要透過<FRAME>標籤和<FRAMESET>來設定。 使用框架來分割網頁時,不是在<BDOY>標籤中寫入網頁程式碼,而是在<GRAMESET>標籤之中。

製作框架網頁的第一步 製作框架網頁時,必須先準備至少二個網頁文件才能動手實作,也就是要先完成子網頁的內容,再動手製作放置子網頁的母網頁。

網頁的切割 透過COLS和ROWS這兩個屬性就可以設定要左右分割還是上下分割網頁視窗。 常見的網頁多半是由不均等的視窗組成,這時只要改用百分比數字或是直接加上數值來區分就可以了。

11-3 框架網頁的基本屬性設定 本節將說明<FRAMESET>標籤和<FRAME>標籤常用的屬性,來調整和美化你的框架網頁。

邊界框架的設定 框架網頁預設是會有邊界的,若不希望顯示窗格的邊界,可以更改其屬性。 相關屬性: FRAMEBORDER BORDER BORDER COLOR FRAMESPACING

<FRAME>標籤的屬性設定 替框架命名 <name> 設定分割網頁視窗的捲軸 <SCROLLING> 固定分割視窗的大小 <NORSIZE> 網頁內容與邊界距離的設定 <MARGINWIDTH> <MARGINHEIGHT>

不支援框架的瀏覽器設定 當網頁觀眾的瀏覽器不支援框架效果時,將會看不到任何內容。利用<NOFRAMES>標籤加上說明文字,即可讓這些使用者知道為甚麼看不到網頁。

11-4 框架網頁的超連結設定 設定框架網頁時最麻煩的就是超連結的設定,因為必須逐一設定超連結所顯示目標視窗的位置,是既有視窗(也就是原視窗)、新視窗或是框架網頁。

選單列超連結的設定 要設定超連結時要在<A HREF>之後加上TARGET屬性來指定開啟的目的視窗。 框架網頁名稱之外的設定值: _TOP _BLANK _SELF _PATENT

圖11-18 在框架網頁顯示網頁

11-5 框架的巢狀結構 想要同時上下和左右分割,或者是製作左右兩邊不均等的網頁時,就必須使用巢狀結構。

多層的框架設定 巢狀結構就是在框架底下還有第二層的框架,將整個視窗切割為數個小視窗。 以上、左右分割的視窗來說。就有圖11-21的這二種分割方式。

圖11-21 不同的切割方式