版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
模塊8框架8.1框架簡介8.2浮動框架8.3案例：浮動框架實現(xiàn)選項卡式鏈接思考與練習(xí)題
8.1框架簡介
框架可以實現(xiàn)在同一個瀏覽器窗口中顯示不止一個頁面。通過框架結(jié)構(gòu)標簽<frameset>定義如何劃分瀏覽器窗口，劃分出的子窗口為一個框架，由<frame>標簽定義，每個框架中可以顯示一個獨立的頁面。
示例如下：
在這個示例中，設(shè)置了一個框架集，將瀏覽器窗口劃分成兩列，第一列占據(jù)瀏覽器窗口30%寬度，第二列占據(jù)瀏覽器窗口70%寬度。頁面page1.html置于第一個框架中，頁面page2.html置于第二個框架中。
由于HTML5已經(jīng)舍棄了<frameset>標簽，所以本書不再詳細介紹，大家了解即可。
8.2浮動框架
浮動框架的語法格式如下：其中，src用來定義浮動框架內(nèi)顯示的頁面的地址。width和height分別用來定義浮動框架的寬與高。name用來定義浮動框架的名稱，可將超鏈接的target目標指向它，實現(xiàn)鏈接頁面在浮動框架中顯示。
【例8-1】浮動框架的應(yīng)用。
上述代碼在瀏覽器中的預(yù)覽效果如圖8-1所示。
圖8-1浮動框架的應(yīng)用
8.3案例：浮動框架實現(xiàn)選項卡式鏈接
【案例描述】綜合應(yīng)用超鏈接和浮動框架實現(xiàn)選項卡式鏈接。案例源文件參考“模塊8案例”?！究己酥R點】超鏈接的應(yīng)用、浮動框架的應(yīng)用?！揪毩?xí)目標】(1)掌握浮動框架的應(yīng)用。(2)掌握超鏈接目標的設(shè)置。
【案例源代碼】
【運行結(jié)果】
源代碼在瀏覽器中的運行結(jié)果如圖8-2所示。
圖8-2案例運行結(jié)果
【案例分析】
案例頁面包括標題、超鏈接、浮動框架及頁腳等。浮動框架的初始頁面為page1.html，名稱為ifr。當點擊各教程網(wǎng)站鏈接時，相應(yīng)的網(wǎng)站頁面會顯示在浮動框架內(nèi)，這是通過超鏈接的target屬性設(shè)置的，將target屬性值設(shè)置為浮動框架的名稱ifr即可。案例效果圖是應(yīng)用了CSS樣式后的結(jié)果，需要將外部CSS樣式文件“style8.css”引入到HTML頁面中的<head>標簽內(nèi)。
思考與練習(xí)題
一、選擇題1.在HTML中，通過()標簽定義浮動框架。A.<frameset>
B.<frame>C.<iframe>
D.<form>2.()屬性用于定義浮動框架的名稱，可將超鏈接的target目標指向它，實現(xiàn)鏈接頁面的浮動框架中顯示。A.src
B.widthC.height
D.name
二、填空題
1.HTML中定義浮動框架的標簽是
。
2.有HTML代碼如下：
<ahref="page2.html"
>打開頁面二</a>
<iframesrc="page1.html"width="500px"height="300p
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 水墨插畫風兒童故事繪本雙管齊下
- 典型行政法學(xué)試題與答案匯編
- 執(zhí)業(yè)醫(yī)師考試各科目重難點分析試題及答案
- 中國文化自信的時代意義試題及答案
- 護理臨床研究設(shè)計試題及答案分析
- 常見錯誤與解決方案執(zhí)業(yè)醫(yī)師考試試題及答案
- 護理技能提升策略執(zhí)業(yè)護士考試試題及答案
- 網(wǎng)絡(luò)文化對青少年心理的影響試題及答案
- 護理學(xué)實踐能力考核試題及答案
- 護理統(tǒng)計學(xué)基本知識試題及答案
- GB 5009.34-2022食品安全國家標準食品中二氧化硫的測定
- 教學(xué)課件《斷裂力學(xué)》
- 語文五年級 【知識精講】7.閱讀(2)文言文閱讀
- 慢阻肺的管理課件
- 電工基本知識培訓(xùn)資料課件
- 北師大版《相遇問題》公開課課件
- 鄰補角、對頂角、同位角、內(nèi)錯角、同旁內(nèi)角經(jīng)典習(xí)題-一對一專用
- HP系列培訓(xùn)手冊
- 畢業(yè)論文-原油電脫水方法與機理的研究
- 陜西省2022年普通高中學(xué)業(yè)水平考試(真題)
- 事故池管理的有關(guān)規(guī)定
評論
0/150
提交評論