錯過偶然新浪微博：@電商聯(lián)合營銷淘寶店鋪快捷裝修教程升級旺鋪專業(yè)版進入淘寶裝修頁面，點擊右上角，一鍵升級專業(yè)版；淘寶對1鉆以下的賣家扶持計劃，升級和使用專業(yè)版無需費用；1鉆以上賣家使用專業(yè)版每月需繳納50元。專業(yè)版優(yōu)勢：更多的頁面布局方式可實現(xiàn)950寬的自定義內(nèi)容區(qū)（很重要，這是接下來我們課程的關(guān)鍵）裝修風(fēng)格在開始裝修前，先想后自己想要怎么樣的風(fēng)格如：可愛、酷炫、時尚、簡約……風(fēng)格想好以后，我們來執(zhí)行第一步，選模板也許你們會問，我們不是學(xué)習(xí)自己裝修嗎？為什么又讓我們選模板呢？接下來看……后面更精彩先打開我們的店鋪裝修頁面，點擊“裝修—模板管理—裝修市場”進入裝修市場，開始選擇我們想要的風(fēng)格我個人會建議大家使用童裝或女裝類目的模板色彩簡單，經(jīng)典色會比較適合模板試用當(dāng)你選中了比較滿意的模板后，你可以選擇試用鼠標(biāo)移動到你要試用的模板上，點擊模板，彈出對話框點擊試用后，我們可以選擇自己的店鋪為試用店鋪完成上面的操作后，你已經(jīng)看到了你家店鋪使用這個模板后的效果了，這里有兩種方式：第一種，直接先把你要的模塊里面的商品添加好第二種，只是需要部分內(nèi)容，比如只想要這個模板的分隔符

完成上面這些動作后，我們開始用截圖工具截圖，例如我想要個四方格的內(nèi)容，那接下來我們就先截下這個圖片注意事項：全屏的寬度是950PX盜用精髓PS：起這么一個“盜用精髓”的標(biāo)題，我個人怎么感覺后面好多雙仇視的眼睛在看著我

^&^言歸正傳，回到上章所說的截圖以后，我們要做些什么？第一步，先將圖片放進我們的PS中，別問我PS是什么？不懂的先去買塊豆腐撞兩下第二步，將你不想要或是想改的地方自己修改一下，PS就那么幾個功能，相信你們基礎(chǔ)的學(xué)習(xí)一下，很快就會用了關(guān)鍵步驟，切片–>為什么要切片，因為不同的圖片我們希望在網(wǎng)頁上點擊時能跳轉(zhuǎn)到不同的頁面首先，我們找到“切片工具”然后我們從PS中找出標(biāo)尺快捷鍵

CTRL+R有了標(biāo)尺后，我們將鼠標(biāo)移至標(biāo)尺上，按住不放就可以接出參考線，將參考線拉到我們想要切片的位置，如：盜用精髓當(dāng)切片的參考線設(shè)計完成后，我們要通過它來進行切片，點擊PS上方的“基于參考線的切片”按鈕完成后我們可以看到我們的圖片發(fā)生了變化現(xiàn)在我們需要做的是把這個圖片生成HTML的代碼，操作步驟如下：點擊“文件”—選擇“存儲為WEB所用格式”生成代碼先看存儲這塊，要注意保存為最佳，盡可能讓圖片不失真生成代碼存儲時要基于HTML和圖片一起保存，并保存所有切片生成代碼有了上述的操作步驟后，我們可以在存儲的位置上看到這樣一個文件以及一個文件夾雙擊.html的文件，我們的瀏覽器會彈出一個頁面，如圖：從上面我們可以看出，我們剛才要的圖片已經(jīng)生成了網(wǎng)頁，接下來我們想，這代碼要從什么地方取出來呢？打開360瀏覽器 右上角“查看” ”查看網(wǎng)頁源代碼” 彈出一個新的頁面，我們來看下里面有什么？這里我們看到了一段代碼是完整的網(wǎng)頁源碼，但我們在導(dǎo)入淘寶時不需要這么多內(nèi)容，我們從<table開始，代表表格的起點</table>結(jié)束，代表表格的完結(jié)我們復(fù)制出這段代碼生成代碼

現(xiàn)在我們進入“賣家中心” ”圖片空間”打開，找到剛才剛才的image文件夾，將里面的文件上傳到“店鋪裝修”目錄中這時在切換到裝修頁面，找到需要插入剛才那個模塊的位置，點擊“添加模塊” 找到“自定義內(nèi)容區(qū)”點擊“添加”添加成功后，我們開始編輯這個模塊生成代碼這里我們要注意幾點：第一，不要顯示標(biāo)題第二，切換到代碼模式切換后，我們將剛才<table>到</table>的內(nèi)容復(fù)制到輸入框中添加圖片復(fù)制完成后，我們在點擊剛才的代碼切換圖標(biāo)，會發(fā)現(xiàn)表格已經(jīng)有了，但沒有圖片不要急……

