淘宝卖家店铺装修怎么自己制作模块

淘宝卖家店铺怎么装修~

淘宝卖家店铺的装修：
店铺装修有区域之分，首页、详情页、自定义区域、导航公告等等。
进入店铺中心，点击店铺装修。


店铺框架搭建，在店铺创建和编辑中，可以选择页面模板，左侧的模板可以拖动到右侧区域，右侧的每个模板都是可以编辑的。

根据网店的布局方向进行，网店配色、图片处理等等

　　关于京东，淘宝卖家店铺装修自定义模块的做法如下：
店铺装修在装修界面添加自定义区，将自定义区切换成代码设计界面；
、制作代码：一般装修代码可以用Dreamweaver软件设计制作，通过添加表格、图片、链接、文字等方式将模块设置成自己想要的效果；
效果设置好之后，将Dreamweaver视图切换成代码视图，获取装修代码。值得注意的是Dreamweaver 中的代码不是所有的代码，是代码视图中和之间的代码。另外代码中引入图片的地址应该换成自己图片空间里面的地址，否则在店铺里面无法正常显示出图片；
将获得的代码复制黏贴到淘宝装修界面里面的自定义区的代码里面去，点击确认，预览和发布即可。

　　一、建立FW文档

　　打开fireworks，点击界面右侧的新建FIREWORKS文档(绿色方框内)，

　　建立一个宽度为800，高度可以视情况而定的画布，建议颜色为“透明”或“白色”。

　　在界面的左上角处点击文件-导入

　　找到自己要用的背景图片，打开。(如果大家没有合适的背景图片的话，可以去我的店铺里面看看，有许多精品模板图都没加水印的，大家可以右键图片另存为到自己的电脑上。)这时会出现一个类似“「”的光标，通过它可以将导入图片在整个画布中的位置确定。

　　如上图所示，你也可以在界面的左下角找到四个数值填入框，其中宽度和高度表示的是导入图片的大小，而

　　“X”表示的是导入图片的最左边距整块画布最左边的距离(太过直白，也有点拗口，呵呵)，“Y”表示的就是

　　导入图片的最上边距整块画布最上边的距离。填入你需要的数值，确定图片在整图中的位置。

　　特别说明：因为考虑到部分用户的显示器分辨率为800*600，所以我们建的画布宽度为800，高度1000也是可以

　　要据制作中的实际情况改变的。另外，导入的图片宽度必须≤800。如果图片宽度大于800，可以先在点击左上角

　　处的文件-打开，找到图片在FW中打开，然后在界面上方找到修改-画布-图像大小，再将像素尺寸的宽度改

　　为你想要的尺寸，记得一定要约束比例，要不图片就变形了。

　　二、改变背景色

　　把画布的颜色改为导入图片的背景色，这会使画布跟导入图片看起来更像一张完整的图片。方法：点击界面上方的修改-画布-画布颜色

　　在弹出窗口中选择自定义，并在如图所示的颜色定义框内点击一下，出现一个类似笔的形状，将它在导入图片的背景颜色处点击一下，然后确定。现在画布的背景色就协调了。

　　三、加入文字

　　根据你自己的布局构思，在适当的地方用文本工具加入店名、店铺链接(逛逛本店)、店铺介绍等文字，一定要考虑好整体布局哦～

　　点击文本工具，在图片中你想要的位置拖动鼠标后会出现一个矩形框，然后你可以在操作界面的下方看到属性选项

　　调整好文字大小，颜色，字体等，之后在矩形框内输入你的文字

　　另外，记得在宝贝展示、宝贝描述文字下分别留出一定的空白地方来，不需要太多。

　　第三步完全做完后的成果图

　　小提示，类似买家须知这种固定条款，可以直接在图片上制作出来，单独切片(马上会讲到)，以免每次填入这么麻烦。

　　四、加入热点

　　在需要添加链接的文字上加入热点。

　　点击如下图所示的热点工具之后，在文字上面拖动矩形框，得到一个热点框。如果未覆盖到文字上，可直接用鼠标拖到文字上并覆盖住。

　　加入矩形热点工具后，选定这个矩形热点，界面下方如图所示的地方会有链接网址的设定，

　　“替代”指的是当鼠标放在所做的矩形热点上时会出现的文字。目标指网址打开方式，_blank指在新窗口打开。

　　五、切片

　　把所有的热点都做好之后，就要开始切片程序了。切片工具的位置在上图中已做说明。

　　切片的时候要注意，有热点的部分和各个文字部分要单独切出来。(这一步如有不懂的地方，可以问偶。因为有些东东偶也不晓得如何表达)

　　点击矩形切片工具，(用鼠标按住切片工具，会出来两个选择，选矩形切片工具就OK了)会出现在一个十字架状的光标，然后将整张图一点点的切出来，切完之后如图所示。

　　在界面下方的如图所示的框一内，“切片”二字下方的框表示的是你所选中的切片的命名，宽度和高度就表示的

　　是所选中的切片的大小，然后X,Y也是定义此切片在整图中的位置的。框二中，类型选择为图像，图像格式选择为

　　“JPEG-较高品质”。

　　六、导出为HTML文件

