促銷(xiāo)區(qū)代碼制作：

1、找到我們昨天制作成功的HTML文件及image文件夾，如圖所示：

2、用Dreamweaver8.0打開(kāi)“促銷(xiāo)區(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/促銷(xiāo)區(qū)_03.gif，并在左邊設(shè)置寬為399，高為191，設(shè)置完畢之后，刪除單元格中的圖片，最終如下圖所示：

當(dāng)然，如果親們對(duì)Html語(yǔ)言熟悉的話(huà)，就可以直接手工改寫(xiě)代碼了。利用同樣的方法處理聯(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>&nbsp;&nbsp;&nbsp;&nbsp;本店所發(fā)貨物快遞默認(rèn)為申通快遞。若有特殊要求，請(qǐng)事先申明，不便之處敬請(qǐng)諒解！</strong>

<br/>

<strong>聲明：</strong>請(qǐng)各位買(mǎi)家在拍寶貝前務(wù)必先看清本店的退換貨政策（參加優(yōu)惠活動(dòng)的寶貝除商品質(zhì)量問(wèn)題外一律不予以退換），在拍之前務(wù)必請(qǐng)先詢(xún)問(wèn)客服此款是否有貨，以免造成不必要的麻煩。</font>

</marquee>

</span></font></font>

5、聯(lián)系我們內(nèi)容處理：這里主要留下店主的旺旺，QQ，手機(jī)等其他內(nèi)容，方便買(mǎi)家知道如何聯(lián)系。添加旺旺在線(xiàn)過(guò)程如下：

打開(kāi)http://www.taobao.com/help/wangwang/wangwang_0628_04.php進(jìn)入如下頁(yè)面：

自己選擇風(fēng)格、加入自己淘寶旺旺號(hào)碼，并選擇是生成網(wǎng)頁(yè)代碼還是生成論壇代碼。由于我們是加在促銷(xiāo)區(qū)，因此選擇生面網(wǎng)頁(yè)代碼。最后點(diǎn)“復(fù)制代碼”按鈕，就可得到旺旺在線(xiàn)的網(wǎng)頁(yè)代碼了。

當(dāng)獲得代碼之后，就將這些代碼粘貼到聯(lián)系我們的內(nèi)容區(qū)，并前QQ和手機(jī)及要補(bǔ)充的說(shuō)明加在此處，注意排版要美觀(guān)。最終如圖所示：

6、保存修改后的網(wǎng)頁(yè)內(nèi)容。

7、上傳圖片。由于淘寶不支持本地圖片，所以為了促銷(xiāo)區(qū)的圖片能正常顯示，我們要將images文件夾下的圖片全部上傳到自己申請(qǐng)的空間當(dāng)中。

8、用上傳的圖片替換促銷(xiāo)代碼中本地圖片。這里以上傳到www.51.com空間為例來(lái)說(shuō)明如何替換。

登錄51空間，找到自己上傳的圖片。(以促銷(xiāo)區(qū)_01.gif為例.)

在此圖下方有一個(gè)復(fù)制按鈕，點(diǎn)擊復(fù)制，就會(huì)得到促銷(xiāo)區(qū)_01.gif圖片的網(wǎng)絡(luò)地址。然后在Dreamweaver8.0中點(diǎn)擊“編輯”菜單，并選擇“查找和替換”。

出現(xiàn)如下對(duì)話(huà)框：

在查找框中輸入“images/促銷(xiāo)區(qū)_01.gif”，在替換框中粘貼剛才所復(fù)制的促銷(xiāo)區(qū)_01.gif圖片的網(wǎng)絡(luò)地址。

點(diǎn)擊“替換”按鈕即可完成促銷(xiāo)區(qū)_01.gif本地圖片的網(wǎng)絡(luò)替換。然后用同樣的方法，把所有的本地圖片全部用網(wǎng)絡(luò)地址替換過(guò)來(lái)。全部替換完畢后注意保存。

9、人氣寶貝區(qū)圖片展示區(qū)圖片及鏈接：在自家店中挑選幾款推薦寶貝在此區(qū)域展示，并讓賣(mài)家可以鏈接到寶貝描述頁(yè)面。具體操作如下：

(1)、打開(kāi)自家店鋪首頁(yè)：

比如，我現(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)，選擇“圖像”

親們對(duì)比上下兩個(gè)圖后就可以看出效果了。

(4)圖片鏈接制作：經(jīng)過(guò)以上步驟，只是把圖片插入了，當(dāng)買(mǎi)家用鼠標(biāo)點(diǎn)擊圖片時(shí)，并不能跳轉(zhuǎn)到寶貝描述頁(yè)面。為了能夠?qū)崿F(xiàn)跳轉(zhuǎn)，就必須對(duì)圖片施加鏈接。

首先回到我們網(wǎng)店首頁(yè)所選寶貝所在位置。將鼠標(biāo)移到寶貝下面的超鏈接上，點(diǎn)擊鼠標(biāo)右鍵，彈出菜單，在彈出菜單中選擇“復(fù)制快捷方式”。

其次，轉(zhuǎn)到Dreamweaver8.0中，在設(shè)計(jì)區(qū)，用鼠標(biāo)單擊剛才插入寶貝圖片，如下圖所示：

最后，在紅色方框所示的鏈接對(duì)話(huà)框中，將剛才復(fù)制的快捷方式粘貼到此對(duì)話(huà)框中，這樣就完成了圖片鏈接的工作。

按照同樣的方式，多加幾個(gè)寶貝圖片，并完成鏈接工作。

此時(shí)，我們會(huì)發(fā)現(xiàn)，所插入的圖片已經(jīng)把人氣寶貝區(qū)撐開(kāi)了，這是因?yàn)槲覀兯迦氲膱D片的總寬度已經(jīng)大于人氣寶貝展示區(qū)的寬度，這并沒(méi)有關(guān)系。為了解決這個(gè)問(wèn)題，我們現(xiàn)在就讓人氣寶貝只在規(guī)定區(qū)域里滾動(dòng)展示。

