商家宝美工规范文档.doc

商家宝模板设计制作规范一设计和制作时注意的问题文件夹层级分配imagestest(把测试用的图片，例如数据图片放入文件夹内，上线前删除掉。)css 首页样式index.css 公用样式common.css 二级样式sub.css 打印样式print.css(首页和二级页样式差别不大的，建议可写在同一个样式表里。)js /js/jquery.js静态页命名：首页index.html关于我们aboutus.html相册列表photo_list.html具体相册photojt_list.html商品列表products.html具体商品product_show.html服务项目server_list.html具体服务server_show.html专业团队team_list.html团队详细team_show.html促销信息 sale_list.html促销详细sale_show.html有奖活动 prizes.html有奖具体 prize_show.html优惠券 ticket_list.html具体优惠券 ticket_show.html本站资讯 info_list.html资讯详情 info_show.html网友点评 comment_list.html联系我们 contact.html3. 样式表简写：随时注意简写，删除多余空格等，删除所有无用样式。做完后，整体替换；：符号的前后空格；颜色值简写： Color：#FF6600 Color：#F60.注释方法/* css的注释方法*/UBB页面大图解决方法例如关于我们、产品详情、资讯详情、促销信息、优惠券，应按照实际页面宽度，用js解决图片过宽问题。在页面中加上如下代码：$(document).ready(function() $(#box img).each(function(i) var maxwidth=450; if (this.widthmaxwidth) this.width = maxwidth; ); );6.注意图片大小和质量：不拘于gif格式，如想达到一些渐变效果等，应切成jpg格式，以保证效果。无损在线图片压缩/ysmush.it/一般大的jpg图可以在线压缩一下，基本可以减少三分之一的大小。 .避免版权争议：模板默认图片，尽量不要使用明星照、品牌图片等有版权争议的图片。同套风格模板同套风格模板，能更换的图片尺寸必须一致，以免商家用户更换模板时，有变形情况出现。8.QQ在线状态统一使用代码如需更改自定义图片样式请参考网址：/help.html#第九条适当的使用ID: 页面中唯一出现的box可适当的使用ID；但不是大面积使用。例如：#header #footer #logo #menu 等等；10.设置logo处无图片时的文字样式：要在css样式里设置好，没有图片的时候，纯文字时的样式；尽量给logo最大的宽度，以避免商家名称过长，不能显示完整；限制logo大小，一般使用#logo imgLogo图片要有alt=” 属性IE6对于png图片的js使用一下代码：$(function()if($.browser.version = 6.0 & $(#logo img).attr(src)!=undefined & $(#logo img).attr(src).indexOf(.png)0)var imgw=$(#logo img).width();imgh=$(#logo img).height();imgsrc=$(#logo img).attr(src);logh=$(#logo).height();$(#logo).html();$(#logo div).width(imgw);$(#logo div).height(imgh);$(#logo div).css(filter,progid:DXImageTransform.Microsoft.AlphaImageLoader(src=+imgsrc+,sizingMethod=crop);$(#logo div).css(margin-top,Math.floor(logh-imgh)/2)11. 遵照原效果图：切图制作静态页，请遵照原效果图，如确有修改需求，请提前得到设计人员认可。务必保证静态页和效果图的一致。12.13.商家宝公共区域：模板顶部全部加上商家宝属性条：14.优惠券打印：预览需去除多余版块。保证预览效果正常。15背景同类的，尽量切在一个大图里；减少http请求数二模板上线前的测试和注意事项：1.优惠券，有奖图片、商品图片、相册、及网友留言的用户头像：图片尺寸和比例是否正确；图片是否调用缩略图；要加默认图；2.buy后台基本数据和前台显示的是否对应：比如，后台的基本信息（联系电话，地址，商家名称等等）；后台的关键词、描述设置等等；3.后台上传的数据前台是否正常显示：可更换的大图、logo、商品、促销、优惠券数据(例：有奖的状态图标；优惠券的结束天数；)4.前台功能是否好用：收藏、推荐；网友点评；进后台进行商家回复；英文数字留言溢出；（样式里加word-wrap:break-word;可控制）5.字数和链接测试：在任何数据显示处，比如商家名称、地址、关于我们、商品名称、有奖名称、优惠券、促销等等，测试名称过长过短的显示是否合适。6.大小图上传：上线前，把模板首页截图，按规律命名，便于查找；模板路径：mo/s1a模板命名：儿童母婴S1A小图命名：/mo/pic/s1a.jpg大图命名：/mo/pic/s1_a.jpg附合规则的格式，上传后是否都能正常显示；比如jpg gif swf上传后，前台是否都能正常显示（注意有些模板是不支持swf格式的）浏览器兼容性测试，通常兼容ie6 7 8 火狐。切图时，尤其注意宽屏图片的切法，要保证在窄屏显示器（1024）上可用。(注：IE6横向浏览器滚动条bug,解决方法，在css中加 *htmloverflow-x:hidden; )9.尽量不要在设计时，使用不能修改的图片。比如10.设计不拘于现有形式，需要