促銷區(qū)代碼制作：
1、找到我們昨天制作成功的HTML文件及image文件夾，如圖所示：
2、用Dreamweaver8.0打開“促銷區(qū).html”文件。并切換到“拆分”模式。在此模式下，上半部分為代碼區(qū)，下半部分為設(shè)計(jì)區(qū)。
3、單元格背景制作：由于店鋪公告區(qū)要添加內(nèi)容，為了避免使用層，就必須把店鋪公告出文字內(nèi)容區(qū)的圖片設(shè)為單元格背景。用鼠標(biāo)在設(shè)計(jì)區(qū)點(diǎn)擊店鋪公告文字出現(xiàn)區(qū)。如圖所示：
然后，將鼠標(biāo)點(diǎn)擊代碼區(qū)如上圖所示紅方框前的<td>單元格標(biāo)記的td之后。
此時(shí)可以看到在屏幕下方出現(xiàn)單元格背景框。在背景框內(nèi)填入images/促銷區(qū)_03.gif，并在左邊設(shè)置寬為399，高為191，設(shè)置完畢之后，刪除單元格中的圖片，最終如下圖所示：
當(dāng)然，如果親們對Html語言熟悉的話，就可以直接手工改寫代碼了。利用同樣的方法處理聯(lián)系我們及人氣寶貝的內(nèi)容展區(qū)單元格圖片。
4、店鋪公告文字顯示：將此段代碼放在店鋪公告文字出現(xiàn)區(qū)。
<font color="#0099FF"><font size="5"><span style="line-height:1.5;">
<marquee direction="up" scrollamount="1" scrolldelay="0" height="180" width="399" style="position:relative;">
<br /><font LETTER-SPACING: 0.4pt; COLOR: black;">楷體_GB2312"><strong> 本店所發(fā)貨物快遞默認(rèn)為申通快遞。若有特殊要求，請事先申明，不便之處敬請諒解！</strong>
<br/>
<strong>聲明：</strong>請各位買家在拍寶貝前務(wù)必先看清本店的退換貨政策（參加優(yōu)惠活動(dòng)的寶貝除商品質(zhì)量問題外一律不予以退換），在拍之前務(wù)必請先詢問客服此款是否有貨，以免造成不必要的麻煩。</font>
</marquee>
</span></font></font>
5、聯(lián)系我們內(nèi)容處理：這里主要留下店主的旺旺，QQ，手機(jī)等其他內(nèi)容，方便買家知道如何聯(lián)系。添加旺旺在線過程如下：
打開http://www.taobao.com/help/wangwang/wangwang_0628_04.php進(jìn)入如下頁面：
自己選擇風(fēng)格、加入自己淘寶旺旺號碼，并選擇是生成網(wǎng)頁代碼還是生成論壇代碼。由于我們是加在促銷區(qū)，因此選擇生面網(wǎng)頁代碼。最后點(diǎn)“復(fù)制代碼”按鈕，就可得到旺旺在線的網(wǎng)頁代碼了。
當(dāng)獲得代碼之后，就將這些代碼粘貼到聯(lián)系我們的內(nèi)容區(qū)，并前QQ和手機(jī)及要補(bǔ)充的說明加在此處，注意排版要美觀。最終如圖所示：
6、保存修改后的網(wǎng)頁內(nèi)容。
7、上傳圖片。由于淘寶不支持本地圖片，所以為了促銷區(qū)的圖片能正常顯示，我們要將images文件夾下的圖片全部上傳到自己申請的空間當(dāng)中。
8、用上傳的圖片替換促銷代碼中本地圖片。這里以上傳到www.51.com空間為例來說明如何替換。
登錄51空間，找到自己上傳的圖片。(以促銷區(qū)_01.gif為例.)
在此圖下方有一個(gè)復(fù)制按鈕，點(diǎn)擊復(fù)制，就會(huì)得到促銷區(qū)_01.gif圖片的網(wǎng)絡(luò)地址。然后在Dreamweaver8.0中點(diǎn)擊“編輯”菜單，并選擇“查找和替換”。
出現(xiàn)如下對話框：
在查找框中輸入“images/促銷區(qū)_01.gif”，在替換框中粘貼剛才所復(fù)制的促銷區(qū)_01.gif圖片的網(wǎng)絡(luò)地址。
點(diǎn)擊“替換”按鈕即可完成促銷區(qū)_01.gif本地圖片的網(wǎng)絡(luò)替換。然后用同樣的方法，把所有的本地圖片全部用網(wǎng)絡(luò)地址替換過來。全部替換完畢后注意保存。
9、人氣寶貝區(qū)圖片展示區(qū)圖片及鏈接：在自家店中挑選幾款推薦寶貝在此區(qū)域展示，并讓賣家可以鏈接到寶貝描述頁面。具體操作如下：
(1)、打開自家店鋪首頁：
比如，我現(xiàn)在要把106紅這款寶貝放到人氣寶貝中。在自家店鋪找到這款寶貝，將鼠標(biāo)移到這款寶貝圖片上面，點(diǎn)擊鼠標(biāo)右鍵，彈出菜單，如下圖所示
選擇“復(fù)制圖片地址”項(xiàng)，就可以得到這款寶貝的網(wǎng)絡(luò)圖片地址。
（2）、轉(zhuǎn)到Dreamweaver8.0中，在設(shè)計(jì)區(qū)，用鼠標(biāo)單擊人氣寶貝圖片展示區(qū)，如下圖所示：
（3）、在Dreamweaver8.0的單擊“插入”菜單項(xiàng)，選擇“圖像”
親們對比上下兩個(gè)圖后就可以看出效果了。
(4)圖片鏈接制作：經(jīng)過以上步驟，只是把圖片插入了，當(dāng)買家用鼠標(biāo)點(diǎn)擊圖片時(shí)，并不能跳轉(zhuǎn)到寶貝描述頁面。為了能夠?qū)崿F(xiàn)跳轉(zhuǎn)，就必須對圖片施加鏈接。
首先回到我們網(wǎng)店首頁所選寶貝所在位置。將鼠標(biāo)移到寶貝下面的超鏈接上，點(diǎn)擊鼠標(biāo)右鍵，彈出菜單，在彈出菜單中選擇“復(fù)制快捷方式”。
其次，轉(zhuǎn)到Dreamweaver8.0中，在設(shè)計(jì)區(qū)，用鼠標(biāo)單擊剛才插入寶貝圖片，如下圖所示：
最后，在紅色方框所示的鏈接對話框中，將剛才復(fù)制的快捷方式粘貼到此對話框中，這樣就完成了圖片鏈接的工作。
按照同樣的方式，多加幾個(gè)寶貝圖片，并完成鏈接工作。
此時(shí)，我們會(huì)發(fā)現(xiàn)，所插入的圖片已經(jīng)把人氣寶貝區(qū)撐開了，這是因?yàn)槲覀兯迦氲膱D片的總寬度已經(jīng)大于人氣寶貝展示區(qū)的寬度，這并沒有關(guān)系。為了解決這個(gè)問題，我們現(xiàn)在就讓人氣寶貝只在規(guī)定區(qū)域里滾動(dòng)展示。
將<marquee behavior="alternate" scrollamount="2" scrolldelay="0" width="642" >代碼在代碼區(qū)中加到第一個(gè)寶貝圖片前。
將</marquee>在代碼區(qū)中加到最后一個(gè)寶貝圖片后面位置。
這段代碼就是讓我們所插入的圖在寬度為642的人氣寶貝展示區(qū)里左右來回滾動(dòng)。
10、當(dāng)所有工作完畢后，在Dreamweaver8.0的代碼區(qū)里，將<!-- ImageReady Slices (促銷區(qū).psd) -->和<!-- End ImageReady Slices -->之間的代碼全部選定，并復(fù)制下來，然后用記事本新建一個(gè)文本文檔，并將所復(fù)制代碼粘貼到新建文本中，以txt格式保存?zhèn)溆谩?/p>
到此為止我們的促銷區(qū)制作大功告成。最終效果圖如下：
彈出如下對話框：
在出現(xiàn)的對話框中，將URL：文本框中的內(nèi)容全部清空，把我們剛才拷貝的圖片地址粘貼到此對話框中。
點(diǎn)擊確定，即完成了人氣寶貝的圖片插入。
細(xì)心的親們會(huì)發(fā)現(xiàn)，在圖上紅色框中有兩組數(shù)據(jù)，一組為width = 642 height = 145，這組數(shù)據(jù)是說明我們的人氣寶貝展示區(qū)的寬為642，高為145；另一組數(shù)據(jù)為width = 160，height = 159，這組數(shù)據(jù)是說明我們插入的圖片寬為160，高為159。這就說明我們的圖片過大，為了不撐破表格，就必須將圖片的寬和高兩個(gè)數(shù)據(jù)都改為小于145，比如改為140。修改完畢后，就能保證圖片不會(huì)把人氣寶貝區(qū)的表格撐破。如下圖所示：
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺(tái),是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則
