《電子商務(wù)實(shí)訓(xùn)》課件項(xiàng)目三 網(wǎng)店裝修

Contents目錄01裝修網(wǎng)店02店鋪招牌的設(shè)計(jì)與制作03店鋪廣告的設(shè)計(jì)與制作04動(dòng)態(tài)店招的設(shè)計(jì)與制作05商品詳細(xì)描述06常用的網(wǎng)頁(yè)制作技術(shù)●了解LOGO的相關(guān)知識(shí)和代表的意義?！窳私獾陿?biāo)設(shè)計(jì)的過(guò)程和方法?！窳私獾赇佌信频闹谱鞣椒??！窳私獾赇亸V告的制作方法?！駥W(xué)習(xí)如何進(jìn)行商品描述?！裾莆盏陿?biāo)的制作方法?！裾莆盏赇佌信频闹谱鞣椒??！裾莆盏赇亸V告的制作方法?！裾莆丈唐访枋龅姆椒ā！R(shí)目標(biāo)※技能目標(biāo)三維目標(biāo)●讓學(xué)生具備一定的審美能力,具有顏色搭配、整體布局的能力?！裨谘b修店鋪過(guò)程中,具備搜尋資料、獨(dú)立解決問(wèn)題的能力。●在裝修分工上,學(xué)會(huì)團(tuán)結(jié)合作,形成圍繞同一個(gè)目標(biāo)共同努力的理念。※情感目標(biāo)任務(wù)一裝修網(wǎng)店任務(wù)導(dǎo)入LOGO是徽標(biāo)或者商標(biāo)的英文說(shuō)法,起到對(duì)徽標(biāo)所屬公司的識(shí)別和推廣的作用,形象的LOGO可以讓消費(fèi)者記住公司主體和品牌文化。我們?nèi)绾蝸?lái)設(shè)計(jì)符合自己店鋪的LOGO呢?工作流程在店鋪裝修過(guò)程中,首先要確定整體的風(fēng)格,制作好店標(biāo)、店鋪招牌和廣告,同時(shí)要做好商品的拍攝和處理,并進(jìn)行相關(guān)的描述。在資料準(zhǔn)備齊全的前提下,進(jìn)行資料的上傳。流程圖如圖所示。任務(wù)一裝修網(wǎng)店知識(shí)儲(chǔ)備1.Fireworks簡(jiǎn)介Fireworks是第一個(gè)完全為網(wǎng)店頁(yè)面制作者設(shè)計(jì)的軟件。作為一個(gè)圖像處理軟件,Fireworks能夠自由地導(dǎo)入各種圖像(如Macintosh的PICT、FreeHand,Illustrator,CorelDraw8的矢量文件、Photoshop文件、GIF、JPEG、BMP、TIFF等),甚至是ASCII的文本文件,而且Fireworks可以辨認(rèn)矢量文件中的絕大部分標(biāo)記以及Photoshop文件的層。作為一款為網(wǎng)絡(luò)設(shè)計(jì)而開(kāi)發(fā)的圖像處理軟件,Fireworks除了能夠自動(dòng)切圖、生成鼠標(biāo)動(dòng)態(tài)感應(yīng)的JavaScript外,還具有十分強(qiáng)大的動(dòng)畫(huà)功能和幾乎完美的網(wǎng)絡(luò)圖像生成器(Export)功能。2.LOGO的國(guó)際標(biāo)準(zhǔn)網(wǎng)絡(luò)中的LOGO徽標(biāo)主要是各個(gè)網(wǎng)站用來(lái)與其他網(wǎng)站鏈接的圖形標(biāo)志,代表一個(gè)網(wǎng)站或網(wǎng)站的一個(gè)板塊。為了便于在Internet上進(jìn)行信息傳播,形成了統(tǒng)一的LOGO國(guó)際標(biāo)準(zhǔn)。其中關(guān)于網(wǎng)站的LOGO,目前有四種規(guī)格(如表3—1所示):LOGO的四種規(guī)格知識(shí)儲(chǔ)備3.常見(jiàn)顏色代表的意義紅色,最引人注目的色彩,具有強(qiáng)烈的感染力,象征熱情、喜慶、幸福,另一方面又象征警覺(jué)、危險(xiǎn)。黃色是陽(yáng)光的色彩,象征光明、希望、高貴、愉快。淺黃色表示柔弱,灰黃色表示病態(tài)。藍(lán)色是天空的色彩,象征和平、安靜、純潔、理智,另一方面又有消極、冷淡、保守等意味。綠色是植物的色彩,象征著平靜與安全,帶灰褐的綠色則象征著衰老和終止。橙色,是所有色彩中最溫暖的色彩。橙色象征快樂(lè)、健康、勇敢。紫色象征優(yōu)美、高貴、尊嚴(yán),另一方面又有孤獨(dú)、神秘等意味。序號(hào)LOGO規(guī)格備注188×31互聯(lián)網(wǎng)上最普遍的LOGO規(guī)格2120×60用于一般大小的LOGO規(guī)格3120×90用于大型的LOGO規(guī)格4200×70這種規(guī)格LOGO也已經(jīng)出現(xiàn)任務(wù)一裝修網(wǎng)店知識(shí)儲(chǔ)備4.圖像格式類(lèi)型(1)有損壓縮。有損壓縮可以減少圖像在內(nèi)存和磁盤(pán)中占用的空間,在屏幕上觀(guān)看圖像時(shí),不會(huì)發(fā)現(xiàn)它對(duì)圖像的外觀(guān)產(chǎn)生太大的不利影響。因?yàn)槿说难劬?duì)光線(xiàn)比較敏感,光線(xiàn)對(duì)景物的作用比顏色的作用更為重要,這就是有損壓縮技術(shù)的基本依據(jù)。有損壓縮的特點(diǎn)是保持顏色的逐漸變化,刪除圖像中顏色的突然變化。生物學(xué)中的大量實(shí)驗(yàn)證明,人類(lèi)大腦會(huì)利用與附近最接近的顏色來(lái)填補(bǔ)所丟失的顏色。例如,對(duì)于藍(lán)色天空背景上的一朵白云,有損壓縮的方法就是刪除圖像中景物邊緣的某些顏色部分,當(dāng)在屏幕上看這幅圖時(shí),大腦會(huì)利用在景物上看到的顏色填補(bǔ)所丟失的顏色部分。有損壓縮技術(shù)使某些數(shù)據(jù)被有意地刪除了,且不可再恢復(fù)。(2)無(wú)損壓縮。無(wú)損壓縮的基本原理是相同的顏色信息只需保存一次。壓縮圖像的軟件首先會(huì)確定圖像中哪些區(qū)域是相同的,哪些是不同的。包括了重復(fù)數(shù)據(jù)的圖像(如藍(lán)天)就可以被壓縮,只有藍(lán)天的起始點(diǎn)和終結(jié)點(diǎn)需要被記錄下來(lái)。但是藍(lán)色可能還會(huì)有不同的深淺,天空有時(shí)也可能被樹(shù)木、山峰或其他的對(duì)象掩蓋,這些就需要另外記錄。任務(wù)一裝修網(wǎng)店知識(shí)儲(chǔ)備從本質(zhì)上看,無(wú)損壓縮的方法可以刪除一些重復(fù)數(shù)據(jù),大大減小要在磁盤(pán)上保存的圖像尺寸。但是,無(wú)損壓縮的方法并不能減少圖像的內(nèi)存占用量,這是因?yàn)?當(dāng)從磁盤(pán)上讀取圖像時(shí),軟件又會(huì)把丟失的像素用適當(dāng)?shù)念伾畔⑻畛溥M(jìn)來(lái)。如果要減少圖像占用內(nèi)存的容量,就必須使用有損壓縮方法。無(wú)損壓縮方法的優(yōu)點(diǎn)是能夠比較好地保存圖像的質(zhì)量,但是相對(duì)來(lái)說(shuō)這種方法的壓縮率比較低。如果需要把圖像用高分辨率的打印機(jī)打印出來(lái),最好使用無(wú)損壓縮。幾乎所有的圖像文件都采用各自簡(jiǎn)化的格式名作為文件擴(kuò)展名,從擴(kuò)展名就可知道這幅圖像是按什么格式存儲(chǔ)的,應(yīng)該用什么樣的軟件去讀寫(xiě)等。5.五種圖像文件格式(1)BMP圖像文件格式。BMP是一種與硬件設(shè)備無(wú)關(guān)的圖像文件格式,使用非常廣泛。它采用位映射存儲(chǔ)格式,除了圖像深度可選以外,不采用其他任何壓縮,因此,BMP文件所占用的空間很大。BMP文件的圖像深度可選1bit、4bit、8bit及24bit。BMP文件存儲(chǔ)數(shù)據(jù)時(shí),圖像的掃描方式是按從左到右、從下到上的順序。任務(wù)一裝修網(wǎng)店知識(shí)儲(chǔ)備5.五種圖像文件格式由于BMP文件格式是Windows環(huán)境中交換與圖有關(guān)的數(shù)據(jù)的一種標(biāo)準(zhǔn),因此在Windows環(huán)境中運(yùn)行的圖形圖像軟件都支持BMP圖像格式。典型的BMP圖像文件由四部分組成:位圖文件頭數(shù)據(jù)結(jié)構(gòu),它包含BMP圖像文件的類(lèi)型、顯示內(nèi)容等信息;位圖信息數(shù)據(jù)結(jié)構(gòu),它包含有BMP圖像的寬、高、壓縮方法,以及定義顏色等信息;顏色信息,它包含若干個(gè)表項(xiàng),每個(gè)表項(xiàng)是一個(gè)RGBQUAD類(lèi)型的結(jié)構(gòu),定義一種顏色;圖形數(shù)據(jù),它記錄了位圖的每一個(gè)像素值或該對(duì)應(yīng)像素的顏色表的索引值。(2)GIF文件格式。

