拍拍網(wǎng)寶貝描述模板在各個(gè)賣(mài)家聽(tīng)來(lái)都非常熟悉了吧，店鋪裝修不可缺少的部分哦，不但每個(gè)寶貝頁(yè)面統(tǒng)一，就連你上架排板的功夫也省掉了，的確是一個(gè)很好的工具。前些日子想換個(gè)模板用用，搜索了下網(wǎng)上賣(mài)模板的店鋪好多，各式各樣的都有，不過(guò)如果想要自己滿(mǎn)意的，合自己商品風(fēng)格搭配得好的就非常難找了，若是要定制一個(gè)，還得花費(fèi)金錢(qián)。想著想，不如自己DIY一個(gè)吧，在淘寶上可是獨(dú)一無(wú)二的哦。
自己是個(gè)業(yè)余愛(ài)好者，所以做起來(lái)效果肯定沒(méi)有專(zhuān)業(yè)賣(mài)家那么好，經(jīng)過(guò)一天的試驗(yàn)，就弄出現(xiàn)在自己使用的模板。嘿嘿雖然不是大師級(jí)不過(guò)在這里我想把我的經(jīng)驗(yàn)和制作步驟介紹給一些也想DIY模板的賣(mài)家們，畢竟自己做的是網(wǎng)絡(luò)生意，這方面的知識(shí)懂的話對(duì)自己也有幫助的哦！
第一次寫(xiě)教學(xué)帖寫(xiě)得不好，還請(qǐng)各淘友指正給出多多建議哦~~
準(zhǔn)備工作：photoshop Dreamweaver 很好找的兩個(gè)軟件，功能強(qiáng)！
1、打開(kāi)PS軟件，按CTRL+N新建一圖像，以新版旺鋪的寶貝描述模板尺寸定義就是：寬度710像素，高度沒(méi)特別要求，不過(guò)后面需要編輯一些文字，所以就定義為800像素，分辨率就定義為300像素/英寸。點(diǎn)擊確定按鈕后新建圖像完成。
（圖1）
2、新建一個(gè)新圖層，控制菜單選擇：圖層--新建--圖層。圖層名稱(chēng)改為“背景”，這時(shí)在右下角的圖層窗口能看到新建的圖層。（圖2） 
（圖2） 
（圖3） 
（圖4）
選擇左邊工具菜單的選區(qū)-矩形選區(qū)（圖3），在新建的圖層上勾畫(huà)一個(gè)區(qū)域作背景色，在控制菜單點(diǎn)擊中（圖4），彈出窗口選擇自己喜歡的顏色（圖5），這里以橙色為例，點(diǎn)擊確認(rèn)。
#p#分頁(yè)標(biāo)題#e#
（圖5）
選擇工具菜單的“油漆桶工具”在選區(qū)填充顏色（圖6）。填充完成按CTRL+D取消選擇。
（圖6） （圖7）
現(xiàn)在對(duì)背景進(jìn)行小小的美化，在控制菜單選擇：濾鏡--紋理--紋理化。紋理：畫(huà)布?？s放、凸現(xiàn)和光照方向按照個(gè)人喜好調(diào)整，調(diào)整過(guò)程中帶有預(yù)覽的效果（圖7）。下一步選擇控制菜單：圖層--圖層樣式--外發(fā)光，調(diào)整下幾個(gè)參數(shù)到滿(mǎn)意，圖里參數(shù)供僅供參考（圖8），背景制作完成。
（圖8）
3、重復(fù)2里步驟新建一白色圖層為寶貝描述的背景色。選區(qū)要比背景圖層稍微小一點(diǎn)，防止遮擋住背景圖層?？梢越o寶貝描述的背景稍作美化，體現(xiàn)3D效果增加一個(gè)投影，具體方法是選擇控制菜單：圖層--圖層樣式--投影，彈出窗口根據(jù)實(shí)際情況調(diào)整參數(shù) （圖9），寶貝描述背景制作完成。（效果圖1）
（圖9）
4、現(xiàn)在我們開(kāi)始為寶貝描述模板制作分類(lèi)欄，我這里只設(shè)置了4個(gè)分類(lèi)，各位賣(mài)家可以根據(jù)自己店鋪的不同，增加或減少分類(lèi)，不影響后期顯示效果。#p#分頁(yè)標(biāo)題#e#
我們?yōu)楦鱾€(gè)分類(lèi)各建一個(gè)新圖層，建圖層方法前面已介紹過(guò)，不再重復(fù)。在一新圖層我們進(jìn)行文字編輯，在工具菜單選擇“文字工具”（圖10），放在要編輯的地方，開(kāi)始輸入分類(lèi)信息，如：商品展示。在控制菜單下有屬性欄，大家對(duì)編輯文字已不陌生了吧，那里有文字樣式、大小顏色等等可以根據(jù)自己需要作調(diào)整（圖11）。
然后我們?cè)谖淖值紫滦陆ㄒ恍聢D層，用鼠標(biāo)點(diǎn)畫(huà)筆工具不放會(huì)彈出選項(xiàng)（圖12），選擇鉛筆工具（很多工具欄都有多重工具屬性，記得用該方法切換不同的工具哦），按住SHIFT鍵畫(huà)一條橫線作分隔線，若覺(jué)得畫(huà)后位置有偏可以使用移動(dòng)工具做調(diào)整（圖13）。分類(lèi)欄制作完成。再重復(fù)以上步驟完成其他的分類(lèi)欄的制作。
（圖10） 
（圖12） 
（圖13）
（圖11）
完成后效果圖（下半部缺?。?img class="ZoominCursor" alt="" width="622" src="/upimg/allimg/071227/07585113.jpg" />
前4步驟完成整體效果圖：
#p#分頁(yè)標(biāo)題#e#
5、現(xiàn)在我們?cè)賹?duì)頁(yè)面增添一點(diǎn)效果，選擇“寶貝描述背景”圖層，新建一圖層，命名為楓葉。選擇畫(huà)筆工具（方法前面已有介紹），在屬性欄畫(huà)筆樣色選擇“楓葉”（圖14），畫(huà)筆大小、不透明度稍微調(diào)?。▓D15），在邊框和分類(lèi)爛處輕輕勾畫(huà)出楓葉飄散的效果，怎么勾畫(huà)才好看那得看你的熟練度啦，如果畫(huà)得不好可以在點(diǎn)歷史記錄，重新勾畫(huà)。反復(fù)試幾遍，效果就出來(lái)了（圖16）。
（圖14） （圖16）
（圖15）
6、模板的頁(yè)面制作完成了，現(xiàn)在我們開(kāi)始來(lái)制作寶貝描述的模板。首先我們先計(jì)算自己的商品圖片的尺寸?，F(xiàn)在旺鋪的寬是710像素、普通的是890像素。以710像素為例，那么我們的商品圖片就得符合要求：寬度小于710像素，計(jì)算寶貝描述的邊框，在650像素以下為宜。由于我設(shè)置的圖片都是寬550像素的，算算710-550=160、160/2=80，那么我需要的邊框的寬度可以設(shè)置為80像素。
首先，把剛才設(shè)計(jì)好的圖像保存并另存為一張JPG格式的圖片，名字可以自己設(shè)置。然后關(guān)閉編輯的圖像，打開(kāi)剛才保存的JPG格式的圖片。選擇工具菜單的“裁剪工具”（圖17），把最頂端的一部分包括其中一個(gè)分類(lèi)欄裁剪出來(lái)（雙擊裁剪）（圖18），完成后使用另存為保存，命名為“頂”，利用右邊歷史窗口初始化圖像文件（圖19）。
（圖17） 
（圖19）
（圖18）
重復(fù)上面操作把各個(gè)分類(lèi)欄和底部裁剪后保存為新圖像文件。（分類(lèi)欄裁剪后的寬度都為710像素，高度不限）。
現(xiàn)在開(kāi)始制作模板的兩側(cè)的圖像，跟上面一樣，把圖象中間空白處裁剪出來(lái)。 （圖20）
（圖20）
不過(guò)我們要用到的只是兩邊而且，接下來(lái)調(diào)整下圖像。選擇控制菜單中圖像--畫(huà)布大小。彈出窗口，修改畫(huà)布寬度，高度不影響，可以不考慮，定位方面點(diǎn)擊九宮格的左邊那格，寬度設(shè)為80像素，確認(rèn)會(huì)提示需要裁剪，點(diǎn)“是”完成裁剪（圖21）。剪完后和前面一樣是另存新圖像。重復(fù)把右邊按照相同方法裁剪下來(lái)，九宮格位置選右邊那格就可以，其他相同。 #p#分頁(yè)標(biāo)題#e#
（圖21）
這樣我們就完成了制作模板背景圖片的前期工作了。接下來(lái)進(jìn)入Dreamweaver軟件，新建一空白HTML文件。
1、選擇控制菜單的：插入--表格。彈出窗口中，表格寬度設(shè)置為710像素，列數(shù)為3，行數(shù)因之前制做分類(lèi)欄的不同，做調(diào)整。我設(shè)置的分類(lèi)欄有4個(gè)，行數(shù)需設(shè)置為9；如果分類(lèi)欄有5個(gè)，行數(shù)就應(yīng)該為11，依此類(lèi)推（圖22）。
（圖22）
2、表格出現(xiàn)在空白處，首先設(shè)置表格各列的寬度，用鼠標(biāo)點(diǎn)擊“下三角”在彈出對(duì)話框“選擇列”（圖23），在表格的屬性欄找到單元格，其中“寬”的屬性是空白，我們給它定義為80。再為其他兩列設(shè)置列寬，分別為550、80。
（圖23）
這時(shí)候選擇整個(gè)表格框可以看到各列定義的數(shù)值（注：括號(hào)內(nèi)的數(shù)值暫不打理）（圖24）。
（圖24）
3、合并奇數(shù)行的單元格，類(lèi)似EXCEL的合并單元格，具體方法是：選擇需要合并的各小單元格，點(diǎn)鼠標(biāo)右鍵彈出窗口中選“表格”--“合并單元格”（圖25）。
（圖25）#p#分頁(yè)標(biāo)題#e#
4、把背景圖片插入對(duì)應(yīng)的單元格內(nèi)，圖片就是前面制作完成的各分類(lèi)欄圖片和底部圖片。選擇需要插入圖像的單元格，在控制菜單找到：插入--圖像。把各圖像對(duì)應(yīng)插入到各單元格。（圖26）
（圖26）
5、左右兩個(gè)邊框圖片和上面插入的方法不同哦！必須使用背景來(lái)顯示。選擇需要插入的小單元格，在屬性欄的背景右邊有一個(gè)文件夾的小標(biāo)（圖27），點(diǎn)擊把對(duì)應(yīng)圖片（如果你選擇左邊框單元格，那就必須插進(jìn)左邊框圖像）。重復(fù)地把左右兩邊所有的小單元格的插滿(mǎn)。
（圖27）
6、中間部分沒(méi)有圖像的單元格就是我們要放寶貝圖片和描述說(shuō)明的地方了。空間太小怎么辦？我們把鼠標(biāo)定位在表格邊框處，就可以拉動(dòng)大小了。（圖28）
（圖28）
7、現(xiàn)在還要調(diào)整下，選擇需要插入寶貝圖片和描述說(shuō)明的單元格，把屬性欄的垂直選擇“頂端”（圖29），這樣焦點(diǎn)就在左上角了，方便我們?nèi)蘸蟮木庉嬇?，所以這里不能忽略。
（圖29） 
（圖30）
#p#分頁(yè)標(biāo)題#e#
8、在次選擇整個(gè)表格，在屬性欄里的“填充、間距和邊框”數(shù)值全部改為0（圖30） 。點(diǎn)F12保存文件試下預(yù)覽效果。出現(xiàn)下圖說(shuō)明我們就快完成了。。嘿嘿~（下半部圖片截屏不下，圖片稍微大了）
9、確認(rèn)顯示出來(lái)圖片沒(méi)有斷截的話那說(shuō)明圖片都裁剪得很好，現(xiàn)在圖片的連接是在本地的，如果想要外網(wǎng)的人也能看到圖片，就必須得上傳到網(wǎng)絡(luò)相冊(cè)里。網(wǎng)絡(luò)相冊(cè)有好多個(gè)，我就不多作介紹，最好是找個(gè)穩(wěn)定點(diǎn)的網(wǎng)站，這樣才不怕日后出現(xiàn)問(wèn)題。
10、最后一步了，更換圖片地址。由于之前用的圖片都是本地的，現(xiàn)在我們把上傳后的圖片地址代替原來(lái)的地址。使用拆分的界面能很方便找到我們要修改的地方。現(xiàn)在我們來(lái)修改頂端的圖片，點(diǎn)擊圖片在上面的代碼窗口立即找到了圖片的位置（img scr=" "空格處為圖片地址)，黑色的部分就是圖片的地址，不包括前后的雙引號(hào)。我們復(fù)制好相冊(cè)里頂端圖片的地址后，把黑色選區(qū)的地址更換為網(wǎng)絡(luò)地址。（相信每個(gè)賣(mài)家都能很熟悉怎樣運(yùn)用網(wǎng)絡(luò)上圖片的地址吧，嘿嘿）
兩側(cè)的背景圖片也一樣需要替換，不過(guò)有些不同哦。語(yǔ)句為：background=" "。而且得分清楚左邊框和右邊框的地址。修改過(guò)程中可以按F12查看修改后效果的。
修改后的圖片在本地讀取不到，所以在原來(lái)設(shè)計(jì)窗口中就變成下圖LOGO，這點(diǎn)請(qǐng)別擔(dān)心，網(wǎng)絡(luò)上是能看得到圖片的。#p#分頁(yè)標(biāo)題#e#
全部修改完后，就大功告成了，只要把代碼復(fù)制下來(lái)，貼在源文件編輯“寶貝描述”里面，就可以看到這些圖片啦。由于背景圖是可以拉伸的，所以對(duì)最大高度沒(méi)有限制哦，你可以放好多好多的圖片進(jìn)去也不影響。
大家如果想看看制作出來(lái)的效果，可以到我店里來(lái)看看。自己是個(gè)業(yè)余的制作者哦，比起專(zhuān)業(yè)的大師級(jí)人物那可是差好多好多。不過(guò)自己DIY出來(lái)的東西聽(tīng)到每個(gè)朋友的夸贊，偶是很開(kāi)心的。網(wǎng)絡(luò)是萬(wàn)千世界，個(gè)性化的店鋪設(shè)計(jì)更能展現(xiàn)你店鋪的特色。
