HTML页面布局方式

页面布局设计方式：
1.框架布局[+CSS]
 应用范围：小型的商业网站，论坛，后台管理，学习教程网站，例如：chinaRen社区
 优点：支持滚动条，便于导航，节省页面下载时间
 缺点：页面样式不美观

2.表格布局[+CSS]
 应用范围：组织有规律的数据，例如：账目，考勤，用户信息等
 优点：
  1.表格可嵌套
  2.表格布局比较方便，快捷
 缺点：
  1.大量布局表格，造成代码臃肿，下载速度缓慢
  2.嵌套后的表格，如需修改样式，需要重新设计，修改麻烦

3.DIV+CSS[要点：div的样式属性：diaplay,float,clear,z-index,margin,padding]
 应用范围：大型的门户网站，例如：网易，搜狐，新浪，淘宝等。
 优点：
  1.支持所有的浏览器
  2.搜索引擎更加友好
  3.样式调整更加方便
  4.结构清晰，代码简洁
  5.表现[CSS]和结构[DIV]相分离，在团队开发中便于分工合作而减少相互关联
 缺点：
  1.对CSS高度依赖，使得网页设计变得比较复杂
  2.CSS文件异常将会影响整个网站的正常浏览
  3.CSS网站设计的浏览器的兼容性问题比较突出

问题1：现在什么布局方式最流行？
 DIV+CSS

问题2：是不是过时的页面布局方式就不能用了？
 不是，因为目前我们的浏览器都能解释 以上3种布局方式。

问题3：是不是每个网站的页面布局方式，只能选择以上其中一种？
 不是，可以以1种为主题，其他辅助使用。

 

 

 

 

 

 

1.框架布局
 框架集：frameset
 框架:frame

<frameset rows="20%,*,20%" border="0">
 <frame src="top.html" name="top" scrolling="no" />
 
 <frameset cols="20%,*">
  <frame name="left" src="left.html" />
  <frame name="right" src="right.html" />
 </frameset> 
 
 <frame name="bottom" src="bottom.html" />
</frameset>
<noframes></noframes>

 实施步骤：
 1.确定页面框架的草图
 2.将框架集页面[index.html]和需要嵌入框架的页面[top.html,bottom.html,left.html,right.html]创建完成
 3.在框架集页面[index.html]中编写框架布局代码，然后给每个框架[<frame name="">]命名，嵌入[< frame src="">]框架页面