GIF(GraphicsInterchangeFormat)的原意是“圖像互換格式”,是CompuServe公司在1987年開(kāi)發(fā)的圖像文件格式。GIF文件的數(shù)據(jù),是一種基于LZW算法的連續(xù)色調(diào)的無(wú)損壓縮格式。其壓縮率一般在50%左右,它不屬于任何應(yīng)用程序。目前幾乎所有相關(guān)軟件都支持它,公共領(lǐng)域有大量的軟件在使用GIF圖像文件。任務(wù)一裝修網(wǎng)店知識(shí)儲(chǔ)備GIF圖像文件的數(shù)據(jù)是經(jīng)過(guò)壓縮的,而且是采用了可變長(zhǎng)度等壓縮算法。所以GIF的圖像深度從1bit到8bit,即GIF最多支持256種色彩的圖像。GIF格式的另一個(gè)特點(diǎn)是在一個(gè)GIF文件中可以存多幅彩色圖像,如果把存于一個(gè)文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上,就可構(gòu)成一種最簡(jiǎn)單的動(dòng)畫(huà)。GIF解碼較快,因?yàn)椴捎酶粜写娣诺腉IF圖像,在邊解碼邊顯示的時(shí)候可分成四遍掃描。第一遍掃描雖然只顯示了整個(gè)圖像的八分之一,第二遍的掃描后也只顯示了1/4,但這已經(jīng)把整幅圖像的概貌顯示出來(lái)了。在顯示GIF圖像時(shí),隔行存放的圖像的顯示速度看起來(lái)似乎要比其他圖像快一些,這是隔行存放的優(yōu)點(diǎn)。(3)PSD文件格式。這是Photoshop圖像處理軟件的專(zhuān)用文件格式,文件擴(kuò)展名是“.psd”,可以支持圖層、通道、蒙版和不同色彩模式的各種圖像特征,是一種非壓縮的原始文件保存格式。掃描儀不能直接生成該種格式的文件。PSD文件有時(shí)容量會(huì)很大,但由于可以保留所有原始信息,在圖像處理中對(duì)于尚未制作完成的圖像,選用PSD格式保存是最佳的選擇。任務(wù)一裝修網(wǎng)店知識(shí)儲(chǔ)備(4)PNG圖像文件格式。

