拍拍网sdk
篇一:SDK模板装修之前必看
SDK模板装修之前注意事项:
1. 装修时,请不要用360浏览器、搜狗等国内浏览器装修,否则会有可能丢失
导航或者某个模块。此原因出在360等浏览器跟SDK平台不太兼容造成的。而SDK平台是淘宝开发的,淘宝网站是基于IE内核开发的。
2. 推荐亲们在装修之前,先下载淘宝官方网站的IE8浏览器,下载地址是:
注意:如果是WIN7系统的亲们,不用下载。WIN7自带IE8浏览器。直接打开就可以。
XP系统的亲们,记得要下载XP系统版本的。如下图所示:选择左边 WIN XP版
3. 安装之后就可以打开店铺装修,开始装修。装修过程中务必经常备份一下。
防止中途操作失误或者淘宝系统升级,造成店铺装修异常。那么还可以用备份的装修恢复。
4. 关于SDK模板升级问题,请亲们一定要在升级之前
1
先备份旧装修。否
则升
级之后就没有了,需要重新装修。为什么会重新装修,那是因为SDK平台的原因,只要是SDK模板升级,所有数据都要重整。这一点所有SDK模板是这样的哈。不相信的亲们,可以多问其它几家卖SDK的设计师或者装修市场的技术小二。
5. 模板装修过程中,遇到不懂的问题或者是模块出问题,请亲们第一时间联系
我们,直接给我们留言。我们会全力解决亲们的问题。在此请亲们配合一下我们,不要随意给差评,将心比心,大家都是卖家,做淘宝不容易,您的客户随意给差评您,相信您肯定不好受。而且这会伤害到大家的感情。万事好商量,我们同样非常重视亲们的问题。不会丢下不理。
6. 另外有时亲们发信息的时间是我们下班的时候,所以造成误会。在这里说一
下我们的工作时间:
工作在线时间
上午9:00—12:00
中午 13:00 , 17:30
晚上20:30,23:00
客服不在线的时候请掌柜们留言哦~
2
周六周日同样在线,除了节日外哦。双休日在线的设计店铺,是很少见的。这一点说明我们重视售后,重视亲们的问题。
篇二:sdk简易模版开发心得
简易模版开发
简易模版的开发说起来也比较简单,需要做的是熟悉火狐的使用方法及div+css的使用,难的是做好每一个布局的优化。
1. 建立模版
模版类型:建立你想设计的模版,我们现在讲简易模版所以选择简易模版。 目录名称:是在模版目录下创建的,创建模版的名称。都在目录htdocs文件夹下。 模版名称:我自己的理解是用于关键字的搜索的,如:商城女装|三色样式|通用模版。 模版版本:起始为1.0.0,当你上架后需要修改某个模块或者添加某个模块可以下架后升级。
模版缩略图:保存在assets/images文件夹下的图片,用于让用户区分模版外观的。这里的384*600是比例并不是像素,用户只需要按这个比例来进行缩略图的制作,当然你按这个比例制作缩略图也是可以的。
调用数据类型:这里可以理解为你的模版要使用于那个行业。 模版备注:用于说明模版的功能和作用。
2. 建立模块
3
建立模版以后跳转进入此界面,
1. 创建布局:可创建通栏的(950代码:grid_m0)两栏的(750代码:
grid_s5m0 .col_main;190代码:gird_s5m0 .col_sub)三栏的一般很少用这里不做讲解了。
根据你所需要的创建好每个模块,这里要说明的是宝贝推荐如果要做的每个布局都适用就需要把各个布局写好优化好。具体的后面的代码阶段会讲解。
2. 开发模块:
2.1(皮肤的设置:皮肤可使用纯色或单一的图片元素进行平铺完成,步骤:在我的模块里面选择管理风格——》default编辑——
》
背景颜色中填入颜色值;图片,先将图片保存至: TAE_SDK\htdocs\test\assets\images目录下。
背景图片:较小的图片作为皮肤背景会选择垂直平铺,具体效果结合前面皮肤背景。 对齐方式:调整图片在页面的位置,一般选择为中上。
坐标调整:坐标调整一般为微调。
2.2(设置页头背景(也就是banner背景)
其设置方法和设置皮肤背景是一样的。这里要说明的是:banner背景高度是150px的宽度可以设置为全屏宽度,一般
4
为1500px。
2.3. 设置banner店招:说明:我是以刘雯做的蝴蝶模块
为范本。
.tshop-pbsm-shop-custom-banner .skin-box-bd .banner-box{ background-image:url(assets/images/dz.gif);}
代码解析:刚建立的店招模块,系统会设置默认的店招图
片,如图
店招尺寸是可以调整的:系统默认为950*118px。加上下
面的导航模块(32px)一起是150px。
首先覆盖系统图片,可用代码:
background-image:url(assets/images/dz.gif),括号里面的地
址是图片所在位置;效果如图:
其中的文字设置可使用代码:
.grid-m0 .tshop-pbsm-shop-custom-banner .skin-box-bd .title,
.grid-m .tshop-pbsm-shop-custom-banner .skin-box-bd .title,
.tshop-pbsm-shop-custom-banner .skin-box-bd .title
这里的代码是重复的做的优化,以上三句都是代表一个意
思那就是店招的标题,这里写三句是让这句代码在各个浏览
器中都能使用。
.grid-m0 .tshop-pbsm-shop-custom-banner .skin-box-bd .t
5
itle, .grid-m .tshop-pbsm-shop-custom-banner .skin-box-bd .
title, .tshop-pbsm-shop-custom-banner .skin-box-bd .title{ba
ckground:none; margin-left:270px; font-size:35px;
color:#512c02; font-family:黑体;}
括号里面的是设置店招标题的属性:如果不需要店招标题
带背景颜色或者图片可以设置:background的属性为
none(即为空);
margin是外边距属性与其对应的padding是内边距属性,
两者都是设置元素所在的位置 Font是字体属性可以设置其
大小(size),字体样式(family);
color是设置颜色的(这里是设置字体的颜色)。效果如图
:
说明:如果想要标题居中显示可以使用text-align:center;不过你的标题宽度就需要声明为950px的,width:950px。
导航模块:(.tshop-pbsm-shop-nav-ch),因为导航系统
默认为通栏950的所以不用声
明布局。
.tshop-pbsm-shop-nav-ch{height:32px;}
代码解析:这里的.tshop-pbsm-shop-nav-ch是导航全局的
div设置因为导航和店招一起是150px的;店招需要留一点
高度(height)给导航一般是32-35个像素具体的需用户自
己调配。
6
.tshop-pbsm-shop-nav-ch .all-cats .link{display:none;}
代码解析:这句代码是设置全局下拉菜单div的属性,
display是控制该div的显示其中none表示无或者不显示。
Link是其中的链接元素。
.tshop-pbsm-shop-nav-ch .menu-list .link{background-col
or:#512c05; background-image:none; color:#FFFFFF;
border:#512c05; height:32px;}
代码解析:这里的link是代表带超链接的元素,如首页。
这句代码的意思控制导航中所有带链接的元素。border属性
是设置元素边框的。
.tshop-pbsm-shop-nav-ch .menu-list a:hover{ color:#512c05; font-size:18px;} 代码解析:
a:hover(a是代表div里面的a标签也就是带链接的元素,
hover是一个鼠标经过事件)这句代码的作用是设置元素鼠
标经过所发生的属性更改。简单来说就是一个元素初始一个
属性,设置hover后鼠标经过改变成另外一种属性。
搜索模块:
搜索模块需要做模块布局优化,所以我们最好是写三个布
局的。
首先通用布局:也就是不声明是哪个布局的全部通用的那
个布局,代码:.tshop-pbsm-shop-srch-inshop。
950布局:代码:.grid-m0
7
750布局:代码:.grid-s5m0 . col-main .
190布局:代码:.grid-s5m0 . col-sub .
其中的属性更改都是大同小异的,就不多做解析了。
说明:其中的skin-box-hd代表头部,skin-box-bd代表
主体也就是标题下面的内容区。 如果定义头部的属性代码
需这样写:
950的.grid-m0 . tshop-pbsm-shop-srch-inshop . skin-box-hd
750的.grid-s5m0 . col-main .
tshop-pbsm-shop-srch-inshop . skin-box-hd 190的.grid-s5m0 . col-sub . tshop-pbsm-shop-srch-inshop . skin-box-hd 如果定义主体的属性代码需这样写:
950的.grid-m0 . tshop-pbsm-shop-srch-inshop . skin-box-hd
750的.grid-s5m0 . col-main .
tshop-pbsm-shop-srch-inshop . skin-box-hd 190的.grid-s5m0 . col-sub . tshop-pbsm-shop-srch-inshop . skin-box-hd
其中,h3一般用作标题 span用于定义这个标题区域 btn
代表按钮 price,key代表价格名称price .connect-line 代表
价格框之间那条线price input 代表价格框keyword .prompt
代表搜索主框hot-keys a: hot-keys代表热门关键字a代表a
8
标签(超链接标签)。
font-weight是可以设置字体的粗细的。
以上的都可以使用火狐查找出来。不过有时候会出现不一样的效果。需要你耐心查找问题,在这里文档不是很好写出来。
宝贝推荐模块
宝贝推荐模块需要做模块布局优化,所以我们最好是写三个布局的。
篇三:SDK模板-模板编写
模板编写规范
总体说明
对于一个设计师的页面来说,在淘宝上呈现的页面结构如下:
基于这样的页面结构:
1. 淘宝要提供一个页面的框架,也就是页面的Layout,设计师设计的页面是Layout中的一部分,如在下面的位置:
<div id=content</div
2. 模板必需提供全局的CSS,Header和Footer,在任何一个设计的页面都会包含这三者。
3. CSS,Header和Footer还会被淘宝其他页面所使用,如评级、店铺留言等。
4. 页面包含模块,一部分模块是支持交互的,也就是卖家
9
可以录入一些参数来改变模块的呈现
基于这个考虑,模板需要一个全局的配置文件,也就是site.xml,该文件包含了模块的详细信息,由于页面还可能涉及到模块,所以我们还要对各个模块进行定义,模块同时也是代码复用的基本
,模块的配置文件为module.xml。
模板目录结构
模板目录结构是指模板各个资源目录划分,如下图:
目前主要分为已下
类:
? 静态资源:都存放在assets目录,同时包括images和stylesheets两个子目录,静态资源引用需要以相对路径为准。
? 模板文件:也就是模板文件,后缀名为.php或者.vm,依据所选择的模板语言,模板文件包括全局头,全局尾和各个文件的主体。页面文件不能形成子目录。
? 模块文件:不能包含其他资源文件,如果包含其他资源文件,需要来自淘宝相册的服务,模块主要就是模块的配置文件和其模块主体文件
? 元信息文件:如xml文件,screenshot文件等,模板为site.xml,模块为module.xml
? 在SDK中,htdocs可以同时包括多个模板,以不同的目录加以区分,SDK会自动识别这些模板并进行管理,如样例中的template1是模板的名称。
? 在htdocs的根目录下有一个dcsdk_functions.php的
10
文件,所有SDK提供的函数都会在这里列出;还有一个site.xsd,这个是site.xml的xml schema文件,主要是辅助进行site.xml编辑。
参阅:查看目录结构模块化
模板描述符文件详解
模板是超级旺铺的基础,主要是模板、模板版本、配置和资源这四项,每一个模板都有一个名称为site.xml的描述文件,包含一下信息:
? 基本信息:如模板语言、名称、描述、作品截图、作者、支持的网站、服务方式等
? 模板全局信息:如全局css,全局的页面header和footer等
? 风格信息:模板所包含的风格,都要在<styles元素下进行声明
? 页面信息:一个模板包含多个页面,每一个页面的具体功能要说明清楚,如店铺的模板页面,那个是首页,那个是详情页等,都需要进行描述
? 模块信息:该模板所包含的模块以及各个模块的详细信息
? 参数信息:如果模板、页面和模块需要参数,这个参数是什么类型的,form该如何交互,这些也需要明确
<?xml version=1.0 encoding=GBK? <site
11
version=1
<!—模板标识由系统自动生成 --
<id 2cd2659796794dbab1e4115dac7facf3</id
<!—模板名称--
<name模板-1</name
<!—设计师信息--
<author wangwang=XX url=Jacky</author
<!—模板缩略图--
<thumbnailassets/images/frontpage.png</thumbnail
<!—模板语言--
<languagephp</language
<!—模板版本--
<version2010050901</version
<!—修改日志--
<change-notes
change log
</change-notes
<!—模板描述,不要超过100个字--
<description
description here
</description
12
13