理解网页布局中的厂型设计-优快云博客

网上的站点有很多，布局方式也多种多样。但有一种是十分常用的，那就是厂型。

常用厂型各部分作用简析：头部是网站Logo，左侧是导航，右侧是信息显示区域。

网站Logo区域
导航区域	主区域（信息显示）

一般可以使用HTML中的框架来完成上述布局，即<frameset>和<frame>结合。html源码如下：

<html>
  <head>
    <title>欢迎来到斌斌的小站！</title>
  </head>
  <!-- 先分为上下两部分 -->
  <frameset rows="75, *" frameborder="no">
  	<noframes>
	  	<body>
	  		<span>欢迎来到斌斌的小站（http://blog.youkuaiyun.com/binbinxyz）</span><br/>
	  		<span>您的浏览器不支持框架，页面无法显示！</span>
	  	</body>
  	</noframes>
  	
  	<frame id="topFrame" name="topFrame" src="top.jsp" style="overflow: hidden"/>
    <!-- 然后分为左右两部分 -->
  	<frameset cols="130, *">
  		<frame id="leftFrame" name="leftFrame" src="left.jsp"/>
	  	<frame id="mainFrame" name="mainFrame" src="main.jsp" />
  	</frameset>
  </frameset>
</html>

需要注意的是在left.jsp中，链接一般要添加target="mainFrame"属性值对。即：

<a href="main.jsp" target="mainFrame">▶ 首页</a>

这样的话，当用户点击首页链接时才能在正确的位置显示该首页的内容。

网站主页布局（厂型）源码