網(wǎng)頁設(shè)計(jì)使用框架創(chuàng)建多頁面布局_第1頁
網(wǎng)頁設(shè)計(jì)使用框架創(chuàng)建多頁面布局_第2頁
網(wǎng)頁設(shè)計(jì)使用框架創(chuàng)建多頁面布局_第3頁
網(wǎng)頁設(shè)計(jì)使用框架創(chuàng)建多頁面布局_第4頁
網(wǎng)頁設(shè)計(jì)使用框架創(chuàng)建多頁面布局_第5頁
已閱讀5頁，還剩48頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

主要內(nèi)容建立水平或垂直的框架分割窗口用嵌套框架分割窗口

對(duì)滾動(dòng)條進(jìn)行控制在空白窗口顯示網(wǎng)頁在框架或浮動(dòng)框架上進(jìn)行鏈接框架簡(jiǎn)介框架技術(shù)可以將瀏覽器分割成多個(gè)小窗口，并且在每個(gè)小窗口中，可以顯示不同的網(wǎng)頁，這樣我們就可以很方便的在瀏覽器中瀏覽不同的網(wǎng)頁效果。當(dāng)瀏覽器分割成多個(gè)窗口后，各窗口就會(huì)扮演不同的角色，實(shí)現(xiàn)不同的功能。舉例來說，有些論壇就是把瀏覽器分割成兩個(gè)窗口，一個(gè)窗口主要來顯示帖子的標(biāo)題，而另一個(gè)窗口會(huì)顯示具體的內(nèi)容。這樣的設(shè)計(jì)顯然比起一個(gè)窗口的網(wǎng)頁在瀏覽時(shí)方便得多，而且用戶也可以任意的切換題目。。框架的根本結(jié)構(gòu)框架的根本結(jié)構(gòu)主要分為框架和框架集兩個(gè)局部。它是利用<frame>標(biāo)記與<frameset>標(biāo)記來定義。其中<frame>標(biāo)記用于定義框架，而<frameset>標(biāo)記那么用于定義框架集。框架的根本結(jié)構(gòu)<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Frameset"><html><head> <title>框架的根本結(jié)構(gòu)</title></head><frameset> <framesrc=“URL〞> <framesrc=“URL〞>…</frameset></html>框架的設(shè)置常見的對(duì)窗口的分割包括：水平分割、垂直分割和嵌套分割。具體采用哪種分割方式，取決于實(shí)際需要，可用<frameset>標(biāo)記中的rows〔水平分割〕或cols〔垂直分割〕屬性來進(jìn)行分割。

窗口的水平分割rows屬性可定義一個(gè)水平分割的窗口框架。<framesetrows="高度1，高度2,…,*"><framesrc="url"><framesrc="url">…</frameset>窗口的水平分割語法說明rows屬性的值代表各子窗口的高度，第一個(gè)子窗口高為高度1，第二個(gè)子窗口高為高度2，依此類推，而最后一個(gè)*，那么代表最后一個(gè)子窗口的高度，值為其他子窗口高度分配后所剩余的高度。設(shè)置高度數(shù)值的方式有兩種：采用整數(shù)設(shè)置，單位為像素〔px〕，語法如下：<framesetrows="100，200，*">用百分比設(shè)置，語法如下：<framesetrows="20％，50％，*">窗口的水平分割<!--程序7-1-2--><html><head><title>采用整數(shù)設(shè)置窗口的水平分割</title></head><framesetrows="80,120,*"> <frame> <frame> <frame></frameset></html>窗口的水平分割窗口的垂直分割cols屬性可定義一個(gè)垂直分割的窗口框架。根本語法：<framesetcols="寬度1，寬度2,…,*"><framesrc="url"><framesrc="url">…</frameset>一個(gè)垂直分割的例子<!--程序7-1-3--><html><head><title>采用百分比設(shè)置窗口的垂直分割</title></head><framesetcols="20%,40%,*"> <frame> <frame> <frame></frameset></html>窗口的垂直分割窗口的嵌套分割如果想構(gòu)建更復(fù)雜的框架格局，可以通過<frameset>標(biāo)簽嵌套另一個(gè)<frameset>標(biāo)簽來實(shí)現(xiàn)。這種嵌套方式成為框架的嵌套。通過框架的嵌套，可以使網(wǎng)頁的布局更具有層次性，這種框架集合將瀏覽器按行或按列分成許多局部。在實(shí)際應(yīng)用中，“廠〞字型框架使用極為廣泛。“廠〞字型的網(wǎng)頁就是窗口中包含水平和垂直分割，實(shí)現(xiàn)“廠〞字型框架需要對(duì)窗口進(jìn)行嵌套分割。窗口的嵌套分割<!--程序7-1-4--><html><head><title>窗口的嵌套分割</title></head><framesetrows="30%,*"> <frame><framesetcols="20%,*"> <frame> <frame>

