淘宝装修市场高级模板设计指南

合集下载

店铺装修模板教程(装修模板)

店铺装修模板教程(装修模板)

店铺装修教程(装修模板)
第一步:登录淘宝,单击卖家中心,选择装修店铺,单击模块区域,单击编辑按钮,出现两个链接地址,如图:
第二步:把自己的宝贝嵌入到链接地址,操作方法:点击卖家中心,选择出售中的宝贝,单击第一个宝贝,如图:
把我圈出的最上面的地址链接全选并且复制,然后回到装修页面,在第一步的链接地址处进行粘贴;单击卖家中心,选择图片空间,找到第一个宝贝对应的图片,然后单击链接两个字,如图:
第三步:再次回到装修页面,在图片地址处进行粘贴,将宽度调整为210即可(有的不需要调整),。

其余的宝贝操作方法都一样。

多多领悟,实践!
2013.7.3
紫凌。

淘宝店铺装修设计技巧指南

淘宝店铺装修设计技巧指南

淘宝店铺装修设计技巧指南淘宝店铺的装修设计是吸引顾客和提升销售的重要一环。

一个精心设计的店铺页面可以增加用户购买的欲望,并提供良好的购物体验。

本文将为您介绍一些淘宝店铺装修设计的技巧,帮助您打造一个吸引人的店铺页面。

1. 首页设计:在淘宝店铺的首页设计上,突出店铺的特色和品牌形象是至关重要的。

您可以采用独特的店铺标志、配色方案和字体设计来展现您的品牌个性。

同时,首页上的横幅广告、产品分类和热销商品推荐也是吸引用户的重要元素。

2. 商品展示:在店铺的商品展示上,图片的质量和美观度是关键。

确保您的商品图片清晰、高清,并以多个角度展示产品。

同时,注意控制图片的大小和加载速度,避免用户长时间等待。

还可以通过添加水印来保护您的图片版权。

3. 分类和筛选:为了帮助用户快速找到所需商品,淘宝店铺需要提供明确的分类和筛选选项。

您可以根据不同的商品属性和特点将商品进行合理的分类,并在页面上设计简洁明了的筛选器。

此外,提供一些常见品牌、价格和用户评价等筛选选项也能提高用户购物满意度。

4. 商品描述:在商品描述中,您需要详细介绍商品的特点、规格、用途等信息。

使用简洁明了的语言,避免使用过多的专业术语和夸张的宣传词句。

同时,添加一些用户评价和晒单图片也能增加商品的可信度和吸引力。

5. 物流和售后服务:良好的物流和售后服务是提高店铺信誉和用户满意度的关键。

在店铺页面中,展示您提供的物流方式、包装细节和售后服务政策。

如有必要,可以通过减免运费、提供假一赔十等优惠承诺来吸引用户购买。

6. 公司简介和联系方式:在店铺页面的底部,您可以添加一个简洁明了的公司简介,并提供联系方式,包括客服电话、微信、QQ等。

这有助于增加用户对您店铺的信任感,并提供更好的沟通和服务渠道。

7. 页面布局和风格:店铺页面的布局和风格要符合整体的品牌形象,避免过于花哨和杂乱。

简洁、干净的设计风格更能吸引用户的注意力。

同时,确保页面的排版整齐、文字清晰可读,并合理利用空白和分隔线来提高页面的可读性和美观度。

教你装修高大上的淘宝店

教你装修高大上的淘宝店

教你装修高大上的淘宝店作者:来源:《农家参谋》2018年第10期人靠衣妆,马靠鞍,漂亮有个性的店铺也会给顾客留下好的印象。

淘宝店铺应该如何装修,才能赢得更多回头率!装修就是门面,一个好的装修能让客户觉得赏心悦目,也可以更直观地感受到店铺的品牌文化、形象和风格,心情愉快,自然更愿意购买。

淘宝店铺装修,应该注意以下几点:1.色彩的搭配要符合整个店铺主题,不要盲目乱搭配,要符合顾客的感知;2.在店招处要凸显店铺名字、形象、特点,体现出店铺的品牌文化及形象,便于顾客记忆;3.学会用图文来展示说明,不要有过多的文字。

