设计与开发规范

l 设计规范

一、图层分类和命名规范

设计在制作PSD
图层时一定要层次分离，结构清楚（如图（1）,（2）），看到下图就可以感觉到图（2）更能清晰的看到PSD里面的内容，以相应的页面结构内容名称来命名对应的图层，这样可以一目了然，知道PSD里面的各个层内容属于页面的哪一块。

（图1）
（图2）

二、图层结构规范

以HTML代码结构和对应PSD的层结构（图3），这样排版方便前期制作页面，更方便后期进行页面重构，这就需要设计人员在得到设计文案时，就注意到页面结构这方面，到时前端开发人员就可以方面的按照PSD结构来进行制作页面。

　　　　　　　　　　　　（图3）

三、页面设计规范

设计人员在设计小图标的时候，要做成透明背景层，方便在不同背景色下的调用。

页面整体布局要确认好主字体，主颜色，次颜色，色彩搭配方面在网页中也是一个层次结构。

为方便开发页面，最好能把一个关键内容，字体颜色，链接颜色，小图标等提取出来放到一新图上展现（图4），这些对于设计人员和开发人员来说相对简单！。

　　　　　　　　（图4）

l 前端规范：

一、样式命名规范

写样式表如何命名，怎么才能看名字就清楚的知道所的代表的模块，这可以以相应模块的内容来命名如图（图5），这样页面大结构就出来了。

模块层次太多，为了一层一层的去区分，一般都是用骆驼规则和下划线规则（图6），

　　　　　　　　　　　　（图5）

　　　　　　　　　　　　　　　　　　（图6）

　　　　　　　　　　　　　　　　　　（图7）

二、样式结构规范

在切页面之前先仔细看下PSD上的页面结构是怎么样的，一般都是上中下，中间在分左右结构，这种符合大多数网站，一些其他自己看看也就清楚了。如（图7）中的页面结构布局就把整个页面先分割出来，在相应的编写里面的内容，当大的框架出来了，就可以去编写样式表，如图（8）样式表里面的代码也是按照HTML布局好了的结构来逐层编写，大模块带动小模块格式。