鮮嘗厚買網(wǎng)站W(wǎng)eb端網(wǎng)頁設(shè)計(jì)

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

目錄

1網(wǎng)站設(shè)計(jì)需求分析...................................................1

1.1網(wǎng)站建設(shè)背景..................................................1

1.2網(wǎng)站結(jié)構(gòu)設(shè)計(jì)..................................................2

2網(wǎng)站視覺設(shè)計(jì).......................................................4

2.1頁面版式設(shè)計(jì)..................................................4

2.2頁面視覺元素設(shè)計(jì)..............................................9

3網(wǎng)站前端設(shè)計(jì)......................................................12

3.1網(wǎng)頁高保真原型設(shè)計(jì)...........................................12

3.2網(wǎng)頁動(dòng)態(tài)效果設(shè)計(jì).............................................15

4設(shè)計(jì)總結(jié)..........................................................18

參考資料............................................................18

I

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

鮮嘗厚買網(wǎng)站W(wǎng)eb端網(wǎng)頁設(shè)計(jì)

1網(wǎng)站設(shè)計(jì)需求分析

1.1網(wǎng)站建設(shè)背景

鮮嘗厚買（山東）食品有限公司成立于2019年4月。是一家主打賣糕點(diǎn)類

的食品制造公司。無論是從品質(zhì)上，還是從服務(wù)上來說，公司秉承著著“以質(zhì)

為本，以誠為信”的經(jīng)營理念，以優(yōu)質(zhì)的產(chǎn)品來服務(wù)客戶。

選擇這個(gè)選題，首先是因?yàn)樗钠髽I(yè)理念和產(chǎn)品品質(zhì)吸引了我，其次，品

牌取名上也很有用心，第一個(gè)“鮮”字，就體現(xiàn)出自己產(chǎn)品的食材選擇上就很

有講究，例如，我最喜歡吃的鮮嘗厚買蛋糕卷就是以阿華田可可粉與鮮嘗厚買

糕點(diǎn)特色相結(jié)合，提取自阿華田可可粉，麥芽蛋白可可粉固態(tài)飲料，香濃美美

味加入奶粉調(diào)配。均衡營養(yǎng)配比，新鮮制作，具有絲滑細(xì)膩的口感。又如，鮮

嘗厚買一口鮮手工蛋糕，45%鮮雞蛋占比，一塊蛋糕幾乎一半是雞蛋，因?yàn)閷?duì)產(chǎn)

品的口感從不將就，所以才能做出的蛋糕才會(huì)如此柔軟，綿潤，開袋就能聞到

濃濃蛋香，讓人饞涎欲滴。

通過網(wǎng)絡(luò)調(diào)查，鮮嘗厚買這家公司并沒有進(jìn)行太多線上宣傳和產(chǎn)品推廣，

想通過本網(wǎng)站，對(duì)該品牌產(chǎn)品進(jìn)行線上推廣，通過網(wǎng)站運(yùn)營以提升該品牌的知

名度和曝光率。

1.1.1用戶需求分析

通過前期調(diào)研發(fā)現(xiàn)隨著人們的生活節(jié)奏不斷地加快，為了適應(yīng)這種節(jié)奏，

焙烤食品將會(huì)是人們食物最好的替代品，人們總說吃面包沒有營養(yǎng)，可鮮嘗厚

買的面包恰恰滿足了客戶的需求。而且口味和種類豐富，能滿足客戶各種需求

和口味。網(wǎng)站的設(shè)計(jì)簡(jiǎn)潔大方，因?yàn)槭鞘称奉惥W(wǎng)站，所以，網(wǎng)站主色調(diào)采用的

是暖色調(diào)。

（1）優(yōu)質(zhì)的產(chǎn)品。健康安全的產(chǎn)品是當(dāng)今客戶所追求的，且我們主打的就

是一個(gè)新鮮和營養(yǎng)，更加容易贏在起跑線。加強(qiáng)企業(yè)在客戶中的形象。

（2）良好的品牌形象。我將產(chǎn)品的各個(gè)細(xì)節(jié)都展現(xiàn)在客戶的眼中，不做任

何虛假宣傳，讓客戶吃的放心?？梢宰尶蛻魧?duì)網(wǎng)站有進(jìn)一步的了解。要牢牢的

鎖住客戶的味蕾。

（3）良好的客戶體驗(yàn)?？蛻粢豢吹骄W(wǎng)站就能夠一目了然，能找到喜歡的產(chǎn)

