div+css

●在重构也面之前要做的准备工作：

1.拿一张PSD效果图,必需是PSD的这样的话你就可以自己更加随意的做切片；

2.先把PSD不做切片生成一个网页,起名为index_psd.html(这个页面做参考用)；

3. 在准备几个必需的文件夹 images(放图片) 、css(放css样式文件)、js(放js文件)；

●准备工作做好以后，先分析整个页面的结构。分析页面的结构要先整体再部分，先看页面中最大的板块是怎样关联的是上下并列还是左右平铺。看清了页面的大板块结构，就可以构建页面最基础的几个区块了。例如我们的页面试上中下结构，这时就可以写：

<div id=”header”></div>//放也面头和导航等

<div id=”content”></div>//页面的主题内容

<div id=”footer”></div>//页面脚版权声明等等

●写css的时候就需要使用index_psd.html这个文件了，用DW打开这个文件，选择视图模式，可以通过拉辅助线，来测量各个区块的长宽为设置CSS提供参考，这样做的好处就是重构出来的页面可以精确到1像素。

●每写好一个区块就要用IE和ff测试下效果，以便及时发现问题及时解决，在各个区块没内容的时候最好给他们都加上背景色。

●写好大的板块后，再分析大板块里面的内容，同样的道理也是先整体再部分，例如内容页面看起来是左右两个板块，这个时候我们可以把代码写为：

<div id=”header”></div>//放也面头和导航等

<div id=”content”>//页面的主题内容

   <div class=”content-2-1”></div>//左边

   <div class=”content-2-2”></div>//右边

</div>

<div id=”footer”></div>//页面脚版权声明等等

其中content-2-1中的2表是分两栏，2-1表示左栏，2-2表示右栏这样的分栏方式可以使自己查看页面代码的时候更加直观，分好多栏的时候这个优势更加明显。

●新闻列表，文章列表等等最好使用：

<ul>

<li>新闻标题1< >

<li>新闻标题2< >

…………

<li>新闻标题n< >

</ul>

●栏目列表加描述的最好用：

<dl>

<dt>栏目1</dt>

<dl>栏目1描述</dl>

<dt>栏目2</dt>

<dl>栏目2描述</dl>

</dl>

●在CSS文件定义的最开始最好加上如下语句

body,html{ height:100%; }

*{ margin:0px; padding:0px; }

●最好能给大的区块设置overflow:：hidden，这样可以保证容器不被撑开，从而破坏整个页面的布局。