網頁設計實訓體會感悟

第一篇：網頁設計實訓體會感悟

一連上了兩個星期的網頁實訓課，可以説學到很多以前沒有學到的東西。雖然在大一的時候我們的專業出開設了網頁設計課，但感覺這兩個星期學到的遠遠比以前學一個學期的要多，要豐富。

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

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

我們的網站主要是圍繞宿舍而展開的一串活動、人物等，宿舍給我們一種很温馨、很快樂的感覺，所以我們決定將這次的網頁名叫funny room。主題確定好了，那麼分工出就明確了，我們組有三個人，兩個人負責找素材，另一個美術好的就負責網頁的頁面設計，但是我們始終不是學美術方面的，所以色彩方面搭配的不是很好，後來採用了色彩比較清新自然的綠色來作為首頁的主色調，讓人第一眼看上去就有難忘的感覺。而從第二頁開始就採用粉色為主色調，讓人可以感受到我們的主題，因為首頁和其它的顏色不一樣，所以我們就把首頁當作是過渡頁，第二頁開始才是網頁的內容。為了增加網頁的新鮮感和活潑感，還適當在添加一些透明flash和一些網頁特效。在這實訓的時間裏面，我們分工合作，共同努力，對網頁反覆調試和修改，特別是對於fireworks軟件不那麼熟悉，有很多的實例都要看過老師的演示才會明白，不過這也恰恰讓我學到更多。雖然中途難不免會有因為意見的不合而發生一些小小的爭吵，但我覺得不影響我們的網頁設計，反而會因為這些不同的意見而重新學到更多的知識。

第二篇：網頁設計實訓總結

實訓總結

經過倆周的實訓，我從中收穫了很多。原本以為計算機科學導論的實訓是純理論的，得知是上機操作還是有一點興奮。剛打開實訓的要求，發現在實訓期間我們要學的好多。像word、excel、photoshop、powerpoint、flash、dreamweaver等軟件的應用，有些是我從來沒有接觸過的，有一些是自己會一點皮毛的。帶着一份緊張一份好奇，我開始展開了對這些軟件的探索。按照老師在實訓期間給我們的要求，在做word的時候，原本以為很簡單的，後來才發現自己會的只是冰山一角，原來word的用處那麼多。通過訓練，我掌握了段落的拆分、移動和複製處理以及段落格式設置，格式、特殊字符的查找和替換，分欄、首字下沉設置，頁眉、頁腳及頁碼的設置，插入藝術字體、圖片、公式等對象， 圖片的旋轉和翻轉、組合和對齊。excel在我的意識裏只能用來編輯數據，做個表格，沒想到還有數據排序和自動篩選、圖表的創建和編輯、分類彙總等功能。photoshop的功能是處理圖片，在實訓的時候自己做的那個端午節的粽子是通過這個軟件自己繪製出來的，感覺到軟件應用的神奇。ppt由於自己上學期的學習，因此在實訓期間做的作業也就駕輕就熟的完成了。最好玩的軟件應該就是flash了，通過幾張圖片的疊加和處理，就出現很可愛的動畫了。最讓我驚訝的軟件當然就是dreamweaver了，它竟然是用來做自己的個人網頁的，本來覺得自己做網站是一件很不切實際的事情。經過實訓期間的學習，我也學會了製作自己的個人主頁。

這次的實訓讓我掌握了辦公自動化以及網頁製作軟件的使用，也能運用word、excel、powerpoint處理文檔，能運用dreamweaver、flash、photoshop製作網頁了。總之實訓的收穫頗多。

第三篇：網頁設計實訓

網站名稱：微言微語個人主頁

班級：j09301班，j09302班

學生姓名：

指導老師：李向

實訓時間：2014.12.6—2014.12.22

2014年下期網頁設計課程實訓報告

一、實習目的：

通過教學實習掌握站點製作、站點測試與發佈技術。會綜合利用fireworks 、flash和dreamweaver三個軟件進行靜態網站的設計。

二、實習內容：

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

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

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

