旺铺装修攻略(5):促销区模板代码制作教程(3)

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

(4)图片链接制作：经过以上步骤，只是把图片插入了，当买家用鼠标点击图片时，并不能跳转到宝贝描述页面。为了能够实现跳转，就必须对图片施加链接。

首先回到我们网店首页所选宝贝所在位置。将鼠标移到宝贝下面的超链接上，点击鼠标右键，弹出菜单，在弹出菜单中选择“复制快捷方式”。

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

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

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

此时，我们会发现，所插入的图片已经把人气宝贝区撑开了，这是因为我们所插入的图片的总宽度已经大于人气宝贝展示区的宽度，这并没有关系。为了解决这个问题，我们现在就让人气宝贝只在规定区域里滚动展示。

将<marquee behavior="alternate" scrollamount="2" scrolldelay="0" width="642" >代码在代码区中加到第一个宝贝图片前。

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

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

10、当所有工作完毕后，在Dreamweaver8.0的代码区里，将<!-- ImageReady Slices (促销区.psd) -->和<!-- End ImageReady Slices -->之间的代码全部选定，并复制下来，然后用记事本新建一个文本文档，并将所复制代码粘贴到新建文本中，以txt格式保存备用。

到此为止我们的促销区制作大功告成。最终效果图如下：

弹出如下对话框：

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

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

细心的亲们会发现，在图上红色框中有两组数据，一组为width = 642 height = 145，这组数据是说明我们的人气宝贝展示区的宽为642，高为145；另一组数据为width = 160，height = 159，这组数据是说明我们插入的图片宽为160，高为159。这就说明我们的图片过大，为了不撑破表格，就必须将图片的宽和高两个数据都改为小于145，比如改为140。修改完毕后，就能保证图片不会把人气宝贝区的表格撑破。如下图所示：