冠聚金服:如何制作带滚动字体和图片的宝贝描述模板

需要的软件一个是photoshop CS2 也就是所说的PS，我用的是老版的，因为有切片的功能。另一个就是Dreamweaver MX,这2款软件在网上有好多的下载，大家搜下就可以了。

第一步 打开PS，新建立一个模板页面，我设定的宽度是646（我是按照收费模板的宽度设定的），高800.宽度最好是不要超过1000，长度根据个人需要可以任意的。

       创建完成后，打开需要做模板的素材。这里我要说下我的素材是怎么来的。我在网上找到了一个适合自己商品和店铺风格的模板，不过是收费的，只能免费使用10天，马上到期了，我又不想花钱买，没有办法，所以只能根据收费的模板自己做了这个可以免费使用的，呵呵。我把模板顶部的图案剪切保存下来，下面把准备好的图案打开。
点选“矩形选框工具”选出要移动的素材，

然后点“移动工具”，把选中的素材拖动到之前新建立的模板里，调整好位置。

下面依次按照刚才的方法把宝贝描述，买家须知，邮费说明和联系方法拖到新建文件的空白处，并调整好位置。

大概的雏形出来了吧，我们先保存下。格式选JPEG。弹出选择需要的图像品质后点确定。

第二步 切片  为了能在不同的位置添加图片或者文字，也为了打开网页时提高显示的速度，就要把刚才
的模板切成一块块的小图，分别把这些小图传到相册里。

用刚才的模板，找到PS功能栏最下面的ImageReady，点击，进入ImageReady界面

切片是挺复杂的，没用过的新手可以多尝试几次就会熟悉了。我们要把需要插入图片和文字的地方都单独的切下来。

首先在菜单中选择“切片”-“划分切片”添入切片的片数，

点击左侧功能栏中的‘切片选择工具’，移动到图中黄色小点上鼠标会变成箭头状，拉动切割线调整到适当的位置。

如果要把02区分成3片，先选中02区，然后选切片，弹出的框中可以调整02区的切片。

同样用刚才的方法把刚分出来的04区再上下分为两区

模板图中黄色的地方是要填写滚动字体的地方，绿色的地方是要添加滚动图片的，所以切片的时候都要把添加的位置划分出来。下面宝贝描述等的空白地方是要填入文字所以也都要划分出来。

划分好之后返回PS，在功能栏中选中切片工具，这时候就能看到分区了。

接下来就是把划分好的切片保存起来。菜单栏点“文件”-“存储为WEB所用格式”弹出框中选JPEG格式。

保存类型选“HTML和图像”

保存完之后就可生成一个存放切片的文件夹和一个HTML网页。

三步  打开dreamweaver 打开刚才保存的HTML网页，进入设计页面

首先为店铺首页 信用评价 个人空间 收藏本店 做链接

找到左下角的矩形热点工具 在要添加链接的图片中拉出一个矩形区域，

在下面属性中的链接处添加上链接的网址和相关选项

点击宝贝描述下的切片区域，这里是要添加字体和图片的，所以要把它专程成表格形式，这样不管我们插入的图片多大，表格都能无限的拉伸开。先点击选中的空白区域（注意看下面属性栏中的高和宽，记录下来）

然后按住键盘的DEL删除键，接着找到工具栏中的表格，插入表格

在弹出的表格对话框中输入之前记下的宽度

点选背景，在下面属性栏中输入之前记下的高度

完成后是下面这样的，注意看买家须知下面的框是虚的。

按照上面的做法依次将需要插图和写字的切片都转成表格的形式。注意添加滚动字体和滚动图片的地方不要改。

下面进入最重要的部分，如何添加上滚动的字体和图片

首先把设计页面转换成拆分页面，这样我们能够更直观的看到我们所改动后的效果，有不对的地方也可以及时的更正。

选中要添加字的切片，这时你会发现上面代码区会有部分代码变黑了，这些代码就是切片区域的代码。

也是要改动这里使他成为滚动代码的。我利用之前收费的模板，找到了滚动字体部分的代码（MARQUEE是滚动的代码，找到了这个单词就意味着它之后的部分都是滚动的部分，它之前还有些TBODY TR TD 我也不知道什么意思，反正都复制过来了。这个地方一定要细心，多对比下就会发现的）把这些代码替换掉黑色部分的代码就可以了

注意代码里的几个数值，改成我们规定的大小。MARQUEE是滚动 scrollDelay是滚动的时间  direction是方向 width是宽

height是高  face是字体 color是颜色 size是字体的大小  根据我们切分区域的大小来修改这些数值。改动之后是这样的

这时你会发现图中切分的区域不是特别的紧密会出现裂缝，先不要着急改动，我是先把代码导出来，复制到淘宝描述的代码编辑器中，看看实际的效果后在做改动。这里看是有裂缝实际上传宝贝的时候是没有裂缝的，如果要是有的话只需要调整宽度的数值即可了。

滚动图片的区域也是这样修改代码的，只不过是滚动的方向不同，要把代码改成behavior=alternate  需要注意的是滚动图片的大小，如果不确定数值可以先用收费的模板试用下，就能确定出来图片的大小了。

到这里我们需要添加的区域都已经改动好了，下一步也是十分重要的一部，就是导出代码，很重要的哦，一定要保存好，

由拆分页面切换到代码页面，复制代码到淘宝描述的代码编辑器中

把代码粘贴到代码编辑器之前，首先要把所有的宝贝模板切片上传到相册中，只要把代码中标示的模板地址，如图：  改成相册中的地址即可。修改后预览下，终于大功告成了，呵呵，看下成果吧。