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

《美工与前端开发人员工作规范》由会员分享，可在线阅读，更多相关《美工与前端开发人员工作规范（7页珍藏版）》请在金锄头文库上搜索。

1、美工与前端开发人员工作规范一、 美工设计规范1、文件命名命名规范一般为文件名+日期：例如：home 首页 2011-6-1.psd，亦可以细分，命名尽量做到简洁清晰，易于查找。文件夹要分类命名，文件要分类放置，方便查找管理。2、网页设计元素命名与图层分组下面是网页中比较常用的中英文命名，结合了网站制作的 CSS 命名规范，这样可以统一并提高效率。为了方便大家看，特制简易表格。登录条 标志 侧栏 页面头 导航 子导航 菜单 子菜单LoginBar Logo Sidebar Banner Nav SubNav Menu SubMenu搜索 页面主体 滚动 内容 标签页文章列表提示信息 小技巧Sea

2、rch Main Scroll Content Tab List Message Tips下载 注册 状态 按钮 投票 合作伙伴版权 路径导航DownloadRegister Status Botton Vote Partner Copyright Showpath栏目标题 友情链接 页脚 加入 指南 服务 热点 新闻Title FriendLink Footer JoinUs Guide Service Hot News当然，命名不一定要照搬，可以根据具体来实施，做到规范明了即可。上面的每个组可能都包含着若干图层路径，这些都要命名详细。细节决定深度，按类分组图层，既方便过程的编辑又方便以后的

3、修改，亦可以避免冗余图层的存在。 一个页面包括很多元素，要分组管理，还要规范每一个图层、路径的命名，方便查找修改，这是设计的基本要求。一般是按块级元素把图层分组并命名，每个组包含若干图层和路径，再相应命名。好比我们的文件夹下的文件夹和文件。3、图形对象约定 图片的格式：最后生成 jpg、gif、png、swf 格式的图形文件； 图片的字节大小：需经过处理，例如相片须用 ACDSEE 压缩后再导入，避免图像超过500KB。4、设计人员使用 photoshop 或者 fw 设计时的规范 标注出元素的宽(width)和高（height）； 标注出字体的大小及颜色；如：12px、#f00； 标注出字体

4、的样式；如：加粗； 标 注出在页面中不是用图片内容颜色值。例如：body 背景颜色值、文字颜色值、一些要实现交互状态变化的颜色值（具体要标明：link链接、 active点击 、hover鼠标移上、visited访问后）要分别的标注。注释：在网页中用图片表示的一般都是用 code不能实现的效； 标注出内外间距。如：内间距包括行距、字间距(Letter-spacing、Tracking)、内容与容器边缘的距离（填充）。外间距就是两个容器之间的距离；注释：把每个元素间距标注出来就 ok。最好：上、下、左、右的都标注下； 截出网页要用到的一些图片：不能用网页实现的； 把截取出网页各个图片最好组合成一

5、张图片。 二、前端开发人员规范1、静态页面基本规范 静态页面命名应根据项目文档中程序页面文件命名；例如程序页面文件名为 index.php或 index.aspx 则静态页面的文件名应为 index.html 或 index.shtml； 静态页面 XHTML 代码应采用自动缩进的形式编写，这样代码层次结构清晰； 根据项目文档选择页面编码格式，一般为 UTF-8；非项目页面着统一采用 UTF-8，特殊项目或有特定需求的按需求确定编码格式； 非特殊情况下必须把 CSS 外部链接放到页面的顶部（ 标签之间）； 非特殊情况下必须把 JS 代码或外部链接放到页面的底部（ 标签之前）； 书写链接地址时，

