孔鳳春網站Web端網頁設計

湖南商務職業(yè)技術學院畢業(yè)設計

目錄

1網站設計需求分析.......................................................................................................1

1.1網站建設背景....................................................................................................1

1.1.1客戶需求設計.........................................................................................1

1.1.2目標群體分析.........................................................................................2

1.1.3網站功能設計.........................................................................................2

1.2網站結構設計.....................................................................................................3

1.2.1網頁層次設計.........................................................................................3

1.2.2交互邏輯設計.........................................................................................3

2網站視覺設計...............................................................................................................4

2.1頁面版式設計....................................................................................................4

2.1.1網站首頁版式.........................................................................................4

2.1.2明星產品頁版式.....................................................................................6

2.1.3品牌故事頁版式.....................................................................................7

2.1.4團隊介紹頁版式.....................................................................................9

2.1.5公司新聞頁版式...................................................................................10

2.1.6聯(lián)系我們頁版式...................................................................................11

2.1.7產品詳情頁版式...................................................................................12

2.1.8新聞內容頁版式...................................................................................13

2.2頁面視覺元素設計..........................................................................................14

2.2.1網站配色設計.......................................................................................14

3網站前端設計.............................................................................................................15

3.1網頁高保真原型設計......................................................................................15

3.1.1網站首頁原型.......................................................................................15

3.1.2明星產品頁原型...................................................................................16

I

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.3品牌故事頁原型...................................................................................17

3.1.4團隊介紹頁原型...................................................................................19

3.1.5公司新聞頁原型...................................................................................20

3.1.6聯(lián)系我們頁原型...................................................................................21

3.1.7產品詳情頁原型...................................................................................22

3.1.8新聞內容頁原型...................................................................................23

3.2網頁動態(tài)特效設計...........................................................................................24

3.2.1網頁動態(tài)特效原型.................................................................................24

3.2.2網頁動態(tài)特效實現(xiàn).................................................................................25

4設計總結.....................................................................................................................26

參考資料.........................................................................................................................28

II

湖南商務職業(yè)技術學院畢業(yè)設計

孔鳳春網站Web端網頁設計

1網站設計需求分析

1.1網站建設背景

孔鳳春（KOPHENIX）創(chuàng)立于清同治元年（公元1862年），孔鳳春前身“孔

記香粉號”在清河坊開張。后掌柜孔傳鴻得“鳳雀托夢”將店名改為“孔鳳春”

并沿用至今。上世紀二、三十年代，孔鳳春進入鼎盛期，營業(yè)額占化妝品行業(yè)

50%。經過三個世紀，孔鳳春得到“非物質文化遺產”稱號認可。2011年，孔鳳

春榮獲商務部頒發(fā)的“中華老字號”稱號并接受授牌，成為中國國妝行業(yè)內為

數(shù)不多的老字號碩果之一。2015年，由中華全國工商聯(lián)合會美容化妝品業(yè)商會

認定孔鳳春品牌為“中華美業(yè)百年傳承品牌”。

選擇孔鳳春這個網站是因為它是百年國貨化妝品品牌和其植物護膚的觀念。

孔鳳春主打的產品是植物精粹成分系列護膚品，還有百年產品鵝蛋粉之類的韓

粉系列。植物精粹系列所有有效成分都來至于天然植物，不添加酒精、激素、

治痘成分、紅標防腐劑等傷害客戶肌膚的成分，所有產品都有經過相關檢測和

適用才能投入市場，為使每一位客戶都能放心使用。

基于對孔鳳春這一品牌的了解，以及對國貨化妝品的喜愛而關注這個品牌

網站，并且發(fā)現(xiàn)網站的問題，為了將孔鳳春這個官方網站以更完美的形象展示

出給大家，樹立企業(yè)口碑，提高品牌的知名度。通過查詢孔鳳春的官方網站以

及旗艦店信息了解到孔鳳春背景資料，相關產品，視覺風格，人群定位，對客

戶需求進行分析調研，通過對大部分網站的功能設計和網頁結構設計，我將網

頁風格定位自然簡約。

1.1.1客戶需求設計

目前國內消費者對國貨的需求增加，“國潮”一詞頻頻上熱搜。年輕一代

消費者已經從心底樹立起民族身份認同和文化自覺，開始對中國品牌和中國產

品產生濃厚興趣，這無疑給了國貨品牌更多的市場機遇?？坐P春抓住這個機遇，

產品包裝全面升級更符合現(xiàn)代消費者審美。而如今，草本、花本以及中草藥成

