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

美工与前端开发人员工作规范 一、 美工设计规范 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外部链接放到页面的顶部（head… / head标签之间）； 非特殊情况下必须把JS代码或外部链接放到页面的底部（/ body标签之前）； 书写链接地址时，必须避免重定向，例如：href=/ ,即须在URL地址后面加上“/”； 在页面中尽量避免使用XHTML标签的样式属性,即style=…。 ！！！尽量减少页面的HTTP请求: 合并压缩的多个JS到一个文件中； 合并压缩的多个CSS到一个文件中, 能写成样式背景的图片，必须写在样式中； 尽量减少DIV的嵌套层数； ????? 统一域名下的项目页面链接使用相对路径（例如：../AR/music.php），而不是绝对路径(例如：http: ///AR/music.php)； 给区块代码和套程序的循环的第一条数据加上注释。 2、XHTML标准 每 个页面必须宣告使用哪一种DTD，目前非特殊情况下我们采用XHTML 1.0 Transitional DTD (一般为：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0Transitional//EN ttp:///TR/xhtml1/DTD/xhtml1-transitional.dtd；html xml