　　点击操作界面左上角“文件-导出”

　　在弹出如图所示的窗口，

　　文件名可自行设定，导出-HTML和图像，导出切片，一定要包括无切片区域并将图片放入子文件夹，最后导出。

　　以下为DW应用部分，可能米米在此表述的不是很清楚，做为菜鸟，又想DIY做模板的话，可能不容易沟通，所以对于那些这或那的规矩，米米并没有去框定，只是把步骤简单的给列了出来。我会尽快想办法，把下面的叙述部分描述得更清楚，如果有不懂的，敬请跟贴提问。

　　七、打开HTML文件(请详细看看此步中，后来加上去的红色字体部分)

　　打开DW工具，然后在如图

　　所示的操作界面中，单击“打开”菜单，找到刚刚保存好的HTML文件，打开。

　　然后在如图所示的位置，

　　会看到有“代码、拆分、设计”三个选项，选择“拆分”。现在在界面中，上面部分就是HTML代码，下面部分就是图片模式了。

　　找到宝贝展示字样的下的空白图片的切片，选中它之后，上面的代表这个切片的代码部分会被蓝色覆盖，将鼠标移到代码部分，将此部分代码“src="图片位置"”中的图片位置复制下来

　　Re: 开店如何制作宝贝描述模板

　　选中空白图片切片之后，在代码栏中会是类似于这部分代码被蓝色覆盖 < img name="n7" src="images/7.jpg"
width="800" height="77" border="0" id="n7" alt="" />
，(src=""引号中的文字即代表的是图片在电脑本地地址，在最后images里的图片上传到相册里后，要一一换成相对应的URL 地址的，这是后话。)

　　将刚被覆盖的< img name="n7" src="images/7.jpg" width="800" height="77"
border="0" id="n7" alt="" /> 这串代码保留src=""引号中的图片地址后，其它全删掉。然后直接手动加入如下代码
background="images/7.jpg" background-reapeat:reapeat-y
(background=""引号中即刚刚保留的图片本地地址)到< td colspan="4"
>(引号内未必是数字4，也可能是其他数字)中来，添加好之后的样子应该是这样子的< td colspan="4"
background="images/7.jpg" background-reapeat:reapeat-y>。

　　因为是要进行宝贝图片的展示，那么就要加入图片展示代码< img src="宝贝图片的URL地址" /
>，加完之后应该是类似于这个样子< td colspan="4" background="images/7.jpg"
background-reapeat:reapeat-y >< div align=center > < img src= "
宝贝图片展示地址"/>< /div > 如果你在进行宝贝编辑的过程中希望加入更多的图片，那么同样是用图片展示代码来表现的。

　　其中< div align=center>< /div>是一个居中命令的代码。可以加无数个< td
colspan="4" background="images/7.jpg" background-reapeat:reapeat-y >< div
align=center > < img src= " 宝贝图片展示地址"/>< /div >< div
align=center > < img src= " 宝贝图片展示地址"/>< /div >< div
align=center > < img src= " 宝贝图片展示地址"/>< /div >

　　如果大家是直接从这里复制代码过去的话，请将每个“<”符号之后的空格都删掉!

　　是一个居中命令的代码。可以加无数个< td colspan="4" background="images/7.jpg"
background-reapeat:reapeat-y >< div align=center > < img src= "
宝贝图片展示地址"/>< /div >< div align=center > < img src= "
宝贝图片展示地址"/>< /div >< div align=center > < img src= "
宝贝图片展示地址"/>< /div >

　　然后删掉刚刚被蓝色覆盖的这部分代码，

