網(wǎng)頁設(shè)計javascript-窗口框架.ppt

第8章窗口框架 第8章窗口框架 8 1窗口框架簡介8 2窗口框架控制8 3FRAME間的鏈接8 4浮動窗口 8 1窗口框架簡介 窗口框架可用于將窗口畫面分割成多個小窗口 且每個小窗口中 可以顯示不同的網(wǎng)頁 達到在瀏覽器中同時瀏覽多個不同網(wǎng)頁的效果 8 1 1什么是窗口框架 在介紹窗口框架文檔之前 先來看看其應(yīng)用實例 有一個感性認識 見下圖 8 1 2窗口框架的基本結(jié)構(gòu) 包含F(xiàn)rameset結(jié)構(gòu)的HTML文件 文件framePage htm的源代碼窗口框架文檔你的瀏覽器不支持帶框架的網(wǎng)頁 標簽用于定義一個窗口框架則用于定義窗口框架中的子窗口窗口框架文檔的書寫格式與一般的HTML文檔的書寫格式相同 只是用代替標簽 是一個成對標簽 有開始和結(jié)束標簽 在標簽內(nèi)使用了另一個標簽 用它來指定每一個窗口的內(nèi)容 說明 窗口框架的分割方式可分為兩種 一種是水平分割 rows屬性 另一種是垂直分割 cols屬性 8 1 3窗口框架的分割方式 8 2窗口框架控制 是成對標簽 首標簽和尾標簽之間的內(nèi)容是HTML文檔主體部分 使用框架的HTML文檔中不能出現(xiàn)標簽 否則會導(dǎo)致web瀏覽器忽略所有的框架定義而只顯示和之間的內(nèi)容 標簽主要有rows cols border bordercolor和frameborder五個屬性 8 2 1框架設(shè)置標簽frameset 1 格式 2 說明 rows說明窗口行分隔情況 cols說明列分隔 各參數(shù)值之間用逗號分隔 依次表示各個子窗口的高度 寬度 一 水平 垂直分割窗口屬性rows cols rows和cols可以用數(shù)字 百分比或剩余值以及這三種方式的混合來表示 數(shù)字 表示子窗口高度 寬度 所占的像素點數(shù) 百分比 表示子窗口高度 寬度 占整個瀏覽器窗口高度 寬度 的百分比 一 水平 垂直分割窗口屬性rows cols 剩余值 表示當前所有窗口設(shè)定之后的剩余部分 當符號 只出現(xiàn)一次 即其他子窗口的大小都有明確定義時 表示該子窗口的大小將根據(jù)瀏覽器窗口的大小而自動調(diào)整 當符號 出現(xiàn)一次以上時 表示按比例分割瀏覽器窗口的剩余空間 一 水平 垂直分割窗口屬性rows cols 表示將瀏覽器窗口分割為3列 第一個子窗口在第一列 窗口寬度為整個瀏覽器窗口寬度的40 第二個子窗口在第二列 占瀏覽器窗口剩余空間的2 3 即其寬度為整個瀏覽器窗口寬度的40 第三個子窗口占剩余空間的1 3 寬度為整個瀏覽器窗口寬度的20 示例 示例 橫向與縱向同時分割 SimpleFRAMESET 示例 嵌套分割 在標簽中 可運用border屬性控制分割窗口的框架的寬度 其語法如下所示 其中的數(shù)值代表此窗口框架的寬度 單位為像素 數(shù)值為整數(shù) 二 設(shè)置窗口框架寬度屬性border 示例 框架寬度設(shè)置 SimpleFRAMESET 在標簽中 可運用bordercolor屬性設(shè)置邊框的顏色 其語法如下所示 其中的 代表此邊框的顏色 取值可為RGB代碼 可以是單詞如 red 或十六進制如 00ff00 三 設(shè)置邊框顏色屬性bordercolor 示例 框架顏色設(shè)置 SimpleFRAMESET frameborder屬性用于控制窗口框架四周 是否顯示框架 此屬性可使用在標簽與標簽中 使用在標簽內(nèi)時 可控制窗口框架的所有子窗口 使用在標簽時 則僅能控制該標簽所代表的子窗口 其語法為 0代表不顯示框線 1代表顯示框線 其默認值為1 四 設(shè)置框架隱藏屬性frameborder 示例 框的設(shè)置 SimpleFRAMESET 每個子窗口均由標簽定義是單個的標簽 使用時 將它寫在的開始和結(jié)束標簽之間 它主要有六個屬性 src name marginwidth marginheight scrolling和noresize 8 2 2子窗口設(shè)置標簽frame src屬性是用于指定要導(dǎo)入到該子窗口的HTML文件 其語法如下所示 如果一個標簽中沒有src屬性 則該窗口顯示為空 1 src屬性 name屬性是用來指定窗口的名稱 此屬性是可選的 當完成定義子窗口的名稱后 我們便可在超鏈接中 指定顯示網(wǎng)頁的子窗口 其語法如下所示 2 name屬性 scrolling屬性用于描述該窗口是否有滾動條 該屬性是可選的 其設(shè)置語法如下 各設(shè)置值所代表的意義依序為顯示 不顯示 自動設(shè)置 默認值是auto 3 scrolling屬性 noresize屬性是一個標志 沒有取值 它說明瀏覽者是否可以自行用鼠標調(diào)整窗口的大小 如果設(shè)定了noresize屬性 則窗口不能調(diào)整 如果默認 則可以自行調(diào)整窗口的大小 4 noresize屬性 marginwidth屬性 用來控制窗口內(nèi)顯示的內(nèi)容與窗口左右邊緣的距離 該屬性是取一個像素值 默認為1 該屬性是可選的 marginaheight屬性 用來控制窗口內(nèi)顯示的內(nèi)容與上下邊緣的距離 該屬性是取一個像素值 默認為1 該屬性是可選的 5 設(shè)置邊距屬性marginwidth marginheight 對于框架網(wǎng)頁中的超鏈接 可用target屬性指定該鏈接的內(nèi)容在哪個窗口顯示 8 3FRAME間的鏈接 31 如在本章的第一個例子中 放置文件的功能是由下面的代碼片段實現(xiàn)的 在文件left html中 放置文件的功能是由下面的代碼片段實現(xiàn)的 1 春望2 春曉 分析第一個例子 32 用target屬性指定的目標窗口名稱 必須使用字母 數(shù)字字符 否則窗口名將被忽略 有幾個特定的窗口名例外 這幾個窗口名有特殊含義 它們是 blank self parent和 top target屬性 33 target blank 當將target屬性設(shè)置為 blank時 若單擊超鏈接后 將打開一個新窗口來顯示網(wǎng)頁 target self 當將target屬性設(shè)置為 self時 則將在同一窗口中顯示鏈接的網(wǎng)頁 target屬性 34 target parent 當將target屬性設(shè)置為 parent時 若單擊超鏈接后 該鏈接網(wǎng)頁將導(dǎo)入目前子窗口的上一層框架 若沒有上層 則導(dǎo)入在同一窗口中 target top 當將target屬性設(shè)置為 top時 則將脫離目前的窗口框架 在最上層的窗口框架中 顯示鏈接的網(wǎng)頁 target屬性 示例 AAA html文件 Menu html文件我們的任務(wù)我們的成員我們的公司 示例 37 在一個頁面中直接引入另一個頁面 這種技術(shù)稱為浮動的窗口 Floatingframe 也叫 內(nèi)部框架 在HTML中通過iframe標簽實現(xiàn) 其語法如下所示 其中 初始頁面的URL 8 4浮動窗口 屬性說明 src 文件的路徑 既可是HTML文件 也可以是文本 ASP 以及GIF JPEG JPG PNG等圖片文件 width height 畫中畫 區(qū)域的寬與高 scrolling 當SRC的指定的HTML文件在指定的區(qū)域顯示不完時 滾動選項 如果設(shè)置為NO 則不出現(xiàn)滾動條 如為Auto 則自動出現(xiàn)滾動條 如為Yes 則顯示 屬性說明 FrameBorder 區(qū)域邊框的寬度 為了讓 畫中畫 與鄰近的內(nèi)容相融合 常設(shè)置為0 Name 子窗口名稱Marginheight marginwidth 指定文字與邊界的距離 示例 頁內(nèi)框架示例李白靜思怨情真可惜 您的瀏覽器不支持框架 示例 file1 htm file1 htm李白