PNG(PortableNetworkGraphics)的原名稱(chēng)為“可移植性網(wǎng)絡(luò)圖像”,是網(wǎng)上接受的最新圖像文件格式。PNG能夠提供長(zhǎng)度比GIF小30%的無(wú)損壓縮圖像文件。它同時(shí)提供24位和48位真彩色圖像支持以及其他諸多技術(shù)性支持。由于PNG非常新,所以目前并不是所有的程序都可以用它來(lái)存儲(chǔ)圖像文件,但Photoshop可以處理PNG圖像文件,也可以用PNG圖像文件格式存儲(chǔ)。(5)JPEG文件格式。JPEG是JointPhotographicExpertsGroup(聯(lián)合圖像專(zhuān)家組)的縮寫(xiě),文件后綴名為“.jpg”或“.jpeg”,是最常用的圖像文件格式,由一個(gè)軟件開(kāi)發(fā)聯(lián)合會(huì)組織制定,是一種有損壓縮格式,能夠?qū)D像壓縮在很小的儲(chǔ)存空間,圖像中重復(fù)或不重要的資料會(huì)被刪除,因此容易造成圖像數(shù)據(jù)的損傷。尤其是使用過(guò)高的壓縮比例,將使最終解壓縮后恢復(fù)的圖像質(zhì)量明顯降低,如果追求高品質(zhì)圖像,不宜采用過(guò)高壓縮比例。但是JPEG壓縮技術(shù)十分先進(jìn),它用有損壓縮方式去除冗余的圖像數(shù)據(jù),在獲得極高的壓縮率的同時(shí)能展現(xiàn)十分豐富生動(dòng)的圖像,換句話(huà)說(shuō),就是可以用最少的磁盤(pán)空間得到較好的圖像品質(zhì)。任務(wù)一裝修網(wǎng)店知識(shí)儲(chǔ)備而且JPEG是一種很靈活的格式,具有調(diào)節(jié)圖像質(zhì)量的功能,允許用不同的壓縮比例對(duì)文件進(jìn)行壓縮,支持多種壓縮級(jí)別,壓縮比率通常在10∶1到40∶1之間,壓縮比越大,品質(zhì)就越低;相反的,壓縮比越小,品質(zhì)就越好。比如可以把1.37MB的BMP位圖文件壓縮至20.3KB。當(dāng)然也可以在圖像質(zhì)量和文件尺寸之間找到平衡點(diǎn)。JPEG格式壓縮的主要是高頻信息,對(duì)色彩的信息保留較好,適合應(yīng)用于互聯(lián)網(wǎng),可減少圖像的傳輸時(shí)間,可以支持24bit真彩色,也普遍應(yīng)用于需要連續(xù)色調(diào)的圖像。JPEG格式是目前網(wǎng)絡(luò)上最流行的圖像格式,是可以把文件壓縮到最小的格式,在Photoshop軟件中以JPEG格式儲(chǔ)存時(shí),提供11級(jí)壓縮級(jí)別,以0~10級(jí)表示。其中0級(jí)壓縮比最高,圖像品質(zhì)最差。即使采用細(xì)節(jié)幾乎無(wú)損的10級(jí)質(zhì)量保存,壓縮比也可達(dá)5∶1。以BMP格式保存時(shí)得到4.28MB圖像文件,在采用JPG格式保存時(shí),其文件僅為178KB,壓縮比達(dá)到24∶1。經(jīng)過(guò)多次比較,采用第8級(jí)壓縮為存儲(chǔ)空間與圖像質(zhì)量兼得的最佳級(jí)別。JPEG格式的應(yīng)用非常廣泛,在網(wǎng)絡(luò)和光盤(pán)讀物上,都能找到它的身影。目前各類(lèi)瀏覽器均支持JPEG這種圖像格式,因?yàn)镴PEG格式的文件尺寸較小,下載速度快。任務(wù)一裝修網(wǎng)店崗位資訊店鋪裝修屬于圖形圖像設(shè)計(jì)師的工作,設(shè)計(jì)師要求有一定的審美能力、構(gòu)圖能力及整體布局方面的能力,具體要求如下:(1)具有清晰的思路,知道店鋪的特色與適合的風(fēng)格;(2)具有多種店鋪裝修風(fēng)格的設(shè)計(jì)能力;(3)熟練掌握?qǐng)D形圖像設(shè)計(jì)軟件Photoshop、Fireworks;(4)良好的溝通能力,動(dòng)手能力強(qiáng),做事主動(dòng)、積極,有團(tuán)隊(duì)合作精神;(5)具備良好的藝術(shù)美感和創(chuàng)意性,有較強(qiáng)的審美能力與視覺(jué)效果表現(xiàn)能力。任務(wù)一裝修網(wǎng)店任務(wù)實(shí)施1.店標(biāo)的設(shè)計(jì)與制作店標(biāo)作為店鋪標(biāo)識(shí)符號(hào),反映著民族、國(guó)家、地域等不同的特征。從店標(biāo)的演變過(guò)程可以看到店標(biāo)藝術(shù)風(fēng)格、特點(diǎn)的變化。店標(biāo)設(shè)計(jì)的信息化、視覺(jué)化、現(xiàn)代化是當(dāng)前的世界潮流,一個(gè)優(yōu)秀的店標(biāo)需要很好的創(chuàng)意和藝術(shù)家的妙手才能夠打造出來(lái)。店標(biāo)也叫店標(biāo)圖片,是網(wǎng)店形象識(shí)別系統(tǒng)的重要組成元素之一,是網(wǎng)店特色和內(nèi)涵的集中體現(xiàn),也是網(wǎng)店形象識(shí)別系統(tǒng)最直接的表現(xiàn)。店標(biāo)是店鋪的標(biāo)志,一個(gè)好的店標(biāo)圖片可以讓消費(fèi)者瀏覽網(wǎng)店時(shí)體會(huì)到店主的良苦用心,從而會(huì)對(duì)網(wǎng)店產(chǎn)生比較深刻的印象,這樣就增加了交易的可能性。店標(biāo)的首要任務(wù)就是向消費(fèi)者傳達(dá)店鋪信息,最終目的就是讓消費(fèi)者記住自己的網(wǎng)店,使網(wǎng)店區(qū)別于其他網(wǎng)店。任務(wù)一裝修網(wǎng)店任務(wù)實(shí)施店標(biāo)設(shè)計(jì)借鑒和運(yùn)用原始符號(hào),并賦予原始符號(hào)以更高的藝術(shù)高度?，F(xiàn)代店標(biāo)設(shè)計(jì)是人類(lèi)文明高容量的載體,是人類(lèi)文化的縮影?？v觀(guān)歷史,從原始社會(huì)的記號(hào)到圖騰,從商周的象形符號(hào)到秦漢的印章,再?gòu)奶扑蔚幕献拥矫髑宓难蠡陿?biāo),店標(biāo)的變化無(wú)不體現(xiàn)了當(dāng)時(shí)整個(gè)社會(huì)的歷史文化狀況。任務(wù)一裝修網(wǎng)店任務(wù)實(shí)施紅色店鋪標(biāo)志的制作步驟如下:(1)使用鋼筆工具繪制一片花瓣,注意鋼筆的節(jié)點(diǎn)位置,填充如圖所示的顏色。(2)復(fù)制出一片花瓣,按住Shift鍵,使用縮放工具適當(dāng)縮小它的形狀,并填充白色,使用對(duì)齊工具,將它們居中對(duì)齊,如圖所示。(3)同理,繪制出第三片花瓣,并將三個(gè)路徑組合(Ctrl+G)成一個(gè)整體,如圖所示。任務(wù)一裝修網(wǎng)店任務(wù)實(shí)施(4)復(fù)制一個(gè)花瓣出來(lái),并填充顏色,通過(guò)任意變形工具,將復(fù)制出來(lái)的花瓣旋轉(zhuǎn)45度,如圖3—6所示。提示:對(duì)于8片花瓣的對(duì)齊,可以在中間畫(huà)一個(gè)圓,每個(gè)花瓣旋轉(zhuǎn)的度數(shù)要精準(zhǔn),不能使用鼠標(biāo)進(jìn)行旋轉(zhuǎn)。任務(wù)一裝修網(wǎng)店小思考(1)本任務(wù)中紅色系的LOGO適合銷(xiāo)售哪些商品種類(lèi)的店鋪使用?思路提示:紅色代表最引人注目的色彩,具有強(qiáng)烈的感染力,象征熱情、喜慶、幸福,可以使用在女裝、花店等店鋪中。(2)如圖中的兩個(gè)知名LOGO,分別給你什么印象,從這兩個(gè)LOGO中我們能學(xué)習(xí)到哪些知識(shí)?思路提示:不同的LOGO有不同的特點(diǎn),同時(shí)也代表著不同產(chǎn)品的風(fēng)格。任務(wù)一裝修網(wǎng)店任務(wù)二店鋪招牌的設(shè)計(jì)與制作任務(wù)實(shí)施店鋪招牌——這里指虛擬商店的招牌,一般有統(tǒng)一的大小要求,如淘寶店的招牌為950*150,格式為jpg、gif。如圖所示的紅色系店鋪招牌的設(shè)計(jì)與制作步驟如下:(1)新建一個(gè)Fireworks文檔,其中參數(shù)設(shè)置如圖所示。任務(wù)二店鋪招牌的設(shè)計(jì)與制作任務(wù)實(shí)施(2)繪制一個(gè)矩形,填充顏色為紅色,大小和畫(huà)布一致,作為店鋪背景(3)將它命名為“店鋪背景紅色”,并鎖定任務(wù)二店鋪招牌的設(shè)計(jì)與制作任務(wù)實(shí)施（4）繪制一個(gè)矩形,大小為950PX*30PX,填充線(xiàn)性漸變色,邊框筆尖大小為2,并填充金色,與店鋪背景紅色下對(duì)齊(5)在相應(yīng)的位置上輸入文字,效果如圖所示。任務(wù)二店鋪招牌的設(shè)計(jì)與制作任務(wù)實(shí)施(6)使用鋼筆工具繪制一個(gè)盾牌形狀,并填充線(xiàn)性漸變顏色,復(fù)制出一個(gè)盾牌形狀,填充紅色底紋,并等比例縮小,如圖所示。(7)將兩個(gè)盾牌通過(guò)對(duì)齊工具居中對(duì)齊,文字輸入后效果如圖所示。任務(wù)二店鋪招牌的設(shè)計(jì)與制作任務(wù)實(shí)施(8)繪制一個(gè)如圖3—20所示的50PX*50PX的矩形,其填充和邊線(xiàn)的設(shè)置(9)使用鋼筆工具繪制一個(gè)如圖所示的圖形,并填充好顏色,將矩形和這個(gè)圖形對(duì)齊組合。任務(wù)二店鋪招牌的設(shè)計(jì)與制作任務(wù)實(shí)施(10)同理完成其他圖形的制作,效果如圖所示。(11)復(fù)制出一個(gè)相同的圖形,并垂直翻轉(zhuǎn)。(12)繪制一個(gè)矩形,白色到黑色線(xiàn)性漸變填充,如圖所示。任務(wù)二店鋪招牌的設(shè)計(jì)與制作任務(wù)實(shí)施(10)同理完成其他圖形的制作,效果如圖所示。(11)復(fù)制出一個(gè)相同的圖形,并垂直翻轉(zhuǎn)。(12)繪制一個(gè)矩形,白色到黑色線(xiàn)性漸變填充,如圖所示。任務(wù)二店鋪招牌的設(shè)計(jì)與制作任務(wù)實(shí)施(13)將兩個(gè)對(duì)象組合成蒙版,倒影效果呈現(xiàn),同理,完成其他圖標(biāo)倒影的制作。(14)將其他文字補(bǔ)充輸入,至此,店鋪廣告制作完成,如圖所示。小思考圖中的廣告效果是如何制作的,嘗試做一做。思路提示:顏色、大小、文字設(shè)置結(jié)合上文所學(xué)。任務(wù)二店鋪招牌的設(shè)計(jì)與制作任務(wù)三店鋪廣告的設(shè)計(jì)與制作任務(wù)實(shí)施店鋪廣告信息是用來(lái)顯示店鋪的動(dòng)態(tài)信息、商品促銷(xiāo)、服務(wù)信息等內(nèi)容的,普通店鋪廣告一般顯示在店鋪首頁(yè)的中上部位。而店鋪廣告的位置、尺寸和播放方式都有一定的要求,只能在有限區(qū)域內(nèi)發(fā)揮作用。以圖3—32所示的福臨門(mén)糧油商品廣告為例,其制作步驟提示如下:(1)使用矩形工具繪制一個(gè)長(zhǎng)方形,大小為400*300,填充粉色。(2)在矩形上面輸入促銷(xiāo)的文字,如圖所示。(3)將糧油圖片摳出,放置在文字的右側(cè),效果圖如圖所示。小思考本任務(wù)中的字體若要加上描邊效果,試問(wèn)哪種顏色比較合適?任務(wù)四動(dòng)態(tài)店招效果的設(shè)計(jì)與制作任務(wù)實(shí)施任務(wù)三完成的是靜態(tài)的店招效果,下面我們利用在線(xiàn)制作動(dòng)態(tài)店招功能來(lái)完成下圖所示的動(dòng)態(tài)店招的設(shè)計(jì)制作,其步驟提示如下:(1)打開(kāi)網(wǎng)頁(yè)瀏覽器,在地址欄輸入,登錄三角梨在線(xiàn)制作網(wǎng)站,如圖所示。任務(wù)四動(dòng)態(tài)店招效果的設(shè)計(jì)與制作任務(wù)實(shí)施(2)點(diǎn)擊“在線(xiàn)制作”,進(jìn)入在線(xiàn)制作界面,如圖所示,選擇“店鋪店招”。(3)在瀏覽店鋪店招界面選擇需要制作的店招圖,進(jìn)入制作界面,點(diǎn)擊“點(diǎn)此開(kāi)始制作”,如圖所示。任務(wù)四動(dòng)態(tài)店招效果的設(shè)計(jì)與制作任務(wù)實(shí)施(4)在制作圖片的界面內(nèi),輸入想要的標(biāo)題1、標(biāo)題2、標(biāo)題3,分別對(duì)應(yīng)的位置如圖所示,標(biāo)題1可以輸入店鋪名稱(chēng),標(biāo)題2可以輸入小標(biāo)題,標(biāo)題3可以輸入淘寶店鋪的網(wǎng)址。(5)這樣動(dòng)態(tài)店鋪店招就制作完成,效果如圖所示。小思考通過(guò)本任務(wù)的學(xué)習(xí),你學(xué)會(huì)了在線(xiàn)制作動(dòng)態(tài)效果店招了嗎?請(qǐng)嘗試在線(xiàn)制作你想要的動(dòng)態(tài)店招。任務(wù)五商品詳細(xì)描述任務(wù)實(shí)施商品描述包括的內(nèi)容有正面圖、細(xì)節(jié)圖、搭配效果圖(平鋪或者街拍、棚拍)、包裝、吊牌等。商品描述要求圖片清晰,盡量多角度;展示整體效果、彰顯整體性;展示局部細(xì)節(jié)特性;展示品質(zhì)、引起買(mǎi)家購(gòu)物欲望;展示產(chǎn)品包裝。進(jìn)行商品描述時(shí)建議單品圖片展示時(shí)增加細(xì)節(jié)圖和體現(xiàn)產(chǎn)品情感訴求的語(yǔ)言詞匯;單品描述的圖片和文字描述應(yīng)相結(jié)合,方便買(mǎi)家瀏覽;通過(guò)增加產(chǎn)品注釋,來(lái)體現(xiàn)單品的設(shè)計(jì)理念、產(chǎn)品特色等信息。(1)商品描述資料主要來(lái)自于以下幾個(gè)方面:1)首先向自己的供貨商索要詳細(xì)的寶貝信息。寶貝圖片不能反映的信息主要包括:寶貝材料、寶貝產(chǎn)地、寶貝的售后服務(wù)、寶貝生產(chǎn)廠(chǎng)家、寶貝的性能等。并不是每一樣都要非常詳細(xì)地寫(xiě)出來(lái),只是相對(duì)于同類(lèi)產(chǎn)品有優(yōu)勢(shì)和特色的信息一定要詳細(xì)地描述出來(lái),這本身也是產(chǎn)品的賣(mài)點(diǎn)。任務(wù)五商品詳細(xì)描述任務(wù)實(shí)施任務(wù)五商品詳細(xì)描述2)買(mǎi)家的提問(wèn)和用后反饋信息。這個(gè)也是收集寶貝描述信息的重要途徑。有心的淘寶網(wǎng)商一般非常重視這個(gè)信息渠道,因?yàn)榧瓤梢酝晟谱约壕W(wǎng)店的寶貝信息,同時(shí)也能夠輔助自己發(fā)現(xiàn)寶貝新賣(mài)點(diǎn)和做好市場(chǎng)細(xì)分。3)到同行中去參考。淘寶網(wǎng)商有許多優(yōu)秀者和后起之秀,可以去他們的網(wǎng)店轉(zhuǎn)轉(zhuǎn),看看他們的寶貝描述是怎么寫(xiě)的。特別要重視自己的同行中做得好的網(wǎng)商。4)留意生活,挖掘與寶貝相關(guān)的生活故事。這個(gè)嚴(yán)格來(lái)說(shuō)不屬于寶貝描述信息的范疇,但是一個(gè)與寶貝相關(guān)的感人故事更加容易打動(dòng)消費(fèi)者。(2)下面以涂改液描述為例:1)涂改液的產(chǎn)品描述(包括名稱(chēng)、品牌、規(guī)格等。2)商品特色描述,如圖所示。任務(wù)五商品詳細(xì)描述

