首先，我们来看一下效果图，如下图1

图1

然后我们来把图的组成部分划分一下。其实一个网站无非就是三大部分：头部Head、主体Body（或者Main）、页脚Footer 如下图2，然后在每个大块中再划分多个小块，这样，一个基本的网站就出来了，最后再通过DIV+CSS来定位、美化，那么，你的网站就是一个又好看，又实用的网站了！说到这，也许你想，说得简单……不错，“说”是一个很件简单的事情，能不能成功，就要看你的努力了！

图2

这一节课我们就先分析一下网站整体网站和布局。网站是以纯DIV+CSS排版的，这样的网站在SEO优化方面有着绝对的好处，至于怎么个好法在这里也不多说，大家可以上网找一下就知道了。网站是以绿色加深黄色为主色，体现出了“节能环保”理念，给人一种清新、轻松的感觉。网站的背景使用一张背景，不过这不是一张大大的图片，而是一张小小的图片，宽度只有1px，长就有比较长了，有600px。为什么会这样的呢？就是因为使用了CSS的原因，我让这张图片在整个浏览器窗口的X轴上重复显示 repeat-x ，所以就有了这样的效果了。

网站的头部head

图3 头部Head

head 部分的左上角放一个Logo，正中间的位置放置了一个h1的标签，这样做利于网站的SEO优化。右边放置“设为首页、加入收藏、发送邮件”等链接，接着下面放一个导航条Nav，再下来就是一个Banner条了，或者你放一张图片也可以，不过最好是别放一个大大的Flash上去，这样对搜索引擎不友好，而且所放的Banner条或者图片都尽量小。

网站的主体body

图4 网站主体Body

body部分也分为三大部分，left、right_top、right_bottom。如上图4

在left中，我们可以定义“产品列表”和“联系我们”这两个元素为h3 然后再用CSS来定位和设置它们的背景图片和文字颜色等等。在写的时候应该这样写:

.left h3{
background: url(../images/h3title.jpg) no-repeat scroll 0 0 transparent;
color: #FFFFFF;
font-size: 18px;
height: 46px;
line-height: 45px;
padding-left: 47px;
}

在right_top部分中，我们也可以把它们分成两部分来看，一部分是左边的公司简介，一部分是右边的新闻列表和常见问题列表。一般在整个页面中，有“标题性”的文字都可以用h标签来标示，不过最好是用h3以下的，总数量不能超过5个，这样能保护网站首页权重。至于右边的列表部分，可以用h3标签+ul li列表的形式来做。如下图5

图5 right_top部分

在right_bottom部分里面，是用了“产品图片+产品名称”的方式来排列的，这里也只是用了ul li标签来排列而已。

网站的页脚footer