电子商务网页设计与制作课件

電子商務網頁設計與製作

賞析電子商務網頁1賞析行業類網站賞析電子商務類網站電子商務網站的類型、特點和發展趨勢Contents目錄認識網頁佈局設計1淺嘗網站佈局2第一節賞析行業類網站

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

左右框架型佈局是一些大型論壇和企業經常使用的一種佈局結構。其佈局主要分為左右兩個框架頁面。左框架頁面一般為導航欄鏈接和網站logo,右框架頁面則放置網站的主要內容,簡化示意圖如圖1-8所示。認識網頁佈局設計1

上下框架型佈局上下框架型佈局與左右框架型佈局類似。上面放置導航欄或者banner,下麵放置網站主要內容。其區別僅在於上下框架型佈局分為上下兩個框架頁面,簡化示意圖如圖1-9所示。認識網頁佈局設計1

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

1必備知識按照商務目的和業務功能分類（1）基本型商務網站。（2）宣傳型商務網站。（3）客戶服務型網站。（4）完全電子商務運作型網站。按照構建網站的主體分類（1）行業電子商務網站。（2）企業電子商務網站。（3）政府電子商務網站。（4）服務機構電子商務網站。按照網站擁有者的職責分類（1）生產型商務網站。（2）流通型商務網站按照電子商務模式分類（1）B2B商務網站。（2）B2C商務網站。（3）C2C商務網站。（4）B2G商務網站。電子商務網站的類型

1案例分析阿裏巴巴B2B模式分析阿裏巴巴網站是典型的B2B平臺。阿裏巴巴網站在推崇網上資訊的時候主要提出四個理念：第一個是“找商機”；第二個是“建公司”；第三個為“交商友”；第四個是“看商情”。電子商務網站的特點

2必備知識商務性電子商務網站最基本的特性為商務性,即為買賣雙方提供買賣交易的機會。服務性企業通過將產品/服務移至互聯網上,使客戶能方便地獲得產品或服務。全球性互聯網是全球性的,這也決定了電子商務網站也是全球性的。價值性電子商務網站以極低的成本進入全球化的電子化市場，參與到市場的爭奪中資源共用性通過電子商務網站緊密地聯繫在一起,建立網上商城系統,通過電子商務網站實現資訊共用、資源共用、智力共用等。互動性通過網上商城系統商家之間可以直接交流、談判、簽合同集成性電子商務網站與客戶關係管理系統、供應鏈管理系統集成,可以幫助企業集成新舊資源,充分利用已有資源。可擴展性擴展性的網上商城系統對於電子商務企業而言才是最穩定的系統。電子商務網站必須在出現高峰狀況時及時擴展,才能使得系統阻塞的可能性大大降低。安全性隨著技術的發展,電子商務網站的安全性也會相應得以增強。協調性決策者能夠通過電子商務網站獲得高價值的商業數據,有助於協調決策者進行科學決策。電子商務網站的發展趨勢

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

3知識拓展O2OO2O是指將線下的商務機會與互聯網結合,讓互聯網成為線下交易的平臺,這個概念最早來源於美國。O2O的概念非常廣泛,既可涉及線上,又可涉及線下。主流商業管理課程均對O2O這種新型的商業模式有所介紹及關注。O2O電子商務模式需具備五大要素:獨立網上商城、國家級權威行業可信網站認證、線上網路廣告行銷推廣、全面社交媒體與客戶線上互動、線上線下一體化的會員行銷系統。020電子商務網站的發展趨勢

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

知識拓展如果用單反相機,應該選什麼鏡頭呢?主要還是要看焦段。焦段就是變焦範圍,即鏡頭本身的焦距範圍。焦距代表了鏡頭可視範圍大小的能力,焦距數字越大,表示可見範圍越小,一般很少用廣角拍攝產品,因為廣角很容易讓產品變形。也不常使用長焦,過長的長焦會局限你的布光及拍攝空間。選擇合適的配套工具2

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

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

必備知識認識相機的拍照模式1

必備知識1.AUTO模式(自動模式)一般都被標記成綠色,故又稱為“綠色模式”，又稱為“傻瓜模式”。該模式下的光圈、快門、感光度、測光模式等都由相機自動設置,對焦模式和是否開啟機頂閃光燈等也由相機控制,自動模式的優缺點如表3-1所示。2.P模式(程式自動模式)P模式即程式自動模式,拍攝者仍可以對相機的曝光補償、感光度、白平衡等參數進行設置和調整,保留部分拍攝自主權。認識相機的拍照模式1

