标签：des cWeb style blog class code
设计与开发规范
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布局好了的结构来逐层编写，大模块带动小模块格式。
（图8）
（图9）
l 后台规范：
一、样式调用规范
我们前端总结出了2份公共样式文件，新的项目以后在模板页都调用这2个文件。
css/global.css 初始化W3C标签的默认样式，这个文件不用怎么管。
css/base.css 这个是公共样式文件，里面初始化了很多可以直接在页面上调用的样式。
下面是base.css文件里面的内容。
（图10）
2014年2月21日
BY 乐建民、陈松
标签：des cWeb style blog class code
原文地址：http://www.cnblogs.com/RedRoshan/p/3729812.html
