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

HTML語法介紹 進階2 班級 網頁設計班授課教師 呂卓堅授課地點 電腦教室三 台北市立大安高級工業職業學校聯課活動 授課大綱 簡介視窗框架視窗的水平分割視窗的垂直分割建立巢狀視窗框架視窗框架的進階設定 簡介視窗框架 視窗框架可用於將視窗畫面分割成數個小視窗 且各個小視窗中 可以顯示不同的網頁 進而在瀏覽器中達到顯示不同網頁的效果 基本架構 框架的基本架構為與所共同組成 所定義的視窗框架元件其地位相當於所定義的文件主題元件 因此與不可同時存在 簡介視窗框架 基本語法 不可與合用 視窗的水平分割 欲使視窗成水平分割則在標籤需設定rows屬性 以定義一個水平分割畫面的視窗框架 視窗的水平分割 基本語法 視窗的水平分割 限制條件 的個數與N的數目需相同 高度N的設定方式有兩種 一為整數設定 其單位為像素 pixel Ex 另一為設定畫面的百分比 Ex 視窗的水平分割 實作範例 以整數設定 視窗的水平分割 實作範例 以百分比設定 視窗的垂直分割 欲使視窗成垂直分割則在標籤需設定cols屬性 以定義一個垂直分割畫面的視窗框架 視窗的垂直分割 基本語法 視窗的垂直分割 限制條件 的個數與N的數目需相同 寬度N的設定方式有兩種 一為整數設定 其單位為像素 pixel Ex 另一為設定畫面的百分比 Ex 視窗的垂直分割 實作範例 以整數設定 視窗的垂直分割 實作範例 以百分比設定 建立巢狀視窗框架 巢狀視窗框架是指一個視窗框架包含另一個視窗框架 換言之 代表整個視窗框架運用數個標籤 建立巢狀視窗框架 實作範例 視窗框架的進階設定 設定框架的厚度 border基本語法 n為一整數 表示框架之厚度 單位為像素 pixel 視窗框架的進階設定 實作練習 視窗框架的進階設定 設定子視窗的網頁來源 SRCSrc屬性用於指定預設載入視窗的Html文件位址 基本語法 視窗框架的進階設定 實作範例 視窗框架的進階設定 實作範例 續 網頁一第一個視窗left 視窗框架的進階設定 實作範例 續 網頁二第二個視窗center 視窗框架的進階設定 實作範例 續 網頁三第三個視窗right 視窗框架的進階設定 隱藏框架 frameborderFrameborder屬性用於控制框架是否顯示 此屬性可用於標籤與標籤 用於則所有的子框架皆不顯示 用於則僅能控制該標籤所代表的子視窗 基本語法 N 1表示顯示框線N 0表示不顯示框線預設值為1 視窗框架的進階設定 實作範例 必須先產生1 htm 2 htm 3 htm 視窗框架的進階設定 控制框架捲軸 ScrollingScrolling用以控制視窗是否顯示捲軸 基本語法 Yes表示顯示No表示不顯示Auto表示自動設定 視窗框架的進階設定 實作範例 視窗框架的進階設定 控制調整視窗大小 NoResizeNoResize屬性的用途主要用以控制所分割的視窗讓使用者無法更改視窗的大小 基本語法 視窗框架的進階設定 實作範例 必須先產生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網頁設計 學貫行銷股份有限公司 We