必備知識3.A(Av)模式(光圈優先)A(Av)模式就是光圈優先,是指由相機自動測光系統計算出曝光量的值,然後根據你選定的光圈大小自動決定用多少的快門。光圈優先可以很好地控制景深。4.Tv模式(快門優先)Tv模式和Av模式剛好相反，拍攝者能調節的是快門速度,相機會根據你選定的速度給予合適的光圈和曝光。5.M模式(手動曝光模式)M模式即手動曝光模式,被稱為“骨灰擋”“專業擋”,完全由拍攝者手動操控曝光三個參數(光圈、快門、感光度),實現對畫面的影調控制。M模式還有另一個顯著的優勢,那就是可以固定曝光參數——其他模式曝光參數可能都會因為環境而改變。認識相機的拍照模式1

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

必備知識1.對焦對焦(Focus)是指使用照相機時調整好焦點距離,通常數碼相機有多種對焦方式,分別是自動對焦、手動對焦和多重對焦方式。(1)自動對焦/手動對焦。對焦模式分為兩種,一種是自動對焦,另一種是手動對焦。自動對焦又有三種模式,分別是AF-S、AF-C、AF-A,如圖3-12所示。(2)對焦系統的好壞。判斷一臺相機對焦系統的好壞需要從下麵兩點來看:1)對焦點個數。2)對焦點覆蓋面積。認識相機的常用功能2

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

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

必備知識1.整理好周圍的雜物,使商品處於整潔有序的環境中2.佈置好閃光燈3.使用反光板等輔助設備佈置場景4.控制好光線方向做好室內拍攝的場景佈置1

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

必備知識Contents目錄室外拍攝場地的佈置1室外拍攝的技巧2第四節室外商品的設置室外拍攝場地的佈置1

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

必備知識室外拍攝有模特展示的商品時需要注意以下4點:(1)選擇合適的背景,並決定光的方向。可以的話,最好選擇射光或陰影,如果光線不足,可以利用反光板來補充光線。一般來說,商品拍攝不要採用背光拍攝。(2)最好景深較淺,創建外聚焦效果,以便突出模特。但景深也不能太淺,淺到看不出戶外背景的話,那外景拍攝的目的也就沒有了。(3)最好不要使用閃光燈。一般相機的內置閃光燈容易使臉部生硬、不自然。(4)拍攝角度選擇。Contents目錄圖片調整處理1圖片修復美化2第五節商品圖片的處理圖片摳圖取像3圖片調整處理1必備知識1.圖片的裁剪21啟動PhotoshopCS3,打開需要裁剪的圖片,然後選擇“工具箱”上的“裁剪工具”。通過調整圖片中的8個調節點來調整裁剪區域的大小,調整好裁剪區域大小後,按鍵盤上的Enter鍵,圖片的截圖就完成了。圖片調整處理1

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

必備知識3.圖片亮度和色彩的調節（1）調整亮度。通過Photoshop的色階工具可以調整圖片的亮度。在調整的同時要觀察圖片的亮度變化,合適後即可鬆開滑鼠。圖片調整處理1

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

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

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

必備知識2.修補工具的使用修補工具用於修改有明顯裂痕或污點等有缺陷或者需要更改的圖像。細節處理則需要用仿製圖章工具,並且在選擇狀態為“源”的時候(源需要被修復),將污點選區拖動到完好區域實現修補。選擇狀態為“目標”的時候(目標需要被修復),選取足夠蓋住污點區域的選區,並將其拖動到污點區域,蓋住污點實現修補。圖片修復美化2

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

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

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

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

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

必備知識1.淘寶店鋪logo的構成標誌(1)文字標誌:主要是以文字和拼音字母等單獨構成的標誌,適用於口口相傳等多種傳播方式,如圖4-1所示。(2)圖案標誌:顧名思義,是僅用圖形構成的標誌。這種標誌比較形象生動,色彩明快,而且不受語言限制,易於識別,如圖4-2所示。但圖案標誌沒有名稱,因此表達的意思不如文字標誌準確。(3)組合標誌:就是把文字標誌與圖案標誌兩種構成方式組合而成的標誌。這種標誌發揮了文字及圖案標誌的優點,圖文並茂,形象生動,又易於識別,如圖4-3所示。認識網店的logo1