宝贝详情页应按顺序排列信息:产品展示、整体图片、细节图片,以图文的形式来展现产品信息及注意点、产品包装、售后服务,排版整洁,过于凌乱会让买家眼花缭乱,无心再看。

下面具体来看看如何装修出高大上的店铺:店招:设置“店招”应突出该店铺的品牌理念及定位。

在设置时,可以在当中放置收藏标志和店铺优惠券,做品牌宣传,这是方便买家的做法,也有利于店铺潜在转化。

建议风格简约一点,店招的主要作用是说明、形象展示,推荐过多产品和添加过多文字,会让人感到烦琐和不美观。

导航栏:有些店铺的导航栏只设置了所有分类和首页,由于过于简单导致买家找不到想要的宝贝而离开。

建议多设几个,如:店铺活动、新品发布、秒杀专区、搭配专题、品牌故事等,让买家看到想要的,有想点击进去看宝贝的冲动。

宝贝分类:详细的宝贝分类能让买家方便快捷地找到自己想要的商品,给顾客提供引导、选择的索引,分类不要太花哨,美观大方、清晰就行。

分类设置可以有多种,让客户选择全面一些,比如:按上下架宝贝的时间分、按价格分、按种类分、按材料分、按包装分、按季节分等。

海报:该区域是重点区域,需要充分利用。

因为顾客进店后首先看到的就是该区,曝光率最高,渲染作用最为明显。

建议此区域放置3-5个大图,大图要生动漂亮,代表店铺的形象和风格,内容可以推荐近期店内的主推活动、产品,还可放置能体现品牌文化,风格的海报图,更能吸引买家。

淘宝页面装修教程

淘宝页面装修教程

淘宝页面装修教程淘宝页面装修教程不要标题为了使淘宝页面更具个性化和吸引力,您可以使用以下装修技巧。

1. 使用图片和商品展示:在页面中添加高质量的产品图片,并确保它们清晰可见。

您还可以展示产品的不同颜色和规格。

2. 制作个性化的广告横幅:使用Photoshop或其他图像编辑软件设计一个独特的广告横幅,用于突出您的品牌和特色产品。

3. 设计独特的商品分类:为了方便顾客查找所需的产品,您可以设计独特的商品分类。

使用图标和文字组合来突出不同的分类。

4. 添加店铺动态:对于有活动和促销的店铺,您可以通过添加店铺动态来吸引顾客的注意。

例如,在首页上展示最新的促销活动或限时折扣。

5. 突出店铺特色:如果您的店铺有某些特色产品或独特的卖点,确保在页面中突出展示。

使用图标或特殊的字体来增加突出效果。

6. 设计友好的购物车页面:确保购物车页面简洁明了,让顾客可以清楚地看到他们选择的商品和总金额。

添加清晰的结算按钮,方便顾客进行下一步操作。

7. 页面配色和背景:选择适合您店铺风格的配色方案,并确保背景不会干扰顾客浏览商品。

避免使用过于花哨或闪耀的背景。

8. 使用大字体和清晰的字形:确保页面上的文字清晰易读,使用大字体突出重要信息。

选择易于阅读的字形,例如Arial或微软雅黑。

9. 良好的页面布局:确保页面布局整齐有序,不会让顾客感到混乱。

将不同区块分开,并留出足够的空白空间,让顾客能够轻松浏览页面。

10. 提供详细的商品描述和规格:在商品详情页提供清晰详细的描述和规格,帮助顾客更好地了解商品。

确保描述内容准确、简洁并且易于理解。

希望以上信息对您有所帮助,祝您成功装修您的淘宝页面!。

淘宝店铺装修教程(装修全程)-精选.

淘宝店铺装修教程(装修全程)-精选.

店铺装修模板使用教程第一步打开我的淘宝在左手边找到店铺管理点击店铺装修如图点击店铺装修后出现如下页面:如果出现提示需要升级的请按以下步骤升级,如果已经升级了的请直接跳到第二步如何安装店招以下是升级步骤:第二步如何安装店招在下图中鼠标移到店铺招牌那会在右手边出现编辑两个字点击编辑。

