網(wǎng)頁美工設(shè)計(jì)-實(shí)驗(yàn)報(bào)告

江蘇經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院

實(shí)驗(yàn)報(bào)告

(201*/201*學(xué)年第一學(xué)期)

系部信息技術(shù)系課程名稱網(wǎng)頁美工設(shè)計(jì)學(xué)生姓名學(xué)號班級指導(dǎo)教師

二00六年二月制

信息技術(shù)系實(shí)驗(yàn)報(bào)告

日期實(shí)驗(yàn)地點(diǎn)201*年9月20日指導(dǎo)教師評語與成績一、實(shí)驗(yàn)?zāi)康模毫私獠⑹炀氝\(yùn)用PHOTOSHOPCS3二、實(shí)驗(yàn)項(xiàng)目：信息技術(shù)系實(shí)驗(yàn)報(bào)告

三、實(shí)驗(yàn)步驟:

1.打開PHOTOSHOPCS3軟件新建圖層（名稱為“茶壺”，寬為400毫米，高位300毫米，

分辨率為300像素/英寸，顏色模式RGB，8位，背景顏色默認(rèn)為白色）用漸變工具設(shè)置

左色標(biāo)RGB值為161、152、131，右色標(biāo)RGB值為255、255、255確定鼠標(biāo)從左上角一直拉到右下角完成

2.打開“小鎮(zhèn)”圖片用移動工具移到“茶壺”圖層調(diào)整圖片大小，移到適合的位置

將“小鎮(zhèn)”圖層的不透明度改為30%完成

3.新建圖層用矩形選框工具在“茶壺”圖層畫出矩形框，填充背景色RGB值為181、176、

163C，TRL+D利用移動工具，將矩形框下移，CTRL+SHIFT+ALT+T進(jìn)行復(fù)制。新建組，將條紋圖層放入圖層組中，命名為“條紋”

4.打開“梅花”圖片用移動工具移到“茶壺”圖層調(diào)整圖片大小，移到適合的位置，

并將圖層命名為“梅花”

5.打開“茶壺”圖片用移動工具移到“茶壺”圖層調(diào)整圖片大小，移到適合的位置，

并將圖層命名為“茶壺”

6.打開“案幾”圖片用移動工具移到“茶壺”圖層調(diào)整圖片大小，移到適合的位置，

并將圖層命名為“案幾”

7.打開“茶杯”圖片用移動工具移到“茶壺”圖層（移動四次，即出現(xiàn)四個茶杯）調(diào)

整圖片大小，移到適合的位置，并將圖層命名為“茶杯”

8.按“CTRL+Ｅ”，合并“茶壺”、“案幾”和“茶杯”圖層，命名為“茶壺組合”

9.打開“竹子”圖片用移動工具移到“茶壺”圖層調(diào)整圖片大小，移到適合的位置，

并將圖層命名為“竹子”

10.選擇“直排文字工具”，輸入“宜興紫砂壺”字樣，字體為華文行楷，字體大小為８０

點(diǎn)，銳利，字體顏色RGB值為181、176、163右擊圖層?xùn)鸥窕瘓D層11.完成并保存作業(yè)

四、實(shí)驗(yàn)中遇到的問題及解決方法：

無

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

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

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

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

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

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

一、考核目的

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

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

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

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

要求：

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

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

三、考試說明與評分標(biāo)準(zhǔn)

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

201*-5-5

目錄

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

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

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

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

一、概述

1.1選擇緣由

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.4Firework

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如圖2-1-1

下面是這個網(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)站，首頁采用大部分的藍(lán)色和少部分的白色、暗綠色、灰色三色搭配，給人一種舒適、溫馨家的感覺。這四種色塊將網(wǎng)頁分成幾個不同的部分。藍(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)色做字體的顏色，看起來更加協(xié)調(diào)。導(dǎo)航條下面還做了一些比較方便的快速鏈接。如2-1-4所示。白色與淺藍(lán)色的部分放置了網(wǎng)站的FLASH輪顯動畫和網(wǎng)站的新看點(diǎn)、最新的家居排行榜等內(nèi)容。然后就是家居設(shè)計(jì)的圖片展示區(qū)，共有五張家居設(shè)計(jì)的圖片，這些圖片是運(yùn)用代碼做成的滾動效果插入到網(wǎng)站當(dāng)中去的。最下面

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

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

圖2-2-1

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

圖2-2-2

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

圖2-2-3

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

圖2-2-4

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

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

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

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

2.4圖片輪顯的制作過程

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

1）首先啟動Flash2.0建立一個寬297、244的白色畫布。

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

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

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

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

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

2.5滾動圖片的制作

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

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

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

2.7形成網(wǎng)頁

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

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

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

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

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

實(shí)踐考核成績評價表

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

友情提示：本文中關(guān)于《網(wǎng)頁美工設(shè)計(jì)-實(shí)驗(yàn)報(bào)告》給出的范例僅供您參考拓展思維使用，網(wǎng)頁美工設(shè)計(jì)-實(shí)驗(yàn)報(bào)告：該篇文章建議您自主創(chuàng)作。

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

《網(wǎng)頁美工設(shè)計(jì)-實(shí)驗(yàn)報(bào)告》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://www.seogis.com/gongwen/639165.html

• 上一篇：網(wǎng)頁美工實(shí)訓(xùn)報(bào)告
• 下一篇：中國廚房電器市場消費(fèi)行為調(diào)查報(bào)告