網(wǎng)頁(yè)美工學(xué)習(xí)設(shè)計(jì)經(jīng)驗(yàn)總結(jié)

網(wǎng)頁(yè)美工學(xué)習(xí)設(shè)計(jì)經(jīng)驗(yàn)總結(jié)

一、配色

其實(shí)對(duì)色彩的感覺(jué)是設(shè)計(jì)師應(yīng)具備的最基本素質(zhì)，其作品不管是對(duì)網(wǎng)頁(yè)界面、系統(tǒng)界面、還是產(chǎn)品包裝等等都有廣泛應(yīng)用�；�本的一些理論，什么冷暖色、對(duì)比色/補(bǔ)色、色彩心理、搭配原則等等，滿大街都是，有意者隨便搜一兩篇看看就行。色彩對(duì)于美工設(shè)計(jì)師來(lái)說(shuō)，更重要的是一種感覺(jué)，就像打籃球投籃的手感一樣，多看，多練，這種感覺(jué)是可以后天練出來(lái)的。Mars剛接觸設(shè)計(jì)時(shí)，連坐公交車(chē)時(shí)也會(huì)注意路邊某公司、飯店的招牌是如何配色，處處留意生活中色彩搭配的美，關(guān)于色彩截圖就更記不清有多少?gòu)埩恕?/p>

Mars覺(jué)得，設(shè)計(jì)師對(duì)顏色的運(yùn)用一般有這么幾個(gè)階段：

初級(jí)階段：用自己首映感覺(jué)最好的1~2種顏色，不考慮其他因素、他人感覺(jué)；

過(guò)度階段：開(kāi)始感覺(jué)一兩種顏色單調(diào)，盡量多嘗試不同色彩，該階段極容易出現(xiàn)沒(méi)目的的亂搭現(xiàn)象；

成熟階段：該階段了解了大眾對(duì)色彩的審美，開(kāi)始理性的用1~2種色系搭配，能體會(huì)到同種顏色不同色值的細(xì)微差別，大多設(shè)計(jì)師都在這個(gè)階段；

終極階段：把一種色彩用至極致，甚至只用黑白灰，完全沉浸某種顏色，甚至有點(diǎn)變態(tài)，但其創(chuàng)作效果讓處于第三階段的設(shè)計(jì)師一看就是大師所為。

其實(shí)這也是個(gè)不斷練習(xí)積累的過(guò)程，這樣色彩的感覺(jué)才會(huì)提升。二、布局

美工設(shè)計(jì)師除了對(duì)色彩要有好的感覺(jué)外，對(duì)布局也要有很好的把握，組合的好壞直接影響作品的效果。其實(shí)做好布局設(shè)計(jì)也不是很難，無(wú)非就以下幾步：

布局準(zhǔn)備：明確你表達(dá)內(nèi)容的主體部分需要哪些必要的文字和圖片。不要考慮太多細(xì)節(jié)。

布局版式：關(guān)于布局的版式多種多樣，在將重點(diǎn)內(nèi)容放在最顯眼的前提下，可自由選擇版式。對(duì)于網(wǎng)頁(yè)來(lái)講，根據(jù)大多數(shù)人從上到下、從左到右的瀏覽順序來(lái)考慮，應(yīng)該將最主要的內(nèi)容、圖片等放在頁(yè)面的左邊和上邊。精細(xì)布局：整體配色、字體、各模塊的間距、插圖、增減內(nèi)容等各個(gè)方面的推敲。這一步是細(xì)活。

Mars覺(jué)得最鍛煉布局的方法是制作PPT。想把PPT制作美觀、精簡(jiǎn)并不是件容易的事。對(duì)于軟件行業(yè)的售前來(lái)說(shuō)，如何制作漂亮的PPT應(yīng)該是他們自我內(nèi)修的一門(mén)必修課。PPT的布局做好了，其他網(wǎng)頁(yè)、宣傳冊(cè)等平面布局應(yīng)該都信手捏來(lái)。

三、細(xì)節(jié)