品。當(dāng)然產(chǎn)品美觀圖可不能少，可以加強(qiáng)視覺沖擊力。更好從細(xì)節(jié)當(dāng)中抓住客

1

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

戶的心理。

1.1.2網(wǎng)站功能設(shè)計(jì)

經(jīng)過我對(duì)大部分網(wǎng)站的結(jié)構(gòu)和網(wǎng)站要實(shí)現(xiàn)的功能進(jìn)行分析，我決定將鮮嘗

厚買網(wǎng)頁設(shè)計(jì)主要實(shí)現(xiàn)的功能模塊有：

（1）首頁：主要有banner，展示頁，產(chǎn)品多種分類以及聯(lián)系我們組成。

（2）產(chǎn)品中心：主要的就是展示當(dāng)下最火的爆款產(chǎn)品以及產(chǎn)品推薦。

（3）詳情頁：主要就是讓客戶更好的了解我們的產(chǎn)品信息，產(chǎn)品服務(wù)，將

產(chǎn)品的每個(gè)細(xì)節(jié)都讓客戶看到，用戶點(diǎn)擊鏈接可以收藏和進(jìn)行購買。

（4）登錄和注冊(cè)：如果用戶沒有賬號(hào)的話可以點(diǎn)擊注冊(cè)，有賬號(hào)的話直接

點(diǎn)擊登錄進(jìn)到首頁頁面。注冊(cè)會(huì)員可以享受會(huì)員福利等活動(dòng)。

1.1.3競(jìng)品分析

表1競(jìng)品分析表

品牌主打產(chǎn)品產(chǎn)品成分產(chǎn)品大概種產(chǎn)品包裝表產(chǎn)品分析結(jié)

類現(xiàn)果

面包新語大地震等面面粉，雞蛋，面包蛋糕產(chǎn)品包裝簡(jiǎn)口感一般，但

包水，黃油等潔大方，印上是很有性價(jià)

logo很有格比。

調(diào)。

85度C黑森林面包面粉，奶油，咖啡面包蛋產(chǎn)品為塑料價(jià)格貴，喜歡

巧克力，黃油，糕包裝，印上喝咖啡的朋

雞蛋等。logo簡(jiǎn)潔。友可以去試

試。

克莉斯汀蜂蜜果園蛋面粉，奶油，蛋糕，面包，淡紫色包裝口感糯糯的

糕巧克力，黃油，餅干，點(diǎn)心等很不錯(cuò)。

雞蛋等。

鮮嘗厚買雞蛋鮮蛋糕面粉，雞蛋阿華夫蛋糕，包裝簡(jiǎn)潔，印蛋糕很新鮮，

巧克力等雞蛋鮮蛋糕有l(wèi)ogo用料很足。

1.2網(wǎng)站結(jié)構(gòu)設(shè)計(jì)

1.2.1交互邏輯設(shè)計(jì)

在本次網(wǎng)站設(shè)計(jì)當(dāng)中運(yùn)用最多的人機(jī)交互就是鼠標(biāo)點(diǎn)擊時(shí)以及載入時(shí)。實(shí)

現(xiàn)了圖片與頁面之間的跳轉(zhuǎn)，以及圖片與圖片當(dāng)中的自動(dòng)滾動(dòng)。其次還運(yùn)用到

了鼠標(biāo)移入時(shí)以及鼠標(biāo)移出時(shí)，圖片當(dāng)中的一個(gè)尺寸變化。

（1）在首頁當(dāng)中，當(dāng)鼠標(biāo)點(diǎn)擊展示頁，會(huì)實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)到展示頁當(dāng)中。當(dāng)

2

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

載入時(shí)，首頁當(dāng)中的圖片會(huì)實(shí)現(xiàn)自動(dòng)滑動(dòng)，還有一些圖片當(dāng)中要鼠標(biāo)移入時(shí)才

會(huì)實(shí)現(xiàn)圖片移動(dòng)。還有一些圖片會(huì)實(shí)現(xiàn)圖片旋轉(zhuǎn)，當(dāng)然也是要鼠標(biāo)移入時(shí)才會(huì)

實(shí)現(xiàn)。

（2）在展示頁當(dāng)中，有許多不同種類的面包。不過當(dāng)你用鼠標(biāo)點(diǎn)擊時(shí)，會(huì)

跳轉(zhuǎn)到各個(gè)不同的頁面.

（3）在詳情頁當(dāng)中，當(dāng)鼠標(biāo)移入時(shí)，圖片會(huì)實(shí)現(xiàn)自動(dòng)滑動(dòng)。當(dāng)你點(diǎn)擊加減

