网站的前端架构也叫切图，就是把网站从设计稿变成代码+素材的形式，而不是大家理解的把图片切成小碎片。为了加快网站开发进度，一般网站前端制作的过程是确认一个页面就开始做一个页面。比如说确认了首页的设计稿，我们就开始制作网站首页，内页确认完就开始制作内页。
相对于把一个设计图分割成几个小图片那样简单粗暴的“切图方式”，我们所说的网站前端架构实际上是把设计稿转化成DIV+CSS架构的HTML文件、CSS文件、JS前端程序文件，这样的网站切图主要有以下几方面的好处：
1、页面特效更丰富
2、加载速度更快
3、更利于搜索引擎抓取
写成代码的方式，就可以做很多交互特效，而不是一个死板的图片。而且尽可能地把文字都做成html中的文字这样搜索引擎抓取识别度更好。再进行网站前端架构的时候主要有三个步骤：
第一步：素材处理
PS文件里有一些素材，是需要做成一个一个的小图片的，还有一些图片可能不在设计稿里也需要进行一些处理，比如说尺寸大小的处理，压缩等等。
第二步：div+css架构
html书写过程就是一个div+css架构的过程。
第三步：增加CSS3特效
网站上部分细节需要用到css3的动态特效。这个在制作网页的时候有的就会写好，还有一些会在做好之后再增加。
第四步：增加JS特效
js和css3相互替代，但是有各有特色，所以根据网站的情况来进行JS特效的架构和调优。
第五步：兼容性测试
网站前端开发一定要注意兼容性，要在各大浏览器上表现出色才行。
以上四个步骤并不是完全割裂开的。考虑到开发效率，我们不会把四个过程流水线操作，也不会分成4个人来做，而是同一个人操作，这样在书写的时候有些模块是直接全部都处理好的，包括特效都是在书写的时候就做好的。
