1、ECMall模板開發(fā)文檔前 言歡迎閱讀ECMall模板制作教程，通過閱讀本教程可快速上手ECMall模板的使用和制作。ECMall模板制作要求用戶具備XML、XHTML和CSS根底知識；至少掌握一種文本編輯器或網(wǎng)頁制作工具(如：EditPlus,Dreamweaver,Textmate等)；本教程還將及一些模板代碼，如從沒有了解過Smarty建議閱讀Smarty幫助手冊。第一節(jié)-ECMall模板機制介紹通過閱讀本節(jié)你將了解：1. ECMall模板的組成和機構(gòu) 2. ECMall模板機制工作原理ECMall頁面模板由布局(layout)、模塊(module)、皮膚(skin)組成，所有模板文件都

2、保存在ECMall根目錄的themes目錄下，其中兩個目錄mall和store，mall目錄包含了商城的所有布局、模塊、皮膚，store目錄包含了店鋪所有布局、模塊、皮膚，兩個目錄的結(jié)構(gòu)是完全一樣。下面首先介紹mall目錄下的結(jié)構(gòu)。mall目錄包括layout、resource、skin三個目錄，其用途分別為： Layout目錄-用于存放layout文件。layout目錄下的每個子目錄里存放的是某一個頁面的layout文件layout目錄介紹請見附表1，如homepage目錄就是商城首頁的布局目錄,里面有一個default.layout文件這就是商城首頁的布局文件，在這個目錄里可以存在多個布局

3、文件，布局文件是一個標準的XML文檔，你只需要寫簡單的幾個標簽以下稱為布局描述語言描述整個頁面的布局架構(gòu)，在以后的章節(jié)會詳細介紹布局文件的制作方法。 resource目錄-用于存放內(nèi)容模塊文件。模塊是由布局文件調(diào)用的，內(nèi)容是HTML或模板代碼組成，在以后的章節(jié)會詳細介紹模塊制作方法。 skin目錄-存放皮膚，目錄中每個目錄對應一個skin，如default是ECMall默認皮膚，其中包括了CSS文件，和圖片以及JS文件，在以后的章節(jié)會詳細介紹皮膚制作方法。 ECMall的每一個頁面的模板都包含以上介紹的元素，原理是模板引擎將布局文件中的布局描述語言解析，將文件中描述的頁面布局和模塊部署位置輸出

4、一個標準的XHTML文檔。第二節(jié)-布局文件制作方法通過閱讀本屆你將了解：1. ECMall模板布局描述語言的標簽 2. ECMall模板布局描述制作方法上節(jié)簡單的介紹了布局文件，本節(jié)將詳細介紹布局文件的制作方法。布局文件的內(nèi)容是布局描述語言，布局描述語言是基于XML的，XML是一種標記語言，ECMall定義了4個簡單的標簽row、col、library、item，你只需要使用這四個簡單的標簽就能描述一個自己想要頁面:l row標簽 - 標記一行，支持的屬性包括id、class、allowEditl col標簽 - 標記一列，支持的屬性包括id、class、allowEditl libray標簽

5、 - 標記的是一個模塊容器l item標簽 - 標記的是一個模塊，支持的屬性包括id和src。下面介紹如何制作ECMALL的布局文件 以上是會員中心首頁的布局文件的內(nèi)容，該文件在根目錄的themes/mall/layout/mc_home/default.layout，所描述的布局如以下圖：學習文檔 僅供參考 代碼的第一行“聲明文檔是一個XML文檔。后面.是根節(jié)點，XML文檔標準是必須存在一個根節(jié)點的，template節(jié)點的子節(jié)點就是上面介紹的4個標簽，用于描述頁面布局，這個頁面分為上中下三行，中局部為兩列。第一行代碼 這段代碼用row標簽標記一行，定義了一個ID為region1，這里需要注意

6、下每個標簽都應該有一個唯一ID，不能和其他標簽的ID沖突，一旦沖突頁面可能會無法正常顯示，這里還定義了allowEdit屬性為false，這表示這個標簽下的模塊，在模板編輯模式下是無法拖拽的，其他模塊也無法拖放到這里。這個標簽下調(diào)用了兩個模塊，所以必須有一個模塊的容器標簽“，“標記了調(diào)用一個模塊，這里ID屬性必須和src屬性對應的模塊文件中頂級元素ID相同,src是模塊的相對路徑。第二行代碼： 這一行分為兩列，在row標簽里我們定義了兩列，第一列的ID為region2，第二列的ID為region3，這兩列分別調(diào)用了一個模塊，這和第一行講解的是一樣，這里需要注意的是row標簽可以包含多個col、

7、row標簽，也可以包含一個library標簽，但不能同時包含不同的標簽，比方：1. 2. . 上面的兩段代碼都是錯誤的，col標簽可以包含row標簽但不能再包含col標簽，col標簽也不能同時包含row和library，比方 . 這樣也是錯誤的。最后講解布局第三行的代碼： 這一行和第一行的代碼幾乎相同，只是調(diào)用的模塊不同而已，allowEdit為false禁止編輯這一行。第三節(jié)-模塊文件制作方法ECMall的模板機制中所有的內(nèi)容都是在模塊中來實現(xiàn)的，上一節(jié)中講的布局文件僅僅是用于頁面布局的描述，其中沒有任何頁面內(nèi)容，ECMall的模塊主要由HTML代碼和模板語句，模板語句是兼容smarty的語

8、法的。在后臺模板管理用戶可以可視化編輯頁面的內(nèi)容，任意拖拽模塊，所以模塊必須要按照ECMall模塊標準制作，商城的模塊文件存放在根目錄的themes/mall/resource，店鋪的模塊文件存放在根目錄的themes/store/resource,下面舉例講解下themes/mall/resource/site_news.html文件的內(nèi)容，這個模塊是站內(nèi)快訊的模塊。 ($article.formated_add_time)$article.title|escape page_links from=$article_ url=$url_format $article.con

9、tent 這里面有一個div，id為site_news_content，這里需要注意的是每個模塊的ID必須是唯一的，不能和其他模塊重命名，每個模塊文件里面只能有一個根元素，如果存在一個以上根元素就無法正常操作了，如一下代碼： 如果一個模塊文件的內(nèi)容是這樣，存在兩個根元素就是錯誤的。第四節(jié) ：皮膚文件制作方法皮膚是由CSS和圖片組成，商城的皮膚文件位于根目錄的themes/mall/skin目錄,商城的皮膚文件位于根目錄的themes/mall/skin目錄，一個皮膚是一個目錄，如默認皮膚default，目錄里包含多個css文件，下面介紹下每個文件的作用。商城的CSS文件說明文件名作用article.css站內(nèi)快訊，幫助中心頁面的CSS樣式文件category.css商城搜索，團購列表，商品分類頁面的CSS樣式文件global.css整個商城包括店鋪的全局CSS文件mall.css商城首頁的CSS文件mallbase.css商城全局CSS文件member.css用戶中心頁面CSS文件shopping.css購物流程頁面的CSS文件storelist.css店鋪列表頁面的CSS文件店鋪的CSS文件說明文件名作用goods.css團購商品，商品頁面的CSS文件storebase.css店鋪頁面的CSS文件在CSS可以定義對