電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作課件

電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與製作

賞析電子商務(wù)網(wǎng)頁(yè)1賞析行業(yè)類(lèi)網(wǎng)站賞析電子商務(wù)類(lèi)網(wǎng)站電子商務(wù)網(wǎng)站的類(lèi)型、特點(diǎn)和發(fā)展趨勢(shì)Contents目錄認(rèn)識(shí)網(wǎng)頁(yè)佈局設(shè)計(jì)1淺嘗網(wǎng)站佈局2第一節(jié)賞析行業(yè)類(lèi)網(wǎng)站

佈局就是以最適合流覽的方式將圖片和文字?jǐn)[放在頁(yè)面的不同位置。不同的製作者會(huì)有不同的佈局設(shè)計(jì)。常見(jiàn)的網(wǎng)頁(yè)佈局有“國(guó)”字型佈局、“T”型佈局、POP佈局、Flash佈局、標(biāo)題正文型佈局、左右框架型佈局、上下框架型佈局。必備知識(shí)認(rèn)識(shí)網(wǎng)頁(yè)佈局設(shè)計(jì)1“國(guó)”字型佈局以“新浪微博”網(wǎng)站為例介紹“國(guó)”字型佈局。新浪微博網(wǎng)站網(wǎng)址為/?topnav=1&mod=logo,如圖1-1所示。該網(wǎng)站主要採(cǎi)用了“國(guó)”字型佈局。“國(guó)”字型佈局因佈局結(jié)構(gòu)與漢字“國(guó)”相似而得名,如圖1-2所示。其頁(yè)面的最上部分一般放置網(wǎng)站的logo和導(dǎo)航欄或banner廣告,頁(yè)面中間分為左、中、右三部分,左邊放置導(dǎo)航菜單或者其他資訊,中間放置網(wǎng)站的主要內(nèi)容,右邊放置網(wǎng)站的登錄註冊(cè)和友情鏈接或其他資訊,最下部分一般放置網(wǎng)站的版權(quán)資訊和聯(lián)繫方式或其他資訊等。認(rèn)識(shí)網(wǎng)頁(yè)佈局設(shè)計(jì)1“T”型佈局以“十大品牌網(wǎng)”為例介紹“T”型佈局。十大品牌網(wǎng)是CNPP官方授權(quán)查詢(xún)網(wǎng)站,囊括了各大行業(yè)的龍頭企業(yè)網(wǎng)站。網(wǎng)址為,主頁(yè)面如圖1-3所示。該主頁(yè)面採(cǎi)用了“T”型佈局結(jié)構(gòu)。“T”型佈局結(jié)構(gòu)因與英文大寫(xiě)字母“T”相似而得名,簡(jiǎn)化佈局示意圖如圖1-4所示。頁(yè)面的頂部是“網(wǎng)站logo+導(dǎo)航欄+banner”,左邊是網(wǎng)站導(dǎo)航菜單,右邊是網(wǎng)站主要內(nèi)容。這種佈局的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰、主次分明,是初學(xué)者最容易上手的設(shè)計(jì)佈局的方法。主體部分左側(cè)為各行業(yè)的導(dǎo)航,以及行業(yè)類(lèi)的二級(jí)分類(lèi)導(dǎo)航,右側(cè)為權(quán)威數(shù)據(jù)查詢(xún)和各大企業(yè)的logo展示。認(rèn)識(shí)網(wǎng)頁(yè)佈局設(shè)計(jì)1POP佈局POP佈局引自廣告術(shù)語(yǔ),是指頁(yè)面佈局像一張宣傳海報(bào),以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心。這種佈局一般出現(xiàn)在一些網(wǎng)站的首頁(yè),大部分為一些精美的平面設(shè)計(jì)結(jié)合一些小的動(dòng)畫(huà),再放上幾個(gè)簡(jiǎn)單的鏈接或者僅是一個(gè)“進(jìn)入”的鏈接,甚至有的直接在首頁(yè)的圖片上做鏈接而沒(méi)有任何提示。這種佈局大部分出現(xiàn)在企業(yè)網(wǎng)站和個(gè)人首頁(yè),如果處理得好,會(huì)給人帶來(lái)賞心悅目的感覺(jué)。POP佈局是一種頗具藝術(shù)感和時(shí)尚感的網(wǎng)頁(yè)佈局方式。以“POP全球時(shí)尚網(wǎng)路機(jī)構(gòu)”為例介紹POP佈局。上海逸尚雲(yún)聯(lián)資訊技術(shù)股份有限公司(簡(jiǎn)稱(chēng)“逸尚雲(yún)聯(lián)”)是中國(guó)首家為時(shí)尚行業(yè)提供流行資訊及供應(yīng)鏈全套解決方案的資訊技術(shù)公司,旗下包括兩個(gè)主要的網(wǎng)路資訊平臺(tái)——“POP全球時(shí)尚網(wǎng)路機(jī)構(gòu)”和“ULB優(yōu)料寶”,以及一個(gè)遍及全國(guó)的“設(shè)界——線下時(shí)尚設(shè)計(jì)聯(lián)合空間”。“POP全球時(shí)尚網(wǎng)路機(jī)構(gòu)”的網(wǎng)址為,主頁(yè)面如圖1-5所示。認(rèn)識(shí)網(wǎng)頁(yè)佈局設(shè)計(jì)1Flash佈局Flash佈局是指整個(gè)或大部分頁(yè)面本身就是一個(gè)Flash動(dòng)畫(huà),它是動(dòng)態(tài)的,畫(huà)面一般比較絢麗、有趣,是一種比較新潮的佈局方式。其實(shí)這與封面型結(jié)構(gòu)是類(lèi)似的,與封面型不同的是,這種類(lèi)型採(cǎi)用了目前非常流行的Flash,由於Flash強(qiáng)大的功能,頁(yè)面所表達(dá)的資訊更豐富,其視覺(jué)效果及聽(tīng)覺(jué)效果如果處理得當(dāng),絕不遜於傳統(tǒng)的多媒體。Flash主頁(yè)面如圖1-6所示。認(rèn)識(shí)網(wǎng)頁(yè)佈局設(shè)計(jì)1標(biāo)題正文型佈局標(biāo)題正文型佈局一般用於顯示文章頁(yè)面、新聞頁(yè)面和一些註冊(cè)頁(yè)面等,簡(jiǎn)化示意圖如圖1-7所示。認(rèn)識(shí)網(wǎng)頁(yè)佈局設(shè)計(jì)1左右框架型佈局

左右框架型佈局是一些大型論壇和企業(yè)經(jīng)常使用的一種佈局結(jié)構(gòu)。其佈局主要分為左右兩個(gè)框架頁(yè)面。左框架頁(yè)面一般為導(dǎo)航欄鏈接和網(wǎng)站logo,右框架頁(yè)面則放置網(wǎng)站的主要內(nèi)容,簡(jiǎn)化示意圖如圖1-8所示。認(rèn)識(shí)網(wǎng)頁(yè)佈局設(shè)計(jì)1

上下框架型佈局上下框架型佈局與左右框架型佈局類(lèi)似。上面放置導(dǎo)航欄或者banner,下麵放置網(wǎng)站主要內(nèi)容。其區(qū)別僅在於上下框架型佈局分為上下兩個(gè)框架頁(yè)面,簡(jiǎn)化示意圖如圖1-9所示。認(rèn)識(shí)網(wǎng)頁(yè)佈局設(shè)計(jì)1

“國(guó)”字型佈局適用於大型公司等綜合型網(wǎng)站,例如製造業(yè)、IT業(yè)、貿(mào)易類(lèi)行業(yè)等,頁(yè)面顏色多採(cǎi)用公司的標(biāo)準(zhǔn)色、logo的顏色以及和企業(yè)主題相關(guān)的顏色,或者是藍(lán)、灰、紅等體現(xiàn)商務(wù)簡(jiǎn)約風(fēng)格的顏色。個(gè)人主頁(yè)和多媒體企業(yè)等可以?huà)?cǎi)用POP佈局和Flash佈局來(lái)達(dá)到衝擊視覺(jué)的效果。網(wǎng)站多以色彩分明和主題分明的全屏海報(bào)和Flash作為主頁(yè),超鏈接到主題內(nèi)容中。網(wǎng)站導(dǎo)航條的設(shè)計(jì)也基本決定了網(wǎng)頁(yè)的二級(jí)頁(yè)面欄目的主題顏色風(fēng)格,常見(jiàn)的導(dǎo)航條由“首頁(yè)”“關(guān)於公司”“新聞中心”“產(chǎn)品中心”“人力資源”“聯(lián)繫我們”組成。banner:橫幅廣告。一般是使用GIF格式的圖像檔,可用靜態(tài)圖形,也可用多幀圖像拼接為動(dòng)畫(huà)圖像。尺寸正在逐漸變大,主要放置的是企業(yè)產(chǎn)品、企業(yè)建築、企業(yè)人員、企業(yè)工程專(zhuān)案、和主題有關(guān)的修飾圖像、說(shuō)明資質(zhì)的圖示等。文字主要由企業(yè)文化、宣傳口號(hào)、產(chǎn)品描述等構(gòu)成。網(wǎng)頁(yè)的主題部分由公司的資訊或者動(dòng)態(tài)組成。網(wǎng)頁(yè)的底部為版權(quán)資訊、友情鏈接、企業(yè)聯(lián)繫方式、說(shuō)明性資訊等。網(wǎng)站與網(wǎng)頁(yè)必備知識(shí)淺嘗網(wǎng)站佈局2網(wǎng)站(website)是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML(超文本標(biāo)記語(yǔ)言，是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用)等工具製作的用於展示特定內(nèi)容相關(guān)網(wǎng)頁(yè)的集合。簡(jiǎn)單地說(shuō)，網(wǎng)站是一種溝通工具,人們可以通過(guò)網(wǎng)站來(lái)發(fā)佈自己想要公開(kāi)的資訊，或者利用網(wǎng)站來(lái)提供相關(guān)的網(wǎng)路服務(wù)。人們可以通過(guò)網(wǎng)頁(yè)流覽器來(lái)訪問(wèn)網(wǎng)站,獲取自己需要的資訊或者享受網(wǎng)路服務(wù)。網(wǎng)站淺嘗網(wǎng)站佈局2網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素,是承載各種網(wǎng)站應(yīng)用的平臺(tái)。使用HTML格式(檔擴(kuò)展名為.html或.htm)。網(wǎng)站中的網(wǎng)頁(yè)一般包括靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)兩種形式。靜態(tài)網(wǎng)頁(yè)：在網(wǎng)站設(shè)計(jì)中,純粹HTML格式的網(wǎng)頁(yè)通常被稱(chēng)為“靜態(tài)網(wǎng)頁(yè)”，靜態(tài)網(wǎng)頁(yè)是標(biāo)準(zhǔn)的HTML檔,可以包含文本、圖像、聲音、Flash動(dòng)畫(huà)、客戶(hù)端腳本和ActiveX控件及Java小程式等。動(dòng)態(tài)網(wǎng)頁(yè)：是指跟靜態(tài)網(wǎng)頁(yè)相對(duì)的一種網(wǎng)頁(yè)。顯示的內(nèi)容是可以隨著時(shí)間、環(huán)境或者資料庫(kù)操作的結(jié)果而發(fā)生改變的。動(dòng)態(tài)網(wǎng)頁(yè)是基本的HTML語(yǔ)法規(guī)範(fàn)與Java、VB、VC等高級(jí)程式設(shè)計(jì)語(yǔ)言以及資料庫(kù)編程等多種技術(shù)的融合,以期實(shí)現(xiàn)對(duì)網(wǎng)站內(nèi)容和風(fēng)格的高效、動(dòng)態(tài)和互動(dòng)式的管理。動(dòng)態(tài)網(wǎng)頁(yè)檔一般以.asp、.aspx、.jsp、.php等為擴(kuò)展名,並且在動(dòng)態(tài)網(wǎng)頁(yè)網(wǎng)址中常有一個(gè)標(biāo)誌性的符號(hào)——“?”網(wǎng)頁(yè)必備知識(shí)淺嘗網(wǎng)站佈局2構(gòu)成網(wǎng)頁(yè)的基本元素從頁(yè)面結(jié)構(gòu)的角度看,網(wǎng)頁(yè)主要由導(dǎo)航欄、欄目及正文內(nèi)容這三大要素組成。網(wǎng)頁(yè)結(jié)構(gòu)的創(chuàng)建、網(wǎng)頁(yè)內(nèi)容佈局的規(guī)劃實(shí)際上也是圍繞這三大要素展開(kāi)的。導(dǎo)航欄又由logo、banner、導(dǎo)航條組成。文字、圖像、動(dòng)畫(huà)、超鏈接、表單等基本元素也貫穿了整個(gè)網(wǎng)頁(yè)。淺嘗網(wǎng)站佈局2構(gòu)成網(wǎng)頁(yè)的基本元素（1）logo。網(wǎng)站logo,也叫作網(wǎng)站標(biāo)誌,它是一個(gè)網(wǎng)站的象徵。所以一個(gè)好的標(biāo)誌可以很好地樹(shù)立公司形象。而網(wǎng)站標(biāo)誌的位置一般在網(wǎng)站的左上角,這樣別人就可以一眼看到它。優(yōu)秀的logo具有個(gè)性鮮明、衝擊視覺(jué)等特點(diǎn),便於識(shí)別、記憶,有引導(dǎo)、促進(jìn)消費(fèi)、產(chǎn)生美好聯(lián)想的作用,利於在眾多的企業(yè)中脫穎而出。如麥當(dāng)勞、百事可樂(lè)的標(biāo)誌在這方面就發(fā)揮了很好的作用。（2）banner。banner是一種網(wǎng)路廣告形式,banner廣告一般位於網(wǎng)頁(yè)的頂部,使用戶(hù)在流覽網(wǎng)頁(yè)資訊的同時(shí)關(guān)注廣告資訊。淺嘗網(wǎng)站佈局2構(gòu)成網(wǎng)頁(yè)的基本元素（3）導(dǎo)航條。導(dǎo)航條是指通過(guò)一定的技術(shù)手段,為網(wǎng)站的訪問(wèn)者提供一定的途徑,使其可以方便地訪問(wèn)所需的內(nèi)容,從一個(gè)頁(yè)面轉(zhuǎn)到另一個(gè)頁(yè)面的快速通道。導(dǎo)航條是網(wǎng)頁(yè)設(shè)計(jì)中的重要部分,同時(shí)也是整個(gè)網(wǎng)站設(shè)計(jì)中一個(gè)比較獨(dú)立的部分。一般來(lái)說(shuō),網(wǎng)站中的導(dǎo)航條在各個(gè)頁(yè)面中出現(xiàn)的位置是比較固定的,風(fēng)格也比較一致。（4）文字。網(wǎng)頁(yè)的最基本元素就是網(wǎng)頁(yè)文字。一般企業(yè)網(wǎng)站中,文字始終是表達(dá)資訊的主體。設(shè)計(jì)網(wǎng)頁(yè)時(shí)需要注意頁(yè)面中文字的大小、字體、顏色對(duì)比的組合、背景顏色的襯托,以及與圖像等網(wǎng)頁(yè)元素之間的排版。淺嘗網(wǎng)站佈局2構(gòu)成網(wǎng)頁(yè)的基本元素（5）圖像。豐富多彩的圖像是美化網(wǎng)頁(yè)必不可少的元素,用於網(wǎng)頁(yè)上的圖像一般為JPG格式和GIF格式。網(wǎng)頁(yè)中的圖像主要有點(diǎn)綴標(biāo)題的小圖片、介紹性的圖片、代表企業(yè)形象或欄目?jī)?nèi)容的標(biāo)誌性圖片。（6）動(dòng)畫(huà)。動(dòng)畫(huà)是網(wǎng)頁(yè)中最活躍的元素,創(chuàng)意出眾、製作精緻的動(dòng)畫(huà)是吸引流覽者眼球的最有效方法之一。但是如果網(wǎng)頁(yè)動(dòng)畫(huà)太多,也會(huì)“物極必反”,使人感到眼花繚亂,進(jìn)而產(chǎn)生視覺(jué)疲勞。（8）表單。表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)採(cǎi)集。一個(gè)表單有三個(gè)基本組成部分,即表單標(biāo)籤、表單域和表單按鈕。（7）超鏈接。超鏈接可以連接不同網(wǎng)頁(yè)或站點(diǎn),各個(gè)網(wǎng)頁(yè)鏈接在一起後,才能構(gòu)成一個(gè)網(wǎng)站。超鏈接實(shí)質(zhì)上是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)係,這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè),也可以是相同網(wǎng)頁(yè)上的不同位置,還可以是圖像、電子郵件地址、檔,甚至是一個(gè)應(yīng)用程式。而在網(wǎng)頁(yè)中用於超鏈接的對(duì)象,通常是一段文字或者是一個(gè)圖像檔。Contents目錄賞析淘寶網(wǎng)主頁(yè)1分析“京東”網(wǎng)站2第二節(jié)賞析電子商務(wù)類(lèi)網(wǎng)站分析“蘇寧易購(gòu)”網(wǎng)站和“速賣(mài)通”網(wǎng)站3賞析淘寶網(wǎng)主頁(yè)1必備知識(shí)淘寶網(wǎng)是亞太地區(qū)較大的網(wǎng)路零售網(wǎng)站,由阿裏巴巴集團(tuán)在2003年5月創(chuàng)立。2015年3月31日,淘寶宣佈啟動(dòng)“實(shí)名認(rèn)證”程式,要最大程度地消除由於虛假註冊(cè)資訊帶來(lái)的交易安全隱患。所謂“實(shí)人認(rèn)證”,就是淘寶年檢。每次審核前,淘寶會(huì)通過(guò)旺旺彈窗、手機(jī)短信、站內(nèi)信、郵件等多種方式通知復(fù)核時(shí)間。賣(mài)家要根據(jù)淘寶“動(dòng)態(tài)手勢(shì)認(rèn)證”(手勢(shì)是隨機(jī)的)的具體要求,擺出一模一樣的手勢(shì),拍張照片上傳系統(tǒng),進(jìn)入復(fù)核流程。新“實(shí)人認(rèn)證”系統(tǒng)上線後,淘寶將針對(duì)所有賣(mài)家進(jìn)行定期復(fù)核,對(duì)有不良記錄的賣(mài)家,還將增加不定期身份復(fù)核。賞析淘寶網(wǎng)主頁(yè)1必備知識(shí)淘寶網(wǎng)主頁(yè)面如圖1-10所示,大體採(cǎi)用了“國(guó)”字型的結(jié)構(gòu)。主頁(yè)的主要作用是產(chǎn)品分類(lèi)以及熱銷(xiāo)產(chǎn)品的櫥窗展示。淘寶網(wǎng)整體設(shè)計(jì)採(cǎi)用的是以圖為主、文字為輔的風(fēng)格,內(nèi)容之間比較自然,文字和圖片顏色保持一致,顏色搭配也比較和諧。介面設(shè)計(jì)體現(xiàn)了網(wǎng)站行銷(xiāo)導(dǎo)向的屬性,符合用戶(hù)和商家的需求。banner會(huì)根據(jù)節(jié)日和活動(dòng)發(fā)生相應(yīng)變化。頁(yè)面左側(cè)的主題市場(chǎng)將淘寶網(wǎng)的所有產(chǎn)品歸類(lèi)整理,如圖1-11所示,一級(jí)主題是大類(lèi),二級(jí)導(dǎo)航欄再對(duì)一級(jí)主題進(jìn)行細(xì)化,用戶(hù)可以根據(jù)分類(lèi)進(jìn)行精細(xì)的查找。淘寶的主體內(nèi)容中又包含了商城的導(dǎo)航欄。賞析淘寶網(wǎng)主頁(yè)1必備知識(shí)底部由“消費(fèi)者保障”“新手上路”“付款方式”“淘寶特色”等使用規(guī)則和方式組成,還有一些合作夥伴的友情鏈接,如圖1-12所示。淘寶網(wǎng)的二級(jí)頁(yè)面主要是活動(dòng)促銷(xiāo)頁(yè)面,與首頁(yè)相似,都是以商品推廣為主的頁(yè)面,以圖片為主,如圖1-13所示。賞析淘寶網(wǎng)主頁(yè)1必備知識(shí)淘寶網(wǎng)中還有一類(lèi)頁(yè)面是用戶(hù)流覽最多的頁(yè)面——賣(mài)家的店鋪?lái)?yè)面，賣(mài)家的店鋪風(fēng)格豐富多彩,首頁(yè)如圖1-14所示。下半部分由左右兩側(cè)組成。左側(cè)是店鋪的賣(mài)家資訊和店鋪主頁(yè)入口、寶貝分類(lèi)、寶貝排行等。右側(cè)則是這個(gè)具體商品的詳細(xì)介紹,稱(chēng)為詳情頁(yè)。分析“京東”網(wǎng)站2必備知識(shí)必備知識(shí)京東,中國(guó)自營(yíng)式電商企業(yè),創(chuàng)始人劉強(qiáng)東。旗下設(shè)有京東商城、京東金融、拍拍網(wǎng)、京東智能、O2O及海外事業(yè)部等。分析“京東”網(wǎng)站2必備知識(shí)京東網(wǎng)址為,首頁(yè)如圖1-16所示。京東的首頁(yè)佈局與淘寶網(wǎng)類(lèi)似,都是以“國(guó)”字型為主的佈局,京東的主體部分也是以搜索、分類(lèi)、展示為主。在導(dǎo)航欄的下方是一個(gè)搜索框,用戶(hù)可通過(guò)關(guān)鍵字搜索商品。京東的二級(jí)頁(yè)面有兩大類(lèi)別:一類(lèi)是優(yōu)惠促銷(xiāo)的二級(jí)頁(yè)面(如圖1-17所示),另一類(lèi)就是商城區(qū)域劃分的二級(jí)頁(yè)面,如圖1-18所示。分析“蘇寧易購(gòu)”網(wǎng)站和“速賣(mài)通”網(wǎng)站3必備知識(shí)必備知識(shí)蘇寧易購(gòu),是蘇寧雲(yún)商集團(tuán)股份有限公司旗下新一代B2C網(wǎng)上購(gòu)物平臺(tái),現(xiàn)已覆蓋傳統(tǒng)家電、3C電器、日用百貨等品類(lèi),網(wǎng)址為。速賣(mài)通(AliExpress)於2010年4月正式上線,是阿裏巴巴旗下唯一面向全球市場(chǎng)打造的線上交易平臺(tái),被廣大賣(mài)家稱(chēng)為“國(guó)際版淘寶”，是全球第三大英文線上購(gòu)物網(wǎng)站,網(wǎng)址為。分析“蘇寧易購(gòu)”網(wǎng)站和“速賣(mài)通”網(wǎng)站3必備知識(shí)電商平臺(tái)大多數(shù)採(cǎi)用“國(guó)”字型的佈局,主頁(yè)上主要是搜索、分類(lèi)導(dǎo)航和櫥窗展示。分析“蘇寧易購(gòu)”網(wǎng)站和“速賣(mài)通”網(wǎng)站3必備知識(shí)知識(shí)拓展網(wǎng)店策劃書(shū)策劃書(shū)即對(duì)某個(gè)未來(lái)的活動(dòng)或者事件進(jìn)行策劃,並展現(xiàn)給讀者的文本。策劃書(shū)是目標(biāo)規(guī)劃的文字書(shū),是實(shí)現(xiàn)目標(biāo)的指路燈。網(wǎng)店策劃書(shū)一般包括網(wǎng)店名稱(chēng)、經(jīng)營(yíng)模式、主營(yíng)商品、商品特點(diǎn)、顧客定位、價(jià)格定位、市場(chǎng)分析、競(jìng)爭(zhēng)對(duì)手、風(fēng)險(xiǎn)預(yù)測(cè)、行銷(xiāo)策略、網(wǎng)店管理、網(wǎng)店推廣與宣傳等。電商平臺(tái)網(wǎng)站設(shè)計(jì)的建議電商平臺(tái)的網(wǎng)站通過(guò)精巧的佈局和方便的操作來(lái)實(shí)現(xiàn)收益最大化。(1)設(shè)計(jì)簡(jiǎn)潔(2)使用視頻(3)在首頁(yè)上發(fā)佈優(yōu)惠資訊(4)有效的導(dǎo)航(5)推薦產(chǎn)品(6)明確的定價(jià)和配送詳情分析“蘇寧易購(gòu)”網(wǎng)站和“速賣(mài)通”網(wǎng)站3必備知識(shí)電商店鋪的基礎(chǔ)設(shè)計(jì)(以淘寶網(wǎng)為例)設(shè)計(jì)電商店鋪時(shí)應(yīng)考慮以下7項(xiàng)內(nèi)容:(1)店鋪標(biāo)誌。(2)店鋪招牌。(3)店鋪導(dǎo)航欄:寶貝分類(lèi)以及關(guān)於我們。(4)全屏海報(bào)。(5)店鋪公告和商品分類(lèi)。(6)活動(dòng)預(yù)告及活動(dòng)促銷(xiāo)圖片。(7)分類(lèi)櫥窗。Contents目錄電子商務(wù)網(wǎng)站的類(lèi)型1電子商務(wù)網(wǎng)站的特點(diǎn)2電子商務(wù)網(wǎng)站的發(fā)展趨勢(shì)3第三節(jié)電子商務(wù)網(wǎng)站的類(lèi)型、特點(diǎn)和發(fā)展趨勢(shì)電子商務(wù)網(wǎng)站的類(lèi)型

