第三篇：網頁實訓總結

（信息工程系）

綜合實訓總結報告

實訓課程：____網頁制作 ____ ______實訓項目： _網頁制作基礎教程實訓_ 姓名：_ __________ 班級：_11計算機應用學號：_______

指導教師：____ _實訓時間： 2012-2013學年第一學期第20周網頁制作實訓總結報告

一、實訓目標

1、知識目標：

⑴掌握設置站點。

⑵掌握網頁元素的基本操作。

⑶靈活使用超級鏈接。

⑷熟練掌握表格、層和框架來布局頁面。

⑸掌握表單的設置與使用。

⑹掌握設置CSS樣式。

⑺能夠使用多媒體來豐富頁面。

⑻能夠使用模板制作大批風格相似的頁面。

2、技能目標：

⑴對于給定的設計題目，學會如何進行分析，理清思路，并給出相應的結構模型。

⑵通過對所選課題的分析，有針對性的進行調查研究，學會收集、整理相關資料。

⑶合理運用所學過的知識及實驗中的練習，將其融入本次實訓當中，真正成為自己的東西。

⑷熟練運用所學知識制作出具有個人特色的班級網站

二、實訓環境

我們在6號機房完成了為期一周的實訓，此機房設備、軟件齊全

1、硬件設備

PC機

2、軟件環境

Dreamweaver 8.0、flash、photoshop等

三、實訓內容

1、確定的網站內容要健康、具有時代氣息。

2、網站提供的信息應與網站主題相符合。

3、頁面布局合理，網站結構應層次分明，主題鮮明，界面美觀、簡潔。

4、建議采用層、表格、框架結構布局頁面，導航和超鏈接清晰。

5、插入圖片、多媒體元素。

6、撰寫實訓報告。

四、實訓步驟

1、根據老師布置的實訓要求，構思整體布局以及LOGO的設計。

2、打開Macromedia Dreamweaver 8，創建相應的本地站點，命名為banjizhuye(E/banjizhuye)，在banjizhuye站點中建立文檔和文件夾，分別為index，xiangce，banwei，chengyuan，huodong和文件夾images，flash，ps等。

3、打開Adobe Photoshop CS4，利用ps著手做logo，因為我們是11級計算機應用班，所以我就用藝術字設計了字體，外面的圖標代表這我們團結進取，里面倒影的樹葉是代表著我們蓬勃的精神面貌，下面的五個字母是計算機應用的首字母縮寫。如下圖；

4、利用表格對頁面布局，我的網站共有5個主頁面：班級首頁、相冊集合、班委成員、班級成員、班級活動，每一個頁面用統一的背景以及圖片，以保證網站統一的頁面風格，版面設計十分靈活，根據各部分內容的不同適當的自由設計。網頁布局主要用框架和表格，用框架定位內容的大體結構，再用表格具體定位。位子的設計也是重要的一個部分，根據具體內容決定字體風格，相同的風格多次調用是用css設計一個樣式，以保證隨時、準確的調用。

1)

通過繪制表格來設計頁面布局；

2）在表格中插入頁面元素，如利用文本域，來創建用戶登錄界面，插入圖片等，首頁頭部插入了flash動畫，改變其參數，使其達到了雪花飄落的動態效果，如下圖：

主頁的左邊我用代碼實現了其自動播放幻燈片的效果，右邊利用代碼達到了字幕的滾動效果，如下圖：

5、子頁面的設計，整體格局美觀，溫馨，明亮，能讓觀賞者眼前一亮，并在每個子頁面添加了滾動字幕，以及flash特效。如下圖：

6、每個網頁完成后，為其添加鏈接，以達到瀏覽每個頁面時暢通無阻，在添加 鏈接時，為了使導航文字在瀏覽時是白色字體，我用CSS為導航欄定義了一個版塊，并用 CSS高級設置設置我需要的色彩。

五、實訓總結

