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

1、電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作content賞析電子商務(wù)網(wǎng)頁認(rèn)知網(wǎng)站頁面布局拍攝與處理商品圖片網(wǎng)店的設(shè)計(jì)與搭建1234目錄56789電子商務(wù)網(wǎng)站的動(dòng)態(tài)效果創(chuàng)建與管理網(wǎng)站站點(diǎn)制作圖文網(wǎng)頁DIV+CSS布局設(shè)置簡單制作表單頁面賞析電子商務(wù)網(wǎng)頁1賞析行業(yè)類網(wǎng)站賞析電子商務(wù)類網(wǎng)站電子商務(wù)網(wǎng)站的類型、特點(diǎn)和發(fā)展趨勢 Contents目錄認(rèn)識(shí)網(wǎng)頁布局設(shè)計(jì)1淺嘗網(wǎng)站布局2第一節(jié) 賞析行業(yè)類網(wǎng)站 布局就是以最適合瀏覽的方式將圖片和文字?jǐn)[放在頁面的不同位置。不同的制作者會(huì)有不同的布局設(shè)計(jì)。常見的網(wǎng)頁布局有“國”字型布局、“T”型布局、POP布局、Flash布局、標(biāo)題正文型布局、左右框架型布局、上下框架型布局。必備知識(shí)認(rèn)

2、識(shí)網(wǎng)頁布局設(shè)計(jì)1“國”字型布局 以“新浪微博”網(wǎng)站為例介紹“國”字型布局。新浪微博網(wǎng)站網(wǎng)址為 /?topnav=1&mod=logo,如圖1-1所示。該網(wǎng)站主要采用了“國”字型布局?！皣弊中筒季忠虿季纸Y(jié)構(gòu)與漢字“國”相似而得名,如圖1-2所示。其頁面的最上部分一般放置網(wǎng)站的logo和導(dǎo)航欄或banner廣告,頁面中間分為左、中、右三部分,左邊放置導(dǎo)航菜單或者其他信息,中間放置網(wǎng)站的主要內(nèi)容,右邊放置網(wǎng)站的登錄注冊和友情鏈接或其他信息,最下部分一般放置網(wǎng)站的版權(quán)信息和聯(lián)系方式或其他信息等。認(rèn)識(shí)網(wǎng)頁布局設(shè)計(jì)1“T”型布局 以“十大品牌網(wǎng)”為例介紹“T”型布局。 十大品牌網(wǎng)是CNPP官方授權(quán)查詢網(wǎng)

3、站,囊括了各大行業(yè)的龍頭企業(yè)網(wǎng)站。網(wǎng)址為,主頁面如圖1-3所示。該主頁面采用了“T”型布局結(jié)構(gòu)。 “T”型布局結(jié)構(gòu)因與英文大寫字母“T”相似而得名,簡化布局示意圖如圖1-4所示。頁面的頂部是“網(wǎng)站logo+導(dǎo)航欄+banner”,左邊是網(wǎng)站導(dǎo)航菜單,右邊是網(wǎng)站主要內(nèi)容。這種布局的優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰、主次分明,是初學(xué)者最容易上手的設(shè)計(jì)布局的方法。 主體部分左側(cè)為各行業(yè)的導(dǎo)航,以及行業(yè)類的二級(jí)分類導(dǎo)航,右側(cè)為權(quán)威數(shù)據(jù)查詢和各大企業(yè)的logo展示。認(rèn)識(shí)網(wǎng)頁布局設(shè)計(jì)1POP布局 POP布局引自廣告術(shù)語,是指頁面布局像一張宣傳海報(bào),以一張精美圖片作為頁面的設(shè)計(jì)中心。這種布局一般出現(xiàn)在一些網(wǎng)站的首頁,大部

4、分為一些精美的平面設(shè)計(jì)結(jié)合一些小的動(dòng)畫,再放上幾個(gè)簡單的鏈接或者僅是一個(gè)“進(jìn)入”的鏈接,甚至有的直接在首頁的圖片上做鏈接而沒有任何提示。這種布局大部分出現(xiàn)在企業(yè)網(wǎng)站和個(gè)人首頁,如果處理得好,會(huì)給人帶來賞心悅目的感覺。POP布局是一種頗具藝術(shù)感和時(shí)尚感的網(wǎng)頁布局方式。 以“POP全球時(shí)尚網(wǎng)絡(luò)機(jī)構(gòu)”為例介紹POP布局。 上海逸尚云聯(lián)信息技術(shù)股份有限公司(簡稱“逸尚云聯(lián)”)是中國首家為時(shí)尚行業(yè)提供流行資訊及供應(yīng)鏈全套解決方案的信息技術(shù)公司,旗下包括兩個(gè)主要的網(wǎng)絡(luò)信息平臺(tái)“POP全球時(shí)尚網(wǎng)絡(luò)機(jī)構(gòu)”和“ULB優(yōu)料寶”,以及一個(gè)遍及全國的“設(shè)界線下時(shí)尚設(shè)計(jì)聯(lián)合空間”?！癙OP全球時(shí)尚網(wǎng)絡(luò)機(jī)構(gòu)”的網(wǎng)址為,主

5、頁面如圖1-5所示。認(rèn)識(shí)網(wǎng)頁布局設(shè)計(jì)1Flash布局 Flash布局是指整個(gè)或大部分頁面本身就是一個(gè)Flash動(dòng)畫,它是動(dòng)態(tài)的,畫面一般比較絢麗、有趣,是一種比較新潮的布局方式。其實(shí)這與封面型結(jié)構(gòu)是類似的,與封面型不同的是,這種類型采用了目前非常流行的Flash,由于Flash強(qiáng)大的功能,頁面所表達(dá)的信息更豐富,其視覺效果及聽覺效果如果處理得當(dāng),絕不遜于傳統(tǒng)的多媒體。Flash主頁面如圖1-6所示。認(rèn)識(shí)網(wǎng)頁布局設(shè)計(jì)1標(biāo)題正文型布局 標(biāo)題正文型布局一般用于顯示文章頁面、新聞頁面和一些注冊頁面等,簡化示意圖如圖1-7所示。認(rèn)識(shí)網(wǎng)頁布局設(shè)計(jì)1左右框架型布局 左右框架型布局是一些大型論壇和企業(yè)經(jīng)常使用

6、的一種布局結(jié)構(gòu)。其布局主要分為左右兩個(gè)框架頁面。左框架頁面一般為導(dǎo)航欄鏈接和網(wǎng)站logo,右框架頁面則放置網(wǎng)站的主要內(nèi)容,簡化示意圖如圖1-8所示。認(rèn)識(shí)網(wǎng)頁布局設(shè)計(jì)1 上下框架型布局 上下框架型布局與左右框架型布局類似。上面放置導(dǎo)航欄或者banner,下面放置網(wǎng)站主要內(nèi)容。其區(qū)別僅在于上下框架型布局分為上下兩個(gè)框架頁面,簡化示意圖如圖1-9所示。認(rèn)識(shí)網(wǎng)頁布局設(shè)計(jì)1 “國”字型布局適用于大型公司等綜合型網(wǎng)站,例如制造業(yè)、IT業(yè)、貿(mào)易類行業(yè)等,頁面顏色多采用公司的標(biāo)準(zhǔn)色、logo的顏色以及和企業(yè)主題相關(guān)的顏色,或者是藍(lán)、灰、紅等體現(xiàn)商務(wù)簡約風(fēng)格的顏色。 個(gè)人主頁和多媒體企業(yè)等可以采用POP布局和F

7、lash布局來達(dá)到?jīng)_擊視覺的效果。網(wǎng)站多以色彩分明和主題分明的全屏海報(bào)和Flash作為主頁,超鏈接到主題內(nèi)容中。 網(wǎng)站導(dǎo)航條的設(shè)計(jì)也基本決定了網(wǎng)頁的二級(jí)頁面欄目的主題顏色風(fēng)格,常見的導(dǎo)航條由“首頁”“關(guān)于公司”“新聞中心”“產(chǎn)品中心”“人力資源”“聯(lián)系我們”組成。 banner:橫幅廣告。一般是使用GIF格式的圖像文件,可用靜態(tài)圖形,也可用多幀圖像拼接為動(dòng)畫圖像。尺寸正在逐漸變大,主要放置的是企業(yè)產(chǎn)品、企業(yè)建筑、企業(yè)人員、企業(yè)工程項(xiàng)目、和主題有關(guān)的修飾圖像、說明資質(zhì)的圖標(biāo)等。文字主要由企業(yè)文化、宣傳口號(hào)、產(chǎn)品描述等構(gòu)成。 網(wǎng)頁的主題部分由公司的信息或者動(dòng)態(tài)組成。 網(wǎng)頁的底部為版權(quán)信息、友情鏈接