3)產(chǎn)品細(xì)節(jié)描述,如圖所示。任務(wù)五商品詳細(xì)描述

4)物流方式、支付方式和聯(lián)系方式描述,如圖所示。小思考在商品描述中,起標(biāo)題也是一個(gè)很重要的問(wèn)題,你會(huì)怎么給本任務(wù)中的涂改液起標(biāo)題?思路提示:中文品牌+英文品牌+商品用途+商品特色+促銷(xiāo)價(jià)格(文字在20字左右)。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)任務(wù)導(dǎo)入

無(wú)論我們用何種html標(biāo)簽進(jìn)行網(wǎng)頁(yè)布局和內(nèi)容編排,要實(shí)現(xiàn)更好的網(wǎng)頁(yè)美化效果,都必須用到css樣式表,因此掌握和熟練運(yùn)用css樣式表對(duì)制作一個(gè)漂亮網(wǎng)頁(yè)十分重要。下面我們通過(guò)Dreamweaver這個(gè)強(qiáng)大的網(wǎng)頁(yè)制作軟件,并利用div、ul、li等html標(biāo)簽和css樣式表,通過(guò)一些簡(jiǎn)單易學(xué)的實(shí)例掌握常用的網(wǎng)頁(yè)布局、列表、圖文混排等。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)工作流程知識(shí)儲(chǔ)備由于我們學(xué)習(xí)的內(nèi)容是如何利用div+css進(jìn)行網(wǎng)頁(yè)布局,所以運(yùn)用到網(wǎng)頁(yè)中都是靜態(tài)的,我們只需要建立簡(jiǎn)單的站點(diǎn)就可以。以下是進(jìn)行站點(diǎn)建設(shè)前需要了解的一些知識(shí),“站點(diǎn)”其實(shí)就是一個(gè)存放網(wǎng)站的文件夾而已,不過(guò)站點(diǎn)內(nèi)存放的文件和文件夾命名有一定的要求,主要是站點(diǎn)內(nèi)存放的文件、文件夾不要用中文命名,可以用拼音或拼音+數(shù)字命名,文件及文件夾命名需要有一定的意義,以方便管理,比如圖片文件夾我們可以用images或img,首頁(yè)命名我們可以用index.htm、default.html等。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)崗位資訊簡(jiǎn)單站點(diǎn)設(shè)置說(shuō)明:因?yàn)榫毩?xí)制作的全部為靜態(tài)網(wǎng)頁(yè),所以我們不需要設(shè)置服務(wù)器。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)任務(wù)實(shí)施1.一列固定寬度制作如圖3—47所示的網(wǎng)頁(yè)效果,任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—47任務(wù)實(shí)施(1)新建文檔,如圖3—48所示。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—48任務(wù)實(shí)施(2)創(chuàng)建并保存網(wǎng)頁(yè)到自己站點(diǎn)內(nèi),命名為lx1.html。選擇工具欄的“插入div標(biāo)簽”工具,工具按鈕如圖3—49所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—49