1必備知識(shí)按照商務(wù)目的和業(yè)務(wù)功能分類(lèi)（1）基本型商務(wù)網(wǎng)站。（2）宣傳型商務(wù)網(wǎng)站。（3）客戶(hù)服務(wù)型網(wǎng)站。（4）完全電子商務(wù)運(yùn)作型網(wǎng)站。按照構(gòu)建網(wǎng)站的主體分類(lèi)（1）行業(yè)電子商務(wù)網(wǎng)站。（2）企業(yè)電子商務(wù)網(wǎng)站。（3）政府電子商務(wù)網(wǎng)站。（4）服務(wù)機(jī)構(gòu)電子商務(wù)網(wǎng)站。按照網(wǎng)站擁有者的職責(zé)分類(lèi)（1）生產(chǎn)型商務(wù)網(wǎng)站。（2）流通型商務(wù)網(wǎng)站按照電子商務(wù)模式分類(lèi)（1）B2B商務(wù)網(wǎng)站。（2）B2C商務(wù)網(wǎng)站。（3）C2C商務(wù)網(wǎng)站。（4）B2G商務(wù)網(wǎng)站。電子商務(wù)網(wǎng)站的類(lèi)型

1案例分析阿裏巴巴B2B模式分析阿裏巴巴網(wǎng)站是典型的B2B平臺(tái)。阿裏巴巴網(wǎng)站在推崇網(wǎng)上資訊的時(shí)候主要提出四個(gè)理念：第一個(gè)是“找商機(jī)”；第二個(gè)是“建公司”；第三個(gè)為“交商友”；第四個(gè)是“看商情”。電子商務(wù)網(wǎng)站的特點(diǎn)