必備知識2.淘寶店鋪logo的設計原則(1)構圖要有創意,做到構圖新穎,富於個性化,才容易與其他店鋪標誌有區別。(2)含義要深刻,才能體現出店鋪的個性特徵、獨特品質以及精神風貌等。(3)保持穩定性,店標一旦確立,不要隨意改動。(4)設計必須符合法律法規,且注重國際化、統一化。認識網店的logo1

知識拓展淘寶店鋪logo設計要點1.設計要有領導性2.設計要有造型3.設計要具有識別性4.設計要具有統一性5.設計要具有系統性6.設計要具有時代性7.設計要具有延伸性製作網店的logo2

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

必備知識操作步驟(1)選中賣家中心,點擊免費開店,進入自己的店鋪,將游標放置於頭像框處,點擊店鋪設置,如圖4-10所示。(2)修改個人資訊,並將logo上傳至淘寶店鋪中,如圖4-11所示。Contents目錄確定店招內容1店招構圖2第二節製作網店的店招上傳店招3確定店招內容1

必備知識1.店招必備的四點內容(1)圖形標識(logo);(2)店鋪名稱;(3)店鋪收藏;(4)廣告語。2.店招可以選擇的內容(1)爆款寶貝;(2)搜索(旺旺);(3)二維碼(可微信);(4)優惠券;(5)聯繫方式。確定店招內容1

知識拓展三個公式1.傻瓜型公式:產品關鍵字+聯繫方式2.行銷型公式:主營業務+促銷活動+聯繫方式3.標準型公式:logo+店鋪名+主營業務+聯繫方式店招構圖2

必備知識在店招的構圖中最常用且最容易掌握的構圖有兩種:居中構圖和三步跳構圖。(1)居中構圖:就是將重點資訊放在畫面的正中,這種構圖版面相對來說有點嚴肅、莊重,常用在旗艦店、形象店等。(2)三步跳構圖:在以950px×120px為有效區域的基礎上,店鋪名、logo放左上角,主營業務區(促銷產品、活動資訊、爆款商品等)放中間,聯繫方式放右下角。三步跳的構圖方式顯得更靈活,版面也很活潑,有很強的層次感。上傳店招3

必備知識在店招的設計過程中,要注意以下4個細節:(1)淘寶店招一般尺寸為950px×120px,阿裏巴巴店招最大可以做成1920px×200px,但是核心的內容如店鋪名、促銷商品務必放在畫面中央,即950px以內。不同的電商平臺有不同的店招尺寸、內容等規定,具體尺寸、內容等要按照該平臺的規定來確定。(2)店招上可以留下賣家的聯繫方式,這樣更方便消費者與賣家取得聯繫,更好地維繫消費者與店鋪之間的情感聯繫。(3)店招上可以放促銷商品,並且將促銷內容加上超鏈接,鏈接到該商品的詳情頁介面。(4)整體風格要與logo相匹配,要與網店整體設計風格協調。上傳店招3

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

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

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

查看“阿芙”(見圖4-24)、“茵曼”(見圖4-25)、“歐舒丹”(見圖4-26)等官方旗艦店的導航欄。導航欄內容2必備知識1.頂部導航:隱形推薦在導航欄分類頁面上,常見商品分類方式如下:(1)理性分類:按品牌劃分、按材質劃分、按價格劃分、按季節劃分等；(2)感性分類:按風格分類(日韓風、歐美風)、按活動劃分、按感官劃分(顯瘦、顯白區)。2.左側欄:推薦利器合理佈局左側欄。左側欄內外應一致。Contents目錄認識促銷海報1促銷海報的內容與設計要素2第四節製作網店的促銷海報認識促銷海報1

必備知識促銷海報的內容與設計要素2

必備知識1.促銷海報的內容(1)促銷品牌。(2)促銷產品。(3)促銷價格。(4)促銷時限。(5)促銷文案。(6)色彩搭配。2.促銷海報的設計要素(1)促銷海報要求主題鮮明,在把握好海報的主題定位時把想表現的主要內容體現出來。(2)用醒目的字體。重點要突出的內容用粗黑體。促銷海報的內容與設計要素2

知識拓展海報設計中常見的文案表現技法有以下8種:1.借用比喻法2.幽默法3.以小見大法4.聯想法5.直接展示法6.以情托物法7.懸念法8.時事熱點法Contents目錄認識分類導航1分類導航管理2第五節製作網店的分類導航認識分類導航1

在設計中,品類可以用圖文並茂的形式表達,畫面色調統一,文字造型統一,圖形元素風格統一。認識分類導航1

