在阅读这个教程前首先需要做一些准备，第一要准备相应的装修工具，我是用的Firewoks 和Dreamwear；第二要准备好装修必须的素材。一切准备就绪后，我们就可以开始宝贝描述模板制作之旅了。（所有的图我都会以绿色框标明关键处）

一、建立FW文档
打开fireworks，可以看见如下界面，

点击界面右侧的新建FIREWORKS文档（绿色方框内），
建立一个宽度为800，高度为1000的画布，建议颜色为“透明”或“白色”。

在界面的左上角处点击文件－导入

找到自己要用的背景图片，打开。这时会出现一个类似“「”的光标，通过它可以将导入图片在整个画布中的位置确定。

如上图所示，你也可以在界面的左下角找到四个数值填入框，其中宽度和高度表示的是导入图片的大小，而“X”表示的是导入图片的最左边距整块画布最左边的距离（太过直白，也有点拗口，呵呵），“Y”表示的就是导入图片的最上边距整块画布最上边的距离。填入你需要的数值，确定图片在整图中的位置。
特别说明：因为考虑到部分用户的显示器分辨率为800*600，所以我们建的画布宽度为800，高度1000也是可以要据制作中的实际情况改变的。另外，导入的图片宽度必须≤800。如果图片宽度大于800，可以先在点击左上角处的文件－打开，找到图片在FW中打开，然后在界面上方找到修改－画布－图像大小，再将像素尺寸的宽度改为你想要的尺寸，记得一定要约束比例，要不图片就变形了。

二、改变背景色

把画布的颜色改为导入图片的背景色，这会使画布跟导入图片看起来更像一张完整的图片。方法：点击界面上方的修改－画布－画布颜色

在弹出窗口中选择自定义，并在如图所示的颜色定义框内点击一下，出现一个类似笔的形状，将它在导入图片的背景颜色处点击一下，然后确定。现在画布的背景色就协调了。

三、加入文字
根据你自己的布局构思，在适当的地方用文本工具加入店名、店铺链接（逛逛本店）、店铺介绍等文字，一定要考虑好整体布局哦～

点击文本工具，在图片中你想要的位置拖动鼠标后会出现一个矩形框，然后你可以在操作界面的下方看到属性选项

调整好文字大小，颜色，字体等，之后在矩形框内输入你的文字

.另外，记得在宝贝展示、宝贝描述文字下分别留出一定的空白地方来，不需要太多。
第三步完全做完后的成果图

小提示，类似买家须知这种固定条款，可以直接在图片上制作出来，单独切片（马上会讲到），以免每次填入这么麻烦。

四、加入热点
在需要添加链接的文字上加入热点。

点击如下图所示的热点工具之后，在文字上面拖动矩形框，得到一个热点框。如果未覆盖到文字上，可直接用鼠标拖到文字上并覆盖住。

加入矩形热点工具后，选定这个矩形热点，界面下方如图所示的地方会有链接网址的设定，

“替代”指的是当鼠标放在所做的矩形热点上时会出现的文字。目标指网址打开方式，_blank指在新窗口打开。

五、切片
把所有的热点都做好之后，就要开始切片程序了。切片工具的位置在上图中已做说明。
切片的时候要注意，有热点的部分和各个文字部分要单独切出来。（这一步如有不懂的地方，可以问偶。因为有些东东偶也不晓得如何表达）
点击矩形切片工具，（用鼠标按住切片工具，会出来两个选择，选矩形切片工具就OK了）会出现在一个十字架状的光标，然后将整张图一点点的切出来，切完之后如图所示。

在界面下方的如图所示的框一内，“切片”二字下方的框表示的是你所选中的切片的命名，宽度和高度就表示的是所选中的切片的大小，然后X,Y也是定义此切片在整图中的位置的。框二中，类型选择为图像，图像格式选择为“JPEG－较高品质”。

六、导出为HTML文件
点击操作界面左上角“文件－导出”

在弹出如图所示的窗口，

文件名可自行设定，导出－HTML和图像，导出切片，一定要包括无切片区域并将图片放入子文件夹，最后导出。

