網(wǎng)頁美工設計-實驗報告

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

實驗報告

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

系部信息技術系課程名稱網(wǎng)頁美工設計學生姓名學號班級指導教師

二00六年二月制

信息技術系實驗報告

日期實驗地點201*年9月20日指導教師評語與成績一、實驗目的：了解并熟練運用PHOTOSHOPCS3二、實驗項目：信息技術系實驗報告

三、實驗步驟:

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

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

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

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

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

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

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

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

并將圖層命名為“梅花”

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

并將圖層命名為“茶壺”

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

并將圖層命名為“案幾”

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

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

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

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

并將圖層命名為“竹子”

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

點，銳利，字體顏色RGB值為181、176、163右擊圖層柵格化圖層11.完成并保存作業(yè)

四、實驗中遇到的問題及解決方法：

無

擴展閱讀：網(wǎng)頁美工設計說明書

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

設計題目：姓名：學號：班級：指導教師：完成日期：設計說明書

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

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

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

一、考核目的

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

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

考核方式：以課程設計做為主要的考核方式。

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

要求：

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

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

三、考試說明與評分標準

2．評分標準評分標準主頁美工設計要求：美觀且有創(chuàng)意、內(nèi)容完整、導航正確、有自己設計的評分標準與分值flash廣告動畫。副頁美工設計要求：布局好，內(nèi)容完整、導航正確，有1個以上的Flash廣告動畫設計說明書要求：格式正確、排版規(guī)范；分析到位、網(wǎng)頁美工設計重點與難點分析深刻。用A4打印，6頁以上。303040分值注：網(wǎng)頁美工的作品與網(wǎng)站可借鑒其它作品，但嚴禁復制或他人代做，一經(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色彩的平衡與呼應.............................................3二、網(wǎng)頁美工的總體設計..............................................3

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

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

一、概述

1.1選擇緣由

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

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

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

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

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

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

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

基礎美術：素描（石膏幾何體、靜物寫生）；色彩（色彩構成、簡單色彩靜物寫生）

三大構成：色彩構成、平面構成、立體構成。

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

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

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

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

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

1.4Firework

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

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

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

1.5色彩的平衡與呼應

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

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

2.1網(wǎng)頁設計的制作流程

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

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

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

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

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

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

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

如圖2-1-1

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

圖2-1-2

圖2-1-3

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

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

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

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

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

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

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

2.4圖片輪顯的制作過程

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

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

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

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

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

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

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

2.5滾動圖片的制作

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

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

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

2.7形成網(wǎng)頁

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

三、美工設計總結

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

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

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

實踐考核成績評價表

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

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

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

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

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