將<marquee behavior="alternate" scrollamount="2" scrolldelay="0" width="642" >代碼在代碼區(qū)中加到第一個(gè)寶貝圖片前。

將</marquee>在代碼區(qū)中加到最后一個(gè)寶貝圖片后面位置。

這段代碼就是讓我們所插入的圖在寬度為642的人氣寶貝展示區(qū)里左右來(lái)回滾動(dòng)。

10、當(dāng)所有工作完畢后，在Dreamweaver8.0的代碼區(qū)里，將<!-- ImageReady Slices (促銷(xiāo)區(qū).psd) -->和<!-- End ImageReady Slices -->之間的代碼全部選定，并復(fù)制下來(lái)，然后用記事本新建一個(gè)文本文檔，并將所復(fù)制代碼粘貼到新建文本中，以txt格式保存?zhèn)溆谩?/p>

到此為止我們的促銷(xiāo)區(qū)制作大功告成。最終效果圖如下：

彈出如下對(duì)話(huà)框：

在出現(xiàn)的對(duì)話(huà)框中，將URL：文本框中的內(nèi)容全部清空，把我們剛才拷貝的圖片地址粘貼到此對(duì)話(huà)框中。

點(diǎn)擊確定，即完成了人氣寶貝的圖片插入。

細(xì)心的親們會(huì)發(fā)現(xiàn)，在圖上紅色框中有兩組數(shù)據(jù)，一組為width = 642 height = 145，這組數(shù)據(jù)是說(shuō)明我們的人氣寶貝展示區(qū)的寬為642，高為145；另一組數(shù)據(jù)為width = 160，height = 159，這組數(shù)據(jù)是說(shuō)明我們插入的圖片寬為160，高為159。這就說(shuō)明我們的圖片過(guò)大，為了不撐破表格，就必須將圖片的寬和高兩個(gè)數(shù)據(jù)都改為小于145，比如改為140。修改完畢后，就能保證圖片不會(huì)把人氣寶貝區(qū)的表格撐破。如下圖所示：

樂(lè)發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠(chǎng)商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則

本文來(lái)源： 旺鋪裝修攻略(5):促銷(xiāo)區(qū)模板代碼制作教程