美工与前端开发人员工作规范

美工与前端开发人员工作规范

一、美工设计规范

1、文件命名

命名规范一般为文件名+日期：

例如：home首页 2011-6-1.psd，亦可以细分，命名尽量做到简洁清晰，易于查找。文件夹要分类命名，文件要分类放置，方便查找管理。

2、网页设计元素命名与图层分组

下面是网页中比较常用的中英文命名，结合了网站制作的CSS命名规范，这样可以统一并提高效率。

为了方便大家看，特制简易表格。

登录条标志侧栏页面头导航子导航菜单子菜单LoginBar Logo Sidebar Banner Nav SubNav Menu SubMenu

搜索页面主体滚动内容标签

页文章列

表

提示信息小技巧

Search Main Scroll Content Tab List Message Tips

下载注册状态按钮投票合作伙

伴

版权路径导航Download Register Status Botton Vote Partner Copyright Showpath 栏目标题友情链接页脚加入指南服务热点新闻Title FriendLink Footer JoinUs Guide Service Hot News

当然，命名不一定要照搬，可以根据具体来实施，做到规范明了即可。上面的每个组可能都包含着若干图层路径，这些都要命名详细。细节决定深度，按类分组图层，既方便过程的编辑又方便以后的修改，亦可以避免冗余图层的存在。

一个页面包括很多元素，要分组管理，还要规范每一个图层、路径的命名，方便查找修改，这是设计的基本要求。一般是按块级元素把图层分组并命名，每个组包含若干图层和路径，再相应命名。好比我们的文件夹下的文件夹和文件。

3、图形对象约定

•图片的格式：最后生成 jpg、gif、png、swf 格式的图形文件；

•图片的字节大小：需经过处理，例如相片须用ACDSEE压缩后再导入，避免图像超过500KB。

4、设计人员使用photoshop或者fw设计时的规范

•标注出元素的宽(width)和高（height）；

•标注出字体的大小及颜色；如：12px、#f00；

•标注出字体的样式；如：加粗；

•标注出在页面中不是用图片内容颜色值。例如：body背景颜色值、文字颜色值、一些要实现交互状态变化的颜色值（具体要标明：link[链接]、 active[点击]、hover[鼠

标移上]、visited[访问后]）要分别的标注。注释：在网页中用图片表示的一般都是用code不能实现的效；

•标注出内外间距。如：内间距包括行距、字间距(Letter-spacing、Tracking)、内容与容器边缘的距离（填充）。外间距就是两个容器之间的距离；注释：把每个元素间距标注出来就ok。。最好：上、下、左、右的都标注下；

•截出网页要用到的一些图片：不能用网页实现的；

•把截取出网页各个图片最好组合成一张图片。

二、前端开发人员规范

1、静态页面基本规范

•静态页面命名应根据项目文档中程序页面文件命名；例如程序页面文件名为index.php 或index.aspx则静态页面的文件名应为index.html或 index.shtml；

•静态页面XHTML代码应采用自动缩进的形式编写，这样代码层次结构清晰；

•根据项目文档选择页面编码格式，一般为UTF-8；非项目页面着统一采用UTF-8，特殊项目或有特定需求的按需求确定编码格式；

•非特殊情况下必须把CSS外部链接放到页面的顶部（… 标签之间）；

•非特殊情况下必须把JS代码或外部链接放到页面的底部（标签之前）；

•书写链接地址时，必须避免重定向，例如：href="/" ,即须在URL地址后面加上“/”；

•在页面中尽量避免使用XHTML标签的样式属性,即style="…"。

！！！尽量减少页面的HTTP请求:

•合并压缩的多个JS到一个文件中；

•合并压缩的多个CSS到一个文件中, 能写成样式背景的图片，必须写在样式中；

•尽量减少DIV的嵌套层数；

•统一域名下的项目页面链接使用相对路径（例如：../AR/music.php），而不是绝对路径(例如：http: ///AR/music.php)；

•给区块代码和套程序的循环的第一条数据加上注释。

2、XHTML标准

•每个页面必须宣告使用哪一种DTD，目前非特殊情况下我们采用XHTML 1.0 Transitional DTD (一般为：

1.0Transitional//EN"

ttp:///TR/xhtml1/DTD/xhtml1-transitional.dtd">；

xmlns="/1999/xhtml">)，即DreamWeaver 8和cs3版本默认的DTD；

•所有XHTML代码必须全部小写；

•XHTML标签的属性值必须用双引号（””）括起来,并且一定要有值,不能简写缩写；

•双标记签都要有开始和结束标签，单标记标签的后面一定要加“/”,例如：
等，并且有正确的层次；

•非特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font br b等；

•id属性，同一页面不要重复使用同一id；

•给重要图片加上alt属性；给重要的元素和截断的元素加上title；

•所有标签必须进行合理的嵌套，体现文档的结构，并有利于搜索引擎的查询；

•则上，我们禁止用 来人为干预图片显示的尺寸，而且建议 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给 附上 width 和 height 属性。

•行距建议用百分比来定义，常用的两个行距的值是line-height: 150%.

•表格：在排布表格之前，认真思考一个最佳的方案，表格的嵌套尽量控制在三层以内，禁止使用 标记，也就是横纵合并单元格，这两个标记会带来许多麻烦。

•表格嵌套必须条理清晰一目了然，各区块独立性强，便于修改。主要框架使用绝对像素，以免产生变形。一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请分段加入标记，以便能够使这个大表格分块显示。

•flash 的嵌入方法错误。最早是Netscape的私有标签，即使后来为IE所支持，但始终没有被W3C承认，在 XHTML1.0没有这个标签。W3C主张的是采用