至理名言“細(xì)節(jié)決定成敗”，在設(shè)計(jì)領(lǐng)域了這句話更顯得重要。很多細(xì)節(jié)可能會(huì)被瀏覽者忽略，但對(duì)設(shè)計(jì)師來(lái)說(shuō)絕不可放過(guò)，比如背景色、色彩漸變、各組件間間距、標(biāo)題樣式、高亮樣式、字體/大小/顏色、行/段間距、插圖位置/邊緣處理、輸入框?qū)捀?邊框色/背景色、按鈕的位置等等太多了。還是之前的話，只有你看得多了，比較得多了，才能看得出這些細(xì)節(jié)。有人覺(jué)得這些細(xì)節(jié)沒(méi)有什么大礙，但多個(gè)細(xì)節(jié)組合在一起就和讓人覺(jué)得不舒服。

舉例說(shuō)一下，以下是某系統(tǒng)里一篇文章下面的添加批注表單。上半部分是沒(méi)有經(jīng)過(guò)美化、由程序員直接寫(xiě)的程序（上圖），下半部分是有設(shè)計(jì)師協(xié)助設(shè)計(jì)美化完成的表單界面（下圖）。

一般正常審美的人肯定覺(jué)得下面的好看，但卻不知好在哪？聽(tīng)Mars從各個(gè)角度詳解一下：

配色：字體顏色像是直接從32色板上取的，沒(méi)經(jīng)過(guò)考究；表單邊框色太重；表單背景與頁(yè)面背景相同，沒(méi)突出層次。

布局版式：此組件又沒(méi)有多行操作，無(wú)需使用列表形式；上圖保存按鈕在該組件標(biāo)題之上儼然不合理；組件的標(biāo)題的位置大小不夠醒目。

用戶體驗(yàn)：明確這是一個(gè)系統(tǒng)里的界面組件，所以這個(gè)人既然都登進(jìn)來(lái)了，還用填記錄人嗎？時(shí)間也肯定就是提交時(shí)間�。惶峤蝗酥饕�是提交自己的批注，所以給他提供大片的提交內(nèi)容的輸入框即可，簡(jiǎn)單明了；提交按鈕，上圖需要再填完批注內(nèi)容后折回到左上角“保存”顯然不合理，下圖的界面大大方方右手邊一個(gè)按鈕，看起來(lái)明顯，操作起來(lái)舒服。以上幾方面都是關(guān)于個(gè)人審美觀方面的提升，如果你不是打算進(jìn)行美學(xué)研究，我覺(jué)得過(guò)多的純理論學(xué)習(xí)不會(huì)對(duì)你的審美觀有太多提高。所以我的建議就是：多看，多模仿，多做，多比。切忌自己沒(méi)有什么審美觀就盲目創(chuàng)作，其實(shí)模仿沒(méi)什么可恥的，是學(xué)習(xí)的畢竟階段。好比有人模仿MJ跳舞，盡管不是很像，但最少會(huì)得到一小部分人的喜愛(ài)和追捧，比如在某校/班的圣誕晚會(huì)上；而如果不了解大眾審美，就很可能像芙蓉姐姐跳舞，只會(huì)是笑料罷了。養(yǎng)成良好的審美觀可以運(yùn)用到生活的方方面面，而生活的方方面面也鍛煉你的審美觀，像攝影、布置自己的房間辦公桌、服裝的搭配等，能提高你的生活品味。

四、心態(tài)

在累計(jì)階段，心態(tài)平和、踏實(shí)耐心，切忌急躁，美工本身就是細(xì)活，著急是沒(méi)用的。有了基本的審美觀，需要?jiǎng)?chuàng)作時(shí)心情放松，做些想做的事，吃點(diǎn)想吃的東西，隨心所欲，給提供自己創(chuàng)作靈感環(huán)境。不要意味的坐在電腦前去想，事倍功半，會(huì)把自己郁悶死。

五、技能

有了良好的審美基礎(chǔ)和創(chuàng)意，接下來(lái)就是制作了。相比較審美觀的培養(yǎng)和創(chuàng)意的來(lái)臨，Mars覺(jué)得一些工具技能是很好學(xué)得，無(wú)非就是我用鉛筆、還是毛筆畫(huà)的問(wèn)題。大概介紹下Mars接觸到的工具：

制圖技能：Photoshop（平面處理等）、Illustrator/CorelDraw（矢量圖）、Flash（動(dòng)畫(huà)）、PremierePro（影視后期）等等這些只是應(yīng)用的工具；