在這三天多的實訓當中和同學進討論制作網站，同時學到了許多關于網頁制作的相關知識。第一，我覺得在制作過程中，發現自己學的東西太欠缺了，要學習有條不紊，要學習冷靜思索，所以我想以后課上課下一定要認真學習，虛心聽取別人意見，多去學習一點網頁制作的技術，以備我以后的制作之路。通過這次實訓，我學到了很多有價值的東西。我獨立的完成了網站設計的全過程，把設計中散亂的網頁鏈接成框架體系，使平時學到的知識點有了很高的提高，并且合理的在試驗中進行了實踐。第二，在這次實驗的過程中，我搜集了大量的素材和網頁設計的技術技巧方面資料，擴大了知識面，給我在以后的設計過程中能博采眾長，制作出好的網頁打下了基礎。我現在已經掌握文檔排版標記的使用熟練使用及其屬性設置、特殊符號；第三：我現在已經熟練使用超級鏈接，合理使用列表；第四：我現在已經掌握圖片標記及相關屬性的使用、了解表格標記制作表格的方法。最后，我感受最深的是：要想做好一個網站，素材和技能都十分重要。好的素材需要多方查找資料，可以從圖書、網站和新聞上查找。好的技能需要不斷的實踐，經常鍛煉做網頁。如果擁有好的素材和精湛的技能就可以做出精湛的網頁。五天的實訓課程結束了，此次實訓檢驗了通過一學期的學習對知識進行了匯總，通過本次實訓我已基本掌握了制作簡單網頁的過程，基本熟悉了各種軟件的綜合使用方法。實踐出真理，實訓的日子過去了，從理論和操作中融合了我們平時所學的知識，為我們的學習和工作鋪墊了精彩的一幕。因此，我堅信，用血去做自己認為應該做的事，努力的開拓我們的極限，沒有什么是不可能的，我們要更加的去努力。通過這五天的學習，在制作過程中出現了許多問，這些都是細節問題，我與同學進行了細致的研究后，最后達到了所要預期的效果。我非常感謝學校給了我這次制作網頁的機會！

第四篇：網頁實訓報告

日照職業技術學院

網頁實訓報告

學號：

姓名：

班級：

實訓日期：

指導老師：

X年X 月 X 日

個人博客

一、實訓目的與要求

目的：通過實訓讓同學們對網頁有更深一步的了解，培養學生的動手能力，提高學生運用HTML語言編寫靜態網頁能力的水平，掌握HTML和CSS語言的應用，為學生學習動態網頁打下堅實的基礎，通過實訓可以達到全面理解、運用網頁制作的知識，并使之得以融會貫通，在掌握理論的基礎上再加以實踐，進一步提高、加強學生的綜合能力，把本學期學到的東西都運用起來達到一定的技術性、創意性，讓其更美觀。

（1）掌握創建Dreamweaver本地站點的方法，利用表格和層規劃網頁布局

（2）掌握在網頁中添加文本、圖像、Flash動畫等頁面元素

（3）掌握在網頁中輸入、設置標題和正文文字的方法。

（4）掌握在Dreamweaver中建立鏈接

（5）綜合運用所學軟件進行網頁材料的準備

要求：掌握網頁設計基本概念和HTML的基本結構，了解網頁技術概況、HTML的編輯和運行環境，掌握文字版面的編輯，掌握網頁的超鏈接技術的應用，了解圖像的處理。包括背景圖案、圖形、圖像及其超鏈接等的設定和應用。了解列表的各種使用，了解表格的基本語法，掌握表格的定義、控制、分組、標題等的應用。了解表單在網頁中的應用，了解如何在網頁中加入各種動態效果，了解網頁中CSS的基礎知識。掌握CSS的各種屬性應用。最后根據自己的興趣，設計一個個人站點或介紹一個集體的小網站，圍繞一個主題并能夠體現出自己的個性，有足夠的頁面及鏈接，有整體的框架結構，表格定位以及表單處理等，布局合理，色彩搭配協調統一，內容豐富多彩，頁面風格獨特。

二、實訓內容

1.準備工作

（1）先想好做什么方面的網站。

（2）根據自己的需要在網上下載圖片、動畫等相關的素材。

（3）安裝好需要用到的相關軟件。

（4）大致設計一下該用到的頁面的布局版面情況，規劃一下網站的結構，畫一下草圖。

2.使用的技術

用Word處理藝術字、在Photoshop中用切刀工具切圖片、用其它工具處理圖片、裁切

圖片、轉換格式等，用Flash做動感圖片，用ACDsee裁切圖片。制作網頁時應用表格、層、超鏈接、動態文本、表單等。

3.網站的整體布局及介紹

