|
我们一起来学习如何设计一个个性化的淘宝网宝贝促销区吧。先看一下最终效果图吧。图片尺寸比较大。
制作的过程如下：
第一步：
首先，确定了宝贝促销区的大小，最高是500像素，宽度的话，我定的是728，讨个吉利，呵呵。定了大小，就要设计一下版面啦，建议大家用纸笔画一下，把布局都详细地列出来，每个图片的大小也都计算好，做到心中有数、有的放矢。
草图:
第二步：
确定了每张图片的大小，就可以去把自己的宝贝图片处理成相应尺寸啦，然后再配上文字。处理图片及加文字的教程这里已经有很多了，我就不再赘述了。有一些小的经验，以后我会再发上来与各位分享。
第三步：
在photoshop中建一张728×500大小的图，然后把我们在第二步中处理好的图片都贴进去，位置都排整齐了。然后点菜单图层/合并可见图层，我们要把图“大卸八块”啦，这样可以方便地放到网页的表格里去。用photoshop的切片工具，把图像切成11块，呵呵。然后用菜单文件/存储为Web所用格式，存到您建好的文件夹里，您会发现变成11个图了。剩下的工作，就是把这些图填到网页里去。
第四步：
把处理好的这11个图传到网上去，网上存图片的空间很多，也有很多淘友介绍，我就不多说了，传上去之后把图片的网址都记下来，一会儿要填到我们的网页里去的哦。
第五步：
接下来我们要做网页啦，做网页当然是用大名鼎鼎的Dreamweaver。打开Dreamweaver之后，新建一个页面，然后我们先回过去看一下photoshop上的设计图。从图上我们可以确定，要建一个6行×4列的表格，宽度设为728，正好可以和photoshop上的排版一致，记得“边框”、“边距”和“间距”都要填“0”哦，不然很难看的。然后就可以把图片一张一张地插到表格里啦（点菜单插入/图像），当然，有的时候要合并单元格的哦。插入图片后可能会将表格撑大，用鼠标拖动单元格的边缘可以调整单元格的大小。每个单元格也可以通过下方的表格属性栏来直接设置宽度和高度，调成和要插入的图片一样大小就可以啦。插入图片后单击图片，在下面图片属性栏里找到“链接”一栏，填入要链接到的宝贝页面的地址，这样别人一点这个图片就可以看到相应的宝贝啦。具体操作见图示～
新建的表格：
合并单元格：
插入图片：
表格属性：
将图片全部插入后的表格：
设置图片的链接：
第六步：
好了，从Dreamweaver里面看我们的工作已经差不多完成啦，下面点一下“代码”，切换到代码模式，依次按Ctrl-A、Ctrl-C把HTML源代码复制下来。然后到店铺管理里面，找到推广区，切换到源代码编辑模式，将复制的源代码粘贴进去就大功告成了～确定之前别忘了先预览一下有没有问题哦。
复制代码：
登录淘宝，进入“管理我的店铺”，找到促销区，填入：
至此淘宝网宝贝推销区就搞定啦！
|