淘寶通欄制作教程
158****1921樓主|2022-07-22|17:22|發(fā)布在分類 / 淘寶規(guī)則|閱讀：4655
淘寶通欄制作教程，這個(gè)教程很簡(jiǎn)單，裝修老手就呼嘯而過(guò)吧，呵呵主要是給新手看的。
因?yàn)樵谡搲戳瞬簧偾拜叺奶影l(fā)現(xiàn)，好像也沒(méi)那么難嘛，當(dāng)然我也沒(méi)涉及到深層次的東西呵呵，基本上簡(jiǎn)單裝修也就PS和Dream weaver 兩個(gè)工具簡(jiǎn)單處理下嘛，開(kāi)工之前把前輩的指導(dǎo)看上幾遍就覺(jué)得原來(lái)就這樣，在后來(lái)的裝修過(guò)程中發(fā)現(xiàn)，對(duì)于我們這些不懂裝修的店主來(lái)說(shuō)，技術(shù)不是最難的，關(guān)鍵還是要有耐心堅(jiān)持??！今天要介紹的是店鋪第一眼的通欄效果，當(dāng)然是假通欄，看見(jiàn)有前輩裝修出了真通欄，不過(guò)我比較愚笨，就是搞不出來(lái)！先上一張我自己的效果圖我的挑選的圖片其實(shí)不好，全部有顏色且不是白色，如果新裝修的話盡可能挑白色的圖片，或者是要裁剪的地方是白色就行，那種效果就真是以假亂真的通欄了！第1步準(zhǔn)備一張你要用的圖片，是一張被分成3張圖之前的完整圖片哦，規(guī)格的話可以自己決定，但是整個(gè)首頁(yè)的寬度是950（單位是像素）既定，也就是你準(zhǔn)備的圖片是950寬。
如果準(zhǔn)備的圖片950×550，頁(yè)頭高150，下面的圖片高就是400，當(dāng)然高你可以選擇其他數(shù)值。
第2步你要做的就是把他切成3部分，這里要用到PS的切片。
打開(kāi)PS，然后打開(kāi)你的圖片，找到切片按鈕，不同的版本可能切片圖標(biāo)不太一樣，我的是CS4版本。
切完后點(diǎn)文件，存儲(chǔ)為WEB和設(shè)備所用格式，格式為jpeg,品質(zhì)72，保存類型選擇圖片和HTML，完了會(huì)生產(chǎn)一個(gè)網(wǎng)頁(yè)文件和文件夾，里面是3張被切開(kāi)的圖片。
這時(shí)候最好先按ctrl+R調(diào)出刻度尺，一遍精準(zhǔn)切片，先切頁(yè)頭950×150，下面左邊是200×400，右邊是750×400。
這里要說(shuō)明的是，其實(shí)下面的圖片總寬是940而不是950，因?yàn)橹虚g會(huì)有10的間隔，你可以切了頁(yè)頭把頁(yè)頭先保存，然后把下面的圖片調(diào)整成寬940再切，不過(guò)其實(shí)關(guān)系不大，950寬的圖切出來(lái)后會(huì)有微微變形，但是基本上不會(huì)感覺(jué)到。
第3步如果就是3張簡(jiǎn)單的圖片，要裝修店鋪非常簡(jiǎn)單，把圖片分別上傳就OK了，先上傳頁(yè)頭，然后左右兩邊都添加自定義框分別上傳另外2張圖，不過(guò)這2張圖要先存到空間。
不過(guò)我想大部分人都不會(huì)讓這么大一個(gè)“門戶”就只是一幅畫(huà)，我們總要放點(diǎn)什么進(jìn)去啊，放什么呢，就是放按鈕了。
大家可以看到我的首頁(yè)左下框中有收藏兩個(gè)字，拿個(gè)就是收藏的按鈕了，不過(guò)我比較喜歡簡(jiǎn)單，就放了一個(gè)按鈕和一些字，下面就以這個(gè)按鈕為例，其他步驟一樣。
這樣我們要先回到第二步，打開(kāi)要加按鈕的圖片，找到T圖標(biāo)的按鈕，然后輸入收藏，完了點(diǎn)切片工具，選擇收藏兩個(gè)字，這里圖片會(huì)被切成好幾塊，不用管。
如果你添加好幾個(gè)按鈕，就輸入幾個(gè)字框，然后切片的時(shí)候選擇全部，點(diǎn)右鍵的劃分切片，就可以平均切等分。
這里水平切成3等分然后同樣選擇保存為WEB和設(shè)備所用格式，被無(wú)情的切成5片了。
接下去是重點(diǎn)，這里要用到dreamweaver這也有幾個(gè)版本，用它打開(kāi)保存的網(wǎng)頁(yè)文件，不是圖片哦，這是打開(kāi)后的界面。
可以看到好幾排這樣類型的文字
紅色部分就是圖片地址，這時(shí)候我們要先把我們切的圖片一張一張全部上傳到空間，然后把紅色的地址換成圖片上傳后的網(wǎng)絡(luò)地址。
切碎的圖片要成為功能按鈕，只要我們給它加入鏈接地址就行了，點(diǎn)擊下方的屬性，看到這樣的界面這里有一個(gè)源文件和鏈接框，源文件就是圖片地址，連接框就是圖片要鏈接的地址，比如收藏的鏈接地址，我們可以到首頁(yè)找，右鍵點(diǎn)擊收藏選擇屬性，可以看到鏈接地址URL，復(fù)制到連接框，這樣點(diǎn)收藏的時(shí)候就會(huì)收藏店鋪了。
其他圖片步驟一樣。
填入相對(duì)應(yīng)的地址就行了最后就是上傳制作的好的圖片了，把剛才的圖片都處理好后，就要用到上面的源代碼了，
|  |
 |
通欄的效果是好，不過(guò)很難做到，假通欄相對(duì)來(lái)說(shuō)還是比較容易的，主要讓左右兩邊保持同一個(gè)水平。
下面是一段左邊空白源代碼，可以用在店鋪保持左右平衡
