店铺快捷装修

错过偶然新浪微博：@电商联合营销淘宝店铺快捷装修教程升级旺铺专业版进入淘宝装修页面，点击右上角，一键升级专业版；淘宝对1钻以下的卖家扶持计划，升级和使用专业版无需费用；1钻以上卖家使用专业版每月需缴纳50元。专业版优势：更多的页面布局方式可实现950宽的自定义内容区（很重要，这是接下来我们课程的关键）装修风格在开始装修前，先想后自己想要怎么样的风格如：可爱、酷炫、时尚、简约……风格想好以后，我们来执行第一步，选模板也许你们会问，我们不是学习自己装修吗？为什么又让我们选模板呢？接下来看……后面更精彩先打开我们的店铺装修页面，点击“装修—模板管理—装修市场”进入装修市场，开始选择我们想要的风格我个人会建议大家使用童装或女装类目的模板色彩简单，经典色会比较适合模板试用当你选中了比较满意的模板后，你可以选择试用鼠标移动到你要试用的模板上，点击模板，弹出对话框点击试用后，我们可以选择自己的店铺为试用店铺完成上面的操作后，你已经看到了你家店铺使用这个模板后的效果了，这里有两种方式：第一种，直接先把你要的模块里面的商品添加好第二种，只是需要部分内容，比如只想要这个模板的分隔符

完成上面这些动作后，我们开始用截图工具截图，例如我想要个四方格的内容，那接下来我们就先截下这个图片注意事项：全屏的宽度是950PX盗用精髓PS：起这么一个“盗用精髓”的标题，我个人怎么感觉后面好多双仇视的眼睛在看着我

^&^言归正传，回到上章所说的截图以后，我们要做些什么？第一步，先将图片放进我们的PS中，别问我PS是什么？不懂的先去买块豆腐撞两下第二步，将你不想要或是想改的地方自己修改一下，PS就那么几个功能，相信你们基础的学习一下，很快就会用了关键步骤，切片–>为什么要切片，因为不同的图片我们希望在网页上点击时能跳转到不同的页面首先，我们找到“切片工具”然后我们从PS中找出标尺快捷键

CTRL+R有了标尺后，我们将鼠标移至标尺上，按住不放就可以接出参考线，将参考线拉到我们想要切片的位置，如：盗用精髓当切片的参考线设计完成后，我们要通过它来进行切片，点击PS上方的“基于参考线的切片”按钮完成后我们可以看到我们的图片发生了变化现在我们需要做的是把这个图片生成HTML的代码，操作步骤如下：点击“文件”—选择“存储为WEB所用格式”生成代码先看存储这块，要注意保存为最佳，尽可能让图片不失真生成代码存储时要基于HTML和图片一起保存，并保存所有切片生成代码有了上述的操作步骤后，我们可以在存储的位置上看到这样一个文件以及一个文件夹双击.html的文件，我们的浏览器会弹出一个页面，如图：从上面我们可以看出，我们刚才要的图片已经生成了网页，接下来我们想，这代码要从什么地方取出来呢？打开360浏览器 右上角“查看” ”查看网页源代码” 弹出一个新的页面，我们来看下里面有什么？这里我们看到了一段代码是完整的网页源码，但我们在导入淘宝时不需要这么多内容，我们从<table开始，代表表格的起点</table>结束，代表表格的完结我们复制出这段代码生成代码

现在我们进入“卖家中心” ”图片空间”打开，找到刚才刚才的image文件夹，将里面的文件上传到“店铺装修”目录中这时在切换到装修页面，找到需要插入刚才那个模块的位置，点击“添加模块” 找到“自定义内容区”点击“添加”添加成功后，我们开始编辑这个模块生成代码这里我们要注意几点：第一，不要显示标题第二，切换到代码模式切换后，我们将刚才<table>到</table>的内容复制到输入框中添加图片复制完成后，我们在点击刚才的代码切换图标，会发现表格已经有了，但没有图片不要急……

现在我们切换回“图片空间”找到我们刚才上传的图片，在图片下方有个“链接”点击一下，这里我们就已经复制了该图片的URL切换到刚才我们做的那个模块，找到该图片的相应位置，我们点击“编辑”进入编辑对话框后，把刚才复制的图片地址复制进去，并且加入想要链接的网址，及可这里注意一下，如果你想要用户点击这个图片是在新的网页中打开的话，你可以勾选“在新窗口打开链接”完成模块

按上面的步骤，我们把所有的图片都添加完成后点击“确定”我们要的效果就出来了，赶快发布一下，看下效果吧！~

其实我们可以用这个办法完成大多数的装修，包括分融线，合理的利用切片工具，可以实现很多不同的效果，比如，我们可以在一个图片上切出“更多”这个链接，用户在网页上点击“更多”可以跳转到分类页，或是你按某种规则排序好的页面，是不是很简单啊？商品模块今天的课讲到这其实已经完了，最后给大家讲些小技巧：

第一，上述的方式可以实现很多特殊的装修样式，但商品模板，我们可以在应用中心买一些软件，直接升成代码添加，比如“超级店长”等；

第二，在告诉大家一个1920*500的全屏轮播的简单代码，看下一张PPT有介绍，文字有点小，自己复制出来看，里面有一段代码如下： img

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

"alt=“链接网页的地址”Src=“图片地址”上面两个参数后面的地址，大家自己去更换及可最后想和大家说的是，多动手，多动脑，一定要学会举一反三，装修其实就是这么简单全屏轮播代码<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

,"