SDK模板開發(fā)簡易教程課件

1、SDK模板開發(fā)教程五代十國2012年4月20日SDK教程大綱2009-8-221、開發(fā)SDK模板的前期準(zhǔn)備工作2、SDK的基本概念3、制作流程4、調(diào)試模板5、示例（從SDK創(chuàng)建到調(diào)試的整個過程）1、應(yīng)具備技能應(yīng)具備技能： 網(wǎng)頁設(shè)計師 Ps css html（要求比較高 不會請?zhí)阶詈蟮膶W(xué)習(xí)資料） PHP開發(fā) php xml（略懂即可）2、需要的工具需要的工具： SDK開發(fā)環(huán)境 下載地址: Photoshop Dreamweaver（等網(wǎng)頁制作工具及PHP開發(fā)） 常用網(wǎng)頁瀏覽器 SDK開發(fā)前期準(zhǔn)備模板：在SDK新建模板后，模板是一個文件夾，成型的模板是個zip壓縮包頁面：模板由多個頁面組成，大致

2、有店鋪首頁、搜索列表頁、寶貝詳情頁等布局：每一個頁面可以有很多種布局，比如950通屏 750-190布局等模塊：構(gòu)成模板的最小單位?；靖拍钅０宓幕緲?gòu)成模板的基本構(gòu)成點擊這里了解如何安裝SDK環(huán)境。SDK環(huán)境默認(rèn)安裝到D: DC_SDK，在其中需要注意的是htdocs目錄，htdocs目錄存放著模板，temp是模板開發(fā)完成后打包存放的壓縮包的目錄。安裝后桌面會有 的圖標(biāo)，雙擊后啟動一個命令行，不要關(guān)閉它。然后在瀏覽器訪問 就進入SDK web控制臺了(注：允許開啟多個SDK,多個SDK環(huán)境請復(fù)制多個文件夾，他們的端口會自動加1,如)，如圖?？梢暬僮?，這里就不再闡述如何使用?；靖拍盍私饬私?/p>

3、SDK本地開發(fā)環(huán)境本地開發(fā)環(huán)境整個模板的文件夾template1是存在于 sdk安裝目錄的基本概念模板的文件結(jié)構(gòu)模板的文件結(jié)構(gòu) 設(shè)計PSD，將PSD通過CSS+DIV或table制作成HTML模板,這個如果不知道的 可以去網(wǎng)絡(luò)上搜索相關(guān)學(xué)習(xí)資料。制作流程一、設(shè)計模板一、設(shè)計模板制作流程二、二、SDK模板的創(chuàng)建模板的創(chuàng)建制作流程模板目錄的模板目錄的site.xml修改修改及及設(shè)置設(shè)置設(shè)置時請注意系統(tǒng)的默認(rèn)值 拿首頁（拿首頁（index.php）作）作為例子，用為例子，用dreamwaver編輯編輯index.php文件，在文件，在文件中添加布局結(jié)構(gòu)具文件中添加布局結(jié)構(gòu)具體的布局結(jié)構(gòu)和坑可以體的布

4、局結(jié)構(gòu)和坑可以參看淘寶參看淘寶SDK幫助手冊幫助手冊（也可以參考（也可以參考 SDK自帶自帶的的template1中的中的index.php文件）。文件）。制作流程頁面布局和坑設(shè)置頁面布局和坑設(shè)置其中中間部分為PHP輸出的模塊，每一個array()里面都是一個獨立的模塊1.進入模板后臺，點擊創(chuàng)建新模塊制作流程創(chuàng)建新模塊創(chuàng)建新模塊填寫模塊數(shù)據(jù)制作流程配置模塊配置模塊XML進入這個文件打開xx.php模塊文件,將代碼寫入其中制作流程開發(fā)模塊開發(fā)模塊每個模塊都必需包含有每個模塊都必需包含有box的的DIV層層,直接復(fù)制過來。直接復(fù)制過來。找到assets文件制作流程CSS樣式及素材圖片存放樣式及素材