2必備知識(shí)商務(wù)性電子商務(wù)網(wǎng)站最基本的特性為商務(wù)性,即為買(mǎi)賣(mài)雙方提供買(mǎi)賣(mài)交易的機(jī)會(huì)。服務(wù)性企業(yè)通過(guò)將產(chǎn)品/服務(wù)移至互聯(lián)網(wǎng)上,使客戶(hù)能方便地獲得產(chǎn)品或服務(wù)。全球性互聯(lián)網(wǎng)是全球性的,這也決定了電子商務(wù)網(wǎng)站也是全球性的。價(jià)值性電子商務(wù)網(wǎng)站以極低的成本進(jìn)入全球化的電子化市場(chǎng)，參與到市場(chǎng)的爭(zhēng)奪中資源共用性通過(guò)電子商務(wù)網(wǎng)站緊密地聯(lián)繫在一起,建立網(wǎng)上商城系統(tǒng),通過(guò)電子商務(wù)網(wǎng)站實(shí)現(xiàn)資訊共用、資源共用、智力共用等。互動(dòng)性通過(guò)網(wǎng)上商城系統(tǒng)商家之間可以直接交流、談判、簽合同集成性電子商務(wù)網(wǎng)站與客戶(hù)關(guān)係管理系統(tǒng)、供應(yīng)鏈管理系統(tǒng)集成,可以幫助企業(yè)集成新舊資源,充分利用已有資源?？蓴U(kuò)展性擴(kuò)展性的網(wǎng)上商城系統(tǒng)對(duì)於電子商務(wù)企業(yè)而言才是最穩(wěn)定的系統(tǒng)。電子商務(wù)網(wǎng)站必須在出現(xiàn)高峰狀況時(shí)及時(shí)擴(kuò)展,才能使得系統(tǒng)阻塞的可能性大大降低。安全性隨著技術(shù)的發(fā)展,電子商務(wù)網(wǎng)站的安全性也會(huì)相應(yīng)得以增強(qiáng)。協(xié)調(diào)性決策者能夠通過(guò)電子商務(wù)網(wǎng)站獲得高價(jià)值的商業(yè)數(shù)據(jù),有助於協(xié)調(diào)決策者進(jìn)行科學(xué)決策。電子商務(wù)網(wǎng)站的發(fā)展趨勢(shì)

3必備知識(shí)移動(dòng)購(gòu)物手機(jī)的滲透率增速遠(yuǎn)快於PC,也就是說(shuō)電子商務(wù)將來(lái)的主戰(zhàn)場(chǎng)不是在PC,而是在移動(dòng)設(shè)備上。充分地利用移動(dòng)設(shè)備的特徵,比如說(shuō)它的掃描特徵,圖像、語(yǔ)音識(shí)別特徵,感應(yīng)特徵,地理化、GPS的特徵,這些功能可以真正把移動(dòng)購(gòu)物帶到千家萬(wàn)戶(hù)。平臺(tái)化有了平臺(tái),賣(mài)家可以利用全社會(huì)的資源增加自己商品的豐富度,增加自己的服務(wù)和地理覆蓋。物聯(lián)網(wǎng)隨著可穿戴設(shè)備和RFID的發(fā)展,將來(lái)的晶片可以植入皮膚,可以植入衣服,可以植入任何物品,任何物品狀態(tài)的變化都可以引起其他相關(guān)物品的狀態(tài)變化。O2OO2O即OnlinetoOffline(線上到離線/線上到線下),線下銷(xiāo)售與服務(wù)通過(guò)線上推廣來(lái)攬客,消費(fèi)者可以通過(guò)線上來(lái)篩選需求,線上預(yù)訂、結(jié)算,線下交易、消費(fèi)。精準(zhǔn)化行銷(xiāo)和個(gè)性化服務(wù)每個(gè)人都希望最大效率地應(yīng)用這個(gè)行銷(xiāo)的管道,為其提供個(gè)性化的行銷(xiāo)和服務(wù)。電子商務(wù)網(wǎng)站的發(fā)展趨勢(shì)

3知識(shí)拓展O2OO2O是指將線下的商務(wù)機(jī)會(huì)與互聯(lián)網(wǎng)結(jié)合,讓互聯(lián)網(wǎng)成為線下交易的平臺(tái),這個(gè)概念最早來(lái)源於美國(guó)。O2O的概念非常廣泛,既可涉及線上,又可涉及線下。主流商業(yè)管理課程均對(duì)O2O這種新型的商業(yè)模式有所介紹及關(guān)注。O2O電子商務(wù)模式需具備五大要素:獨(dú)立網(wǎng)上商城、國(guó)家級(jí)權(quán)威行業(yè)可信網(wǎng)站認(rèn)證、線上網(wǎng)路廣告行銷(xiāo)推廣、全面社交媒體與客戶(hù)線上互動(dòng)、線上線下一體化的會(huì)員行銷(xiāo)系統(tǒng)。020電子商務(wù)網(wǎng)站的發(fā)展趨勢(shì)

