網頁制作技術在淘寶網網店裝修中的應用

摘要:該文介紹了如何運用網頁制作技術來制作淘寶網網店裝修，并給出了一個實例。

關鍵詞:dreamweaver;網店裝修;網頁制作

中圖分類號:TP18文獻標識碼:A文章編號:1009-3044(2009)36-10216-02

隨著網絡店鋪的不斷增加，網店裝修師這個時尚職業也越來越受歡迎。一個優秀的網店除了要有自己一些特色的商品外，還需要擁有一個吸引客戶的店面裝修。這樣才能戶一眼就讓客戶吸引，從而對商品感興趣。

1 需求分析

目前，大學生的就業前景并不理想，很多的年輕人都喜歡到網絡上開小店創業，這就使網絡裝修師這個新型職業越來越被看好。而從事網絡“裝修”并不需要多少資金，只需要一臺先進的電腦就可以了。還有這個職業不需要朝九晚五的固定上班制度和風吹雨打的跑來跑去，因此深受現代“宅男宅女”的歡迎。隨著網店的不斷增多，網店裝修已經逐漸成為建立網店的必不可少的流程，網店裝修模板的設計在網頁設計中已經慢慢成型，網絡上有很多現成的漂亮模板下載，我們只需適當修改就能成為我們店鋪所需要的模板，如何將現成的模板變成淘寶網店所需的代碼呢，成為了每個網店裝修者必不可少的一個過程。本文就此問題詳細講述了如何使用我們所學到的網頁制作知識將網店靜止的圖片轉換成為我們淘寶網中所使用的代碼的過程。

2 制作方法

2.1 準備工作

firework 8.0(或者photoshop)軟件一個，dreamweaver 8.0軟件，50M網絡空間一個及指向空間的固定域名一個。此外，準備好一套淘寶網靜態圖片模板，一般來說，一套模板包括店招(標題欄)、促銷欄目、描述欄、分類欄。網頁制作的知識主要應用在促銷欄目和描述欄目上面。

2.2 制作步驟

現在以促銷欄部分為例，來講解如何將制作好的模板圖片轉化成為我們淘寶網店所需要的代碼。

第一步:將促銷欄用firework 8.0軟件或者photoshop cs2軟件打開，現在以firework 8.0軟件為例來講述如何使用切片工具來給圖形切片，如圖1所示。

促銷欄圖片一般有新品上市、公告欄以及人氣商品三個欄目。

切片經驗:一般在需要填充內容的地方進行切片，切片完成后的最終切片效果為圖2。

第二步:在firework 8.0中導出圖像為html和圖像模式，如圖3。

這一步:我們的圖片轉化成了網頁，并且取名為index.htm。

第三步:將頁面通過dreamweaver軟件打開index.htm網頁文件。將要做文字，插入跑馬燈以及圖片的地方的圖片的地址復制。然后將要做文字，插入跑馬燈以及圖片的地方的圖片刪掉。將原圖片的地址粘貼到被刪除的圖片背景地址。這一步，將文字及圖片的插入區圖片轉換成背景圖片。

注意:我們的背景單元格的高度要與源圖像的高度要一樣大小。

第四步:在各個單元格內插入跑馬燈、圖片以及文字。滾動文字的制作:插入如下代碼:歡迎光臨本店!!!。由于淘寶網不支持css層疊樣式，所以文字以及圖片的樣式只能寫在內部的style樣式中。注意:滾動文字的文字大小不能高于文字所在的單元格的高度。滾動圖片的制作:在新品上市單元格中插入如下代碼: ;為了讓圖片橫排，在樣式中加入了浮動向左，在公告欄的單元格中加入向上的滾動文字代碼: 好消息:新店開張，大量產品優惠活動進行中!!!。圖文混排單元格的代碼為:

第五步:將圖片文件夾中的所有圖片上傳到網絡空間中，比如上傳到www.51.com空間中，并且在空間中找出所有圖片的縮短地址，比如:1.gif的縮短地址為:

http://p4.images22.51img1.com/6000/panbiao20086/1.gif

第六步:將index.htm的網頁文件使用記事本打開，將所有圖片的地址全部改成網絡中的絕對地址。完成促銷頁面轉化成代碼的過程。

第七步:使用同樣的方法切片和修改代碼的方法來制作描述頁面的代碼。注意:在切片的處理中，由于描述頁面中的文字可能會較長，文字部分的切片必須頂左右邊框切片。

典型問題:網頁中產生裂縫瑕疵，原因分析:

第一、跑馬燈，圖片，文字插入區單元格的高度以及寬度與原圖像的高度寬度不一致。

第二、跑馬燈、圖片，文字的高度以及寬度比插入區單元格的高度及寬度要大。

解決方法:

第一、將跑馬燈，圖片，文字插入區單元格的高度以及寬度與原圖像的高度寬度保持完全一致。

第二、將跑馬燈、圖片，文字的高度以及寬度設置的比插入區單元格的高度及寬度要小。

3 結論

以上我們通過一個例題來講述了如何利用我們網頁制作的三劍客軟件:firework 8.0軟件以及dreamweaver 8.0軟件來進行網店裝修，將我們的靜態模板轉換成為淘寶網網店所需的代碼，并且就網店裝修中所容易出現的問題做出了解決方案。

參考文獻:

[1] 姜楠.dreamweaver 8 完美網頁設計與制作[M].北京:中國青年出版社，2006.

[2] 張曉景.DIV+CSS網頁布局商業案例精粹[M].北京:電子工業出版社，2007.