頁(yè)面編程技能：html、css、JavaScript等；優(yōu)化技能：壓縮圖片、網(wǎng)頁(yè)優(yōu)化等。

以上工具網(wǎng)上的教程一抓一大把，推薦網(wǎng)易教程。可以找些基礎(chǔ)的看一下，一回生二回熟，平時(shí)多用即可掌握，更深的技巧可以日后用到再研究完善，要邊用邊學(xué)，這樣記憶深刻。

六、用戶體驗(yàn)

用戶體驗(yàn)一般出現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)和系統(tǒng)界面設(shè)計(jì)里，是用戶和人機(jī)界面的交互過(guò)程，界面操作的易用性，直接影響了用戶對(duì)該款產(chǎn)品的印象。用戶體驗(yàn)是對(duì)美工更高的一個(gè)要求，甚至有點(diǎn)兒超越美工的范疇，但只有美工了解這些才能更合理地設(shè)計(jì)界面布局，整體搭配等等。

Mars知道用戶體驗(yàn)的重要性，但深入學(xué)習(xí)的還不多，但Mars會(huì)在看別人網(wǎng)頁(yè)、系統(tǒng)的同時(shí)記錄那點(diǎn)有著方便，很在下次自己的設(shè)計(jì)中體現(xiàn)出來(lái)，算是一個(gè)模仿階段吧。這也是Mars一向的學(xué)習(xí)方法。

擴(kuò)展閱讀：網(wǎng)頁(yè)美工設(shè)計(jì)說(shuō)明書(shū)

網(wǎng)頁(yè)美工與廣告

設(shè)計(jì)題目：姓名：學(xué)號(hào)：班級(jí)：指導(dǎo)教師：完成日期：設(shè)計(jì)說(shuō)明書(shū)

歪歪蛋創(chuàng)意生活網(wǎng)站美工的設(shè)計(jì)與實(shí)現(xiàn)王丹201*118012410圖文孫俊國(guó)201*年6月18日

10級(jí)選修《網(wǎng)頁(yè)美工與廣告》卷二實(shí)踐考核方案

課程名稱(chēng)：《網(wǎng)頁(yè)美工與廣告》課程編號(hào)：0704410授課班級(jí)：10級(jí)選修學(xué)分：3考核形式：實(shí)踐考課程性質(zhì)：專(zhuān)業(yè)課

一、考核目的

考核學(xué)生網(wǎng)頁(yè)美工與廣告設(shè)計(jì)的綜合能力。

二、考核方式、內(nèi)容、要求

考核方式：以課程設(shè)計(jì)做為主要的考核方式。

考核項(xiàng)目：自定一個(gè)網(wǎng)站主題。根據(jù)該網(wǎng)站，用Fireworks與Dreamveawer設(shè)計(jì)制作成xxx網(wǎng)站的主頁(yè)與副頁(yè)及其他頁(yè)面。

要求：

1.要有網(wǎng)頁(yè)美工的規(guī)劃與設(shè)計(jì)。

2.設(shè)計(jì)出網(wǎng)頁(yè)主頁(yè)與副頁(yè)效果圖，并根據(jù)效果圖制作網(wǎng)站中的其他頁(yè)面，并自己設(shè)計(jì)LOGO、flash廣告、欄目、導(dǎo)航、banner、網(wǎng)頁(yè)內(nèi)容；界面設(shè)計(jì)要美觀，色彩搭配合理，有新意，超鏈接正確；網(wǎng)頁(yè)中要有1個(gè)以上的Flash動(dòng)畫(huà)3.提交：index.pngfuye.png及網(wǎng)站（5張網(wǎng)頁(yè)以上）；網(wǎng)頁(yè)美工設(shè)計(jì)說(shuō)明書(shū)。

三、考試說(shuō)明與評(píng)分標(biāo)準(zhǔn)

