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

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