之前有个朋友跟我说，做页面的时候没有思路，不知道该怎么布局，怎样快速的根据设计图制作出HTML静态页面，用什么工具比较合适等等。下面就把我个人的一个制作的方法分享一下：

一．画架构图（要根据后台调用的习惯来画，一般分为三大块儿，头部，中间内容区，footer部分）

PS：写备注很重要，所以一定要养成写备注的好习惯哦！！

如果是比较复杂的页面那么架构（布局）图对于新手来说是很重要的，首先你需要根据设计稿画出轮廓，标出大小，间距等。比如这是一个企业站：

头部（***X***）

Banner（***X***）

企业新闻（***X***）

产品简介（***X***）

什么什么（***X***）

Footer（***X***）

他们之间的间距（***X***）

这些都做完了那么你的网站的结构也就出来了，那么就开始写内容吧！

1.       首先是声明和head部分，这个不用写，直接复制就行。要注意的就是TITLE和编码部分，编码根据公司要求改掉就行，title千万别忘了改。

2.       接下来就是我们画好的结构图了，先是三个div，头部，中间内容区，footer部分。然后中间的内容区又分成两块儿，上和下，上面是banner，下面又分成三块儿左、中、右。这样框架就出来了，也不会出现什么预览的时候布局乱了的问题。（使用margin和paddind的时候注意别忘了减掉对应的值）

二．CSS（层叠样式表）部分

1.       首先有一个公用的CSS文件

2.       广告部分的CSS

3.       特殊效果的CSS

4.       文字样式文件

5.       ........

PS：写这么多的样式文件主要是为了读取速度快而且以后修改的时候方便，哪块儿需要修改直接找到对应的样式表文件就可以了。如果CSS样式很少的话那么可以写成两个或是一个文件。如果是一个大的网站那么你想想那么多的css写在一个文件中，肯定影响速度。

 

三．制作所用软件方面

前期建议使用Adobe Dreamweaver，先进有代码提示（纠正错误），第二有可视视图可以参考。做起来容易一些，但是建议慢慢的要把代码提示关掉（Ctrl+U），等你做的多了就什么软件都无所谓了，随便一个文本编辑器+浏览器就能搞定了。