2．評(píng)分標(biāo)準(zhǔn)評(píng)分標(biāo)準(zhǔn)主頁(yè)美工設(shè)計(jì)要求：美觀且有創(chuàng)意、內(nèi)容完整、導(dǎo)航正確、有自己設(shè)計(jì)的評(píng)分標(biāo)準(zhǔn)與分值flash廣告動(dòng)畫(huà)。副頁(yè)美工設(shè)計(jì)要求：布局好，內(nèi)容完整、導(dǎo)航正確，有1個(gè)以上的Flash廣告動(dòng)畫(huà)設(shè)計(jì)說(shuō)明書(shū)要求：格式正確、排版規(guī)范；分析到位、網(wǎng)頁(yè)美工設(shè)計(jì)重點(diǎn)與難點(diǎn)分析深刻。用A4打印，6頁(yè)以上。303040分值注：網(wǎng)頁(yè)美工的作品與網(wǎng)站可借鑒其它作品，但嚴(yán)禁復(fù)制或他人代做，一經(jīng)發(fā)現(xiàn)類(lèi)同，按0分處理。執(zhí)筆人：審核人：院長(zhǎng)：

201*-5-5

目錄

一、概述............................................................1

1.1選擇緣由.....................................................11.2網(wǎng)頁(yè)美工的定義...............................................11.3網(wǎng)頁(yè)美工的作用...............................................21.4Firework....................................................21.5色彩的平衡與呼應(yīng).............................................3二、網(wǎng)頁(yè)美工的總體設(shè)計(jì)..............................................3

2.1網(wǎng)頁(yè)設(shè)計(jì)的制作流程..........................................32.2網(wǎng)站色彩布局.................................................42.3網(wǎng)站結(jié)構(gòu).....................................................62.4圖片輪顯的制作過(guò)程...........................................62.5滾動(dòng)圖片的制作...............................................72.6制作網(wǎng)頁(yè)的主要內(nèi)容...........................................72.7形成網(wǎng)頁(yè).....................................................7三、美工設(shè)計(jì)總結(jié)....................................................8

歪歪蛋創(chuàng)意生活網(wǎng)站美工的設(shè)計(jì)與實(shí)現(xiàn)

一、概述

1.1選擇緣由

我用網(wǎng)頁(yè)美工設(shè)計(jì)的網(wǎng)站是生活家居類(lèi)的網(wǎng)站。

隨著今年來(lái)家居業(yè)“重裝飾、輕裝飾”的潮流，家居設(shè)計(jì)從越來(lái)越有實(shí)用性的作用提升到裝飾性的作用，家居行業(yè)被前所未有的“激活”了

家居產(chǎn)業(yè)發(fā)展前景光明。首先，以居民住房、賓館飯店、旅游交通、醫(yī)療衛(wèi)生等為代表的投資型和公共服務(wù)型消費(fèi)熱點(diǎn)，都將成為促進(jìn)中國(guó)家居市場(chǎng)不斷擴(kuò)大的因素，隨著社會(huì)的不斷發(fā)展、人們生活的不斷提高，人們對(duì)生活居住的要求不僅僅是為了擋風(fēng)遮雨了，還加上了時(shí)尚、好看，這意味著人們對(duì)家居設(shè)計(jì)的商品越來(lái)越關(guān)注了，當(dāng)前中國(guó)每年有1000萬(wàn)對(duì)新人結(jié)婚，因結(jié)婚產(chǎn)生的家居設(shè)計(jì)的消費(fèi)額將十分可觀。

各類(lèi)的家居設(shè)計(jì)都與我們的生活息息相關(guān)，是生活中不可或缺的一部分,廣闊的市場(chǎng),巨大的消費(fèi)群體對(duì)家居行業(yè)來(lái)說(shuō)無(wú)一不是一個(gè)很好的良機(jī)。因此我選擇了做家居設(shè)計(jì)方面的網(wǎng)站.

1.2網(wǎng)頁(yè)美工的定義

網(wǎng)頁(yè)美工就是對(duì)網(wǎng)頁(yè)的美化，網(wǎng)頁(yè)美工要熟悉photoshopfireworksflash等制圖軟件，也要有一個(gè)非常好的視覺(jué)功底，創(chuàng)意能力，才能創(chuàng)造出非常美觀的頁(yè)面

網(wǎng)頁(yè)美工也用css來(lái)進(jìn)行美化，css可以控制html標(biāo)簽的元素，當(dāng)我們鼠標(biāo)放在超級(jí)鏈接上的時(shí)候背景變色網(wǎng)頁(yè)美工需要掌握DIV+CSS樣式；基礎(chǔ)HTML語(yǔ)言。

基礎(chǔ)美術(shù)：素描（石膏幾何體、靜物寫(xiě)生）；色彩（色彩構(gòu)成、簡(jiǎn)單色彩靜物寫(xiě)生）

