淘宝装修之促销区代码制作.docx

淘宝装修之促销区代码制作.docx

《淘宝装修之促销区代码制作.docx》由会员分享，可在线阅读，更多相关《淘宝装修之促销区代码制作.docx（15页珍藏版）》请在冰点文库上搜索。

淘宝装修之促销区代码制作

促销区代码制作：

1、找到我们昨天制作成功的HTML文件及image文件夹，如图所示：

2、用Dreamweaver8.0打开“促销区.html”文件。

并切换到“拆分”模式。

在此模式下，上半部分为代码区，下半部分为设计区。

3、单元格背景制作：

由于店铺公告区要添加内容，为了避免使用层，就必须把店铺公告出文字内容区的图片设为单元格背景。

用鼠标在设计区点击店铺公告文字出现区。

如图所示：

然后，将鼠标点击代码区如上图所示红方框前的单元格标记的td之后。

此时可以看到在屏幕下方出现单元格背景框。

在背景框内填入images/促销区_03.gif，并在左边设置宽为399，高为191，设置完毕之后，删除单元格中的图片，最终如下图所示：

当然，如果亲们对Html语言熟悉的话，就可以直接手工改写代码了。

利用同样的方法处理联系我们及人气宝贝的内容展区单元格图片。

4、店铺公告文字显示：

将此段代码放在店铺公告文字出现区。

1.5;">

relative;">

    本店所发货物快递默认为申通快递。

若有特殊要求，请事先申明，不便之处敬请谅解！

声明：

请各位买家在拍宝贝前务必先看清本店的退换货政策（参加优惠活动的宝贝除商品质量问题外一律不予以退换），在拍之前务必请先询问客服此款是否有货，以免造成不必要的麻烦。

5、联系我们内容处理：

这里主要留下店主的旺旺，QQ，手机等其他内容，方便买家知道如何联系。

添加旺旺在线过程如下：

打开

自己选择风格、加入自己淘宝旺旺号码，并选择是生成网页代码还是生成论坛代码。

由于我们是加在促销区，因此选择生面网页代码。

最后点“复制代码”按钮，就可得到旺旺在线的网页代码了。

当获得代码之后，就将这些代码粘贴到联系我们的内容区，并前QQ和手机及要补充的说明加在此处，注意排版要美观。

最终如图所示：

6、保存修改后的网页内容。

7、上传图片。

由于淘宝不支持本地图片，所以为了促销区的图片能正常显示，我们要将images文件夹下的图片全部上传到自己申请的空间当中。

8、用上传的图片替换促销代码中本地图片。

这里以上传到空间为例来说明如何替换。

登录51空间，找到自己上传的图片。

（以促销区_01.gif为例.）

在此图下方有一个复制按钮，点击复制，就会得到促销区_01.gif图片的网络地址。

然后在Dreamweaver8.0中点击“编辑”菜单，并选择“查找和替换”。

出现如下对话框：

在查找框中输入“images/促销区_01.gif”，在替换框中粘贴刚才所复制的促销区_01.gif图片的网络地址。

点击“替换”按钮即可完成促销区_01.gif本地图片的网络替换。

然后用同样的方法，把所有的本地图片全部用网络地址替换过来。

全部替换完毕后注意保存。

9、人气宝贝区图片展示区图片及链接：

在自家店中挑选几款推荐宝贝在此区域展示，并让卖家可以链接到宝贝描述页面。

具体操作如下：

（1）、打开自家店铺首页：

比如，我现在要把106红这款宝贝放到人气宝贝中。

在自家店铺找到这款宝贝，将鼠标移到这款宝贝图片上面，点击鼠标右键，弹出菜单，如下图所示

选择“复制图片地址”项，就可以得到这款宝贝的网络图片地址。

（2）、转到Dreamweaver8.0中，在设计区，用鼠标单击人气宝贝图片展示区，如下图所示：

（3）、在Dreamweaver8.0的单击“插入”菜单项，选择“图像”

弹出如下对话框：

在出现的对话框中，将URL：

文本框中的内容全部清空，把我们刚才拷贝的图片地址粘贴到此对话框中。

点击确定，即完成了人气宝贝的图片插入。

细心的亲们会发现，在图上红色框中有两组数据，一组为width=642height=145，这组数据是说明我们的人气宝贝展示区的宽为642，高为145；另一组数据为width=160，height=159，这组数据是说明我们插入的图片宽为160，高为159。

这就说明我们的图片过大，为了不撑破表格，就必须将图片的宽和高两个数据都改为小于145，比如改为140。

修改完毕后，就能保证图片不会把人气宝贝区的表格撑破。

如下图所示：

亲们对比上下两个图后就可以看出效果了。

（4）图片链接制作：

经过以上步骤，只是把图片插入了，当买家用鼠标点击图片时，并不能跳转到宝贝描述页面。

为了能够实现跳转，就必须对图片施加链接。

首先回到我们网店首页所选宝贝所在位置。

将鼠标移到宝贝下面的超链接上，点击鼠标右键，弹出菜单，在弹出菜单中选择“复制快捷方式”。

其次，转到Dreamweaver8.0中，在设计区，用鼠标单击刚才插入宝贝图片，如下图所示：

最后，在红色方框所示的链接对话框中，将刚才复制的快捷方式粘贴到此对话框中，这样就完成了图片链接的工作。

按照同样的方式，多加几个宝贝图片，并完成链接工作。

此时，我们会发现，所插入的图片已经把人气宝贝区撑开了，这是因为我们所插入的图片的总宽度已经大于人气宝贝展示区的宽度，这并没有关系。

为了解决这个问题，我们现在就让人气宝贝只在规定区域里滚动展示。

将代码在代码区中加到第一个宝贝图片前。

将在代码区中加到最后一个宝贝图片后面位置。

这段代码就是让我们所插入的图在宽度为642的人气宝贝展示区里左右来回滚动。

10、当所有工作完毕后，在Dreamweaver8.0的代码区里，将

--ImageReadySlices（促销区.psd）-->和

--EndImageReadySlices-->之间的代码全部选定，并复制下来，然后用记事本新建一个文本文档，并将所复制代码粘贴到新建文本中，以txt格式保存备用。

到此为止我们的促销区制作大功告成。

最终效果图如下：