在對(duì)話(huà)框的ID框中寫(xiě)入id的名稱(chēng)#kuang,然后在css面板中新建css樣式,或者直接點(diǎn)擊下邊的新建css樣式按鈕,創(chuàng)建成功后會(huì)自動(dòng)插入id名稱(chēng),點(diǎn)擊確定即可看到div標(biāo)簽已經(jīng)插入到頁(yè)面中了。任務(wù)實(shí)施css樣式表設(shè)置如下:選擇“背景”分類(lèi),設(shè)置背景,如圖3—50所示。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—50任務(wù)實(shí)施選擇“方框”分類(lèi),設(shè)置div大小,如圖3—51所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—51任務(wù)實(shí)施選擇“邊框”分類(lèi),設(shè)置邊框,如圖3—52所示。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—52完成后保存,可預(yù)覽效果。小思考(1)如何將列寬設(shè)置為自適應(yīng)寬度?思路提示:另存lx1.html為lx1_2.html,修改css樣式表分類(lèi)中方框的寬為90%,預(yù)覽效果。(2)如何將列固定寬度居中?思路提示:另存lx1.html為lx1_3.html,參照?qǐng)D3—53,修改css樣式表(修改紅色方框內(nèi)的設(shè)置),預(yù)覽效果。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—53任務(wù)實(shí)施2.兩列固定寬度居中制作如圖3—54所示的網(wǎng)頁(yè)效果,主要步驟如下:任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—54任務(wù)實(shí)施(1)新建網(wǎng)頁(yè)保存為lx2.html。(2)插入第一個(gè)div,ID為main,如圖3—55所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—55接下來(lái)可以通過(guò)兩種方法來(lái)建立css樣式表:方法一:直接點(diǎn)擊“確定”插入div,然后再點(diǎn)擊“新建css規(guī)則”按鈕建立css樣式表(優(yōu)點(diǎn):可以邊修改css樣式表設(shè)置,邊看效果,方便調(diào)試,建議用這個(gè)方法)。方法六r:點(diǎn)擊“新建css樣式”按鈕直接設(shè)置css樣式表(優(yōu)點(diǎn):不用再點(diǎn)新建css按鈕來(lái)設(shè)置;缺點(diǎn):無(wú)法邊瀏覽效果邊調(diào)試)。任務(wù)實(shí)施以下是采用第一種方法的做法:選中div,如圖3—56所示。(3)建立css樣式表,如圖3—57所示,點(diǎn)擊紅色下劃線(xiàn)處按鈕建立css樣式表。以下是新建css規(guī)則對(duì)話(huà)框,如圖3—58所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—56圖3—57任務(wù)實(shí)施以下是新建css規(guī)則對(duì)話(huà)框,如圖3—58所示。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—58任務(wù)實(shí)施“選擇器類(lèi)型”的基本知識(shí)補(bǔ)充。類(lèi):此類(lèi)型的樣式表命名必須以英文“.”開(kāi)始,且樣式表名不能以數(shù)字開(kāi)頭,也不能用中文(例如:“.title2”正確,“.2title”錯(cuò)誤),此類(lèi)樣式表可以重復(fù)使用。標(biāo)簽:給所有的html標(biāo)簽建立css樣式表,這種樣式表單獨(dú)使用的比較少,一般會(huì)和其他類(lèi)型樣式表混合使用或者設(shè)置頁(yè)面屬性body等。高級(jí):此類(lèi)樣式表比較復(fù)雜,有下文用的id類(lèi)型,a:hover類(lèi)型,還有復(fù)合類(lèi)型等。id類(lèi)型的樣式表名在一個(gè)網(wǎng)頁(yè)中只允許出現(xiàn)一次,不可重復(fù)使用。定義在:主要是用來(lái)設(shè)置保存css樣式表位置,“僅對(duì)該文檔”表示樣式表保存到當(dāng)前的網(wǎng)頁(yè)內(nèi),“新建樣式表文件”表示當(dāng)前樣式保存到一個(gè)擴(kuò)展名為“.css”的單獨(dú)文件內(nèi)。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)任務(wù)實(shí)施給ID為main的div建立樣式表,設(shè)置如下:選擇“方框”分類(lèi),設(shè)置寬度和邊界,如圖3—59所示。說(shuō)明:設(shè)置邊界,左、右為“自動(dòng)”可以讓div實(shí)現(xiàn)在瀏覽器中居中的顯示效果。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—59任務(wù)實(shí)施(4)在id為main的div中分別插入兩個(gè)div,如圖3—60所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—60(5)建立類(lèi)類(lèi)型css樣式表,“.left”用在id為main內(nèi)的第一個(gè)div上,如圖3—61所示。任務(wù)實(shí)施“.left”設(shè)置如下:背景設(shè)置為淺灰色,如圖3—62所示。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—62任務(wù)實(shí)施設(shè)置“方框”:寬為200像素,高為300像素,浮動(dòng)為左對(duì)齊(設(shè)置浮動(dòng)的目的是使得臨近兩個(gè)div能夠并排顯示),如圖3—63所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—63任務(wù)實(shí)施設(shè)置“邊框”:樣式為實(shí)線(xiàn),寬度為1像素,顏色為#A9C9E2,如圖3—64所示。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—64任務(wù)實(shí)施應(yīng)用“.left”到第一個(gè)div上,如圖3—65所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—65任務(wù)實(shí)施(6)建立類(lèi)類(lèi)型css樣式表,“.right”用在id為main內(nèi)的第六r個(gè)div上,設(shè)置“背景”如圖3—66所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—66任務(wù)實(shí)施“方框”設(shè)置:寬200像素,高300像素,浮動(dòng)為左對(duì)齊,如圖3—67所示。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—67任務(wù)實(shí)施邊框設(shè)置如圖3—68所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—68任務(wù)實(shí)施應(yīng)用css樣式表“.right”到第六r個(gè)div上,如圖3—69所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—69保存預(yù)覽并點(diǎn)擊預(yù)覽按鈕進(jìn)行預(yù)覽,如圖3—70所示。小思考如何將兩列實(shí)現(xiàn)左列固定寬度、右列自適應(yīng)?思路提示:在上面練習(xí)的css設(shè)置內(nèi)容中進(jìn)行修改。修改“#main”寬度為100%。清除“.right”寬度和浮動(dòng),并進(jìn)行如圖3—71所示的設(shè)置。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—71任務(wù)實(shí)施3.左列文字列表,右列圖文混排,整體居中顯示制作如圖3—72所示的網(wǎng)頁(yè)效果,主要步驟如下:任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—72任務(wù)實(shí)施(1)新建網(wǎng)頁(yè)lx3.html,并參照?qǐng)D3—73,在網(wǎng)頁(yè)中插入div,第一個(gè)div的id為main。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—48(2)建立css樣式表“#main”,設(shè)置“方框”寬度為904像素,并實(shí)現(xiàn)居中顯示效果,如圖3—74所示。任務(wù)實(shí)施設(shè)置“定位”:寬度為904像素,溢出為“隱藏”,如圖3—75所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—75任務(wù)實(shí)施(3)建立css樣式表“.left”、“.right”,分別應(yīng)用到剩余的兩個(gè)div里,如圖3—76所示。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)“.left”設(shè)置如下:“方框”設(shè)置:寬度為220像素,浮動(dòng)為左對(duì)齊,如圖3—77所示。圖3—76任務(wù)實(shí)施“邊框”設(shè)置如圖3—78所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—78任務(wù)實(shí)施“.right”設(shè)置如下:“方框”設(shè)置:寬度為670像素,浮動(dòng)為左對(duì)齊,邊界—左:10像素,如圖3—79所示。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—79任務(wù)實(shí)施“邊框”設(shè)置如圖3—80所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—80當(dāng)前顯示效果如圖3—81所示。任務(wù)實(shí)施Div實(shí)際寬度計(jì)算知識(shí)補(bǔ)充:Div實(shí)際占用的寬度是由寬+左右(填充)+左右(邊界)+左右(邊框)構(gòu)成,而不僅由寬度來(lái)決定,如本例中main、left、right的寬度計(jì)算如下:Div實(shí)際寬度計(jì)算說(shuō)明:“#main”寬度904?！?left”實(shí)際占用寬度為:寬+左右(填充)+左右(邊界)+左右(邊框),即:200+0+0+2=222像素。因此,在制作網(wǎng)頁(yè)前必須進(jìn)行必要的計(jì)算和設(shè)計(jì)才能讓網(wǎng)頁(yè)正常顯示。(4)左側(cè)標(biāo)題及列表制作:本例中標(biāo)題、列表分別由h3和項(xiàng)目列表ul、li來(lái)實(shí)現(xiàn),先添加如圖3—82所示的布局。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—82任務(wù)實(shí)施給標(biāo)題h3建立css樣式表效果,可以單獨(dú)建立類(lèi)類(lèi)型css樣式表,也可以建立混合類(lèi)型的樣式表,本例主要建立混合類(lèi)型的樣式表?；旌项?lèi)型樣式表可以為同一標(biāo)簽設(shè)置相同的效果,從而減少一個(gè)個(gè)單獨(dú)的使用。選中h3標(biāo)簽,添加如圖3—83所示的混合樣式表,“.left