分已經成為了護膚品中的熱門成分。天然的自然植物萃取成分以及可食用的植

物原料提煉的成分能夠為護膚或者美容不當導致的肌膚受損等問題提供有效的

解決方案。所以我的網站設計里植物精純系列產品較多，方便客戶的需求。網

站的風格設計為一個簡潔大方、自然舒心的風格設計，采用的色調是冷色調。

1

湖南商務職業(yè)技術學院畢業(yè)設計

（1）優(yōu)質的體驗感：為了讓客戶有更好的體驗感，因該網頁在不呆板的前

提下盡量簡潔化，讓客戶能一目了然就能看到品牌熱銷和推薦產品。

（2）優(yōu)質的網站形象：可以讓客戶能夠對我們的品牌網站有更深刻的了解，

成為我們的回頭客，美觀的產品圖必不可少，并且在適當位置上添加修飾元素，

加強視覺沖擊。

（3）優(yōu)質的產品和服務：綠色安全健康的產品以及適合各種人群的產品正

是大家所需求的東西，能讓客戶更加相信企業(yè)，增強對企業(yè)的信賴度。

1.1.2目標群體分析

《騰訊國貨美妝報告》數(shù)據(jù)顯示，目前國貨美妝消費群遍布70后至00后，

根據(jù)其特點及消費習慣可劃分為嘗新黨、生活家、潮流家、真愛粉、品質控及

跟隨者六大客群。以15歲-25歲為首的嘗新黨在選擇美妝產品時更注重消費體

驗及口碑推薦。對于她們來說，專業(yè)口碑種草及IP聯(lián)名爆款等創(chuàng)新營銷，能快

速捕捉其注意力、滿足其獵奇心。以輕熟齡女性為主的生活家則是國貨美妝的

中堅力量，她們追隨潮流的同時，對于美妝的成分、設計包裝和性價比也同樣

嚴苛，對于她們來說，性價比及購買體驗是選擇產品時的決定因素。

所以孔鳳春面向的消費群體是15-30歲的年輕女性群體。品牌主張為“百

年傳承專注敏感肌膚”，產品賣點為以秉承百年古妝理念萃取自然植物原始特

性將植沁之精華結合現(xiàn)代工藝技術以傳統(tǒng)文化和現(xiàn)代技藝為產品載體詮釋養(yǎng)膚

與美妝新概念

1.1.3網站功能設計

孔鳳春網站主要實現(xiàn)的功能模塊有：

首頁：主要由導航欄、banner、春夏好物推薦、Pick超值心選套裝組成；

明星產品：展示品牌熱賣爆款；

品牌故事：由banner、傳承、匠心、品牌、發(fā)展五個模塊構成；

團隊介紹：展示團隊核心人員；

公司新聞：展示公司新聞；

聯(lián)系我們：由公眾號、淘寶旗艦店、京東旗艦店、公司地址、郵編、咨詢

電話、新浪微博組成；

產品詳情頁：是產品的詳情頁，主要內容是產品信息圖、產品名稱、產品

規(guī)格、產品功效、產品詳情，客戶可以點擊鏈接立即購買；

新聞內容夜：是公司新聞的詳細內容，主要由頁頭、面包屑導航、文章標

題和正文內容構成。

2

湖南商務職業(yè)技術學院畢業(yè)設計

1.2網站結構設計

1.2.1網頁層次設計

圖1網站層次設計

1.2.2交互邏輯設計

本網站最主要的人機交互方式是鼠標點擊操作?？蛻粼跒g覽器中點擊網站

各頁面的文字鏈接或圖片按鈕，實現(xiàn)頁面間的跳轉。

本網站的每一個網頁，都有一個導航欄。導航欄上設有網站首頁、明星產

品、品牌故事、團隊介紹、公司新聞、聯(lián)系我們等功按鈕，客戶點擊每個功能

可以前往網站的相應模塊。

1)在網站首頁，有banner、春夏好物推薦、Pick超值心選套裝，客戶可

以了解到我們當季首推產品，可以點擊產品圖片進入詳情頁進行購買。

2)在明星產品頁面里，客戶可以看見品牌熱銷產品，可以點擊產品圖片進

入詳情頁進行購買。

3)在品牌故事里有banner、傳承、匠心、品牌、發(fā)展五個模塊，目的就是

為了讓客戶更加的了解我們的品牌的歷程，讓客戶對我們的產品加以的信賴，

相信我們的產品是安全可靠有效的，是有品質保障的。

3

