網(wǎng)頁設計實訓體會感悟

精選財經(jīng)經(jīng)濟類資料最新財經(jīng)經(jīng)濟資料感謝閱讀~~網(wǎng)頁設計實訓體會感悟一連上了兩個星期的網(wǎng)頁實訓課，可以說學到很多以前沒有學到的東西。雖然在大一的時候我們的專業(yè)出開設了網(wǎng)頁設計課，但感覺這兩個星期學到的遠遠比以前學一個學期的要多，要豐富。

每一天都有新的內(nèi)容要學，讓人感覺很興奮，很高興，恨不得馬上就把它給學會。通過這次實訓使我更熟練掌握dreamweaver、flash、fireworks、photoshop等軟件的功能和應用。不但如此，更增加了同學間的友誼，陪養(yǎng)了彼此間的團結(jié)。

在這期間，每一天老師都會發(fā)一些素材和實訓給我們，首先是網(wǎng)頁素材的準備，在網(wǎng)上查看一些網(wǎng)頁背景和背景顏色搭配，讓我了解到網(wǎng)頁的顏色不能多過3種色彩。接下來的幾天再結(jié)合自己的網(wǎng)頁來進行策劃，在做首頁之前，先用圖紙把網(wǎng)頁的結(jié)構畫出來，內(nèi)容和結(jié)構都想清楚用fireworks把網(wǎng)頁設計出來，再切割圖片，把它們導成html格式在dreamweaver中進行進一步的編輯。

我們的網(wǎng)站主要是圍繞宿舍而展開的一串活動、人物等，宿舍給我們一種很溫馨、很快樂的感覺，所以我們決定將這次的網(wǎng)頁名叫funnyroom。主題確定好了，那么分工出就明確了，我們組有三個人，兩個人負責找素材，另一個美術好的就負責網(wǎng)頁的頁面設計，但是我們始終不是學美術方面的，所以色彩方面搭配的不是很好，后來采用了色彩比較清新自然的綠色來作為首頁的主色調(diào)，讓人第一眼看上去就有難忘的感覺。而從第二頁開始就采用粉色為主色調(diào)，讓人可以感受到我們的主題，因為首頁和其它的顏色不一樣，所以我們就把首頁當作是過渡頁，第二頁開始才是竟然是用來做自己的個人網(wǎng)頁的，本來覺得自己做網(wǎng)站是一件很不切實際的事情。經(jīng)過實訓期間的學習，我也學會了制作自己的個人主頁。

這次的實訓讓我掌握了辦公自動化以及網(wǎng)頁制作軟件的使用，也能運用word、excel、powerpoint處理文檔，能運用dreamweaver、flash、photoshop制作網(wǎng)頁了?？傊畬嵱柕氖斋@頗多。

網(wǎng)站名稱：微言微語個人主頁

班級：j09301班，j09302班

學生姓名：

指導老師：李向

實訓時間：2014.12.6—2014.12.22

2014年下期網(wǎng)頁設計課程實訓報告

一、實習目的：

通過教學實習掌握站點制作、站點測試與發(fā)布技術。會綜合利用fireworks、flash和dreamweaver三個軟件進行靜態(tài)網(wǎng)站的設計。

二、實習內(nèi)容：

1.用fireworks處理圖片。對圖片裁剪、鈍化、高斯模糊。設置圖片的gif動畫格式，制作標題動畫。對文字應用效果。利用fireworks制作導航條并導出格式為html。

2.用flash制作標題動畫。首頁中的動畫不超過20m。制作按鈕來超級鏈接到其他頁面。

3.使用dreamweaver布局視圖，設置本地站點。在標準視圖和布局視圖模式相互轉(zhuǎn)換。建議使用布局視圖，在標準模式中插入層對象制作層動畫，利用行為面板添加鼠標行為，制作翻轉(zhuǎn)動畫，使用css樣式統(tǒng)一網(wǎng)頁中文字樣式，插入fireworks中的gif文件及導入flash中的swf文檔，設置文檔間的超級鏈接。

三、具體要求：

1、利用dreamweaver制作一個靜態(tài)網(wǎng)站，要求網(wǎng)站有特色，整個網(wǎng)站的內(nèi)容和形式要統(tǒng)一，應能夠反映一個簡單的主題?？梢赃x擇制作《個人網(wǎng)站設計》、《企業(yè)網(wǎng)站設計》、《文化網(wǎng)站的設計》、《娛樂網(wǎng)站設計》或者其他自己認為適合的網(wǎng)站。

2、作一個主頁面，至少5個次頁面。

3、必須用到框架、表格或?qū)优虐婕夹g、flash技術和圖像處理技術，使網(wǎng)站具有合理的外觀和功能。

4、主頁基本要求：

頁頭logo，準確無誤地標識站點和企業(yè)標志；

