frameset与frame页面布局

简介: frameset与frame页面布局

浏览器窗口布局,也是web项目必备的知识。

       要想让页面整齐有序,就需要给窗口分区域,就像本子上写字一样,遵循一定的规则,比如:上留天下留底,左右留边距,这样看起来会更美观。web页面布局用到的知识点就是html的<frameset>标签。把浏览器的整个页面按照行列规则分成一块儿一块儿的,把这片儿分好了,才好“种庄稼”。

下面看两个例子:

1. <frameset name="testFrame" rows="50%,*" cols="*" frameborder="no" border="0" framespacing="0">
2. <frame src="${pageContext.request.contextPath}/getLeftTree.action" name="LeftFrame" scrolling="no" id="LeftFrame"  />
3. <frame src="${pageContext.request.contextPath}/getMainForm.action" name="MainFrame" scrolling="NO"  noresize="noresize" id="MainFrame">
4. </frameset>

       导航跳页面用的struts2。


1. <frameset rows="103,*,43" frameborder=0 border="0" framespacing="0">
2. <frame src="${pageContext.request.contextPath}/admin/top.jsp" name="topFrame" scrolling="NO" noresize>
3. <frameset cols="159,*" frameborder="0" border="0" framespacing="0">
4.  <frame src="${pageContext.request.contextPath}/admin/left.jsp" name="leftFrame" noresize scrolling="YES">
5.  <frame src="${pageContext.request.contextPath}/admin/welcome.jsp" name="mainFrame">
6. </frameset>
7. <frame src="${pageContext.request.contextPath}/admin/bottom.jsp" name="bottomFrame" scrolling="NO"  noresize>
8. </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属性很有用,目前还有点迷惑不知道怎么用,理解了再补充,希望大家能解惑。


相关文章
|
10月前
|
索引
08-多表单切换-frame/iframe
08-多表单切换-frame/iframe
|
移动开发 前端开发 HTML5
html5 h5使用canvas 画一个圆角矩形
html5 h5使用canvas 画一个圆角矩形
html5 h5使用canvas 画一个圆角矩形
HTML中的背景图片和背景颜色
HTML中的背景图片和背景颜色
65 0
HTML - Frame、FrameSet 使用
HTML - Frame、FrameSet 使用
84 0
HTML - Frame、FrameSet 使用
|
Web App开发
html frameset边框问题
用frameset构建了三个框架,将frameborder设置为0了,但是框架的边框始终显示。多番尝试之后终于找到了解决办法。就是添加属性border=“0”。
936 0
|
JavaScript 前端开发 .NET
|
JavaScript 前端开发