淘宝扶植版免费装修

淘宝装修DIY

扶植版不花钱享受标准版待遇。突破自定义区20k的限制 本文纯属业余技术交流，有很多说的不对的地方请原谅，因为我本人并不是做网页设计的，全当抛砖引玉罢了。新开店不懂装修，和我一样舍不得标准版30/月的朋友可以认真的看看。写这篇文章一是和大家分享经验，谢谢。

好了，废话不多说，进入主题：

本文内容：

一、 制作原理：

大家都知道淘宝扶植版限制了我们只能添加两个自定义区，而每个自定义区又限制了只能小于20k，按说20k其实可以添加很多东西了，但是在我亲自试了N次以后发现自定义区只能添加一个代码，郁闷啊！现在网上有很多扶植版，标准版的免费代码，可是拿着这些代码我们却不能用，用不了。本文思路就是突破自定义区20k（当然只是用一些方法尽可能多的添加代码），其实我也不知道这到底是什么远离，只是这样做可以让我们的店铺有更多的空间展示就行了。

二、软件工具准备

图像处理软件：photoshop CS2 Fireworks MX 2004 网页设计软件：Dreamweaver MX 2004

友情提示：photoshop 主要用来切图； Fieworks MS 用来做gif动画；Dreamweaver MX是用来做网页的。亲们不要被这几个软件的名字吓到了哦，我们要用到的只是这几个软件的几个小功能而已。所

以不要担心自己不会哦，在下面我会一步一步的教大家。Let’s G.o!!

PS.以上几个软件都可以在网上下载安装，如果找不到可以联系我，我可以发给大家。

三、制作步骤

大家可以在网上下载一些好看的装修素材，如GIF图片，导航，免费模板，图片格式和代码格式都可以，等，那样的网站有很多，百度一下就行了，如果是代码的话就保存成TXT格式，记住给没一个文件命名，养成这个习惯可以省去很多麻烦。另外，如果看到一些装修的比较好的店铺（只能是标准版的店铺哈），我们就直接把它借鉴过来。方法是点击菜单栏》》查看》》源文件》》在弹出的文本文档中ctrl+A全选,然后新建一个文本文档，粘贴保存待用。。

网上有很多免费的模板，代码的，素材等，大家自己百度下。。 1， 我们先进入某网站选一套自己喜欢的模板。如：

大家可以看到如下图，…

..

下面我们就一步一步让标准版的模板用在我们的扶植版店铺上。。

2，下载模板；

点击一键导入文件下载:

将下载的文件解压得到一个.tbml文件，这个文件标准版是可以直接导入的，但是我们扶植版就不能直接导入了。但是我们可以同样可以利用这个文件作出和标准版一样的店铺。先将这个.tbml文件重命名为.html文件。保存待用。。

3，打开Dreamweaver网页设计软件，打开刚刚保存的.html文件。如过是想复制别人的店铺，那么打开Dreamweaver后新建一个.html

文件，再点击图中的代码，然后将之间我们保存的TXT文档中的代码复制到代码编辑框中。命名保存。

4，点击

预览按钮或者F12预览。

大家可以看到，一个模拟店铺已经打开了。现在我们要做的就是复制素材。

5，复制店铺素材。（如果是复制别人的店铺也可以直接进入这一步）

在打开的模拟店铺中从做到右，从上到下一个一个的把图片另存在本地文件件下，如果是背景图片就选择背景另存为，注意，一定要给你保存的图片命名，特别是左边和右边的图片一定要分清。

6，下面主要讲右边自定义区的做法。

打开Dreamweaver，新建一个文件（如：youbianzdy_1） 选择中常用下拉菜单中的“布局”。 点击 插入》布局对象》布局表格，插入一个740*300的布局表格

（布局表格大小根据我们刚才下载的图片大小决定）

再在这个布局表格中的左边插入一个550*300右边从上到下分别插入一个190*205和190*90的布局表格，最后如下图：

保存待用。

再新建文件，用同样的方法画其他布局表格。

PS.其实可以把所有表格都画在一个html文件里，但是那样很容易造成表格错位，所以我建议最好表页面划分好。尽量分开保存。这样也方便以后修改。

7，修改图片，用PHOTOSHOP将图片根据自己的需要进行修改，但是新手刚开始最好不要改图片的尺寸。放大缩小图片时按住alt键，以免图片变形。

PS.其实6,7两步都是综合在一起的，有时根据图片定表格，有时根据表格定图片。

8，切图

对于一张很大的图我们要先将其切开，再根据切后的图的尺寸画布局表格。如：宝贝展示区。

在Photoshop中打开。

选择 菜单栏》视图》标尺 或 ctrl+r快捷键。

如图横竖各拉出N条标尺线，主要是要将每一个方框划分出来。 选择工具中的切片工具

K

根据刚才画的标尺线讲图片切成N块。

然后储存为WEB所用格式。选择图片和Html保存

这样我们就又得到了一个html文件和image文件夹。

要在图片上添加字可以直接打开image中的图片，用photoshop在任意一个图片上添加字体即可。如：

温馨提示：

做好以后的图片全部要上传到你的图片空间哦。

就这样把右边自定义区所有的内容做好以后就可以合成了。 新建一个html文件，将刚才做的所以html文件按你喜欢的顺序粘贴进来。

9，添加链接，更换图片地址。

预览最后得 …… 此处隐藏：544字，全部文档内容请下载后查看。喜欢就下载吧 ……