以下为DW应用部分，可能晶晶在此表述的不是很清楚，大多数人都是看到这里来卡壳的。对于FW和DW偶也是自学的，所以在后面也有行家对晶晶进行了批评。偶也非常不好意思。偶的想法是，同样做为菜鸟，又想DIY做模板的话，可能更容易沟通一点，所以对于那些这或那的规矩，晶晶并没有去框定，只是把步骤简单的给列了出来。我会尽快想办法，把下面的叙述部分描述得更清楚，如果有不懂的，敬请跟贴提问。

七、打开HTML文件(请详细看看此步中，后来加上去的红色字体部分）

打开DW工具，然后在如图

所示的操作界面中，单击“打开”菜单，找到刚刚保存好的HTML文件，打开。

然后在如图所示的位置，

会看到有“代码、拆分、设计”三个选项，选择“拆分”。现在在界面中，上面部分就是HTML代码，下面部分就是图片模式了。

找到宝贝展示字样的下的空白图片的切片，选中它之后，上面的代表这个切片的代码部分会被蓝色覆盖，将鼠标移到代码部分，将此部分代码“src="图片位置"”中的图片位置复制下来

选中空白图片切片之后，在代码栏中会是类似于这部分代码被蓝色覆盖 < img name="n7"  src="images/7.jpg"  width="800" height="77" border="0" id="n7" alt=""  /> ，（src＝""引号中的文字即代表的是图片在电脑本地地址，在最后images里的图片上传到相册里后，要一一换成相对应的URL 地址的，这是后话。）

将刚被覆盖的< img name="n7"  src="images/7.jpg"  width="800" height="77" border="0" id="n7" alt=""  /> 这串代码保留src=""引号中的图片地址后，其它全删掉。然后直接手动加入如下代码 background="images/7.jpg" background-reapeat:reapeat-y （background=""引号中即刚刚保留的图片本地地址）到< td  colspan="4" >（引号内未必是数字4，也可能是其他数字）中来，添加好之后的样子应该是这样子的< td colspan="4"  background="images/7.jpg" background-reapeat:reapeat-y>。

因为是要进行宝贝图片的展示，那么就要加入图片展示代码<  img src="宝贝图片的URL地址" / >，加完之后应该是类似于这个样子< td colspan="4"  background="images/7.jpg" background-reapeat:reapeat-y >< div align=center > <  img src= " 宝贝图片展示地址"/>< /div > 如果你在进行宝贝编辑的过程中希望加入更多的图片，那么同样是用图片展示代码来表现的。

其中< div align=center><  /div>是一个居中命令的代码。可以加无数个< td colspan="4"  background="images/7.jpg" background-reapeat:reapeat-y >< div align=center > <  img src= " 宝贝图片展示地址"/>< /div >< div align=center > <  img src= " 宝贝图片展示地址"/>< /div >< div align=center > <  img src= " 宝贝图片展示地址"/>< /div >

如果大家是直接从这里复制代码过去的话，请将每个“<”符号之后的空格都删掉！ 

然后删掉刚刚被蓝色覆盖的这部分代码，

并在这部分加上引号中（不包括“”的如下代码　<　div align="center"　>　<　img src="宝贝展示图片的URL地址"/　>　。在刚刚改好的这串代码前面的“>”符号前加入下面引号中的如下代码“background="刚刚复制的图片位置" background-reapeat:reapeat-y”。

这一步的作用是把这部分切片变成了背景图，并且无论你的宝贝展示图片有多大，都不会撑破表格（除非宝贝展示图片大过了整个图片的宽度800）。
再找到宝贝描述下的空白图片，将蓝色区域中的代码删掉，然后把“background="刚刚复制的图片位置" background-reapeat:reapeat-y”了复制到相同位置。此时不用加入图片链接代码，到时在宝贝描述编辑器中直接加入描述文字就OK了。

八、保存代码
全部完成之后，将界面切换到代码模式，（跟第七步切换到拆分模式的方法相同），打开记事本程序，将代码全选，点鼠标右键选择拷贝，然后粘贴到记事本中，保存。

九、上传图片

打开HTML文件所在的文件夹，找到images子文件夹，将里面的除一个名为“spacer"外的所有图片上传到你的相册里去。（这个SPACER可以忽略不计）然后再记事本里找到除“spacer.jpg”外的所有以jpg结尾的图片，换成其相对应的url地址，再将此代码保存。

特别提示：相册必须是支持外部链接的相册，如265相册（http://my.265.com)（支持JPG和GIF格式，但只有50M使用空间）或YAHOO相册（http://cn.yahoo.com）（无限量空间，但只支持JPG格式）还有很多好的相册，但我也不知道，申明一点的是网易相册不支持外部链接！

十、使用代码

上传宝贝时，在宝贝描述栏中，点击“编辑源文件”，然后从你保存好的记事本中将代码复制粘贴到编辑栏中，并将宝贝展示图片的URL地址添加好，再切换回编辑器编辑，在宝贝描述字样下面编辑宝贝描述文字，并进行排版，最后保存。完毕～

常见问题汇总答：

Q1.楼主提供的两个地址已无法下载，怎么办？

A1如果已无法下载，我就无能为力。但大家去华军软件园或天空软件去搜搜这两个软件，应该能搜到的。所以关于地址下载问题，请不要再提问；值得注意的是，太菜的菜鸟建议买碟回来安装，以免发生电脑中毒事件，反而因小失大。我只建议大家去这两个地方下载，中毒的可能性相对较小。因为我自己也是在天空下载的，没有任何问题。

Q2.下载得来的两个相关软件都是试用版的，怎么办？

A2.既然能下载到工具，就不怕是试用版的。去百度www.baidu.com搜一下dreamweaver8.0或fireworks8.0序列号，你可以得到很多。为了避免中毒，不要点开那些网站，直接在搜索页面上将搜到的序列号复制过去注册就行了。请不要再来问我，我也是搜出来的，并没有保存。

Q3.为什么我的电脑里没有这些漂亮的字体呢？

A3.这些漂亮的字体并不是系统自带的，是楼主在一个 中国下载站的字体下载中心（http://font.chinadownz.com/Index.Html）下载来的。选择中文字体下载，里面都有每种字体的范例的，选中你喜欢的字体，然后下载。下载完毕得到压缩文件，解压之后，把字体安装文件复制粘贴到c:\windows\fonts文件夹里即可。

Q4.为什么有一些字体我下载了之后用的时候，很多字都无法显示呢?

A4.部分字体比如华康，文鼎之类的字体，一定要用繁体输入法输入才可以全部显示哦.所以发生这种情况的时候，把输入法设置改一下吧.

Q5.图片的URL地址是什么意思？

A5.利用fireworks工具把模板初步做好之后，在DW里打开时，图片的位置都是在电脑里的相对位置，这个时候如果直接把代码传到网上，除了你自己之后，其他任何人都是看不见图片的。而URL地址则是指网络上的一个绝对地址，当你把图片传到相册里去后，那么每张图片都有它自己的URL，通过这个可以找到它，打开单张图片点击鼠标右键-属性-URL地址复制可得到。

Q6.为什么我传到相册里后还是看不见图片？

A6.你必须保证你的相册是支持外部链接的相册才行，否则是无法显示的。强烈推荐楼主使用的265相册， (http://my.265.com)，除了有空间限制外，用起来感觉挺好的。另外，存放你图片的相册目录一定要设为共享，要不然也是看不见的。YAHOO的可以用，但发现除了我自己用的时候出问题，还有好多淘友用了之后也出问题，而且YAHOO的图片经常无法显示，想想看，一个挺漂亮的模板却出现的是大红叉多不爽.

Q7.到了用DW的地方，我就看不懂楼主在讲些啥了，能不能讲得详细点？

A7.如果不懂，先看看我后来用红色的字体添加的那部分，如果还是不懂的话，提问的时候把你的代码在跟贴提问的时候直接提交上去。在哪不懂的注明一下，这样到时我解答的时候会更方便！

如果因为我的表达不清给您带来麻烦，到最后，模板没做好，还造成了时间的浪费，请您见谅！

Q8.代码做好后，预览的时候是好的，但传到淘宝上面发现有空白图片该怎么办？

A8.空白图片的存在最大的可能性是图片地址产生了一些乱码，因为之前楼主在自己研究的过程中也发生过这种情况，后来发现是因为在从记事本里复制到淘宝里的时候，自动换行的地方产生了乱码。所以如果发生这种情况，请将记事本里格式-自动换行这个勾去掉，然后再复制粘贴过去试试。

欢迎读者们进入QQ群：29571322来一起探讨！