qq自定义diy名片代码复制_淘宝装修从入门到高级：2.全屏自定义首页装修

又是周五了，最近一大堆事情忙，又是大专考试，又是本科考试，忙得我晕头转向的。再加上618，一下把我给累倒了。修养生息了好几天

所以啊，我还能坚持在这里免费给大家写教程，是多么不容易，我都佩服我自己

好了，言归正传，最近我收到最多的问题就是全屏首页装修，所以我打算充当雷锋，写一篇详细的教程。

有的童鞋装修全屏首页呢，切片装修，几个模块之间总是有间隙，需要手动改高度，烦不胜烦我这个方法呢，具有自动消除首页模块间隙的功能，是不是很期待呀！

首先呢，当然是设计一个全屏的首页，宽度1920PX，高度自定义；

我这里随便在素材网站上找了个首页给大家演示。

首先当然是把这个文件拉到PS里，拉好参考线，切片。

我为什么这么拉参考线，大家看到了，优惠券是三个，所以肯定要分为三份；然后首页最下面的是分为2个小格子，所以我中间也拉了条辅助线。

然后大家选择切片工具，就是这个

再选择“基于参考线的切片”

这时候就变成这样了对不对？

不要急，接着选择切片选择工具(长按住切片工具，切片选择工具就会出来)；

然后大家看到，01、02、03、04是四张，我需要合成一张怎么办？

这时候，先单击鼠标左键选择01，这时候看到外面框变成了橘色(仔细看！)

接着左手按住键盘的“SHIFT”不放，再依次点击02、03、04切片，四个切片都选中后(选中后外框都会变颜色的)，单击右键，选择“组合切片”，这时候四张就变成一张了。

同样的方法，我们看下面如何组合？

这个优惠券部分，我们只需要把03、04组合成一张就行了。同样的，先点击03，然后按住SHIFT键，再点击04，两张都选中后，单击右键选择“组合切片”。

总之，你想要哪些切片组合到一起，你就选中哪些切片，然后单击右键选择“组合切片”就好了！

下面的我不详细写了，大家明白意思就行。组合好后，是这个样子的。

这个样子，就是切好了。接下来选择菜单栏里的“文件”——“导出”——“存储为Web所用格式(旧版)”，然后选择“JPEG”，然后点存储；

接下来注意了！

接下来注意了！

接下来注意了！

选择好存储的位置后(一般保存到桌面)，格式那里选择“HTML和图像”，再点保存。

这时候回到桌面，就会看到两个这样的图标：

接着我们登陆淘宝，进入“图片空间”，新建一个文件夹(养成建文件夹的好习惯)，然后上传所有“images”文件夹里的图片，接着选择文件名升序(这样做的目的是为了方便按顺序复制链接，以防错乱)；

接着回到电脑桌面，我们直接把这个图标拖到DW软件里；

然后神奇的一幕就出现了！一整张首页全部都在，而且模块之间没有间隙！(切，有什么好神奇！不就是那么回事？)

接着大家进入图片空间，找到第一张切片图片，然后复制链接(第2个就是复制链接)

然后回到DW，点击第一张切片，这时候，代码里灰色部分被选中，接着我们删除红色框里的本地图片地址(记得删除干净！)

删除完是这个样子的~~

删除干净后，在里面“Ctrl+V”粘贴这张图片的网络图片地址；

同样的方法选中第2张切片(这里第2张切片是优惠券)，把“源文件”栏里的本地链接删除干净，再复制切片2在图片空间的地址；

顺便说句，优惠券的购买在卖家中心左栏——“营销中心”——“店铺营销工具”——“优惠券”；

优惠券的链接：购买好优惠券后，打开优惠券页面，可以看到数据概览，店铺优惠券和商品优惠券，此时点击【店铺优惠券】就可以看到已经设置好的优惠券，优惠券后面有一排蓝色小字，鼠标右键点击蓝色小字【链接】，选择【复制链接地址】即可；

注意，“源文件”是这张图片的地址，比如我现在源文件框就是这个优惠券图片的图片地址，而“链接地址”是“营销中心”——“店铺营销工具”——“优惠券”里面复制的一个网址；

我们找到这个10元优惠券在图片空间的链接，复制粘贴在“源文件“框里；然后“链接”空白框里加上“营销中心”——“店铺营销工具”——“优惠券”里面复制的一个网址；(重复了三次，应该清楚两者不同了！)

下面2个优惠券一样的方法，我就不重复啰嗦了；

接着是宝贝(产品)的链接：进入淘宝后台——宝贝管理——出售中的宝贝

找到宝贝的标题，单击右键，复制链接地址；

接着在“源文件”框里粘贴图片空间对应的网址址，在链接里加上刚刚复制的宝贝链接地址。后面关于宝贝的链接都是同样的方法。

到这里，你已经完成一大半了。把table键外面的都删除，这个是前面的，标注红框的是要删除的部分，

这个是后面的，标注红框的是要删除的部分，

然后Ctrl+A选择所有的代码，Ctrl+C复制所有的代码，然后进入淘宝C店全屏自定义代码文件夹(天猫店的进入天猫全屏自定义代码文件夹)

这里以C店全屏自定义代码为例！按Ctrl+V粘贴代码到灰色区域，“内容高度”改为首页这整个模块的高度，这里我是6250.那么我把“内容高度”4个字删除，改为6250；(height是高度的意思)

你可能看着这个文件夹里的代码很乱，没关系，Ctrl+A选择所有的代码，Ctrl+C复制所有的代码，然后进入淘宝装修后台，增加一个自定义模块，然后标题选择不显示，然后选择源代码图标，其他图标全部变为灰色后，在白色框里Ctrl+V粘贴所有的代码，然后确定，然后预览，确认无误后，就可以发布了！

好了，到此结束！恭喜你成功get到了这个技能！

详情页设计秘籍(一)

详情页设计秘籍(二)

淘宝装修从入门到高级：店铺的基本设置