必備知識左側欄分類:首頁佈局在佈局單元設置為左右兩欄時使用,把點擊次數少的分類及圖片放置到點擊次數多的位置,及時調整分類位置及圖片效果,有利於店鋪產品的銷售,不讓個別商品發生囤積的現象。認識分類導航1

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

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

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

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

必備知識1.GIF動畫格式2.幀的概念3.認識“時間軸”面板製作簡單的閃爍店招2

必備知識動態圖像(DynamicImage)是由一組在時間上不斷變化的若干幀的靜態圖像組成的序列,是視覺上運動的圖像。動態圖像可分為視頻和動畫兩類。動態圖像的實現是建立在人類視覺暫留的基礎之上的。動畫是一種通過將一系列差別很小的單個相鄰的畫面,以一定速率連續放映而產生的動態視覺的技術。動態圖像具有連續性的特點,圖像在時間軸上以幀為運動單位,屬於離散型媒體類。動態圖像比靜態圖像表示的範圍廣,表現力強。動態圖像具有相關性特點,動態圖像對錯誤的敏感性較低。製作簡單的閃爍店招2

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

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

必備知識將2幀的延遲時間均設置為0.1秒。操作步驟5678將迴圈選項設置為“永遠”。按“播放動畫”按鈕,對所做店招的動態效果進行測試。執行“檔—存儲”命令,將檔存儲為“快樂閃爍的店招.psd”。執行“檔—存儲為Web所用格式”命令,彈出“存儲為Web所用格式”對話框。9單擊“存儲”按鈕,彈出“將優化結果存儲為”對話框,對相關選項進行設置,單擊“保存”按鈕。10Contents目錄常見動畫效果1動態海報的製作與輪播2第二節促銷海報的動態和輪播常見動畫效果1

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

必備知識1.Flash簡介Flash是一種集動畫創作與應用程式開發於一身的軟體工具。Flash軟體可以實現多種動畫特效,動畫都是由一幀幀的靜態圖片在短時間內連續播放而形成的視覺效果,是表現動態過程、闡明抽象原理的一種重要媒體。2.Flash的特點與優勢AdobeFlash具有以下特點與優勢:(1)短小精悍、相容性好。(2)內容豐富、生動活潑。(3)高度交互、表現力強。動態海報的製作與輪播2必備知識3.Flash的專業術語(1)舞臺。(2)時間軸。(3)庫面板。(4)ActionScript。(5)元件。動態海報的製作與輪播2

必備知識操作步驟(1)對素材圖片1.jpg進行處理:在Photoshop中打開素材檔1.jpg,執行“圖像—圖像大小”命令,勾選“約束比例”,將寬度設置為730像素,如圖5-10所示。(2)對素材圖片2.jpg進行處理:在Photoshop中打開素材檔2.jpg,執行“圖像—圖像大小”命令,勾選“約束比例”,將寬度設置為730像素,如圖5-11所示。動態海報的製作與輪播2

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

必備知識操作步驟(5)執行“窗口—動畫”命令,打開“動畫”面板,在“圖層”面板中隱藏“2”圖層,如圖5-14所示。(6)在“動畫”面板中設置第1幀的“幀延遲時間”為0.1秒,設置“迴圈”選項為“永遠”,如圖5-15所示。複製第1幀,得到第2幀,在“圖層”面板中顯示“2”圖層,隱藏“1”圖層,效果如圖5-16所示。動態海報的製作與輪播2

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

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

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

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

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

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

必備知識1.動態圖像的獲取動態圖像資訊處理包括圖形動畫、數字圖像處理以及視頻、動畫壓縮等相關技術。(1)製作Flash動畫圖像。(2)製作GIF動畫圖像。(3)製作3D動畫圖像。2.動態圖像製作的相關概念(1)關鍵幀。(2)逐幀動畫。(3)即時動畫。(4)對象移動。(5)運動控制。(6)動畫數據與動畫檔。(7)流控制技術。GIF動圖及動畫製作2

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

必備知識案例讓心意先到家,過年玩東西南北家策略:與老字型大小品牌跨界合作。概念:天貓年貨節。創意:提起新年,大家不由自主會和傳統習俗掛鉤,天貓通過具有年味色彩的傳統文化“年畫”與各地特色年貨相關聯,吸引消費者來天貓選購各地特產,如圖5-28所示。創建與管理網站站點6創建站點管理站點與檔Contents目錄創建本地站點1創建遠程站點2第一節創建站點創建本地站點1