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

美工与前端开发人员工作规范一、 美工设计规范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=/ ,即须在URL地址后面加上“/”； 在页面中尽量避免使用XHTML标签的样式属性,即style=。！尽量减少页面的HTTP请求: 合并压缩的多个JS到一个文件中； 合并压缩的多个CSS到一个文件中, 能写成样式背景的图片，必须写在样式中； 尽量减少DIV的嵌套层数； 统一域名下的项目页面链接使用相对路径（例如：./AR/music.php），而不是绝对路径(例如：http: //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标准标签和不赞成使用的标签，参考/： XHTML标准标签，参考/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_ 装 饰用的照片取名 pic_ 不带链接表示标题的图片取名 tit_ 小图标 ico_ 背 景图片 bg_ 依照此原则类推，名字要让旁人搞得懂。 尾部分用来表示图片的 具体含义。 样例，大家应该能够一眼看明白图片的意义： ad_sohu.gif、 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 命名采用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；。例如：.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结构化命名（结构，功能，内容）：用页面区块名称的词汇来对其命名。这种方法使得类以及id的名称如下面所示:#branding ，#main-nav ，#subnav ，#main-content ，#sidebar惯例:最常用类/id名称的示例列表: header ,content ,nav ,sidebar ,footer尽量不缩写，除非一看就明白的单词; 注意id名称以数字开头无效； 3、字体样式的命名静态文字命名格式：f_颜色数值_字号（字体状态）例如：.f_f30_12 (#ff3300颜色的12号静态文字).f_fd3360_12b (#fd3360颜色的12号粗体静态文字)链接命名格式：l_颜色名称_字号（字体状态）_链接样式或者f_颜色数值_字号（字体状态）_链接样式例如：.l_ff3300_12 (#ff3300颜色的12号无下划线链接文字).l_ff3300_12b(#ff3300颜色的12号粗体无下划线链接文字).l_ff3300_12b_u(#ff3300 颜色的12号粗体有下划线链接文字)4、 样式文件结构（样式表构成管理）o 首页一个样式（index.css）包括字体样式等；o 头部底部样式（top.css）o 内页样式内页样式根据具体的项目、页面布局设计可以考虑一个或多个内页样式，一般考虑如下：如果所有内页布局相近可考虑一个内页样式并且加上相应的注释； 如果有几个内页布局相近可考虑这几个内页一个样式并且加上相应的注释；o 详细页一个样式（detail.css）5、Css命名规则1.CSS文件命名 一律小写; 尽量用英文; 不加中杠和下划线; 尽量不缩写，除非一看就明白的单词.主要的master.css、 模块 module.css、基本共用 base.css、布局，版面 layout.css、主题 themes.css、专栏 columns.css、文字 font.css、表单 forms.css、补丁 mend.css、打 印 print.css、2.XHTML文件中class的命名 颜色:使用颜色的名称或者16进制 代码,如(不建议以表现来命名).red color: red; ；.f60 color: #f60; .ff8600 color: #ff8600; ; 字体大小,直接使用font+字体大小作为名称,如.font12px font-size: 12px; ；.font9pt font-size: 9pt; ; 对齐样式,使用对齐目标的英文名称,如.left float:left; ；.bottom float:bottom; ; 标题