web-8. 多框架頁面的創建

8.?多框架頁面的創建

8.1 框架概念

框架是由單個框架加上框架集構成的區域。

每個框架是指頁面中一個獨立額區,框架集是一個關于框架結構的頁面,定義本頁面的框架數、大小、布局以及框架之間的相互關系。

?

8.2 框架集標記

框架集文件保存了所有框架的信息,例如設定框架的布局,水平框架與垂直框架的數目、尺寸、名稱等。

框架集標記<frameset>語法格式如下:

<frameset>

<frame>

......

</frameset>

<frameset>標記的rows屬性用來將瀏覽器分割成為上下窗口。rows屬性值是一個以逗號分開的長度值列表,單位是像素或百分比。

<frameset rows=”60,*”>

<frameset>標記的cols屬性用來將瀏覽器分割成為左右窗口。cols屬性是一個以逗號分開的長度值列表,單位是像素后者百分比。

例如:

<frameset cols=”20%,*”>

<frame name=”left “?src=”**”?scrolling=”auto”>

<frame name=”right“?src=”**”?scrolling=”auto”>

</frameset>

?

8.3 框架標記

框架標記<frame>的作用是定義框架網頁的內容,例如框架名稱、框架對應的框架頁面文件、滾動條等。

每個框架對應一個網頁,這個網頁稱為框架頁面。

格式如下:

<frame name=””?src=””?scrolling=””?frameborder=””>

name屬性用來命名框架名稱。src屬性用于指定框架頁面對應的HTML頁面文件。scrolling屬性用來設定框架空間不夠用時,是否顯示滾動條,yes表示“顯示滾動條”,no表示“不顯示滾動條”,auto表示“根據頁面的長度自動判斷是否顯示滾動條”。frameborder屬性用來設定是否顯示邊框,0表示不顯示邊框,1表示顯示邊框,默認的情況是0

由于框架中的內容有時較少,不需要滾動條就可以全部顯示,因此滾動條有時會顯示灰色,表示不可用的狀態。

?

8.4 無框架標記

目前市場上瀏覽器的種類眾多,并非每一種瀏覽器都支持框架結構。考慮到這類用戶,HTML還提供了無框架標記<noframes>。當瀏覽器不能正常加載框架標記<frameset>時,瀏覽器就會檢測到<noframes>標記。并顯示其中內容。

框架結構如下:

<frameset rows=”60,*”>

<frame>

<frame>

......

<noframes>

<body>

......

</body>

</noframes>

</frameset>

?

8.5 框架之間的信息交互

雖然多框架頁面中的各個框架頁面是相互獨立的HTML文檔,但是編程人員可以利用為框架命名的方式使框架間產生一定的相互關系,其中最常用的就是框架間的鏈接關系。

要實現框架間信息的交互,首先要在編寫框架集文件是命名相關框架。

<frame name=”top”?src=”**”?scrolling=”auto”?>

......

<frame name=”left”?src=”**”?scrolling=”auto”?>

<frame name=”right”?src=”**”?scrolling=”auto”?>

這些源碼是將上部框架命名為top”,左下側框架命名為“left”,右下側框架命名為“right”。命名完成后,在先關的超鏈接中進行改動,將其超鏈接標記<a>target屬性賦值為目標框架的名稱。

<h2><a href=”**”?target=right>天鵝</a></h2>

?

實例:

本例定義一個整個頁面的框架集文件,3個框架文件,2個連接文件

1.html

<html>

<head>

<title>使用框架實例</title>

</head>

<frameset rows="60,*">

??<frame name="top" src="top.html" scrolling="auto">

??<frameset cols="20%,*">

<frame name="left" src="left.html" scrolling="auto">

<frame name="right" src="right1.html" scrolling="auto">

??</frameset>

<noframeset>

??<body>

??<p>此網頁使用了框架,但是瀏覽器不支持</p>

??</body>

</noframeset>

? </frameset>

</html>

?

top.html

<html>

<head>

<title>上側框架</title>

</head>

??<body>

??<h1><center>動物園簡介</center></h1>

??</body>

</html>

?

leht.html

<html>

<head>

<title>左側框架</title>

</head>

