1、SDK模板开发教程,五代十国 2012年4月20日,SDK教程大纲,2009-8-22,1、开发SDK模板的前期准备工作 2、SDK的基本概念 3、制作流程 4、调试模板 5、示例（从SDK创建到调试的整个过程）,1、应具备技能：网页设计师 Ps css html（要求比较高 不会请跳到最后的学习资料）PHP开发 php xml（略懂即可） 2、需要的工具：SDK开发环境 下载地址:PhotoshopDreamweaver（等网页制作工具及PHP开发）常用网页浏览器,SDK开发前期准备,模板：在SDK新建模板后，模板是一个文件夹，成型的模板是个zip压缩包 页面：模板由多个页面组成，大致有店铺
2、首页、搜索列表页、宝贝详情页等 布局：每一个页面可以有很多种布局，比如950通屏 750-190布局等 模块：构成模板的最小单位。,基本概念,模板的基本构成,点击这里了解如何安装SDK环境。SDK环境默认安装到D: DC_SDK，在其中需要注意的是htdocs目录，htdocs目录存放着模板，temp是模板开发完成后打包存放的压缩包的目录。 安装后桌面会有 的图标，双击后启动一个命令行，不要关闭它。 然后在浏览器访问http:/localhost:8080/ 就进入SDK web控制台了(注：允许开启多个SDK,多个SDK环境请复制多个文件夹，他们的端口会自动加1,如http:/localho
3、st:8081/)，如图。 可视化操作，这里就不再阐述如何使用。,基本概念,了解SDK本地开发环境,整个模板的文件夹template1是存在于 sdk安装目录的,基本概念,模板的文件结构,设计PSD，将PSD通过CSS+DIV或table制作成HTML模板,这个如果不知道的 可以去网络上搜索相关学习资料。,制作流程,一、设计模板,制作流程,二、SDK模板的创建,制作流程,模板目录的site.xml修改及设置,设置时请注意系统的默认值,拿首页（index.php）作为例子，用dreamwaver编辑index.php文件，在文件中添加布局结构具体的布局结构和坑可以参看淘宝SDK帮助手册（也可以参
4、考 SDK自带的template1中的index.php文件）。,制作流程,页面布局和坑设置,其中中间部分为PHP输出的模块，每一个array()里面都是一个独立的模块,1.进入模板后台，点击创建新模块,制作流程,创建新模块,填写模块数据,制作流程,配置模块XML,进入这个文件,打开xx.php模块文件,将代码写入其中,制作流程,开发模块,每个模块都必需包含有box的DIV层,直接复制过来。,找到assets文件,制作流程,CSS样式及素材图片存放,进入,Imamges存放模板素材,Stylesheets存放CSS文件,Blue.css存放模块及模板自定义样式,Global.css存放系统样式
5、,制作流程,模板首页引入模块,模板调试,模板预览及调试模块,正常预览,Debug调试模式预览,在地址后面在加入”?debug”就进入了调试模式,和在线编辑店铺功能一样,1、html css入门基础 http:/ 2、php入门基础 http:/ 3、sdk学习资料 http:/,学习资料,学习资料,SDK模板开发示例,创建一个名为“小雨”的这么一个模板,单击下一步继续,注：店铺数据行业不一样默认调试的数据也不一样,创建完成之后在SDK后台首页就会出现我们刚才创建的模板了,SDK模板开发示例,创建一个名为“宝贝展示”的模块,SDK模板开发示例,点击创建模块,创建成功之后,找到我们刚才创建的模块及
6、模板,SDK模板开发示例,Htdocs存放所有创建的模板,这就是我们之前创建的模板了,Modules文件夹存放所有创建完成的模块,找到”baobei”这个我们刚才创建的模块,模块代码存放处,用于配置模块的XML文件,宝贝模块开发,SDK模板开发示例,打开baobei.php文件,添加模块代码,这个层每个模块必须添加,注：950/750/190/550模块 将DIV层的宽度设置 为相应宽度就可以了,为baobei模块添加CSS样式和图片,SDK模板开发示例,图片素材放入images调用即可,打开stylesheets文件,打开blue.css文件 写入样式,加入淘宝数据接口调用店铺信息,SDK模板开发示例,我们调用店铺名称 店主昵称 开店时间 三个系统接口,跟多接口调用及系统信息请参看wiki帮助文档,添加模块到首页,SDK模板开发示例,将模块ID为baobei的模块加入首页，只需要将,array(id = 模块ID); 加入首页就完成了添加操作如图。,注：系统模块添加请参见wiki帮助文档或图中示例语法格式来写。,打开文件,预览及调试模块,SDK模板开发示例,点击首页预览,预览效果,关于模块XML配置及资料,SDK模板开发示例,模块XML配置请参考wiki地址是http:/