8、、企業(yè)聯(lián)系方式、說明性信息等。網(wǎng)站與網(wǎng)頁必備知識(shí)淺嘗網(wǎng)站布局2網(wǎng)站(website)是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML(超文本標(biāo)記語言，是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用)等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。簡單地說，網(wǎng)站是一種溝通工具,人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站,獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)站淺嘗網(wǎng)站布局2網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素,是承載各種網(wǎng)站應(yīng)用的平臺(tái)。使用HTML格式(文件擴(kuò)展名為.html或.htm)。網(wǎng)站中的網(wǎng)頁一般包括靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁兩種形式。靜態(tài)網(wǎng)頁：在網(wǎng)站設(shè)計(jì)中,純粹HT

9、ML格式的網(wǎng)頁通常被稱為“靜態(tài)網(wǎng)頁”，靜態(tài)網(wǎng)頁是標(biāo)準(zhǔn)的HTML文件,可以包含文本、圖像、聲音、Flash動(dòng)畫、客戶端腳本和ActiveX控件及Java小程序等。動(dòng)態(tài)網(wǎng)頁：是指跟靜態(tài)網(wǎng)頁相對的一種網(wǎng)頁。顯示的內(nèi)容是可以隨著時(shí)間、環(huán)境或者數(shù)據(jù)庫操作的結(jié)果而發(fā)生改變的。動(dòng)態(tài)網(wǎng)頁是基本的HTML語法規(guī)范與Java、VB、VC等高級(jí)程序設(shè)計(jì)語言以及數(shù)據(jù)庫編程等多種技術(shù)的融合,以期實(shí)現(xiàn)對網(wǎng)站內(nèi)容和風(fēng)格的高效、動(dòng)態(tài)和交互式的管理。動(dòng)態(tài)網(wǎng)頁文件一般以.asp、.aspx、.jsp、.php等為擴(kuò)展名,并且在動(dòng)態(tài)網(wǎng)頁網(wǎng)址中常有一個(gè)標(biāo)志性的符號(hào)“?”網(wǎng)頁必備知識(shí)淺嘗網(wǎng)站布局2構(gòu)成網(wǎng)頁的基本元素從頁面結(jié)構(gòu)的角度看,

10、網(wǎng)頁主要由導(dǎo)航欄、欄目及正文內(nèi)容這三大要素組成。網(wǎng)頁結(jié)構(gòu)的創(chuàng)建、網(wǎng)頁內(nèi)容布局的規(guī)劃實(shí)際上也是圍繞這三大要素展開的。導(dǎo)航欄又由logo、banner、導(dǎo)航條組成。文字、圖像、動(dòng)畫、超鏈接、表單等基本元素也貫穿了整個(gè)網(wǎng)頁。淺嘗網(wǎng)站布局2構(gòu)成網(wǎng)頁的基本元素（1）logo。網(wǎng)站logo,也叫作網(wǎng)站標(biāo)志,它是一個(gè)網(wǎng)站的象征。所以一個(gè)好的標(biāo)志可以很好地樹立公司形象。而網(wǎng)站標(biāo)志的位置一般在網(wǎng)站的左上角,這樣別人就可以一眼看到它。優(yōu)秀的logo具有個(gè)性鮮明、沖擊視覺等特點(diǎn),便于識(shí)別、記憶,有引導(dǎo)、促進(jìn)消費(fèi)、產(chǎn)生美好聯(lián)想的作用,利于在眾多的企業(yè)中脫穎而出。如麥當(dāng)勞、百事可樂的標(biāo)志在這方面就發(fā)揮了很好的作用。（2

11、）banner。banner是一種網(wǎng)絡(luò)廣告形式,banner廣告一般位于網(wǎng)頁的頂部,使用戶在瀏覽網(wǎng)頁信息的同時(shí)關(guān)注廣告信息。淺嘗網(wǎng)站布局2構(gòu)成網(wǎng)頁的基本元素（3）導(dǎo)航條。導(dǎo)航條是指通過一定的技術(shù)手段,為網(wǎng)站的訪問者提供一定的途徑,使其可以方便地訪問所需的內(nèi)容,從一個(gè)頁面轉(zhuǎn)到另一個(gè)頁面的快速通道。導(dǎo)航條是網(wǎng)頁設(shè)計(jì)中的重要部分,同時(shí)也是整個(gè)網(wǎng)站設(shè)計(jì)中一個(gè)比較獨(dú)立的部分。一般來說,網(wǎng)站中的導(dǎo)航條在各個(gè)頁面中出現(xiàn)的位置是比較固定的,風(fēng)格也比較一致。（4）文字。網(wǎng)頁的最基本元素就是網(wǎng)頁文字。一般企業(yè)網(wǎng)站中,文字始終是表達(dá)信息的主體。設(shè)計(jì)網(wǎng)頁時(shí)需要注意頁面中文字的大小、字體、顏色對比的組合、背景顏色的襯托

12、,以及與圖像等網(wǎng)頁元素之間的排版。淺嘗網(wǎng)站布局2構(gòu)成網(wǎng)頁的基本元素（5）圖像。豐富多彩的圖像是美化網(wǎng)頁必不可少的元素,用于網(wǎng)頁上的圖像一般為JPG格式和GIF格式。網(wǎng)頁中的圖像主要有點(diǎn)綴標(biāo)題的小圖片、介紹性的圖片、代表企業(yè)形象或欄目內(nèi)容的標(biāo)志性圖片。（6）動(dòng)畫。動(dòng)畫是網(wǎng)頁中最活躍的元素,創(chuàng)意出眾、制作精致的動(dòng)畫是吸引瀏覽者眼球的最有效方法之一。但是如果網(wǎng)頁動(dòng)畫太多,也會(huì)“物極必反”,使人感到眼花繚亂,進(jìn)而產(chǎn)生視覺疲勞。（8）表單。表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集。一個(gè)表單有三個(gè)基本組成部分,即表單標(biāo)簽、表單域和表單按鈕。（7）超鏈接。超鏈接可以連接不同網(wǎng)頁或站點(diǎn),各個(gè)網(wǎng)頁鏈接在一起后,才能構(gòu)成一個(gè)

