第二篇：網頁實訓報告

日照職業技術學院

網頁實訓報告

學號：

姓名：

班級：

實訓日期：

指導老師：

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.實現的功能

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

三、調試中出現的問題

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

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

四、實訓心得體會

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

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

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

五、實訓總結

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

第三篇：網頁制作實訓報告

《網站設計與制作》實訓報告

X學院XX班XXX號

一．實訓時間：

2010年6月7日到2010年6月13日

二．實訓地點：

XXX學院XXX班級

三．實訓組員：

XXX、XXX

四．實訓目標：

運用網頁設計方法，設計一個網站，提高綜合應用所學知識的能力，積累Web網站的制作經驗，培養團隊協作精神。本次實訓的具體目標為:了解網站制作的一般流程;熟練使用網頁制作工具Dreamweaver、Flash、Fireworks設計網頁;能靈活運用表格、層和框架布局頁面;熟練使用CSS樣式表美化網頁;正確使用JavaScript添加網頁特效;靈活使用模板和庫來制作網頁；學會申請免費域名空間和正確上傳站點的方法。

五．實訓策劃：

這一周，我們要進行《網站設計與制作》實訓，我們認為做網站前最主要的是確定主題、框架和標題欄的設計。因此我們相互討論之后，確定制作以“婚紗”為主題的“喜多坊時尚婚紗網”。在之后的資料收集和網頁的框架的建設中，我們發現了許多問題，某些關鍵點無法做出心中的效果，這讓我們有些遺憾。通過自身及組員的共同探索，我們已盡權利將以下是我們的策劃內容：

1.確定主題。制作網頁,首先是確定主題，冬天很冷,卻冷得很幸福，剛剛過去的圣誕的熱鬧勁還在心頭。于是我們從幸福出發，想到了結婚-婚紗，建立一個簡單的介紹婚紗的網站并取名喜多坊時尚時尚婚紗,專業介紹一些喜多坊婚紗的特色等。我們本次間的網站基本以粉紅為基點，粉紅是可愛清純的顏色，粉紅代表著幸福溫馨，所以本站以粉紅為風格，讓整個網站充滿愛的力量。

2.設計主頁。主頁的設計是整個網站的靈魂，構思導航欄的分類，然后是整體規劃，每一版塊都有其個性的色彩，清晰明了，便于閱讀瀏覽，我們構思大致

分幾部分，首頁，關于我們，婚紗禮服，量體裁衣，婚紗選購，公司門市，與我聯系，在線論壇8大板塊，每一板塊又分幾小部分，內容比較充分，多樣。確定導航欄的各個分類標題之后對于建立二級子網尤為重要，我們運用Photoshop CS3技術來設計出導航欄，制作切片，建立導航欄，將整體的主頁效果建立起來。

3.資料的搜集。主頁的導航欄設計好后，接下來就是對主頁導航欄的各個內容進行資料的收集，我們采用大量的資料收集再對資料進行塞選p圖，得到最適合導航欄內容的資料。素材的選擇，要符合網站的主題，圖片的大小要符合模板的輪廓，我們將不符合模板的用Photoshop處理編輯，然后放入站點底下，進行圖文的鏈接和排版。

4.各個子網頁的建立。我們設計好模板后只要在可編輯區依次編輯所需資料就可，運用模板建立子網頁少了很多工序，為我們節省大量的時間。盡管我們建立了模板，但我們在建立子網時很小心，因為一張圖片的大小插入就有可能破壞整個模板的結構尤其在使用表格時，因此我們對所插入的圖片和表格都得進行測量，做到不影響網站整體的美觀。

5.實現網頁間的鏈接。做好個格子網和首頁后，接下來就是通過模板的鏈接，將整個網站中的網頁鏈接起來，過程其實很簡單，主要是把要鏈接的文字和圖標選擇在選擇工具欄的鏈接按鈕最后選擇自己要鏈接的網頁單擊確定便可以了。做好這一步后，網站基本算是建好了。

