phpwind門(mén)戶模板制作教程.doc

門(mén)戶模板轉(zhuǎn)換詳細(xì)教程門(mén)戶模板體系目錄1. 庫(kù)目錄 “/mode/area/themes/” 是用來(lái)存放用來(lái)創(chuàng)建門(mén)戶頻道“母板”的目錄2. 開(kāi)發(fā)目錄 “/html/channel/” 是用來(lái)存放已經(jīng)生成的門(mén)戶頻道3. 頭部和底部“/mode/area/template/” 里的header.htm和footer.htm4. 頭部登陸框調(diào)用的是 “/mode/area/template/” m_header.htm5. 全站調(diào)用模塊模板目錄”/html/portal/” 該目錄用來(lái)存放門(mén)戶調(diào)用模塊的模版門(mén)戶轉(zhuǎn)換具體操作1. 首先進(jìn)入后臺(tái)新建自己想要的頻道：后臺(tái)模式門(mén)戶模式左側(cè)的頻道管理 例如：新建一個(gè)家裝頻道頻道名稱：家裝頻道風(fēng)格模板：blank（這個(gè)是專門(mén)拿來(lái)轉(zhuǎn)換的，因?yàn)槲募A里面內(nèi)容是空，便于大家添加自己想要的內(nèi)容）英文別名：jiazhuang（這名稱可以自己定，但一定是英文的）域名綁定：不需要填寫(xiě) 提交之后將會(huì)在html/channel/目錄里自動(dòng)生成一個(gè)jiazhuang文件夾，我們就可以在這個(gè)生成的jiazhuang文件夾里做模板了頻道文件已經(jīng)建好，但是需要在前臺(tái)瀏覽頁(yè)面，后臺(tái)也已經(jīng)生成相應(yīng)的頻道，可以從后臺(tái)頻道管理已經(jīng)生成好的鏈接直接訪問(wèn)，因?yàn)樵傻奈募强盏臎](méi)有內(nèi)容，所以效果如下圖：2、現(xiàn)在我們可以開(kāi)始第二步驟，寫(xiě)靜態(tài)的頁(yè)面（html+css） 進(jìn)入html/channel/jiazhuang/目錄，可以看到如下文件：Images 文件夾用來(lái)放圖片和style樣式文件，config.htm 用來(lái)放自動(dòng)生成的pw轉(zhuǎn)換代碼index.html 是頁(yè)面的緩存文件，咱們不需要去管它main.html 是用來(lái)放置html代碼，所以我們寫(xiě)的靜態(tài)代碼都是要在這個(gè)文件里來(lái)完成，現(xiàn)在我把已經(jīng)寫(xiě)好的html靜態(tài)代碼放到main.htm來(lái)，先來(lái)看一下main.html文件: 可以看到有上下兩段php代碼，這是調(diào)用header頭部和footer底部，所以這兩段代碼必須保留，而我們只需要在“這里添加模塊”這個(gè)地方寫(xiě)自己需要的代碼就好了.A、首先把style.css和切好的圖片放到images文件夾里，B、然后在main.html編寫(xiě)html代碼，盡量寫(xiě)的規(guī)范點(diǎn)，對(duì)后面轉(zhuǎn)換就比較容易C、前臺(tái)刷新瀏覽頁(yè)面，看效果：3、現(xiàn)在靜態(tài)寫(xiě)好了，我們可以開(kāi)始第三步驟，轉(zhuǎn)換成pw模塊： 3-1、這個(gè)地方我們就要看一下頁(yè)面上每個(gè)模塊與模塊之間的html代碼是什么樣的關(guān)系，比如家居頻道大標(biāo)題和右邊的小鏈接：這一個(gè)模塊的代碼是一個(gè)div整個(gè)包起來(lái)的，那么我們可以把這個(gè)div里的內(nèi)容用一個(gè)pw標(biāo)簽給嵌套起來(lái)，記得有開(kāi)始標(biāo)簽，那就一定要有結(jié)束標(biāo)簽，代碼如上；嵌套好之后，ctrl+s保存文件，到前臺(tái)瀏覽刷新頁(yè)面，要先用管理員身份登錄，點(diǎn)擊右邊的模塊管理，再把鼠標(biāo)移到剛剛轉(zhuǎn)換好的那一個(gè)模塊，就會(huì)出現(xiàn)管理框然后再回到main.html文件，這時(shí)候會(huì)彈出一個(gè)說(shuō)明框，直接點(diǎn)擊“是”就好了：再看剛剛那一段代碼有了變化，你一定會(huì)納悶，原先那么的代碼怎么就只剩下這么一句啦？ 它們都哪兒去了呢，別著急，它們只是為了方便管理而另存到與main.html同一目錄下的config.htm文件里來(lái)啦，現(xiàn)在打開(kāi)config.html文件看看，原來(lái)空空如也的config.html文件里已經(jīng)有了消失的那段代碼了，現(xiàn)在應(yīng)該搞明白是怎么回事了吧：這里有一個(gè)很重要的問(wèn)題要注意哦：就是main.html里的這個(gè)pw一定要和config.html文件里的一樣，不然會(huì)找不到，那么瀏覽頁(yè)面的時(shí)候也不會(huì)出現(xiàn)內(nèi)容的哦。3-2、現(xiàn)在已經(jīng)轉(zhuǎn)好一個(gè)模塊了，但是這個(gè)模塊還沒(méi)有真正的成功，因?yàn)樗€是靜態(tài)代碼，不過(guò)為了更加快捷的把整個(gè)頁(yè)面全部都弄好，就先把main.html的代碼都按照同樣的方法轉(zhuǎn)換到config.html去，再做下一步工作，上面講到的才是一部分，而且很簡(jiǎn)單，那么再看看第二個(gè)模塊，可以用firefox的firebug看看：這里一個(gè)大框架里面包括了三個(gè)小模塊，左邊一個(gè)播放器不用說(shuō)可以作為一個(gè)pw嵌套模塊；但是中間熱點(diǎn)新聞那里就不一樣了，不過(guò)也很好分，上面熱點(diǎn)摘要可以作為一個(gè)pw嵌套模塊，下面的新聞列表可以作為一個(gè)pw嵌套模塊；最右邊模塊里也有幾個(gè)不同的內(nèi)容，一樣的模塊標(biāo)題作為一個(gè)pw嵌套： 圖文列表作為一個(gè)pw嵌套模塊，新聞列表作為一個(gè)pw嵌套模塊，下面廣告圖片也作為一個(gè)pw嵌套模塊： 3-3、模塊與模塊之間都已經(jīng)分清楚了，現(xiàn)在可以回到main.html文件來(lái)看代碼：先來(lái)看看播放器的靜態(tài)代碼，這個(gè)是左邊播放器的靜態(tài)代碼，要轉(zhuǎn)換成pw模塊，直接在外框div里面插入.就OK了。 嵌套好pw之后保存文件前臺(tái)刷新，返回main.html，代碼已經(jīng)生成好了，又一個(gè)模塊成功，因?yàn)椴シ牌鞔a特殊，所以再舉例一個(gè)帖子列表模塊： 這個(gè)也是一樣可以在.之間嵌套pw，保存好文件在瀏覽看看效果：怎么樣，效果出來(lái)了吧，做到這一步，就說(shuō)明已經(jīng)熟悉了pw的嵌套流程了，是不是很簡(jiǎn)單哦？看看main.html文件里的代碼成什么樣了吧：4、那幾個(gè)模塊代碼原來(lái)都已經(jīng)被給代替了，下面的內(nèi)容做法就可以用同樣的方式去嵌套咯，我們就此打住，開(kāi)始要把生成到config.html文件里的靜態(tài)代碼轉(zhuǎn)換成可循環(huán)管理的動(dòng)態(tài)效果咯，這就是我們要說(shuō)的第四個(gè)步驟： 4-1、首先從最簡(jiǎn)單的帖子列表開(kāi)始：但我們應(yīng)該怎么去做呢，到config.html文件里找到相應(yīng)的列表id：可循環(huán)代碼是什么呢，后臺(tái)都有詳細(xì)的介紹的：標(biāo)簽，一個(gè)代表是一個(gè)調(diào)用模塊： action：代表調(diào)用的類型。 subject:調(diào)用帖子 user:調(diào)用用戶 forum:調(diào)用版塊 tag:調(diào)用標(biāo)簽 image:調(diào)用圖片標(biāo)簽中間代表的是循環(huán)的數(shù)據(jù)4-2、既然已經(jīng)知道循環(huán)的代碼了，那么我們就可以開(kāi)始啦：因?yàn)槭翘恿斜砟K，轉(zhuǎn)換也比較簡(jiǎn)單Action=”subject” 調(diào)用的是帖子Num=”8” 調(diào)用8條.數(shù)據(jù),位置順序要寫(xiě)正確，否則也會(huì)出錯(cuò)url 路徑forumname,4 所在板塊，截取四個(gè)字符，實(shí)際是兩個(gè)中文字title,36 帖子標(biāo)題，截取36個(gè)字符，實(shí)際是18個(gè)中文字要想自己手動(dòng)添加，那么就點(diǎn)擊管理添加推送內(nèi)容，里面的可以自己摸索摸索，熟練了就感覺(jué)很有味道：不過(guò)要是像這種文字標(biāo)題，不需要做循環(huán)的就直接嵌套pw標(biāo)簽就ok了