13、網(wǎng)站。超鏈接實(shí)質(zhì)上是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系,這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置,還可以是圖像、電子郵件地址、文件,甚至是一個(gè)應(yīng)用程序。而在網(wǎng)頁中用于超鏈接的對象,通常是一段文字或者是一個(gè)圖像文件。Contents目錄賞析淘寶網(wǎng)主頁1分析“京東”網(wǎng)站2第二節(jié) 賞析電子商務(wù)類網(wǎng)站分析“蘇寧易購”網(wǎng)站和“速賣通”網(wǎng)站3賞析淘寶網(wǎng)主頁1必備知識(shí)淘寶網(wǎng)是亞太地區(qū)較大的網(wǎng)絡(luò)零售網(wǎng)站,由阿里巴巴集團(tuán)在2003年5月創(chuàng)立。2015年3月31日,淘寶宣布啟動(dòng)“實(shí)名認(rèn)證”程序,要最大程度地消除由于虛假注冊信息帶來的交易安全隱患。所謂“實(shí)人認(rèn)證”,就是淘寶年檢。每次審核前,淘寶會(huì)通過

14、旺旺彈窗、手機(jī)短信、站內(nèi)信、郵件等多種方式通知復(fù)核時(shí)間。賣家要根據(jù)淘寶“動(dòng)態(tài)手勢認(rèn)證”(手勢是隨機(jī)的)的具體要求,擺出一模一樣的手勢,拍張照片上傳系統(tǒng),進(jìn)入復(fù)核流程。新“實(shí)人認(rèn)證”系統(tǒng)上線后,淘寶將針對所有賣家進(jìn)行定期復(fù)核,對有不良記錄的賣家,還將增加不定期身份復(fù)核。賞析淘寶網(wǎng)主頁1必備知識(shí)淘寶網(wǎng)主頁面如圖1-10所示,大體采用了“國”字型的結(jié)構(gòu)。主頁的主要作用是產(chǎn)品分類以及熱銷產(chǎn)品的櫥窗展示。淘寶網(wǎng)整體設(shè)計(jì)采用的是以圖為主、文字為輔的風(fēng)格,內(nèi)容之間比較自然,文字和圖片顏色保持一致,顏色搭配也比較和諧。界面設(shè)計(jì)體現(xiàn)了網(wǎng)站營銷導(dǎo)向的屬性,符合用戶和商家的需求。banner會(huì)根據(jù)節(jié)日和活動(dòng)發(fā)生相應(yīng)

15、變化。頁面左側(cè)的主題市場將淘寶網(wǎng)的所有產(chǎn)品歸類整理,如圖1-11所示,一級(jí)主題是大類,二級(jí)導(dǎo)航欄再對一級(jí)主題進(jìn)行細(xì)化,用戶可以根據(jù)分類進(jìn)行精細(xì)的查找。淘寶的主體內(nèi)容中又包含了商城的導(dǎo)航欄。賞析淘寶網(wǎng)主頁1必備知識(shí)底部由“消費(fèi)者保障”“新手上路”“付款方式”“淘寶特色”等使用規(guī)則和方式組成,還有一些合作伙伴的友情鏈接,如圖1-12所示。淘寶網(wǎng)的二級(jí)頁面主要是活動(dòng)促銷頁面,與首頁相似,都是以商品推廣為主的頁面,以圖片為主,如圖1-13所示。賞析淘寶網(wǎng)主頁1必備知識(shí)淘寶網(wǎng)中還有一類頁面是用戶瀏覽最多的頁面賣家的店鋪頁面，賣家的店鋪風(fēng)格豐富多彩,首頁如圖1-14所示。下半部分由左右兩側(cè)組成。左側(cè)是店鋪

16、的賣家信息和店鋪主頁入口、寶貝分類、寶貝排行等。右側(cè)則是這個(gè)具體商品的詳細(xì)介紹,稱為詳情頁。分析“京東”網(wǎng)站2必備知識(shí)必備知識(shí)京東,中國自營式電商企業(yè),創(chuàng)始人劉強(qiáng)東。旗下設(shè)有京東商城、京東金融、拍拍網(wǎng)、京東智能、O2O及海外事業(yè)部等。分析“京東”網(wǎng)站2必備知識(shí)京東網(wǎng)址為,首頁如圖1-16所示。京東的首頁布局與淘寶網(wǎng)類似,都是以“國”字型為主的布局,京東的主體部分也是以搜索、分類、展示為主。在導(dǎo)航欄的下方是一個(gè)搜索框,用戶可通過關(guān)鍵字搜索商品。京東的二級(jí)頁面有兩大類別:一類是優(yōu)惠促銷的二級(jí)頁面(如圖1-17所示),另一類就是商城區(qū)域劃分的二級(jí)頁面,如圖1-18所示。分析“蘇寧易購”網(wǎng)站和“速賣通

17、”網(wǎng)站3必備知識(shí)必備知識(shí)蘇寧易購,是蘇寧云商集團(tuán)股份有限公司旗下新一代B2C網(wǎng)上購物平臺(tái),現(xiàn)已覆蓋傳統(tǒng)家電、3C電器、日用百貨等品類,網(wǎng)址為。速賣通(AliExpress)于2010年4月正式上線,是阿里巴巴旗下唯一面向全球市場打造的在線交易平臺(tái),被廣大賣家稱為“國際版淘寶”，是全球第三大英文在線購物網(wǎng)站,網(wǎng)址為。分析“蘇寧易購”網(wǎng)站和“速賣通”網(wǎng)站3必備知識(shí)電商平臺(tái)大多數(shù)采用“國”字型的布局,主頁上主要是搜索、分類導(dǎo)航和櫥窗展示。分析“蘇寧易購”網(wǎng)站和“速賣通”網(wǎng)站3必備知識(shí)知識(shí)拓展網(wǎng)店策劃書策劃書即對某個(gè)未來的活動(dòng)或者事件進(jìn)行策劃,并展現(xiàn)給讀者的文本。策劃書是目標(biāo)規(guī)劃的文字書,是實(shí)現(xiàn)目標(biāo)的

18、指路燈。網(wǎng)店策劃書一般包括網(wǎng)店名稱、經(jīng)營模式、主營商品、商品特點(diǎn)、顧客定位、價(jià)格定位、市場分析、競爭對手、風(fēng)險(xiǎn)預(yù)測、營銷策略、網(wǎng)店管理、網(wǎng)店推廣與宣傳等。電商平臺(tái)網(wǎng)站設(shè)計(jì)的建議電商平臺(tái)的網(wǎng)站通過精巧的布局和方便的操作來實(shí)現(xiàn)收益最大化。(1)設(shè)計(jì)簡潔(2)使用視頻(3)在首頁上發(fā)布優(yōu)惠信息(4)有效的導(dǎo)航(5)推薦產(chǎn)品(6)明確的定價(jià)和配送詳情分析“蘇寧易購”網(wǎng)站和“速賣通”網(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)航欄:寶貝分類以及關(guān)于我們。(4)全屏海報(bào)。(5)店鋪公告和商品分類。(6)活動(dòng)預(yù)告及活動(dòng)促銷圖片

19、。(7)分類櫥窗。Contents目錄電子商務(wù)網(wǎng)站的類型1電子商務(wù)網(wǎng)站的特點(diǎn)2電子商務(wù)網(wǎng)站的發(fā)展趨勢3第三節(jié) 電子商務(wù)網(wǎng)站的類 型、特點(diǎn)和發(fā)展趨勢電子商務(wù)網(wǎng)站的類型 1必備知識(shí)按照商務(wù)目的和業(yè)務(wù)功能分類（1）基本型商務(wù)網(wǎng)站。（2）宣傳型商務(wù)網(wǎng)站。（3）客戶服務(wù)型網(wǎng)站。（4）完全電子商務(wù)運(yùn)作型網(wǎng)站。按照構(gòu)建網(wǎng)站的主體分類（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é)分類（1）生產(chǎn)型商務(wù)網(wǎng)站。（2）流通型商務(wù)網(wǎng)站按照電子商務(wù)模式分類（1）B2B商務(wù)網(wǎng)站。（2）B2C商務(wù)網(wǎng)站。（3）C2C商務(wù)網(wǎng)站。（4）B2G商務(wù)網(wǎng)站。電子商