6.向靜態網頁插入動態效果。在基本建好網頁中的插入層和時間軸，制作其動態效果，讓整個網頁充滿生機。我們在網上進行flash素材的收集，通過Flash CS3設計出主題下的風格動態效果。然后插入到靜態網頁中，使網頁更加生動形象。

六．實訓心得：

通過這周的學習實踐，在老師的指導下以大量明晰的操作步驟和典型的應用實例，使我們真正對所學的軟件融會貫通。我們結合年輕人心理制作了時尚婚紗網站，作為實訓的成果。其內容是多樣化的，制作網頁用的軟件是Deamweaver CS3軟件。它提供了網頁和表單的動態生成到網站的解決方案。主圖是一個網頁的門面，它能體現出這個網頁的整體風格。

制作網頁,首先是確定主題,經過再三考慮,就做了個關于婚紗的網站。考慮到,現在城市普遍幸福感不高，加上寒冬，于是以幸福為論點擴展想到了結婚，想到了婚紗，想到了未來的美好城市生活，城市讓生活更美好，結婚讓生活更完整婚紗讓生活更多姿！想到這些，我們最后決定建立一個簡單的介紹都市婚紗的網站,讓這個冬天不再寒冷，讓我們回憶起那些幸福的日子。于是網站主題確立。

然后是整體規劃，每一版塊都有其個性的色彩，清晰明了，便于閱讀瀏覽，大致分幾部分，首頁，關于我們，婚紗禮服，量體裁衣，婚紗選購，公司門市，與我聯系，在線論壇，每一部分又分幾小部分，內容比較充分，多樣。

再后是收集資料與素材，大量瀏覽相關網站，收集關于婚紗的圖片，進行Photoshop CS3圖片處理和排版，插入好的文章和圖片等，還有參考一些好的網站的布局，特色，顏色搭配，背景圖等。

再后是設計網頁圖片，用flash制作動畫，用Photoshop制作靜態圖片。再后是建立站點，和制作網頁了，使用dreamweaver制作。

首頁內容精彩豐富，首頁主要是導航作用。首頁制作時，時刻考慮著網頁的基本原則：統一，連貫，分割，對比及和諧的原則，內容統一，都是為了主題服務，一個網站強調的就是一個整體，只有圍繞一個統一的目標所做的設計才是成功的；連貫，頁面之間關系連貫，統成一體；每版內容都自成一體，顏色各異，便于瀏覽；整個網頁有動有靜，顏色不同，形成對比，不呆板，富有生氣；顏色各異，但又不同之中又相同，渾然一體。

簡潔實用: 這是非常重要的，網絡特殊環境下，盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的，所以要去掉所有的冗余的東西。使用方便:同第一個是相一致的，滿足使用者的要求，網頁做得越適合使用，就越顯示出其功能美；頁面用色協調，布局符合形式美的要求: 布局有條理，充分利用美的形式，是網頁富有可欣賞性，提高檔次。當然雅俗共賞是人人都追求的。

利用我們所學的模板設計，制作更完美的頁面。將動態網頁與靜態網頁結合起來

再后，調試過程，好多次本來在Deamweaver CS3里好好的，把字調的好好的，位置很對，可在瀏覽器里御覽就出毛病了，不是靠上了，就是靠下了，經過再三調試，整理，加了好多表格，終于滿意了。

通過溫本周的實訓，發現自己還有很多的不足。框架的應用很難把握，切片也很難合理切割，當插入圖片的時候把原有的模板給撐破了，精確定位很重要。

因為學藝不精，所以不會網頁的代碼設計，只能通過網絡三劍客綜合使用。不過也實踐中也學到了很多知識，表格的嵌套是非常重要的，CSS樣式的應用也很便捷。還有一些行為中的效果也是蠻不錯的。所以這次實訓還是很有意義的。

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

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

網頁制作實訓報告

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

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

重慶科創職業學院

《靜態網站建設》 實 訓 報 告

題目：

專業：班級：學號：姓名：成績：指導教師：

