素马网页前端制作规范
 

素马网页前端制作规范
2013/03/08
Jason
-

目前前端开发与视觉设计工作日益复杂,不少问题都可以避免,有些是大家的默认习惯,但即使是习惯,也会疏忽。有些是只适用于某一些技术人员的设置,在责任人不在情况下,其他同学很有可能会不知所措,有了规范规避很多前端制作的问题,更有效的符W3C标准及SEO优化.


1.XHTML基本规范

   1.1 标准的XHTML需要有合适的文档头DOCTYPE和Name space

   1.2 规则

   1.3 页面内规则

   1.4 一些素马设计特定的规则:

2.CSS基本规范

   2.1 素马设计的习惯,也为了减少流量开销,CSS编写方式采用横写的方式:

   2.2 尽量不要写过长的selector

   2.3 为了避免出现视觉上的差异,颜色值用大写

   2.4 如此页面用到sprite图,那请将所有的使用此背景图的元素做一次如下的规则编写:

   2.5 声明值对尽量合并

   2.6 尽量多的考虑继承,其实不用为每个selector都写样式规则,特殊样式可以覆盖

   

3. 视觉设计规范

   3.1素马设计前端图片命名规范由UI组提出。

   3.2使用小写英文与数字、下横线进行命名,不能使用中文,尽量语义化输出。

   3.3小图标(icon),按钮等,尽量用sprite输出,减少HTTP连接(具体页面具体分析)

   3.4 主站目前页面宽度为950px(不同时期会调整),专题页以扩大到1003px。

   3.5 LOGO切图统一为无背景PNG

   3.6 导航栏部分,背景使用1PX宽度GIF填充;导航条目文字使用清晰无平滑宋体

   3.7 文字:微软雅黑, Lucida Grande,tahoma;font-size:63%em(具体文字字号、色值应用,请参见各版本对应的界面规范)

   3.8 分割线,禁止图片。使用1PX 颜色填充

   3.9 导航字色:导航部分文字16PX粗体,非当前状态字色#575757,当前状态#FF6B21

   3.10 链接状态:默认文字状态为12PX,COLOR:#FF6B21,正常链接状态,COLOR:#0082AF

   3.11 默认行距:18PX

   3.12 在设计时要考虑动态交互效果,也就是页面上的不同状态

   3.13  容器与容器间的上下左右的间距都为10px;左右两栏模块的宽度分别为:左:690px  右:250px

   3.14 每次视觉设计组输出供开发使用的素材后,邮件通知开发索取路径,如有更新请视觉组及时通知开发更换

4.JS

   4.1编码统一用UTF-8

   4.2 使用var 显式声明

   4.3 使用驼峰式编写

5.SEO规范

   5.1META中的title,keyword和description

   5.2关键图片上一定要使用alt属性,也可以写上title属性,但title属性的描述文字最好与alt属性不一致。

   5.3关键链接上要使用title属性,用来强调和增加关键字的密度。

   5.4菜单栏目的链接,指向所在目录,尽量不要指向详细页面。

6.Project中文件目录的放置

   6.1某模块使用的CSS,图片,JS等资源需要分离到resources目录下,并对应此模块进行命名。

   6.2各种活动专题,为了使得URL不过于复杂,需要跟需求提出人商议目录分配。

   6.3在需要增加目录时,请与其他同学沟通商量。