號(hào)的時(shí)候，會(huì)實(shí)現(xiàn)數(shù)字的自動(dòng)跳動(dòng)，用鼠標(biāo)點(diǎn)擊，立即搶購時(shí)會(huì)立馬跳轉(zhuǎn)到登

錄頁面。

（4）在登錄與注冊(cè)頁當(dāng)中，在注冊(cè)頁輸入框內(nèi)輸入正確的信息并點(diǎn)擊提交

會(huì)彈出一個(gè)提交成功的頁面。然后再用鼠標(biāo)點(diǎn)擊提交成功頁面會(huì)自動(dòng)跳轉(zhuǎn)到登

錄頁。再在登錄頁當(dāng)中的輸入框內(nèi)輸入信息。用鼠標(biāo)點(diǎn)擊登錄按鈕。會(huì)自動(dòng)彈

出一個(gè)登錄成功的頁面，然后你再點(diǎn)擊登錄成功的頁面，就會(huì)跳轉(zhuǎn)到首頁了。

1.2.2網(wǎng)頁層次設(shè)計(jì)

圖1網(wǎng)頁層次設(shè)計(jì)圖

3

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2網(wǎng)站視覺設(shè)計(jì)

在網(wǎng)站設(shè)計(jì)當(dāng)中，視覺設(shè)計(jì)是一個(gè)非常重要的部分。可以帶給客戶一個(gè)強(qiáng)

烈的視覺沖擊感而且還能夠起到吸引顧客的決定性作用。如果設(shè)計(jì)的網(wǎng)站整個(gè)

色調(diào)與主題風(fēng)格不符，產(chǎn)品就無法留住客戶，并讓其購買你的產(chǎn)品。如果說你

的網(wǎng)站視覺設(shè)計(jì)風(fēng)格與主題相符，并且特色突出，客戶能在網(wǎng)站中能很快地找

到自己中意的產(chǎn)品，那么客戶才會(huì)愿意花更多的時(shí)間停留在你的網(wǎng)站中，花錢

消費(fèi)。足以體現(xiàn)網(wǎng)站視覺設(shè)計(jì)在網(wǎng)站設(shè)計(jì)當(dāng)中是非常重要重要。

2.1頁面版式設(shè)計(jì)

設(shè)計(jì)一個(gè)網(wǎng)站，當(dāng)中的頁面版式設(shè)計(jì)也是必不可少的，整個(gè)網(wǎng)站的結(jié)構(gòu)框

架都是非常有講究的，哪個(gè)板塊該設(shè)計(jì)在什么地方都是有講究的，這可不能亂

來。如果說你的頁面版式設(shè)計(jì)的不合理會(huì)讓客戶看起來很不舒服的。所以對(duì)于

頁面版式設(shè)計(jì)我可是精心設(shè)計(jì)的。

圖2首頁層次圖

4

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.1.1網(wǎng)站首頁

圖3首頁層次結(jié)構(gòu)圖

該頁面為我的首頁圖，頂部為導(dǎo)航欄。左側(cè)是鮮嘗厚買的logo。導(dǎo)航欄的

右邊為注冊(cè)與登錄頁的框架。然后下面就是我的一個(gè)結(jié)構(gòu)設(shè)計(jì)了。Banner分別

5

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

有“首頁”“蛋糕卷”“魔立方”以及“展示頁”可以進(jìn)行點(diǎn)擊，分別會(huì)跳轉(zhuǎn)

到不同的頁面。然后下面就是我的一個(gè)圖片輪播，放上精美的美觀圖來吸引顧

客。再往下面看的話，就是一個(gè)本周熱門零食排行榜。將賣的比較好的產(chǎn)品展

示給客戶觀看。不過這個(gè)環(huán)節(jié)是需要客戶自己將鼠標(biāo)移到圖片時(shí)，圖片才會(huì)自

動(dòng)進(jìn)行輪流滑動(dòng)。然后再往下看就是一個(gè)口碑就是推薦。也就是把客戶回訪較

多的蛋糕設(shè)計(jì)在網(wǎng)頁上。不過這個(gè)也是需要客戶將鼠標(biāo)移到圖片上時(shí)，圖片才

會(huì)進(jìn)行轉(zhuǎn)動(dòng)。當(dāng)你點(diǎn)擊圖片時(shí)，又會(huì)跳轉(zhuǎn)到相應(yīng)的詳情頁當(dāng)中。再往下看的話，