点击浏览找到你保存的店铺装修文件点击以店招为名称的图片保存(店招就上传好了)第三步:如何上传促销区代码:在店招的下面右手边我们看到自定义内容区,如下图:注:把名称为促销区代码的文档中所有内容全部复制过来,在空白处粘贴。

效果图:这时候可看到装修模板。

可以在里面编辑了。

在店铺公告下面”在这里输入文字”的地方双击鼠标,出现如上图红色圈起来的框框,此时可以更改公告文字内容。

下面介绍如何更换产品图片和给产品图片添加链接。

在上图中注意看箭头的指向:1.点击箭头产品图片,右键剪切。

2.点击箭头指向的图标出现箭头指向的图框3.在箭头指向的图框中可以看到图片地址与链接地址4.把您要添加的图片的对应地址复制过来粘贴在图片地址中5.把您图片想链接到的页面网址复制过来粘贴在链接地址中6.最后保存第四步添加宝贝分类图片在店铺装修的页面中在左手边我们会看到宝贝分类如左图;当鼠标移动到左图时,在左图的宝贝分类这个几个字旁会出现编辑两个字,点击编辑点击编辑后出现下图:在上图中对应的分类粘贴上对应的分类地址,最后保存就完成了。

第五步点击发布,此时买家可以看到已装修过的店铺。

注意如何获得图片地址:先把图片传到图片空间就可在图片空间找到相对应的图片地址。

(注:所有的操作,都要选择保存并要发布,才能生效使用。

)说明:教程里所有的图片及代码,都可以在官方赠送的资料里查到。

最新文件仅供参考已改成word文本。

方便更改。

淘宝店铺模版装修教程

淘宝店铺模版装修教程
淘宝店铺模版装修教程
今天我要和大家分享一下淘宝店铺模版的装修教程,希望能对想要提升店铺形象和销量的卖家们有所帮助。
一、搜寻合适的模版
首先,我们需要在淘宝店铺的后台找到“店铺装修”选项,然后点击“选择模版”进行浏览。在模版库中,我们可以根据自己店铺的风格和定位,选择合适的模版进行预览和对比,最终确定一款最适合自己店铺的模版。
四、商品展示及详情页
在装修模版时,我们还需要关注商品的展示和详情页的设置。要确保商品图片清晰、完整,描述准确,让顾客看到商品时能一目了然,同时在详情页中填写好商品的参数、售后服务等信息,提供更全面的购物参考。
五、导航栏和客服功能
一个清晰明了的导航栏可以让顾客更快地找到自己想要的商品和信息,所以在装修模版时,我们要合理设置店铺的导航栏,将店铺的主要分类和推荐活动等内容展示清晰。另外,客服功能也是至关重要的,及时的在客服可以提高顾客的购买体验和信任感,因此我们要在店铺中添加好客服功能并保持在线。
二、模版布局及色彩搭配
选定模版后,我们需要对模版进行布局和色彩搭配的调整。可以根据自己的需求和产品特点,对首页的轮播图、推荐位、商品分类等进行合理排布和设置,同时注意色彩的搭配要符合店铺整体的风格,让顾客在进入店铺时就能感受到店铺的特色。
三、上传店铺Logo和宣传语
一个好的店铺logo和宣传语可以提升店铺的专业度和品牌形象。在装修店铺时,我们要及时上传自己店铺的logo,并设计一个简洁明了的宣传语,让顾客一眼就能了解店铺的卖点和特色。
六、店铺背景及装饰
最后,店铺的背景及装饰也是不能忽视的。可以根据店铺的主题和风格,选用合适的背景图案或颜色进行装饰,让整个店铺看起来更有质感和专业度。
七、页面预览及调整
完成以上步骤后,我们要进行页面的预览,在预览中检查各个模块的展示效果,确保页面的整体美观和功能完善。如有不符合要求的地方,需要及时调整和优化。

淘宝店铺装修设计的实战技巧

淘宝店铺装修设计的实战技巧

淘宝店铺装修设计的实战技巧随着互联网的不断发展,电商行业已经成为了当今最为繁荣的行业之一。