三大構(gòu)成：色彩構(gòu)成、平面構(gòu)成、立體構(gòu)成。

Photoshop網(wǎng)頁(yè)配色及排版設(shè)計(jì)；Illustrator網(wǎng)頁(yè)設(shè)計(jì)；網(wǎng)頁(yè)設(shè)計(jì)綜合、

經(jīng)典網(wǎng)頁(yè)解析。

1.3網(wǎng)頁(yè)美工的作用

對(duì)于制作一個(gè)網(wǎng)頁(yè)來(lái)說(shuō)。網(wǎng)頁(yè)美工起著舉足輕重的作用，網(wǎng)頁(yè)美工設(shè)計(jì)不單純從事美術(shù)繪畫(huà)，而需要定位軟件使用者、使用環(huán)境、使用方式并且最終為軟件用戶服務(wù)，他們進(jìn)行的是集科學(xué)性與藝術(shù)性于一身的設(shè)計(jì)，他們需要完成的，簡(jiǎn)單說(shuō)來(lái)，正是一個(gè)不斷為用戶設(shè)計(jì)視覺(jué)效果使之滿意的過(guò)程。

網(wǎng)頁(yè)美工設(shè)計(jì)的職能大體包括三方面：一是圖形設(shè)計(jì)，即傳統(tǒng)意義上的“美工”。當(dāng)然，實(shí)際上他們承擔(dān)得不是單純意義上美術(shù)工人的工作，而是軟件產(chǎn)品的產(chǎn)品“外形”設(shè)計(jì)。二是交互設(shè)計(jì)，主要在于設(shè)計(jì)軟件的操作流程、樹(shù)狀結(jié)構(gòu)、操作規(guī)范等。一個(gè)軟件產(chǎn)品在編碼之前需要做的就是交互設(shè)計(jì)，并且確立交互模型，交互規(guī)范。三是用戶測(cè)試/研究，這里所謂的“測(cè)試”，其目標(biāo)恰在于測(cè)試交互設(shè)計(jì)的合理性及圖形設(shè)計(jì)的美觀性，主要通過(guò)以目標(biāo)用戶問(wèn)卷的形式衡量網(wǎng)頁(yè)設(shè)計(jì)的合理性。

1.4Firework

在軟件界，F(xiàn)ireworks指網(wǎng)頁(yè)三劍客之一的軟件。原為Macromedia公司所有。在Macromedia被Adobe兼并之后，Adobe又進(jìn)一步發(fā)展了此軟件，但是與Macromedia的風(fēng)格差別較大。將來(lái)有可能被Photoshop等取代�，F(xiàn)最新版本AdobeFireworksCS5.1。

fireworks是一個(gè)強(qiáng)大的網(wǎng)頁(yè)圖形設(shè)計(jì)工具，你可以使用它創(chuàng)建和編輯位圖、矢量圖形，還可以非常輕松的做出各種網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的效果，比如翻轉(zhuǎn)圖象，下拉菜單等，設(shè)計(jì)完成以后，如果你要在網(wǎng)頁(yè)設(shè)計(jì)中使用，你可以將它輸出為html文件，還能輸出為可以在photoshop,illustrator和flash等軟件中編輯的格式。

Fireworks提供專(zhuān)業(yè)網(wǎng)絡(luò)圖形設(shè)計(jì)和制作方案，通過(guò)它，你可以編輯網(wǎng)絡(luò)圖形和動(dòng)畫(huà)，支持位圖和矢量圖。同時(shí)它能dreamweaver、flash能實(shí)現(xiàn)網(wǎng)頁(yè)的無(wú)縫連接，與其它圖形程序各HTML編輯也能密切配合，為用戶一體化的網(wǎng)絡(luò)設(shè)計(jì)方案提供支持.

1.5色彩的平衡與呼應(yīng)