網(wǎng)頁標題動畫，可以制作成gif動畫或者flash動畫；

導航條；

e-mail地址，用來接受用戶垂詢；

聯(lián)系信息，如普通郵件地址或電話；

版權信息。

5、制作一個表單頁面。

6、某個頁面有滾動字幕。

7、為一個頁面添加背景音樂。

8、至少添加一種行為效果。

9、整個網(wǎng)站各頁面之間保持風格一致，頁面之間要有合理的超級鏈接。

10、進行站點測試后申請免費空間并發(fā)布到網(wǎng)絡。

四、網(wǎng)站設計思路：

本站應該算是一個人主頁的小型網(wǎng)站。關于本站站名的來源：微言微語個人主頁，因為，我覺得這個網(wǎng)站里面的所有文字都是像一個人在自言自語，在低聲地向某人訴說著什么，沒有主題，沒有目的。取這個站名，是做了網(wǎng)站的大概構思后才取的，覺得，這個名字與網(wǎng)站的圖片、背景音樂還有文字都很相符。

個人主頁，一般都會包括首頁，相冊，鏈接，一些個人喜歡的文字加圖片，我的個人主頁也不例外，包括次首頁，我的作品，文章，相冊，關于，鏈接，反饋表。

五、網(wǎng)站設計過程：

把所有的素材都整理好，開始布局。此站大多數(shù)用的是“三”字型的，三字型是我給它取的名字，因為，最開頭是一張帶有導航條的圖片，用firworks處理過的html文件，中間一大片用于放正文，下面就是版權信息，e-mail地址用來接受用戶垂詢；聯(lián)系信息，如普通郵件地址或電話，像被分開的三個部分，所以我叫它三字型。這種布局方式看起來比較的整齊，簡潔美觀。

首頁本想做一個動態(tài)網(wǎng)頁，由于時間有限所以還沒完全成功。只好用了一張與次頁面一樣的背景圖片做背景，加上從下向上的滾動字幕，背景圖片是用firworks處理過的圖片，大片的灰色墻壁加上顏色艷麗的鈕扣圖案，首頁加了狀態(tài)欄逐字出現(xiàn)的效果，加了“加入收藏”、“設為首頁”等代碼。

次頁面包括如下些內(nèi)容：首頁、作品、文章、相冊、關于、鏈接以及反饋表。這些頁面是用模板做的，上面的圖片，導航條以及下面的版權聯(lián)系方式是不用改變的，都保持著首頁的風格，背景圖一樣，字體與樣式一樣，圖片風格一樣。中間是兩個可編輯區(qū)域。

在所有的頁面導航條下面，插入層對象制作了一個層動畫，來回移動的層，里面存放日期，利用行為面板為此層添加了鼠標行為，單擊此層，會出現(xiàn)對話框，“歡迎您訪問我的個人主頁！”，做布局大多使用表格布局，使用了少量的css樣式，字體，字號，顏色都統(tǒng)一套用相應的樣式。

首頁中添加背景音樂，小說音樂《我在那一角落患過傷風》，一邊看慢慢上移的文字，一邊聽這輕柔的音樂，給人一種意境美。其實次頁面添加《蟲兒飛》，輕快而活潑。首頁禁止右鍵復制功能，右鍵單擊沒有反應。

次首頁，就是進入次頁面的第一個頁面。主題算是與青春有關的三種感情，三張圖片，用firworks處理，加上相應的文字。要用到兩個表格，分別放在兩個可編輯區(qū)域里面，一個1*2的表格，一個2*2的表格，第一個表格放一張有關于親情的圖片加一小段文字，第二個表格放一張有關于友情的圖片加一小段文字,還有一張有關于愛情的圖片加一小段文字。作品頁面是三個flash動畫，第一個是左右鍵控制的圖片移動按鈕，可以單擊來鏈接到主頁面，四個圖片經(jīng)過裁剪、高斯模糊。第二個是光芒四射，要用到actionscript語言，長短不一的線條加上透明度的改變組成光芒四射。第三個是鼠標跟隨特效。文章頁面，就是簡單的文字頁面，沒有什么特別的。相冊頁面，上面是一個用firworks處理后的一組圖片，鼠標移到小圖片上，下面做出現(xiàn)相應的大相片，中間有少量文字，底部是用flash做的一組循環(huán)滾動圖片，圖片跟著鼠標的移動而左右移動。關于頁面，也是簡單的文字頁面，沒什么特別的，“個人簡歷”文字鏈接到word文檔“個人簡歷”，下面有個信息反饋的鏈接，鏈接到有關的“瀏覽者信息反饋表”，此信息反饋表用表單做的，用到單行文本域，多行文本域，單選框，復選框，按鍵，此表單可以用郵件方式反饋信息。鏈接頁面，前面是我的個人主頁logo，一張用firworks做的logo，并建立有關鏈接，中間是一些文字，下面是世界著名網(wǎng)頁的有關網(wǎng)址以及相應鏈接。