而在电商行业中,淘宝作为其中的佼佼者,普及率和用户数量也是其他同类平台难以比拟。

所以,在如此激烈的电商市场竞争中,如何让自己的淘宝店铺能够脱颖而出,留住客户?其中最为重要的,莫过于淘宝店铺的装修设计。

一、首页设计淘宝店铺的首页,就像一个门面一样,它的布局和风格能够直接决定客户留下还是离开。

比如说,如果你的店铺是以女性为主要消费群体,那就要在首页上展示一些时尚的产品或者明星穿搭,反之则展示男性化一点的风格。

另外,店铺的logo,主题颜色,以及轮播图的排布也是需要考虑的重点。

而轮播图的设计中,图片一定要高清大气,设计合理,比如可以放一些活动的广告牌或者促销的资讯。

二、宝贝详情设计宝贝详情页是淘宝店铺中最重要的部分,因为它是直接影响客户购买意愿的关键环节。

在宝贝详情页设计上,要遵循一个原则-简洁明了。

用户如果对你的产品感兴趣,他们会关注标题,简介,参数和价格等关键信息,不会愿意看到太多废话和花巧语言。

同时,宝贝详情页上的图片也非常重要,图片的色彩要和宝贝的主题相符,并且要尽可能展示出宝贝的细节。

另外,重点推荐部分的排布和样式也是要注意的重点。

三、店铺风格设计店铺风格设计是表现淘宝店铺个性化的重要部分,能够让客户对店铺产生一种深刻的印象。

但是,过于花哨的设计也会招致客户的反感,所以要注意把握平衡。

店铺风格可以从logo的设计入手,结合店铺的主题,再考虑搭配色彩等设计元素。

并且,在设计时还要考虑易于用户使用和浏览,布局合理,功能齐全,并且不卡顿等因素。

四、店铺推广设计店铺推广设计是淘宝店铺中反映宣传效果的部分,能够起到直接促进销售的作用。

在设计时,主要分为宝贝推广和店铺推广两个方面。

宝贝推广主要是为了让客户更加容易地找到你的店铺,并且让访客产生购买的欲望;店铺推广则是为了提高店铺的知名度和竞争力,比如可以设计一些海报、banner广告和视频推广等方式来提高店铺的粉丝量和曝光率。

店铺装修范本使用培训教程

店铺装修范本使用培训教程

手边有个编辑点击编辑。

出现下图:店铺装修模板使用教程第一步打开我的淘宝,在左手边,找到店铺治理,点击店铺装修如图点击店铺装修后出现如下页面:第二步将鼠标移动到店招的模块上,在上图中看到店铺招牌右信用评怖I诚般销商I换用教程I乍首貝点击扫瞄找到你保存的店铺装修文件◎新红色 画诚苑代理0促销E 代码 店死D|^分黄图片模板,自己更改自己的喜好。

选择自己喜爱的店招模板。