1）色彩的平衡。色彩在頁(yè)面中可以形成很多的效果，通過(guò)強(qiáng)烈的對(duì)比，可以突出頁(yè)面的重點(diǎn)。還可以通過(guò)色彩調(diào)配，達(dá)到頁(yè)面穩(wěn)重度的改變。一般的情況下，頁(yè)面上方的顏色總是很重，這樣才能壓住下面的顏色，如果不采取這種辦法，整個(gè)頁(yè)面將顯得很不穩(wěn)重，底下的文字圖片，有飄出的意味。因此，要使整個(gè)頁(yè)面顯得很平衡，必須要有能鎮(zhèn)住其他顏色的色彩。2）色彩的呼應(yīng)。一種比較突出的色彩，如果很突兀地放在頁(yè)面中，無(wú)論你是突出重點(diǎn)也好，還是logo圖標(biāo)，都給整個(gè)頁(yè)面帶來(lái)了副作用。為此，你必須在相對(duì)稱(chēng)的位置加上該色系（對(duì)于頁(yè)面并不醒目）的色彩以呼應(yīng)，這樣可以弱化這種視覺(jué)的沖擊。

二、網(wǎng)頁(yè)美工的總體設(shè)計(jì)

2.1網(wǎng)頁(yè)設(shè)計(jì)的制作流程

第一步：確定網(wǎng)站主題

做網(wǎng)站，首先必須要解決的就是網(wǎng)站內(nèi)容問(wèn)題，即確定網(wǎng)站的主題。對(duì)于內(nèi)容主題的選擇，要做到小而精，主題定位要小，內(nèi)容要精。不要去試圖制作一個(gè)包羅萬(wàn)象的站點(diǎn)，這往往會(huì)失去網(wǎng)站的特色，也會(huì)帶來(lái)高強(qiáng)度的勞動(dòng)，給網(wǎng)站的及時(shí)更新帶來(lái)困難。

第二步：做好網(wǎng)站規(guī)劃

確定好網(wǎng)站的主題內(nèi)容、圖片、文字材料之后就開(kāi)始用Firework進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。

首先打開(kāi)Firework新建一個(gè)寬為968、高為660的背景為白色的頁(yè)面，然后進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，將頁(yè)面進(jìn)行布局。

第三步：網(wǎng)頁(yè)的詳細(xì)制作步驟

網(wǎng)頁(yè)最上面的是一個(gè)長(zhǎng)方形條，填充顏色為淺藍(lán)色，還加上了漸變的效果。左邊寫(xiě)著歪歪蛋創(chuàng)意生活網(wǎng),這個(gè)網(wǎng)站的主題---設(shè)計(jì)美麗設(shè)計(jì)生活。顏色為白色，字體為黑體、大小為26磅，加了藍(lán)色陰影等效果，整體更加好看。如圖2-1-1

如圖2-1-1

下面是這個(gè)網(wǎng)站的導(dǎo)航條和本期的新看點(diǎn)、家居排行榜。如圖2-1-2，2-1-3所示：

圖2-1-2

圖2-1-3

2.2網(wǎng)站色彩布局

歪歪蛋創(chuàng)意生活網(wǎng)屬于標(biāo)準(zhǔn)的家居行業(yè)網(wǎng)站，首頁(yè)采用大部分的藍(lán)色和少部分的白色、暗綠色、灰色三色搭配，給人一種舒適、溫馨家的感覺(jué)。這四種色塊將網(wǎng)頁(yè)分成幾個(gè)不同的部分。藍(lán)色區(qū)域?yàn)榫W(wǎng)站logo和banner，并且直接使用了在fireworks里制作好的圖片。這樣能更好的表達(dá)網(wǎng)站的主題，使網(wǎng)站的主題一目了然更加明確。網(wǎng)站的導(dǎo)航條也是采用深藍(lán)色作為導(dǎo)航條的背景色，用淺藍(lán)色做字體的顏色，看起來(lái)更加協(xié)調(diào)。導(dǎo)航條下面還做了一些比較方便的快速鏈接。如2-1-4所示。白色與淺藍(lán)色的部分放置了網(wǎng)站的FLASH輪顯動(dòng)畫(huà)和網(wǎng)站的新看點(diǎn)、最新的家居排行榜等內(nèi)容。然后就是家居設(shè)計(jì)的圖片展示區(qū)，共有五張家居設(shè)計(jì)的圖片，這些圖片是運(yùn)用代碼做成的滾動(dòng)效果插入到網(wǎng)站當(dāng)中去的。最下面

的剩下三色部分是歪歪蛋創(chuàng)意生活網(wǎng)一些分類(lèi)的小看點(diǎn)嗎，共有三組內(nèi)容。