??<body>

??<br>動物園里,你最喜歡哪個動物?:

??<h2><a href="right1.html" target=right>獅子</a></h2>

??<h2><a href="right2.html" target=right>老虎</a></h2>

??????????<h2><a href="right3.html" target=right>大象</a></h2>

??</body>

</html>

right1.html

<html>

<head>

<title>右側框架</title>

</head>

??<body>

??<h2><br><br>獅子:<br><br></h2>

??????dhuialhdulahdliashfa

lshdsdfjklfhsaldjkdflhalskjhf

??</body>

</html>

?

right2.html

<html>

<head>

<title>右側框架</title>

</head>

??<body>

??<h2><br><br>老虎:<br><br></h2>

??????dhuialhdulahdliashfa

lshdsdfjklfhsaldjkdflhalskjhf

??</body>

</html>

?

right3.html

<html>

<head>

<title>右側框架</title>

</head>

??<body>

??<h2><br><br>大象:<br><br></h2>

??????dhuialhdulahdliashfa

lshdsdfjklfhsaldjkdflhalskjhf

??</body>

</html>

?

轉載于:https://www.cnblogs.com/free-1122/p/9865202.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249126.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249126.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249126.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

匯編語言第二章知識梳理及思考

第二章 寄存器&#xff08;CPU工作原理&#xff09; CPU概述 CPU由運算器、控制器、寄存器等器件組成&#xff0c;這些器件靠內部總線相連。 內部總線實現CPU內部各個器件之間的聯系。 外部總線實現CPU和主板上其他器件的聯系。 寄存器概述 8086CPU有14個寄存器&#xff1a; AX…

前端面試題總結(js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源)持續更新

Vue面試題 生命周期函數面試題 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次頁面加載會觸發哪幾個鉤子 4.簡述每個周期具體適合哪些場景 5.created和mounted的區別 6.vue獲取數據在哪個周期函數 7.請詳細說下你對vue生命周期的理解&…

Neural Networks and Deep Learning 讀書筆記

1 轉載于:https://www.cnblogs.com/jellyj/p/9867103.html

JS中的數據類型轉換:String轉換成Number的3種方法

今天有個學員問了個關于數據類型轉換的問題&#xff0c;我覺得這個是可以給大家說一下的。 JavaScript中&#xff0c;可以通過以下3種方法來將string值轉換成number&#xff1a; 1.調用Number()來對string進行值類型轉換。 2.parseInt()。 3.parseFloat()。 Number() 使用…

Java學習——使用Static修飾符

程序功能&#xff1a;通過兩個類 StaticDemo、LX4_1 說明靜態變量/方法與實例變量/方法的區別。 package Pack1;public class Try {public static void main(String[] args) {// TODO Auto-generated method stubSystem.out.println("靜態變量x"StaticDemo.getX());非…

JavaScript從入門到精通之入門篇(一)概念與語法

入門篇大綱 第一部分 概念與語法 1.JavaScript的歷史 2.基本概念 3.JavaScript的使用、調試和異常處理 4.基本詞法和變量 5.數據類型和類型轉換 6.運算符 算數運算符 賦值運算符 一元運算符 使用一元運算符&#xff0c;將會把所有的內容轉換為數值運算&#xff0c;不…

【小記】-005--純CSS實現的小玩意兒

效果圖奉上 代碼奉上 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible&q…

JavaScript從入門到精通之入門篇(二)函數和數組

入門篇大綱 第二部分 函數與數組 1.函數 函數的定義 普通函數 function 函數名 &#xff08;表達式1…&#xff09; { 代碼塊 }js是解釋性語言&#xff0c;在當前script標簽代碼執行的開始階段&#xff0c;就會將普通函數放入堆中&#xff0c;也只是將引用放入堆中&#xf…

leetcode 557. Reverse Words in a String III 、151. Reverse Words in a String