就是“查看更多”的板塊。當(dāng)你點(diǎn)擊時(shí)，會(huì)跳轉(zhuǎn)到登錄頁面，會(huì)自動(dòng)讓你登錄

該網(wǎng)站。然后下面就是整個(gè)網(wǎng)站的頁尾了。也是我們對(duì)客戶的一個(gè)保障，讓客

戶放心。對(duì)于鮮嘗厚買這個(gè)網(wǎng)站的排版以及設(shè)計(jì)。我也是思考了許久才決定的。

為的就是讓客戶一目了然，看的舒適。

2.1.2網(wǎng)站詳情頁

圖4商品詳情頁結(jié)構(gòu)圖

6

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖5詳情頁層次結(jié)構(gòu)圖

7

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

該頁面為商品詳情頁，當(dāng)你從首頁用鼠標(biāo)點(diǎn)擊進(jìn)來時(shí)。就會(huì)跳轉(zhuǎn)到一個(gè)商

品詳情頁當(dāng)中來。左邊就是商品詳情的圖片輪播設(shè)計(jì)。不過是需要你用鼠標(biāo)移

入時(shí)才會(huì)實(shí)現(xiàn)這樣的效果。右邊的話就是商品的一個(gè)標(biāo)題和銷量。價(jià)格我是用

紅色字體標(biāo)出來的。然后再一個(gè)就是快遞的一個(gè)配送地址。如果不是你想要的

配送地址，你可以點(diǎn)擊箭頭號(hào)來為選擇你想要的地址，不過點(diǎn)擊之后就會(huì)馬上

跳轉(zhuǎn)到登錄頁面，顯示需要你去登錄。然后就是一個(gè)口味的框架，選擇你喜歡

的口味然后再看你需要買幾份，可以點(diǎn)擊加減號(hào)來選擇。選擇好后點(diǎn)擊立即搶

購就好了。再往下的話就是產(chǎn)品的詳細(xì)信息。產(chǎn)品的種類以及產(chǎn)品的口味，還

有產(chǎn)品的產(chǎn)地以及種種信息都是可以看的到的。然后就是商品詳情的框架，可

以看到商品的詳細(xì)細(xì)節(jié)以及優(yōu)點(diǎn)。是可以一直往下滑的?；降撞烤褪菍氊愅?/p>

薦的框架，為客戶推薦其他產(chǎn)品。當(dāng)客戶想點(diǎn)擊時(shí)，也會(huì)跳轉(zhuǎn)到相應(yīng)的詳情頁

當(dāng)中。

2.1.3登錄注冊(cè)頁

圖6登錄注冊(cè)結(jié)構(gòu)圖

8

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖7登錄頁層次結(jié)構(gòu)圖

該頁面為登錄注冊(cè)頁。頂部都是導(dǎo)航欄和banner，是可以進(jìn)行點(diǎn)擊的。整

個(gè)登錄注冊(cè)頁面的背景是一張風(fēng)景圖，然后在輸入框內(nèi)都有文字提示，當(dāng)你輸

入的時(shí)候，文字提示就會(huì)消失。輸入完之后就可以點(diǎn)擊注冊(cè)賬號(hào)。然后頁面會(huì)

立馬彈出一個(gè)“注冊(cè)成功，請(qǐng)登錄”的小框架，然后點(diǎn)擊的話，就會(huì)轉(zhuǎn)到登錄

頁面。再輸入你相同的信息。登錄頁面的框架也會(huì)彈出一個(gè)登錄成功的字樣。

然后點(diǎn)擊也會(huì)轉(zhuǎn)到首頁。整個(gè)登錄注冊(cè)頁面的結(jié)構(gòu)設(shè)計(jì)都是簡(jiǎn)潔大方，讓人看

起來很舒服的感覺，重要的是我把整個(gè)登錄注冊(cè)頁面的框架是放在中間的。

2.2頁面視覺元素設(shè)計(jì)

2.2.1網(wǎng)站配色設(shè)計(jì)

整個(gè)網(wǎng)站的配色我采用的都是一個(gè)暖色調(diào)，用的是紅藍(lán)搭配。色彩分明。

紅色鮮明，藍(lán)色沉穩(wěn)。給人一種時(shí)尚、新穎的感覺。紅色代表熱血興奮、積極向上的感

覺;藍(lán)色代表了青春活力、積極人生的個(gè)性。這兩個(gè)顏色在色彩學(xué)里叫互補(bǔ)色也就是對(duì)立色,

