版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
frame作為html語言中的一部分,在網(wǎng)頁制作中占據(jù)著重要的地位。大家看到很多網(wǎng)頁上都好像windows下的資源管理器一樣,在左邊點(diǎn)擊相應(yīng)的鏈接,右邊就會(huì)有相應(yīng)的網(wǎng)頁顯示。就如我們進(jìn)入郵箱的時(shí)候一樣。這些都是使用frame的結(jié)果。下面我來給大家介紹frame的具體使用方法。使用frame必須首先用frameset來定義,可以說frameset就是frame的一個(gè)“統(tǒng)治者”。在html文檔中,可以有frameset元素或者body元素,但是絕對(duì)不能同時(shí)使用這兩種元素。frameset元素的使用:<html><head><title>frameset元素的使用</title></head><frameset><frame><frame></frameset></html>當(dāng)然了,這個(gè)html文檔在瀏覽器上什么也顯示不出來。只是告訴大家最基本的frameset及frame的使用方法。frameset是確定網(wǎng)頁分框的定義,其屬性rols及rows、border將在下面給大家介紹。frame是frameset定義的每個(gè)“網(wǎng)頁分框”的定義,其屬性name、scrolling及noresize、marginHeight及marginWidth、frameborder也將在下面給大家介紹。frameset元素的cols及rows屬性屬性說明:cols及rows的作用是設(shè)置frame的寬度及高度<html><head><titleframeset元素中cols及rows屬性的使用</title></head><framesetcols="20%,200,*"><frame><framesetrows="30%,*"><frame><frame></frameset><frame><frame></frameset></html>示例說明:第三行中的語句cols二〃20%,400,*〃定義了瀏覽器中frame的“列數(shù)”。20%說明最左邊的frame占據(jù)整個(gè)瀏覽器寬度的百分比,400說明中間的frame占據(jù)整個(gè)瀏覽器的寬度是400個(gè)像素,*則說明除去左邊和中間的frame以外的地方,其余全部留給最右邊的frame。第4、9、10行的frame是〈framesetcols="20%,400,*〃>語句定義后的每個(gè)“框架”的各自定義。同樣,第6、7行的frame是〈framesetrows二〃30%,*〃>語句所定義的“框架"的各自定義。第二個(gè)frameset定義在一個(gè)frame之內(nèi),大家也從瀏覽器的結(jié)果看來了,橫向的“框架”只出現(xiàn)在最中間的列向“框架”之中。可以試圖改變?yōu)g覽器窗口的大小,就可以看出中間的frame的寬度是始終不變的,大小總是400像素。最左邊的frame所占的比例總是總寬度的20%,剩下的寬度就留給了最右邊的frame。橫向frame同理。frameset元素的border屬性屬性說明:設(shè)置frame之間的距離,包括3-D邊框〈html><head><title>frameset元素中border屬性的使用</title></head><framesetcols="20%,60%,*"border=10><frame><frame><frame></frameset></html>示例說明:frame之間的寬度現(xiàn)在為10個(gè)像素。如果定義border屬性的值為0,則在瀏覽器中將不會(huì)看到邊界。同樣,framespacing也可以設(shè)定frame之間的寬度,只不過framespacing設(shè)定的是附加的空間。另外:bordercolor屬性作用是設(shè)定邊框的顏色,顏色值為標(biāo)準(zhǔn)RGB顏色值。frame元素的name屬性屬性說明:設(shè)置frame的名字<html><head><title>frame元素中name屬性的使用</title></head><framesetcols="50%,*"><framename="left"src="html語言教程1.htm"><framename="right"src="html語言教程2.htm"></frameset></html>說明:框架的名稱并不會(huì)影響到框架內(nèi)顯示的內(nèi)容,名稱的作用是指定相應(yīng)框架鏈接的顯示內(nèi)容。frameset元素的scrolling屬性及noresize屬性屬性說明:scrolling:決定frame是否可以使用滾動(dòng)條noresize:決定frame是否可以改變大小<html><head><title>frame元素中scrolling屬性及noresize屬性的使用</title></head><framesetcols="30%,40%,*"><framename="left"src="html語言教程1.htm"scrolling=no><framename="center"src="html語言教程2.htm"noresize=true><framename="right"src="html語言教程3.htm"scrolling=yes></frameset></html>示例說明:左邊的frame使用了scrolling二no的屬性,則無論需要顯示的頁面有多大,都不會(huì)有滾動(dòng)條出現(xiàn)。中間的frame使用了noresize=true屬性,這用戶不能調(diào)整frame的大?。ù蠹铱梢钥吹揭郧袄又械膄rame是可以調(diào)整大小的)。最右邊的frame使用了scrolling=yes的屬性,在這里大家看得不是很清楚,如果需要顯示的頁面過小,就是說不需要滾動(dòng)條也能夠顯示出全部,則此時(shí)最右邊的frame也是擁有滾動(dòng)條的。默認(rèn)情況下,scrolling的值是auto。而noresize是一個(gè)布爾型的變量,當(dāng)為true時(shí),不能改變frame的大?。粸閒alse時(shí)(默認(rèn)情況),可以改變frame的大小。frameset元素的marginHeight屬性及marginWidth屬性屬性說明:marginHeight:設(shè)定在顯示frame中的文字之前文字距離頂部及底部的空白距離marginWidth:設(shè)定在顯示frame中的文字之前文字距離左右兩邊的空白距離<html><head><title>frame元素中marginHeight屬性及marginWidth屬性的使用</title>〈/head><framesetcols="50%,*"><framename="left"src="html語言教程1.htm"marginHeight=60marginWidth=30><framename="right"src="html語言教程2.htm"></frameset></html>示例說明:左邊的框架中文字與上下底邊都有60像素的空間空白,與左右兩邊都有30像素的空間空白。右邊的框架沒有使用這一屬性,所以就沒有空間空白。frameset元素的frameborder屬性屬性說明:決定是否在frame中顯示邊界??梢允褂玫闹涤兴膫€(gè),分別是1、0、no、yes。frameborder值為1或者yes,則會(huì)顯示框線;frameborder值為0或者no,則不會(huì)顯示框線。frameborder的默認(rèn)值為1。浮動(dòng)框架的制作浮動(dòng)框架,就好像一個(gè)文檔之中又嵌入了一個(gè)文檔,或者可以說成是一個(gè)浮動(dòng)的frame。制作這樣的文檔需要用到iframe元素。iframe基本的語法格式如下<IFRAMEID=IFrame1FRAMEBORDER=0SCROLLING=NOSRC="sample.htm"></IFRAME>需要注意的是iframe與frameset不同,其可以與body元素共同出現(xiàn)在同一篇文檔之中。<html><head><title>浮動(dòng)框架的使用〈/title></head><body><hl>浮動(dòng)框架的使用</hl><hr><iframename="inside"src="html語言教程1.htm"height=300width=200align=right></iframe><p>右邊顯示的是《html語言教程1》中的內(nèi)容?,F(xiàn)在就好像是在這個(gè)網(wǎng)頁中又嵌入了另外的一個(gè)網(wǎng)頁。使用的就是iframe元素。這樣可以使網(wǎng)頁的可視性加強(qiáng),對(duì)于講解、說明等特定網(wǎng)頁十分適合。</p></body></html>示例說明:iframe的作用就是在網(wǎng)頁中標(biāo)記出一塊區(qū)域,使得這塊區(qū)域可以顯示其他內(nèi)容。iframe元素中的各種常用屬性,border、frameBoder、marginHeight、marginWidth、scrolling等,與frame中的用法相同,不再重復(fù)。超鏈接與框架的制作經(jīng)過前面艱苦的學(xué)習(xí),下面開始讓我們一步一步地制作類似于訪問郵箱的網(wǎng)頁。首先:我需要說明個(gè)部分的html文件,詳見下表:HTML文件說明main.htm主頁面,分為左右兩個(gè)框架host.htm左邊框架所顯示的內(nèi)容。用于索引文件之用,點(diǎn)擊其中不同的鏈接,右邊框架會(huì)顯示不同的內(nèi)容。html語言教程1.htm在右邊框架中準(zhǔn)備需要顯示的內(nèi)容html語言教程2.htmhtml語言教程3.htm在這個(gè)例子中,在左邊的框架中設(shè)定了三個(gè)超鏈接。在右邊框架中需要顯示的就有三個(gè)網(wǎng)頁。就是說左邊框架中的內(nèi)容是不會(huì)變的,右邊框架是真正的“顯示區(qū)域”,其內(nèi)容根據(jù)左邊框架中點(diǎn)擊超鏈接的不同而不同。這樣,左邊的框架就好像一個(gè)目錄一樣,點(diǎn)擊不同的鏈接,右邊框架會(huì)顯示不同的內(nèi)容。下面我來告訴大家各個(gè)網(wǎng)頁的制作方法。main.htm<html><head><title>超鏈接與框架的制作</title></head><framesetcols="20%,*"><framename="index"src="host.htm"><framename="content"src="html語言教程1.htm"></frameset></html>host.htm<html><head><title>超鏈接與框架的制作</title></head><body><ahref="html語言教程1.htm"target二"content">html語言教程1</a><br/><ahref="html語言教程2.htm"target="content">html語言教程2</a><br/><ahref="html語言教程3.htm"target="content">html語言教程3</a></body></html>在左邊框架
溫馨提示
- 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. 人人文庫(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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年廢舊材料銷售框架合同
- 文書模板-裝卸貨高空作業(yè)合同
- 2024年建筑工程分包合同
- 玫瑰的課件教學(xué)課件
- 2024年人工智能教育平臺(tái)開發(fā)合同
- 2024醫(yī)療設(shè)備維修公司關(guān)于超聲波機(jī)器保修服務(wù)合同
- 停電停氣應(yīng)急預(yù)案(6篇)
- 2024年建筑工程機(jī)電安裝分包協(xié)議
- 2024年庫(kù)房租賃與無人機(jī)測(cè)試存放合同
- 2024年專業(yè)咨詢合作協(xié)議
- 妊娠晚期促子宮頸成熟與引產(chǎn)指南
- 2022年中國(guó)鐵路國(guó)際有限公司校園招聘筆試試題及答案解析
- 海姆立克急救法完整版本課件
- 《離騷》課件教材
- 巴斯夫蘋果病害課件
- 燙金工藝基礎(chǔ)知識(shí)培訓(xùn)課件
- 《格列佛游記》 課件
- 農(nóng)藥生產(chǎn)安全管理檢查表
- 什物拼貼-完整版PPT
- 四年級(jí)英語上冊(cè)課件-Unit 4 My home-人教PEP版(共20張PPT)
- ERP系統(tǒng)集成項(xiàng)目實(shí)施與管理方案
評(píng)論
0/150
提交評(píng)論