建站abc网站（4）现在我们有了个网站index.htm,并且绑定了域名（没有买域名的同学可以继续用空间商送的免费的，一样学），这一篇我们扩充网站index.htm的内容，并且排版。
首先说怎么添加图片，在网上随便找个好看的图片，下载到自己桌面上，并重命名为 1.jpg ,表示是我们的第一个图片。（提示：你找的图片如果不是jpg格式的会出错，重新找一找jpg格式的图片，就是后面后缀名为.jgp）。
桌面上的 index.htm 应该没有删吧，删的话重新建一个，然后右键--index.htm，选择打开方式-选择记事本打开，然后在记事本中输入：
我的第一个网站，网贷揭秘 wangdai119<img src="1.jpg">
然后保存并关闭。
打开一个文件夹，并在文件夹的地址栏打开你的ftp地址，登陆你网上的文件夹，把 index.htm 和 1.jpg这两个文件都拖进去，覆盖上次拖进去的index.htm。
现在打开你的网站，就能看到图片了，你可以把 1.jpg 换成任何图片文件，也可以换成一个图片网址。
以后讲的内容大家都可以在本机浏览，不用上传到网上的文件夹了，因为比较麻烦，大家心里知道怎么把内容放到网上就可以了。
现在讲用DIV定位，就是规定内容在网站的哪个地方显示，一个DIV就是一个长方形，你可以规定这个长方形多高，多长，里面内容随便填。一个标准的DIV类似这样：
<div id="toubu" style="width:900px;height:100px;border:1px solid red;">我的第一个网站，网贷揭秘 wangdai119 ，我是顶部</div>
其中开头的<div 告诉浏览器我是一个长方形，结尾的</div>告诉浏览器这个长方形结束了。长方形中间的内容可以随便填。其中id="toubu"就是这个长方形的名字，一个网站可能有很多长方形组成，每个长方形应该有自己的名字，就像一个班级没人名字都不一样，不然就乱了。
style=后面的内容就告诉浏览器我这个长方形是什么样子的，width:900px就是长方形宽900像素，height:100px;就是长方形高100像素，border:1px solid red; 这里有三个东西，border:是长方形边框的意思，1px 是边框宽1像素，solid是说边框是实线的，red是说边框的颜色是红色的。其中我的第一个网站，网贷揭秘 wangdai119 ，我是顶部就是长方形中间的内容，合起来就是定义一个高100宽900，边框宽1像素红色实线，内容是刚才的内容的长方形。把代码复制进index.htm，保存-关闭，然后用浏览器打开就可以看到效果了。
现在我们做一个通常网站会用的模板，
<div style="margin:0px auto;width:900px;">
<div id="toubu" style="width:900px;height:100px;border:1px solid red;">我的第一个网站，网贷揭秘 wangdai119 ，我是顶部</div>
<div id="zuoce" style="float:left;width:300px;height:100px;border:1px solid red;">我是左侧，通常会放导航</div>
<div id="youce" style="float:right;width:580px;height:100px;border:1px solid red;">我是右侧，通常会放主要内容</div>
<div id="dibu" style="clear:both;width:900px;height:100px;border:1px solid red;">我是底部，通常会放版权链接</div>
</div>
显示效果如下图
这里有五个长方形，其中一个是隐藏的，四个现时代额红色长方形都在长方形排版方法如下，我们先剔除长方形样式的语句，只说div怎么排的，div标记必须成对出现，像下面一样
<div>我是隐藏的长方形的开始
<div>我是顶部长方形的开始 </div> 我是顶部长方形的结束
<div>我是左边长方形的开始 </div>我是左边长方形的开始
<div>我是右边长方形的开始 </div>我是右边长方形的开始
<div>我是底部长方形的开始 </div>我是底部长方形的开始
</div>我是隐藏的长方形的结束
其中顶部和底部的长方形大家好理解，从上到下排列显示的，中间两个并排的不好理解。
顶部和底部长方形宽都是900，左边长方形宽300，右边的宽580。
大家看代码里左边长方形多了一个参数float:left;，表示这个长方形靠左侧显示。右边长方形也多了一个float:right;表示这个长方形靠右侧显示。所以能并排显示。
有一个细节是底部长方形也多了一个参数，clear:both; ，这个参数的意思是说，我不跟上面那两个家伙一样，我不并排排列的，我按原来从上到下的顺序排列，所以就不会出问题。
里面的参数大家可以自己按喜好修改试试，长方形内的内容更是可以随便修改，把我们刚才说的图片放上去也可以。
下一篇详细讲解DIV的细节，毕竟CSS还没出现呢。
感谢观看