湖南商務職業(yè)技術學院畢業(yè)設計

4)在公司新聞頁面里，客戶可以看到公司歷年來的新聞、決策和大事，更

加深入的了解品牌。

5)在網站的聯(lián)系我們頁面中，客戶可以看到我們的淘寶、京東官方旗艦店，

讓客戶放心的進入官方旗艦店購買我們的產品，也可以直接找到企業(yè)的聯(lián)系方

式，有公眾號、地址、電話，郵箱等方便客戶聯(lián)系我們。

2網站視覺設計

2.1頁面版式設計

2.1.1網站首頁版式

此頁為首頁線稿圖，主要部分為頂部導航和內容部分。頂部最左側是logo，

右側是導航。第一部分為導航欄：導航欄里一共有六個模塊，客戶可以點擊不

同的分類導航，進入不同的頁面。第二個板塊是banner：banner里放置了一些

產品展示圖和活動宣傳圖，以便于吸引客戶的眼球，第三板塊展示的是主推產

品，每個模塊分別采用了不同的排版，都使用了一些裝飾元素，這樣讓我們的

標題更醒目，產品也更突出，更貼合我們網站的主題。第四板塊是頁尾部分展

示了品牌的悠久歷史和返回頂部的按鈕。

孔鳳春網站首頁的線框圖采用RP軟件制作而成，可分為四步走，第一步把

頭部導航欄用矩形工具繪制在logo區(qū)，繪制了一個占位符導航區(qū)的文字，采用

文本標簽實現(xiàn)；第二步，把banner區(qū)域用占位符繪出，用文本標簽實現(xiàn)；第三

步，用矩形工具和文本標簽規(guī)劃出不同的區(qū)域，再加圖片加入到對應的模塊；

第四步是用文本標簽和矩形工具來實現(xiàn)頁尾部分。

首頁代表的是品牌的門面，是至關重要的，客戶一進去看到的就是首頁，

所以我在設計首頁的時候是希望客戶一進來是能一眼知道我們品牌的理念和歷

史的，要給客戶帶來舒適美觀的瀏覽體驗，能讓客戶一進去就知道自己想要了

解的東西在哪里，讓客戶還有看下去的欲望，提高品牌的轉化率。banner部分

主要就是以產品圖和活動圖進行展示，是企業(yè)的招牌。我將品牌應季主推的產

品陳列于首頁，既能提高產品的推廣效果，又能讓客戶選擇到更適合自己的產

品。

4

湖南商務職業(yè)技術學院畢業(yè)設計

圖2首頁線框圖

5

湖南商務職業(yè)技術學院畢業(yè)設計

2.1.2明星產品頁版式

此頁為明星產品頁的線框圖。主要分為三個小塊。第一個是頂部的導航欄，左側是網

站logologo展示的，是企業(yè)的文化與理念，logo位于頂端的左側，是最為醒目的，導航

欄能讓客戶快速切換到自己想要的頁面，便于客戶的瀏覽體驗。第二個是導航欄下面的產

品圖，這些都是選取品牌旗艦店最暢銷的六個產品進行排列，便于客戶知道我們品牌最熱

銷的產品，客戶點擊圖片進去，就會跳轉出產品的詳情頁，方便客戶更加了解這個產品，

客戶可以通過點擊立即購買跳轉到旗艦店對應的產品頁進行購買，更方便客戶的購買體驗。

第三部分是頁尾部分，展示的是企業(yè)的歷史故事和返回頂部按鈕。

明星產品頁的線框圖采用RP軟件制作而成，可分為三步，第一步用矩形畫

出導航欄，在導航欄左側用一個logo的占位符，右側使用文本標簽。第二步，

把每個產品展示圖用圖片繪制。第三步是頁尾部分，用矩形工具和文本標簽繪

制。

6

湖南商務職業(yè)技術學院畢業(yè)設計

圖3明星產品頁線框圖

2.1.3品牌故事頁版式

此頁為品牌故事頁的線框圖。主要分為四個小塊。第一是導航區(qū)，方便客

戶切換頁面；第二是banner；第三是內容區(qū)，主要是品牌傳承、匠心、發(fā)展的

故事；第四是頁尾區(qū)，有品牌故事和返回頂部按鈕。

7

湖南商務職業(yè)技術學院畢業(yè)設計

品牌故事頁線框圖使用RP軟件制作而成，可分為四步，第一步用矩形畫出

導航欄，在導航欄左側用一個logo的占位符，右側使用文本標簽。第二步banner

8