附錄：源代碼

狀態(tài)欄逐字出現(xiàn)的效果代碼：

varmsg=“歡迎來到☆※◎~~~微言微語~~~☆※◎個人主頁，請多提意見。謝謝!“;varinterval=120

varspacelen=120;

varspace10=““;

varseq=0;

functionhelpor_net{

len=msg.length;

window.status=msg.substring;

seq++;

if{

seq=0;

window.status=‘‘;

window.settimeout;”,interval);

}

else

window.settimeout;”,interval);

}

helpor_net;

首頁收藏代碼：

onclick=“window.external.addfavorite;}

六、實訓中遇到的難點及解決辦法：

在設計開始的時候，想的太多，不知道怎么開頭，定哪個主題，背景，色調(diào)，文字，布局都沒有頭緒，后來，開始做，而且覺得越做越有頭緒了，所以我覺得，還是不要想的太多，太復雜了，不要追求完美，不要做的網(wǎng)頁太多，搞到最后，別人都不知道，你這個網(wǎng)站的主題

是什么了。

還有就是布局的時候總是不能做到很美觀，后來，我把頁面屬性改了左過距為10，上邊距為10，剛好把背景圖片里面的那些亮麗的鈕扣圖案顯示出來，改變了表格背景圖的灰暗，使網(wǎng)頁的整體看起來更美觀了。

在做css樣式表的時候，做字的顏色的時候，老是不知道用哪種顏色才搭配的起這個背景，后來，看到那個背景的鈕扣顏色與灰色配起來很好看就用吸管取了鈕扣的顏色了。

七、實訓心得：

在我看來，設計網(wǎng)頁，應該先策劃，策劃很重要，加上創(chuàng)意，配色很重要，技術與鑒賞能力是最主要的。建立站點的時候，各個文件夾取名的時候，最好用相應的英語，見名知意，如圖片文件夾用image，網(wǎng)頁文件夾用html。

在所有配色當中，不同的顏色傳達著不同的意義也有不同的象征。如白色代表著：清潔、天真、潔凈、真理、和平、冷淡、貧乏；灰色讓人聯(lián)想到灰塵、石頭、水泥、白銀，象征著中庸、平凡、溫和、謙讓，它給人以中立和高雅的感覺。太多的顏色會給人帶來視覺上的疲勞。所以，在我下載準備素材的時候，就選擇用灰色做背景顏色，灰色太貧乏，就加上亮色的鈕扣起到“中和”的作用。

通過此次實訓,我覺得平面設計的創(chuàng)意思維、版面設計、色彩配置、圖形創(chuàng)意等方面都有很重要，對于網(wǎng)頁制作來說，我覺得是一個以多學科設計為基礎，受到包括視覺藝術、技術、內(nèi)容的多種影響。網(wǎng)頁設計的技術不算什么困難，真正困難的是網(wǎng)頁的設計創(chuàng)意，文字我覺得也很重要，有些人瀏覽你的網(wǎng)頁不是喜歡上你的艷麗漂亮的圖片，也許是喜歡上你的文字，那種感動人心的，唯美的文字。文字與圖片要搭得上調(diào)，不可能用一張美女圖做背景，上面卻寫有關于親情的文章。也就是整體的搭配問題。

通過此次實訓，使我對于網(wǎng)頁制作的三大軟件有了進一步的了解，各功能都能夠?qū)崿F(xiàn)。提高了自己的鑒賞能力，綜合搭配能力，也對以前學過的內(nèi)容進行了綜合的復習。

通過此次實訓，我更了解到，生活中有許多色彩，搭配顏色的時候，聯(lián)想到生活中的東西會做的更漂亮，給人一種親切感，現(xiàn)在看到什么東西，我就會聯(lián)想到做網(wǎng)頁的時候，還有怎么布局。反正此次實訓收獲很多。

最后，我想，如果此次實訓老師是要我們分組來做的話，也許，我們可以做得更好，因為，一個想的畢竟不全面，而且，一個人的申美有限，我們可以分工合作，一個人做一個方面的東西，也可以根據(jù)他所善長的方面來分工，善長動畫制作的人做動畫，善長圖片處理的人做圖片，善長文字與布局的就來布局。但是，也許那樣，有些同學會懶的動手，推著給別人做

《網(wǎng)頁制作綜合實訓》考核要求

一、課程考核

采用期末大作業(yè)與形成性考核相結(jié)合的方式。形成性考核占50分，視平時參加教學活動和作業(yè)完成情況而定；期末大作業(yè)考核占50分，根據(jù)期末大作業(yè)的完成而定。兩方面成績累計達到60分者為及格。

二、大作業(yè)要求

1．