h3”表示此樣式表,.left下所屬的所有h3都執(zhí)行當(dāng)前樣式表的設(shè)置。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—83任務(wù)實(shí)施“.left

h3”設(shè)置如下:“類(lèi)型”分類(lèi)設(shè)置:字體大小為16像素,行高為30像素,顏色為#333333,如圖3—84所示。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—84任務(wù)實(shí)施“背景”設(shè)置如圖3—85所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—85任務(wù)實(shí)施“區(qū)塊”設(shè)置如圖3—86所示,文字縮進(jìn)15像素,實(shí)現(xiàn)“列表標(biāo)題”向右縮進(jìn)15像素的顯示效果,如果不設(shè)置,則文字左對(duì)齊顯示。顯示效果如圖3—87所示。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—86圖3—87任務(wù)實(shí)施“方框”設(shè)置高為30像素,上下邊界為0。說(shuō)明:設(shè)置方框:高與類(lèi)型中行高為相同的大小可以實(shí)現(xiàn)文本內(nèi)容垂直居中的效果。上下邊界為0,可以讓h3貼近頂部div和下面的ul,如果不設(shè)置,則h3自動(dòng)會(huì)與上下內(nèi)容產(chǎn)生距離,如圖3—88所示,設(shè)置后顯示如圖3—89所示。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—88圖3—89任務(wù)實(shí)施為ul標(biāo)簽建立css樣式表“.lst1”,如圖3—90所示。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—90任務(wù)實(shí)施“.lst1”設(shè)置如下:設(shè)置“方框”分類(lèi)如圖3—91所示,左(填充)為15像素,使得ul距離左邊距的div距離為15像素。任務(wù)六

常用的網(wǎng)頁(yè)制作技術(shù)圖3—91任務(wù)實(shí)施設(shè)置“列表”類(lèi)型為無(wú),項(xiàng)目符號(hào)圖像為無(wú),如圖3—92所示,此設(shè)置目的是去掉項(xiàng)目符號(hào)。任務(wù)六常用的網(wǎng)頁(yè)制作技術(shù)圖3—93選中“l(fā)i”標(biāo)簽,如圖3—93所示,建立復(fù)合類(lèi)型樣式表“.lst1

li”,實(shí)現(xiàn)對(duì)li效果的設(shè)置。圖3—92任務(wù)實(shí)施“.lst1

li”類(lèi)型設(shè)置如圖3—94所示。任務(wù)六

常用的網(wǎng)頁(yè)制作