SDK模板开发教程.pptxVIP

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