第二篇：網(wǎng)頁實訓報告

日照職業(yè)技術學院

網(wǎng)頁實訓報告

學號：

姓名：

班級：

實訓日期：

指導老師：

X年X 月 X 日

個人博客

一、實訓目的與要求

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

（1）掌握創(chuàng)建Dreamweaver本地站點的方法，利用表格和層規(guī)劃網(wǎng)頁布局

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

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

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

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

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

二、實訓內容

1.準備工作

（1）先想好做什么方面的網(wǎng)站。

（2）根據(jù)自己的需要在網(wǎng)上下載圖片、動畫等相關的素材。

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

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

2.使用的技術

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

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

3.網(wǎng)站的整體布局及介紹

該個人博客使用了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.實現(xiàn)的功能

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

三、調試中出現(xiàn)的問題

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

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

四、實訓心得體會

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

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

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

五、實訓總結

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

第三篇：網(wǎng)頁制作實訓報告

《網(wǎng)站設計與制作》實訓報告

X學院XX班XXX號

一．實訓時間：

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

二．實訓地點：

XXX學院XXX班級

三．實訓組員：

XXX、XXX

四．實訓目標：

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

五．實訓策劃：

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

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

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

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

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

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

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

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

六．實訓心得：

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

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

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

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

再后是設計網(wǎng)頁圖片，用flash制作動畫，用Photoshop制作靜態(tài)圖片。再后是建立站點，和制作網(wǎng)頁了，使用dreamweaver制作。

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

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

利用我們所學的模板設計，制作更完美的頁面。將動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁結合起來

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

通過溫本周的實訓，發(fā)現(xiàn)自己還有很多的不足?？蚣艿膽煤茈y把握，切片也很難合理切割，當插入圖片的時候把原有的模板給撐破了，精確定位很重要。

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

第四篇：網(wǎng)頁設計實訓報告

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

網(wǎng)頁制作實訓報告

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

第五篇：網(wǎng)頁設計實訓報告

重慶科創(chuàng)職業(yè)學院

《靜態(tài)網(wǎng)站建設》 實 訓 報 告

題目：

專業(yè)：班級：學號：姓名：成績：指導教師：

完成日期：年月日

目錄

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

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

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

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

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

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

3.4總體測試與發(fā)布...........................2

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

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

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

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

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

要求：根據(jù)上面指定的網(wǎng)站開發(fā)項目內容進行開發(fā)設計，網(wǎng)站欄目設置、網(wǎng)站要表達的具體內容和網(wǎng)站的風格根據(jù)小組確定的課題進行設計；要求根據(jù)網(wǎng)站設計規(guī)范和常用網(wǎng)制作頁技術進行設計；設計的網(wǎng)站要求結構合理，版面美觀大方，顏色合理，風格一致，并運用適當?shù)膭討B(tài)網(wǎng)頁技術進行修飾。

三、課程設計報告內容

3.1總體功能介紹

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

3.2總體框架結構設計

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

3.3頁面設計

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

1．進行截圖；

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

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

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

1．進行截圖；

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

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

3.4總體測試與發(fā)布

使用的測試方法是什么？

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

四、結論

寫法要求：

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

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

五、結束語

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

六、主要參考資料

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

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

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

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

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