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

《美工与前端开发人员工作规范》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

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

2、搜索页面主体滚动内容标签页文章列表提示信息小技巧SearchMainScrollContentTabListMessageTips下载注册状态按钮投票合作伙伴版权路径导航DownloadRegisterStatusBottonVotePartnerCopyrightShowpath栏目标题友情链接页脚加入指南服务热点新闻TitleFriendLinkFooterJoinUsGuideServiceHotNews     当然，命名不一定要照搬，可以根据具体来实施，做到规范明了即可。上面的每个组可

3、能都包含着若干图层路径，这些都要命名详细。细节决定深度，按类分组图层，既方便过程的编辑又方便以后的修改，亦可以避免冗余图层的存在。一个页面包括很多元素，要分组管理，还要规范每一个图层、路径的命名，方便查找修改，这是设计的基本要求。一般是按块级元素把图层分组并命名，每个组包含若干图层和路径，再相应命名。好比我们的文件夹下的文件夹和文件。3、图形对象约定·图片的格式：最后生成jpg、gif、png、swf格式的图形文件；·图片的字节大小：需经过处理，例如相片须用ACDSEE压缩后再导入，避免图像超过

4、500KB。4、设计人员使用photoshop或者fw设计时的规范·标注出元素的宽(width)和高（height）；·标注出字体的大小及颜色；如：12px、#f00；·标注出字体的样式；如：加粗；·标注出在页面中不是用图片内容颜色值。例如：body背景颜色值、文字颜色值、一些要实现交互状态变化的颜色值（具体要标明：link[链接]、active[点击]、hover[鼠标移上]、visited[访问后]）要分别的标注。注释：在网页中用图片表示的一般都是用code不能实现的效；·标注出内外间距。如

5、：内间距包括行距、字间距(Letter-spacing、Tracking)、内容与容器边缘的距离（填充）。外间距就是两个容器之间的距离；注释：把每个元素间距标注出来就ok。。最好：上、下、左、右的都标注下；·截出网页要用到的一些图片：不能用网页实现的；·把截取出网页各个图片最好组合成一张图片。     二、前端开发人员规范1、静态页面基本规范·静态页面命名应根据项目文档中程序页面文件命名；例如程序页面文件名为index.php或index.aspx则静态页面的文件名应为index.html或in

6、dex.shtml；·静态页面XHTML代码应采用自动缩进的形式编写，这样代码层次结构清晰；·根据项目文档选择页面编码格式，一般为UTF-8；非项目页面着统一采用UTF-8，特殊项目或有特定需求的按需求确定编码格式；·非特殊情况下必须把CSS外部链接放到页面的顶部（…标签之间）；·非特殊情况下必须把JS代码或外部链接放到页面的底部（标签之前）；·书写链接地址时，必须避免重定向，例如：href="http://www.telligem.com/",即须在UR

7、L地址后面加上“/”；·在页面中尽量避免使用XHTML标签的样式属性,即style="…"。！！！尽量减少页面的HTTP请求:·合并压缩的多个JS到一个文件中；·合并压缩的多个CSS到一个文件中,能写成样式背景的图片，必须写在样式中；·尽量减少DIV的嵌套层数；     ·统一域名下的项目页面链接使用相对路径（例如：../AR/music.php），而不是绝对路径(例如：http://www.telligem.com/AR/music.php)；·给区块代码和套程序的循环的第一条数据加上注释。2

8、、XHTML标准·每个页面必须宣告使用哪一种DTD，目前非特殊情况下我们采用XHTML1.0TransitionalDTD(一般为：；)，即DreamWeaver8和cs3版本默认的DTD；·