副頁(yè)，一共有十個(gè)副頁(yè)。分別采用了不同的顏色，綠色、灰色、暗黃色、淺藍(lán)色為主要的顏色搭配，同樣給人一種小清新的感覺(jué)特別是淺藍(lán)色和綠色。同時(shí)副頁(yè)還做登錄和注冊(cè)頁(yè)面，還有法律聲明的頁(yè)面，算是一個(gè)內(nèi)容比較齊全的網(wǎng)站，所學(xué)到的只是基本上全都運(yùn)用起來(lái)了。如圖2-2-1所示

圖2-2-1

網(wǎng)站的新聞資訊和精彩專(zhuān)題部分，如圖2-2-2所示。

圖2-2-2

網(wǎng)站的中間部分做了一個(gè)水平滾動(dòng)圖片展示，如圖2-2-3所示。

圖2-2-3

下邊是家居分類(lèi)專(zhuān)題區(qū)域展示。如圖2-2-9所示。

圖2-2-4

2.3網(wǎng)站結(jié)構(gòu)

首頁(yè)網(wǎng)頁(yè)布局如圖2-3-1所示。

LOGO圖片導(dǎo)航新看點(diǎn)最家新居動(dòng)TOP態(tài)5設(shè)計(jì)賞精彩專(zhuān)題家居設(shè)計(jì)家飾生活樂(lè)居方式裝修手冊(cè)法律聲明首頁(yè)圖2-3-1

消費(fèi)資訊在網(wǎng)站結(jié)構(gòu)布局方面，該網(wǎng)站打破了標(biāo)準(zhǔn)的二分欄布局，這樣既有足夠的空間放置網(wǎng)站內(nèi)容，網(wǎng)站也不會(huì)太空。

2.4圖片輪顯的制作過(guò)程

圖片輪顯的操作步驟如下：

1）首先啟動(dòng)Flash2.0建立一個(gè)寬297、244的白色畫(huà)布。

2）新建圖層，將圖層三設(shè)為遮罩層，在第一個(gè)圖層中導(dǎo)入第一張照片到舞臺(tái)，利用對(duì)齊工具將圖片與畫(huà)布對(duì)齊重合。

3）導(dǎo)入第二張照片到舞臺(tái)與第一張的步驟完全相同。

4）將第三層遮罩層解鎖，在第一幀中插入關(guān)鍵幀然后在圖片的邊上畫(huà)一個(gè)矩形

在第四十幀上插入關(guān)鍵幀將這個(gè)矩形放大知道把圖片蓋住，在第一幀與四幀中

建補(bǔ)間形狀。剩下的與上述步驟完全相同。

2.5滾動(dòng)圖片的制作

滾動(dòng)一般有兩種制作方向：一是水平方向滾動(dòng)，二就是垂直方向滾動(dòng)。直接將現(xiàn)有的代碼拷到相應(yīng)的位置就行。滾動(dòng)的產(chǎn)品圖片在Flash中只需要制作出動(dòng)態(tài)的效果，動(dòng)態(tài)效果將在dreamweaver中體現(xiàn)出來(lái)，圖片的高度和寬度都可以根據(jù)實(shí)際情況在代碼中進(jìn)行修改。

2.6制作網(wǎng)頁(yè)的主要內(nèi)容

網(wǎng)站主要內(nèi)容區(qū)域用于放置滾動(dòng)的產(chǎn)品圖片，在firework中只需要制作出靜態(tài)效果，動(dòng)態(tài)效果將在dreamweaver中進(jìn)行制作。

2.7形成網(wǎng)頁(yè)

當(dāng)網(wǎng)站在fierwork中設(shè)計(jì)完成后，只是完成了一部分的工作，還需要將它制作成HTML格式的網(wǎng)頁(yè)。在制作網(wǎng)頁(yè)前還需要利用切片工具將設(shè)計(jì)稿切割成N個(gè)部分，然后dreamweaver中創(chuàng)建表格重新組合。切片前也要先觀察好，哪些是自己需要的，哪些東西能重復(fù)使用，哪些是需要越小越好的，哪些文字是必須用圖片的！考慮好這些就進(jìn)行切片，記住一定要精確！如果有必要將類(lèi)型相同的圖片做成一張圖片，以便減少內(nèi)存。