湖南商務職業(yè)技術學院畢業(yè)設計

區(qū)域用占位符繪制。第三步內容部分，用矩形工具和文本標簽分別排列出來；

第四步是頁尾部分，用矩形工具和文本標簽繪制。

圖4品牌故事頁線框圖

2.1.4團隊介紹頁版式

此頁為團隊介紹頁的線框圖。主要分為三個小塊。第一個是頂部導航欄，

能讓客戶快速切換到自己想要的頁面。第二個是團隊人員介紹區(qū)，都是品牌團

隊的核心人員。第三部分是頁尾部分，展示的是企業(yè)的歷史故事和返回頂部按

鈕。

團隊介紹頁的線框圖采用RP軟件制作而成，可分為三步，第一步用矩形畫

出導航欄，在導航欄左側用一個logo的占位符，右側使用文本標簽。第二步，

把每個成員的信息用圖片工具和矩形工具繪制排版。第三部分是頁尾部分，用

矩形工具和文本標簽繪制。

9

湖南商務職業(yè)技術學院畢業(yè)設計

圖5團隊介紹頁線框圖

2.1.5公司新聞頁版式

此頁為公司新聞頁的線框圖。主要分為三個小塊。第一個是導航欄能讓客

戶快速切換到自己想要的頁面。第二個是新聞區(qū)，客戶點擊圖片進去，就會跳

轉出新聞的具體內容，使客戶更加了解品牌。第三部分是頁尾部分，展示的是

企業(yè)的歷史故事和返回頂部按鈕。

公司新聞頁的線框圖采用RP軟件制作而成，可分為三步，第一步用矩形畫

出導航欄，在導航欄左側用一個logo的占位符，右側使用文本標簽。第二步，

把每個新聞用圖片和文本標簽繪制。第三部分是頁尾部分，用矩形工具和文本

標簽繪制。

圖6公司新聞頁線框圖

10

湖南商務職業(yè)技術學院畢業(yè)設計

2.1.6聯(lián)系我們頁版式

此頁為聯(lián)系我們頁的線框圖。主要分為五個小塊。第一個是頂部的導航欄。

第二個是官方旗艦店，客戶可以通過點擊圖片跳轉到旗艦店，更方便客戶的購

買。第三個是公眾號，客戶可以掃描二維碼添加官方公眾號。第四個是聯(lián)系方

式，客戶可以通過相關的聯(lián)系方式從而聯(lián)系到我們。第五步是頁尾部分，展示

的是企業(yè)的歷史故事和返回頂部按鈕。

聯(lián)系我們頁的線框圖采用RP軟件制作而成，可分為五步，第一步用矩形畫

出導航欄，在導航欄左側用一個logo的占位符，右側使用文本標簽。第二步，

將兩個官方旗艦店用圖片繪制。第三步公眾號部分，矩形工具圖片和文本標簽

繪制。第四部分聯(lián)系方式是用圖片和文本標簽繪制。第五步是頁尾部分，用矩

形工具和文本標簽繪制。

11

湖南商務職業(yè)技術學院畢業(yè)設計

圖7聯(lián)系我們頁線框圖

2.1.7產品詳情頁版式

此頁為產品詳情頁的線框圖。主要分為三個小塊。第一個是頂部的導航欄，

導航欄能讓客戶快速切換到自己想要的頁面，便于客戶的瀏覽體驗。第二個是

產品的詳細信息，有產品圖和產品信息可以讓客戶更加了解這個產品，客戶可

以通過點擊立即購買跳轉到旗艦店對應的產品頁進行購買，更方便客戶的購買

體驗。第三部分是產品詳情圖，展示的是產品的一些具體信息和產品的賣點。

明星產品頁的線框圖采用RP軟件制作而成，可分為三步，第一步用矩形畫

出導航欄，在導航欄左側用一個logo的占位符，右側使用文本標簽。第二步把

每個產品信息用圖片和文本標簽繪制。第三個產品詳情圖部分，用圖片工具繪

制。

圖8產品詳情頁線框圖

12

湖南商務職業(yè)技術學院畢業(yè)設計

2.1.8新聞內容頁版式

此頁為新聞內容頁的線框圖。主要分為三個小塊。第一個是頂部的導航欄，

導航欄能讓客戶快速切換到自己想要的頁面，便于客戶的瀏覽體驗。第二個是

面包屑導航，面包屑導航方便客戶返回上一個頁面，更加方便客戶瀏覽下一個

新聞頁面。第三個是新聞內容頁，通過對標題和正文內容的排版，正文內容中