3必備知識(shí)O2O主要經(jīng)歷了以下發(fā)展歷程：在1.0早期的時(shí)候,O2O線上線下初步對(duì)接,主要是利用線上推廣的便捷性等把相關(guān)的用戶(hù)集中起來(lái),然後把線上的流量倒到線下,主要領(lǐng)域集中在以美團(tuán)為代表的線上團(tuán)購(gòu)和促銷(xiāo)等領(lǐng)域。發(fā)展到2.0階段後,O2O基本上已經(jīng)具備了目前大家所理解的要素。這個(gè)階段最主要的特色就是升級(jí)為服務(wù)性電商模式,包括商品(服務(wù))選購(gòu)、下單、支付等流程,把之前簡(jiǎn)單的電商模組轉(zhuǎn)移到更加高頻和生活化場(chǎng)景中來(lái)。到了3.0階段,開(kāi)始了明顯的分化：一個(gè)是真正的垂直細(xì)分領(lǐng)域的一些公司開(kāi)始凸現(xiàn)。認(rèn)知網(wǎng)站頁(yè)面佈局2認(rèn)識(shí)網(wǎng)頁(yè)製作工具瞭解Dreamweaver介面認(rèn)識(shí)代碼運(yùn)用HTML製作表單運(yùn)用HTML製作簡(jiǎn)單網(wǎng)頁(yè)Contents目錄網(wǎng)頁(yè)製作工具種類(lèi)1Dreamweaver安裝2第一節(jié)認(rèn)識(shí)網(wǎng)頁(yè)製作工具網(wǎng)頁(yè)製作工具種類(lèi)1（1）MicrosoftFrontPage：是一款羽量級(jí)靜態(tài)網(wǎng)頁(yè)製作軟體,特別適合新手開(kāi)發(fā)靜態(tài)網(wǎng)站的需要,但2006年底微軟停止了FrontPage服務(wù)。（2）Dreamweaver網(wǎng)頁(yè)製作軟體：AdobeDreamweaver,簡(jiǎn)稱(chēng)“DW”。DW是集網(wǎng)頁(yè)製作和網(wǎng)站管理於一身的“所見(jiàn)即所得”網(wǎng)頁(yè)代碼編輯器。該軟體提供了範(fàn)本套用功能,支持一鍵式生成網(wǎng)頁(yè)框架功能,是初學(xué)者或?qū)I(yè)級(jí)網(wǎng)站開(kāi)發(fā)人員必備的選擇工具。（3）CSSDesign：能夠?qū)SS語(yǔ)法進(jìn)行著色,同時(shí)支持即時(shí)查看樣式功能。（4）Flash動(dòng)畫(huà)製作軟體：動(dòng)畫(huà)或動(dòng)態(tài)圖片是網(wǎng)頁(yè)的重要組成部分,充分合理地使用Flash程式來(lái)設(shè)計(jì)網(wǎng)頁(yè)元素,往往可達(dá)到意想不到的效果。（5）PS（Photoshop）圖像處理軟體:用於對(duì)網(wǎng)頁(yè)圖片進(jìn)行潤(rùn)色或特殊效果處理,是一款網(wǎng)頁(yè)製作必備軟體。現(xiàn)在最常用的是Dreamweaver。必備知識(shí)網(wǎng)頁(yè)製作工具種類(lèi)1知識(shí)拓展網(wǎng)頁(yè)三劍客網(wǎng)頁(yè)三劍客是一套強(qiáng)大的網(wǎng)頁(yè)編輯工具,最初是由Macromedia公司開(kāi)發(fā)出來(lái)的,由Dreamweaver、Fireworks、Flash三個(gè)軟體組成。Dreamweaver是集網(wǎng)頁(yè)製作和網(wǎng)站管理於一身的“所見(jiàn)即所得”網(wǎng)頁(yè)代碼編輯器。使用視覺(jué)輔助功能可以減少錯(cuò)誤並提高網(wǎng)站開(kāi)發(fā)速度。Fireworks是由Macromedia(在2005年被Adobe收購(gòu))推出的一款圖形編輯軟體,軟體可以加速Web設(shè)計(jì)與開(kāi)發(fā),是一款創(chuàng)建與優(yōu)化Web圖像和快速構(gòu)建網(wǎng)站與Web介面原型的理想工具。Flash是由Macromedia公司推出的互動(dòng)式向量圖和Web動(dòng)畫(huà)的標(biāo)準(zhǔn)。網(wǎng)頁(yè)設(shè)計(jì)者使用Flash創(chuàng)作出既漂亮又可改變尺寸的導(dǎo)航介面以及其他奇特的效果。Dreamweaver安裝2操作步驟123456打開(kāi)百度,輸入“DreamweaverCS6下載”選擇一個(gè)安全可靠的網(wǎng)站下載安裝包來(lái)到安裝介面,這裏有兩個(gè)選項(xiàng),一個(gè)是安裝,一個(gè)是試用,但是單擊“試用”前要先斷開(kāi)網(wǎng)路,不然會(huì)出現(xiàn)只有登錄Adobe帳戶(hù)才能安裝的現(xiàn)象。正式進(jìn)入安裝介面,單擊“接受”進(jìn)入下一步。安裝位置,建議默認(rèn)路徑。如果C盤(pán)空間不足,可以將軟體安裝到D盤(pán)、E盤(pán)或其他盤(pán)。然後就可以打開(kāi)軟體了,首次打開(kāi)會(huì)提示關(guān)聯(lián)檔,默認(rèn)即可,再在桌面上創(chuàng)建快捷圖示。Contents目錄認(rèn)識(shí)Dreamweaver介面1認(rèn)識(shí)文檔窗口2第二節(jié)瞭解Dreamweaver介面創(chuàng)建站點(diǎn)3認(rèn)識(shí)Dreamweaver介面1認(rèn)識(shí)Dreamweaver介面1必備知識(shí)（1）標(biāo)題欄（工具欄）：包含各種查看選項(xiàng)和一些常用的操作工具。（2）菜單欄：主要有“檔”“編輯”“查看”“插入”“修改”“格式”“命令”“站點(diǎn)”“窗口”“幫助”10個(gè)菜單。（3）插入面板（浮動(dòng)面板）：面板組位於工作窗口的右側(cè),用於幫助用戶(hù)監(jiān)控和修改工作。（4）屬性面板：顯示在檔窗口中所選元素的屬性,並且可以對(duì)選擇元素的屬性進(jìn)行修改。（5）編輯窗口：文檔窗口和html編輯器。用來(lái)輸入所有網(wǎng)頁(yè)資訊。（6）檔面板：站點(diǎn)的檔都顯示在這個(gè)面板。認(rèn)識(shí)Dreamweaver介面1知識(shí)拓展屬性面板屬性面板顯示了文檔窗口中選擇的元素的屬性,並允許用戶(hù)在屬性面板中對(duì)元素屬性直接進(jìn)行修改,用戶(hù)選擇的元素不同,屬性面板中顯示的內(nèi)容就不同。如需要修改單元格的背景時(shí),只需選中單元格,在屬性面板中進(jìn)行相應(yīng)的修改。在屬性面板右下角有一個(gè)倒三角標(biāo)記,單擊該標(biāo)記,可以展開(kāi)屬性面板,顯示更多的內(nèi)容。認(rèn)識(shí)文檔窗口2必備知識(shí)創(chuàng)建站點(diǎn)3必備知識(shí)創(chuàng)建站點(diǎn)是第一步,也是很重要的一步,創(chuàng)建之後,Dreamweaver就可以幫忙管理站點(diǎn)。操作步驟4321首先在電腦上設(shè)置需要建立站點(diǎn)的根目錄檔夾啟動(dòng)Dreamweaver,執(zhí)行“站點(diǎn)—管理站點(diǎn)—新建—新建站點(diǎn)”菜單命令。彈出的窗口中設(shè)置“站點(diǎn)名稱(chēng)”和“本地站點(diǎn)檔夾”(即最初設(shè)定為站點(diǎn)根目錄的檔夾)路徑,設(shè)置完成後單擊“保存”按鈕。在Dreamweaver的右側(cè)面板中會(huì)出現(xiàn)網(wǎng)站的所有檔。Contents目錄查看網(wǎng)頁(yè)代碼1Dreamweaver常用代碼2第三節(jié)認(rèn)識(shí)代碼查看網(wǎng)頁(yè)代碼1必備知識(shí)四種打開(kāi)網(wǎng)頁(yè)源代碼的方法任意打開(kāi)一個(gè)網(wǎng)頁(yè),滑鼠右擊會(huì)看到“查看源代碼”12使用快捷鍵Ctrl+U來(lái)查看源代碼34在你想要查看源代碼的網(wǎng)頁(yè)地址欄前面加上view-source在流覽器的設(shè)置菜單框中,找到“更多工具”,然後找開(kāi)發(fā)者工具,也可以查看網(wǎng)頁(yè)源代碼Dreamweaver常用代碼2必備知識(shí)新建網(wǎng)頁(yè)文檔時(shí),我們可以通過(guò)代碼窗口或者拆分窗口看到這幾行字。12<html>3<head>4<title>無(wú)標(biāo)題文檔</title>5</head>67<body>8</body>9</html>這幾行字就奠定了html的基本結(jié)構(gòu)。在拆分窗口,我們可以很清晰地看到每一步操作對(duì)應(yīng)的代碼,先插入一行一列寬度為950px、邊框粗細(xì)為0px的表格。在這一行表格中插入一張圖片認(rèn)識(shí)文檔窗口2知識(shí)拓展常用代碼<HTML>:表示該檔為HTML檔;<HEAD>:包含檔的標(biāo)題、使用的腳本、樣式定義等;<TITLE></TITLE>:包含檔的標(biāo)題,標(biāo)題出現(xiàn)在流覽器標(biāo)題欄中;<BODY>:放置流覽器中顯示資訊的所有標(biāo)誌和屬性,其中內(nèi)容在流覽器中顯示;</……>:<……>的結(jié)束標(biāo)誌;<TABLE></TABLE>:定義表格,是HTML中重要的標(biāo)誌;<TR></TR>:定義表格的行,用在<TABLE></TABLE>中;<TD></TD>:定義表格的單元格,用在<TR></TR>中;<FONT></FONT>:字體樣式標(biāo)誌;Width:定義表格寬度;Height：定義表格高度;Align：對(duì)齊方式;Border：邊框?qū)挾?Bgcolor：背景色;Bordercolor：邊框顏色;Bordercolorlight：邊框明亮面的顏色;Bordercolordark：邊框暗淡面的顏色;Cellpadding：內(nèi)容與邊框的距離(默認(rèn)為2);Cellspacing：?jiǎn)卧耖g的距離(默認(rèn)為2）;Face：字體；Style:字體樣式;Color:顏色;P:段落標(biāo)識(shí);Img:貼圖示識(shí)。Contents目錄認(rèn)識(shí)登錄介面1瞭解登錄介面元素2認(rèn)識(shí)表單第四節(jié)運(yùn)用HTML製作表單製作登錄介面34認(rèn)識(shí)登錄介面1在電商網(wǎng)站流覽購(gòu)物時(shí),需要登錄個(gè)人帳號(hào);在論壇發(fā)表言論看法時(shí),也需要登錄個(gè)人帳號(hào)。因此在網(wǎng)站製作中,需要製作用戶(hù)的登錄頁(yè)面?，F(xiàn)在一般有兩種登錄方式,即二維碼登錄和普通帳號(hào)密碼登錄。瞭解登錄介面元素2必備知識(shí)目前各大電商平臺(tái)的帳號(hào)密碼/二維碼登錄介面佈局一般可以分成三個(gè)區(qū)域:頂部為企業(yè)logo,左邊為宣傳海報(bào)、活動(dòng)海報(bào),右邊為二維碼登錄框、帳號(hào)密碼登錄框,如圖2-19、圖2-20、圖2-21所示。瞭解登錄介面元素3必備知識(shí)電商網(wǎng)站的登錄介面一般包括6個(gè)主要元素:(1)帳號(hào)輸入框:用於採(cǎi)集用戶(hù)的帳號(hào)資訊。(2)密碼輸入框:用於採(cǎi)集用戶(hù)的密碼資訊。(3)登錄按鈕:用於將帳號(hào)和密碼資訊提交到伺服器。(4)其他登錄方式:用戶(hù)登錄網(wǎng)站的其他選擇,避免煩瑣的註冊(cè)流失顧客。(5)忘記密碼:用戶(hù)用於獲取密碼的途徑。(6)立即註冊(cè):新用戶(hù)註冊(cè)會(huì)員的途徑。認(rèn)識(shí)表單3必備知識(shí)表單是HTML的重要組成部分之一,主要用於採(cǎi)集和提交用戶(hù)輸入的資訊,是網(wǎng)站管理人員和用戶(hù)之間溝通的管道。表單有以下三個(gè)基本組成部分:(1)表單標(biāo)籤:包含了處理表單數(shù)據(jù)所用CGI程式的URL以及數(shù)據(jù)提交到伺服器的方法。(2)表單域:包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框和文件上傳框等。(3)表單按鈕:包括提交按鈕、複位按鈕和一般按鈕。用於將數(shù)據(jù)傳送到伺服器上的CGI腳本或者取消輸入,還可以用表單按鈕來(lái)控制其他定義了處理腳本的工作。製作登錄介面4必備知識(shí)製作登錄介面4必備知識(shí)在Dreamweaver中,表單輸入類(lèi)型稱(chēng)為表單對(duì)象。表單對(duì)象是允許用戶(hù)輸入數(shù)據(jù)的機(jī)制?？梢栽诒韱沃刑砑右韵卤韱螌?duì)象:(1)文本域:接受任何類(lèi)型的字母、數(shù)字、文本輸入內(nèi)容。文本可以單行或多行顯示,也可以以密碼域的方式顯示,在這種情況下,輸入文本將被替換為星號(hào)或?qū)０阜?hào),以避免旁觀者看到這些文本。1製作登錄介面4必備知識(shí)2隱藏域:存儲(chǔ)用戶(hù)輸入的資訊,如姓名、電子郵件地址或習(xí)慣的查看方式,並在該用戶(hù)下次訪問(wèn)此站點(diǎn)時(shí)使用這些數(shù)據(jù)。3複選框:允許在一組選項(xiàng)中選擇多個(gè)選項(xiàng)。用戶(hù)可以選擇任意多個(gè)適用的選項(xiàng)。如圖2-24所示,複選框中選中了三個(gè)選項(xiàng)。製作登錄介面4必備知識(shí)4單選按鈕:代表互相排斥的選擇。在某單選按鈕組(由兩個(gè)或多個(gè)共用同一名稱(chēng)的按鈕組成)中選擇一個(gè)按鈕,就會(huì)取消選擇該組中的所有其他按鈕。5“列表”菜單:在一個(gè)滾動(dòng)列表中顯示選項(xiàng)值,用戶(hù)可以從該滾動(dòng)列表中選擇多個(gè)選項(xiàng)?！安藛巍边x項(xiàng)在一個(gè)菜單中顯示選項(xiàng)值,用戶(hù)只能從中選擇單個(gè)選項(xiàng)。6跳轉(zhuǎn)菜單:是可導(dǎo)航的列表或彈出菜單,通過(guò)它用戶(hù)可以插入一種菜單,這種菜單中的每個(gè)選項(xiàng)都鏈接到某個(gè)文檔或檔。製作登錄介面4必備知識(shí)7檔域:使用戶(hù)可以流覽到其電腦上的某個(gè)檔並將該檔作為表單數(shù)據(jù)上傳。8圖像域:使用戶(hù)可以在表單中插入一個(gè)圖像。圖像域可用於生成圖形化按鈕,例如“提交”或“重置”按鈕。製作登錄介面4必備知識(shí)操作步驟3421創(chuàng)建站點(diǎn)新建並保存檔插入表格。設(shè)置表格為1行1列,寬為400px,邊框?yàn)?px,表格居中對(duì)齊。插入表單域。執(zhí)行“插入記錄—表單—表單”,如圖2-26所示。製作登錄介面4必備知識(shí)操作步驟7865插入表格插入圖片插入文本域插入“登錄”按鈕圖像域製作登錄介面4必備知識(shí)操作步驟109插入“註冊(cè)”按鈕預(yù)覽Contents目錄製作第一個(gè)網(wǎng)頁(yè)1製作進(jìn)階版網(wǎng)頁(yè)2第五節(jié)運(yùn)用HTML製作簡(jiǎn)單網(wǎng)頁(yè)製作第一個(gè)網(wǎng)頁(yè)1必備知識(shí)在開(kāi)始設(shè)計(jì)製作網(wǎng)頁(yè)之前,需要注意以下3點(diǎn):(1)在指定區(qū)域,新建檔夾。在這個(gè)檔夾下創(chuàng)建兩個(gè)子檔夾:一個(gè)名為images,專(zhuān)門(mén)用來(lái)放置素材圖片;另一個(gè)名為pages,用來(lái)存放不同的網(wǎng)頁(yè)。(2)首頁(yè)面的命名統(tǒng)一使用index,例如“index.html”“index.css”“index.js3”,子頁(yè)面的命名可以使用純英文命名的方式,或用中文拼音。(3)檔案名稱(chēng)命名規(guī)則統(tǒng)一,使用小寫(xiě)英文字母、數(shù)字、下劃線和減號(hào)的組合,不得包含漢字空格和特殊符號(hào),以便於理解和方便查找。製作第一個(gè)網(wǎng)頁(yè)1必備知識(shí)操作步驟(1)打開(kāi)Dreamweaver。(2)在菜單欄中,找到站點(diǎn),創(chuàng)建站點(diǎn)。本地站點(diǎn)是用於存放本地用戶(hù)網(wǎng)頁(yè)、素材等資料的檔夾,是用戶(hù)工作目錄。執(zhí)行“站點(diǎn)—新建站點(diǎn)—輸入站點(diǎn)名稱(chēng)—指定本地站點(diǎn)檔夾”,如圖2-32所示。製作第一個(gè)網(wǎng)頁(yè)1必備知識(shí)操作步驟(3)在軟體的初始介面選擇“新建—HTML”或者從檔菜單欄中選擇“新建—空白頁(yè)—HTML—?jiǎng)?chuàng)建”,即可打開(kāi)一張空白的HTML文檔。然後執(zhí)行“檔—保存—修改保存路徑—輸入檔案名(index)—保存”命令保存檔。(4)在Dreamweaver菜單欄上選擇“插入—表格”(插入表格快捷鍵Alt+Ctrl+T),在彈出的“表格”對(duì)話(huà)框中輸入?yún)?shù),單擊“確定”按鈕,如圖2-33所示。製作第一個(gè)網(wǎng)頁(yè)1必備知識(shí)操作步驟(5)將游標(biāo)定位於這行單元格內(nèi),在這個(gè)表格中嵌套一個(gè)表格,如圖2-34所示,效果如圖2-35所示。(6)將游標(biāo)定位於第一行單元格中,輸入文字“我的第一個(gè)網(wǎng)頁(yè)”,如圖2-36所示。製作第一個(gè)網(wǎng)頁(yè)1必備知識(shí)操作步驟(7)在第二行單元格中,執(zhí)行“插入—圖像—選擇‘歡迎.jpg’圖像—確定”命令(插入圖像快捷鍵Ctrl+Alt+I),整體效果如圖2-37所示。(8)按F12鍵查看整體效果,如圖2-38所示。製作進(jìn)階版網(wǎng)頁(yè)2必備知識(shí)操作步驟在這一活動(dòng)中,我們將為導(dǎo)航條添加背景圖片。首先,我們需要在設(shè)置導(dǎo)航欄的表格內(nèi)右擊滑鼠,然後,點(diǎn)擊標(biāo)籤編輯器添加背景圖片。需要注意的是:如果使用常規(guī)的插入圖片,是無(wú)法在此表格內(nèi)輸入文字的。軟體的初始介面選擇“新建—HTML”或者從檔菜單欄中選擇“新建—空白頁(yè)—HTML—?jiǎng)?chuàng)建”,即可打開(kāi)一張空白的HTML文檔。然後執(zhí)行“檔—保存—修改保存路徑—輸入檔案名(index)—保存”操作保存檔。1在菜單欄中,找到站點(diǎn),創(chuàng)建站點(diǎn)。執(zhí)行“站點(diǎn)—新建站點(diǎn)—輸入站點(diǎn)名稱(chēng)—指定本地站點(diǎn)檔夾”。2製作進(jìn)階版網(wǎng)頁(yè)2必備知識(shí)操作步驟在Dreamweaver菜單欄上選擇“插入—表格”(插入表格快捷鍵Alt+Ctrl+T),在彈出的“表格”對(duì)話(huà)框中輸入?yún)?shù),單擊“確定”按鈕。並將表格居中,標(biāo)題更改為蘇州印象。游標(biāo)定位於第一行,執(zhí)行“插入—圖像—選擇‘top.jpg’圖像—確定”命令。第三行執(zhí)行“插入—圖像—選擇‘jdjs.jpg’圖像—確定”命令。第五行執(zhí)行“插入—圖像—選擇‘bottom.jpg’圖像—確定”命令。34製作進(jìn)階版網(wǎng)頁(yè)2必備知識(shí)操作步驟將游標(biāo)置於第二行,執(zhí)行“拆分單元格”命令,將單元格拆分為5列。添加背景圖像“daohanlanbj.jpg”(快捷鍵為Shift+F5)。56在各個(gè)單元格中填入文字:“首頁(yè)”“拙政園”“獅子林”“金雞湖”“蘇州博物館”。製作進(jìn)階版網(wǎng)頁(yè)2必備知識(shí)操作步驟7在第四行中,嵌套一個(gè)4行2列的表格,分別插入圖片和文字,保存檔。(8)預(yù)覽。按F12鍵,預(yù)覽首頁(yè)。8拍攝與處理商品圖片3認(rèn)知相機(jī)相機(jī)的設(shè)置拍攝室內(nèi)商品圖片室外商品的設(shè)置商品圖片的處理Contents目錄選擇合適的相機(jī)1選擇合適的配套工具2第一節(jié)認(rèn)知相機(jī)選擇合適的相機(jī)1必備知識(shí)1.全手動(dòng)曝光模式在全手動(dòng)曝光模式(M)下,可調(diào)整光圈、快門(mén)、感光度、自定義和白平衡等,如圖3-1所示。4.設(shè)置白平衡白平衡真實(shí)地還原了產(chǎn)品的顏色,保證拍攝的照片不偏色，如圖3-4所示。3.微距功能微距對(duì)於拍攝小型產(chǎn)品來(lái)說(shuō)是非常重要的,它能使產(chǎn)品在畫(huà)面中所占的像素更多、更大。微距圖示如圖3-3所示。2.機(jī)頂熱靴熱靴就是相機(jī)頂部的金屬方槽,如圖3-2所示。選擇合適的相機(jī)1

