美工与前端开发人员工作规范一、 美工设计规范1、文件命名命名规范一般为文件名+日期：例如：home首页 2011-6-1.psd，亦可以细分，命名尽量做到简洁清晰，易于查找。文件夹要分类命名，文件要分类放置，方便查找管理。2、网页设计元素命名与图层分组下面是网页中比较常用的中英文命名，结合了网站制作的CSS命名规范，这样可以统一并提高效率。为了方便大家看，特制简易表格。登录条标志侧栏页面头导航子导航菜单子菜单LoginBarLogoSidebarBannerNavSubNavMenuSubMenu搜索页面主体滚动内容标签页文章列表提示信息小技巧SearchMainScrollContentTabListMessageTips下载注册状态按钮投票合作伙伴版权路径导航DownloadRegisterStatusBottonVotePartnerCopyrightShowpath栏目标题友情链接页脚加入指南服务热点新闻TitleFriendLinkFooterJoinUsGuideServiceHotNews当然，命名不一定要照搬，可以根据具体来实施，做到规范明了即可。上面的每个组可能都包含着若干图层路径，这些都要命名详细。细节决定深度，按类分组图层，既方便过程的编辑又方便以后的修改，亦可以避免冗余图层的存在。 一个页面包括很多元素，要分组管理，还要规范每一个图层、路径的命名，方便查找修改，这是设计的基本要求。一般是按块级元素把图层分组并命名，每个组包含若干图层和路径，再相应命名。好比我们的文件夹下的文件夹和文件。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=http:/www.telligem.com/ ,即须在URL地址后面加上“/”； 在页面中尽量避免使用XHTML标签的样式属性,即。！尽量减少页面的HTTP请求: 合并压缩的多个JS到一个文件中； 合并压缩的多个CSS到一个文件中, 能写成样式背景的图片，必须写在样式中； 尽量减少DIV的嵌套层数； 统一域名下的项目页面链接使用相对路径（例如：./AR/music.php），而不是绝对路径(例如：http: /www.telligem.com/AR/music.php)； 给区块代码和套程序的循环的第一条数据加上注释。2、XHTML标准 每 个页面必须宣告使用哪一种DTD，目前非特殊情况下我们采用XHTML 1.0 Transitional DTD (一般为：；)，即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主张的是采用标签。为了解决不同浏览器的兼容，有一个变通 的解决方法是2个标签都采用。完整的示例代码如下(flash背景为透明)： 在页面中碰到有单选框、复选框的时候要给单选框、复选框加上标签； XHTML标准标签和不赞成使用的标签，参考http:/www.w3schools.com/： XHTML标准标签，参考http:/www.w3schools.com/tags/default.asp： 标签类型 标签o 结构 html、head、body、div、spano Meta信息 DOCTYPE、title、link、meta、styleo 文 本 p,h1,h2,h3,h4,h5,h6,strong,em,abbr,acronym,address,bdo,blockquote,cite,q,code,ins,del,dfn,kbd,pre,samp,var,bro 链 接 a、baseo 图片和对象 img、area、map、object、paramo 列表 ul、ol、li、dl、dt、ddo 表格 table、tr、td、th、tbody、thead、tfoot、col、colgroup、captiono 表单 form,input,textarea,select,option,optgroup,button,label,fieldset,legendo 脚 本 script, noscripto 表现 b,i,tt,sub,sup,big,small,hro 其 他 一般属性 3、图片规范 图片统一放在images文件夹下面； 图片格式：图片只允许采用gif(256 128 64 32.)jpg(小于80比)压缩格式，要平衡图片质量与文件小,不分损失质量情况下尽量减小页面下载数据量。一般的规律颜色层 次变化少的图用gif，反之jpg. 图片切割严格按照像素内容边缘动刀。 图片命名规范 名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些大家都能看懂的词汇。使得你自己 和工作组的每一个成员能够方便的理解每一个文件的意义。 名称分为头尾两部分，用下划线隔开。 图片分类 命名： 广告、装饰图案等长方形的图片 ad_ 标志性的图片 log_ 在 页面上位置不固定并且带有链接的小图片（按钮）btn_ 导航图片 nav_ 菜单图片 men_ 装 饰用的照片取名