Ecshop模板制作_第1頁
Ecshop模板制作_第2頁
Ecshop模板制作_第3頁
Ecshop模板制作_第4頁
Ecshop模板制作_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、自學(xué)ECshop模板制作教程第一部分：讀取這些內(nèi)容，將了解：      每個前臺頁面所對應(yīng)的模板頁面,模板文件的目錄結(jié)構(gòu)。      一些最基本的ECshop模板修改方法。      模板的路徑以及相關(guān)包含文件的方法(深入了解Dreamweaver模板制作)。      一些常用模板例子講解.模板存放路徑：ecshop/themes/xxxxx &

2、#160; 其中的 xxxxx 就是某一套模板，如系統(tǒng)一般會自帶的模板文件名叫做 default, (即：ecshop/themes/default )里面放的就是安裝好時的默認(rèn)模板,以下所有的說明都是針對默認(rèn)模板來講解.操作前提，將您當(dāng)前使用的模板調(diào)整為default模板,然后清空緩存。接下來我們進(jìn)入default目錄,可以看到以下文件目錄：images/        (存放模板中用到的圖片)library/        

3、;  ( 存放一些小模板文件及重復(fù)被用到的模板文件 )style.css        (模板樣式文件)index.dwt     (首頁的模板 index.php)goods.dwt   ( 商品顯示頁的模板 goods.php)*.dwt    (表示其它.dwt文件)蝦米？難道你不相信這些就是模板嗎？好，那我證明給你看看.我們把images里面的logo.gif文件的名字

4、,改為logo2.gif,然后我們隨便找一張gif圖片，起名為logo.gif放到images目錄中，然后我們刷新首頁?？吹?jīng)]？首頁logo被修改了。如果你覺得大小不合適，那么我們打開library目錄中的 page_header.lib 查看源代碼，然后搜索 images/logo.gif 然后看它后面 width="130" height="56"  把130和56改為相應(yīng)的值就可以了，到前臺刷新看看。好接下來我們用dreamweaver打開index.dwt文件,在源代碼中搜索 $page_title ，找到后，將$page_t

5、itle 修改為 超級無敵的大賣場. 然后到到瀏覽器前臺刷新，看看頁面有什么變化。蝦米？沒有發(fā)現(xiàn)嗎？看看瀏覽器頭部啊，呵呵，是不是網(wǎng)站的標(biāo)題被改變了？哈哈，對，$page_title就是網(wǎng)站標(biāo)題的標(biāo)簽 ( 注： 標(biāo)簽是從開始到結(jié)束哦，和屬于標(biāo)簽的一部分 ). 整個ECshop的模板就是一個一個這樣的標(biāo)簽組成了，控制網(wǎng)站內(nèi)容和數(shù)據(jù)的動態(tài)顯示。比如（$keywords )控制網(wǎng)站的關(guān)鍵字標(biāo)簽，$description :網(wǎng)站描述標(biāo)簽 ，( 這就是模板中的標(biāo)簽，每個標(biāo)簽都會對應(yīng)程序里面的一個值，網(wǎng)站運(yùn)行時模板引擎會來讀取模板頁面，然后把對應(yīng)的標(biāo)簽用對應(yīng)的值進(jìn)行替換，就顯示出我們看到的網(wǎng)站頁面了。&#

6、160;第二部分：這里我們真正開始做ECshop的模板了，( 不懂HTML的觀眾準(zhǔn)備好Dreamweaver哦 )1.   我們到/themes/default目錄中，把index.dwt改名為index_bak.dwt, 然后用Dreamweaver新建一個HTML文件,然后保存到/themes/default目錄中，命名為 index.dwt, 好，我們刷新前臺看看，哈哈，什么也沒有哦. 好，在我們新建的index.dwt中找到<title>,我們把<title>和</title>中間的內(nèi)容替換為:$page_title,在

7、<body>和</body>之間也放入一個$page_title, 刷新前臺看看.嘿嘿，看到什么了？網(wǎng)站標(biāo)題被打印出來了吧？2.   接下來我們選擇可視化界面編輯：然后在$page_title后面按Enter鍵換行,然后輸入: 商店公告：$shop_notice到瀏覽器刷新首頁刷新看看，呵呵。商店公告被調(diào)出來了，可以去網(wǎng)站后臺 系統(tǒng)設(shè)置->商店設(shè)置->網(wǎng)店信息->商店公告  修改內(nèi)容，然后到瀏覽器再刷新網(wǎng)站首頁看看，呵呵，商店公告是被動態(tài)掉出來的哦.3.   好繼續(xù)在$sh

8、op_notice后面按Enter鍵換行，然后輸入  網(wǎng)站快訊：foreach from=$new_articles item=article$article.short_title/foreach  注：換行的地方按Enter鍵哦,好刷新前臺看看 ，呵呵，網(wǎng)站快訊被調(diào)出來了哦。好我們再到網(wǎng)站后臺->文章管理->網(wǎng)站列表->添加文章，選擇 網(wǎng)站快訊這個分類，隨便添加一篇內(nèi)容，完成后前臺刷新看看。兩篇文章都被動態(tài)掉出來了哦。注釋：foreach from=$new_articles item=article : 循環(huán)的開始,/foreac

9、h  : 循環(huán)的結(jié)束$new_articles: 為要循環(huán)的東西，這里為網(wǎng)站快訊$article.short_title : 快訊標(biāo)題的標(biāo)簽?zāi)Ｊ綖椋篺oreach from=$post item=namecontent/foreachforeach from=$post item=name和/foreach標(biāo)簽中間可以任意添加要循環(huán)的內(nèi)容content(可以為任意的東西)，循環(huán)的次數(shù)受到 $post的限制（這里要填什么我都會告訴大家的.)name為當(dāng)前這個循環(huán)的對象。方便調(diào)用數(shù)據(jù)。以后這個循環(huán)我們會經(jīng)常的用到哦. 還是不懂也沒有關(guān)系，每次遇到我都會講哪里要怎么設(shè)置的，多用就