知識(shí)拓展如果用單反相機(jī),應(yīng)該選什麼鏡頭呢?主要還是要看焦段。焦段就是變焦範(fàn)圍,即鏡頭本身的焦距範(fàn)圍。焦距代表了鏡頭可視範(fàn)圍大小的能力,焦距數(shù)字越大,表示可見(jiàn)範(fàn)圍越小,一般很少用廣角拍攝產(chǎn)品,因?yàn)閺V角很容易讓產(chǎn)品變形。也不常使用長(zhǎng)焦,過(guò)長(zhǎng)的長(zhǎng)焦會(huì)局限你的布光及拍攝空間。選擇合適的配套工具2

必備知識(shí)1.光源(1)自然光。(2)人造光。2.其他工具(1)背景。(2)靜物臺(tái)。選擇合適的配套工具2

知識(shí)拓展選擇什麼樣的圖片格式進(jìn)行拍攝好?在相機(jī)的設(shè)置中,最常見(jiàn)的有兩種照片格式,RAW和JPEG。RAW是專(zhuān)業(yè)攝影師常用的格式。JPEG檔小,節(jié)省存儲(chǔ)空間,方便共用或快速流覽,雖然畫(huà)面品質(zhì)有所下降。Contents目錄認(rèn)識(shí)相機(jī)的拍照模式1認(rèn)識(shí)相機(jī)的常用功能2第二節(jié)相機(jī)的設(shè)置認(rèn)識(shí)相機(jī)的拍照模式1

必備知識(shí)認(rèn)識(shí)相機(jī)的拍照模式1

必備知識(shí)1.AUTO模式(自動(dòng)模式)一般都被標(biāo)記成綠色,故又稱(chēng)為“綠色模式”，又稱(chēng)為“傻瓜模式”。該模式下的光圈、快門(mén)、感光度、測(cè)光模式等都由相機(jī)自動(dòng)設(shè)置,對(duì)焦模式和是否開(kāi)啟機(jī)頂閃光燈等也由相機(jī)控制,自動(dòng)模式的優(yōu)缺點(diǎn)如表3-1所示。2.P模式(程式自動(dòng)模式)P模式即程式自動(dòng)模式,拍攝者仍可以對(duì)相機(jī)的曝光補(bǔ)償、感光度、白平衡等參數(shù)進(jìn)行設(shè)置和調(diào)整,保留部分拍攝自主權(quán)。認(rèn)識(shí)相機(jī)的拍照模式1

必備知識(shí)3.A(Av)模式(光圈優(yōu)先)A(Av)模式就是光圈優(yōu)先,是指由相機(jī)自動(dòng)測(cè)光系統(tǒng)計(jì)算出曝光量的值,然後根據(jù)你選定的光圈大小自動(dòng)決定用多少的快門(mén)。光圈優(yōu)先可以很好地控制景深。4.Tv模式(快門(mén)優(yōu)先)Tv模式和Av模式剛好相反，拍攝者能調(diào)節(jié)的是快門(mén)速度,相機(jī)會(huì)根據(jù)你選定的速度給予合適的光圈和曝光。5.M模式(手動(dòng)曝光模式)M模式即手動(dòng)曝光模式,被稱(chēng)為“骨灰擋”“專(zhuān)業(yè)擋”,完全由拍攝者手動(dòng)操控曝光三個(gè)參數(shù)(光圈、快門(mén)、感光度),實(shí)現(xiàn)對(duì)畫(huà)面的影調(diào)控制。M模式還有另一個(gè)顯著的優(yōu)勢(shì),那就是可以固定曝光參數(shù)——其他模式曝光參數(shù)可能都會(huì)因?yàn)榄h(huán)境而改變。認(rèn)識(shí)相機(jī)的拍照模式1

必備知識(shí)6.微距模式利用微距可以充分展示商品的細(xì)節(jié),符合小件商品拍攝的特點(diǎn)。注意事項(xiàng):(1)若想突出某一部分細(xì)節(jié),可選用較大的光圈;反之若想拍攝整體,則應(yīng)選擇較小的光圈。(2)拍攝時(shí)由於距離過(guò)近,若一般要選擇較快的快門(mén)速度或借助三腳架固定相機(jī),也可以選擇坐姿拍攝來(lái)提高穩(wěn)定性。(3)在微距模式下,拍攝需要特別注意照明強(qiáng)度,應(yīng)加強(qiáng)照明以減小相機(jī)本身造成的環(huán)境光影響。認(rèn)識(shí)相機(jī)的常用功能2

必備知識(shí)1.對(duì)焦對(duì)焦(Focus)是指使用照相機(jī)時(shí)調(diào)整好焦點(diǎn)距離,通常數(shù)碼相機(jī)有多種對(duì)焦方式,分別是自動(dòng)對(duì)焦、手動(dòng)對(duì)焦和多重對(duì)焦方式。(1)自動(dòng)對(duì)焦/手動(dòng)對(duì)焦。對(duì)焦模式分為兩種,一種是自動(dòng)對(duì)焦,另一種是手動(dòng)對(duì)焦。自動(dòng)對(duì)焦又有三種模式,分別是AF-S、AF-C、AF-A,如圖3-12所示。(2)對(duì)焦系統(tǒng)的好壞。判斷一臺(tái)相機(jī)對(duì)焦系統(tǒng)的好壞需要從下麵兩點(diǎn)來(lái)看:1)對(duì)焦點(diǎn)個(gè)數(shù)。2)對(duì)焦點(diǎn)覆蓋面積。認(rèn)識(shí)相機(jī)的常用功能2

必備知識(shí)2.曝光的核心——三個(gè)參數(shù):光圈、快門(mén)、感光度如圖3-14所示的三張圖片,分別是欠曝、正常、過(guò)曝的情況。(1)光圈。在快門(mén)不變的情況下,光圈越大,進(jìn)光量越多,畫(huà)面越亮;光圈越小,窗越小,能吸入的光線越少,畫(huà)面越暗。認(rèn)識(shí)相機(jī)的常用功能2

必備知識(shí)(2)快門(mén)?？扉T(mén)打開(kāi),曝光進(jìn)行;快門(mén)關(guān)閉,曝光結(jié)束。1)高速快門(mén)和慢速快門(mén)。高速快門(mén)和低速快門(mén)拍攝效果分別如圖3-17、圖3-18所示。2)安全快門(mén)。(3)ISO(感光度)在保證光圈和快門(mén)不變的情況下,拉高ISO就是拉高感光元件對(duì)光線的敏感程度,使它能夠捕捉到更微弱的光線。Contents目錄做好室內(nèi)拍攝的場(chǎng)景佈置1圍巾和帽子的拍攝技巧2第三節(jié)拍攝室內(nèi)商品圖片做好室內(nèi)拍攝的場(chǎng)景佈置1

必備知識(shí)1.整理好周?chē)碾s物,使商品處?kù)墩麧嵱行虻沫h(huán)境中2.佈置好閃光燈3.使用反光板等輔助設(shè)備佈置場(chǎng)景4.控制好光線方向做好室內(nèi)拍攝的場(chǎng)景佈置1

知識(shí)拓展不同商品的光線運(yùn)用1.表面光滑的商品一是要採(cǎi)用柔和的散射光線進(jìn)行照明,二是可以?huà)?cǎi)取間接照明的方法2.表面粗糙的商品應(yīng)採(cǎi)用側(cè)逆光或側(cè)光照明3.透明的商品一般都採(cǎi)用側(cè)光或底部光進(jìn)行照明4.無(wú)影靜物使用一塊架起來(lái)的玻璃臺(tái)面,將要拍攝的商品擺在上面,在玻璃臺(tái)面的下麵鋪一張較大的白紙或半透明描圖紙。燈光從下麵作用在紙的上面,通過(guò)這種底部的用光可以拍出沒(méi)有投影的商品照片。5.服裝類(lèi)商品如果使用自然光,那麼一定要注意在光線充足且避免直射的時(shí)候進(jìn)行拍攝,如果有條件,可以?huà)?cǎi)用人造光拍攝,雖然還是“主光+輔助光”的方式。圍巾和帽子的拍攝技巧2

必備知識(shí)Contents目錄室外拍攝場(chǎng)地的佈置1室外拍攝的技巧2第四節(jié)室外商品的設(shè)置室外拍攝場(chǎng)地的佈置1

必備知識(shí)在佈置場(chǎng)景時(shí),要注意以下3個(gè)方面:(1)不要選過(guò)於複雜的背景,否則容易使顧客將視線轉(zhuǎn)移到其他地方。最關(guān)鍵的是,背景與商品要協(xié)調(diào)。(2)必須準(zhǔn)備可以給特定部分增加光線的反光板。(3)一定要在規(guī)定時(shí)間內(nèi)完成所有拍攝。室外拍攝的技巧2

必備知識(shí)室外拍攝有模特展示的商品時(shí)需要注意以下4點(diǎn):(1)選擇合適的背景,並決定光的方向?？梢缘脑?huà),最好選擇射光或陰影,如果光線不足,可以利用反光板來(lái)補(bǔ)充光線。一般來(lái)說(shuō),商品拍攝不要採(cǎi)用背光拍攝。(2)最好景深較淺,創(chuàng)建外聚焦效果,以便突出模特。但景深也不能太淺,淺到看不出戶(hù)外背景的話(huà),那外景拍攝的目的也就沒(méi)有了。(3)最好不要使用閃光燈。一般相機(jī)的內(nèi)置閃光燈容易使臉部生硬、不自然。(4)拍攝角度選擇。Contents目錄圖片調(diào)整處理1圖片修復(fù)美化2第五節(jié)商品圖片的處理圖片摳圖取像3圖片調(diào)整處理1必備知識(shí)1.圖片的裁剪21啟動(dòng)PhotoshopCS3,打開(kāi)需要裁剪的圖片,然後選擇“工具箱”上的“裁剪工具”。通過(guò)調(diào)整圖片中的8個(gè)調(diào)節(jié)點(diǎn)來(lái)調(diào)整裁剪區(qū)域的大小,調(diào)整好裁剪區(qū)域大小後,按鍵盤(pán)上的Enter鍵,圖片的截圖就完成了。圖片調(diào)整處理1

必備知識(shí)雙擊滑鼠左鍵,打開(kāi)需要處理的圖片,然後用Photoshop中的拖動(dòng)工具將需要處理的圖片拖動(dòng)到新建的圖層中。231打開(kāi)Photoshop,按快捷鍵Ctrl+N新建一張我們需要的大小的圖層——360像素×260像素。按快捷鍵Ctrl+T(自由變換),之後再按快捷鍵Shift+Alt(等比例縮放圖片),將圖片拖到合適的位置後,按Enter鍵。2.圖片尺寸的調(diào)整圖片調(diào)整處理1

必備知識(shí)3.圖片亮度和色彩的調(diào)節(jié)（1）調(diào)整亮度。通過(guò)Photoshop的色階工具可以調(diào)整圖片的亮度。在調(diào)整的同時(shí)要觀察圖片的亮度變化,合適後即可鬆開(kāi)滑鼠。圖片調(diào)整處理1

必備知識(shí)(2)調(diào)整偏色圖片。要在產(chǎn)品照片拍攝後對(duì)偏色的照片進(jìn)行調(diào)色處理。1)單擊“窗口—直方圖”。2)在直方圖面板的右上角,單擊小三角標(biāo)誌,選擇“全部通道視圖”。3)在直方圖面板的右上角,單擊小三角標(biāo)誌,選擇“用原色顯示通道”。4)選擇“圖像—調(diào)整—色階。5)同樣的操作對(duì)綠色、藍(lán)色通道進(jìn)行調(diào)整,最後使紅綠藍(lán)三個(gè)通道的色階波峰在同一垂直線上。圖片調(diào)整處理1

必備知識(shí)(3)調(diào)整圖片色相及飽和度。選擇“圖像—調(diào)整—色相/飽和度”,左右調(diào)整飽和度,使其接近真實(shí)的商品顏色。圖片修復(fù)美化2