加入了圖片能使客戶更有趣的瀏覽。

新聞內容頁的線框圖采用RP軟件制作而成，可分為三步，第一步用矩形畫

出導航欄，在導航欄左側用一個logo的占位符，右側使用文本標簽。第二步面

包屑導航區(qū)，用文本標簽繪制。第三步是新聞內容區(qū)，用文本標簽和圖片繪制。

13

湖南商務職業(yè)技術學院畢業(yè)設計

圖9新聞內容頁線框圖

2.2頁面視覺元素設計

2.2.1網站配色設計

關于孔鳳春網站色彩設計與搭配主要是從網頁主色系里面選擇，主要從產

品包裝里面提取顏色，以及對產品的賣點，尤其是植物精粹這一部分，以及根

據(jù)它的性質特點，然后進行一定的定位，之后來進行的色彩搭配，產品的特性

以及公司的理念都包含在色彩里面，選擇了合適的配色。提高網頁設計感。

圖10網站配色設計

主色使用白色，打造簡約的風格，輔助色：淺藍色象征天真、純潔、安定和

和平，而綠色象征清新、安全、舒適、生命、和平、寧靜、自然、生機，剛好

和孔鳳春的產品相吻合，三個顏色的交替，用來區(qū)分層次感，使客戶不會感覺

枯燥無味，提升瀏覽體驗感。

14

湖南商務職業(yè)技術學院畢業(yè)設計

3網站前端設計

3.1網頁高保真原型設計

3.1.1網站首頁原型

孔鳳春網頁首頁設計的時候運用了rp8來制作網頁的制作和美化，網站首頁

的功能主要是讓客戶在最短的時間內了解網站的基本功能，所以在網站首頁時，

將網站首頁的內容化繁為簡，將導航欄和底部設計簡化到極致，能讓客戶一目

了然，更加了解品牌。首頁中放置了產品推薦，是隨著季節(jié)放置我們的產品的，

能讓客戶對我們主推的產品有一個大致的了解，客戶也可以通過這里看見自己

的想要購買的產品，給客戶帶來便利性，增加客戶對品牌的好感度。

15

湖南商務職業(yè)技術學院畢業(yè)設計

圖11網站首頁原型

3.1.2明星產品頁原型

對于明星產品頁，是依據(jù)網店銷售量進行選取的，選取了天貓店熱銷的六

位產品作為明星產品進行展示。作為老牌國貨的孔鳳春，同其他很多國貨美妝

品牌一樣不同，沒有走中國風設計，反而是極簡設計，這和孔鳳春的品牌理念"

極簡護膚"相吻合。明星產品頁在于在保證了客戶了解了熱銷產品之后，在一定

程度對網頁美化與設計。熱銷產品能讓客戶快速方便快捷的了解到品牌的熱銷

產品以及是否是自己需要的。通過這樣的方式大大節(jié)省了客戶的時間，同時也

提升了客戶對店鋪的依賴，容易形成客戶對品牌的忠實度。并且通過網站的產

品和網店相互搭配，利用客戶對產品的親近感和依賴感，使得客戶點擊進入我

們的網店，從而使客戶方便購買和對品牌了解更加深入，從而突出我們網站的

個性化特點，吸引客戶點擊進入我們的網站，達到引流的目的，提高客戶的體

驗質量。通過這種簡單的設計能最高效率讓客戶了解到我們的品牌。

16

湖南商務職業(yè)技術學院畢業(yè)設計

圖12明星產品頁原型

3.1.3品牌故事頁原型

對于品牌故事頁，他的風格與其他頁面有些不一樣，主要想用中國風的元

素和背景突出孔鳳春“百年國貨”的特點，同時圖片和文字的排版是s型的，

象征著孔鳳春在歷史的長河中，即使經過百年歲月的洗禮，依舊存在于大眾的

視野中，并且有了新的理念和適合現(xiàn)代人的產品。著重強調了孔鳳春歷史悠久

和其在新的機遇與挑戰(zhàn)下改革換新的精神。

17

湖南商務職業(yè)技術學院畢業(yè)設計

18

湖南商務職業(yè)技術學院畢業(yè)設計

圖13品牌故事頁原型

3.1.4團隊介紹頁原型

對于團隊介紹頁，我選取了團隊核心人員來介紹，核心團隊在企業(yè)的發(fā)展

過程中發(fā)揮著不可替代的重要作用，他們就像是一個企業(yè)的大腦，是整個企業(yè)

