1、第七章 創(chuàng)建框架網(wǎng)頁(yè),7.1 框架的含義和基本構(gòu)成 框架就是把一個(gè)瀏覽器窗口劃分為若干個(gè)小窗口，每個(gè) 窗口可以顯示不同的 URL 網(wǎng)頁(yè)。使用框架可以非常方便的 在瀏覽器中同時(shí)瀏覽不同的頁(yè)面效果，也可以非常方便的完 成導(dǎo)航工作。 而所有的框架標(biāo)記要放在一個(gè) html 文檔中。html頁(yè)面 的文檔體標(biāo)簽被框架集標(biāo)簽所取代，然后 通過(guò)的子窗口標(biāo)簽定義每一個(gè)子窗口和 子窗口的頁(yè)面屬性。,語(yǔ)法格式： . Frame子框架的src屬性的每個(gè)URL值指定了一個(gè)html文件（這 個(gè)文件必須事先做好）地址，地址路徑可使用絕對(duì)路徑或相對(duì)路 徑，這個(gè)文件將載入相應(yīng)的窗口中。,框架結(jié)構(gòu)可以根據(jù)框架集標(biāo)簽的分割屬性分為

2、3種： 左右分割窗口 上下分割窗口 嵌套分割窗口,7.2 框架集控制 的屬性 border 設(shè)置邊框粗細(xì),默認(rèn)是5象素 bordercolor 設(shè)置邊框顏色 frameborder 指定是否顯示邊框：“0”代表不顯示邊框， “1”代表顯示邊框 cols 用“象素?cái)?shù)” 和 “%”分割左右窗口,“*”表示剩 余部分 rows 用“象素?cái)?shù)” 和 “%”分割上下窗口,“*”表示剩 余部分 framespacing=“5” 表示框架與框架間的保留空白的距離 noresize 設(shè)定框架不能夠調(diào)節(jié)，只要設(shè)定了前面的，后面 的將繼承,1. 左右分割窗口屬性：cols 如果想要在水平方向?qū)g覽器分割多個(gè)窗口，這

3、需要使用到 框架集的左右分割窗口屬性cols。分割幾個(gè)窗口其cols的值就有幾 個(gè)，值的定義為寬度，可以是數(shù)字(單位為像素)，也可以是百分比 和剩余值。各值之間用逗號(hào)分開(kāi)。其中剩余值用“*”號(hào)表示，剩 余值表示所有窗口設(shè)定之后的剩余部分，當(dāng)“*”只出現(xiàn)一次時(shí)， 表示該子窗口的大小將根據(jù)瀏覽器窗口的大小自動(dòng)調(diào)整，當(dāng)“*” 出現(xiàn)一次以上時(shí)，表示按比例分割剩余的窗口空間。cols的默認(rèn)值 為一個(gè)窗口。,如： 將窗口分為40%，40%，20% 將100像素以外的窗口平均分配將窗口分為三等份 2.上下分割窗口屬性：rows 上下分割窗口的屬性設(shè)置和左右窗口的屬性設(shè)定是一樣的，參 照上面所述就可以了。,7

4、.3 子窗口標(biāo)簽的設(shè)定是個(gè)單標(biāo)簽,標(biāo)簽要放在框架集frameset 中,設(shè)置了幾個(gè)子窗口就必須對(duì)應(yīng)幾個(gè)標(biāo)簽，而 且每一個(gè)標(biāo)簽內(nèi)還必須設(shè)定一個(gè)網(wǎng)頁(yè)文件（src=*.html, 其常用屬性有: src 指示加載的url文件的地址 bordercolor 設(shè)置邊框顏色frameborder指示是否要邊框,1顯 示邊框，0不顯示（不提倡用 yes 或 no）border 設(shè)置邊框粗細(xì) name 指示框架名稱(chēng),是連結(jié)標(biāo)記的target所要的參數(shù) noresize 指示不能調(diào)整窗口的大小,省略此項(xiàng)時(shí)就可調(diào)整scorlling 指示是否要滾動(dòng)條 auto 根據(jù)需要自動(dòng)出現(xiàn),Yes有,No無(wú),marginwi

5、dth 設(shè)置內(nèi)容與窗口左右邊緣的距離，默認(rèn)為1 marginheight 設(shè)置內(nèi)容與窗口上下邊緣的邊距，默認(rèn)為1 width 框窗的寬及高 默認(rèn)為width=100， height=100 align 可選值為 left, right, top, middle, bottom 子窗口的排列遵循從左到右，從上到下的次序規(guī)則。 1. 窗口的左右設(shè)定： 舉例7-1 首先我們新建一個(gè)文件夾，然后做四個(gè)要放到子窗口中的頁(yè) 面，sl1.html、sl2.html、sl3.html、sl4.html。,2.窗口的上下設(shè)定 舉例7-2 3.窗口的嵌套設(shè)定 舉例7-3 舉例7-4 舉例7-5,大家看到上面的文件