必備知識(shí)1.污點(diǎn)修復(fù)工具的使用處理這類(lèi)污點(diǎn)最常用的就是污點(diǎn)修復(fù)工具。畫(huà)筆的中心內(nèi)容將由畫(huà)筆的周邊內(nèi)容來(lái)替代,但保留中心點(diǎn)的亮度資訊。打開(kāi)污點(diǎn)修復(fù)工具,畫(huà)筆範(fàn)圍大小調(diào)整的快捷鍵是“[”(縮小)、“]”(放大)。模式一般選擇“正常”模式。污點(diǎn)修復(fù)的類(lèi)型有三種:近似匹配表示取樣點(diǎn)向污點(diǎn)填充時(shí)邊界較生硬;創(chuàng)建紋理表示污點(diǎn)由紋理內(nèi)容填充;內(nèi)容識(shí)別表示取樣點(diǎn)向污點(diǎn)填充時(shí)自然過(guò)渡,效果較近似匹配要好一些。圖片修復(fù)美化2

必備知識(shí)2.修補(bǔ)工具的使用修補(bǔ)工具用於修改有明顯裂痕或污點(diǎn)等有缺陷或者需要更改的圖像。細(xì)節(jié)處理則需要用仿製圖章工具,並且在選擇狀態(tài)為“源”的時(shí)候(源需要被修復(fù)),將污點(diǎn)選區(qū)拖動(dòng)到完好區(qū)域?qū)崿F(xiàn)修補(bǔ)。選擇狀態(tài)為“目標(biāo)”的時(shí)候(目標(biāo)需要被修復(fù)),選取足夠蓋住污點(diǎn)區(qū)域的選區(qū),並將其拖動(dòng)到污點(diǎn)區(qū)域,蓋住污點(diǎn)實(shí)現(xiàn)修補(bǔ)。圖片修復(fù)美化2

必備知識(shí)3.仿製圖章工具的使用(1)選擇仿製圖章工具。(2)按住Alt鍵,出現(xiàn)一個(gè)有十字的圓環(huán),這個(gè)圓環(huán)所蓋住的像素就是複製的部分。(3)單擊需要修復(fù)的部分,“+”就是採(cǎi)集的像素,將其覆蓋到“○”上,達(dá)到修復(fù)的目的。(4)用同樣的辦法將繩子的剩餘部分消除。圖片摳圖取像3

必備知識(shí)1.選框工具選框工具包括矩形選框工具、橢圓選框工具、單行選框工具和單列選框工具。圖片摳圖取像3

必備知識(shí)操作步驟1打開(kāi)圖片,單擊工具欄裏“放大鏡”工具,選擇“實(shí)際像素”按鈕.2新建一個(gè)名為“細(xì)節(jié)圖”的畫(huà)布,將畫(huà)布的寬度、高度分別設(shè)置為240像素和240像素。3單擊工具箱中的“矩形選框工具”,在需要裁剪的部分,按住滑鼠左鍵設(shè)置選區(qū)。4選擇“編輯—拷貝”對(duì)選區(qū)進(jìn)行複製,然後在“細(xì)節(jié)圖”窗口中進(jìn)行“編輯—粘貼”操作,矩形選區(qū)內(nèi)的細(xì)節(jié)圖就被粘貼到新畫(huà)布中了。5在工具箱中選擇“移動(dòng)工具”,拖動(dòng)粘貼過(guò)來(lái)的鞋跟細(xì)節(jié)圖到合適的位置。用同樣的辦法,用“橢圓選框工具”將鞋頭剪切下來(lái)到細(xì)節(jié)圖中。圖片摳圖取像3

必備知識(shí)2.套索工具套索工具有三種:套索工具、多邊形套索工具、磁性套索工具。打開(kāi),選擇工具箱中的磁性套索工具。單擊選擇相應(yīng)的獼猴桃邊緣,出現(xiàn)錨點(diǎn),拖動(dòng)滑鼠沿著獼猴桃邊緣選擇需要摳取的部分。最後回到原點(diǎn),形成封閉的虛線框,複製並粘貼到上一圖中。在工具箱中選擇“移動(dòng)工具”,拖動(dòng)驚恐的獼猴桃到合適的位置,最後效果如圖所示。1234圖片摳圖取像3

必備知識(shí)3.其他摳圖工具除了選框工具、套索工具外,魔棒工具和鋼筆工具也可以摳圖。(1)魔棒工具。魔棒工具是Photoshop提供的一種比較快捷的摳圖工具,對(duì)於一些分界線比較明顯的圖像,通過(guò)魔棒工具可以快速將圖像摳出。鋼筆工具是在繪圖軟體中用來(lái)創(chuàng)造路徑的工具,創(chuàng)造路徑後,還可再編輯。魔棒的使用技巧(1)在勾選選區(qū)的時(shí)候注意圖像的放大放小操作,這對(duì)於細(xì)緻位置的勾選大有益處。(2)放大圖像快捷鍵為“Alt+滾動(dòng)輪往上”,放小圖像快捷鍵為“Alt+滾動(dòng)輪往下”。(3)使用快速選擇工具時(shí),縮小畫(huà)筆的快捷鍵為“[”(字母p右邊的鍵),放大畫(huà)筆的快捷鍵為“]”。注意:英文輸入法的狀態(tài)下才可以操作!網(wǎng)店的設(shè)計(jì)與搭建4製作網(wǎng)店的logo製作網(wǎng)店的店招製作網(wǎng)店的導(dǎo)航欄製作網(wǎng)店的促銷(xiāo)海報(bào)製作網(wǎng)店的分類(lèi)導(dǎo)航Contents目錄認(rèn)識(shí)網(wǎng)店的logo1製作網(wǎng)店的logo2第一節(jié)製作網(wǎng)店的logo認(rèn)識(shí)網(wǎng)店的logo1

必備知識(shí)1.淘寶店鋪logo的構(gòu)成標(biāo)誌(1)文字標(biāo)誌:主要是以文字和拼音字母等單獨(dú)構(gòu)成的標(biāo)誌,適用於口口相傳等多種傳播方式,如圖4-1所示。(2)圖案標(biāo)誌:顧名思義,是僅用圖形構(gòu)成的標(biāo)誌。這種標(biāo)誌比較形象生動(dòng),色彩明快,而且不受語(yǔ)言限制,易於識(shí)別,如圖4-2所示。但圖案標(biāo)誌沒(méi)有名稱(chēng),因此表達(dá)的意思不如文字標(biāo)誌準(zhǔn)確。(3)組合標(biāo)誌:就是把文字標(biāo)誌與圖案標(biāo)誌兩種構(gòu)成方式組合而成的標(biāo)誌。這種標(biāo)誌發(fā)揮了文字及圖案標(biāo)誌的優(yōu)點(diǎn),圖文並茂,形象生動(dòng),又易於識(shí)別,如圖4-3所示。認(rèn)識(shí)網(wǎng)店的logo1

必備知識(shí)2.淘寶店鋪logo的設(shè)計(jì)原則(1)構(gòu)圖要有創(chuàng)意,做到構(gòu)圖新穎,富於個(gè)性化,才容易與其他店鋪標(biāo)誌有區(qū)別。(2)含義要深刻,才能體現(xiàn)出店鋪的個(gè)性特徵、獨(dú)特品質(zhì)以及精神風(fēng)貌等。(3)保持穩(wěn)定性,店標(biāo)一旦確立,不要隨意改動(dòng)。(4)設(shè)計(jì)必須符合法律法規(guī),且注重國(guó)際化、統(tǒng)一化。認(rèn)識(shí)網(wǎng)店的logo1

知識(shí)拓展淘寶店鋪logo設(shè)計(jì)要點(diǎn)1.設(shè)計(jì)要有領(lǐng)導(dǎo)性2.設(shè)計(jì)要有造型3.設(shè)計(jì)要具有識(shí)別性4.設(shè)計(jì)要具有統(tǒng)一性5.設(shè)計(jì)要具有系統(tǒng)性6.設(shè)計(jì)要具有時(shí)代性7.設(shè)計(jì)要具有延伸性製作網(wǎng)店的logo2

必備知識(shí)操作步驟打開(kāi)Photoshop。新建一張80px×80px的畫(huà)布(新建畫(huà)布快捷鍵Ctrl+N)。12345按住Alt鍵,滾動(dòng)滑鼠滾輪將畫(huà)布放大到合適大小,找到“橢圓工具”。新建圖層(快捷鍵Shift+Ctrl+N),按住Shift鍵或者Alt鍵,在畫(huà)布中間拉出一個(gè)圓形。6將縮小後的選區(qū)填充顏色#ffffff(背景色填充快捷鍵Ctrl+Delete)。取消選區(qū)(取消選區(qū)的快捷鍵Ctrl+D),並將圓環(huán)調(diào)整到合適的尺寸。在“工具”中找到“自定義形狀工具”。選擇“菜單欄—選擇”(快捷鍵Alt+S),“修改”(快捷鍵M),“收縮”(快捷鍵C),將收縮量調(diào)整為3像素。上傳logo2

必備知識(shí)操作步驟(1)選中賣(mài)家中心,點(diǎn)擊免費(fèi)開(kāi)店,進(jìn)入自己的店鋪,將游標(biāo)放置於頭像框處,點(diǎn)擊店鋪設(shè)置,如圖4-10所示。(2)修改個(gè)人資訊,並將logo上傳至淘寶店鋪中,如圖4-11所示。Contents目錄確定店招內(nèi)容1店招構(gòu)圖2第二節(jié)製作網(wǎng)店的店招上傳店招3確定店招內(nèi)容1

必備知識(shí)1.店招必備的四點(diǎn)內(nèi)容(1)圖形標(biāo)識(shí)(logo);(2)店鋪名稱(chēng);(3)店鋪收藏;(4)廣告語(yǔ)。2.店招可以選擇的內(nèi)容(1)爆款寶貝;(2)搜索(旺旺);(3)二維碼(可微信);(4)優(yōu)惠券;(5)聯(lián)繫方式。確定店招內(nèi)容1

知識(shí)拓展三個(gè)公式1.傻瓜型公式:產(chǎn)品關(guān)鍵字+聯(lián)繫方式2.行銷(xiāo)型公式:主營(yíng)業(yè)務(wù)+促銷(xiāo)活動(dòng)+聯(lián)繫方式3.標(biāo)準(zhǔn)型公式:logo+店鋪名+主營(yíng)業(yè)務(wù)+聯(lián)繫方式店招構(gòu)圖2

必備知識(shí)在店招的構(gòu)圖中最常用且最容易掌握的構(gòu)圖有兩種:居中構(gòu)圖和三步跳構(gòu)圖。(1)居中構(gòu)圖:就是將重點(diǎn)資訊放在畫(huà)面的正中,這種構(gòu)圖版面相對(duì)來(lái)說(shuō)有點(diǎn)嚴(yán)肅、莊重,常用在旗艦店、形象店等。(2)三步跳構(gòu)圖:在以950px×120px為有效區(qū)域的基礎(chǔ)上,店鋪名、logo放左上角,主營(yíng)業(yè)務(wù)區(qū)(促銷(xiāo)產(chǎn)品、活動(dòng)資訊、爆款商品等)放中間,聯(lián)繫方式放右下角。三步跳的構(gòu)圖方式顯得更靈活,版面也很活潑,有很強(qiáng)的層次感。上傳店招3

必備知識(shí)在店招的設(shè)計(jì)過(guò)程中,要注意以下4個(gè)細(xì)節(jié):(1)淘寶店招一般尺寸為950px×120px,阿裏巴巴店招最大可以做成1920px×200px,但是核心的內(nèi)容如店鋪名、促銷(xiāo)商品務(wù)必放在畫(huà)面中央,即950px以?xún)?nèi)。不同的電商平臺(tái)有不同的店招尺寸、內(nèi)容等規(guī)定,具體尺寸、內(nèi)容等要按照該平臺(tái)的規(guī)定來(lái)確定。(2)店招上可以留下賣(mài)家的聯(lián)繫方式,這樣更方便消費(fèi)者與賣(mài)家取得聯(lián)繫,更好地維繫消費(fèi)者與店鋪之間的情感聯(lián)繫。(3)店招上可以放促銷(xiāo)商品,並且將促銷(xiāo)內(nèi)容加上超鏈接,鏈接到該商品的詳情頁(yè)介面。(4)整體風(fēng)格要與logo相匹配,要與網(wǎng)店整體設(shè)計(jì)風(fēng)格協(xié)調(diào)。上傳店招3

必備知識(shí)單擊“選擇檔—添加圖片”,將自己設(shè)計(jì)好的店招圖片上傳至淘寶圖片空間。操作步驟321點(diǎn)擊進(jìn)入店鋪裝修介面,選擇“首頁(yè)”,裝修該介面。單擊“編輯”按鈕,就可以設(shè)置我們的店招了。Contents目錄認(rèn)識(shí)導(dǎo)航欄1導(dǎo)航欄內(nèi)容2第三節(jié)製作網(wǎng)店的導(dǎo)航欄認(rèn)識(shí)導(dǎo)航欄1

登錄天貓,查看“三只松鼠”(見(jiàn)圖4-21)、“茵曼”(見(jiàn)圖4-22)、“阿芙”(見(jiàn)圖4-23)等官方旗艦店的導(dǎo)航欄。認(rèn)識(shí)導(dǎo)航欄1

