打開fireworks，點擊界面右側的新建FIREWORKS文檔(綠色方框內)，
建立壹個寬度為800，高度可以視情況而定的畫布，建議顏色為“透明”或“白色”。
在界面的左上角處點擊文件-導入
找到自己要用的背景圖片，打開。(如果大家沒有合適的背景圖片的話，可以去我的店鋪裏面看看，有許多精品模板圖都沒加水印的，大家可以右鍵圖片另存為到自己的電腦上。)這時會出現壹個類似“「”的光標，通過它可以將導入圖片在整個畫布中的位置確定。
如上圖所示，妳也可以在界面的左下角找到四個數值填入框，其中寬度和高度表示的是導入圖片的大小，而
“X”表示的是導入圖片的最左邊距整塊畫布最左邊的距離(太過直白，也有點拗口，呵呵)，“Y”表示的就是
導入圖片的最上邊距整塊畫布最上邊的距離。填入妳需要的數值，確定圖片在整圖中的位置。
特別說明：因為考慮到部分用戶的顯示器分辨率為800*600，所以我們建的畫布寬度為800，高度1000也是可以
要據制作中的實際情況改變的。另外，導入的圖片寬度必須≤800。如果圖片寬度大於800，可以先在點擊左上角
處的文件-打開，找到圖片在FW中打開，然後在界面上方找到修改-畫布-圖像大小，再將像素尺寸的寬度改
為妳想要的尺寸，記得壹定要約束比例，要不圖片就變形了。
二、改變背景色
把畫布的顏色改為導入圖片的背景色，這會使畫布跟導入圖片看起來更像壹張完整的圖片。方法：點擊界面上方的修改-畫布-畫布顏色
在彈出窗口中選擇自定義，並在如圖所示的顏色定義框內點擊壹下，出現壹個類似筆的形狀，將它在導入圖片的背景顏色處點擊壹下，然後確定。現在畫布的背景色就協調了。
三、加入文字
根據妳自己的布局構思，在適當的地方用文本工具加入店名、店鋪鏈接(逛逛本店)、店鋪介紹等文字，壹定要考慮好整體布局哦～
點擊文本工具，在圖片中妳想要的位置拖動鼠標後會出現壹個矩形框，然後妳可以在操作界面的下方看到屬性選項
調整好文字大小，顏色，字體等，之後在矩形框內輸入妳的文字
另外，記得在寶貝展示、寶貝描述文字下分別留出壹定的空白地方來，不需要太多。
第三步完全做完後的成果圖
小提示，類似買家須知這種固定條款，可以直接在圖片上制作出來，單獨切片(馬上會講到)，以免每次填入這麽麻煩。
四、加入熱點
在需要添加鏈接的文字上加入熱點。
點擊如下圖所示的熱點工具之後，在文字上面拖動矩形框，得到壹個熱點框。如果未覆蓋到文字上，可直接用鼠標拖到文字上並覆蓋住。
加入矩形熱點工具後，選定這個矩形熱點，界面下方如圖所示的地方會有鏈接網址的設定，
“替代”指的是當鼠標放在所做的矩形熱點上時會出現的文字。目標指網址打開方式，_blank指在新窗口打開。
五、切片
把所有的熱點都做好之後，就要開始切片程序了。切片工具的位置在上圖中已做說明。
切片的時候要註意，有熱點的部分和各個文字部分要單獨切出來。(這壹步如有不懂的地方，可以問偶。因為有些東東偶也不曉得如何表達)
點擊矩形切片工具，(用鼠標按住切片工具，會出來兩個選擇，選矩形切片工具就OK了)會出現在壹個十字架狀的光標，然後將整張圖壹點點的切出來，切完之後如圖所示。
在界面下方的如圖所示的框壹內，“切片”二字下方的框表示的是妳所選中的切片的命名，寬度和高度就表示的
是所選中的切片的大小，然後X,Y也是定義此切片在整圖中的位置的。框二中，類型選擇為圖像，圖像格式選擇為
“JPEG-較高品質”。
六、導出為HTML文件
點擊操作界面左上角“文件-導出”
在彈出如圖所示的窗口，
文件名可自行設定，導出-HTML和圖像，導出切片，壹定要包括無切片區域並將圖片放入子文件夾，最後導出。
以下為DW應用部分，可能米米在此表述的不是很清楚，做為菜鳥，又想DIY做模板的話，可能不容易溝通，所以對於那些這或那的規矩，米米並沒有去框定，只是把步驟簡單的給列了出來。我會盡快想辦法，把下面的敘述部分描述得更清楚，如果有不懂的，敬請跟貼提問。
七、打開HTML文件(請詳細看看此步中，後來加上去的紅色字體部分)
打開DW工具，然後在如圖
所示的操作界面中，單擊“打開”菜單，找到剛剛保存好的HTML文件，打開。
然後在如圖所示的位置，
會看到有“代碼、拆分、設計”三個選項，選擇“拆分”。現在在界面中，上面部分就是HTML代碼，下面部分就是圖片模式了。
找到寶貝展示字樣的下的空白圖片的切片，選中它之後，上面的代表這個切片的代碼部分會被藍色覆蓋，將鼠標移到代碼部分，將此部分代碼“src="圖片位置"”中的圖片位置復制下來
Re: 開店如何制作寶貝描述模板
選中空白圖片切片之後，在代碼欄中會是類似於這部分代碼被藍色覆蓋 < 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 >
如果大家是直接從這裏復制代碼過去的話，請將每個“<”符號之後的空格都刪掉!
是壹個居中命令的代碼。可以加無數個< 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相冊(.yahoo.com)(無限量空間，但只支持JPG格式)還有很多好的相冊，但我也不知道，申明壹點的是網易相冊不支持外部鏈接!
十、使用代碼
上傳寶貝時，在寶貝描述欄中，點擊“編輯源文件”，然後從妳保存好的記事本中將代碼復制粘貼到編輯欄中，並將寶貝展示圖片的URL地址添加好，再切換回編輯器編輯，在寶貝描述字樣下面編輯寶貝描述