shopex模板

shopex模板是上海商派科技有限公司開發的網上商店系統的外觀控制檔案。為了滿足不同B2C行業對網站外觀與設計的定製需求，shopex網店系統採用了程式和模板分離的解決方案，可以根據不同的行業製作出不同風格的網站外觀，而不用修改程式。

公司介紹

通常情況下一個完整的shopex模板包括下面六部分：　模板路徑是ShopEx48安裝目錄/themes/　進入到某一套模板目錄中後，就可以看到該模板的目錄和檔案結構了

1 可重用部分，資料夾中存放著模板各頁面的公用部分，擴展名為html，一般是模板的頭部和尾部，這兩個部分在整個站點中都是相同的，支持smarty語法

模板結構

2. 框線目錄，擴展名為html，存放著框線檔案，框線是版塊的呈現樣式，相當於版塊的模板，支持smarty語法

3 images目錄，存放所有圖片檔案、css檔案等

4 *.html，框架檔案，擴展名為html，決定了頁面的布局和版塊可擺放的區域，是頁面的骨架

5 preview.jpg ，模板預覽圖片

6 theme.xml，模板配置檔案，包含模板信息、框線信息，版塊配置信息等

theme.xml配置信息說明如下：

1 name， 模板名

2 id， 模板資料夾名

3 version， 模板版本

4 info， 模板描述

5 author， 模板作者

6 site， 模板網站

7 update_url， 模板升級地址

8 borders， 框線的描述，這裡所列出的信息會被用在後台“修改版塊”面板的“版塊框線”下拉框中。borders的寫法：key為顯示在後台的下拉選項，tpl為各框線相對模板目錄的框線路徑。 　config， 模板中定義的參數，例如一套變色模板，它的顏色可以作為參數寫在config中，方便用戶在編輯模板時修改。

9 config的參數可在後台“模板配置”中修改。

theme.xml是整個模板中最重要的部分，所有模板的配置信息都是存在這個xml中的，包括板塊的位置、配置信息，框線的信息等等。第一次載入模板時，theme.xml中包含的信息被讀入資料庫，即模板的初始化，之後用戶便可以在可視化界面中進行板塊的增刪改和對原有的板塊進行配置。配置信息保存在資料庫中，用戶可以通過導出模板來下載到最新的帶配置信息的theme.xml，通過“恢復默認”來套用新的theme.xml。　首頁對於一個購物網站來說比較複雜，內頁的話相對簡單，在ShopEx4.8中，內頁都可以用一個框架default.html來表示。　頁面的頭部和尾部都是公用的，所以將它們分離出去，作為獨立的html引用到各個框架頁面中。　注意，頭部head內必須有<{header}>標籤，尾部必須有<{footer}>標籤，用來輸出程式附帶的資源，否則內頁的一些功能會出現錯誤。　以上面這個模板來說，頁面中部布局分為左中右三欄，各欄內部是一些小的功能板塊，這些板塊的內容和功能是預置的，通過後台可視化編輯來配置。也就是說，ShopEx48模板的製作實際上較少涉及這些功能板塊的內容，更多關心的是框架和框線的表現樣式。實際製作過程中我們可以將這板塊內容以低保真的形式，如圖片或文字占位，留待以後細調。　首頁框架對應的是index.html，代碼的寫法和平常的html檔案是相同的。框架同時也支持smarty語法，寫法是 <{smarty語句}>。　如上圖的index.html源碼是：　<{require file="block/header.html"}>　<div id="AllWrap" class="clearfix">　<div class="span-5 cut">　<{widgets id="l1"}>　</div>　<div class="span-13 cut">　<{widgets id="m1"}>　</div>　<div class="span-6 trim cut">　<{widgets id="r1"}>　</div>　</div>　<{require file="block/footer.html"}>　代碼中可以看到，框架的源碼很簡單，只做布局，頭尾都做獨立的html引用。

shopex模板製作流程

當然這裡說的是模板開發的常規流程，如果您自認為脛骨奇特、天賦秉異，您亦可打破常規，經脈逆行:一邊寫一點靜態頁、一邊套掛件效果、累了複製兩個框線...等等

不過初學者請慎重，一般視自行功底，量力而行...

1.建立模板資料夾目錄建立一個新模板，需要手工建立一個新資料夾，可以任意命名，模板里必須包含info.xml（模板信息配置檔案）、 preview.jpg（模板縮略圖）、theme.xml（模板信息記錄檔案，無需修改）。

完成之後系統將會自動判斷此資料夾為新模板目錄，在後台的模板列表中可看到此模板的名稱以及模板縮略圖。

再按需要建立images、block、border等資料夾。

2.靜態頁面嵌入shopex系統

這一步和通常的設計稿->頁面的過程相同，需要製作者具備基本的html、css等知識，這時的頁面代碼規整，會給之後的製作帶來很大的方便。

製作靜態頁面時需要劃分好布局，做好框線的樣式。

這個時候所做的頁面可以是低保真的，即僅劃分頁面的布局，版塊的內容可以用均可使用”widget（掛件）“代替，待頁面製作完成後，通過後台板塊功能嵌入功能後再寫入樣式。

使用HTML布局方式，將模板分為以下幾個部分。每個部分內的元素無需細化，其中含有功能性以及廣告、圖片、文字等元素，均可使用”widget（掛件）“代替。