</frameset></frameset></html>

窗口的嵌套分割框架格式化顯示或隱藏邊框frameborder屬性用于控制窗口框架的周圍是否顯示框架，此屬性可使用在<frameset>標(biāo)記與<frame>標(biāo)記中，如果使用在<frameset>標(biāo)記內(nèi)時(shí)，可控制窗口框架的所有子窗口，如果用在<frame>標(biāo)記中，那么只能控制該標(biāo)記所代表的子窗口。根本語法：<framesetframeborder="0"或"1"><frameframeborder="0"或"1">語法說明："0"表示不顯示邊框，"1"表示顯示邊框，默認(rèn)值為1。顯示或隱藏邊框在<frameset>標(biāo)記中，可運(yùn)用border屬性控制分割窗口框架的邊框的寬度。根本語法：<framesetborder="n">語法說明：n為整數(shù)，代表此窗口框架的寬度，單位為像素(px)。顯示或隱藏邊框<!--程序7-2-1--><html><head><title>框架的邊框控制</title></head><framesetrows="30%,*"border="12"> <frame> <framesetcols="20%,*“frameborder=0> <frame> <frame></frameset></frameset></html>

顯示或隱藏邊框添加邊界顏色如果想要改變邊框邊界的顏色，可運(yùn)用bordercolor屬性來實(shí)現(xiàn)。根本語法：<framesetbordercolor=""><framebordercolor="">添加邊界顏色<!--程序7-2-2--><html><head><title>框架的邊框顏色控制</title></head><framesetrows="30%,*"border=12bordercolor=blue><frame><framesetcols="20%,*"> <framebordercolor=red> <frame></frameset></frameset></html>添加邊界顏色設(shè)置子窗口的邊距網(wǎng)頁的邊距可以通過“margin〞來設(shè)定，那么框架和網(wǎng)頁一樣也可設(shè)置邊距，可以利用<frame>標(biāo)記中的marginwidth屬性來設(shè)置框架左右邊緣的寬度；marginheight屬性可以設(shè)置框架上下邊緣的寬度。根本語法：<framesrc="url"marginwidth="value"marginheight="value">語法說明：在HTML文件中，利用框架<frame>標(biāo)記中的marginwidth和marginheight屬性可以設(shè)置相應(yīng)子框架的左右和上下邊緣的空白。設(shè)置子窗口的邊距<!--程序7-2-3--><html><head><title>設(shè)置框架邊距</title></head><framesetcols="30%,*"> <framemarginheight=50

marginwidth=50> <frame></frameset></html>

設(shè)置子窗口的邊距控制子窗口滾動(dòng)條scrolling屬性用于控制窗口框架中是否顯示滾動(dòng)條，使用此屬性，可以防止HTML文件因內(nèi)容過多而無法完全顯示。此屬性用于<frame>標(biāo)記中。根本語法：<framescrolling="yes或no或auto">語法說明：yes表示為顯示滾動(dòng)條，no表示不顯示滾動(dòng)條，auto為自動(dòng)設(shè)置?？刂谱哟翱跐L動(dòng)條<!--程序7-2-4--><html><head><title>控制框架滾動(dòng)條</title></head><framesetcols="30%,*"> <framesrc="://baidu"scrolling="yes"><framesrc="://"scrolling="no"></frameset></html>控制子窗口滾動(dòng)條調(diào)整子窗口的尺寸在前面的學(xué)習(xí)中，我們學(xué)習(xí)了如何運(yùn)用<frameset>標(biāo)記的rows和cols屬性來水平或垂直分割窗口。但設(shè)置后，各窗口框架的大小并非固定無法更改，當(dāng)我們想更改窗口框架大小時(shí)，可以將鼠標(biāo)指針移到要更改的框架上，待指針呈現(xiàn)雙箭頭符號(hào)時(shí)，再用鼠標(biāo)進(jìn)行拖拽，就可調(diào)整窗口的大小。當(dāng)然我們不希望用戶能隨意地改變子窗口的大小，那么這時(shí)我們可以在<frame>標(biāo)記中，添加noresize屬性，語法如下：<framenoresizesrc="url">浮動(dòng)框架在瀏覽網(wǎng)頁的時(shí)候會(huì)看到在瀏覽器窗口含有孤立的子窗口，那么這就是浮動(dòng)框架，插入浮動(dòng)框架要使用成對(duì)的標(biāo)記<iframe></iframe>，同樣，我們會(huì)用src屬性來設(shè)置框架中顯示文件的路徑。根本語法：<iframesrc="url"></iframe>語法說明：與框架不同的是，浮動(dòng)框架可以包含在<body>標(biāo)記中。浮動(dòng)框架浮動(dòng)框架<!--程序7-4--><html><head><title>設(shè)置浮動(dòng)框架源文件屬性</title></head><body><iframesrc="://"name=iframeheight=400width=600align=middle></iframe>添加一個(gè)浮動(dòng)框架</body></html>浮動(dòng)框架創(chuàng)立導(dǎo)航使用框架導(dǎo)航，用戶可以在一個(gè)框架中單擊并在另一個(gè)框架中瀏覽顯示的結(jié)果。實(shí)現(xiàn)框架導(dǎo)航功能，要引入name、target屬性。Name屬性標(biāo)識(shí)一個(gè)框架，target屬性在錨點(diǎn)<a>中使用，指定這個(gè)鏈接要載人到哪個(gè)框架中。指定子窗口顯示網(wǎng)頁src屬性是用來指定要導(dǎo)入到某個(gè)子窗口的HTML文件的位置，語法如下：根本語法：<framesrc="html文件的位置">語法說明：src屬性的設(shè)置方法和前面介紹的<img>標(biāo)記的src屬性的用法是一樣的，下面的<frame>標(biāo)記，將設(shè)置子窗口顯示名稱為的網(wǎng)頁。<framesrc="frame.html">。指定子窗口顯示網(wǎng)頁<!--程序7-5-1--><html><head><title>指定子窗口顯示網(wǎng)頁</title></head><framesetcols="30%,40%,*"> <framesrc=left.html> <framesrc=center.html> <framesrc=right.html></frameset></html>