三、美工設(shè)計(jì)總結(jié)

注意頁(yè)面的分塊，著手設(shè)計(jì)一個(gè)頁(yè)面的時(shí)候，你必須根據(jù)所掌握的內(nèi)容，以及其風(fēng)格，對(duì)頁(yè)面的整體進(jìn)行分塊。分塊是一個(gè)非常必要且難以掌握的技巧。分塊可以用不同著色的色塊、框、細(xì)線、排列整齊的英文等等，還可以混合使用，但是注意不要過(guò)于醒目，因?yàn)轫?yè)面的重點(diǎn)在內(nèi)容，而不在其他。

通過(guò)學(xué)習(xí)，了解網(wǎng)站和網(wǎng)頁(yè)的基本設(shè)計(jì)思想，使學(xué)生提高和掌握對(duì)色彩基礎(chǔ)知識(shí)（色相、明度、純度、空間混合概念，色彩構(gòu)成的一般原理、色彩的心理、對(duì)色彩的觀察能力和對(duì)豐富的色彩感知能力，對(duì)一般色彩的搭配能力、網(wǎng)頁(yè)的色彩設(shè)計(jì)、配色軟件的使用等）；平面構(gòu)成（平面設(shè)計(jì)構(gòu)圖的形式要素、關(guān)系要素、了解平面設(shè)計(jì)構(gòu)圖與視覺(jué)傳達(dá)的關(guān)系，熟悉點(diǎn)、線、面、色彩、肌理等設(shè)計(jì)元素的基本設(shè)計(jì)方法，并在實(shí)踐中能靈活運(yùn)用；掌握平面設(shè)計(jì)構(gòu)圖的幾種常用的表現(xiàn)方法）；初步掌握CorelDRAW工具的使用，培養(yǎng)對(duì)優(yōu)秀網(wǎng)頁(yè)版式分析模仿的能力，掌握網(wǎng)頁(yè)設(shè)計(jì)的基本方法。

10圖文《網(wǎng)頁(yè)美工與廣告》卷二

實(shí)踐考核成績(jī)?cè)u(píng)價(jià)表

班級(jí)學(xué)號(hào)10圖文姓名201*1180124主頁(yè)美工設(shè)計(jì)要求：美觀且有創(chuàng)意、內(nèi)容完整、導(dǎo)航正確、有自己設(shè)計(jì)的flash廣告動(dòng)畫(huà)。評(píng)分標(biāo)準(zhǔn)與分值副頁(yè)美工設(shè)計(jì)要求：布局好，內(nèi)容完整、導(dǎo)航正確，有1個(gè)以上的Flash廣告動(dòng)畫(huà)。網(wǎng)站5張網(wǎng)頁(yè)以上。設(shè)計(jì)說(shuō)明書(shū)要求：格式正確、排版規(guī)范；分析到位、網(wǎng)頁(yè)美工設(shè)計(jì)重點(diǎn)與難點(diǎn)分析深刻。用A4打印，6頁(yè)以上�？偡�100303040王丹分值成績(jī)得分任課教師簽字：教師評(píng)價(jià)注：網(wǎng)頁(yè)美工的作品與網(wǎng)站可借鑒其它作品，但嚴(yán)禁復(fù)制或他人代做，一經(jīng)發(fā)現(xiàn)類(lèi)同，按0分處理。

友情提示：本文中關(guān)于《網(wǎng)頁(yè)美工學(xué)習(xí)設(shè)計(jì)經(jīng)驗(yàn)總結(jié)》給出的范例僅供您參考拓展思維使用，網(wǎng)頁(yè)美工學(xué)習(xí)設(shè)計(jì)經(jīng)驗(yàn)總結(jié)：該篇文章建議您自主創(chuàng)作。

來(lái)源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問(wèn)題，請(qǐng)聯(lián)系我們及時(shí)刪除。

《網(wǎng)頁(yè)美工學(xué)習(xí)設(shè)計(jì)經(jīng)驗(yàn)總結(jié)》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請(qǐng)保留原作者信息,謝謝!
鏈接地址：http://m.hmlawpc.com/gongwen/564404.html

• 上一篇：201*年市場(chǎng)部工作總結(jié)
• 下一篇：工作總結(jié) Microsoft Word 文檔