10、會了。我們也可以這么寫哦 , 注意： 在代碼編輯的視圖里面編輯<table>foreach from=$new_articles item=article<tr><td>$article.short_title</td></td>/foreach</table>哈哈，保存,刷新首頁看看，表格被一行一行的循環(huán)出來了哦。第三部分：接著上一節(jié)開始我們在網(wǎng)站快訊的循環(huán)后面，按 Enter鍵, 輸入:商品列表,接著建立一個2行3列的表格，寬度為70%, 表格邊框為1（為了讓大家看清楚 ),起HTML代碼如下<p>商品列表

11、</p><table width="70%" border="1">  <tr>    <td>1</td>    <td>2</td>    <td>3</td>  </tr>  <tr>    <t

12、d>4</td>    <td>5</td>    <td>6</td>  </tr></table>在這里，我們暫時先把下面這一行去掉(為了大家操作簡單)，變成 <p>商品列表</p><table width="70%" border="1">  <tr>   

13、0;<td>1</td>    <td>2</td>    <td>3</td>  </tr></table> 我們要循環(huán)的是列，也就是<td>,因此我們的循環(huán)標(biāo)簽應(yīng)該在<td> 和</td>的外面, 而2,和3應(yīng)該是循環(huán)出來的東西，也就時我模板里面只用保留 1 這個td就可以了，2 和3都要去掉，于是就變成了下面的樣子<p>商品列表</

14、p><table width="70%" border="1">  <tr>    <td>1</td>  </tr></table>好，現(xiàn)在我們開始加循環(huán)標(biāo)簽，我們要調(diào)用的是精品推薦商品, 代碼如下:<p>商品列表</p><table width="70%" border="1">  <tr>

15、;foreach from=$best_goods item=goods    <td>$goods.short_style_name</td>/foreach  </tr></table>注意了：foreach 表示下面的內(nèi)容屬于要進(jìn)行循環(huán)，from=$best_goods 表示循環(huán)的內(nèi)容來自$best_goods,($best_goods是精品商品推薦的標(biāo)簽 ) , item=goods 表示當(dāng)前循環(huán)這一次的對象叫g(shù)oods,你也可以改為其它的東東，當(dāng)然$goods.short_st

16、yle_name這個地方的goods也要相應(yīng)的改了哦,$goods.short_style_name 表示goods 這個對象的商品名稱.好了，我們保存，前臺刷新看一下啊。呵呵，精品商品被循環(huán)出來了吧？接著，為了大家應(yīng)用方便，我們把goods改為jingpinshangpin,代碼如下：<p>商品列表</p><table width="70%" border="1">  <tr>foreach from=$best_goods item=jingpinshangpin 

17、0;  <td>$jingpinshangpin.short_style_name</td>/foreach  </tr></table>好前臺刷新看看哦，呵呵，夷？如果你有很多的精品商品你會發(fā)現(xiàn)商品變了，因為精品商品是隨機(jī)調(diào)取出來的.好我們繼續(xù)完善他，給它加上鏈接對應(yīng)商品的鏈接,也就是添加<a>屬性, 代碼如下：<p>商品列表</p><table width="70%" border="1">  &

18、lt;tr>foreach from=$best_goods item=jingpinshangpin    <td><a href="$jingpinshangpin.url">$jingpinshangpin.short_style_name</a></td>/foreach  </tr></table>刷新瀏覽器，點擊鏈接看看鏈接到什么地方去了哦。呵呵! 鏈接到了每個產(chǎn)品自己的頁面了呢。說明：標(biāo)簽 $jingpinshangpin.