20、務(wù)網(wǎng)站的類型 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ù)性,即為買賣雙方提供買賣交易的機(jī)會(huì)。服務(wù)性企業(yè)通過將產(chǎn)品/服務(wù)移至互聯(lián)網(wǎng)上,使客戶能方便地獲得產(chǎn)品或服務(wù)。全球性互聯(lián)網(wǎng)是全球性的,這也決定了電子商務(wù)網(wǎng)站也是全球性的。價(jià)值性電子商務(wù)網(wǎng)站以極低的成本進(jìn)入全球化的電子化市場，參與到市場的爭奪中資源共享性通過電子商務(wù)網(wǎng)站緊密地聯(lián)系在一起,建立網(wǎng)上商城系統(tǒng),通過電子商務(wù)網(wǎng)站實(shí)現(xiàn)信息共

21、享、資源共享、智力共享等?；?dòng)性通過網(wǎng)上商城系統(tǒng)商家之間可以直接交流、談判、簽合同集成性電子商務(wù)網(wǎng)站與客戶關(guān)系管理系統(tǒng)、供應(yīng)鏈管理系統(tǒng)集成,可以幫助企業(yè)集成新舊資源,充分利用已有資源?？蓴U(kuò)展性擴(kuò)展性的網(wǎng)上商城系統(tǒng)對于電子商務(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)性決策者能夠通過電子商務(wù)網(wǎng)站獲得高價(jià)值的商業(yè)數(shù)據(jù),有助于協(xié)調(diào)決策者進(jìn)行科學(xué)決策。電子商務(wù)網(wǎng)站的發(fā)展趨勢 3必備知識(shí)移動(dòng)購物手機(jī)的滲透率增速遠(yuǎn)快于PC,也就是說電子商務(wù)將來的主戰(zhàn)場不是在PC,而是在移動(dòng)設(shè)備上。充

22、分地利用移動(dòng)設(shè)備的特征,比如說它的掃描特征,圖像、語音識(shí)別特征,感應(yīng)特征,地理化、GPS的特征,這些功能可以真正把移動(dòng)購物帶到千家萬戶。平臺(tái)化有了平臺(tái),賣家可以利用全社會(huì)的資源增加自己商品的豐富度,增加自己的服務(wù)和地理覆蓋。物聯(lián)網(wǎng)隨著可穿戴設(shè)備和RFID的發(fā)展,將來的芯片可以植入皮膚,可以植入衣服,可以植入任何物品,任何物品狀態(tài)的變化都可以引起其他相關(guān)物品的狀態(tài)變化。O2OO2O即Online to Offline(在線到離線/線上到線下),線下銷售與服務(wù)通過線上推廣來攬客,消費(fèi)者可以通過線上來篩選需求,在線預(yù)訂、結(jié)算,線下交易、消費(fèi)。精準(zhǔn)化營銷和個(gè)性化服務(wù)每個(gè)人都希望最大效率地應(yīng)用這個(gè)營銷的

23、渠道,為其提供個(gè)性化的營銷和服務(wù)。電子商務(wù)網(wǎng)站的發(fā)展趨勢 3知識(shí)拓展O2OO2O是指將線下的商務(wù)機(jī)會(huì)與互聯(lián)網(wǎng)結(jié)合,讓互聯(lián)網(wǎng)成為線下交易的平臺(tái),這個(gè)概念最早來源于美國。O2O的概念非常廣泛,既可涉及線上,又可涉及線下。主流商業(yè)管理課程均對O2O這種新型的商業(yè)模式有所介紹及關(guān)注。O2O電子商務(wù)模式需具備五大要素:獨(dú)立網(wǎng)上商城、國家級(jí)權(quán)威行業(yè)可信網(wǎng)站認(rèn)證、在線網(wǎng)絡(luò)廣告營銷推廣、全面社交媒體與客戶在線互動(dòng)、線上線下一體化的會(huì)員營銷系統(tǒng)。020電子商務(wù)網(wǎng)站的發(fā)展趨勢 3必備知識(shí)O2O主要經(jīng)歷了以下發(fā)展歷程：在1.0早期的時(shí)候,O2O線上線下初步對接,主要是利用線上推廣的便捷性等把相關(guān)的用戶集中起來,然后

24、把線上的流量倒到線下,主要領(lǐng)域集中在以美團(tuán)為代表的線上團(tuán)購和促銷等領(lǐng)域。發(fā)展到2.0階段后,O2O基本上已經(jīng)具備了目前大家所理解的要素。這個(gè)階段最主要的特色就是升級(jí)為服務(wù)性電商模式,包括商品(服務(wù))選購、下單、支付等流程,把之前簡單的電商模塊轉(zhuǎn)移到更加高頻和生活化場景中來。到了3.0階段,開始了明顯的分化：一個(gè)是真正的垂直細(xì)分領(lǐng)域的一些公司開始凸現(xiàn)。認(rèn)知網(wǎng)站頁面布局2認(rèn)識(shí)網(wǎng)頁制作工具了解Dreamweaver界面認(rèn)識(shí)代碼運(yùn)用HTML制作表單運(yùn)用HTML制作簡單網(wǎng)頁 Contents目錄網(wǎng)頁制作工具種類1Dreamweaver安裝2第一節(jié) 認(rèn)識(shí)網(wǎng)頁制作工具網(wǎng)頁制作工具種類1（1）Microsof

25、t FrontPage：是一款輕量級(jí)靜態(tài)網(wǎng)頁制作軟件,特別適合新手開發(fā)靜態(tài)網(wǎng)站的需要,但2006年底微軟停止了FrontPage服務(wù)。（2）Dreamweaver網(wǎng)頁制作軟件：Adobe Dreamweaver,簡稱“DW”。DW是集網(wǎng)頁制作和網(wǎng)站管理于一身的“所見即所得”網(wǎng)頁代碼編輯器。該軟件提供了模板套用功能,支持一鍵式生成網(wǎng)頁框架功能,是初學(xué)者或?qū)I(yè)級(jí)網(wǎng)站開發(fā)人員必備的選擇工具。（3）CSS Design：能夠?qū)SS語法進(jìn)行著色,同時(shí)支持即時(shí)查看樣式功能。（4）Flash動(dòng)畫制作軟件：動(dòng)畫或動(dòng)態(tài)圖片是網(wǎng)頁的重要組成部分,充分合理地使用Flash程序來設(shè)計(jì)網(wǎng)頁元素,往往可達(dá)到意想不到的效

26、果。（5）PS（Photoshop）圖像處理軟件:用于對網(wǎng)頁圖片進(jìn)行潤色或特殊效果處理,是一款網(wǎng)頁制作必備軟件。現(xiàn)在最常用的是Dreamweaver。必備知識(shí)網(wǎng)頁制作工具種類1知識(shí)拓展網(wǎng)頁三劍客網(wǎng)頁三劍客是一套強(qiáng)大的網(wǎng)頁編輯工具,最初是由Macromedia公司開發(fā)出來的,由Dreamweaver、Fireworks、Flash三個(gè)軟件組成。Dreamweaver是集網(wǎng)頁制作和網(wǎng)站管理于一身的“所見即所得”網(wǎng)頁代碼編輯器。使用視覺輔助功能可以減少錯(cuò)誤并提高網(wǎng)站開發(fā)速度。Fireworks是由Macromedia(在2005年被Adobe收購)推出的一款圖形編輯軟件,軟件可以加速 Web 設(shè)計(jì)與

