這里說(shuō)的是模板開發(fā)的常規(guī)流程
1.建立模板文件夾目錄
建立一個(gè)新模板,需要手工建立一個(gè)新文件夾,可以任意命名,模板里必須包含info.xml(模板信息配置文件)、 preview.jpg(模板縮略圖)、theme.xml(模板信息記錄文件,無(wú)需修改)。
完成之后系統(tǒng)將會(huì)自動(dòng)判斷此文件夾為新模板目錄,在后臺(tái)的模板列表中可看到此模板的名稱以及模板縮略圖。
再按需要建立images、block、border等文件夾。
2.靜態(tài)頁(yè)面嵌入shopex系統(tǒng)
這一步和通常的設(shè)計(jì)稿->頁(yè)面的過(guò)程相同,需要制作者具備基本的html、css等知識(shí),這時(shí)的頁(yè)面代碼規(guī)整,會(huì)給之后的制作帶來(lái)很大的方便。
制作靜態(tài)頁(yè)面時(shí)需要?jiǎng)澐趾貌季郑龊眠吙虻臉邮健?/p>
這個(gè)時(shí)候所做的頁(yè)面可以是低保真的,即僅劃分頁(yè)面的布局,版塊的內(nèi)容可以用均可使用”widget(掛件)“代替,待頁(yè)面制作完成后,通過(guò)后臺(tái)板塊功能嵌入功能后再寫入樣式。
使用HTML布局方式,將模板分為以下幾個(gè)部分。每個(gè)部分內(nèi)的元素?zé)o需細(xì)化,其中含有功能性以及廣告、圖片、文字等元素,均可使用”widget(掛件)“代替。
注意,頭部head內(nèi)必須有<{header}>標(biāo)簽,尾部必須有<{footer}>標(biāo)簽,用來(lái)輸出程序附帶的資源,否則內(nèi)頁(yè)的部分功能會(huì)出現(xiàn)錯(cuò)誤。
3.添加掛件預(yù)覽效果,并完善樣式修改
通過(guò)板塊功能調(diào)用出的內(nèi)容,其表現(xiàn)形式和風(fēng)格都是由系統(tǒng)內(nèi)置CSS制定。而通常我們自己制作的模板往往與系統(tǒng)內(nèi)置風(fēng)格有著多多少少的區(qū)別。同時(shí)也是為了使模板更加獨(dú)特而需要做的事情。
這一步的過(guò)程完全通過(guò)css的修改來(lái)完成。
系統(tǒng)默認(rèn)調(diào)用的是內(nèi)置css,它的路徑是statics文件夾下的framework.css、shop.css。
但是如果我們通過(guò)常規(guī)方法直接修改這2個(gè)系統(tǒng)內(nèi)置CSS文件,很容易在升級(jí)時(shí)一并被修改,并無(wú)法將模板導(dǎo)出。
這里推薦使用“覆蓋法”來(lái)更改css的屬性,也就是將需要修改的css屬性從系統(tǒng)內(nèi)置CSS文件中,拿到模板目錄文件夾內(nèi)的css文件中,修改過(guò)后在頁(yè)面顯示時(shí)系統(tǒng)將優(yōu)先顯示此css屬性。用此方法達(dá)到修改目的。推薦使用friefox瀏覽器,和其中的firebug插件,可以快速查詢到指定位置的CSS名稱和關(guān)聯(lián)情況。
4.根據(jù)情況制作模板的邊框和掛件
選取可復(fù)用部分作為邊框,這一步的工作可以放在模板布局時(shí)提前做好,因邊框也屬于外部調(diào)用的形式,shopex模板系統(tǒng)將每一個(gè)邊框文件作為單獨(dú)的文件以便重復(fù)調(diào)用。
如果有部分ShopEx本身沒有的掛件,可以自行制作新掛件或在原有掛件基礎(chǔ)上修改。注意新掛件或者修改后的掛件需改名,勿覆蓋系統(tǒng)掛件,以免今后系統(tǒng)升級(jí)造成文件丟失。
5.制作內(nèi)頁(yè)
除了首頁(yè)外,其他頁(yè)面都可以用默認(rèn)框架default.html。
默認(rèn)框架輸出業(yè)務(wù)區(qū),承擔(dān)所有業(yè)務(wù)流程的功能,也就是說(shuō)只要一個(gè)默認(rèn)框架 default.html就能表示所有功能內(nèi)頁(yè),進(jìn)入不同的功能內(nèi)頁(yè)時(shí),業(yè)務(wù)區(qū)輸出不同的預(yù)置內(nèi)容。
default.html文件放置在模板目錄下,與index.html層級(jí)相同。
如果某個(gè)頁(yè)面需要與其他頁(yè)面不同,這個(gè)時(shí)候就可以手工建立一個(gè)新的模板框架,這些框架是由系統(tǒng)已經(jīng)預(yù)置好的,只需要選擇想要添加的頁(yè)面類型就可以了。
6.預(yù)覽-調(diào)試各版本各瀏覽器兼容性-完成制作-維護(hù)
調(diào)試兼容性:通過(guò)CSS調(diào)整您的模板再各瀏覽器下保持一致。
維護(hù):大神云:"互聯(lián)網(wǎng)飛速發(fā)展的時(shí)代,一個(gè)再好的產(chǎn)品,如果沒有人去更新、去維護(hù),這個(gè)好產(chǎn)品會(huì)迅速變成垃圾..."
新聞熱點(diǎn)
疑難解答