必備知識(shí)通常按位置可以將導(dǎo)航劃分為三個(gè)區(qū)域:(1)頂部導(dǎo)航:包括商品分類(lèi)、搜索欄、自定義頁(yè)面(品牌故事、會(huì)員專(zhuān)區(qū)、購(gòu)物須知等)。(2)左側(cè)欄:包括商品分類(lèi)、收藏按鈕、線上客服、熱銷(xiāo)熱藏、商品推薦、其他超鏈接(手機(jī)店鋪、加入幫派等)。(3)自由導(dǎo)航:包括圖片(文字)、超鏈接(可以指向某一分類(lèi)或自定義頁(yè)面,多數(shù)用於活動(dòng),可擺放在頁(yè)面的任意位置)。導(dǎo)航欄內(nèi)容2

查看“阿芙”(見(jiàn)圖4-24)、“茵曼”(見(jiàn)圖4-25)、“歐舒丹”(見(jiàn)圖4-26)等官方旗艦店的導(dǎo)航欄。導(dǎo)航欄內(nèi)容2必備知識(shí)1.頂部導(dǎo)航:隱形推薦在導(dǎo)航欄分類(lèi)頁(yè)面上,常見(jiàn)商品分類(lèi)方式如下:(1)理性分類(lèi):按品牌劃分、按材質(zhì)劃分、按價(jià)格劃分、按季節(jié)劃分等；(2)感性分類(lèi):按風(fēng)格分類(lèi)(日韓風(fēng)、歐美風(fēng))、按活動(dòng)劃分、按感官劃分(顯瘦、顯白區(qū))。2.左側(cè)欄:推薦利器合理佈局左側(cè)欄。左側(cè)欄內(nèi)外應(yīng)一致。Contents目錄認(rèn)識(shí)促銷(xiāo)海報(bào)1促銷(xiāo)海報(bào)的內(nèi)容與設(shè)計(jì)要素2第四節(jié)製作網(wǎng)店的促銷(xiāo)海報(bào)認(rèn)識(shí)促銷(xiāo)海報(bào)1

必備知識(shí)促銷(xiāo)海報(bào)的內(nèi)容與設(shè)計(jì)要素2

必備知識(shí)1.促銷(xiāo)海報(bào)的內(nèi)容(1)促銷(xiāo)品牌。(2)促銷(xiāo)產(chǎn)品。(3)促銷(xiāo)價(jià)格。(4)促銷(xiāo)時(shí)限。(5)促銷(xiāo)文案。(6)色彩搭配。2.促銷(xiāo)海報(bào)的設(shè)計(jì)要素(1)促銷(xiāo)海報(bào)要求主題鮮明,在把握好海報(bào)的主題定位時(shí)把想表現(xiàn)的主要內(nèi)容體現(xiàn)出來(lái)。(2)用醒目的字體。重點(diǎn)要突出的內(nèi)容用粗黑體。促銷(xiāo)海報(bào)的內(nèi)容與設(shè)計(jì)要素2

知識(shí)拓展海報(bào)設(shè)計(jì)中常見(jiàn)的文案表現(xiàn)技法有以下8種:1.借用比喻法2.幽默法3.以小見(jiàn)大法4.聯(lián)想法5.直接展示法6.以情托物法7.懸念法8.時(shí)事熱點(diǎn)法Contents目錄認(rèn)識(shí)分類(lèi)導(dǎo)航1分類(lèi)導(dǎo)航管理2第五節(jié)製作網(wǎng)店的分類(lèi)導(dǎo)航認(rèn)識(shí)分類(lèi)導(dǎo)航1

在設(shè)計(jì)中,品類(lèi)可以用圖文並茂的形式表達(dá),畫(huà)面色調(diào)統(tǒng)一,文字造型統(tǒng)一,圖形元素風(fēng)格統(tǒng)一。認(rèn)識(shí)分類(lèi)導(dǎo)航1

必備知識(shí)左側(cè)欄分類(lèi):首頁(yè)佈局在佈局單元設(shè)置為左右兩欄時(shí)使用,把點(diǎn)擊次數(shù)少的分類(lèi)及圖片放置到點(diǎn)擊次數(shù)多的位置,及時(shí)調(diào)整分類(lèi)位置及圖片效果,有利於店鋪產(chǎn)品的銷(xiāo)售,不讓個(gè)別商品發(fā)生囤積的現(xiàn)象。認(rèn)識(shí)分類(lèi)導(dǎo)航1

必備知識(shí)操作步驟打開(kāi)Photoshop軟體,選擇菜單“檔—打開(kāi)”命令,打開(kāi)已搜集的兩幅素材圖片。12345製作分類(lèi)導(dǎo)航範(fàn)本(2)開(kāi)始製作歡迎圖片。選擇菜單“檔—新建”命令,打開(kāi)“新建”對(duì)話(huà)框進(jìn)行設(shè)置。切換到素材圖片,選擇菜單“選擇—全部”命令,然後選擇菜單“編輯—拷貝”命令複製圖像。6在工具欄中單擊“移動(dòng)工具”按鈕,水準(zhǔn)移動(dòng)圖層至右側(cè)。在工具欄中單擊“縮放工具”按鈕將圖片放大,接下來(lái)調(diào)整圖片大小。如果原先素材較寬,要將其變窄,可以單擊“移動(dòng)工具”按鈕,向左水準(zhǔn)拖動(dòng)選擇的區(qū)域。選擇菜單“選擇—取消選擇”命令取消區(qū)域選擇。選擇菜單“檔—保存”命令,彈出“存儲(chǔ)為”對(duì)話(huà)框,將圖片保存為“歡迎.psd”和“歡迎.jpg”。認(rèn)識(shí)分類(lèi)導(dǎo)航1

必備知識(shí)操作步驟新建一個(gè)尺寸為155像素×72像素的空白檔,將另一幅素材圖片用同樣的方法粘貼到新建的空白檔中。將圖片放大並移動(dòng)到右對(duì)齊的位置。使用“矩形選框工具”按鈕選擇矩形區(qū)域。78在工具欄中單擊“移動(dòng)工具”按鈕,然後按下Alt鍵的同時(shí)拖動(dòng)圖片上的矩形選區(qū),即可在同一圖層中對(duì)選區(qū)進(jìn)行移動(dòng),如果圖片上有文字可將其覆蓋。按照以上方法能夠?qū)D片變寬。圖片寬度和高度調(diào)整完成後,將圖片保存為“按鈕.psd”。認(rèn)識(shí)分類(lèi)導(dǎo)航1

必備知識(shí)操作步驟分類(lèi)導(dǎo)航添加文字。在歡迎圖片與商品分類(lèi)圖片上製作文字的具體操作步驟如下:1)打開(kāi)“歡迎.psd”圖片,在工具欄中單擊“橫排文字工具”按鈕輸入店鋪名稱(chēng),並利用“裁剪工具”將圖片拉長(zhǎng)。2)雙擊選中文字,在“選項(xiàng)”面板中將字體設(shè)置為“微軟雅黑”,設(shè)置字體大小為“18點(diǎn)”,設(shè)置消除鋸齒的方法為“平滑”,設(shè)置文本顏色為“白色”。3)選擇菜單“圖層—圖層樣式—描邊”命令,打開(kāi)“圖層樣式”對(duì)話(huà)框。在左側(cè)“樣式”列表中選擇“描邊”選項(xiàng),在右側(cè)的“大小”文本框中輸入1像素。單擊填充類(lèi)型的“顏色”按鈕。4)在店鋪名稱(chēng)下輸入工作時(shí)間與聯(lián)繫方式,文字樣式延續(xù)前面的設(shè)置。5)接著修改剛才輸入的字體樣式與顏色。6)設(shè)置行距為18點(diǎn),設(shè)置消除鋸齒的方法為“平滑”,為文字加上1像素的描邊效果。7)打開(kāi)商品分類(lèi)圖片“按鈕.psd”添加在第六步文字的後方。效果圖如圖4-39所示。9分類(lèi)導(dǎo)航管理2

必備知識(shí)操作步驟登錄淘寶網(wǎng),進(jìn)入賣(mài)家中心的“寶貝分類(lèi)管理”。123456在出現(xiàn)的編輯框裏輸入分類(lèi)名稱(chēng)。左邊有顯示黑色三角形的是分類(lèi)(要用“添加手工分類(lèi)”來(lái)添加),沒(méi)有顯示黑色三角形的是子分類(lèi)。單擊“添加手工分類(lèi)”,在“添加子分類(lèi)”輸入框中輸入子分類(lèi)名稱(chēng)。輸入完成後要單擊網(wǎng)頁(yè)右上角的“保存更改”。如果有實(shí)物和虛擬的分類(lèi)和子分類(lèi),需要把要賣(mài)的商品的分類(lèi)和子分類(lèi)先添加好。保存好分類(lèi)以後,再來(lái)給分類(lèi)添加圖片。進(jìn)入賣(mài)家中心的圖片空間。選“上傳圖片”,單擊“通用上傳”,單擊“添加圖片”。把“分類(lèi)圖片”檔夾中的圖片全部上傳。添加好圖片後單擊網(wǎng)頁(yè)右上角的“保存”按鈕。操作完畢請(qǐng)?jiān)谫u(mài)家中心,單擊查看淘寶店鋪。添加分類(lèi)圖片,分類(lèi)和子分類(lèi)可以按自己的需要添加。如果不需要,分類(lèi)後面有“刪除”按鈕,單擊即可。電子商務(wù)網(wǎng)站的動(dòng)態(tài)效果5快樂(lè)閃爍的店招促銷(xiāo)海報(bào)的動(dòng)態(tài)和輪播論壇行銷(xiāo)推廣動(dòng)態(tài)圖Contents目錄瞭解動(dòng)畫(huà)製作1製作簡(jiǎn)單的閃爍店招2第一節(jié)快樂(lè)閃爍的店招瞭解動(dòng)畫(huà)製作1

必備知識(shí)1.GIF動(dòng)畫(huà)格式2.幀的概念3.認(rèn)識(shí)“時(shí)間軸”面板製作簡(jiǎn)單的閃爍店招2

必備知識(shí)動(dòng)態(tài)圖像(DynamicImage)是由一組在時(shí)間上不斷變化的若干幀的靜態(tài)圖像組成的序列,是視覺(jué)上運(yùn)動(dòng)的圖像。動(dòng)態(tài)圖像可分為視頻和動(dòng)畫(huà)兩類(lèi)。動(dòng)態(tài)圖像的實(shí)現(xiàn)是建立在人類(lèi)視覺(jué)暫留的基礎(chǔ)之上的。動(dòng)畫(huà)是一種通過(guò)將一系列差別很小的單個(gè)相鄰的畫(huà)面,以一定速率連續(xù)放映而產(chǎn)生的動(dòng)態(tài)視覺(jué)的技術(shù)。動(dòng)態(tài)圖像具有連續(xù)性的特點(diǎn),圖像在時(shí)間軸上以幀為運(yùn)動(dòng)單位,屬於離散型媒體類(lèi)。動(dòng)態(tài)圖像比靜態(tài)圖像表示的範(fàn)圍廣,表現(xiàn)力強(qiáng)。動(dòng)態(tài)圖像具有相關(guān)性特點(diǎn),動(dòng)態(tài)圖像對(duì)錯(cuò)誤的敏感性較低。製作簡(jiǎn)單的閃爍店招2

必備知識(shí)動(dòng)態(tài)圖像的檔格式通常有以下7種:(1)GIF格式。(2)MOV格式。(3)SWF格式。(4)AVI格式。(5)MPEG格式。(6)WMV格式。(7)RM(RealVideo)格式。製作簡(jiǎn)單的閃爍店招2

必備知識(shí)新建檔,寬:950像素,高:120像素,背景顏色:黑色。操作步驟1234輸入“新尚美時(shí)尚女鞋”,設(shè)置字體:微軟雅黑,字型大小:48點(diǎn)。複製文字圖層“新尚美時(shí)尚女鞋”,將文字圖層“新尚美時(shí)尚女鞋副本”中的字體顏色更改為紅色。執(zhí)行“窗口-動(dòng)畫(huà)”命令,選中當(dāng)前幀,按“複製所選幀”按鈕,這樣“動(dòng)畫(huà)(幀)”介面出現(xiàn)2幀。選擇第一幀,將圖層選項(xiàng)卡中紅色文字的圖層設(shè)置為不可見(jiàn),白色的圖層設(shè)置為可見(jiàn),如圖5-4所示;選擇第二幀,將圖層選項(xiàng)卡中紅色文字的圖層設(shè)置為可見(jiàn),白色的圖層設(shè)置為不可見(jiàn)。製作簡(jiǎn)單的閃爍店招2

必備知識(shí)將2幀的延遲時(shí)間均設(shè)置為0.1秒。操作步驟5678將迴圈選項(xiàng)設(shè)置為“永遠(yuǎn)”。按“播放動(dòng)畫(huà)”按鈕,對(duì)所做店招的動(dòng)態(tài)效果進(jìn)行測(cè)試。執(zhí)行“檔—存儲(chǔ)”命令,將檔存儲(chǔ)為“快樂(lè)閃爍的店招.psd”。執(zhí)行“檔—存儲(chǔ)為Web所用格式”命令,彈出“存儲(chǔ)為Web所用格式”對(duì)話(huà)框。9單擊“存儲(chǔ)”按鈕,彈出“將優(yōu)化結(jié)果存儲(chǔ)為”對(duì)話(huà)框,對(duì)相關(guān)選項(xiàng)進(jìn)行設(shè)置,單擊“保存”按鈕。10Contents目錄常見(jiàn)動(dòng)畫(huà)效果1動(dòng)態(tài)海報(bào)的製作與輪播2第二節(jié)促銷(xiāo)海報(bào)的動(dòng)態(tài)和輪播常見(jiàn)動(dòng)畫(huà)效果1