6、中還有一對(duì)標(biāo) 簽，即使在做框架集網(wǎng)頁(yè)時(shí)沒(méi)有這對(duì)標(biāo)簽，文件在很多瀏覽器解析 時(shí)也會(huì)自動(dòng)生成標(biāo)簽，這對(duì)標(biāo)簽的作用是當(dāng)瀏覽者使用 的瀏覽器太舊，不支援框架這個(gè)功能時(shí)，他看到的將會(huì)是一片空 白。為了避免這種情況，可使用 這個(gè)標(biāo)記，當(dāng)使用的 瀏覽器看不到框架時(shí)，他就會(huì)看到 你的瀏覽器不支持 框架網(wǎng)頁(yè)之間的內(nèi)容，而不是一片空白。這些內(nèi)容可 以是提醒 瀏覽轉(zhuǎn)用新的瀏覽器的字句，甚至是一個(gè)沒(méi)有框架的網(wǎng) 頁(yè)或能自動(dòng)切換至沒(méi)有框架的版本。,7.4 窗口的名稱(chēng)和鏈接 如果在窗口中要做鏈接，就必須對(duì)每一個(gè)子窗口命名， 以便于被用于窗口間的鏈接，窗口命名要有一定的規(guī)則，名 稱(chēng)必須是單個(gè)英文單詞，允許使用下滑線(xiàn)，但不允許

7、使用 “,”句點(diǎn)“和空格等，名稱(chēng)必須以字母開(kāi)頭，不能使用數(shù) 字，還不能使用網(wǎng)頁(yè)腳本中保留的關(guān)鍵字，在窗口的鏈接中 還要用到一個(gè)新的屬性“targe”,用這個(gè)屬性就可以將被鏈 接的內(nèi)容放置到想要放置的窗口內(nèi)。,下面的實(shí)例就是窗口內(nèi)的命名和鏈接方法 舉例7-6 7-6中的片斷代碼格式為： 愛(ài)在深秋圖像對(duì)文字的 水平居中圖像與文本之 間的距離圖像大小的設(shè) 定新浪網(wǎng)站,舉例7-7 7-7的片斷代碼格式為： ,7.5 浮動(dòng)窗口 這標(biāo)記只適用於IE瀏覽器。它的作用是在瀏覽器窗口 中可以嵌入一個(gè)框窗以顯示另一個(gè)文件。它是一個(gè)圍堵標(biāo)記，但圍 堵的字句只有在瀏覽器不支援 iframe 標(biāo)記時(shí)才會(huì)顯示，如 一樣，

8、可以放些提醒字句之類(lèi)。通常 iframe 配合一 個(gè)辨認(rèn)瀏覽器的 Java Script 會(huì)較好，若 JavaScript 認(rèn)出該瀏 覽器并非 Internet Explorer 便會(huì)切換至另一版本。 的參數(shù)設(shè)定格式： ,屬性的含義 src 浮動(dòng)窗框中的要顯示的頁(yè)面文件的路徑，可以是相對(duì)或絕對(duì) name 此框窗名稱(chēng)，這是連結(jié)標(biāo)記的target參數(shù)所要的 align 可選值為left,right,top,middle,bottom，作用不大 height 框窗的高，以pixels為單位 width 框窗的寬，以pixels為單位 marginwidth 該插入的文件與框邊所保留的空間 margi

9、nheight 該插入的文件與框邊所保留的空間 frameborder 使用1表示顯示邊框，0則不顯示。（可以是yes或no） scrolling 使用Yes表示容許卷動(dòng)（內(nèi)定），No則不容許卷動(dòng)。,舉例7-8 注意: Internet Explorer 5.5 支持浮動(dòng)框架的內(nèi)容透明。如果 想要為浮動(dòng)框架定義透明內(nèi)容，則必須滿(mǎn)足下列條件： 與 IFRAME 元素一起使用的 ALLOWTRANSPARENCY 標(biāo)簽屬 性必須設(shè)置為 true。 在 IFRAME 內(nèi)容源文檔，background-color 或 BODY 元 素的 BGCOLOR 標(biāo)簽屬性必須設(shè)置為 transparent。,第

10、七章總結(jié)練習(xí) 一、選擇題 1、在文檔編輯窗口中，按下（）的同時(shí)單擊框架，即可選中該框 架。 A、shift鍵 B、alt鍵 C、ctrl鍵 D、enter鍵 2、以下可以做框架名的是（） A、frame name B、frame_name C、frame-name D、frame。Name 3、以下選項(xiàng)中，不屬于對(duì)框架優(yōu)點(diǎn)描述的是（） A、便于站點(diǎn)中多個(gè)網(wǎng)頁(yè)公用部分的共享 B、便于實(shí)現(xiàn)導(dǎo)航欄功能 C、頁(yè)面切換時(shí)將得到較快的速度 D、頁(yè)面切換采取整個(gè)頁(yè)面全部刷新的方式,二、填空題 1、創(chuàng)建框架，實(shí)際上是創(chuàng)建一個(gè)_，可以通過(guò)兩種方式來(lái)實(shí) 現(xiàn)： _，或者_(dá)。 2、嵌套框架是指_。 3、對(duì)框架的保存操作只能保存_而不能保存全部文