27、開發(fā),是一款創(chuàng)建與優(yōu)化 Web 圖像和快速構(gòu)建網(wǎng)站與 Web 界面原型的理想工具。Flash是由Macromedia公司推出的交互式矢量圖和 Web 動(dòng)畫的標(biāo)準(zhǔn)。網(wǎng)頁設(shè)計(jì)者使用 Flash 創(chuàng)作出既漂亮又可改變尺寸的導(dǎo)航界面以及其他奇特的效果。Dreamweaver安裝2操作步驟123456打開百度,輸入“Dreamweaver CS6下載”選擇一個(gè)安全可靠的網(wǎng)站下載安裝包來到安裝界面,這里有兩個(gè)選項(xiàng),一個(gè)是安裝,一個(gè)是試用,但是單擊“試用”前要先斷開網(wǎng)絡(luò),不然會(huì)出現(xiàn)只有登錄Adobe賬戶才能安裝的現(xiàn)象。正式進(jìn)入安裝界面,單擊“接受”進(jìn)入下一步。安裝位置,建議默認(rèn)路徑。如果C盤空間不足,可以將

28、軟件安裝到D盤、E盤或其他盤。然后就可以打開軟件了,首次打開會(huì)提示關(guān)聯(lián)文件,默認(rèn)即可,再在桌面上創(chuàng)建快捷圖標(biāo)。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è),用于幫助用戶監(jiān)控和修改工作。（4）屬性面板：顯示在文件窗口中所選元素的屬性,

29、并且可以對選擇元素的屬性進(jìn)行修改。（5）編輯窗口：文檔窗口和html編輯器。用來輸入所有網(wǎng)頁信息。（6）文件面板：站點(diǎn)的文件都顯示在這個(gè)面板。認(rèn)識(shí)Dreamweaver界面1知識(shí)拓展屬性面板屬性面板顯示了文檔窗口中選擇的元素的屬性,并允許用戶在屬性面板中對元素屬性直接進(jìn)行修改,用戶選擇的元素不同,屬性面板中顯示的內(nèi)容就不同。如需要修改單元格的背景時(shí),只需選中單元格,在屬性面板中進(jìn)行相應(yīng)的修改。在屬性面板右下角有一個(gè)倒三角標(biāo)記,單擊該標(biāo)記,可以展開屬性面板,顯示更多的內(nèi)容。認(rèn)識(shí)文檔窗口2必備知識(shí)創(chuàng)建站點(diǎn)3必備知識(shí)創(chuàng)建站點(diǎn)是第一步,也是很重要的一步,創(chuàng)建之后,Dreamweaver就可以幫忙管理站

30、點(diǎn)。操作步驟4321首先在電腦上設(shè)置需要建立站點(diǎn)的根目錄文件夾啟動(dòng)Dreamweaver,執(zhí)行“站點(diǎn)管理站點(diǎn)新建新建站點(diǎn)”菜單命令。彈出的窗口中設(shè)置“站點(diǎn)名稱”和“本地站點(diǎn)文件夾”(即最初設(shè)定為站點(diǎn)根目錄的文件夾)路徑,設(shè)置完成后單擊“保存”按鈕。在Dreamweaver的右側(cè)面板中會(huì)出現(xiàn)網(wǎng)站的所有文件。Contents目錄查看網(wǎng)頁代碼1Dreamweaver常用代碼2第三節(jié) 認(rèn)識(shí)代碼查看網(wǎng)頁代碼1必備知識(shí)四種打開網(wǎng)頁源代碼的方法任意打開一個(gè)網(wǎng)頁,鼠標(biāo)右擊會(huì)看到“查看源代碼”12使用快捷鍵Ctrl+U來查看源代碼34在你想要查看源代碼的網(wǎng)頁地址欄前面加上view-source在瀏覽器的設(shè)置菜單

31、框中,找到“更多工具”,然后找開發(fā)者工具,也可以查看網(wǎng)頁源代碼Dreamweaver常用代碼2必備知識(shí)新建網(wǎng)頁文檔時(shí),我們可以通過代碼窗口或者拆分窗口看到這幾行字。12 3 4 無標(biāo)題文檔 5 67 8 9 這幾行字就奠定了html的基本結(jié)構(gòu)。在拆分窗口,我們可以很清晰地看到每一步操作對應(yīng)的代碼,先插入一行一列寬度為950px、邊框粗細(xì)為0px的表格。在這一行表格中插入一張圖片認(rèn)識(shí)文檔窗口2知識(shí)拓展常用代碼:表示該文件為HTML文件;:包含文件的標(biāo)題、使用的腳本、樣式定義等;:包含文件的標(biāo)題,標(biāo)題出現(xiàn)在瀏覽器標(biāo)題欄中;:放置瀏覽器中顯示信息的所有標(biāo)志和屬性,其中內(nèi)容在瀏覽器中顯示;:的結(jié)束標(biāo)志