三、具體要求：

1、利用dreamweaver製作一個靜態網站，要求網站有特色，整個網站的內容和形式要統一，應能夠反映一個簡單的主題。可以選擇製作《個人網站設計》、《企業網站設計》、《文化網站的設計》、《娛樂網站設計》或者其他自己認為適合的網站。

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

3、 必須用到框架、表格或層排版技術、flash技術和圖像處理技術，使網站具有合理的外觀和功能。

4、 主頁基本要求：

頁頭logo，準確無誤地標識站點和企業標誌；

網頁標題動畫，可以製作成gif動畫或者flash動畫；

導航條；

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

聯繫信息，如普通郵件地址或電話；

版權信息。

5、製作一個表單頁面。

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

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

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

9、整個網站各頁面之間(請收藏好範文 網：)保持風格一致，頁面之間要有合理的超級鏈接。

10、進行站點測試後申請免費空間併發布到網絡。

四、網站設計思路：

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

個人主頁，一般都會包括首頁，相冊，鏈接，一些個人喜歡的文字加圖片，我的個人主頁也不例外，包括次首頁（個人喜歡的的文章加圖片），我的作品（裏面包括自己做的三個flash動畫），文章（一些自己喜歡的文章），相冊（firworks處理過的相冊），關於（關於自己的文字，關於本站的一些説明），鏈接（世界著名網站的有關鏈接），反饋表（瀏覽者信息反饋表）。

五、網站設計過程：

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

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

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

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

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

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

附錄：源代碼

(1)狀態欄逐字出現的效果代碼：

<script language="javascript">

var msg = "歡迎來到☆※◎~~~微言微語~~~☆※◎個人主頁，請多提意見。謝謝! " ; var interval = 120

var spacelen = 120;

var space10=" ";

var seq=0;

function helpor_net() {

len = th;

us = tring(0, seq+1);

seq++;

if ( seq >= len ) {

seq = 0;

us = '';

imeout("helpor_net();", interval );

}

else

imeout("helpor_net();", interval );

}

helpor_net();

</script>

(2)首頁收藏代碼：

onclick="avorite('","_blank");}

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

在設計開始的時候，想的太多，不知道怎麼開頭，定哪個主題，背景，色調，文字，佈局都沒有頭緒，後來，開始做，而且覺得越做越有頭緒了，所以我覺得，還是不要想的太多，太複雜了，不要追求完美，不要做的網頁太多，搞到最後，別人都不知道，你這個網站的主題

是什麼了。

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

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

七、實訓心得：

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

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

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

通過此次實訓，使我對於網頁製作的三大軟件有了進一步的瞭解，各功能都能夠實現。提高了自己的鑑賞能力，綜合搭配能力，也對以前學過的內容進行了綜合的複習。

通過此次實訓，我更瞭解到，生活中有許多色彩，搭配顏色的時候，聯想到生活中的東西會做的更漂亮，給人一種親切感，現在看到什麼東西，我就會聯想到做網頁的時候，還有怎麼佈局。反正此次實訓收穫很多。

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

第四篇：網頁設計綜合實訓

《網頁製作綜合實訓》考核要求

一、課程考核

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

二、大作業要求

1．學生獨立自主地完成源程序量（包含html、javascript、vbscript各種代碼均算在內）在500行以上的動態web程序。

2．本課程設計要求所有的腳本程序最終都可運行。

3. 本課程設計中有關web頁界面設計部分可以用快速所見即所得類型的開發工具設計（比如frontpage、dreamweaver等）

4. 可以借鑑一些源代碼，但是禁止只對界面部分修改後冒充獨立開發產品提交。

5.學生應按時(十六週前)、認真地完成課程設計，並作設計報告。

6.大作業電子稿上傳至課程論壇/班級論壇！

第五篇：網頁設計實訓報告

天津電子信息職業技術學院 暨國家示範性軟件職業技術學院

網頁製作實訓報告

姓名：系別：專業：班級：指導教師：完成時間：2014 年 6 月 1日