該個人博客使用了16個頁面，一個進入頁面，用了幾個圖片和一個“Enter”鏈接進入主頁面，其主頁面使用了一個以糖果屋為主題的背景圖片，其中有導航、個人資料、微博、留言、好友、照片、博客、版權信息、按鈕、文本框等組成并做了相應的鏈接。16個頁面分別是：jinru.html、index.html、jiaru.html、pengyou.html、liuyan.html、xiangce.html、boke.html、gerendang.html、yinyuehe.html、guanyu.html、lianxi.html、youqing.html、yinsi.html、wenzhang.html、jianai.html、yuluo.html，.在音樂盒和個人檔頁面中用到了很多的表單項，有文本域、單選按鈕、復選框、列表/菜單、按鈕。前幾個頁面的主要背景色是#F3B8CA和#ABCD45后幾個頁面主要應用了#ABCD45和白色作為背景色，前幾個頁面和后幾個頁面采用了不同的風格。

4.實現的功能

主要是幾個頁面的鏈接，加入我們、聯系我們、關于我們、友情鏈接、隱私與版權幾個頁面主要是針對本網站進行了介紹，介紹了該網站的聯系方式、加入方式、合作商、網站的隱私及版權信息。個人檔主要寫個人信息，音樂盒寫了最近流行的專輯及歌曲，還有一些朋友、留言、相冊、博客等信息。

三、調試中出現的問題

在制作網頁的過程中出現的問題主要是排版布局問題和鏈接問題，鏈接有時行有時不行，還有表單的使用，通過問老師同學及在網上自己找尋答案最后都解決了。

其次在使用其它軟件時也是出現種種問題，主要還是自己對這些軟件還沒有真正的熟練掌握，在以后的學習過程中我會更加努力一定多多練習。

四、實訓心得體會

在這次實訓的過程中讓我唯一感覺到創新的重要性。我也看了其他的同學做的網頁，大家的都千篇一律，大多是學習過程的但是有的同學通過其他的參考資料，然后得到自己想要的畫面和效果，然后把自己的與其他人的區分開來，我認為在這個過程中是一種創新的過程，一種將別人的智慧運用到自己生活中為己所用的能力，這種能力雖然反映的不是自己的真實水平，但是一種學習的過程，這以后，就成為了自己的東西。也發現很多同學都在自己的腦海中構造自己想要的畫面，同時，自我摸索，在不斷地失敗

和成功中吸取不足和失敗的原因，我認為這本身就是一種創新的過程。力求有一個很好的視覺效果，其次網頁頁面美觀也是很重要的，不斷地嘗試調配顏色。想著也是一種創新，這種創新中得到自己所要的效果是學習的一部分。

其次我還知道了此次實訓的目的，也清楚了目前自己的許多不足，那就是缺乏相應的專業知識與經驗，對所學的專業知識不能夠很好地運用于實踐操作中。不過我也發現了以前不曾注意到的細節，在實訓制作網頁的過程中，我對作為一名網頁設計師制作網頁時要注意的細節和一些重要的地方也有了更多的了解。把職業能力訓練與職業素質的訓導有機結合起來。相信這對我接下來的學習專業知識會起到很有效的幫助，在接下來的時間里，我會以作為一名學習者的身份在這幾個方面要求自己，嚴格自我，向專業知識靠近，豐富我們的知識。

五、實訓總結

通過本次實訓我又一次感覺到了實訓的重要性，通過實訓可以讓我們深深地體會到理論與實踐聯系的重要性和必要性，通過實訓我們可以把這學期以來學的東西做個總結，并且還可以學到一些新知識對該軟件有更深一步的了解，我們要認真面對實訓，雖說實訓是一個很累的過程，但是實訓一周讓我們學到的東西要趕平時上課的好幾倍，好好努力把握好一切學習的機會，不要讓時間白白浪費。

第五篇：網頁設計實訓

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

班級：J09301班，J09302班

學生姓名：

指導老師：李向

實訓時間：2010.12.6—2010.12.22

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

一、實習目的：

通過教學實習掌握站點制作、站點測試與發布技術。會綜合利用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文檔“個人簡歷”(代碼：

附錄：源代碼

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

(2)首頁收藏代碼：

onClick=“window.external.addFavorite('”,“_blank”);}

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

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

是什么了。

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

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

七、實訓心得：

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

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

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

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

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

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