它的特點(diǎn)是對(duì)比強(qiáng)烈醒目。

主色：

9

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

輔助色：

圖8網(wǎng)站配色圖

2.2.2標(biāo)準(zhǔn)字

主要就是要色彩分明要鮮艷，紅色顯得光鮮亮麗，輔助色采用藍(lán)色搭配，

又顯得著重沉穩(wěn)些。字體設(shè)計(jì)主要采用的是一個(gè)Arial字體，然后詳情頁字體

都是采用微軟正黑體字體。

圖9網(wǎng)站字體圖

2.2.3圖標(biāo)

圖標(biāo)設(shè)計(jì)方面主要是體現(xiàn)網(wǎng)頁的風(fēng)格。圖標(biāo)的大小都是在13pt，方便大家

識(shí)別。

圖10網(wǎng)站圖標(biāo)圖

2.2.4導(dǎo)航欄

導(dǎo)航采用的是頂部導(dǎo)航，方便人們查找。設(shè)計(jì)的也比較實(shí)用，每個(gè)欄目和

框架也能夠一清二楚。

圖11網(wǎng)站導(dǎo)航欄圖

2.2.5網(wǎng)站logo

網(wǎng)站的logo畢竟代表著網(wǎng)站的形象，所以我設(shè)計(jì)的比較簡(jiǎn)單易懂。

10

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖12網(wǎng)站logo圖

2.2.6布局

網(wǎng)頁的布局代表著整個(gè)網(wǎng)頁的框架，每個(gè)頁面的框架的大小為：寬1200px，

高1000px。

圖13網(wǎng)頁布局圖

2.2.7彈窗

網(wǎng)站的彈窗是網(wǎng)頁的點(diǎn)擊效果，點(diǎn)擊相應(yīng)的內(nèi)容就會(huì)出現(xiàn)。

圖14網(wǎng)頁彈窗圖

3網(wǎng)站前端設(shè)計(jì)

3.1網(wǎng)頁高保真原型設(shè)計(jì)

在本次的網(wǎng)站設(shè)計(jì)當(dāng)中運(yùn)用到了PS以及Axure軟件來對(duì)網(wǎng)站進(jìn)行設(shè)計(jì)以

及進(jìn)行合理的排版。

3.1.1網(wǎng)站首頁

在網(wǎng)站首頁當(dāng)中，我選用了三張精美的banner圖來進(jìn)行輪播。banner圖片

是網(wǎng)站的品牌推廣的重要窗口，所以在選圖片當(dāng)中，結(jié)合自己做該這個(gè)網(wǎng)站的

11

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

目標(biāo)和審美，banner輪播圖既不能做的太多于花哨，我會(huì)覺得這讓人產(chǎn)生視覺

疲勞，抓不住重點(diǎn)。所以在選用圖片的時(shí)候，我盡量還是選用圖片顏色一致的

圖片。做到一擊命中吸引顧客。首先客戶主要看到的就是我設(shè)計(jì)的一個(gè)大logo。

之后才是看到我的產(chǎn)品。產(chǎn)品也是進(jìn)行了不同程度的分類。有本周賣的最好的

產(chǎn)品還有客戶推薦的產(chǎn)品。進(jìn)行了一個(gè)層次區(qū)分，還設(shè)計(jì)了一個(gè)“查看更多”

的框架方便客戶瀏覽。不過在本周熱門產(chǎn)品時(shí)，我也是進(jìn)行了一個(gè)輪播效果。

在口碑推薦的時(shí)候，而是將產(chǎn)品進(jìn)行了排版，并沒有進(jìn)行輪播。因?yàn)槎歼\(yùn)用輪

播的話，會(huì)看起來太單調(diào)了，會(huì)覺得這個(gè)網(wǎng)站沒有什么亮點(diǎn)。

12

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖15網(wǎng)站首頁

3.1.2商品詳情頁

在商品詳情頁當(dāng)中，我想要客戶看到更多的產(chǎn)品圖片，所以我就進(jìn)行了一

個(gè)輪播效果。整體的一個(gè)排版就是一個(gè)左邊是圖片輪播，右邊是產(chǎn)品細(xì)節(jié)圖的

13

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

介紹。我把商品詳情頁的整個(gè)結(jié)構(gòu)設(shè)成了一個(gè)豎屏，并沒有弄了一個(gè)橫版的就

敷衍了事了。因?yàn)槲蚁胱尨蠹铱吹礁喈a(chǎn)品細(xì)節(jié)圖和產(chǎn)品信息。讓大家進(jìn)一步