完成日期：年月日

目錄

一、課程設計目的....................1

二、課程設計題目描述和要求.....................1

三、課程設計報告內容...................1

3.1總體功能介紹...............................1

3.2總體框架結構設計..............................2

3.3頁面設計.........................2

3.4總體測試與發布...........................2

四、結論......................2

五、結束語.........................3

六、主要參考資料....................3一、課程設計目的本課程是一門計算機科學與技術及相關專業實踐性環節。以HTML和CSS為基礎，全面介紹與網頁設計制作有關的知識，向學生闡明Web基本工作機制，并使學生具有一般網頁制作的能力。與此同時，通過對Web頁制作技術和制作工具的學習，使學生對網頁設計中所涉及的相關知識有一個全面的了解。通過本課程的學習，使學生全面了解網站建設與網頁設計的基本概念、基本理論及業務運作模式，了解網站建設與網頁設計的特點及工作過程，掌握網站的建立及網頁設計制作的方法，能夠完成一般性網站的建設，因此要求利用網頁設計方法，設計一個網站，提高綜合應用所學知識的能力，積累 Web 程序的編程經驗，提高編程與調試能力，培養獨立學習、吸取他人的經驗、探討技術的習慣和團隊協作能力。

二、課程設計題目描述和要求

每個設計人員設計制作利用DIV+CSS網頁布局方法制作的任意類型的網站（主題不限），制作網站所需的相關文字資料、圖片資料等可以到相關類型的網站上進行采集或自行采集。

要求：根據上面指定的網站開發項目內容進行開發設計，網站欄目設置、網站要表達的具體內容和網站的風格根據小組確定的課題進行設計；要求根據網站設計規范和常用網制作頁技術進行設計；設計的網站要求結構合理，版面美觀大方，顏色合理，風格一致，并運用適當的動態網頁技術進行修飾。

三、課程設計報告內容

3.1總體功能介紹

制作該網站的時代背景？該網站主要的功能是什么？可以實現哪些用途？主要使用的技術是什么？利用了哪些語言實現哪些效果……

3.2總體框架結構設計

該網站有多少個模塊？層次關系是什么樣子的？并且可以繪制一個流程圖來進行進一步說明。

3.3頁面設計

3.3.1首頁（頁面、設計思路、主要代碼）

1．進行截圖；

2．對設計思路進行說明。

3．將主要代碼復制粘貼。

3.3.2各子頁（頁面、設計思路、主要代碼）

1．進行截圖；

2．對設計思路進行說明。

3．將主要代碼復制粘貼。

3.4總體測試與發布

使用的測試方法是什么？

測試中遇到的問題以及解決的方法。

四、結論

寫法要求：

1、概括地說明所進行工作的情況和價值，分析其優點和特色，指出創新所在，性能達到何種水平，并應指出其中存在的問題和今后的改進方向，特別是對工作中遇到的重要問題要著重指出，并提出自己的見解。篇幅不宜過長。

2、結論要簡單、明確。在措辭上應嚴密，容易被人領會。應實事求是地介紹自己的工作成果，忌言過其實，在無充分把握時，應留有余地。

五、結束語

要求：在文章結尾處，通常以簡短的文字，對設計過程中自己的收獲，及工作過程中曾給自己以直接幫助的人員，例如指導老師、答疑老師及其他人員，表示自己的謝意。這不僅是一種禮貌，也是對他人勞動的尊重，是治學者應有的品質。

六、主要參考資料

[1]吳東偉等，《網頁設計三劍客》，北京，清華大學出版社，2004年

[2]李宏，張敏，《網頁設計與制作》，北京，化學工業出版社，2006年

[3]李桂杰，《網頁設計與制作》，大連，大連理工大學出版社，2008年

[4]李英俊，《網頁設計與制作》，大連，大連理工大學出版社，2010年

…………………………………………………………………………..(要求:五號字，宋體，1.5倍行距。按作者、書名、出版社、地點、出版時間格式逐一列出，中間用逗號格開)