32、;:定義表格,是HTML中重要的標(biāo)志;:定義表格的行,用在中;:定義表格的單元格,用在中;:字體樣式標(biāo)志;Width:定義表格寬度;Height：定義表格高度;Align：對齊方式;Border：邊框?qū)挾? Bgcolor：背景色; Bordercolor：邊框顏色; Bordercolorlight：邊框明亮面的顏色; Bordercolordark：邊框暗淡面的顏色; Cellpadding：內(nèi)容與邊框的距離(默認(rèn)為2); Cellspacing：單元格間的距離(默認(rèn)為2）; Face：字體；Style:字體樣式;Color:顏色;P:段落標(biāo)識(shí);Img:貼圖標(biāo)識(shí)。Contents目錄認(rèn)識(shí)登

33、錄界面1了解登錄界面元素2認(rèn)識(shí)表單第四節(jié) 運(yùn)用HTML制作表單制作登錄界面34認(rèn)識(shí)登錄界面1在電商網(wǎng)站瀏覽購物時(shí),需要登錄個(gè)人賬號(hào);在論壇發(fā)表言論看法時(shí),也需要登錄個(gè)人賬號(hào)。因此在網(wǎng)站制作中,需要制作用戶的登錄頁面。現(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)輸入框:用于采集用戶的賬號(hào)信息。(

34、2)密碼輸入框:用于采集用戶的密碼信息。(3)登錄按鈕:用于將賬號(hào)和密碼信息提交到服務(wù)器。(4)其他登錄方式:用戶登錄網(wǎng)站的其他選擇,避免煩瑣的注冊流失顧客。(5)忘記密碼:用戶用于獲取密碼的途徑。(6)立即注冊:新用戶注冊會(huì)員的途徑。認(rèn)識(shí)表單3必備知識(shí)表單是HTML的重要組成部分之一,主要用于采集和提交用戶輸入的信息,是網(wǎng)站管理人員和用戶之間溝通的渠道。表單有以下三個(gè)基本組成部分:(1)表單標(biāo)簽:包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。(2)表單域:包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。(3)表單按鈕:包括提交按鈕、復(fù)

35、位按鈕和一般按鈕。用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入,還可以用表單按鈕來控制其他定義了處理腳本的工作。制作登錄界面4必備知識(shí)制作登錄界面4必備知識(shí)在 Dreamweaver 中,表單輸入類型稱為表單對象。表單對象是允許用戶輸入數(shù)據(jù)的機(jī)制。可以在表單中添加以下表單對象:(1)文本域:接受任何類型的字母、數(shù)字、文本輸入內(nèi)容。文本可以單行或多行顯示,也可以以密碼域的方式顯示,在這種情況下,輸入文本將被替換為星號(hào)或項(xiàng)目符號(hào),以避免旁觀者看到這些文本。1制作登錄界面4必備知識(shí)2隱藏域:存儲(chǔ)用戶輸入的信息,如姓名、電子郵件地址或習(xí)慣的查看方式,并在該用戶下次訪問此站點(diǎn)時(shí)使用這些數(shù)據(jù)。3復(fù)選框

36、:允許在一組選項(xiàng)中選擇多個(gè)選項(xiàng)。用戶可以選擇任意多個(gè)適用的選項(xiàng)。如圖2-24所示,復(fù)選框中選中了三個(gè)選項(xiàng)。制作登錄界面4必備知識(shí)4單選按鈕:代表互相排斥的選擇。在某單選按鈕組(由兩個(gè)或多個(gè)共享同一名稱的按鈕組成)中選擇一個(gè)按鈕,就會(huì)取消選擇該組中的所有其他按鈕。5“列表”菜單:在一個(gè)滾動(dòng)列表中顯示選項(xiàng)值,用戶可以從該滾動(dòng)列表中選擇多個(gè)選項(xiàng)。“菜單”選項(xiàng)在一個(gè)菜單中顯示選項(xiàng)值,用戶只能從中選擇單個(gè)選項(xiàng)。6跳轉(zhuǎn)菜單:是可導(dǎo)航的列表或彈出菜單,通過它用戶可以插入一種菜單,這種菜單中的每個(gè)選項(xiàng)都鏈接到某個(gè)文檔或文件。制作登錄界面4必備知識(shí)7文件域:使用戶可以瀏覽到其計(jì)算機(jī)上的某個(gè)文件并將該文件作為表單

37、數(shù)據(jù)上傳。8圖像域:使用戶可以在表單中插入一個(gè)圖像。圖像域可用于生成圖形化按鈕,例如“提交”或“重置”按鈕。制作登錄界面4必備知識(shí)操作步驟3421創(chuàng)建站點(diǎn)新建并保存文件插入表格。設(shè)置表格為1行1列,寬為400px,邊框?yàn)?px,表格居中對齊。插入表單域。執(zhí)行“插入記錄表單表單”,如圖2-26所示。制作登錄界面4必備知識(shí)操作步驟7865插入表格插入圖片插入文本域插入“登錄”按鈕圖像域制作登錄界面4必備知識(shí)操作步驟109插入“注冊”按鈕預(yù)覽Contents目錄制作第一個(gè)網(wǎng)頁1制作進(jìn)階版網(wǎng)頁2第五節(jié) 運(yùn)用HTML制作簡單網(wǎng)頁制作第一個(gè)網(wǎng)頁1必備知識(shí)在開始設(shè)計(jì)制作網(wǎng)頁之前,需要注意以下3點(diǎn):(1)在指

38、定區(qū)域,新建文件夾。在這個(gè)文件夾下創(chuàng)建兩個(gè)子文件夾:一個(gè)名為images,專門用來放置素材圖片;另一個(gè)名為pages,用來存放不同的網(wǎng)頁。(2)首頁面的命名統(tǒng)一使用index,例如“index.html”“index.css ”“index.js3”,子頁面的命名可以使用純英文命名的方式,或用中文拼音。(3)文件名稱命名規(guī)則統(tǒng)一,使用小寫英文字母、數(shù)字、下劃線和減號(hào)的組合,不得包含漢字空格和特殊符號(hào),以便于理解和方便查找。制作第一個(gè)網(wǎng)頁1必備知識(shí)操作步驟(1)打開Dreamweaver。(2)在菜單欄中,找到站點(diǎn),創(chuàng)建站點(diǎn)。本地站點(diǎn)是用于存放本地用戶網(wǎng)頁、素材等資料的文件夾,是用戶工作目錄。執(zhí)

39、行“站點(diǎn)新建站點(diǎn)輸入站點(diǎn)名稱指定本地站點(diǎn)文件夾”,如圖2-32所示。制作第一個(gè)網(wǎng)頁1必備知識(shí)操作步驟(3)在軟件的初始界面選擇“新建HTML”或者從文件菜單欄中選擇“新建空白頁HTML創(chuàng)建”,即可打開一張空白的HTML文檔。然后執(zhí)行“文件保存修改保存路徑輸入文件名(index)保存”命令保存文件。(4)在Dreamweaver菜單欄上選擇“插入表格”(插入表格快捷鍵Alt+Ctrl+T),在彈出的“表格”對話框中輸入?yún)?shù),單擊“確定”按鈕,如圖2-33所示。制作第一個(gè)網(wǎng)頁1必備知識(shí)操作步驟(5)將光標(biāo)定位于這行單元格內(nèi),在這個(gè)表格中嵌套一個(gè)表格,如圖2-34所示,效果如圖2-35所示。(6)將

40、光標(biāo)定位于第一行單元格中,輸入文字“我的第一個(gè)網(wǎng)頁”,如圖2-36所示。制作第一個(gè)網(wǎng)頁1必備知識(shí)操作步驟(7)在第二行單元格中,執(zhí)行“插入圖像選擇歡迎.jpg圖像確定”命令(插入圖像快捷鍵Ctrl+Alt+I),整體效果如圖2-37所示。(8)按F12鍵查看整體效果,如圖2-38所示。制作進(jìn)階版網(wǎng)頁2必備知識(shí)操作步驟在這一活動(dòng)中,我們將為導(dǎo)航條添加背景圖片。首先,我們需要在設(shè)置導(dǎo)航欄的表格內(nèi)右擊鼠標(biāo),然后,點(diǎn)擊標(biāo)簽編輯器添加背景圖片。需要注意的是:如果使用常規(guī)的插入圖片,是無法在此表格內(nèi)輸入文字的。軟件的初始界面選擇“新建HTML”或者從文件菜單欄中選擇“新建空白頁HTML創(chuàng)建”,即可打開一張

41、空白的HTML文檔。然后執(zhí)行“文件保存修改保存路徑輸入文件名(index)保存”操作保存文件。1在菜單欄中,找到站點(diǎn),創(chuàng)建站點(diǎn)。執(zhí)行“站點(diǎn)新建站點(diǎn)輸入站點(diǎn)名稱指定本地站點(diǎn)文件夾”。2制作進(jìn)階版網(wǎng)頁2必備知識(shí)操作步驟在Dreamweaver菜單欄上選擇“插入表格”(插入表格快捷鍵Alt+Ctrl+T),在彈出的“表格”對話框中輸入?yún)?shù),單擊“確定”按鈕。并將表格居中,標(biāo)題更改為蘇州印象。光標(biāo)定位于第一行,執(zhí)行“插入圖像選擇top.jpg圖像確定”命令。第三行執(zhí)行“插入圖像選擇jdjs.jpg圖像確定”命令。第五行執(zhí)行“插入圖像選擇bottom.jpg圖像確定”命令。34制作進(jìn)階版網(wǎng)頁2必備知識(shí)操

