大家可以先看一下效果
這次我給大家的除了教程之外還會提供素材包給大家，大家可以直接應(yīng)用上去！
素材包里包含的東西包括（使用到的圖片和導(dǎo)航源文件以及代碼），有需要的請到我店鋪查看下載連接，免費(fèi)下載！
好了，現(xiàn)在開始教程吧，我的教程是以第一款（綠色的湖）效果為例的，其它的應(yīng)用方法是一樣的！
這是原來的效果
一、我們現(xiàn)在去找一張圖片，就是要做成底圖的圖片，寬度建議為1500以上，因為現(xiàn)在很多電腦都是寬屏的，如果太小了，兩邊會出現(xiàn)背景的填充了，我找到的是下面這張圖片！這張圖片命名為1
二、以下是PS處理，懂的可以了解下，不懂的可以跳過！
1、用PS打開這張圖片
2、然后新建一個圖層，畫一個950PX*150PX的矩形！并靠頂部居中！
3、用裁剪工具剪下上面部分
4、裁剪好的圖片尺寸是1500*150的，然后將那塊紅色的矩形隱藏（不要刪除，后面還有用），保存圖片就得到了下面這個圖片，你將它命名為2
5、接下來將隱藏的矩形顯示，之后按照矩形的大小裁剪，裁剪出950*150的效果圖
6、裁剪好的圖片效果就是下面這張了！將其命名為3
7、現(xiàn)在就按照自己的意思去設(shè)計自己喜歡的導(dǎo)航咯，內(nèi)容自己選，你不喜歡首頁按鈕，不做就可以了，你如果需要聯(lián)系QQ的按鈕也都可以自己加進(jìn)去的，我現(xiàn)在做了的分別有（首頁、寶貝分類、關(guān)于我們、店鋪動態(tài)、友情鏈接和收藏）
效果如下
7.1、以上效果做的過程為，先畫一個矩形，用編輯→變形→傾斜效果將其做成傾斜的，透明度為44%，陰影顏色跟前色相同，達(dá)到以下效果
7.2、在加上斜線和文字就完成效果了！
8、接下來就是最重要的步驟了，想學(xué)的要耐心看下去哦！
利用PS的切片工具將導(dǎo)航中的每一塊按鈕都分別切開，切好效果如下
9、接下來我們就保存它，選擇PS菜單欄上的文件→儲存為Web所用格式（快捷鍵：shift+ctrl+aly+s），在彈出的窗口中，格式選為jpeg 品質(zhì)為最高100！
10、單擊下面的“儲存”，在彈出的窗口中，將格式選為“HTML 和圖像”然后再保存！
11、保存下來有一個images文件夾，還有一個網(wǎng)頁文件！
12、images文件夾里面就是切開的圖片！
13、我們用記事本工具打開3.html文件（網(wǎng)頁文件）
14、我們可以看到一切代碼，看到這些先別頭疼，其實(shí)很簡單的，按照我說的做就可以了！
14.1、先刪除< table 這部分以上的內(nèi)容，也就是刪除前面7行代碼！
14.2、后面……table>以后的內(nèi)容也刪除掉，也就是最后的3行代碼！
14.3、剩下的就是我們需要的代碼！
14.4、現(xiàn)在先將images文件夾里的圖片上傳到淘寶的圖片空間里！名字不要改！
14.5、將代碼中紅線標(biāo)出的本地圖片連接換成剛剛上傳上去的圖片連接！
14.6、換的時候只要對應(yīng)的名字去換就不會錯了，比如images/3_01.jpg就換成圖片空間里3_01的圖片，全部換好后的效果如下
15、這樣我們PS中要做的事情就全部做好了，接下來就要到自己的店鋪里去裝修了！先打開裝修頁面
16、我們先設(shè)置店招，選為“自定義招牌”，然后按下工具欄中的“源碼”按鈕，之后將剛剛我們修改好的代碼全部復(fù)制到編輯框內(nèi)！還有將高度設(shè)置為“150”！
17、這樣保存店招就出來效果了！
18、然后在點(diǎn)店鋪編輯，選中“首頁”圖片
19、再按下工具欄中的“插入連接”，輸入你的店鋪地址，按確定！
20、這樣做好之后，首頁按鈕就起作用了，其它分類都是這樣添加就可以了！，找連接的方式很簡單，只要你在原來的店鋪中單擊相應(yīng)的按鈕，打開頁面后復(fù)制那個地址就對了！，比如“寶貝分類”，你單擊一下寶貝分類之后就會進(jìn)入寶貝分類的頁面，然后復(fù)制地址欄里的連接，拿來做超鏈接就可以了！
二、店招里的導(dǎo)航做好了，最后將兩邊的背景那些添加上就可以了，我們繼續(xù)往下看！
?。?、鼠標(biāo)移到左上角的“裝修”上面，會彈出下拉框，我們選擇“樣式編輯”
2、再選擇“背景設(shè)置”
3、在“頁頭設(shè)置”選項卡內(nèi)上傳圖2，就是一開始我讓你命名為2的圖片，尺寸是1500*150的！并設(shè)置不平鋪，且居中！
4、在“頁面設(shè)置”選項卡內(nèi)上傳圖1，也就是我們一開始找到的那張原圖！
5、之后還要將頁面背景色設(shè)置為白色，如果你的是別的顏色就設(shè)置成別的顏色就可以了！記得要勾上那后面的“顯示”！
6、再回來看效果就很顯著了，那個系統(tǒng)的導(dǎo)航在裝修頁面中是顯示的，你發(fā)布之后是看不到的！
7、接著我們在內(nèi)容區(qū)加個自定義模塊，標(biāo)題不顯示，在內(nèi)容編輯區(qū)里面按7次回車鍵（俗稱：換行）【作用：為了內(nèi)容不擋住背景圖，如果你的背景圖不大可以不做這步！】，之后鼠標(biāo)指針就到了下圖的位置，按保存就完成了！
8、完成后預(yù)覽或發(fā)布看最終效果！
重要提醒：有白邊，出現(xiàn)錯位等問題的解決方法！
三、效果素材下載連接在店鋪中
----------------------------------
第一套效果圖------給予喜歡安靜的你
第二套效果圖------給予喜歡朦朧的你
第三套效果圖------給予喜歡芬芳的你
第四套效果圖------給予喜歡氣派的你
第五套效果圖------適合兒童產(chǎn)品類店鋪
第六套效果圖------適合女裝類店鋪
第七套效果圖------金碧輝煌
素材下載地址（復(fù)制打開）：http://115.com/lb/5lbq66uk
注意：
1.如果在整修過程中遇到任何問題可以跟帖留言，我們有空會盡力幫你處理！
2.由于旺旺為工作所需，所有發(fā)到旺旺的信息都不會給予理睬，請諒解！謝謝支持！