　　并在这部分加上引号中(不包括“”的如下代码 < div align="center" > < img
src="宝贝展示图片的URL地址"/ >
。在刚刚改好的这串代码前面的“>”符号前加入下面引号中的如下代码“background="刚刚复制的图片位置"
background-reapeat:reapeat-y”。

　　这一步的作用是把这部分切片变成了背景图，并且无论你的宝贝展示图片有多大，都不会撑破表格(除非宝贝展示图片大过了整个图片的宽度800)。

　　再找到宝贝描述下的空白图片，将蓝色区域中的代码删掉，然后把“background="刚刚复制的图片位置"
background-reapeat:reapeat-y”了复制到相同位置。此时不用加入图片链接代码，到时在宝贝描述编辑器中直接加入描述文字就OK了。

　　八、保存代码

　　全部完成之后，将界面切换到代码模式，(跟第七步切换到拆分模式的方法相同)，打开记事本程序，将代码全选，点鼠标右键选择拷贝，然后粘贴到记事本中，保存。

　　九、上传图片

　　打开HTML文件所在的文件夹，找到images子文件夹，将里面的除一个名为“spacer"外的所有图片上传到你的相册里去。(这个SPACER可以忽略不计)然后再记事本里找到除“spacer.jpg”外的所有以jpg结尾的图片，换成其相对应的url地址，再将此代码保存。

　　特别提示：相册必须是支持外部链接的相册，如265相册(http://my.265.com)(支持JPG和GIF格式，但只有50M使用空间)或YAHOO相册(http://cn.yahoo.com)(无限量空间，但只支持JPG格式)还有很多好的相册，但我也不知道，申明一点的是网易相册不支持外部链接!

　　十、使用代码

　　上传宝贝时，在宝贝描述栏中，点击“编辑源文件”，然后从你保存好的记事本中将代码复制粘贴到编辑栏中，并将宝贝展示图片的URL地址添加好，再切换回编辑器编辑，在宝贝描述字样下面编辑宝贝描述

1、店铺装修在装修界面添加自定义区，将自定义区切换成代码设计界面
2、制作代码：一般装修代码可以用Dreamweaver软件设计制作，通过添加表格、图片、链接、文字等方式将模块设置成自己想要的效果
3、效果设置好之后，将Dreamweaver视图切换成代码视图，获取装修代码。值得注意的是Dreamweaver 中的代码不是所有的代码，是代码视图中<body>和</body>之间的代码。另外代码中引入图片的地址应该换成自己图片空间里面的地址，否则在店铺里面无法正常显示出图片。
4、将获得的代码复制黏贴到淘宝装修界面里面的自定义区的代码里面去，点击确认，预览和发布，这样就装修完成了。

卖家有现成的素材，你不用再自己制作模块了，要不要我帮你啊

放到自定义模板在编辑

个性化装修

---

浚县17518985698： 关于京东,淘宝卖家店铺装修自定义模块是怎么做出来的 - ？
阳很法安： 关于京东,淘宝卖家店铺装修自定义模块的做法如下:1. 店铺装修在装修界面添加自定义区,将自定义区切换成代码设计界面; 2. 、制作代码:一般装修代码可以用Dreamweaver软件设计制作,通过添加表格、图片、链接、文字等方式将模块设置成自己想要的效果; 3. 效果设置好之后,将Dreamweaver视图切换成代码视图,获取装修代码.值得注意的是Dreamweaver 中的代码不是所有的代码,是代码视图中<body>和</body>之间的代码.另外代码中引入图片的地址应该换成自己图片空间里面的地址,否则在店铺里面无法正常显示出图片; 4. 将获得的代码复制黏贴到淘宝装修界面里面的自定义区的代码里面去,点击确认,预览和发布即可.

浚县17518985698： 淘宝店铺装修 这个要怎么做 自定义模块做不出来 - ？
阳很法安： 这个是标题啊,后台进去手机淘宝首页装修,左边菜单栏有标题模块拖动进来置顶就行了,想说什么打字在上面,可以选择加或者不加链接,对外展示就是这样了

浚县17518985698： 淘宝卖家店铺装修怎么自己制作模块 - ？
阳很法安： 制作模块是要申请设计师的 就是在淘宝那卖的模块啊 我们只能用PS设计那些宝贝分类啊 自定义内容那的

浚县17518985698： 淘宝店铺装修自定义模板怎么弄出来 - ？
阳很法安： 在店铺装修界面上面 小倒三角点一下展开页面设置.填加自定义模板就可以了.

浚县17518985698： 淘宝店铺装修自定义模块怎么添加 - ？
阳很法安： 你好:打开店铺的装修页面,在页面的左边,模块这里,鼠标点住:自定义区 把自定义区模块移到右边.

浚县17518985698： 淘宝店铺装修模块怎么弄啊 - ？
阳很法安： 可以去别人店铺看到自己喜欢的了点击右键的属性里面就有一个地址,复制到你装修店铺的左边哪里就可以了,在网上也有很多免费的,可以去找找.

浚县17518985698： 淘宝自定义模块怎么弄啊 我是个新手店铺在装修中 望详细些 谢谢!？
阳很法安： 点击店铺装修 你要装修那个页面 你就在那里添加模快就ok 自定义是可以自己添加的 你想添加什么都可以

浚县17518985698： 淘宝店铺右侧自定义模块怎么做 - ？
阳很法安： 点击750选项,根据需要选择不同模块.鼠标点住模块拖曳到右面放开鼠标,然后根据提示操作.

浚县17518985698： 淘宝店的装修模块是怎样做出来的 - ？
阳很法安： 淘宝店铺模块除了自身带的固定模块外(客服、掌柜推荐、图片轮播等)有一个自定义模块,可以通过其他软件设计你需要的内容,然后生成代码粘贴到自定义模块.自定义模块在装修的时候使用的最多,他有很大的灵活性.

浚县17518985698： 淘宝网店装修,我想自己做,但是不知道怎么做?具体的步骤是怎样的?要用到哪些技术.万分感谢,谢谢. - ？
阳很法安： 1. 登陆淘宝网,开通淘宝店铺,然后进入卖家中心,然后再左侧的菜单中选择“店铺装修”.进入其装修模式.2. 鼠标移动到所需更改的模块,便会出现相关选项,你可以选择“编辑”或者移动模块到指定的位置.3. 接下来你可以选择背景图进行编辑,选择背景图片后进入相关设置,调整头部高度,进行显示调整,增添图片时候需要选择不超过100KB的图片(淘宝真吝啬),且高度在100~150之间.图片过大可将PNG改为JPG.当然,灵猫—店商 在做,可以参考一下别人做的,类目不是越多越好,但要注意图文并茂.