的了解到我們這個(gè)產(chǎn)品。

圖16商品詳情頁

14

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.2網(wǎng)頁動(dòng)態(tài)效果設(shè)計(jì)

網(wǎng)頁的動(dòng)態(tài)效果是網(wǎng)頁必不可少的一環(huán)，也是至關(guān)重要的一環(huán)。為了讓整

個(gè)網(wǎng)站更有趣，我設(shè)計(jì)了圖片輪播特效以及圖片旋轉(zhuǎn)特效等。

3.2.1網(wǎng)頁動(dòng)態(tài)特效原型

動(dòng)態(tài)特效1：banner輪播特效

圖17banner效果圖1

圖18banner效果圖2

圖19banner效果圖3

在首頁的banner當(dāng)中，選用了三張圖片來進(jìn)行輪播，首先需要把輪播圖準(zhǔn)

備好。然后再設(shè)立一個(gè)動(dòng)態(tài)面板，再將圖片導(dǎo)進(jìn)去，再進(jìn)行用例等參數(shù)設(shè)置。

動(dòng)態(tài)特效2：旋轉(zhuǎn)圖片

15

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖20旋轉(zhuǎn)圖

我在商品的首頁當(dāng)中設(shè)置了圖片旋轉(zhuǎn)，首頁看起來有更多花樣，來吸引顧

客。

3.2.2網(wǎng)頁動(dòng)態(tài)特效效果實(shí)現(xiàn)

首先就是要說要banner的輪播效果制作。第一步就是要建立一個(gè)動(dòng)態(tài)面板。

第二步緊接著在動(dòng)態(tài)面板當(dāng)中設(shè)置三個(gè)不同的面板，分別命名為面板1.面板2，

面板3。第三步我們?cè)賹⑽覀冞x好的圖片依次放到三張不同面板當(dāng)中。最基礎(chǔ)的

做好之后，第四步就是重點(diǎn)來了。我們?cè)倜姘?當(dāng)中設(shè)置一個(gè)屬性“載入時(shí)”，

也就是說當(dāng)客戶點(diǎn)開這個(gè)網(wǎng)頁，這個(gè)動(dòng)態(tài)面板就會(huì)生效。第五步我們?cè)邳c(diǎn)進(jìn)載

入時(shí)，選擇面板狀態(tài)，選中面板1向面板2進(jìn)行滑動(dòng)，再自己選擇滑動(dòng)的時(shí)間。

特別提醒一下，滑動(dòng)的狀態(tài)一定要是“NEXT”，很多朋友都是忘記選擇這個(gè)狀

態(tài)，導(dǎo)致后面的圖片無法就行輪播，就是因?yàn)槟闼x取的狀態(tài)是錯(cuò)的。然后再

依次循環(huán)，讓面板2向面板3滑動(dòng)。再讓面板3向面板1滑動(dòng)。輪播效果完成。

圖21輪播效果設(shè)置

接下來就是鼠標(biāo)單擊時(shí)，頁面與頁面之間進(jìn)行跳動(dòng)，以及圖片與圖片之間

進(jìn)行跳動(dòng)。這個(gè)其實(shí)很簡(jiǎn)單。只要在屬性當(dāng)中，選中鼠標(biāo)單擊時(shí)。如果你是要

實(shí)現(xiàn)到頁面的環(huán)節(jié)。那么就選擇超鏈接窗口。再選擇你想要的那個(gè)頁面就行了。

如果說你是實(shí)現(xiàn)圖片與頁面的跳轉(zhuǎn)，也是點(diǎn)擊圖片，重復(fù)上面的操作。還有就

16

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

是鼠標(biāo)移入時(shí)，圖片的輪播，其實(shí)和banner的圖片輪播差不了多少。唯一就區(qū)

別的就是兩個(gè)的屬性不同，一個(gè)是“載入時(shí)”，而另一個(gè)確實(shí)“鼠標(biāo)移入時(shí)”，

這是它們唯一不同的操作，其他的就是一樣的，也是可以實(shí)現(xiàn)圖片輪播的。還

有一個(gè)重點(diǎn)就是圖片的隱藏與顯示。當(dāng)我們想要這張圖片一開始就隱藏的話，

我們需要給圖片設(shè)置一個(gè)屬性，那就是在“載入時(shí)”，我們就把這張圖片隱藏

起來不顯示。如果說在途中的你想要顯示這張圖片并且設(shè)置動(dòng)態(tài)