5、圖片存放進入Imamges存放模板素材存放模板素材Stylesheets存放存放CSS文件文件Blue.css存放模塊及模板自定義樣式Global.css存放系統(tǒng)樣式制作流程模板首頁模板首頁引入模塊引入模塊模板調(diào)試模板預(yù)覽及模板預(yù)覽及調(diào)試模塊調(diào)試模塊正常預(yù)覽Debug調(diào)試模式預(yù)覽在地址后面在加入”?debug”就進入了調(diào)試模式和在線編輯店鋪功能一樣1、html css入門基礎(chǔ) 2、php入門基礎(chǔ) 3、sdk學(xué)習(xí)資料 學(xué)習(xí)資料學(xué)習(xí)資料學(xué)習(xí)資料SDK模板開發(fā)示例創(chuàng)建一個名為創(chuàng)建一個名為“小雨小雨”的這么一個模板的這么一個模板單擊下一步繼續(xù)單擊下一步繼續(xù)注：店鋪數(shù)據(jù)行業(yè)不一樣默認(rèn)調(diào)試的數(shù)據(jù)也不一樣創(chuàng)

6、建完成之后在SDK后臺首頁就會出現(xiàn)我們剛才創(chuàng)建的模板了SDK模板開發(fā)示例創(chuàng)建一個名為創(chuàng)建一個名為“寶貝展示寶貝展示”的模塊的模塊SDK模板開發(fā)示例點擊創(chuàng)建模塊點擊創(chuàng)建模塊創(chuàng)建成功之后創(chuàng)建成功之后找到我們剛才創(chuàng)建的模塊及模板找到我們剛才創(chuàng)建的模塊及模板SDK模板開發(fā)示例Htdocs存放所存放所有創(chuàng)建的模板有創(chuàng)建的模板這就是我們之前創(chuàng)建的模板了這就是我們之前創(chuàng)建的模板了Modules文件夾存放所有創(chuàng)建完成的模塊找到”baobei”這個我們剛才創(chuàng)建的模塊模塊代碼存放處用于配置模塊的XML文件寶貝模塊開發(fā)寶貝模塊開發(fā)SDK模板開發(fā)示例打開baobei.php文件添加模塊代碼這個層每個模塊必須添加這個層

7、每個模塊必須添加注：注：950/750/190/550模塊模塊將將DIV層的寬度設(shè)置層的寬度設(shè)置為相應(yīng)寬度就可以了為相應(yīng)寬度就可以了為為baobei模塊添加模塊添加CSS樣式和圖片樣式和圖片SDK模板開發(fā)示例圖片素材放入圖片素材放入images調(diào)用即可調(diào)用即可打開打開stylesheets文件文件打開打開blue.css文件文件寫入樣式寫入樣式加入淘寶數(shù)據(jù)接口調(diào)用店鋪信息加入淘寶數(shù)據(jù)接口調(diào)用店鋪信息SDK模板開發(fā)示例我們調(diào)用店鋪名稱我們調(diào)用店鋪名稱店主昵稱店主昵稱開店時間開店時間三個系統(tǒng)接口三個系統(tǒng)接口跟多接口調(diào)用及系統(tǒng)信息請參看跟多接口調(diào)用及系統(tǒng)信息請參看wiki幫助文檔幫助文檔添加模塊到首頁添加模塊到首頁SDK模板開發(fā)示例將模塊將模塊ID為為baobei的模塊加入首頁，只需要將的模塊加入首頁，只需要將array(id = 模塊模塊ID);加入首頁就完成了添加操作如圖。加入首頁就完成了添加操作如圖。注：系統(tǒng)模塊添加請參見注：系統(tǒng)模塊添加請參見wiki幫助文檔或圖中示例語法格式來寫。幫助文檔或圖中示例語法格式來寫。打開文件預(yù)覽