淘寶自定義模塊代碼制作

淘寶旺鋪才有自定義模塊，如果你是普通店鋪請(qǐng)漂過，我的例子是展示9個(gè)產(chǎn)品，我就選了9格。

好了，載入圖片，效果如下。

然后把圖片保存，我們先把這個(gè)圖片叫做A圖片，一會(huì)有用的。

現(xiàn)在就可以關(guān)閉光影了。

打開DW,在向?qū)ы撁纥c(diǎn)擊新建HTML文件，開始我們的設(shè)計(jì)之旅。

可能已進(jìn)入界面我們都有點(diǎn)蒙，不要慌，特別簡(jiǎn)單，主要是我這帖子有圖片，哈哈。

有的軟件進(jìn)入界面是在代碼區(qū)，有的是在設(shè)計(jì)區(qū)。

如果是在代碼區(qū)，然后就點(diǎn)擊“設(shè)計(jì)”這個(gè)按鈕。

進(jìn)入設(shè)計(jì)頁面。

好了，設(shè)計(jì)頁面干干凈凈的，這樣我們看著就不會(huì)慌手慌腳了。

好了，料來咯。

我們點(diǎn)擊菜單欄插入選項(xiàng)，選擇圖像，這樣我們就能導(dǎo)入我們的圖片了，把剛才我們做好的9宮格式的廣告圖片導(dǎo)入。

看到設(shè)計(jì)窗口下面的屬性欄了嗎？就是這個(gè)。

找到里面有個(gè)“矩形熱點(diǎn)工具”，點(diǎn)他，然后把光標(biāo)移動(dòng)到圖片上，我們會(huì)發(fā)現(xiàn)光標(biāo)變成了一個(gè)小十字。

對(duì)了，這個(gè)跟QQ截圖很像，我們用它圈住圖片的一格。

然后我們會(huì)看見屬性欄變成了這個(gè)熱點(diǎn)的屬性，我們找到鏈接這欄，把我們對(duì)應(yīng)這款寶貝的地址填進(jìn)去。

這樣我們就完成了一個(gè)熱點(diǎn)，很像我們的超鏈接。

然后把9個(gè)格子的每個(gè)圖片都輸好它的地址。

這個(gè)時(shí)候我們要把設(shè)計(jì)按鈕改成代碼按鈕了。

現(xiàn)在我們看到的一堆代碼就是我們?cè)O(shè)計(jì)的這個(gè)簡(jiǎn)單的網(wǎng)頁了。

然后呢，我們先把我們那個(gè)A圖片，上傳到圖片空間里，提取圖片的地址。

馬上回來，到代碼頁面。

然后我們找到我圈起來的這行，這是圖片的地址，我們?cè)O(shè)計(jì)的時(shí)候，電腦提取的是我們電腦文件夾里的地址，我們要放到店里就要用網(wǎng)絡(luò)的地址，把剛才提取的地址替換我圈住的地址。

做完這步，我們就離成功很近很近咯。

現(xiàn)在我們把所有的代碼都圈上，復(fù)制。

OK，可以關(guān)閉DW了。

打開我們的店鋪，隨便點(diǎn)開一個(gè)寶貝。

點(diǎn)擊裝修頁面。

然后在上面的模塊管理中點(diǎn)添加模塊，添加一個(gè)“自定義內(nèi)容區(qū)”（這里需要說明下，我開了旺鋪，不知道是不是旺鋪才有這個(gè)版塊，其實(shí)開旺鋪是很必須的），保存。

然后我們?cè)谙旅嬲业阶远x內(nèi)容區(qū)板塊，編輯。

在編輯窗口點(diǎn)擊“編輯HTML源碼”這個(gè)選項(xiàng)。

把剛才我們復(fù)制的所有代碼粘貼進(jìn)去。

接著點(diǎn)保存。

然后在頁面的最右上角找到發(fā)布，點(diǎn)下去，確定。

完成。

你現(xiàn)在打開我們的寶貝詳情頁面是不是多了一個(gè)漂亮的廣告了。

我們還可以用同樣的原理把我們的左側(cè)欄利用上。

只不過左邊的圖片最好選用單張的長(zhǎng)方形圖片，我測(cè)了一下，圖片寬度在190最合適，高度可以隨便。

只有一點(diǎn)需要注意，那就是如果你打算主頁的側(cè)欄和寶貝詳情側(cè)欄不一樣的話，發(fā)布裝修方案的時(shí)候不要點(diǎn)擊這個(gè)，不然側(cè)欄會(huì)都變成主頁的側(cè)欄。

這個(gè)問題還有疑問的話，可以加幕.思.城火星老師免費(fèi)咨詢，微V.信X號(hào)是為: msc496。