第三步: 下面是图和上传促销区代码 在店招的下面右手边我们看到自定义内容区,如下图:n^EOK 件富方授权K«全国黑代理S 捋全降&恚国电偿手机话瓯QQ 业务岛如 卡77恃以芾回蠡jfl 测斑IS 曄假如没有自定义内容区,能够手动添加,在右侧模块的最下方 有个“在此添加新模块”,如下图:丈档 点击以店招为名称的图片 保存 (店招就上传好了)或者你也能够点触[能够选择淘宝提供的多元化店招iTrffl专厳L W[____I点击编辑出现下图:注意此处 点击红箭头指向的图标后 其它图标差不多上灰色的 如下图:.□昱示标题注:才眾*质融「叨不昱示iS 题牲% 1訓<■ J'lj ■ E^!i(pQn-ii;f<±HiL i tf d ai - - arc-' http t / /vw .Moitu .'csiii/taDD ao / U . y LJ / L L_r ?_c 6. spc'ffJdLlj=27 L LUL J KL ^O licLB^-L C_c7_u C?<./TU? <TD tcwSf ati-2><IHC IS3 卷匕stc-^'http t //imt .asaifu .ffsu/rasb io/D. 5P/L C_t i_c £.非护 wiatri=ibj bOEaet=o naaie=[iC_c b_c i.K rTI?><TT)X111G beight-S? s = □ - *ht;tp : . e a ti £u . coaL/tfiobaOj^O.E c . gz. £ * 可•idth -lbor cer=nx /Tt>x/TR><TEt>WTD tiCC01OL=#£ECE£CxPTQHT S"亡=4>tITRCilIG?■呂春枣詩ift 券慕冬主 trOITT CO101 = #r £DOCOC^S^r 和 30[)元vEAvMorrY/Emigxv/■巧HT>玄持7X24d 旳丟藪自动进诗充值,盘妥3V 占吿店vmw 专出壬才皿运程j&导-手出丰敎 瑟英冃和克I <EK 对彌t 査疵閨职充谆廣升额臊昴GTTJ?<TD>V 3G lidyht-^S alt-" DCC -"h^tp jZ /imr ,c3clfu.coi/tooboo/0,33/jp Q ?CC , Edth-l nor ser-nx /rnx /TR > <TK><IB rnlSr^m-a^TMir : kl»rjnl -»A 讥七・・": //L ™. fi|. rvi[ft/r^nbnr>/r|. vidtlL-75C boEdc£->0 iiaiM - LC_E !3_e I> < jTTJITDWHG hMght :«fl 叽上・"'「scp»''htTpr //nrra.Raftifu.crnyt^hflri/O.'^g/RpRc-Cx ^ifuidth-i bet 3-论/TD 》■:/TO> ■: /TPED V> t FTIP:■E 〉..XI"在出现如上图的页面中先点击上图中箭头指向的图标Ai■ ■这时候把名称为促销区代码的文档中所有内容全部复制过来,空白处粘贴。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

淘宝网装修市场高级模板设计指南1目录1、本地开发环境 (3)1.1 什么是SDK (3)1.2 下载SDK (3)1.3 安装SDK (4)1.4 SDK的目录结构 (7)1.5 启动SDK (8)2、使用SDK后台 (10)2.1 创建模板 (10)2.2 预览模板 (17)2.3 配置SDK本地属性 (18)3、模板的标准结构 (18)4、设计模块 (18)4.1 创建相关文件资源 (18)4.2 编写模块代码 (19)4.2.1 引入标识 (19)4.2.2 使用KISSY效果 (19)4.2.3 使用模块参数 (19)4.2.4 调用数据接口 (20)4.3 配置模块信息 (20)5、设计页面 (22)5.1 结构化页面 (22)5.2 设计页面 (24)5.2.1 引入单个模块 (24)5.2.2 划分页面片区 (25)5.2.3 配置页面信息 (26)6、特殊页面要求 (27)6.1 宝贝详情页面 (27)6.2 宝贝列表,文章列表页面 (27)6.3 不可装修的页面 (27)7、调试模板装修效果 (28)8、关于白名单过滤 (28)9、PHP函数 (28)10、发布模板到装修系统 (28)21、本地开发环境1.1什么是SDKSDK是淘宝提供给设计师在本地设计模板的软件开发包,SDK模拟了淘宝店铺环境。

SDK主要包括三个部分:Server,PHP引擎和模拟数据。

Server是指SDK会在本机上启动一个Server,这样我们可以通过浏览器浏览设计的作品。

PHP引擎是指设计师只能使用PHP作为模板设计的语言。

模拟数据是指SDK包括了淘宝各个典型的店铺,这样设计师在设计模板时不用考虑实际的数据库。

目前,提供Windows操作系统和Mac操作系统的SDK工具。

1.2下载SDK装修市场后台下载安装包,安装至本地,创建SDK web控制台。

您将使用淘宝ShopSDK 来开发和上传设计模板。

在开始设计之前,需在本地部署SDK环境。

设计师登录装修市场后,点击“设计师后台”导航按钮进入。

(加入设计师注册流程帐号。

)进入设计师后台界面:34点击“高级版”进入SDK 模板设计界面,1.3 安装SDK下面给大家具体介绍Windows 版本的安装。

假设您已经下载好了Windows 版本的安装文件,马上双击安装可执行文件,比如当前版本:进入SDK 欢迎界面,然后在许可证协议里选择“我接受”5进入安装选项界面,选定安装的组件,点击“下一步”进入安装文件夹界面,选择意向的安装目录,点击“安装进入安装进度界面,点击“关闭”,即完成SDK的安装。

67安装完成后将会在桌面生成“启动设计师SDK ”的图标。

1.4 SDK 的目录结构首先以设计师身份从淘宝店铺装修市场下载SDK 安装包(Windows 版或者Mac 版),然后将安装包解压到任何一个本地磁盘目录:解压后的目录结构如下图所示:各个目录的作用如下: • bin 目录:bin 目录主要放置启动和关闭SDK Server 的脚本命令• conf 目录:conf目录主要存放SDK的配置文件以及SDK web 控制台的war 应用•db目录:db目录主要存放SDK本体模拟数据文件,设计师设计的模板在本地渲染的时候,数据就是从此目录的文件中读取的。

•htdocs目录:htdocs目录存放设计师设计的模板文件,这个目录下可以存放多套模板文件•jre目录jre是SDK运行的Java环境。

SDK Windows版本会绑定JRE,而Mac版则没有这一目录。

Mac已经提供了默认的Java运行环境•lib 目录lib目录主要存放SDK运行所需要的jar包•logs目录logs目录主要存放SDK运行的日志文件•temp目录temp 目录中存放已经制作好的的SDK模板的zip包,设计师制作模板之后,通过SDK后台打包生成的zip文件就放在该目录下。

•ReadmeReadme文档介绍启动SDK的方法了解了目录结构以后,接下来介绍如何启动SDK。

1.5 启动SDK如果你的操作系统是Windows的话,双击桌面上的“启动设计师SDK”图标,系统将自动运行后台文件“启动设计师”并在浏览器中打开SDK后台。

以下是后台启动界面,设计师不用关心细节。

同时,为了保持运行状态,请不要关闭它。

8启动中的浏览器界面:启动后的界面:9如果你使用的是Mac版本,这需要打开terminal,然后进入SDK的bin子目录,执行sh startServer.sh即可。

如果需要关闭SDK,只需要在启动窗口中按下Ctrl+C即可关闭SDK(Mac同样)。

SDK不要放在桌面或含有中文名称以及空格的目录下。

SDK Windows版本会绑定Java运行环境,直接启动即可。

SDK Mac或Linux版本不会绑定Java运行环境,Mac会使用系统自动的Java运行环境,而Linux则需要你手动设置JAVA_HOME路径。

OK,到此为止你已经打造好了你本地的SDK环境,让我们一起开始我们的模板设计之旅吧。

2、使用SDK后台SDK中提供了一个管理后台,在启动SDK之后默认会进去SDK的管理后台,通过SDK 的管理后台,我们可以通过后台管理界面进行多方位本地管理。

2.1 创建模板进入Web控制台首页,点击“设计新模版”按钮,10进入模板创建界面如下图所示:按照提示填写模板信息,如下图:1112点击“下一步”按钮,进入模板成功创建的界面:模板目录为“helloworld ”创建成功后,看看发生了什么变化。

点击“3,返回控制台”的链接:13名称为“模板初体验”的模板(模板目录名称为“helloworld ”),在首页显示了。

然后,点击“模板初体验”的模板,进入模板详情页面,如下图:在模板信息中,版本号是1.0.0(前面填写过),语言为PHP (暂时仅支持PHP 语言)。

图片的下方是缩略图,分别有:首页、文章列表页、文章页面、搜索列表页、促销页面和宝贝详情页。

下面的目录介绍中会说明他们。

在“1.4 目录结构”章节中,介绍过htdocs目录存放设计师设计的模板文件,这个目录下可以存放多套模板文件。

浏览下该目录下面发生的变化,目录名称为helloworld的模板,SDK在htdocs目录下建立一个helloworld目录。

后面的章节会具体介绍这些文件和目录。

index.php:首页articleList.php:文章列表页article.php:文章页面searchList.php:搜索列表页onsale.php:促销页面detail.php:宝贝详情页header.php:头部footer.php:尾部site.xml:模板描述符文件。

配置和管理模板和模块。

TODO:后面的章节会详细提到。

assets目录:同时包括images和stylesheets两个子目录,静态资源引用需要以相对路径为准。

例如:images目录:存放图片等静态文件。

stylesheets目录:存放页面的渲染CSS文件,默认存放着名为global.css的全局样式文件。

modules目录:管理和配置模块。

在上面提到的几个缩略图的图片也在该目录里面有对应的文件,默认的目录结构在X:\DC_SDK\htdocs\helloworld\assets\images\,X代表安装的盘符,默认值是D盘。

1415替换这些图片(默认的大小150x150 像素),利用缩略图更好地来展示(预览)页面模块。

地址:http://localhost:8080/_ah/template/templateDetail.do?dirName=helloworld ,刷新模板详情页面:在了解创建模板的情况后,下面预览一下“模板初体验”的模板。

16172.2 预览模板点击菜单中的“我的模板”导航链接,进入“我的模板”界面:然后,点击“预览”按钮,马上浏览:看到了经典的淘宝店铺页面,除了头和尾部分,其他部分几乎没有内容。

这是因为没有编辑模板页面。

对于设计师来说,你要做的工作就是填充淘宝的头尾之间东信息。

或许这会儿你已经迫不及待希望看到一个模板到底能做到什么程度,SDK 本本省就提供了一个示例模板,你可以直接看到一个成熟的模板是什么样式,在浏览器中地址栏中输入http://localhost:8080/template1/index.htm ,你就可以看到默认自带的模板:模板页面预览的效果2.3 配置SDK本地属性在SDK中,我们提供了多套数据模拟数据,在SDK后台界面上,点击系统设置,就会列出多套默认的数据,设计师通过选择对应行业的数据便亦可以使用相应行业的模拟数据来调试模板。

3、模板的标准结构4、设计模块模块化的页面通常是由一个个模块做组成的,所以在介绍编写页面之前,我们先了解模块是如何设计的。

4.1 创建相关文件资源模板中的模块都是集中在模板标准目录的modules目录中。

模块的创建及管理可在SDK 控制台的模板详情页进行。

18具体的模块创建及管理功能,请参见Wiki模块编写规范:/index.php/%E6%A8%A1%E5%9D%97%E7%BC%96%E5%86%99%E8%A7%84%E8%8C%83下来需要做的就是在php文件中编写具体的模块代码,配置模块信息,模块的参数。

4.2 编写模块代码4.2.1 引入标识模块代码要能够被JS识别为模块,以便进行装修操作,设计师需要引入在模块的html代码中引入模板规范约定的标识符J_TBOX, 以及输出用以在装修中操作模块编辑删除,移动的Toolbar,<?php echo $_MODULE_TOOLBAR ?>,具体代码示例如下:<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR ?>>//模块内部代码</div>4.2.2 使用KISSY效果虽然说设计师不能够直接书写JS,但是淘宝KISSY框架提供了一些通用的特效接口,通过在html中配置使用,比如跑马灯效果。

要使用KISSY特效接口,首先要在模块内部某个节点上加上class J_TWidget,然后进行一系列参数配置,要使用图片轮播效果,可以有以下配置:<div class="carousel J_TWidget" data-widget-type="Carousel"data-widget-config="{'effect':'scrollx','easing':'easeOutStrong','prevBtnCls':'prev','nextBtnCls':'next', 'contentCls': 'carousel-main', 'navCls': 'carousel-nav','activeTriggerCls': 'selected','lazyDataType':'img-src'}">具体的KISSY使用说明和示例效果请见:/index.php/Widget%E8%A7%84%E8%8C%834.2.3 使用模块参数模块通常代表了一个独立的功能,但是一个功能被不同的卖家使用起来,通常卖家有一些特定的要求,比如,模块中显示的图片,不如显示的宝贝的大小,等等一系列的扩展要求,该如何满足,不可能让所有的卖家都是用完全一模一样的功能。

相关文档
最新文档