我们在日常编写代码的时候，通常第一步看到就是psd的设计稿，也就是我们所说的效果图，那么我们该如何去处理，让效果图变成一个网站前端代码呢？
首先我们要明白一点，什么是效果图？从广义程度来说，效果图也就是利用计算机软件做的一个高仿真模拟图，它主要运用于建筑行业、城市规划、景观环境设计、室内设计、机械加工等等，具体到网页上面来，效果图一般是指ui设计师按照客户需求制作的页面效果。一方面让客户知道最终呈现的形态，另一方面指导前端工程师如何进行页面制作。
在明白效果图之后，我们就需要对网站进行一个前期的准备了，在我们拿到页面的效果图之后，就需要对页面的整体风格进行一个大概的了解，然后针对页面中出现的一些功能点与ui或者客户进行一个沟通，确认好整体的页面需求之后才能够进行正式的“动工”，正所谓心中有数，方能下笔无忧。具体的流程如下所示：
接下来我们就需要搭建网站，一般来说，我们每做一个网站项目都需要单独建立一个文件夹进行一个区分保存，命名方式为：网站名称+时间+人员。方便我们后期进行一个查找。同时为了后期方便开发人员进行一个维护，我们需要对内容进行一个分门别类的处理，各个文件分开存放，方便后期进行一个查找。
在具体的实施阶段，在编写代码的时候，我们需要对网站整体进行一个定义，设置关键词，描述，引用css文件，js文件等等，主要还是以下几个步骤来进行操作。
至于网站的适配方面，我们可以多种方式进行操作，例如采用rem布局，vw/vh布局，百分比布局，flex布局等等。具体操作点看底部的ppt文档。
当所有的页面完成之后，我们还需要对页面进行一个测试处理，只有网站界面可以正常的进行正常的一个浏览，这个页面才算真正的完成了。
附上讲解的ppt文件：