HTML语法介绍(进阶2).ppt

HTML語法介紹(進階2),班 級：網頁設計班 授課教師：呂卓堅 授課地點：電腦教室三,台北市立大安高級工業職業學校聯課活動,授課大綱,簡介視窗框架 視窗的水平分割 視窗的垂直分割 建立巢狀視窗框架 視窗框架的進階設定,簡介視窗框架,視窗框架可用於將視窗畫面分割成數個小視窗，且各個小視窗中，可以顯示不同的網頁，進而在瀏覽器中達到顯示不同網頁的效果。 基本架構： 框架的基本架構為與所共同組成。 所定義的視窗框架元件其地位相當於所定義的文件主題元件，因此與不可同時存在。,簡介視窗框架,基本語法： . . . 不可與合用,視窗的水平分割,欲使視窗成水平分割則在標籤需設定rows屬性，以定義一個水平分割畫面的視窗框架。,視窗的水平分割,基本語法 . . . ,視窗的水平分割,限制條件： 的個數與N的數目需相同。 高度N的設定方式有兩種： 一為整數設定，其單位為像素(pixel) Ex: 另一為設定畫面的百分比。 Ex:,視窗的水平分割,實作範例(以整數設定)： ,視窗的水平分割,實作範例(以百分比設定)： ,視窗的垂直分割,欲使視窗成垂直分割則在標籤需設定cols屬性，以定義一個垂直分割畫面的視窗框架。,視窗的垂直分割,基本語法 . . . ,視窗的垂直分割,限制條件： 的個數與N的數目需相同。 寬度N的設定方式有兩種： 一為整數設定，其單位為像素(pixel) Ex: 另一為設定畫面的百分比。 Ex:,視窗的垂直分割,實作範例(以整數設定)： ,視窗的垂直分割,實作範例(以百分比設定)： ,建立巢狀視窗框架,巢狀視窗框架是指一個視窗框架包含另一個視窗框架。 換言之，代表整個視窗框架運用數個標籤。,建立巢狀視窗框架,實作範例： ,視窗框架的進階設定,設定框架的厚度border 基本語法： n為一整數，表示框架之厚度，單位為像素(pixel)。,視窗框架的進階設定,實作練習： ,視窗框架的進階設定,設定子視窗的網頁來源SRC Src屬性用於指定預設載入視窗的Html文件位址。 基本語法： ,視窗框架的進階設定,實作範例： ,視窗框架的進階設定,實作範例：(續) 網頁一 第一個視窗 left ,視窗框架的進階設定,實作範例：(續) 網頁二 第二個視窗 center ,視窗框架的進階設定,實作範例：(續) 網頁三 第三個視窗 right ,視窗框架的進階設定,隱藏框架frameborder Frameborder屬性用於控制框架是否顯示。此屬性可用於標籤與標籤。 用於則所有的子框架皆不顯示。 用於則僅能控制該標籤所代表的子視窗。 基本語法： N=1 表示顯示框線 N=0 表示不顯示框線 預設值為1。,視窗框架的進階設定,實作範例：(必須先產生1.htm、2.htm、3.htm) ,視窗框架的進階設定,控制框架捲軸Scrolling Scrolling用以控制視窗是否顯示捲軸。 基本語法： Yes表示顯示 No表示不顯示 Auto表示自動設定,視窗框架的進階設定,實作範例： ,視窗框架的進階設定,控制調整視窗大小NoResize NoResize屬性的用途主要用以控制所分割的視窗讓使用者無法更改視窗的大小。 基本語法： ,視窗框架的進階設定,實作範例：(必須先產生1.htm、2.htm、3.htm) ,視窗框架的進階設定,框架目標屬性Target的設定 在框架式網頁的應用上，Target屬性是非常重要且廣為實用的屬性之一。 Target屬性主要用於控制所分割的框架顯現何種網頁，並使網頁看起來像是有組織的功能表單。,視窗框架的進階設定,基本語法一：(在功能框架頁中) A網頁 基本語法二：(在框架頁中) 整體視窗框架 ,視窗框架的進階設定,實作練習：(frame.htm) 整體視窗框架 ,視窗框架的進階設定,實作範例：(續)(1.htm) 網頁一 第一個視窗 A網頁 B網頁 C網頁 ,視窗框架的進階設定,實作範例：(續)(2.htm) 網頁二 第二個視窗 ,視窗框架的進階設定,實作範例：(續)(A.htm) A網頁 A網頁 ,視窗框架的進階設定,實作範例：(續)(B.htm) B網頁 B網頁 ,視窗框架的進階設定,實作範例：(續)(C.htm) C網頁 C網頁 ,參考文獻,Books: 位元文化(2001)，“CSS/HTML網頁設計”，學貫行銷股份有限公司。 W