單元3任務(wù)2 框架課件

1、 任務(wù)2 框架的設(shè)計(jì)1【任務(wù)陳述】【知識(shí)準(zhǔn)備】框架的基本結(jié)構(gòu)基本語法： .Frame子框架的src屬性的每個(gè)URL值指定了一個(gè)HTML文件。u框架集就是用來定義這一HTML文件為框架模式，并設(shè)定視窗如何分割的文件。u通俗一點(diǎn)地說，框架集就是存放框架結(jié)構(gòu)的文件，也是訪問框架文件的入口文件。u框架集基本屬性：屬性屬性說明說明border設(shè)置邊框粗細(xì)，默認(rèn)為設(shè)置邊框粗細(xì)，默認(rèn)為5像素像素bordercolor設(shè)置邊框顏色設(shè)置邊框顏色frameborder指定是否顯示邊框：指定是否顯示邊框：“0”便是不顯示邊框，便是不顯示邊框，“1”代表代表顯示邊框顯示邊框cols用用“像素?cái)?shù)像素?cái)?shù)”和和“%”分割左

2、右窗口，分割左右窗口，“*”表示剩余表示剩余部分部分rows用用“像素?cái)?shù)像素?cái)?shù)”和和“%”分割上下窗口，分割上下窗口，“*”表示剩余表示剩余部分部分framespacing表示框架與框架間的保留空白的距離表示框架與框架間的保留空白的距離noresize設(shè)置框架不要調(diào)節(jié)大小，只要設(shè)定了前面的，后面的設(shè)置框架不要調(diào)節(jié)大小，只要設(shè)定了前面的，后面的將繼承將繼承（1）左右分割窗口屬性cols語法： 將窗口分為40%，40%，20% 將300像素意外的兩個(gè)窗口平均分配 將窗口分為三等份（1）左右分割窗口屬性colsu值的定義為寬，可以是數(shù)字（單位為像素），也可以是百分比和剩余值。u剩余值用“*”號(hào)表示，

3、剩余值表示所有窗口設(shè)定之后的剩余部分，當(dāng)“*”只出現(xiàn)一次時(shí)，表示該子窗口的大小將根據(jù)瀏覽器窗口的大小自動(dòng)調(diào)整，當(dāng)“*”出現(xiàn)一次以上時(shí)，表示按比例分割剩余的窗口空間。ucols的默認(rèn)值為一個(gè)窗口（2）上下分割窗口屬性rows語法： u將頁面沿水平方向切割，也就是將頁面分成上下排列的多個(gè)窗口。 是個(gè)標(biāo)簽，標(biāo)簽要放在框架集frameset中，設(shè)置了幾個(gè)子窗口就必須對(duì)應(yīng)幾個(gè)標(biāo)簽，而且每一個(gè)標(biāo)簽內(nèi)還必須設(shè)定一個(gè)網(wǎng)頁文件（src=”*.html”）屬性屬性說明說明src指示加載的指示加載的url文件地址文件地址bordercolor設(shè)置邊框顏色設(shè)置邊框顏色frameborder指定是否顯示邊框：指定是否顯

4、示邊框：“0”便是不顯示邊框，便是不顯示邊框，“1”代表顯示邊框代表顯示邊框border設(shè)置邊框粗細(xì)設(shè)置邊框粗細(xì)name指示框架名稱，是鏈接標(biāo)簽的指示框架名稱，是鏈接標(biāo)簽的target所要的參數(shù)所要的參數(shù)noresize指示不能調(diào)整窗口的大小，省略此項(xiàng)時(shí)可調(diào)整指示不能調(diào)整窗口的大小，省略此項(xiàng)時(shí)可調(diào)整scorling指示是否要滾動(dòng)條，指示是否要滾動(dòng)條，auto根據(jù)需要自動(dòng)出現(xiàn)，根據(jù)需要自動(dòng)出現(xiàn)，yes有，有，no無無marginwidth設(shè)置內(nèi)容與窗口左右邊緣的距離，默認(rèn)值為設(shè)置內(nèi)容與窗口左右邊緣的距離，默認(rèn)值為1marginheight設(shè)置內(nèi)容與窗口上下邊緣的邊距，默認(rèn)值為設(shè)置內(nèi)容與窗口上下邊

5、緣的邊距，默認(rèn)值為1width框窗的寬及高，默認(rèn)為框窗的寬及高，默認(rèn)為width=”100” height=”100”align可選值為可選值為left、right、top、middle、bottom屬性設(shè)置：設(shè)置邊框-frameborder語法： 或者u在默認(rèn)情況下，框架窗口的四周有一條邊框線，通過在默認(rèn)情況下，框架窗口的四周有一條邊框線，通過frameborder 參數(shù)可以調(diào)整邊框線的顯示情況。參數(shù)可以調(diào)整邊框線的顯示情況。uframeborder 的取值只能為的取值只能為0或或1。如果取值為。如果取值為 0，那么邊框線將會(huì)，那么邊框線將會(huì)被隱藏；如果取值為被隱藏；如果取值為1，邊框線將會(huì)

