網站設計報告

1

網頁設計與制作實訓報告

一.實訓意義：

網頁設計與制作綜合實訓是教學過程中重要的實踐性教學環節.它是

根據專業教學計劃的要求.在教師的指導下對學生進行網頁制作專業

技能的訓練,培養學生綜合運用理論知識分析和解決實際問題的能力,

實現由理論知識向操作技能的培養過程.因此加強實踐教學環節,搞好

實訓教學,對實現本專業的培養目標,提高學生的綜合素質有著重要的

作用.

二.實訓目的:

1.通過綜合實訓進一步鞏固,深化和加強學生的理論知識于專業技能。

(1)掌握規劃網站的內容結構,目錄結構,鏈接結構的方法。

(2)熟練掌握網頁制作軟件Dreamweaver8和基本操作和使用技能。

(3)掌握頁面的整體控制和頭部內容設置的方法。

(4)熟練掌握網頁頁面布局的各種方法。

(5)熟練掌握在網頁中輸入,設置標題和正文文字的方法。

(6)熟練掌握在網頁中插入圖像,Flash動畫和背景音樂的方法。

(7)熟練建立各種形式的超級鏈接的方法。

(8)掌握表單網頁制作方法。

(9)掌握網頁特效制作方法。

2

(10)掌握網站測試的方法。

2.訓練和培養學生獲取信息和處理信息的能力,充分培養和提高學生的動手

能力,學會通過網站、書籍、素材光盤等方式收集所需的文字資料、圖像

資料、Flash動畫和網頁特效等。

3.培養學生運用所學的理論知識和技能解決網站開發過程中所遇到的實際問題的

能力及基本工作素質。

4.培養學生理論聯系實際的工作作風,嚴肅認真的科學態度以及獨立工作的

能力,樹立自信心。

網頁設計跟學習別的東西一樣，也需要興趣，所謂的興趣也不是三分鐘熱

度是一種執著。

學習網頁設計需要耐心，如果沒有耐心，就學不好網頁設計，應為當你碰

到一個問題時，如果不能立刻得到問題的答案，你可能需要很長時間去解

決，我就碰到過一個問題，用了很長時間才解決。

學習網頁設計需要堅持，堅持不斷的學習，因為設計網頁的軟件在不斷的

更新，因此我們要不斷的學習并且學習網頁設計不要掉入技術的陷阱，如

果你的網頁設計技術一流，并且對軟件的掌握程度已經達到一定水平，但

是你設計的網頁確不堪目睹，這是因為網頁設計是介于平面設計和編程技

術兩者之間的"邊緣科學."不僅涉及到美學,心理學,平面構成,色彩搭配

等平面設計的方面的知識,還涉及到html,javascript,css,asp,php等編

程語言技術方面的知識.只有綜合運用多種知識,才能設計出視聽特效,動

感十足,富于個性的web頁面,才能全面展現互聯網這一新型媒體的獨特魅

3

力和多維空間的超強功能.并且我認為網頁設計應該注重實用性，因為它

是讓人瀏覽的，是用戶可以撫摸，可以評論，可以交互的。因此我提倡簡

單的美。

三．實驗步驟:

1.網站主題

我的網站的主題在于從各個方面全面的介紹網絡游戲專題,包括每個頁

面都有介紹不同的游戲資料，、心得、圖片等內容。同時，網站里的每一

個網頁都有統一的風格,每一個網頁的主題色彩都是淺藍色，給人帶來一

種溫和舒適的感覺。最重要給瀏覽者好的欣賞感受。

2．網站材料

網站材料主要在網站上搜集所要的網頁信息,包括圖片、文字、相關的

資料。同時,查詢相關的書籍、百度和素材光盤等方式收集所需的文字資

料，圖像資料，Flash動畫和網頁特效等，用以得來更加具有說服力的頁

面。想要做好自己的網站，就要盡量搜集材料，搜集材料越多，以后制作

網站就越容易。精選自己收集的材料，作為自己制作網頁的素材，這樣就

可以做好一個好的網站。

3．網站規劃

我的網站共有6個主頁面：首頁、圖片專區、視頻專區、玩家交流、幫助中心和聯

4

系我們。每一個頁面用統一的背景，以保證網站統一的頁面風格。如下圖：

網站整體色為淺藍色，突出主題，顏色沒有過多，過雜，用以避免給人

一種雜亂的感覺。版面設計十分靈活，根據各部分內容的不同適當的

自由設計。網頁布局主要用框架和表格，用框架定位內容的大體結構，

再用表格具體定位。位置的設計也是重要的一個部分，根據具體內容

決定大體結構，相同的風格調用CSS設計一個樣式，以保證隨時、準

確的調用。另外，為了網頁布局的協調，我加入適當的Flash動態圖

片，用以達到更好的瀏覽效果。

4．網站的制作工具

做網頁時主要使用的是Deamweaver8軟件。另外，為了處理網頁中的其

他元素，還使用了Photoshop、GifAnimator等軟件。

5．制作網站的網頁

素材、風格、模版都設計好以后，下一步就是具體的制作網頁。制作網

站時，首先要做到站點的規劃，建立一個本地站點“TT”，建立的各個

頁面都應該放在本地站點中，在網頁制作時所需的各個元素都進行統

Index

5

一的管理，建立統一的文件夾放同一類型的文件，我在制作時建立了

“images”文件夾存放圖片專用的，網頁中的CSS樣式文件也統一管

