網(wǎng)頁(yè)制作技術(shù)在淘寶網(wǎng)網(wǎng)店裝修中的應(yīng)用

摘要:該文介紹了如何運(yùn)用網(wǎng)頁(yè)制作技術(shù)來(lái)制作淘寶網(wǎng)網(wǎng)店裝修，并給出了一個(gè)實(shí)例。

關(guān)鍵詞:dreamweaver;網(wǎng)店裝修;網(wǎng)頁(yè)制作

中圖分類號(hào):TP18文獻(xiàn)標(biāo)識(shí)碼:A文章編號(hào):1009-3044(2009)36-10216-02

隨著網(wǎng)絡(luò)店鋪的不斷增加，網(wǎng)店裝修師這個(gè)時(shí)尚職業(yè)也越來(lái)越受歡迎。一個(gè)優(yōu)秀的網(wǎng)店除了要有自己一些特色的商品外，還需要擁有一個(gè)吸引客戶的店面裝修。這樣才能戶一眼就讓客戶吸引，從而對(duì)商品感興趣。

1 需求分析

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

2 制作方法

2.1 準(zhǔn)備工作

firework 8.0(或者photoshop)軟件一個(gè)，dreamweaver 8.0軟件，50M網(wǎng)絡(luò)空間一個(gè)及指向空間的固定域名一個(gè)。此外，準(zhǔn)備好一套淘寶網(wǎng)靜態(tài)圖片模板，一般來(lái)說(shuō)，一套模板包括店招(標(biāo)題欄)、促銷欄目、描述欄、分類欄。網(wǎng)頁(yè)制作的知識(shí)主要應(yīng)用在促銷欄目和描述欄目上面。

2.2 制作步驟

現(xiàn)在以促銷欄部分為例，來(lái)講解如何將制作好的模板圖片轉(zhuǎn)化成為我們淘寶網(wǎng)店所需要的代碼。

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

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

切片經(jīng)驗(yàn):一般在需要填充內(nèi)容的地方進(jìn)行切片，切片完成后的最終切片效果為圖2。

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

這一步:我們的圖片轉(zhuǎn)化成了網(wǎng)頁(yè)，并且取名為index.htm。

第三步:將頁(yè)面通過(guò)dreamweaver軟件打開(kāi)index.htm網(wǎng)頁(yè)文件。將要做文字，插入跑馬燈以及圖片的地方的圖片的地址復(fù)制。然后將要做文字，插入跑馬燈以及圖片的地方的圖片刪掉。將原圖片的地址粘貼到被刪除的圖片背景地址。這一步，將文字及圖片的插入?yún)^(qū)圖片轉(zhuǎn)換成背景圖片。

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

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

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

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

第六步:將index.htm的網(wǎng)頁(yè)文件使用記事本打開(kāi)，將所有圖片的地址全部改成網(wǎng)絡(luò)中的絕對(duì)地址。完成促銷頁(yè)面轉(zhuǎn)化成代碼的過(guò)程。

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

典型問(wèn)題:網(wǎng)頁(yè)中產(chǎn)生裂縫瑕疵，原因分析:

第一、跑馬燈，圖片，文字插入?yún)^(qū)單元格的高度以及寬度與原圖像的高度寬度不一致。

第二、跑馬燈、圖片，文字的高度以及寬度比插入?yún)^(qū)單元格的高度及寬度要大。

解決方法:

第一、將跑馬燈，圖片，文字插入?yún)^(qū)單元格的高度以及寬度與原圖像的高度寬度保持完全一致。

第二、將跑馬燈、圖片，文字的高度以及寬度設(shè)置的比插入?yún)^(qū)單元格的高度及寬度要小。

3 結(jié)論

以上我們通過(guò)一個(gè)例題來(lái)講述了如何利用我們網(wǎng)頁(yè)制作的三劍客軟件:firework 8.0軟件以及dreamweaver 8.0軟件來(lái)進(jìn)行網(wǎng)店裝修，將我們的靜態(tài)模板轉(zhuǎn)換成為淘寶網(wǎng)網(wǎng)店所需的代碼，并且就網(wǎng)店裝修中所容易出現(xiàn)的問(wèn)題做出了解決方案。

參考文獻(xiàn):

[1] 姜楠.dreamweaver 8 完美網(wǎng)頁(yè)設(shè)計(jì)與制作[M].北京:中國(guó)青年出版社，2006.

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