6、必须避免重定向，例如：href=http:/ ,即须在URL 地址后面加上“/” ； 在页面中尽量避免使用 XHTML 标签的样式属性,即 style=。！尽量减少页面的 HTTP 请求: 合并压缩的多个 JS 到一个文件中； 合并压缩的多个 CSS 到一个文件中, 能写成样式背景的图片，必须写在样式中； 尽量减少 DIV 的嵌套层数； 统一域名下的项目页面链接使用相对路径（例如：./AR/music.php），而不是绝对路径(例如：http: / 给区块代码和套程序的循环的第一条数据加上注释。2、XHTML 标准 每 个页面必须宣告使用哪一种 DTD，目前非特殊情况下我们采用 XHTML 1

7、.0 Transitional DTD (一般为：；)，即 DreamWeaver 8 和 cs3 版本默认的 DTD； 所有 XHTML 代码必须全部小写； XHTML 标签的属性值必须用双引号（”）括起来,并且一定要有值 ,不能简写缩写； 双标记签都要有开始和结束标签，单标记标签的后面一定要加“/”,例如：等，并且有正确的层次； 非特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font br b 等； id 属性，同一页面不要重复使用同一 id； 给重要图片加上 alt 属性；给重要的元素和截断的元素加上 title； 所有标签必须进行合理的嵌套，体现文档的

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

9、的两个行距的值是 line-height: 150%. 表格：在排布表格之前，认真思考一个最佳的方案，表格的嵌套尽量控制在三层以内，禁止使用 标记，也就是横纵合并单元格，这两个标记会带来许多麻烦。 表格嵌套必须条理清晰一目了然，各区块独立性强，便于修改。主要框架使用绝对像素，以免产生变形。一个网页要尽量避免用整个一张大表格，所有的内容都嵌套 在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲 入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请分段加入 标记，以便能够使这

10、个大表格分 块显示。 flash 的嵌入方法错误。 最早是 Netscape 的私有标签，即使后来为 IE 所支持，但始终没有被 W3C 承认，在 XHTML1.0 没有这个标签。W3C 主张的是采用标签。为了解决不同浏览器的兼容，有一个变通 的解决方法是 2 个标签都采用。完整的示例代码如下(flash 背景为透明)： 在页面中碰到有单选框、复选框的时候要给单选框、复选框加上 标签； XHTML 标准标签和不赞成使用的标签，参考 http:/ XHTML 标准标签，参考 http:/ 标签类型 标签o 结构 html、head、body、div、spano Meta 信息 DOCTYPE、t

11、itle、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,o

12、ption,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. 图片切割严格按照像素内容边缘动刀。 图片命名规范 名称全部用小写英文字母、数字、下划线的组合，其中不得包

13、含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些大家都能看懂的词汇。使得你自己 和工作组的每一个成员能够方便的理解每一个文件的意义。 名称分为头尾两部分，用下划线隔开。 图片分类 命名： 广告、装饰图案等长方形的图片 ad_ 标志性的图片 log_ 在 页面上位置不固定并且带有链接的小图片（按钮）btn_ 导航图片 nav_ 菜单图片 men_ 装 饰用的照片取名 pic_ 不带链接表示标题的图片取名 tit_ 小图标 ico_ 背 景图片 bg_ 依照此原则类推，名字要让旁人搞得懂。 尾部分用来表示图片的 具体含义。 样例，大家应该能够一眼看明白图片的意义： ad_sohu.gi

14、f、 ad_sina.gif、men_aboutus.gif、men_job.gif 、tit_news.gif、 log_police.gif、 log_national.gif、pic_people.jpg、pic_hill.jpg、ico_arrow.gif注： 在开发页面的时候我们通常会遇到一些数据图片，比如：MV 的缩略图，个性化头像等，这些图片统一使用 001.gif，002.jpg，003.gif依 次命名，这些图片在项目正式上线后，应在服务器上删除，备份文件中仍需保留； 目前尽量不使用带透明度的 PNG 格式的图片；4、 CSS 样式书写规范1、样式命名规范class 命名采用

15、小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；。例如：.tit(标题)，.com_u(评论人)，.l01(某一块的 左边) 等，样式名称以数字开头无效部分命名解释约定（后期不断更新，以“附件 1. 命名解释约定 ”的形式）：解释含义 命名左边(右边) .l（.r ）或.l. (.r.)标题 .tit_.按钮 .btn_.文 本框 .inp_.下拉框 .sel_.文本区域 .tex_.数据图 片 .pic_.小图标 .ico_.背景图片 .bg_. 注：书写样式并不一定遵循本约定。 2、id 命名规范id 命名采用英文单词、组合命名，字母应全部小写，多个单词应采用下划线分割。例如：#title(标题 )，#comment_user(评论人)等，杜 绝使用拼音命名样式；要求命名：直观命名：用位置的词汇来对其命名。这种方法使得类以及 id 的名称如下面所示: #top-panel，#horizontal- nav，#left-side ，#center-column，#right-col结构化命名（结构