6、顯示。在，邊框線將會(huì)顯示。在frameset 中設(shè)置將會(huì)對(duì)中設(shè)置將會(huì)對(duì)整個(gè)框架有效，在整個(gè)框架有效，在frame中設(shè)置則只對(duì)當(dāng)前這個(gè)框架有效。中設(shè)置則只對(duì)當(dāng)前這個(gè)框架有效。屬性設(shè)置：框架的邊框?qū)挾葘傩栽O(shè)置：框架的邊框?qū)挾?framespacing語法：語法： u框架的邊框?qū)挾仍谀J(rèn)情況下是框架的邊框?qū)挾仍谀J(rèn)情況下是1像素，通過參數(shù)像素，通過參數(shù) framespacing 可以調(diào)整其大小?？梢哉{(diào)整其大小。u邊框?qū)挾染褪窃陧撁嬷懈鱾€(gè)邊框之間的線條寬度，以像素為單位。邊框?qū)挾染褪窃陧撁嬷懈鱾€(gè)邊框之間的線條寬度，以像素為單位。而這一參數(shù)只能對(duì)框架集使用，對(duì)單個(gè)框架無效。而這一參數(shù)只能對(duì)框架集使用，對(duì)

7、單個(gè)框架無效。屬性設(shè)置：框架的邊框顏色屬性設(shè)置：框架的邊框顏色-bordercolor語法：語法： u使用參數(shù)使用參數(shù)bordercolor可以設(shè)置框架集的邊框顏色。可以設(shè)置框架集的邊框顏色。u該參數(shù)同樣只對(duì)整個(gè)框架集有效，對(duì)于單個(gè)框架無效。該參數(shù)同樣只對(duì)整個(gè)框架集有效，對(duì)于單個(gè)框架無效。屬性設(shè)置：頁面源文件-src語法： u框架結(jié)構(gòu)中的各個(gè)頁面都是一個(gè)單獨(dú)的文字，而這些文件是通過src 參數(shù)進(jìn)行設(shè)置的。u頁面文件是框架頁面的具體內(nèi)容的所在，對(duì)于沒有設(shè)置源文件的框架，只是空白頁面，是沒有任何作用的。頁面的源文件可以是正常的HTML文件，也可以是一個(gè)圖片或者其他的文件。 屬性設(shè)置：頁面名稱-na

8、me語法： u頁面名稱是為了便于頁面的查找和鏈接所提供的一個(gè)屬性。框架的頁面名稱中不允許包含特殊字符、連字符-、空格等，必須是單個(gè)的一個(gè)單詞或者字母組合。屬性設(shè)置：調(diào)整窗口的尺寸-noresize語法： u當(dāng)用鼠標(biāo)拖動(dòng)框架的邊框的時(shí)候，框架窗口的尺寸就會(huì)隨之 變化。如果希望框架窗口的大小保持不變，可以設(shè)置 noresize 參數(shù)。u在 frame 標(biāo)記中添加“noresize參數(shù)，就表示框架窗口的尺寸不能改變。 屬性設(shè)置：邊框與頁面內(nèi)容的水平邊距-marginwidth語法： u框架頁面與 HTML中的表格一樣，也可以設(shè)置邊框與頁面內(nèi)容的水平邊距。水平邊距設(shè)置頁面的左右邊緣與框架邊框的距離，單

9、位是像素。 屬性設(shè)置：邊框與頁面內(nèi)容的垂直邊距-marginheight語法： u與水平邊距類似，通過marginheight 參數(shù)可以設(shè)置邊框與頁面的垂直邊距。u垂直邊距用來設(shè)置頁面的上下邊緣與框架邊框的距離，單位是像素。 屬性設(shè)置：設(shè)置框架滾動(dòng)條顯示-scrolling語法： u默認(rèn)情況下，當(dāng)頁面的內(nèi)容超出瀏覽器窗口的大小時(shí)，頁面會(huì)自動(dòng)添加滾動(dòng)條以便用戶瀏覽。但是有時(shí)候用戶希望不顯示滾動(dòng)條，這可以通過設(shè)置 scrolling 參數(shù)來實(shí)現(xiàn)。uscrolling 參數(shù)在這里只能取Yes、No或Auto三個(gè)值中的一個(gè)。其中，Yes表示一直顯示滾動(dòng)條，而No則表示無論什么情況都不顯示滾動(dòng)條；Aut

10、o是系統(tǒng)的默認(rèn)值，它是根據(jù)具體內(nèi)容來調(diào)整的，也就是當(dāng)頁面長度超出瀏覽器窗口的范圍就會(huì)自動(dòng)顯示 滾動(dòng)條。（1）框架窗口的水平分隔u子窗口的排列遵循從左到右、從上到下的次序u標(biāo)簽，是自動(dòng)生成，當(dāng)瀏覽者使用的瀏覽器版本太低，不支持框架這個(gè)功能時(shí)，他看到的將會(huì)是一片空白。為了避免這種情況，即可使用這個(gè)標(biāo)簽。u（2）框架窗口的垂直分隔實(shí)例： 如果在窗口中要設(shè)置超鏈接，就必須為每一個(gè)子窗口命名，以便于窗口間的鏈接。窗口的命名最好為拼音或英文單詞，命名規(guī)則與程序語言中的變量命名相似。窗口的鏈接還用用到target屬性，用這個(gè)屬性就可以將鏈接的內(nèi)容放置到想要放置的窗口內(nèi)?！救蝿?wù)實(shí)施】【任務(wù)拓展】基本語法：屬性屬性含義含義src指示浮動(dòng)窗口中要加載的指示浮動(dòng)窗口中要加載的url文件地址文件地址name指示框架名稱，是鏈接標(biāo)記的指示框架名稱，是鏈接標(biāo)記的target所要的參數(shù)所要的參數(shù)align可選值為可選值為left、right、top、middle、bottomwidth框窗的寬及高，默認(rèn)為框窗的寬及高，默認(rèn)為width=”100” height=”100”marginwidth設(shè)置內(nèi)容與窗口左右邊緣的距離，默認(rèn)值為設(shè)置內(nèi)容與窗口左右邊緣的距離，默認(rèn)值為1marg