557. Reverse Words in a String III 最簡單的把空白之間的詞反轉 class Solution { public:string reverseWords(string s) {vector<int> blank;for(int i 0;i < s.size();i){if(s[i] )blank.push_back(i);}int start 0;int end;for(int i 0;i < blank.size(…

elementUI vue table status的狀態列顏色變化和操作列狀態顯示(停用, 啟用)

<div id"app" style"display: none">...<el-table-column prop"status" label"狀態" width"80" align"center"><template scope"scope"><span v-if"scope.row.status0"…

一道Python面試題

無意間&#xff0c;看到這么一道Python面試題&#xff1a;以下代碼將輸出什么&#xff1f; def testFun(): temp [lambda x : i*x for i in range(4)] return temp for everyLambda in testFun(): print (everyLambda(2))腦中默默一想&#xff0c;這還用說么&#xff0c;肯定是…

Windows下的ssh姐妹花 Xshell 和 Xftp

Windows下的ssh姐妹花 Xshell 和 Xftp 今天是3月8號&#xff0c;中國傳統的三八婦女節&#xff0c;是距離中國新興節日三七女生&#xff08;神&#xff09;節最近的一個全國性節日&#xff0c;今天我也是宅在家&#xff0c;研究了一下近日工作上遇到的一個純軟件技術問題。廢話…

關于數字證書理解的簡單整理以及12306站點證書簡單分析

版權聲明&#xff1a;本文為博主原創文章&#xff0c;未經博主允許不得轉載。 https://blog.csdn.net/sundacheng1989/article/details/25540601 首先簡單理解一下什么是數字證書。這里是一篇英文文檔&#xff0c;描寫敘述的非常形象。形象的描寫敘述了什么是公鑰。什么是私鑰。…

Luogu3350 ZJOI2016 旅行者 最短路、分治

傳送門 題意&#xff1a;給出一個$N \times M$的網格圖&#xff0c;邊有邊權&#xff0c;$Q$組詢問&#xff0c;每組詢問$(x_1,y_1)$到$(x_2,y_2)$的最短路。$N \times M \leq 2 \times 10^4 , Q \leq 10^5$ BZOJ原題竟然沒有數據范圍 矩形的多組詢問問題考慮分治。考慮計算矩形…

Mac中安裝Node和版本控制工具nvm遇到的坑

首先說說常規的安裝 1. 下載nvm,使用nvm來管理Node版本 官方文檔 windows 版本  https://github.com/coreybutler/nvm-windows mac 版本    https://github.com/creationix/nvm#install-script 命令行 盡量不要用brew&#xff0c;免得掉坑 curl -o- https://raw.githubu…

幾道比較有意思的js面試題

1、[] ? !![] : ![];輸出結果是什么&#xff1f; 12345let val [] ? !![] : ![];console.log(val); //true&#xff1a;//之前的錯誤解釋&#xff1a;[] 是一個null&#xff0c;做判斷則為false&#xff0c;false執行![]語句&#xff0c;結果為非空&#xff0c;即true//更正…

wepy - 與原生有什么不同(x.wpy)使用實例

源碼 1 <template>2 <view classmark wx:if"{{showMark}}">3 <view animation"{{animationData}}" class"animCat">4 <image src"http://osk1hpe2y.bkt.clouddn.com/18-5-30/34559443.jpg"></…

vue從入門到精通之高級篇(一)vue-router的高級用法

今天要介紹的是路由元信息&#xff0c;滾動行為以及路由懶加載這幾個的使用方法。 1.路由元信息 什么是路由元信息&#xff0c;看看官網的解釋&#xff0c;定義路由的時候可以配置 meta 字段可以匹配meta字段&#xff0c;那么我們該如何使用它&#xff0c;一個簡單的例子&…

Java 數組實現堆棧操作

class Stack {private int stck[] ; private int tos ; Stack(int size) { // 一個參數的構造參數stck new int[size] ; // 創建數組&#xff08;創建堆棧&#xff09;tos -1 ; // 空堆棧標識 -1}// 堆棧操作的特性&#xff1a;先進后出、后進先出void push(int…

re模塊

什么是正則表達式 一組特殊符號組成的表達式&#xff0c;用于描述某種規則。該應用場景生活中隨處可見。 例如&#xff1a;讓有志青年過上體面的生活&#xff0c;這里面就由規則&#xff0c;即有志青年。 正則表達式的作用&#xff0c;以及使用場景 用于從字符串中匹配滿足某種…