必備知識(shí)1.位置變化動(dòng)畫(huà)位置變化動(dòng)畫(huà)是最常見(jiàn)的動(dòng)畫(huà)形式.2.漸隱漸現(xiàn)動(dòng)畫(huà)漸隱漸現(xiàn)動(dòng)畫(huà)效果也是一種常見(jiàn)的動(dòng)畫(huà)展示效果。3.效果變化動(dòng)畫(huà)在Photoshop中,圖層樣式的應(yīng)用比較廣泛,不但可以為圖像添加投影、外發(fā)光等效果,還可以利用圖層樣式製作效果變化的動(dòng)畫(huà)。4.圖像切換動(dòng)畫(huà)圖像切換動(dòng)畫(huà)是兩個(gè)或多個(gè)圖像相互切換的動(dòng)畫(huà)效果,即兩個(gè)圖像通過(guò)透明度的變化逐漸過(guò)渡,從而實(shí)現(xiàn)兩個(gè)圖像相互切換的效果。主要的製作思路是:將需要切換的兩個(gè)素材疊加在一起,在第1幀顯示其中一個(gè)圖像,隱藏另一個(gè)圖像,在第2幀則顯示另一個(gè)圖像,隱藏前一個(gè)圖像,通過(guò)創(chuàng)建動(dòng)畫(huà)過(guò)渡幀,自動(dòng)生成兩個(gè)圖像之間過(guò)渡的動(dòng)畫(huà)效果。動(dòng)態(tài)海報(bào)的製作與輪播2

必備知識(shí)1.Flash簡(jiǎn)介Flash是一種集動(dòng)畫(huà)創(chuàng)作與應(yīng)用程式開(kāi)發(fā)於一身的軟體工具。Flash軟體可以實(shí)現(xiàn)多種動(dòng)畫(huà)特效,動(dòng)畫(huà)都是由一幀幀的靜態(tài)圖片在短時(shí)間內(nèi)連續(xù)播放而形成的視覺(jué)效果,是表現(xiàn)動(dòng)態(tài)過(guò)程、闡明抽象原理的一種重要媒體。2.Flash的特點(diǎn)與優(yōu)勢(shì)AdobeFlash具有以下特點(diǎn)與優(yōu)勢(shì):(1)短小精悍、相容性好。(2)內(nèi)容豐富、生動(dòng)活潑。(3)高度交互、表現(xiàn)力強(qiáng)。動(dòng)態(tài)海報(bào)的製作與輪播2必備知識(shí)3.Flash的專(zhuān)業(yè)術(shù)語(yǔ)(1)舞臺(tái)。(2)時(shí)間軸。(3)庫(kù)面板。(4)ActionScript。(5)元件。動(dòng)態(tài)海報(bào)的製作與輪播2

必備知識(shí)操作步驟(1)對(duì)素材圖片1.jpg進(jìn)行處理:在Photoshop中打開(kāi)素材檔1.jpg,執(zhí)行“圖像—圖像大小”命令,勾選“約束比例”,將寬度設(shè)置為730像素,如圖5-10所示。(2)對(duì)素材圖片2.jpg進(jìn)行處理:在Photoshop中打開(kāi)素材檔2.jpg,執(zhí)行“圖像—圖像大小”命令,勾選“約束比例”,將寬度設(shè)置為730像素,如圖5-11所示。動(dòng)態(tài)海報(bào)的製作與輪播2

必備知識(shí)操作步驟(3)新建檔,名稱(chēng):動(dòng)態(tài)海報(bào)的製作與輪播,寬:950像素,高:400像素,背景顏色:黃色,如圖5-12所示。(4)將重新設(shè)置過(guò)寬度的1.jpg和2.jpg導(dǎo)入新建的檔中,並居中顯示,選中1.jpg所在的圖層,按快捷鍵Ctrl+T,設(shè)置該圖在背景中的座標(biāo)為X:475px,Y:200px,如圖5-13所示。動(dòng)態(tài)海報(bào)的製作與輪播2

必備知識(shí)操作步驟(5)執(zhí)行“窗口—?jiǎng)赢?huà)”命令,打開(kāi)“動(dòng)畫(huà)”面板,在“圖層”面板中隱藏“2”圖層,如圖5-14所示。(6)在“動(dòng)畫(huà)”面板中設(shè)置第1幀的“幀延遲時(shí)間”為0.1秒,設(shè)置“迴圈”選項(xiàng)為“永遠(yuǎn)”,如圖5-15所示。複製第1幀,得到第2幀,在“圖層”面板中顯示“2”圖層,隱藏“1”圖層,效果如圖5-16所示。動(dòng)態(tài)海報(bào)的製作與輪播2

必備知識(shí)操作步驟(7)在“動(dòng)畫(huà)”面板中按Ctrl鍵同時(shí)選中第1幀和第2幀,如圖5-17所示。(8)單擊“動(dòng)畫(huà)”面板上的“過(guò)渡動(dòng)畫(huà)幀”按鈕,彈出“過(guò)渡”對(duì)話(huà)框,參數(shù)設(shè)置如圖5-18所示。單擊“確定”按鈕,完成“過(guò)渡”對(duì)話(huà)框的設(shè)置,自動(dòng)生成過(guò)渡幀,效果如圖5-19所示。動(dòng)態(tài)海報(bào)的製作與輪播2

必備知識(shí)操作步驟(9)複製第22幀,得到第23幀,使用相同的製作方法,製作出從“2”過(guò)渡到“1”的動(dòng)畫(huà)效果,“動(dòng)畫(huà)”面板如圖5-20所示。(10)按“播放動(dòng)畫(huà)”按鈕,測(cè)試所做動(dòng)畫(huà)效果。(11)改進(jìn)動(dòng)畫(huà)效果,除去過(guò)渡效果的顯示時(shí)間,將每張海報(bào)上的停留時(shí)間設(shè)置為2秒。選擇第22幀,設(shè)置停留時(shí)間為2秒;選擇第43幀,設(shè)置停留時(shí)間為2秒,如圖5-21所示。動(dòng)態(tài)海報(bào)的製作與輪播2

必備知識(shí)操作步驟(12)增加動(dòng)畫(huà)效果,顯示運(yùn)動(dòng)文字:價(jià)格低到你想不到,最後呈現(xiàn)的動(dòng)畫(huà)效果為文字從畫(huà)布底端緩緩升起至畫(huà)布中心。選擇第43幀,複製所選幀,得到第44幀,隱藏第44幀中圖層“1”和“2”的顯示,增加文字圖層,輸入文字“價(jià)格低到你想不到”,將文字移動(dòng)到畫(huà)布的底端,設(shè)置字元格式,如圖5-22所示。按Ctrl+T鍵,設(shè)置文字的旋轉(zhuǎn)角度為-10度。設(shè)置該文字圖層的不透明度為0%,圖層設(shè)置效果如圖5-23所示。(13)選擇第44幀,複製所選幀,得到第45幀。將第45幀中文字圖層的不透明度設(shè)置為100%。移動(dòng)文字到畫(huà)布中心位置,圖層及畫(huà)布效果如圖5-24所示。動(dòng)態(tài)海報(bào)的製作與輪播2

必備知識(shí)操作步驟(14)選中第44、45幀,單擊“過(guò)渡動(dòng)畫(huà)幀”按鈕,設(shè)置過(guò)渡參數(shù)如圖5-25所示。(15)單擊“確定”按鈕,最後預(yù)覽動(dòng)畫(huà)效果:前期為2張海報(bào)輪播,後期為文字從底部緩緩升起並且緩緩顯示出來(lái)。(16)執(zhí)行“檔—存儲(chǔ)”命令,將檔存儲(chǔ)為“動(dòng)態(tài)海報(bào)的製作與輪播.psd”。(17)執(zhí)行“檔—存儲(chǔ)為Web所用格式”命令,彈出“存儲(chǔ)為Web所用格式”對(duì)話(huà)框,將檔存儲(chǔ)為“動(dòng)態(tài)海報(bào)的製作與輪播.gif”,迴圈狀態(tài)為“永遠(yuǎn)”。單擊“播放動(dòng)畫(huà)”按鈕,可以在該對(duì)話(huà)框中預(yù)覽動(dòng)畫(huà)效果。(18)單擊“保存”按鈕,即可輸出GIF動(dòng)畫(huà)。打開(kāi)該GIF動(dòng)畫(huà)圖片,可以看到所製作的動(dòng)態(tài)海報(bào)效果。Contents目錄認(rèn)識(shí)論壇行銷(xiāo)1GIF動(dòng)圖及動(dòng)畫(huà)製作2第三節(jié)論壇行銷(xiāo)推廣動(dòng)態(tài)圖認(rèn)識(shí)論壇行銷(xiāo)1

必備知識(shí)論壇行銷(xiāo)通過(guò)在論壇、博客等平臺(tái)對(duì)企業(yè)和產(chǎn)品資訊進(jìn)行行銷(xiāo)策劃和推廣,提升口碑和美譽(yù)度,達(dá)成推廣目的。案例“封殺王老吉”事件2008年,在王老吉為汶川地震捐款一億元之後,當(dāng)天晚上在網(wǎng)路上出現(xiàn)一篇題為“讓王老吉從中國(guó)的貨架上消失!封殺它!”的帖子,這個(gè)引人注目的標(biāo)題引起了被王老吉義舉感動(dòng)的公眾的憤怒,但打開(kāi)帖子一看,發(fā)帖者所指的“封殺”其實(shí)是要表達(dá)“買(mǎi)光超市的王老吉!上一罐買(mǎi)一罐!”的意思。正話(huà)反說(shuō)產(chǎn)生的強(qiáng)烈反差刺激了無(wú)數(shù)公眾跟帖留言,“今年夏天不喝水,要喝就喝王老吉”“王老吉捐了一億元,我們要買(mǎi)光它的產(chǎn)品,讓它賺十億元”,類(lèi)似這樣的跟帖出現(xiàn)在大量網(wǎng)站的論壇上。數(shù)日後,網(wǎng)上甚至出現(xiàn)了王老吉在一些地方賣(mài)斷貨的傳言。網(wǎng)路上數(shù)量驚人的討論、轉(zhuǎn)載和點(diǎn)擊量,使這一事件引起大量傳統(tǒng)媒體的關(guān)注和跟進(jìn)報(bào)導(dǎo)。GIF動(dòng)圖及動(dòng)畫(huà)製作2

GIF動(dòng)圖因其強(qiáng)大的引流的效果,被視為行銷(xiāo)推廣的利器。GIF動(dòng)圖最早可以追溯到1987年。第一張火遍互聯(lián)網(wǎng)的GIF動(dòng)圖是這張嬰兒跳舞的圖,如圖5-26所示,很多人第一次接觸GIF格式就是通過(guò)這張圖。GIF動(dòng)圖及動(dòng)畫(huà)製作2

必備知識(shí)1.動(dòng)態(tài)圖像的獲取動(dòng)態(tài)圖像資訊處理包括圖形動(dòng)畫(huà)、數(shù)字圖像處理以及視頻、動(dòng)畫(huà)壓縮等相關(guān)技術(shù)。(1)製作Flash動(dòng)畫(huà)圖像。(2)製作GIF動(dòng)畫(huà)圖像。(3)製作3D動(dòng)畫(huà)圖像。2.動(dòng)態(tài)圖像製作的相關(guān)概念(1)關(guān)鍵幀。(2)逐幀動(dòng)畫(huà)。(3)即時(shí)動(dòng)畫(huà)。(4)對(duì)象移動(dòng)。(5)運(yùn)動(dòng)控制。(6)動(dòng)畫(huà)數(shù)據(jù)與動(dòng)畫(huà)檔。(7)流控制技術(shù)。GIF動(dòng)圖及動(dòng)畫(huà)製作2

必備知識(shí)案例支付寶——每一筆都是在乎策略背景:支付寶9.9版本,首頁(yè)大改版,可以“記錄我的生活”。策略:號(hào)召人們用支付寶記錄生活。概念:每一筆都是“在乎”。創(chuàng)意:將用戶(hù)和身邊最親近的人聯(lián)繫起來(lái),通過(guò)一些具體的小事(買(mǎi)早餐、支付水電費(fèi)、借錢(qián)、寵愛(ài)自己……),去證明你的每一筆付出都是在乎,如圖5-27所示。GIF動(dòng)圖及動(dòng)畫(huà)製作2

必備知識(shí)案例讓心意先到家,過(guò)年玩東西南北家策略:與老字型大小品牌跨界合作。概念:天貓年貨節(jié)。創(chuàng)意:提起新年,大家不由自主會(huì)和傳統(tǒng)習(xí)俗掛鉤,天貓通過(guò)具有年味色彩的傳統(tǒng)文化“年畫(huà)”與各地特色年貨相關(guān)聯(lián),吸引消費(fèi)者來(lái)天貓選購(gòu)各地特產(chǎn),如圖5-28所示。創(chuàng)建與管理網(wǎng)站站點(diǎn)6創(chuàng)建站點(diǎn)管理站點(diǎn)與檔Contents目錄創(chuàng)建本地站點(diǎn)1創(chuàng)建遠(yuǎn)程站點(diǎn)2第一節(jié)創(chuàng)建站點(diǎn)創(chuàng)建本地站點(diǎn)1