42、作步驟將光標(biāo)置于第二行,執(zhí)行“拆分單元格”命令,將單元格拆分為5列。添加背景圖像“daohanlanbj.jpg”(快捷鍵為Shift+F5)。56在各個(gè)單元格中填入文字:“首頁”“拙政園”“獅子林”“金雞湖”“蘇州博物館”。制作進(jìn)階版網(wǎng)頁2必備知識(shí)操作步驟7在第四行中,嵌套一個(gè)4行2列的表格,分別插入圖片和文字,保存文件。(8)預(yù)覽。按F12鍵,預(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)整光圈、

43、快門、感光度、自定義和白平衡等,如圖3-1所示。4.設(shè)置白平衡白平衡真實(shí)地還原了產(chǎn)品的顏色,保證拍攝的照片不偏色，如圖3-4所示。3.微距功能微距對于拍攝小型產(chǎn)品來說是非常重要的,它能使產(chǎn)品在畫面中所占的像素更多、更大。微距圖標(biāo)如圖3-3所示。2.機(jī)頂熱靴熱靴就是相機(jī)頂部的金屬方槽,如圖3-2所示。選擇合適的相機(jī)1 知識(shí)拓展如果用單反相機(jī),應(yīng)該選什么鏡頭呢?主要還是要看焦段。焦段就是變焦范圍,即鏡頭本身的焦距范圍。焦距代表了鏡頭可視范圍大小的能力,焦距數(shù)字越大,表示可見范圍越小,一般很少用廣角拍攝產(chǎn)品,因?yàn)閺V角很容易讓產(chǎn)品變形。也不常使用長焦,過長的長焦會(huì)局限你的布光及拍攝空間。選擇合適的配套

44、工具2 必備知識(shí)1.光源(1)自然光。(2)人造光。2.其他工具(1)背景。(2)靜物臺(tái)。選擇合適的配套工具2 知識(shí)拓展選擇什么樣的圖片格式進(jìn)行拍攝好?在相機(jī)的設(shè)置中,最常見的有兩種照片格式,RAW和JPEG。RAW是專業(yè)攝影師常用的格式。JPEG文件小,節(jié)省存儲(chǔ)空間,方便共享或快速瀏覽,雖然畫面質(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)記成綠色,故又稱為“綠色模式”，又稱為“傻瓜模式”。該模式下的光圈、快門、感光度、測光模式等都由相機(jī)自動(dòng)設(shè)置,

45、對焦模式和是否開啟機(jī)頂閃光燈等也由相機(jī)控制,自動(dòng)模式的優(yōu)缺點(diǎn)如表3-1所示。2.P模式(程序自動(dòng)模式)P模式即程序自動(dòng)模式,拍攝者仍可以對相機(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)測光系統(tǒng)計(jì)算出曝光量的值,然后根據(jù)你選定的光圈大小自動(dòng)決定用多少的快門。光圈優(yōu)先可以很好地控制景深。4.Tv模式(快門優(yōu)先)Tv模式和Av模式剛好相反，拍攝者能調(diào)節(jié)的是快門速度,相機(jī)會(huì)根據(jù)你選定的速度給予合適的光圈和曝光。5.M模式(手動(dòng)曝光模式)M模式即手動(dòng)曝光模式,被稱為“骨灰擋”“

46、專業(yè)擋”,完全由拍攝者手動(dòng)操控曝光三個(gè)參數(shù)(光圈、快門、感光度),實(shí)現(xiàn)對畫面的影調(diào)控制。M 模式還有另一個(gè)顯著的優(yōu)勢,那就是可以固定曝光參數(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í)由于距離過近,若一般要選擇較快的快門速度或借助三腳架固定相機(jī),也可以選擇坐姿拍攝來提高穩(wěn)定性。(3)在微距模式下,拍攝需要特別注意照明強(qiáng)度,應(yīng)加強(qiáng)照明以減小相機(jī)本身造成的環(huán)境光影響。認(rèn)識(shí)相機(jī)的常用功能2 必備知識(shí)1.

47、對焦對焦(Focus)是指使用照相機(jī)時(shí)調(diào)整好焦點(diǎn)距離,通常數(shù)碼相機(jī)有多種對焦方式,分別是自動(dòng)對焦、手動(dòng)對焦和多重對焦方式。(1)自動(dòng)對焦/手動(dòng)對焦。對焦模式分為兩種,一種是自動(dòng)對焦,另一種是手動(dòng)對焦。自動(dòng)對焦又有三種模式,分別是AF-S、AF-C、AF-A,如圖3-12所示。(2)對焦系統(tǒng)的好壞。判斷一臺(tái)相機(jī)對焦系統(tǒng)的好壞需要從下面兩點(diǎn)來看:1)對焦點(diǎn)個(gè)數(shù)。2)對焦點(diǎn)覆蓋面積。認(rèn)識(shí)相機(jī)的常用功能2 必備知識(shí)2.曝光的核心三個(gè)參數(shù):光圈、快門、感光度如圖3-14所示的三張圖片,分別是欠曝、正常、過曝的情況。(1)光圈。在快門不變的情況下,光圈越大,進(jìn)光量越多,畫面越亮;光圈越小,窗越小,能吸入的

48、光線越少,畫面越暗。認(rèn)識(shí)相機(jī)的常用功能2 必備知識(shí)(2)快門?？扉T打開,曝光進(jìn)行;快門關(guān)閉,曝光結(jié)束。1)高速快門和慢速快門。高速快門和低速快門拍攝效果分別如圖3-17、圖3-18所示。2)安全快門。(3)ISO(感光度)在保證光圈和快門不變的情況下,拉高ISO就是拉高感光元件對光線的敏感程度,使它能夠捕捉到更微弱的光線。Contents目錄做好室內(nèi)拍攝的場景布置1圍巾和帽子的拍攝技巧2第三節(jié) 拍攝室內(nèi)商品圖片做好室內(nèi)拍攝的場景布置1 必備知識(shí)1.整理好周圍的雜物,使商品處于整潔有序的環(huán)境中 2.布置好閃光燈3.使用反光板等輔助設(shè)備布置場景 4.控制好光線方向做好室內(nèi)拍攝的場景布置1 知識(shí)拓展

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

50、 室外商品的設(shè)置室外拍攝場地的布置1 必備知識(shí)在布置場景時(shí),要注意以下3個(gè)方面:(1)不要選過于復(fù)雜的背景,否則容易使顧客將視線轉(zhuǎn)移到其他地方。最關(guān)鍵的是,背景與商品要協(xié)調(diào)。(2)必須準(zhǔn)備可以給特定部分增加光線的反光板。(3)一定要在規(guī)定時(shí)間內(nèi)完成所有拍攝。室外拍攝的技巧2 必備知識(shí)室外拍攝有模特展示的商品時(shí)需要注意以下4點(diǎn):(1)選擇合適的背景,并決定光的方向?？梢缘脑?最好選擇射光或陰影,如果光線不足,可以利用反光板來補(bǔ)充光線。一般來說,商品拍攝不要采用背光拍攝。(2)最好景深較淺,創(chuàng)建外聚焦效果,以便突出模特。但景深也不能太淺,淺到看不出戶外背景的話,那外景拍攝的目的也就沒有了。(3)最

51、好不要使用閃光燈。一般相機(jī)的內(nèi)置閃光燈容易使臉部生硬、不自然。(4)拍攝角度選擇。Contents目錄圖片調(diào)整處理1圖片修復(fù)美化2第五節(jié) 商品圖片的處理圖片摳圖取像3圖片調(diào)整處理1必備知識(shí)1.圖片的裁剪21啟動(dòng)Photoshop CS3,打開需要裁剪的圖片,然后選擇“工具箱”上的“裁剪工具”。通過調(diào)整圖片中的8個(gè)調(diào)節(jié)點(diǎn)來調(diào)整裁剪區(qū)域的大小,調(diào)整好裁剪區(qū)域大小后,按鍵盤上的Enter鍵,圖片的截圖就完成了。圖片調(diào)整處理1 必備知識(shí)雙擊鼠標(biāo)左鍵,打開需要處理的圖片,然后用Photoshop中的拖動(dòng)工具將需要處理的圖片拖動(dòng)到新建的圖層中。231打開Photoshop,按快捷鍵Ctrl+N新建一張我們

