前端页面开发步骤详解

    老板或甲方是一个需求的真正发起者，也是一个基础idea的梦想师，产品是需求专业化梳理或进行有效评估细化需求负责的，而设计是前端的上游，前端是设计的下游。设计的工作目的是把产品宏观的思维结果进行专业的处理，因为按一般的习惯，产品最终的结果是原型图，而原型图可以理解为设计的草图，

    对真正的用户来说，这个草图过于简单或不符合使用的操作习惯，所以需要设计师进行专业的处理，比如颜色搭配，布局分隔，有时候还兼交互的一部分工作，设置用户与页面发生交互的预订流程，

    那有人问，不需要设计不行吗？直接让前端写页面不就得了，还需要麻烦设计师来做个图出来。

因为这里边有一个成本风险控制的一个理念，因为在前期，尤其是设计，主观感受大于理性的思考，所以每天的结果都不一样，所以需要设计师去消化掉这部分主观感受带来的误区，而且从成本上来讲，有些场景设计师改图比改代码要容易控制一些。

    设计师的结果是psd文件，他是很多个图层叠加在一起的结果，而前端的工作结果html页面，是把很多图层上的效果，有机的用html组织起来的过程。

前端是把转化后html交给下游服务端开发工程师，或叫后台开发，这个html里边包括一些交互的js文件等。总的来说前端是一个承前启后的岗位。也有的公司把前端的责任放大，负责整个前台view层页面的开发，这样的好与坏在前面的文章中已经探讨过就不一一细表了。

background属性

　　background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

　　a、background-color 设置背景色

　　b、background-image 设置背景图片地址

　　c、background-repeat 设置背景如何重复平铺

　　d、background-position 设置背景图片的位置

　　e、background-attachment 设置背景图片是固定还是随着滚动条滚动

实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这样做，这样性能更高，而且兼容性更好。

比如：background:#f00 url(bg.png)  no-repeat   left  center fixed

　　　background:#f00 url(bg.png)  no-repeat   10px  25px  fixed

前端页面开发流程

　　a、创建页面项目目录。

　　b、使用Photoshop对效果图切图，切出网页制作中需要的小图片。

　　c、将装饰类图像合并，制作雪碧图。

　　d、结合Photoshop和代码编辑器，参照效果图，进行html和css代码书写，制作页面。

The above is the detailed content of 前端页面开发步骤详解. For more information, please follow other related articles on the PHP Chinese website!