現(xiàn)在我們切換回“圖片空間”找到我們剛才上傳的圖片，在圖片下方有個“鏈接”點擊一下，這里我們就已經(jīng)復(fù)制了該圖片的URL切換到剛才我們做的那個模塊，找到該圖片的相應(yīng)位置，我們點擊“編輯”進入編輯對話框后，把剛才復(fù)制的圖片地址復(fù)制進去，并且加入想要鏈接的網(wǎng)址，及可這里注意一下，如果你想要用戶點擊這個圖片是在新的網(wǎng)頁中打開的話，你可以勾選“在新窗口打開鏈接”完成模塊

按上面的步驟，我們把所有的圖片都添加完成后點擊“確定”我們要的效果就出來了，趕快發(fā)布一下，看下效果吧！~

其實我們可以用這個辦法完成大多數(shù)的裝修，包括分融線，合理的利用切片工具，可以實現(xiàn)很多不同的效果，比如，我們可以在一個圖片上切出“更多”這個鏈接，用戶在網(wǎng)頁上點擊“更多”可以跳轉(zhuǎn)到分類頁，或是你按某種規(guī)則排序好的頁面，是不是很簡單啊？商品模塊今天的課講到這其實已經(jīng)完了，最后給大家講些小技巧：

第一，上述的方式可以實現(xiàn)很多特殊的裝修樣式，但商品模板，我們可以在應(yīng)用中心買一些軟件，直接升成代碼添加，比如“超級店長”等；

第二，在告訴大家一個1920*500的全屏輪播的簡單代碼，看下一張PPT有介紹，文字有點小，自己復(fù)制出來看，里面有一段代碼如下： img

alt=""src="/imgextra/i2/868225572/T25ZBpXCRXXXXXXXXX_!!868225572.jpg

"alt=“鏈接網(wǎng)頁的地址”Src=“圖片地址”上面兩個參數(shù)后面的地址，大家自己去更換及可最后想和大家說的是，多動手，多動腦，一定要學(xué)會舉一反三，裝修其實就是這么簡單全屏輪播代碼<div

class="

piaofu"

style="height:477

px;">

type="

Carousel"

style="

z-

index:

10

;

width:

1920

px;

height:

500

px;

left:-

485

px;"

><div

class="

J_TWidget"

data-

widget-

config="{"

effect":"

scrollx","

easing":"

ease

Out

Strong","

steps":

1

,"

autoplay":"

ture","

view

Size":[

1920

],"

circular":

false,"

prev

Btn

Cls":"

prev","

next

Btn

Cls":"

next","

disable

Btn

Cls":"

di<div

class="

J_TWidget"

data-

widget-

config="{"

trigger":".

first-

trigger

2

","

align":{"

node":".

first-

trigger

2

","

offset":[-

80

,

0

],"

points":["

cc","

cc"]}}"

data-

widget-

type="

Popup"

style="

display:

none;"

><div

class="scroller-prev

prev"

style="width:45px;float:left;height:83px;"><img

src="

/photo/swfjay/201262922128563.PNG"

/

></

div><div

class="next

scroller-

next"

style="width:45px;height:

83px;margin-left:950px;"><img

src="

/photo/swfjay/201262922129486.PNG"

/

></

div></

div><div

class="

scrollerx

first-

trigger

2

"

style="

width:

1920

px;

height:

500

px;"><div

class="

ks-

switchable-

content"

style="

width:

1920

px;

float:

left;

height:

500

px;"

><div

style="

padding-

bottom:

0

pt;

padding-

left:

0

pt;

width:

1920

px;

padding-

right:

0

pt;

display:

block;

float:

left;

padding-

top:

0

p

src="

/imgextra/i2/868225572/T25ZBpXCRXXXXXXXXX_!!868225572.jpg"

style="

margin:

0

px;

width:

1920

px;

float:

none;

height:

500

px;"

/

></

div><img

alt=""<div

style="

padding-

bottom:

0

pt;

padding-

left:

0

pt;

width:

1920

px;

padding-right:

0

pt;

display:

block;

float:

left;

height:

500

px;

padding-

top:

0

pt;"

><img

alt=""src="

/imgextra/i2/868225572/T25ZBpXCRXXXXXXXXX_!!868225572.jpg"

style="

margin:

0

px;

width:

1920

px;

float:

none;

height:

500

px;"

/

></

div><div

style="

padding-

bottom:

0

pt;

padding-

left:

0

pt;

width:

1920

px;

padding-right:

0

pt;

display:

block;

float:

left;

height:

500

px;

padding-

top:

0

pt;"

><img

alt=""src="

/imgextra/i2/868225572/T25ZBpXCRXXXXXXXXX_!!868225572.jpg"

style="

margin:

0

px;

width:

1920

px;

float:

none;

height:

500

px;"

/

></

div><div

style="

padding-

bottom:

0

pt;

padding-

left:

0

pt;

width:

1920

px;

padding-right:

0

pt;

display:

block;

float:

left;

height:

500

px;

padding-

top:

0

pt;"

><img

alt=""src="

/imgextra/i2/868225572/T25ZBpXCRXXXXXXXXX_!!868225572.jpg"

style="

margin:

0

px;

width:

1920

px;

float:

none;

height:

500

px;"

/

></

div></

div></

div></

div></

div><div

class="

J_TWidget"

data-

widget-

config="{"

effect":

"

fade",

"

circular":

true

,"