理，做到有條理，我設計的網站首頁如下圖：

以導航欄為界，上面插入一個自己制作的Flash動畫，用為給瀏覽者

好的視角享受。Flash動畫制作過程：首先在網上下載下來的背景圖

片，以背景圖片的內容做標題，設計“夢幻西游”四個字為主題突出

網頁游戲效果，還有網頁的網址，加上字體顏色閃動效果，給人帶來

一種夢幻的感覺，中間也插入標語，分別上下字體移動，由淡到實的

顏色閃動效果，在由左右變換顏色彈走，顯得整個Flash動畫比較生

6

動些！

網站導航分別還有圖片專區，視頻專區，玩家交流等！介紹下圖片專

區內容如下：

圖片專區頁面中四副圖片都是上網搜索下來加以PS之后成品的，頁面

要設置好位置，每張圖片大小格式一樣，排整對齊有列序，給人一個

舒適的瀏覽感覺，例如第一張圖片在Photoshop中加以相框的外表顯

得圖片比較生動點！第二張圖片加以光暈濾鏡效果！使圖片明亮清晰，

第三，四張圖片加以修飾亮度暗度光澤等效果，顯得圖片真實動人。

7

跟住到視頻專區頁面介紹如下：

視頻專區頁面比較簡單點，只是自己制作一個簡單的Flash動畫插入

去頁面中間顯示的。制作的過程就是：新建個深藍色的背景，在從左

上角設計夢幻西游這四個字標題，右下角輸入主頁網址格式內容。中

間制作一個IE的圖片加入旋轉一周動態代碼，使IE圖片能自動播放

轉動，中間也插入文字設置為放大縮細感覺和顏色變換。完成后測試

過就直接發布上頁面中排好。還有其他導航都插入相關的資料文字來

完成的，主頁左邊也做好相關內容的資料題目，每個鏈接都有吾同資

8

料內容顯示。每一個標題都好做相關鏈接資料的內容題材。在主頁、

圖片專區、視頻專區這三個頁面都插入吾同的傾聽動人的音樂了。最

后，形成一個統一的整體的，方便給瀏覽者進行了各個頁面間的跳轉

6網頁視覺效果

視覺形象識別即我們通常所說的VI（VisualIdentity），與BI一起用

于深化表現企業理念，同時也受到BI的影響。所謂視覺形象識別，

就是指能夠被目標客戶通過視覺來認知與企業相關的一切事物，從最

基礎的企業標志、吉祥物、標準色到企業日常業務中的信紙、服裝、

名片等等，在將其系統化以后就形成了企業的視覺形象識別系統。

視覺形象識別系統在整套CIS中處于最表層的位置，其中所有的設計

都將與目標客戶發生直接的接觸。

7．上傳測試網站

網頁制作完畢以后，要進行反復的測試，保存后在IE瀏覽器上反復運

行自己的網站，用以發現設計中的缺陷并及時改正。

四.設計特色

我覺得我的網頁設計最大特點就是色彩談雅，布局協調，結構清晰。

給人以清麗，純樸的感覺。另外，設計過程插入大量搜集資料和圖片

等，還加入傾聽動人的音樂。

9

五．心得體會

我通過這次實訓中非常感謝學校給了我這次制作網頁的機會，通過這

次實訓，我學到了很多有價值的東西。我獨立的完成網站設計的全過

程，把設計中散亂的網頁鏈接成框架體系，使平時學到的知識點有了

很高的提高，并且合理的在試驗中進行了實踐。在這次實驗的過程中，

我搜集了大量的素材和網頁設計的技術技巧方面的書，增加知識面，

給我在以后的設計過程中能博采眾長，制作出好的網頁打下了基礎。

最后，我感受最深的是：想要最好一個網站，素材和技能都十分重要。

好的素材需要多放面查找資料的，可以從圖書、網站和新聞上查找的。

好的技能需要不斷的實踐，經常鍛煉做網頁。如果擁有好的素材和精

湛的技能就可以做出最精湛的網頁。

這次學習，在制作時想想使自己的網頁更加豐富多彩，在網頁中插入

圖象，動畫，動態特效。可是總遇到這樣那樣的問題，但在同學的幫

助和自己摸索的情況下完成了這個實習的成果。看到了一些知名的網

站開發出的網頁，不僅欄目內容豐富，信息量大，而且頁面圖文并茂，

五彩繽紛，使得網民贊嘆不已，流連忘返。以我們的經驗，當前的軟

件的功能日趨復雜，不學到一定的深度和廣度是難以在實際工作中應

付自如的。因此反映出學習的還不夠，缺點疏漏。虛在加以刻苦鉆研

及學習，不斷開拓視野，增強自己的實踐操作技能，為以后能做出出

10

色的網頁而努力。

網頁設計實訓將要結束，其中的酸甜苦辣我會在今后的日子里不斷地

去咀嚼，去回味，去探索。從制作網頁過程中，我學到了新的美化網

頁的方法，運用了更多以前未運用的技巧。這使我學到了更多的知識，

并且為我自己在制作網頁這方面積累了一些經驗。這些將是我人生中

的一次重要的經歷，將是我今后走上社會后的一筆巨大的財富。這次

實習的收獲對我來說有不少，我自己感覺在知識、技能等方面都有了

不少的收獲。總體來說這次是對我的綜合素質的培養，鍛煉和提高。