經(jīng)常看到很多店鋪的背景和店招是同一張圖片，感覺渾然天成，羨慕那些自定義的個(gè)性化的店招，經(jīng)常被小而美的店鋪很所吸引，不用懂網(wǎng)頁設(shè)計(jì)、html代碼也可以裝修成這樣的店鋪。開始之前來看看對比效果。
設(shè)置之前
裝修完成之后：
店招和頁面背景是同一張圖片，風(fēng)格也統(tǒng)一。（為了體現(xiàn)導(dǎo)航欄是自己制作的，所以我呈現(xiàn)得比較大，自己在制作的時(shí)候可以根據(jù)店鋪的風(fēng)格適當(dāng)?shù)陌褜?dǎo)航欄部分縮小）。
一、PS處理
1.自己找一張或者是用PS制作一張背景圖， 圖片色彩最好跟店鋪風(fēng)格一致或者呈現(xiàn)相應(yīng)的節(jié)日氣氛的圖片，寬度建議1500px以上。因?yàn)楝F(xiàn)在很多電腦都是寬屏的，如果太小了，兩邊會(huì)出現(xiàn)本來背景的填充，根據(jù)這個(gè)店鋪是賣卡通服飾，并且在夏天，所以我找了色彩亮一點(diǎn)的圖片，把它另存為1。
2.以下是需要用PS進(jìn)行處理，啟動(dòng)PS軟件，打開這張圖片 。
新建一個(gè)圖層，畫一個(gè)950px*150px的矩形，并靠頂部居中。居中方式可以建參考線，我的背景圖片大小是1500px，建參考線1500-950=550,所以建一條距離左邊225px的參考線將矩形左邊與參考線對齊。
3.用剪裁工具剪下上半部分。
4.剪裁好的圖片是1500*150px，將藍(lán)色區(qū)域那塊隱藏（不要?jiǎng)h除，后面需要用到），保存圖片之后就得到如下圖，保存命名為2。
5.接下來將隱藏的藍(lán)色區(qū)域顯示，之后按照矩形的大小剪裁，剪裁出950*150px大小的圖
6.剪裁好之后隱藏藍(lán)色區(qū)域圖層，并將此圖片保存命名3
7.現(xiàn)在就可以按照自己的思路去設(shè)計(jì)導(dǎo)航欄了，內(nèi)容自選！如果不需要首頁的按鈕就不加進(jìn)去，如果喜歡QQ圖標(biāo)也可以自己加進(jìn)去。也可以根據(jù)自己店鋪所銷售的產(chǎn)品添加，不同的季節(jié)也可以換不同的導(dǎo)航按鈕進(jìn)去（我加了首頁、夏短袖純棉款、反季清倉、兒童款、成人款、收藏）。填充同色系的顏色。
8.加上文字和斜線，加上店鋪的名稱以及其他的一些信息。
9.接下來是最重要的，請耐心的看下去哦！
接下來我們利用PS中得切片工具將按鈕切片
10.接下來我們保存文件，選擇PS菜單欄上的存儲為Web和設(shè)備所用格式（快捷鍵：Shift+Alt+Ctrl+S），在彈出的窗口中格式選擇JPEG，品質(zhì)為100，保存的時(shí)候選擇HTML和圖像。
保存完畢之后查看是一個(gè)文件夾還有一個(gè)網(wǎng)頁文件。
11.images文件夾里就是用切片工具切開的圖片。（不同的按鈕最后行成的圖片數(shù)量不一樣）
12.接下來用記事本打開3.html文件。
13.打開記事本之后在里看到的是代碼。看到這些先別傻眼，你不需要認(rèn)識它們。按照以下的操作就很簡單。
14.先刪除<table 以上的內(nèi)容，7行代碼
15.后面的table>也刪除
16.剩下就是我們需要的代碼了。
17.現(xiàn)在先將images文件夾里的圖片上傳到圖片空間，注意不能修改圖片的名稱。
18.現(xiàn)在講以下畫紅色部分的代碼替換為剛剛上傳到圖片空間里對應(yīng)圖片的地址。
19.換的時(shí)候只要對應(yīng)的名字沒有錯(cuò)就不會(huì)出錯(cuò)了！例如 images/3_01.jpg就換成圖片空間里3_01的地址就可以了！
20.到此為止，我們在PS里的工作就完成了，接下來就是到自己的店鋪裝修中去了。先打開裝修頁面。
21.我們先設(shè)置店招，選“自定義店招”，將我們剛剛修改好的代碼復(fù)制到編輯框里，還要將高度設(shè)置為150px。
22.點(diǎn)擊保存之后店招的效果就出來了。
23.繼續(xù)點(diǎn)店招編輯，選中 “首頁”圖片，點(diǎn)擊編輯，在鏈接網(wǎng)址后面填寫上店鋪首頁的地址。
25.首頁的鏈接做好之后，其他的分類也按照同樣的方法去做。查找分類鏈接的方法可以到店鋪?zhàn)髠?cè)的分類導(dǎo)航里點(diǎn)擊相應(yīng)的按鈕，在地址欄復(fù)制做相應(yīng)的鏈接。
二、完成店招導(dǎo)航，繼續(xù)設(shè)置背景。
1、鼠標(biāo)移到“裝修”上面，選擇“樣式編輯”。
2、選擇背景設(shè)置。
3、在頁頭設(shè)置上傳圖2，就是我們在PS中處理存儲尺寸為1500*150的圖片2。選擇不平鋪，居中。
4、在“頁面背景”選項(xiàng)卡內(nèi)上傳圖1，就是我們一開始做到的那張?jiān)瓐D。
5、之后將頁面背景設(shè)置為白色，如果是其他顏色就設(shè)置為其他顏色，顯示前面的復(fù)選框需要打上勾！
6、系統(tǒng)到導(dǎo)航欄在裝修的時(shí)候是顯示的，發(fā)貨之后就看不到了。最終效果就完成了哦！一張圖片做了從店招到頁面的背景了。
注意：此時(shí)頁面背景只鋪滿了網(wǎng)頁的上半部分，也就是圖片高度的部分，如果想讓圖片鋪滿首頁所有的地方那么第四步的時(shí)候選擇“背景顯示”為縱向平鋪就可以。
設(shè)置之前
裝修完成之后：
店招和頁面背景是同一張圖片，風(fēng)格也統(tǒng)一。（為了體現(xiàn)導(dǎo)航欄是自己制作的，所以我呈現(xiàn)得比較大，自己在制作的時(shí)候可以根據(jù)店鋪的風(fēng)格適當(dāng)?shù)陌褜?dǎo)航欄部分縮小）。
一、PS處理
1.自己找一張或者是用PS制作一張背景圖， 圖片色彩最好跟店鋪風(fēng)格一致或者呈現(xiàn)相應(yīng)的節(jié)日氣氛的圖片，寬度建議1500px以上。因?yàn)楝F(xiàn)在很多電腦都是寬屏的，如果太小了，兩邊會(huì)出現(xiàn)本來背景的填充，根據(jù)這個(gè)店鋪是賣卡通服飾，并且在夏天，所以我找了色彩亮一點(diǎn)的圖片，把它另存為1。
2.以下是需要用PS進(jìn)行處理，啟動(dòng)PS軟件，打開這張圖片 。
新建一個(gè)圖層，畫一個(gè)950px*150px的矩形，并靠頂部居中。居中方式可以建參考線，我的背景圖片大小是1500px，建參考線1500-950=550,所以建一條距離左邊225px的參考線將矩形左邊與參考線對齊。
3.用剪裁工具剪下上半部分。
4.剪裁好的圖片是1500*150px，將藍(lán)色區(qū)域那塊隱藏（不要?jiǎng)h除，后面需要用到），保存圖片之后就得到如下圖，保存命名為2。
5.接下來將隱藏的藍(lán)色區(qū)域顯示，之后按照矩形的大小剪裁，剪裁出950*150px大小的圖
6.剪裁好之后隱藏藍(lán)色區(qū)域圖層，并將此圖片保存命名3
7.現(xiàn)在就可以按照自己的思路去設(shè)計(jì)導(dǎo)航欄了，內(nèi)容自選！如果不需要首頁的按鈕就不加進(jìn)去，如果喜歡QQ圖標(biāo)也可以自己加進(jìn)去。也可以根據(jù)自己店鋪所銷售的產(chǎn)品添加，不同的季節(jié)也可以換不同的導(dǎo)航按鈕進(jìn)去（我加了首頁、夏短袖純棉款、反季清倉、兒童款、成人款、收藏）。填充同色系的顏色。
8.加上文字和斜線，加上店鋪的名稱以及其他的一些信息。
9.接下來是最重要的，請耐心的看下去哦！
接下來我們利用PS中得切片工具將按鈕切片
10.接下來我們保存文件，選擇PS菜單欄上的存儲為Web和設(shè)備所用格式（快捷鍵：Shift+Alt+Ctrl+S），在彈出的窗口中格式選擇JPEG，品質(zhì)為100，保存的時(shí)候選擇HTML和圖像。
保存完畢之后查看是一個(gè)文件夾還有一個(gè)網(wǎng)頁文件。
11.images文件夾里就是用切片工具切開的圖片。（不同的按鈕最后行成的圖片數(shù)量不一樣）
12.接下來用記事本打開3.html文件。
13.打開記事本之后在里看到的是代碼。看到這些先別傻眼，你不需要認(rèn)識它們。按照以下的操作就很簡單。
14.先刪除<table 以上的內(nèi)容，7行代碼
15.后面的table>也刪除
16.剩下就是我們需要的代碼了。
17.現(xiàn)在先將images文件夾里的圖片上傳到圖片空間，注意不能修改圖片的名稱。
18.現(xiàn)在講以下畫紅色部分的代碼替換為剛剛上傳到圖片空間里對應(yīng)圖片的地址。
19.換的時(shí)候只要對應(yīng)的名字沒有錯(cuò)就不會(huì)出錯(cuò)了！例如 images/3_01.jpg就換成圖片空間里3_01的地址就可以了！
20.到此為止，我們在PS里的工作就完成了，接下來就是到自己的店鋪裝修中去了。先打開裝修頁面。
21.我們先設(shè)置店招，選“自定義店招”，將我們剛剛修改好的代碼復(fù)制到編輯框里，還要將高度設(shè)置為150px。
22.點(diǎn)擊保存之后店招的效果就出來了。
23.繼續(xù)點(diǎn)店招編輯，選中 “首頁”圖片，點(diǎn)擊編輯，在鏈接網(wǎng)址后面填寫上店鋪首頁的地址。
25.首頁的鏈接做好之后，其他的分類也按照同樣的方法去做。查找分類鏈接的方法可以到店鋪?zhàn)髠?cè)的分類導(dǎo)航里點(diǎn)擊相應(yīng)的按鈕，在地址欄復(fù)制做相應(yīng)的鏈接。
二、完成店招導(dǎo)航，繼續(xù)設(shè)置背景。
1、鼠標(biāo)移到“裝修”上面，選擇“樣式編輯”。
2、選擇背景設(shè)置。
3、在頁頭設(shè)置上傳圖2，就是我們在PS中處理存儲尺寸為1500*150的圖片2。選擇不平鋪，居中。
4、在“頁面背景”選項(xiàng)卡內(nèi)上傳圖1，就是我們一開始做到的那張?jiān)瓐D。
5、之后將頁面背景設(shè)置為白色，如果是其他顏色就設(shè)置為其他顏色，顯示前面的復(fù)選框需要打上勾！
6、系統(tǒng)到導(dǎo)航欄在裝修的時(shí)候是顯示的，發(fā)貨之后就看不到了。最終效果就完成了哦！一張圖片做了從店招到頁面的背景了。
注意：此時(shí)頁面背景只鋪滿了網(wǎng)頁的上半部分，也就是圖片高度的部分，如果想讓圖片鋪滿首頁所有的地方那么第四步的時(shí)候選擇“背景顯示”為縱向平鋪就可以。
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則