運行的指揮者。他們能夠帶領企業(yè)走向正確的發(fā)展道路，他們優(yōu)秀的經歷和豐

富的經驗可以讓客戶更加信賴我們，相信品牌具有無限的發(fā)展力，對品牌未來

的發(fā)展有期望，同時背景使用了植物來點綴，能讓客戶對我們的植物精粹概念

更加深刻。

19

湖南商務職業(yè)技術學院畢業(yè)設計

圖14團隊介紹頁原型

3.1.5公司新聞頁原型

對于公司新聞頁面，簡潔明了的設計風格，將公司的新聞整齊的排列出來，

井然有序，可以讓客戶感受體會到孔鳳春的定位與產品理念，頁面簡介明了更

方便客戶瀏覽。

圖15公司新聞頁原型

20

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.6聯(lián)系我們頁原型

對于聯(lián)系我們頁面，簡單自然的設計風格，將孔鳳春的植物護膚理念展現(xiàn)

的淋漓盡致，同時也對圖片加入了植物邊框進行裝飾，可以讓客戶馬上感受到

孔鳳春的定位與特色，從而更好的宣傳與推廣。

21

湖南商務職業(yè)技術學院畢業(yè)設計

圖16聯(lián)系我們頁原型

3.1.7產品詳情頁原型

對于產品詳情頁面，清新淡雅的設計風格讓人賞心悅目，將產品的重要的

信息提煉出來排列到產品圖片旁邊，更加方便顧客了解該產品，提升客戶使用

體驗，從而更好的宣傳與推廣。在商品信息的下方有產品詳情圖，加深客戶對

該產品的了解度，提高產品的購買率，同時客戶可以通過點擊立即購買按鈕，

直接跳轉至淘寶旗艦店該產品的鏈接內進行購買，更加方便客戶，同時也達到

了對網店的引流效果。

圖17產品詳情頁原型

22

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.8新聞內容頁原型

對于新聞內容頁面，簡單精致的設計風格，體現(xiàn)了孔鳳春的極簡護膚理念。

加入了面包屑導航方便用戶返回至企業(yè)新聞頁面，優(yōu)化了客戶的閱讀體驗。對

文字區(qū)域進行了精心的排版，并且插入了相關的圖片，使客戶瀏覽新聞時更加

有趣，不枯燥。

圖18新聞內容頁原型

23

湖南商務職業(yè)技術學院畢業(yè)設計

3.2網頁動態(tài)特效設計

3.2.1網頁動態(tài)特效原型

網頁動態(tài)特效使用RP軟件實現(xiàn)。

動態(tài)特效1：banner自動輪播特效

圖20banner效果圖1

圖21banner效果圖2

24

湖南商務職業(yè)技術學院畢業(yè)設計

圖22banner效果圖3

圖23banner效果圖4

圖24banner效果圖5

在首頁的banner里放置了五張圖，利用RP工具實現(xiàn)banner輪播效果。

先在RP軟件中建立建立動態(tài)面板，把圖片導入進動態(tài)面板中，在屬性中選定

頁面載入時，再將數(shù)據(jù)填入，最終實現(xiàn)圖片輪播效果

3.2.2網頁動態(tài)特效實現(xiàn)

Banner輪播特效制作步驟：

第一建立一個動態(tài)面板并且為動態(tài)面板命名為banner，在動態(tài)面板中添加

五個不同的面板狀態(tài)。

第二畫五個橢圓按鈕，全選將其設為動態(tài)面板，命名為跳轉。在動態(tài)面板

中添加五個不同的面板狀態(tài)，分別為其命名為1、2、3、4、5。在五個頁面中分

別將對應的橢圓換成空心的。

第二選中屬性欄里頁面載入時，選擇設置面板狀態(tài)，勾選banner和跳轉，

25

湖南商務職業(yè)技術學院畢業(yè)設計

選擇狀態(tài)為Next，依次勾選向后循環(huán)，循環(huán)間隔為3000毫秒，首個狀態(tài)延時3000

毫秒后向后切換。設置進入動畫和退出動畫為逐漸效果。

第四將五個熱區(qū)變?yōu)闄E圓按鈕大小，并覆蓋上去，點擊熱區(qū)，在屬性欄選

擇鼠標移入時，勾選banner動態(tài)面板頁面為Stater1和跳轉動態(tài)面板頁面為1；

在鼠標移除時，勾選banner和跳轉，選擇狀態(tài)為Next，依次勾選向后循環(huán)，循

環(huán)間隔為