19、url 就是精品商品的商品鏈接的標(biāo)簽了，但是要記得哦，$jingpinshangpin 是你起的名字哦，item=$jingpinshangpin的這個 $jingpinshangpin改變了的話,這里也要跟著改變。接下來我們添加上商品的圖片哦 ,也就是增加一個<img>屬性 ,代碼如下：<p>商品列表</p><table width="70%" border="1">  <tr>foreach from=$best_goods item=jingpinshangpin

20、60;   <td><a href="$jingpinshangpin.url"><img src="$jingpinshangpin.thumb" border="0" /><br>$jingpinshangpin.short_style_name</a></td>/foreach  </tr></table>到前臺刷新瀏覽器看看看，呵呵，商品縮略圖也被調(diào)出來了。說明：標(biāo)簽 $jingpi

21、nshangpin.thumb 就是精品商品的縮略圖的標(biāo)簽了，但是要記得哦，$jingpinshangpin 是你起的名字哦，item=$jingpinshangpin的這個 $jingpinshangpin改變了的話,這里也要跟著改變。如果你已經(jīng)熟練理解和掌握了以上的步驟，那么下面就越來越清晰和容易了。接下來我們調(diào)取新品上市(標(biāo)簽為: $new_goods ）和熱賣商品( 標(biāo)簽為：$hot_goods) ，接著在剛才的代碼后面加上去就是了。我就不多講了哦，代碼如下<p>新品上市</p><table width="70%" border=&qu

22、ot;1"><tr>foreach from=$new_goods item=xinpinshangshi<td><a href="$xinpinshangshi.url"><img src="$xinpinshangshi.thumb" border="0" /><br>$xinpinshangshi.short_style_name</a></td>/foreach</tr></table> <

23、;p>熱賣商品</p><table width="70%" border="1"><tr>foreach from=$hot_goods item=remaishangpin<td><a href="$remaishangpin.url"><img src="$remaishangpin.thumb" border="0" /><br>$remaishangpin.short_style_name</

24、a></td>/foreach</tr></table>接著我們要一個Menu菜單，也就是做一個產(chǎn)品的分類列表出來。相信你現(xiàn)在至少知道分類的標(biāo)簽是什么，就知道要怎么做了吧，呵呵.分類的標(biāo)簽是：$categories代碼如下：<p>分類列表</p>foreach from=$categories item=fenlei   <a href="$fenlei.url">$</a>/foreach到前臺刷新看看哦，呵呵，分類列表被調(diào)取出來了

25、，我們試著在后臺多添加幾個一級分類，然后到首頁刷新看看。子分類的標(biāo)簽是對應(yīng)在父分類標(biāo)簽來調(diào)用的.代碼如下:<p>分類列表</p>foreach from=$categories item=fenlei   <a href="$fenlei.url"> $</a>     foreach from=$fenlei.children item=child     <br>

26、;- - <A href="$child.url">$|escape:html</A>     /foreach/foreach保存以后前臺刷新看看呢。呵呵，怎么樣？子分類也被調(diào)用出來了吧，當(dāng)然可以根據(jù)自己的需要，加上不同的表格或者圖片的修飾哦，子分類是放在了父分類標(biāo)簽的基礎(chǔ)上來調(diào)用的呢。不過如果你的分類已經(jīng)固定了很少改動，我建議還是做成死的，這樣可以做的更漂亮一些，比如每個分類直接是用圖片來代替。呵呵,我一般就是這么處理的，我除了商品和新聞是動態(tài)調(diào)用出來的以外，其它的都是做成固定

27、的死的，這樣就能夠設(shè)計的很漂亮，因為有時候受到代碼的限制，做出來不是很好看。(.說的好模糊，您能理解嗎？不能的話就告訴我 ).第四部分：今天我們來學(xué)習(xí)如何掉用某一個分類里面的產(chǎn)品。首先把 default文件夾中的category.dwt 的名字改為category_bak.dwt,然后新建一個category.dwt文件. 然后插入下面的代碼：foreach from=$goods_list item=goods<img src="$goods.goods_thumb" border="0"  /><br>$g

28、oods.goods_name/foreach注：$goods_list表示商品標(biāo)簽接著我們訪問這個頁面:(Ecshop的訪問網(wǎng)址/category.php?id=1)例如：http:/localhost/ecshop/category.php?id=1這樣我們就訪問到了分類id為1的商品了，我們也可以讓id=2就訪問到id = 2商品了，那如何看某個分類的id呢？我們看后臺： 商品管理-商品分類-就可以看到商品分類的列表，然后把鼠標(biāo)指上去選擇新窗口打開，就能在地址來里面看到goods.php?act=list&cat_id=1這樣子的信息，cat_id所等于的值就是這個分類的id了，

29、然后就可以拿來調(diào)取了，呵呵。好每次每次都把商品的列表調(diào)取出來了，那么如何調(diào)取某一個商品的頁面呢？首先把 default文件夾中的goods.dwt 的名字改為goods_bak.dwt,然后新建一個goods.dwt文件. 然后插入下面的代碼：商品圖片: <img src="$goods.goods_img" /><br><br>商品名稱：$goods.goods_style_name<br><br>商品貨號：$goods.goods_sn<br><br>商品品牌: $goods.goods

30、_brand<br><br>商品數(shù)量：$goods.goods_number 單位：$goods.measure_unit<br><br>添加時間：$goods.add_time<br><br>市場價格：$goods.market_price<br><br>本店價格：$goods.shop_price_formated<br><br>注冊用戶價格：$rank_price.price<br><br>注冊用戶價格：$rank_price.price<

31、br><br>注冊用戶價格：$rank_price.price<br><br>接著我們訪問這個頁面:(Ecshop的訪問網(wǎng)址/goods.php?id=1)例如：http:/localhost/ecshop/goods.php?id=1這樣我們就訪問到了商品id為1的商品了，我們也可以讓id=2就訪問到id = 2商品了，那如何看某個商品的id呢？我們看后臺：商品管理-商品列表-就可以看到商品品的列表，最前面那一欄就是商品的id了，然后就可以拿來調(diào)取了，呵呵。第五部分：今天我們學(xué)習(xí)一下如何在首頁調(diào)取某個分類的商品:注意了，這里的修改有一些麻煩了哦：首先

32、你需要下載一套新的模板，比如blueksy 上傳到模板目錄 /themes/   也就是 /themes/bluesky,然后進(jìn)入網(wǎng)站后臺->模板管理->模板選擇，選擇bluesky, 選擇OK,然后到網(wǎng)站后臺 -> 模板管理 -> 設(shè)置模板 -> 分類下的商品 ( 點擊分類下的商品前面的+號，然后選擇“主區(qū)域中間“，序號默認(rèn), 商品分類隨便選擇一個就可以了", 然后填寫顯示的條數(shù),填寫好后點擊確定提交，( 注意: 有的朋友可能會遇到提交不了，是因為權(quán)限問題，需要把bluesky的模板權(quán)限改,然后再重新提交一次)。這里我增加

33、了兩個,的數(shù)據(jù)是：主區(qū)域空間 0 手機(jī)  6                                          主區(qū)域空間  

34、;0 手機(jī) 6我們在這里增加了多少條記錄，對應(yīng)首頁就可以調(diào)取多少個分類。好接下來我們恢復(fù)模板為原來我們改過的default模板在我們以前做的基礎(chǔ)上增加如下代碼(也就是在原來代碼的下面加上):<p>第一個分類的<p><?php $this->assign('cat_goods',$this->_var'cat_goods_1'); ?><?php $this->assign('goods_cat',$this->_var'goods_cat_1'); ?><

35、;?php echo $this->fetch('library/cat_goods.lbi'); ?><p>第二個分類的<p><?php $this->assign('cat_goods',$this->_var'cat_goods_3'); ?><?php $this->assign('goods_cat',$this->_var'goods_cat_3'); ?><?php echo $this->fetch(&#

36、39;library/cat_goods.lbi'); ?>這里要注意了, 紅色的 1 代表你要顯示分類的分類的ID, 將它改為你需要的 剛才添加的ID就可以了紅色的 3 代表你要顯示分類的分類的ID, 將它改為你需要的 剛才添加的ID就可以了好了，保存,前臺刷新看看啊,呵呵.是不是我們要的分類就出來了,看樣子改起來很簡單哦，不過每次都是這樣要操作兩個模板才能改還是有些麻煩,呵呵，等到高手進(jìn)階的時候再來講怎么做。仔細(xì)一看還是有點不好的地方哦，就是樣子不好看啊，對不對？是默認(rèn)模板的樣子，沒有關(guān)系啦，我們打開 librasy目錄中的cat_goods.lbi文件修改就可以了。修改要注

37、意的地方上門講過了，不過這里還是要再說明一些小問題cat_goods.lbi的代碼如下：<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><div class="title-div"><img src="./images/green_arrow.gif" width="37" height="37" alt="" border="0&

38、quot; style="vertical-align:middle" /><a href="$goods_cat.url">$goods_|escape:html</a></div><div class="content-div">  <!-foreach from=$cat_goods item=goods->  <table border="0" cellpadding="

39、3" cellspacing="1" class="goods-table" style="float: left">    <tr>      <td align="center"><a href="$goods.url"><img src="$goods.thumb" border="0" alt="$|escape:html" class="thumb" /&

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論