注意，頭部head內必須有<{header}>標籤，尾部必須有<{footer}>標籤，用來輸出程式附帶的資源，否則內頁的部分功能會出現錯誤。

3.添加掛件預覽效果，並完善樣式修改

通過板塊功能調用出的內容，其表現形式和風格都是由系統內置CSS制定。而通常我們自己製作的模板往往與系統內置風格有著多多少少的區別。同時也是為了使模板更加獨特而需要做的事情。

這一步的過程完全通過css的修改來完成。系統默認調用的是內置css，它的路徑是statics資料夾下的framework.css、shop.css。

但是如果我們通過常規方法直接修改這2個系統內置CSS檔案，很容易在升級時一併被修改，並無法將模板導出。

這裡推薦使用“覆蓋法”來更改css的屬性，也就是將需要修改的css屬性從系統內置CSS檔案中，拿到模板目錄資料夾內的css檔案中，修改過後在頁面顯示時系統將優先顯示此css屬性。用此方法達到修改目的。

推薦使用firefox瀏覽器，和其中的firebug外掛程式，可以快速查詢到指定位置的CSS名稱和關聯情況。

4.根據情況製作模板的框線和掛件

選取可復用部分作為框線，這一步的工作可以放在模板布局時提前做好，因框線也屬於外部調用的形式，shopex模板系統將每一個框線檔案作為單獨的檔案以便重複調用。

如果有部分ShopEx本身沒有的掛件，可以自行製作新掛件或在原有掛件基礎上修改。注意新掛件或者修改後的掛件需改名，勿覆蓋系統掛件，以免今後系統升級造成檔案丟失。

5.製作內頁

除了首頁外，其他頁面都可以用默認框架default.html。

默認框架輸出業務區，承擔所有業務流程的功能，也就是說只要一個默認框架 default.html就能表示所有功能內頁，進入不同的功能內頁時，業務區輸出不同的預置內容。

default.html檔案放置在模板目錄下，與index.html層級相同。

如果某個頁面需要與其他頁面不同，這個時候就可以手工建立一個新的模板框架，這些框架是由系統已經預置好的，只需要選擇想要添加的頁面類型就可以了。

6.預覽-調試各版本各瀏覽器兼容性-完成製作-維護

調試兼容性：通過CSS調整您的模板再各瀏覽器下保持一致。

維護：大神云："網際網路飛速發展的時代，一個再好的產品，如果沒有人去更新、去維護，這個好產品會迅速變成垃圾..."

布局時可用的css

ShopEx48內置了一套css的框架blueprint，能夠很方便的幫助我們進行布局。

1024px解析度下滿屏的頁面寬度一般用960px或950px，以40px為一列可以將寬度分成24列，在css中用.span-1到.span-24來分別定義這些以40px倍增的寬度，這樣就從40px到960px覆蓋了常用的列寬,每列的實際寬度是寬度減10px，這10px是列與列之間的間隔，最後一列可以加.last，使間隔為0。

典型的三列布局例子：

<div class="span-24 clearfix">

<div class="span-5">左欄190px</div>

<div class="span-13">中欄510px</div>

<div class="span-6 last">右欄230px</div>

</div>

上面這段代碼是典型的3列布局，在最外層有一個clearfix用來清除浮動，三列的寬分別是190px，510px，230px，間隔10px。

板塊和板塊區

ShopEx48模板可以認為是布局和板塊的組合，布局是骨骼，板塊是內容。框架搭好後就是板塊的配置。一套模板初始時是由製作者配置好了各種的板塊，然後用戶可以方便的在可視編輯更改板塊的配置。

板塊的功能和內容是預置的，它們可以理解為是在框架頁面上可插拔的模組，那相應的，框架頁面上就要有對應的插槽，這些可以容納板塊的插槽稱為板塊區，在框架的代碼里的標籤是<{widgets}>，一個板塊區能容納多個豎向排列的板塊。

板塊區默認是按照框架頁html代碼中的先後順序和板塊對應的，如果板塊區的順序變動，比如在某個板塊區前增加了一個板塊區，那么之後的板塊都會順序向前一位掛接在板塊區上，導致頁面錯亂。解決這個問題的辦法是給板塊區加上特定的id，寫法是<{widgets id=”用戶自定的id”}>，這樣插槽就能被準確的定位。

如果是通用性的模板，一般會在多列的布局上下各增加一個板塊區，以便用戶放置橫幅廣告等等。

其他頁面的框架

除了首頁外，其他頁面都可以用默認框架default.html，默認框架輸出業務區，承擔所有業務流程的功能，也就是說只要一個默認框架default.html就能表示所有功能內頁，進入不同的功能內頁時，業務區輸出不同的預置內容。業務區在html代碼中的寫法是<{main}>，default.html必須有這個標籤。

當然某個功能頁也能新建一個框架，框架檔案名稱是系統預置好的，與某個功能頁面相對應，只要新建出來一個框架，就自動套用在這個頁面上，不同的框架可以帶來不同的布局和板塊配置。

會員中心和購物車頁面需要更大的寬度，因此他們的框架一般與默認框架不同，因此模板一般需要4個框架頁，首頁index.html、默認頁defaut.html、會員中心頁member.html、購物車cart.html。