frameset與frame頁面佈局
瀏覽器窗口布局,也是web專案必備的知識。
要想讓頁面整齊有序,就需要給視窗分割槽域,就像本子上寫字一樣,遵循一定的規則,比如:上留天下留底,左右留邊距,這樣看起來會更美觀。web頁面佈局用到的知識點就是html的<frameset>標籤。把瀏覽器的整個頁面按照行列規則分成一塊兒一塊兒的,把這片兒分好了,才好“種莊稼”。
下面看兩個例子:
<frameset name="testFrame" rows="50%,*" cols="*" frameborder="no" border="0" framespacing="0"> <frame src="${pageContext.request.contextPath}/getLeftTree.action" name="LeftFrame" scrolling="no" id="LeftFrame" /> <frame src="${pageContext.request.contextPath}/getMainForm.action" name="MainFrame" scrolling="NO" noresize="noresize" id="MainFrame"> </frameset>
導航跳頁面用的struts2。
<frameset rows="103,*,43" frameborder=0 border="0" framespacing="0"> <frame src="${pageContext.request.contextPath}/admin/top.jsp" name="topFrame" scrolling="NO" noresize> <frameset cols="159,*" frameborder="0" border="0" framespacing="0"> <frame src="${pageContext.request.contextPath}/admin/left.jsp" name="leftFrame" noresize scrolling="YES"> <frame src="${pageContext.request.contextPath}/admin/welcome.jsp" name="mainFrame"> </frameset> <frame src="${pageContext.request.contextPath}/admin/bottom.jsp" name="bottomFrame" scrolling="NO" noresize> </frameset>
導航跳頁面直接跳的jsp。
標籤解析:
<frameset></frameset>
frameset 元素可定義一個框架集。它被用來組織多個視窗(框架)。組織好在頁面顯示。
<frame></frame>
<frame> 標籤定義 frameset 中的一個特定的視窗(框架)。巢狀在<frameset>標籤中使用。
<noframes></noframes>
在<frameset>標籤中使用,如果瀏覽器不支援<frameset>框架,可以用它來提示訊息。
屬性解析:
<frameset>的 rows:設定有多少行,rows="103,*,43"表示有三行,第一行高103px,第三行高43px,中間一行佔剩餘的部分。rows="50%,*"表示有兩行,第一行佔50%,第二行佔剩餘的。
<frameset>的cols:設定有多少列,cols="*"表示有一列,
在rows和cols中屬性值可以設定:* 代表自適應,% 代表百分比,數字 代表多少px,它們代表的意義一樣。是frameset必備屬性。
W3School解釋了當設定的rows或cols屬性值超出瀏覽器邊界時的處理情況:
與表格一樣,瀏覽器在顯示時會盡可能接近給定的框架集尺寸。但是,瀏覽器不會為了能夠容納下超出邊沿的框架集而擴充套件文件視窗的邊界,也不會在指定的框架沒有填滿整個視窗時用空白區域來填滿視窗。相反,瀏覽器會根據一個框架在行和列中相對於其他框架的大小來分配空間,這樣就能夠填滿整個文件視窗了。
<frame>的scrolling:控制此視窗中是否顯示滾動條,可以設定auto,yes,no。
<frame>的noresize="noresize":控制邊框是否可移動,設定此屬性的frame或者frameset,則它周邊的邊都是不可移動的。
後記:
越來越發現,很多東西還僅限於淺淺的知道,不能熟練的操作,深入的理解。
只有把一樣東西能給別人說明白了,自己也就理解了。
另:
frameset和frame中的name屬性很有用,目前還有點迷惑不知道怎麼用,理解了再補充,希望大家能解惑。