帐号: 密码:
// 设为首页 // 收藏本站 // 请您留言 // 网址导航
远方教程-满足你的求知欲!
站内搜索:
HTML ASP PHP CSS DIV Dreamweaver Photoshop Word Excel PPT SEO技巧
您当前位置:网站首页 >> HTML入门 >> HTML基础教程 >> 阅读文章

HTML基础第七讲:框架

来源:远方教程 作者:远方教程 发布时间:2013-10-15 查看次数:5586 访问[新版]

    框架(Frame)也就是所谓的分割窗口、分割画面、框窗效果(还真是五花八门),这个技巧在运用上问题比较多,用的好的话,有助于网友快速且有条理的浏览网页,整理不好的话,呵呵…那笑话可就闹大了。 

【开始分割】 

1. 别急、别急,分割窗口可是一门学问,要分割也是要一步一步来的。看看刚刚那例子,想象画面是一个蛋糕,你要怎么割,才能割成那样呢?

原始码  呈现结果 
<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
</HTML> 
 

2. 各位会发现,奇怪,在上面的语法中,怎么都没见到<BODY></BODY>熟悉的身影?呵呵…没错,它已经被待会儿要加进去的<FRAMESET></FRAMESET>卷标给取代了!也就是说,如果我们要分割画面,就要先用<FRAMESET>卷标告诉计算机说:『喂!我要开始分割了!』此时,<BODY>是派不上用场的,所以躲到一旁凉快去了! 

3. 现在开始动手割割看啰!我们先将画面分成左右两边(左边就是框窗 1 了,右边就暂定为 2 等一下还要分割呢!),如下图:

原始码  呈现结果 

<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
<FRAMESET COLS="120,*" >
 <FRAME SRC="a.htm" NAME="1">
  <FRAME SRC="b.htm" NAME="2">

</FRAMESET>
</HTML> 

 
   

4. 在<FRAMESET>中,我们要告诉计算机到底是要左右分(COLS)?还是上下分(ROWS)。一开始我们是左右分,所以我们写成<FRAMESET COLS="120,*" >。COLS="120,*" 就是说,左边那一栏强制定为 120点,右边则随窗口大小而变。除了直接写点数外,我们亦可用百分比来表示,例如COLS="20%,80%"也是可以的。 

5. 然后,再将右边的框窗再割成上下两个画面(也就是框窗 2 和 3 了)。如下图: 

原始码  呈现结果 

<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
<FRAMESET COLS="120,*">
  <FRAME SRC="a.htm" NAME="1">
  <FRAMESET ROWS="100,*">
   <FRAME SRC="b.htm" NAME="2">
   <FRAME SRC="c.htm" NAME="3">

  </FRAMESET>
</FRAMESET>
</HTML> 

   
 

6. 看见了没?原本的<FRAME SRC="b.htm" NAME="2">(在第 3 点的语法中)被另一组<FRAMESET ROWS="100,*" >所取代了!所以要注意喔!第二组<FRAMESET ROWS="100,*" >是被第一组<FRAMESET COLS="120,*" >所包围起来的喔!(乱七八糟了对不对?

 7. 呵呵…不知不觉就大功告成了,其实只要将最后完成的那些语法存成 index.htm,然后再准备三个档 a.htm 、b.htm 、c.htm那么就完工啰!当然,这是一个最简单的分割法,我们会再将一些进阶的卷标在底下一一说明。

第1页 第2页 第3页
打印 打印 | 关闭 关闭 评论
相关文章
图片新闻
站内搜索  
搜索
猜您喜欢  
最新更新  
阅读排行  
关于我们 | 联系方式 | 大事记 | 免责声明 | | 给我留言
部分广告源自金山联盟2345联盟 QQ咨询 站长之家QQ群:232617873
Copyright 2024 远方教程 © All Rights Reserved.

回顶部