52、需要的大小的圖層360像素260像素。按快捷鍵Ctrl+T(自由變換),之后再按快捷鍵Shift+Alt(等比例縮放圖片),將圖片拖到合適的位置后,按Enter鍵。2.圖片尺寸的調(diào)整圖片調(diào)整處理1 必備知識(shí)3.圖片亮度和色彩的調(diào)節(jié)（1）調(diào)整亮度。通過Photoshop的色階工具可以調(diào)整圖片的亮度。在調(diào)整的同時(shí)要觀察圖片的亮度變化,合適后即可松開鼠標(biāo)。圖片調(diào)整處理1 必備知識(shí)(2)調(diào)整偏色圖片。要在產(chǎn)品照片拍攝后對偏色的照片進(jìn)行調(diào)色處理。1)單擊“窗口直方圖”。2)在直方圖面板的右上角,單擊小三角標(biāo)志,選擇“全部通道視圖”。3)在直方圖面板的右上角,單擊小三角標(biāo)志,選擇“用原色顯示通道”。4)選

53、擇“圖像調(diào)整色階。5)同樣的操作對綠色、藍(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ù)工具的使用處理這類污點(diǎn)最常用的就是污點(diǎn)修復(fù)工具。畫筆的中心內(nèi)容將由畫筆的周邊內(nèi)容來替代,但保留中心點(diǎn)的亮度信息。打開污點(diǎn)修復(fù)工具,畫筆范圍大小調(diào)整的快捷鍵是“”(縮小)、“”(放大)。模式一般選擇“正?！蹦Ｊ?。污點(diǎn)修復(fù)的類型有三種:近似匹配表示取樣點(diǎn)向污點(diǎn)填充時(shí)邊界較生硬;創(chuàng)建紋理表示污點(diǎn)由紋理內(nèi)容填充;內(nèi)容識(shí)別表示取樣點(diǎn)向污點(diǎn)填充時(shí)自

54、然過渡,效果較近似匹配要好一些。圖片修復(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)所蓋住的像素就是復(fù)制的部分。(3)單擊需要修復(fù)的部分,“+”就是采集的像素,將其覆蓋到“”上,達(dá)到修復(fù)的目的。(4)用同樣的

55、辦法將繩子的剩余部分消除。圖片摳圖取像3 必備知識(shí)1.選框工具選框工具包括矩形選框工具、橢圓選框工具、單行選框工具和單列選框工具。圖片摳圖取像3 必備知識(shí)操作步驟1打開圖片,單擊工具欄里“放大鏡”工具,選擇“實(shí)際像素”按鈕.2新建一個(gè)名為“細(xì)節(jié)圖”的畫布,將畫布的寬度、高度分別設(shè)置為240像素和240像素。3單擊工具箱中的 “矩形選框工具”,在需要裁剪的部分,按住鼠標(biāo)左鍵設(shè)置選區(qū)。4選擇 “編輯拷貝”對選區(qū)進(jìn)行復(fù)制,然后在“細(xì)節(jié)圖”窗口中進(jìn)行“編輯粘貼”操作,矩形選區(qū)內(nèi)的細(xì)節(jié)圖就被粘貼到新畫布中了。5在工具箱中選擇“移動(dòng)工具”,拖動(dòng)粘貼過來的鞋跟細(xì)節(jié)圖到合適的位置。用同樣的辦法,用“橢圓選框工

56、具”將鞋頭剪切下來到細(xì)節(jié)圖中。圖片摳圖取像3 必備知識(shí)2.套索工具套索工具有三種:套索工具、多邊形套索工具、磁性套索工具。打開,選擇工具箱中的磁性套索工具。單擊選擇相應(yīng)的獼猴桃邊緣,出現(xiàn)錨點(diǎn),拖動(dòng)鼠標(biāo)沿著獼猴桃邊緣選擇需要摳取的部分。最后回到原點(diǎn),形成封閉的虛線框,復(fù)制并粘貼到上一圖中。在工具箱中選擇“移動(dòng)工具”,拖動(dòng)驚恐的獼猴桃到合適的位置,最后效果如圖所示。1234圖片摳圖取像3 必備知識(shí)3.其他摳圖工具除了選框工具、套索工具外,魔棒工具和鋼筆工具也可以摳圖。(1)魔棒工具。魔棒工具是Photoshop提供的一種比較快捷的摳圖工具,對于一些分界線比較明顯的圖像,通過魔棒工具可以快速將圖像摳

57、出。鋼筆工具是在繪圖軟件中用來創(chuàng)造路徑的工具,創(chuàng)造路徑后,還可再編輯。魔棒的使用技巧(1)在勾選選區(qū)的時(shí)候注意圖像的放大放小操作,這對于細(xì)致位置的勾選大有益處。(2)放大圖像快捷鍵為“Alt+滾動(dòng)輪往上”,放小圖像快捷鍵為“Alt+滾動(dòng)輪往下”。(3)使用快速選擇工具時(shí),縮小畫筆的快捷鍵為“”(字母p右邊的鍵),放大畫筆的快捷鍵為“”。注意:英文輸入法的狀態(tài)下才可以操作!網(wǎng)店的設(shè)計(jì)與搭建4制作網(wǎng)店的logo制作網(wǎng)店的店招制作網(wǎng)店的導(dǎo)航欄制作網(wǎng)店的促銷海報(bào)制作網(wǎng)店的分類導(dǎo)航Contents目錄認(rèn)識(shí)網(wǎng)店的logo1制作網(wǎng)店的logo2第一節(jié) 制作網(wǎng)店的logo認(rèn)識(shí)網(wǎng)店的logo1 必備知識(shí)1.淘寶

58、店鋪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),色彩明快,而且不受語言限制,易于識(shí)別,如圖4-2所示。但圖案標(biāo)志沒有名稱,因此表達(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)含義要深

59、刻,才能體現(xiàn)出店鋪的個(gè)性特征、獨(dú)特品質(zhì)以及精神風(fēng)貌等。(3)保持穩(wěn)定性,店標(biāo)一旦確立,不要隨意改動(dòng)。(4)設(shè)計(jì)必須符合法律法規(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í)操作步驟打開Photoshop。新建一張80px80px的畫布(新建畫布快捷鍵Ctrl+N)。12345按住Alt鍵,滾動(dòng)鼠標(biāo)滾輪將畫布放大到合適大小,找到“橢圓工具”。新建圖層(快捷鍵Shift+Ctrl+N),按住Shift鍵或

60、者Alt鍵,在畫布中間拉出一個(gè)圓形。6將縮小后的選區(qū)填充顏色#ffffff(背景色填充快捷鍵Ctrl+Delete)。取消選區(qū)(取消選區(qū)的快捷鍵Ctrl+D),并將圓環(huán)調(diào)整到合適的尺寸。在“工具”中找到“自定義形狀工具”。選擇“菜單欄選擇”(快捷鍵Alt+S),“修改”(快捷鍵M),“收縮”(快捷鍵C),將收縮量調(diào)整為3像素。上傳logo2 必備知識(shí)操作步驟(1)選中賣家中心,點(diǎn)擊免費(fè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)店的店招上