商家宝美工规范文档.doc_第1页
商家宝美工规范文档.doc_第2页
商家宝美工规范文档.doc_第3页
商家宝美工规范文档.doc_第4页
全文预览已结束

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

2011-3-25 商家宝组bowei商家宝模板设计制作规范一设计和制作时注意的问题文件夹层级分配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.设计不拘于现有形式,需要

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论