HTML框架的基本結(jié)構(gòu)_第1頁(yè)
HTML框架的基本結(jié)構(gòu)_第2頁(yè)
HTML框架的基本結(jié)構(gòu)_第3頁(yè)
HTML框架的基本結(jié)構(gòu)_第4頁(yè)
HTML框架的基本結(jié)構(gòu)_第5頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

HTML框架的基本結(jié)構(gòu)在一個(gè)網(wǎng)頁(yè)中，并不是所有的內(nèi)容都需要改變，如網(wǎng)頁(yè)的導(dǎo)航欄、網(wǎng)頁(yè)頁(yè)腳等部分是不需要改變的，如果在每一個(gè)網(wǎng)頁(yè)中都重復(fù)添加這些元素，不僅會(huì)浪費(fèi)時(shí)間，而且在瀏覽時(shí)也會(huì)帶來不便、耗費(fèi)更多的時(shí)間，為了解決這種問題，我們可以使用框架來對(duì)網(wǎng)頁(yè)進(jìn)行布局。本節(jié)單詞記憶：標(biāo)簽1.frameset2.frame屬性1.cols2.rows3.noresize4.bordercolor5.frameborder網(wǎng)頁(yè)學(xué)習(xí)網(wǎng)提示：html語(yǔ)言非常簡(jiǎn)單，不需要邏輯理解，而絕大部分朋友覺得它難以掌握，90%的原因在于英語(yǔ)單詞不過關(guān)，所以每節(jié)記憶幾個(gè)單詞是非常有必要的。使用框架可以把瀏覽器窗口劃分為多個(gè)區(qū)域，每個(gè)區(qū)域可以顯示不同的網(wǎng)頁(yè)，每次瀏覽者在訪問框架頁(yè)面時(shí)，只下載框架頁(yè)面中變化的區(qū)域，對(duì)于不變的區(qū)域，不用重新下載，從而給瀏覽者帶來方便、節(jié)省下載頁(yè)面所需的時(shí)間。一個(gè)框架結(jié)構(gòu)是由以下兩部分組成的：框架（FRAME）：是瀏覽器窗口中的一個(gè)區(qū)域，它可以顯示與瀏覽器窗口其余部分中所顯示內(nèi)容無關(guān)的網(wǎng)頁(yè)文件?？蚣芗‵RAMESET）：是一個(gè)網(wǎng)頁(yè)文件，它將一個(gè)窗口通過橫向或縱向的方式分割成多個(gè)框架，每個(gè)框架中要顯示的都是不同的網(wǎng)頁(yè)文件。不同的網(wǎng)頁(yè)文件可以通過超鏈接聯(lián)系起來。如圖1所示就是一個(gè)比較經(jīng)典的框架集頁(yè)面。此頁(yè)面一共有3個(gè)區(qū)域，每個(gè)區(qū)域分別顯示一個(gè)HTML文檔，由于框架集頁(yè)面也是一個(gè)HTML文檔，所以一共有4個(gè)HTML文件。為了瀏覽方便，當(dāng)瀏覽者單擊左側(cè)導(dǎo)航欄中的服務(wù)列表（如“注冊(cè)&認(rèn)證”、“買家?guī)椭钡龋┏溄訒r(shí)，右側(cè)窗口顯示相應(yīng)的詳細(xì)幫助信息。詳細(xì)何容頁(yè)面右梯梔舉（main.htm）旌)寶^馬(Fxsms&Scl.htffi):卷芥戶中心<￡l：l4RMMCa>HAIir^iva導(dǎo)航欄左鴨框架詳細(xì)何容頁(yè)面右梯梔舉（main.htm）旌)寶^馬(Fxsms&Scl.htffi):卷芥戶中心<￡l：l4RMMCa>HAIir^iva導(dǎo)航欄左鴨框架（left.htm）+嵐■HUfir圖1框架集頁(yè)面一、為何使用框架一個(gè)網(wǎng)頁(yè)可以有一個(gè)或多個(gè)框架?？蚣艿囊恍┯梅ㄈ缦拢?在頁(yè)面的一個(gè)固定部分顯示Logo或靜態(tài)信息。?左側(cè)框架顯示目錄，右側(cè)框架顯示內(nèi)容，用戶只需單擊左側(cè)窗口的目錄，在右側(cè)窗口中就會(huì)顯示相應(yīng)內(nèi)容，如網(wǎng)上在線學(xué)習(xí)教程、論壇、后臺(tái)管理、產(chǎn)品介?框架能有機(jī)地把多個(gè)頁(yè)面組合在一起，這多個(gè)頁(yè)面之間可互相獨(dú)立，卻又可相互聯(lián)系。二、框架的基本結(jié)構(gòu)框架集（FRAMESET）頁(yè)面的結(jié)構(gòu)是通過屬性rows和cols來設(shè)置的，根據(jù)框架的分割方式可分為：上下分割窗口（使用rows屬性來分割），左右分割窗口（使用cols屬性來分割），嵌套分割窗口（同時(shí)使用rows和cols屬性來分割）。WANGYEXX.COM語(yǔ)法:<framesetcols="25%,50%,*"rows="50%,*"border="5"><!—cols二〃25%,50%,*〃分割為左中右3部分rows="50%,*〃分割為上下兩部分border設(shè)置邊框?qū)傩砸?gt;<framesrc=“the_first.html"></frameset>說明：FRAMESET僅是一個(gè)框架的集合。FRAME標(biāo)簽可以提供對(duì)單獨(dú)HTML文檔URL引用，其中每個(gè)HTML文檔占據(jù)一個(gè)框架。cols將頁(yè)面沿垂直方向分割為幾個(gè)窗口，cols可以取多個(gè)值，不同的值用逗號(hào)隔開，單位可以是像素，也可以是占瀏覽器的百分比Orows將頁(yè)面沿水平方向分割為幾個(gè)窗口，也可以取多個(gè)值,是由逗號(hào)分割的像素值或百分比。src指定框架窗口的源文件。示例1:<HTML><HEAD><TITLE>rows框架</TITLE></HEAD><FRAMESETbordercolor=〃red〃rows=〃25%,50%,*〃border=〃5〃><!--bordercolor="red"設(shè)置框架邊框?yàn)榧t色--><FRAMEname="top"src="the_first.html"><FRAMEname="middle"src="the_second.html"><FRAMEname="bottom"src="the_third.html"></FRAMESET></HTML>示例1在瀏覽器中預(yù)覽效果如圖2所示。圖2水平方向分割為上中下3個(gè)窗口示例2:<HTML><HEAD><TITLE>cols框架</TITLE></HEAD><FRAMESETcols="120,*"border="5"><FRAMEsrc="the_first.html"name="topFrame"><FRAMEsrc="the_second.html"name="mainFrame"scrolling="NO"noresize><!--scrolling="NO"不顯示滾動(dòng)條noresize禁止改變窗口大小--></FRAMESET></HTML>示例2在瀏覽器中預(yù)覽效果為兩個(gè)窗口左右分割，而左邊的窗口固定寬度120px。三、如何創(chuàng)建多個(gè)復(fù)雜的窗口前面的示例1和示例2要么是水平分割，要么是垂直分割，如果要實(shí)現(xiàn)如圖1所示的框架集頁(yè)面，那怎么實(shí)現(xiàn)？經(jīng)分析，首先將頁(yè)面分割為上下兩部分，上部分的高度占瀏覽器高度的30%左右。然后將下面部分分割成左右兩部分，寬度大約分別占窗口的20%和80%。注意對(duì)其中的一個(gè)框架窗口再次分割時(shí)，需要使用〈FRAMESET〉標(biāo)簽代替<FRAME>標(biāo)簽。下面我們就一步一步地實(shí)現(xiàn)如圖1所示的框架集頁(yè)面。第一步：創(chuàng)建或直接提供如圖1所示的top窗口中所顯示的頁(yè)面文檔top.html。第二步：創(chuàng)建或直接提供如圖1所示的left窗口中所顯示的頁(yè)面文檔left.html。第三步：創(chuàng)建或直接提供如圖1所示的right窗口中所顯示的頁(yè)面文檔right.html。第四步：手寫如示例3中的代碼，然后保存為frame_Sets.html文件。示例3:<HTML><HEAD><METAhttp-equiv="Content-Type"content="text/html;charset=gb2312"/><TITLE>創(chuàng)建多框架頁(yè)面</TITLE></HEAD><FRAMESETrows="20%,*"frameborder="no"border="0"framespacing="0"><FRAMEsrc="top.html"name="topFrame"scrolling="No"noresize="noresize"id="topFrame"title="topFrame"/><FRAMESETcols="20%,*"framespacing="0"frameborder="no"border="0"><FRAMEsrc="left.html"name="leftFrame"scrolling="No"noresize="noresize"/><FRAMEsrc="main.html"name="rightFrame"/></FRAMESET></FRAMESET></HTML>示例4在瀏覽器中預(yù)覽效果如圖1所示。本節(jié)作業(yè)：制作如圖1復(fù)雜框架網(wǎng)頁(yè)。注意事項(xiàng)：1.掌握框架的基本結(jié)

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論