指定子窗口顯示網(wǎng)頁定義子窗口名稱name屬性用來指定窗口的名稱，當(dāng)完成子窗口的名稱定義后，可指定超鏈接的鏈接目標(biāo)顯示到網(wǎng)頁的某個(gè)子窗口。根本語法：<framename="子窗口名稱">定義子窗口名稱<!--程序7-5-2--><html><head><<title>指定子窗口的名稱</title></head><framesetcols="30%,40%,*"> <framesrc=left.htmlname=left> <framesrc=center.htmlname=center> <framesrc=right.htmlname=right></frameset></html>創(chuàng)立網(wǎng)站鏈接導(dǎo)航將瀏覽器畫面分割成多個(gè)子窗口時(shí)，可賦予各子窗口不同的功能。最常見的應(yīng)用方式，就是以一個(gè)子窗口作為網(wǎng)頁的主畫面，另一個(gè)窗口那么用于控制該窗口的顯示內(nèi)容。要到達(dá)這個(gè)目的，我們可以運(yùn)用<a>標(biāo)記的target屬性，來指定顯示鏈接網(wǎng)頁的子窗口。根本語法：<framesetcols="*,*"><framesrc="left.html“name=“l(fā)eft"><framesrc=“main.html"name=“main"></frameset>創(chuàng)立網(wǎng)站鏈接導(dǎo)航<!--程序7-5-3--><html><head><title>創(chuàng)立導(dǎo)航</title></head><framesetrows="80,*"frameborder="no"border="0"framespacing="0"><framesrc="top.html"name="topFrame"scrolling="No"noresize="noresize"><framesetcols="200,*"frameborder="no"border="0"framespacing="0"><framesrc="left.html"name="leftFrame"scrolling="No"noresize="noresize"><framesrc="main.html"name="mainFrame"></frameset></frameset></html>創(chuàng)立網(wǎng)站鏈接導(dǎo)航<!--left.html--><html><head><title>無標(biāo)題文檔</title></head><bodyleftmargin="5"topmargin="5"bgcolor="#B9DCF0"alink="#6600CC"><tablewidth="160"border="0"cellpadding="0"cellspacing="0"align="left"><tr><tdwidth="20"> </td><tdheight="25"><ahref="manage_news.html"target="mainFrame">新聞管理</a></td></tr><tr><tdwidth="20"> </td><tdheight="25"><ahref="manage_photo.html"target="mainFrame">相冊(cè)管理</a></td></tr>創(chuàng)立網(wǎng)站鏈接導(dǎo)航<tr><tdwidth="20"> </td><tdheight="25"><ahref="manage_message.html"target="mainFrame">留言管理</a></td></tr><tr><tdwidth="20"> </td><tdheight="25"><ahref="manage_reg.html"target="mainFrame">查看注冊(cè)會(huì)員</a></td></tr><tr><tdwidth="20"> </td><tdheight="25"> </td></tr></table></body></html>創(chuàng)立網(wǎng)站鏈接導(dǎo)航<!--top.html--><html><head><title>無標(biāo)題文檔</title><styletype="text/css"><!--body{background-color:#0D5DB4;}--></style></head><bodytopmargin="0"leftmargin="0"><imgsrc="images/top.jpg"></body></html>創(chuàng)立網(wǎng)站鏈接導(dǎo)航<!--main.html--><html><head><title>無標(biāo)題文檔</title></head><bodyleftmarg

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論