網(wǎng)頁設計實訓報告

福州軟件職業(yè)技術學院

實訓報告

題目：動漫實訓課程名稱：網(wǎng)頁設計系別：計算機系專業(yè)/班級：軟件技術4班年級：201*級學號：09013430姓名：游浠指導老師：黃偉雄

201*年7月9日

目錄

1實訓目的..................................................................................................................................................12實訓內(nèi)容..................................................................................................................................................13方案設計與實施步驟.................................................................................................................................1

3.1方案設計........................................................................................................................................13.2實施步驟........................................................................................................................................24實訓中出現(xiàn)的問題、分析及解決方法........................................................................................................2

4.1問題...............................................................................................................................................24.2分析...............................................................................................................................................24.3解決方案........................................................................................................................................25實訓作品展示...........................................................................................................................................3

5.1首頁...............................................................................................................................................35.2動漫分類頁面.................................................................................................................................35.3動漫介紹頁面.................................................................................................................................46實訓總結(jié)..................................................................................................................................................4

1實訓目的

（1）通過本次實訓完成對所選課題的網(wǎng)頁制作，包括二級頁面和三級頁面，還要應用一些網(wǎng)頁制作的基本技巧。

（2）掌握布局技術，模版應用，CSS樣式，超級鏈接。

（3）通過連續(xù)時間的實際操作，鞏固對網(wǎng)站的創(chuàng)建、網(wǎng)頁的策劃、設計與制作的理解，加深理解網(wǎng)站、網(wǎng)頁、制作的過程，理解團隊互助共同完成項目的協(xié)作精神。

2實訓內(nèi)容

主要包括兩部分內(nèi)容：素材制作和網(wǎng)站設計制作。1．網(wǎng)站主題要求

結(jié)合個人工作需要及興趣愛好，獨立完成主題的選擇。2．網(wǎng)站內(nèi)容要求

網(wǎng)站不少于3層，頁面總數(shù)不少于8個；內(nèi)容和素材避免雷同。3．設計制作要求

a．網(wǎng)站主題鮮明、內(nèi)容豐富、健康、高雅且欄目設置合理。網(wǎng)站中至少有三層，下一層必須有返回上層的按鈕或鏈接。包含10個以上的頁面；

b．網(wǎng)站中頁面色彩搭配合理，界面規(guī)劃合理,設計新穎、簡潔、美觀、大方；c．站內(nèi)頁面整體風格統(tǒng)一并使用CSS進行網(wǎng)頁中文字及鏈接樣式；d．合理使用表格進行頁面排版，導航按鈕及網(wǎng)頁特效使用合理；e．設計有合理的表單；

f．網(wǎng)頁中鏈接及圖片等路徑正確、網(wǎng)頁中文件命名規(guī)范；

g．內(nèi)容由自己充分發(fā)揮，不作任何約束，但網(wǎng)頁的信息量要大（6種內(nèi)容以上），主題鮮明；

h．作品不得抄襲。

3方案設計與實施步驟

3.1方案設計

首頁：把各種內(nèi)容都拿出一部分放在首頁，進行分類排放，這樣能讓瀏覽網(wǎng)站的人，以最快的速度了解這個網(wǎng)站所包涵的大部分內(nèi)容。并且在首頁插入一背景音樂（音樂內(nèi)容與網(wǎng)站主題相關）。使得網(wǎng)頁更加人性化。

其他頁面就是把主頁里面的內(nèi)容分塊，分細。讓有興趣的人能夠更深入的瀏覽到他們所想要的東

西，其中包括:動漫分類，動漫簡介，動漫排行等

在網(wǎng)頁中還設計了一個投票區(qū)，為了更好的建設網(wǎng)站，需要各方面的資料，而這是一個好辦法。

3.2實施步驟

1.找好制作網(wǎng)頁所需要的所有圖片，文字及聲音資料2.在網(wǎng)絡中尋找一個與自己主題類似的網(wǎng)頁，以供與參考3.開始制作網(wǎng)頁

4.把制作好的網(wǎng)頁進行運行和調(diào)試、修改

4實訓中出現(xiàn)的問題、分析及解決方法

4.1問題

1.在別人電腦上運行網(wǎng)頁時，發(fā)現(xiàn)圖片顯示不出來2.背景音樂沒有聲音

3.網(wǎng)頁制作中發(fā)現(xiàn)移動一些內(nèi)容，整體排版都發(fā)生問題

4.2分析

1.發(fā)現(xiàn)鏈接路徑出錯，在運行時采用了絕對路徑2.代碼錯誤

3.一個頁面一個表格，影響很大

4.3解決方案

1.把所有的圖片鏈接，網(wǎng)頁鏈接都改成相對路徑

2.參考書上代碼，發(fā)現(xiàn)代碼沒有寫在里面，著手修改代碼3.把頁面的排版分成多個表格，前后不互相影響

5實訓作品展示

5.1首頁

5.2動漫分類頁面

5.3動漫介紹頁面

6實訓總結(jié)

通過這次的實訓，我了解到制作網(wǎng)頁并非一件簡單、容易的事情。一個好的網(wǎng)頁是必須包涵許多有趣而豐富的內(nèi)容，但又不能因為材料多而顯得網(wǎng)頁雜亂無章。所以對于制作網(wǎng)頁來說，如何排版，如何選材，如何維護都是需要用心設計的。在本次的實訓過程中，我曾經(jīng)碰到了許多問題，但這些問題都在老師和同學的幫助下一一解決了。最后我終于完成了一份比較完善的網(wǎng)站。在這次的實訓中我學習到了許多，也獲得了很多，我明白了學習這門課程的真正意義。也許這次的實訓作品不是最好的，但卻是我最用心的。我相信在將來的學習和生活中，我將更加努力的學習專業(yè)知識，懂得更多的技術，把網(wǎng)頁做的更好！

擴展閱讀：個人網(wǎng)站實訓設計報告

目錄

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

2.1專業(yè)能力目的.........................................................1

2.1.1知識目的.......................................................12.1.2技能目的.......................................................12．2通用能力目的........................................................2三、課程設計要求............................................................2四、課程設計概述............................................................3

4.1系統(tǒng)中使用的硬件環(huán)境和軟件環(huán)境.......................................3

4.1.1硬件環(huán)境.......................................................34.1.2軟件環(huán)境.......................................................34.2對所開發(fā)系統(tǒng)的整體概述..............................................44.3網(wǎng)站整體結(jié)構圖.......................................................4五、課程設計任務............................................................5六、課程設計步驟............................................................6

6.1網(wǎng)站需求分析........................................................66.2網(wǎng)站系統(tǒng)分析........................................................66.3系統(tǒng)開發(fā)環(huán)境介紹....................................................66.4網(wǎng)站總體功能設計....................................................76.5系統(tǒng)各頁面的詳細設計................................................8

6.6網(wǎng)頁調(diào)試9

七、結(jié)論...................................................................11八、結(jié)束語.................................................................12九、參考文獻...............................................................12十、附錄...................................................................12

一、課程設計題目

個人網(wǎng)站設計

二、課程設計目的

2.1專業(yè)能力目的2.1.1知識目的

網(wǎng)頁設計與制作綜合實訓是教學過程中重要的環(huán)節(jié)。它是根據(jù)職業(yè)崗位的需求，在老

師指導下對學生進行的網(wǎng)頁制作專業(yè)技能的訓練，培養(yǎng)學生綜合運用知識分析和解決實際問題的能力，是對我們綜合分析能力與獨立工作能力的培養(yǎng)過程。因此，加強實踐教學環(huán)節(jié)，搞好實訓教學，對實現(xiàn)本專業(yè)的培養(yǎng)目標，提高學生的綜合素有著重要的作用。我們讀書就是為了獲得知識，現(xiàn)在我們學習了網(wǎng)頁設計，當然就是要能做一個精美的網(wǎng)頁。在此次網(wǎng)頁設計中，我們要能更加的了解Dreameaver強大的功能和更好的使用它。通過此次設計我們還要能夠知道靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)也的區(qū)別。誠然，次此設計的個人網(wǎng)頁，一方面是為了完成我們的考試，但更重要的是把我們所學到的東西用在具體的實踐之中，所以，這次設計的目的也是要我們更好的掌握和使用好和html的核心工具和技術，以便提高對網(wǎng)頁知識的更深層了解。第三點也是最要的一點是，把我們在書本上學到的知識充分運用到此次設計之中。使我們的在書上學到的東西不僅僅停留在表面上，把這些東西都用在所要做的網(wǎng)頁上面。以達到老師要求的效果和學以致用。2.1.2技能目的

（1）掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構、目錄結(jié)構、鏈接結(jié)構的方法。（2）熟練掌握網(wǎng)頁制作軟件Dreamweaver8的基本操作和使用技能。（3）掌握頁面的整體控制和頭部內(nèi)容設置的方法。（4）熟練掌握網(wǎng)頁頁面布局的各種方法。

（5）熟練掌握在網(wǎng)頁中輸入、設置標題和正文文字的方法。（6）熟練掌握在網(wǎng)頁中插入圖像、flash動畫、背景音樂的方法。（7）掌握建立各種形式超級鏈接的方法。（8）掌握表單網(wǎng)頁制作方法。（9）掌握網(wǎng)頁特效的制作方法。

（10）掌握網(wǎng)站測試的方法。

2．2通用能力目

這是對自己在一學期內(nèi)該學習科目以來的成果的檢查，這是一個自我審視的過程：檢測我該學期的學習成果，衡量一期以來的收獲，更為重要的是揚長避短，發(fā)現(xiàn)自己的問題與缺點，使自己及時改正，發(fā)覺自身的優(yōu)點和長處并堅持發(fā)揚，有利于我以后的學習和發(fā)展。這不僅是為了肩負學生的責任而去完成老師交給我的任務，更是對過去學習的知識的溫習鞏固，是一個把理論轉(zhuǎn)化為實踐的過程，是一個把自己的設計思想轉(zhuǎn)化為實物的過程，是一個發(fā)揮自己創(chuàng)造力和想象力的過程。根據(jù)老師的要求及指導，我設計了此網(wǎng)站，本網(wǎng)站屬于小型個人網(wǎng)站，目的在于簡單的介紹一下個人狀況，可以使老師和同學們更進一步的了解我現(xiàn)在以及部分過去的情況，加強老師和同學們對我的認識，深化我們大家的情誼，有利于以后在學習、工作生活當中的團結(jié)協(xié)作。

三、課程設計要求

課程設計的要求體現(xiàn)于整個工作的各個階段中，可根據(jù)課題的特點而有所側(cè)重，但應達到如下的基本要求：

（1）在規(guī)定時間完成課程設計任務書中的全部任務。

（2）通過課程設計，要求學生在指導教師的指導下，獨立完成設計課題的全部內(nèi)容。（3）通過對所選課題的分析，有針對性的進行調(diào)查研究，學會收集、整理相關資料等。（4）完成網(wǎng)站模塊或功能的設計，由于在課程教學中本課程以靜態(tài)網(wǎng)頁為主，所以對網(wǎng)站設計過程中對后臺的設計可以適當簡單一點。

（5）網(wǎng)站界面盡量美觀、大方。實訓內(nèi)容里要求的必須要全面實現(xiàn)。（6）進行具體的設計，并調(diào)試運行。

（7）設計報告要做到文字通暢、論點正確、論述有據(jù)。

（8）課程設計報告、作品刻成光盤和以書面打印形式的報告交給指導教師。2．注意事項

（1）嚴格遵守校紀校規(guī)。課程設計期間不得無故缺勤，無故缺勤達1/3以上者，成績?yōu)椴患案瘛?/p>

（2）實訓期間的非上機時間，學生應在教室進行上機前準備工作，收集網(wǎng)頁設計與制作相關的各項知識。

（3）實訓過程中，首先由老師布置實訓的任務，分析實訓的目的和要求，學生進行網(wǎng)站

建設各項知識的討論，并獨立完成網(wǎng)站建設的各項任務。

（4）實訓過程中，老師在學生詢問和實際調(diào)試操作中，對學生以客觀的評估，給出平時成績，同時督促差生提高網(wǎng)站建設的操作能力。

（5）實訓最后進行一次網(wǎng)站評比，以檢查學生實訓成果。

（6）不準無故曠課、遲到、早退；若有特殊情況，需事先請假，征求許可。（7）在實訓期間遵守機房的各項規(guī)章制度。

四、課程設計概述

4.1系統(tǒng)中使用的硬件環(huán)境和軟件環(huán)境4.1.1硬件環(huán)境

(1)主機上要求安裝有dreamweaver或photoshop等軟件。

(2)主機能與互聯(lián)網(wǎng)相連、以便學生能夠瀏覽優(yōu)秀網(wǎng)站，搜集相關材料等。

(3)開發(fā)本系統(tǒng)使用的計算幾配置為CPU：Core2_1.66Ghz；內(nèi)存：1Gb；硬盤：80b；顯卡：GeForce7400_128Gb。經(jīng)實際測試本程序運行是只占用1008Kb內(nèi)存容量，基本上適用于絕大多數(shù)計算機，外部設備只需要標準輸入輸出設備。4.1.2軟件環(huán)境

（1）.Dreamweaver將“設計”和“代碼”編輯器集成在一起，既可以方便的進行源代碼編輯，也可以使用鼠標方式添加和設置對象。

（2）.Dreamweaver是一種所見即所得的網(wǎng)頁編輯器，既有效的減少了代碼編寫的工作量，也確保所設計文檔的專業(yè)性和兼容性。

（3）.CSS樣式可以有效的控制網(wǎng)頁對象的外觀，美化網(wǎng)頁界面，如文本字體，顏色，表單樣式、圖像風格等。Dreamweaver中有強大的CSS樣式表編輯器，可以比較輕松的編輯CSS樣式。

（4）.Dreamweaver提供了強大的站點管理功能，可以安全，系統(tǒng)的維護和管理各種規(guī)模的網(wǎng)站。

（5）.Dreamweaver與Fireworks，F(xiàn)lash，Shockwave具有良好的集成性，可以在這些Web創(chuàng)作工具之間自由的進行切換。

（6）.在Dreamweaver文檔中，可以靈活加入JAVA，F(xiàn)lash，Shockwave，ActiveX以及其他媒體元素，也可以對各種多媒體元素進行處理。

（7）.Dreamweaver可以實現(xiàn)功能的擴展。利用Adobe公司免費提供的

Dreamweaver插件，可以豐富Dreamweaver的媒體處理能力。4.2對所開發(fā)系統(tǒng)的整體概述

第一個為插入圖象的按鈕，點擊后，會彈出對話框，標準對話框，選擇想要的圖

象就行了。

第二個（橫向走）為插入輪替圖象，它彈出的對話框會讓選擇兩副圖，以及鼠標點擊時的連接等。作好后，用鼠標移動到圖象上面，圖象就會變成另外的一副圖象，點擊它，就會連接到另外一個頁面上去。

第三個為表格，點擊后，在彈出的對話框中，添入想要的行數(shù)和列數(shù)以及表格邊距顏色等。

第四個為插入表格式數(shù)據(jù)，可以將以前作成的表格形狀的數(shù)據(jù)表，直接插入到網(wǎng)頁中來，而不用做任何的修改。

第五個按鈕為插入水平線按鈕，插入后，在屬性浮動面板上改改它的大小等。第六個為導航條，和第二個差不多，也可以換圖象，不過，比起第二個要復雜的多，但絕對簡單。

第七個為插入層，這好象是Dreamweaver特有的特性，其他的網(wǎng)頁編輯軟件中都沒有這項功能。插入的層可以位于頁面的任何位置。拖動就行。

第八個為插入換行符，有時網(wǎng)頁中的文字想讓它換行，按回車又太大，用換行符就是一種不錯的選擇。

第九個為插入Email，將聯(lián)系用的Email插入網(wǎng)頁中，只要填上Email地址就行。

第十個為插入日期，很簡單，沒有什么好說的。

第十一個為插入Flash按鈕，F(xiàn)lash是現(xiàn)在網(wǎng)頁中新興的一種多媒體，有動畫，有聲音，但文件很小，極適合在網(wǎng)上傳播。

第十二個為插入Shockwave按鈕，做好了的Shockwave直接就可以插到這兒來。

第十三個為插入制作人，親自制作的東西不想留名嗎？點它就行。

第十四為插入Firework按鈕，F(xiàn)irework是Macromedia公司的又一個產(chǎn)品，具有制作動畫圖象等動態(tài)功能。也是專門為網(wǎng)頁制作設計的。第十五為插入Java語言編寫的Applet小程序按鈕。第十六為插入ActiveX控件用的按鈕。

第十七為插入插件用的按鈕，這兒可以插入別的插件，上面未包括的。第十八未插入服務器端接口聯(lián)系的按鈕。4.3系統(tǒng)整體結(jié)構圖

數(shù)據(jù)流程圖能夠很好的反應系統(tǒng)和模板的邏輯功能，但不涉及具體的模板物理結(jié)構和

實現(xiàn)途徑，不能有效地體現(xiàn)整個系統(tǒng)的層次關系。HIPO圖可以從系統(tǒng)的整體出發(fā)，明確系統(tǒng)的層次之間的關系和模板之間的關系。

五、課程設計任務

所創(chuàng)建的網(wǎng)站至少包括6個頁面，分為三層，第一層為首頁，第二層為二級子頁，第三層為內(nèi)容頁。

（1）首頁采用表格進行布局，必須包含導航欄；（2）二級子頁可利用模板、表格制作；

（3）三級子頁可利用框架（最好是浮動框架）制作。（4）各個頁面根據(jù)需要插入合適的圖像和Falsh動畫。

（5）所有頁面要求內(nèi)容充實、布局合理、顏色搭配協(xié)調(diào)、美觀大方。（6）各個頁面之間導航清晰、鏈接準確無誤。

六、課程設計步驟

6.1網(wǎng)站需求分析

隨著互聯(lián)網(wǎng)的高速發(fā)展和Web.2.0時代的到來，愈來愈多的網(wǎng)站如雨后春筍般又出來。

根據(jù)中國互聯(lián)網(wǎng)信息中心發(fā)表的權威報告顯示，截止11年6月底，我國網(wǎng)站數(shù)達到287.8萬個。網(wǎng)站數(shù)量的劇增，導致競爭的加劇。于是愈來愈多的，尤其是個人，開始對網(wǎng)站的發(fā)展前景表示擔憂。甚至有人斷言，個人網(wǎng)站的時代已經(jīng)過去。需求分析最根本的任務是確定“為了滿足客戶的需要”。具體的說，應該確定系統(tǒng)必須具有功能和性能，系統(tǒng)要求的運行環(huán)境，并且預測系統(tǒng)發(fā)展的前景。必須仔細分析系統(tǒng)中的資料，既要分析系統(tǒng)中的數(shù)據(jù)流，又要分析長期使用的資料儲存。該階段不是確定系統(tǒng)怎樣完成它的工作，而僅僅是確定系統(tǒng)必須完成哪些工作，也就是對目標系統(tǒng)提出完整、準確、清晰、具體的要求。

通常情況下，個人網(wǎng)站主要是為了通過互聯(lián)網(wǎng)達到個人在商業(yè)、科技、交往、生活等發(fā)面的信息需求或者進行信息的交流，具體較強的目的性，我的個人網(wǎng)站一般體現(xiàn)在；為了展示自己的風采，讓大家和我分享我的心得與經(jīng)驗，讓和我有共同愛好的朋友有一個傾訴的地方。

6.2網(wǎng)站的系統(tǒng)分析

隨著網(wǎng)民的日益增長，建立個人網(wǎng)站，不但可以剛好的展示自己，而且可以提高自己在計算機應用方面的能力。故本次作業(yè)，我選擇制作個人網(wǎng)站。

本頁面主要介紹我的個人概況，個人背景，為了使大家更好的了解我，并使用本網(wǎng)站更豐富多彩，所有對我的業(yè)余愛好進行了相關的鏈接。在我的個人的網(wǎng)站了，可以更加了解到我。

根據(jù)前面的設計思想進行分析，按照系統(tǒng)開發(fā)的基本觀點對網(wǎng)站進行分解，從內(nèi)容上可對網(wǎng)站作如下劃分：

個人介紹通過個人資料、個人愛好及部分圖片等內(nèi)容來展現(xiàn)。優(yōu)點特色通過新聞、生動活潑的個人欄目來展現(xiàn)。

信息發(fā)布通過公告欄來實現(xiàn)，內(nèi)容有個人資料、興趣愛好，收集與制作的。

在網(wǎng)頁制作中，我借鑒了韓國個人網(wǎng)站的設計風格，著重于給瀏覽者以強烈的視覺沖擊。運用了photoshop強大的圖像制作和處理能力。進行了大量的圖片制作，從而給人以強大的時代動感。整個網(wǎng)站的架構是由Dreamwaver完成的。6.3系統(tǒng)開發(fā)環(huán)境介紹

隨著軟件業(yè)尤其是繪圖的應有軟件及其網(wǎng)頁設計的軟件的不斷變化升級，使用起來愈來

愈方便。打個比方：原來的網(wǎng)頁全是如同文本編輯一樣，圖片的定位就相當困難，往往要求助于表格加表格，表格里插表格，這就需要熟練掌握表格的應用。而且還很難達到目標，有時不得不更改一些自己的目標。這有時是牽一發(fā)而動全身的。現(xiàn)在呢？在Dreamweaver出現(xiàn)后，采用了高級的Dhtml技術以層的形式和定位功能將這問題輕松的解決了。

網(wǎng)站設計是一門新興的邊緣性職業(yè)，如今全球信息技術和互聯(lián)網(wǎng)經(jīng)濟的高速發(fā)展，使網(wǎng)站設計同其他諸如動畫設計，程序開發(fā)，電子商務等等一系列職業(yè)一樣應運而生。網(wǎng)站如同一個門門面，從個人主頁，公司企業(yè)，政府部門以致國際組織等等，無不將網(wǎng)站作為

自己向外界展示形象，傳達信息的窗口。

個人網(wǎng)站致力于廣大用戶提供優(yōu)質(zhì)的交流平臺，提高網(wǎng)站的知名度和訪問量，從而獲得為個人網(wǎng)站提供更多展示的機會提升自己網(wǎng)站的價值。為了滿足網(wǎng)站信息管理系統(tǒng)的要求，實現(xiàn)系統(tǒng)靜態(tài)與動態(tài)頁面的相互分離。

6.4網(wǎng)站總體功能設計

要領一：確定網(wǎng)站主題

做網(wǎng)站，首先必須要解決的就是網(wǎng)站內(nèi)容問題，即確定網(wǎng)站的主題。美國《個人電腦》雜志(PCMagazine)評出了99年度排名前100位的全美知名網(wǎng)站的十類題材：第1類：網(wǎng)上求職；第2類：網(wǎng)上聊天/即時信息/ICQ；第3類：網(wǎng)上社區(qū)/討論/郵件列表；第4類：計算機技術；第5類：網(wǎng)頁/網(wǎng)站開發(fā)；第6類：娛樂網(wǎng)站；第7類：旅行；第8類：參考/資訊；第9類：家庭/教育；第10類：生活/時尚。我們可以參看上面的分類，繼續(xù)細分。如果自己在某些方面有興趣，或掌握的資料較多，也可以做一個自己感興趣的東西，一者，你可以有自己的見解，做出自己的特色；二者，在制作網(wǎng)站時不會覺得無聊或者力不從心。興趣是制作網(wǎng)站的動力，沒有創(chuàng)作熱情，很難設計制作出優(yōu)秀的作品。

對于內(nèi)容主題的選擇，要做到小而精，主題定位要小，內(nèi)容要精。不要去試圖制作一個包羅萬象的站點，這往往會失去網(wǎng)站的特色，也會帶來高強度的勞動，給網(wǎng)站的及時更新帶來困難。記�。涸诨ヂ�(lián)網(wǎng)上只有第一，沒有第二！

要領二：選擇好域名

域名是網(wǎng)站在互聯(lián)網(wǎng)上的名字。一個非產(chǎn)品推銷的純信息服務網(wǎng)站，其所有建設的價值，都凝結(jié)在其網(wǎng)站域名之上。失去這個域名，所有前期工作就將柯淇鍘?br>

目前，做個人網(wǎng)站的很多都依賴免費個人空間，其域名也是依賴免費域名指向，如網(wǎng)易的虛擬域名服務，其實這對個人網(wǎng)站的推廣與發(fā)展很為不利，不光是它“適時”開啟的窗口妨礙了瀏覽者的視線和好感，讓人一看就知道是個人網(wǎng)站，而且也妨礙了網(wǎng)頁的傳輸速度。所以，就我個人觀點來說，首先花點錢去注冊一個域名，獨立的域名就是個人網(wǎng)站的第一筆財富，要把域名起得形象、簡單、易記。

要領三：確定網(wǎng)站界面

構建一個網(wǎng)站就好比寫一篇論文，首先要列出題綱，才能主題明確、層次清晰。網(wǎng)站建設初學者，最容易犯的錯誤就是：確定題材后立刻開始制作，沒有進行合理規(guī)劃。從而導致網(wǎng)站結(jié)構不清晰，目錄龐雜混亂，板塊編排混亂等。結(jié)果不但瀏覽者看得糊里糊涂，制作者自己在擴充和維護網(wǎng)站也相當困難。所以，我們在動手制作網(wǎng)頁前，一定要考慮好欄目和板塊的編排問題。

網(wǎng)站的題材確定后，就要將收集到的資料內(nèi)容作一個合理的編排。比如，將一些最吸引人的內(nèi)容放在最突出的位置或者在版面分布上占優(yōu)勢地位。欄目的實質(zhì)是一個網(wǎng)站的大綱索引，索引應該將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。在欄目編排時需要注意的是：

盡可能刪除那些與主題無關的欄目；

盡可能將網(wǎng)站內(nèi)最有價值的內(nèi)容列在欄目上；

盡可能從訪問者角度來編排欄目以方便訪問者的瀏覽和查詢；輔助內(nèi)容，如站點簡介、版權信息、個人信息等大可不必放在主欄目里，以免沖淡主題。6.5網(wǎng)站各頁面的詳細設計

（1）創(chuàng)建站點

要制作一個網(wǎng)站，第一步操作都是一樣的，就是要創(chuàng)造一個“站點”，這樣可以使整個網(wǎng)站的脈絡結(jié)構清晰地展現(xiàn)在面前，避免了以后再進行復雜的管理。（2）創(chuàng)建站點內(nèi)容

站點創(chuàng)建完成后，就可以創(chuàng)建Web頁來填充站點了。在“右側(cè)浮動面板組”中選擇“文件/文件”面板，此時整個網(wǎng)站中沒有任何內(nèi)容。用鼠標右面板中的本地目錄文件夾。在彈出的菜單中選擇“新建文件”，新建的一個文件后將其命名為“index.html”，它就是未來的首頁。

（3）設置首頁布局

每個網(wǎng)站都會有一個首頁，就功能上而言，它代表著一個網(wǎng)站的風格與特色，就網(wǎng)站架構上而言，它代表了網(wǎng)站的第一層架構，至于網(wǎng)站上其他Web也，原則上都必須通過首頁來鏈接散播出去，可見首頁的重要性。

首頁的布局有很多方法，在這里我所用到的是表格的“布局模式”�！安季帧蹦Ｊ街械谋砀穹Q為布局表格，單元格稱為布局單元格。在繪制布局表格和布局單元格時，必須從“標準”模式切換到“布局”模式。直接單擊“布局”按鈕即可。

（4）設置首頁的頁面屬性

首先雙擊“文件”浮動面板中的index.html進入頁面的編輯窗口。右擊空白區(qū)域，在菜單中選擇“頁面屬性”，之后彈出“頁面屬性”對話框，若選擇主菜單“修改/頁面屬性”項，也可以把打開該對話框。

在“頁面屬性”對話框中，左擊窗口顯示“分類”，其中包括了“外觀”、“鏈接”、“標題”、“標題/編碼”�！案�蹤圖像”5項，右側(cè)區(qū)域則顯示各類中可以設置的項目。（5）插入圖像

圖像是網(wǎng)頁中不可或缺的組成成分，恰當?shù)氖褂脠D像，可以使網(wǎng)站充滿生命力和說服力，吸引更多的瀏覽者，加深他們欣賞你網(wǎng)站的意愿。

步驟：首先將光標停留在要插入圖像的位置，然后單擊“菜單欄”下面“插入快捷欄”的下拉菜單，選擇其中的常用類，則右側(cè)將會顯示該類中可以插入的對象快捷鍵。左起第5個即為“圖像：圖像”按鈕，單擊它右側(cè)的下拉列表，選擇第1項“圖像”。（6）插入多媒體

在Dreamweaver中，除了之前說到的可以插入“圖像”外，還可以插入動畫、音頻、視頻等媒體元素。

步驟：將光標停留在要插入的位置，然后單擊菜單欄下面“插入快捷欄”的下拉列表，選擇其中的“常用”分類，右側(cè)將會顯示該類中可以插入的對象快捷按鈕。左起第6個即為“媒體”按鈕，單擊它右側(cè)的下拉列表，進行選擇。（7）插入文本

文字是人類語言最基本的表達方式，在網(wǎng)頁中，文本內(nèi)容也可以說是重要的組成部分，一個網(wǎng)站成功與否，它最關鍵的因素。可豐富網(wǎng)站的文字內(nèi)容，并以最最美觀、最整齊的方式放入到網(wǎng)頁中。

步驟：在網(wǎng)頁編輯窗口中直接用鍵盤敲入文本。這可以算是最基本的輸入方式了，和一些文本編輯軟件的使用方法一樣，選好習慣的輸入法，就可以運指如飛了。(8)創(chuàng)建其它網(wǎng)頁

還有其它的幾個網(wǎng)站與主頁的制作相同，一個網(wǎng)頁是圖像和文字的組合。

“平面設計”中的圖像插入和前面的介紹相似，并可以在屬性欄中調(diào)整圖像的大小。（9）建立網(wǎng)頁鏈接

網(wǎng)站實際上是由很多網(wǎng)頁組成的，在網(wǎng)頁之間是用網(wǎng)頁鏈接來完成的。

“鏈接”，又稱“超鏈接”，它作為網(wǎng)頁的橋梁，起著相當重要的作用。網(wǎng)頁中的很多對象都可以加入鏈接屬性。“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“錨點連接”、“文件下載鏈接”、“跳轉(zhuǎn)菜單”等等。

6.6網(wǎng)頁調(diào)試

調(diào)試網(wǎng)頁編輯軟件dreamweaver是一個既見既所得的軟件，一般情況下是我們在編輯器里看到的頁面和在瀏覽器里看到的頁應沒多大的區(qū)別，如果我們采用了服務器技術的話，在本地瀏覽器是不能調(diào)試的，必須上傳到服務器高調(diào)試。所以調(diào)試的方式一般有兩種如果是靜態(tài)頁面的話就在本機調(diào)試，如果采用了服務器技術就上傳到服務器調(diào)試。

（1）首先在winxp下安裝IIS6

（2）安裝完成IIS后。對IIS的默認網(wǎng)點進行配置。將默認路徑指向網(wǎng)頁文件所在的目錄。

（3）打開瀏覽器，輸入地址http：//127.0.0.1/index.htlm。完成調(diào)試。

上傳這個制作網(wǎng)站的最后一步，如果全部制作完成，調(diào)試成功的話就可以上傳到服務器了，上傳時要用到一種FTP上傳軟件，常用的有l(wèi)eapftp，如果是申請的空間，服務商會給你提供主機名，用戶名和密碼，依次填入。如果不會使用可以查閱相關資料。

七、結(jié)論

不知不覺網(wǎng)頁設計的課程將要結(jié)束了，這門課程所包含內(nèi)容的豐富是讓我從沒有想到的。在整個的學習過程中，我學習了Dreamwave、photoshop、Html語言、IIS、網(wǎng)站建設的基本思想等重要內(nèi)容。到現(xiàn)在為止，我還是很慶幸能夠?qū)W到這么多的內(nèi)容。

整個網(wǎng)站的制作是我一個人完成的。雖然整個網(wǎng)頁的結(jié)構還有很多不足，還有一些板塊沒有開通，但是我的確能夠感到在我制作過程中技能的提高。整個網(wǎng)站的不足我想是沒有使用到一些動態(tài)網(wǎng)頁的知識，使得日后網(wǎng)站的維護較為繁雜。希望明年可以選到動態(tài)網(wǎng)站的課程，從而彌補自己在動態(tài)網(wǎng)絡語言方面的不足。

通過這次設計，我發(fā)現(xiàn)一個很普遍的問題：我們往往是眼高手低，學習這些知識時覺得它就是小菜一樁，但現(xiàn)在真的驗證了“看花容易繡花難”這句話，當我們著手實踐時就不像我們想象中的那么簡單了，每一個細節(jié)都需要注意，稍有不慎頁面就在預覽中變了樣，因此更需要我們細心和耐心地去完成，也就兩個字概括認真，只有認真對待才會從骨子里學到東西，才學到心里去了。

我覺得這次確實是很有意義的一次檢測，本來自我感覺良好的，結(jié)果實戰(zhàn)時還是存在很多問題的，平時學起來覺得很輕松就以為掌握了所學知識，但現(xiàn)在都忘記很多細節(jié)是怎么樣的了，因此開始著手時有些障礙，但我下定決心把以前的實驗內(nèi)容都溫習一遍，遇到不懂的就及時查資料，比如翻閱資料書，百度，也可以請教同學，一起討論，相互學習，于是最后也如魚得水，水到渠成，因此得到一個非常重要的結(jié)論只要自己想學只要自己有那份執(zhí)著與毅力，虛心的請教，勤于查閱相關資料就一定會有收獲的，真的當今沒有什么知識是用不著的，在哪，哪里都是知識，只要自己持有高度的學習熱忱。當然，我們在學習過程中一定要及時鞏固、練習，掌握了也不一定熟悉，熟能生巧��！我們應該吸取這個教訓，否則即使我們最終達到了目的，但我們走了很多彎路，而不是事半功倍的結(jié)果了。不過最終，經(jīng)過長久的堅持與不斷的琢磨，看到了自己辛苦后的成果，盡管這還有很多不足，但看著它我心里充滿著喜悅，一分耕耘一分收獲，這永遠是真理。

八、結(jié)束語

本設計實現(xiàn)了網(wǎng)上方便、快捷的一個個人網(wǎng)站，讓別人在網(wǎng)上能夠更好了解到我，了解

到我的學習和生活的環(huán)境，我用的主要工具是Dreamweaver（網(wǎng)頁制作），還熟練運用了Html語言，把語言編寫的腳本到嵌入到html代碼中，實現(xiàn)了強大功能。本網(wǎng)站上我簡單介紹了本人的基本情況和學習背景，還有本人的一些個人作品，網(wǎng)站要做到新穎，不是看網(wǎng)站上有多少內(nèi)容，而是要看制作網(wǎng)站的方法和后臺處理方法上。本設計業(yè)基本是從這幾方面入手，并能簡單的實現(xiàn)許多動態(tài)畫面。

這次網(wǎng)頁設計實戰(zhàn)篇個人網(wǎng)站設計完成后，我收獲了很多，感觸也很深。

我最大的感受就是理論不用于實踐終究是理論，說得難聽點那根本就是紙上談兵，止于理論的學習，將來是沒多少成績的，有前途發(fā)展的話也必將是少了更為之錦上添花的一筆。

當然也深刻認識了一點，那就是我們所學的知識雖說是很基礎很根本，但沒有根基怎么能建好別墅呢?所以說基礎知識是很重要的，我們在學習過程中不能小看而去忽略它，它是一筆財富，能引導我們看得更遠飛得更高。

完成自己的作品后我也觀賞了其他同學的作品，對比起來，各有千秋，當然能從其中發(fā)現(xiàn)很多值得我去學習的地方，比如說有的頁面布局很好，有的頁面內(nèi)容很充實，看起來很有感覺，也可以稱之為網(wǎng)站了，而我的有些頁面看上去，可能使別人不會產(chǎn)生網(wǎng)站這一個概念，反而會覺得像是PPT演示文稿，這也反映了我的一個問題：心中還沒很清楚領悟建立網(wǎng)站的基本要點，還應該加強這方面的知識儲備。另外我也發(fā)現(xiàn)有的同學的頁面設計插入了太多圖片或者太多浮動的東西，弄得網(wǎng)頁太雜，沒有一定的風格，更談不上凸顯主題了從對比中，我學到了很多，能讓我揚長避短，吸取他人之精華，去除他人之糟粕。

這次作業(yè)對于我來說不是一項任務而是一種享受，因為我發(fā)現(xiàn)我越來越喜歡它，不管別人說做這件事做到多晚做得有多累，我都沒覺得，甚至還越做越興奮。對于一個女生來說，特別是對于一個對電腦不感興趣的女生來說，我覺得這是我最大的收獲，我找到了我的興趣、我的老師，我在計算機專業(yè)中找到了方向。真的很感謝老師能給我們這次機會，當然也發(fā)現(xiàn)有很多同學跟我一樣喜歡上了它，在這方面也做得比較好，于是我也有一種緊迫感，畢竟現(xiàn)在競爭壓力很大，“適者生存，弱者淘汰”是亙古不變的自然法則，我想我應該更加努力，抓住機會把它學通學精

九、參考文獻

（1）何翠平著HTML從入門到精通[M]電子工業(yè)出版社

（2）邱郁惠著精通CSS與HMTL設計模式[M]人民郵電出版社（3）（美）桑德斯（Sounders，S）著高性能網(wǎng)站建設指南[M]電子工業(yè)出版社（4）徐磊著網(wǎng)頁制作與網(wǎng)站建設指南[M]清華大學出版社

（5）吳濤主編，網(wǎng)站全程設計技術（修訂本），北京：清華大學出版社；北京交通大學出版社

（6）張華、賈志娟主編，asp項目開發(fā)實踐，中國鐵道出版社（7）沈大林主編，中文Flash8案例教程，中國鐵道出版社（8）任學文、范嚴編,網(wǎng)頁設計與制作，中國科學技術出版社（9）武創(chuàng)、王惠主編,網(wǎng)頁設計探索之旅,電子工業(yè)出版社

（10）杜巧玲等編,網(wǎng)頁設計超級夢幻組合,清華大學出版社（11）吳黎兵、羅云芳編，網(wǎng)頁設計教程，武漢大學出版社

（12）張軍、王佩楷主編，ASP動態(tài)網(wǎng)站設計經(jīng)典案例，機械工業(yè)出版社

（13）http：//,太平洋電腦網(wǎng)（14）,源碼之家

課程設計心得與體會

通過這次個人網(wǎng)頁的制作，我對計算機有了更深層次得到了解，也有了更濃厚的興趣。

尤其是對網(wǎng)頁制作的過程與一些技巧手法更有了另外一番了解，對網(wǎng)頁制作的基礎知識也有了一定的掌握。通過把自己的網(wǎng)頁上傳到互聯(lián)網(wǎng)上，對文件的保存、上傳、下載以及修改等知識有了更牢靠的掌握。通過自己的努力完成了自己上傳到網(wǎng)上的第一個作品，那種成就感是無法用語言形容的。所以我覺得這次制作網(wǎng)頁我已經(jīng)達到了自己的目的，而不是單單為了完成作業(yè)而已。這是一個完全關于自己的個人網(wǎng)頁，既然是介紹自己，就應該讓觀者在瀏覽了之后了解自己其人，我覺得這點我已經(jīng)基本上做到了。關鍵字頁面設計ASP和數(shù)據(jù)庫

1.一般來說，個人主頁的選材要小而精。如果你想制作一個包羅萬象的站點，把所有您認為精彩的東西都放在上面，那么往往會事與愿違，給人的感覺是沒有主題，沒有特色，樣樣有卻樣樣都很膚淺，因為您不可能有那么多的精力去維護它。注意：網(wǎng)頁的最大特點就是更新快。目前最受歡迎的個人主頁都是天天更新甚至幾小時更新一次。

2.題材最好是你自己擅長或者喜愛的內(nèi)容。比如：您對詩歌感興趣，可以放置自己的詩詞；對足球感興趣，可以報道最新的球場戰(zhàn)況等等。這樣在制作時，才不會覺得無聊或者力不從心。

3.不要太濫或者目標太高。“太濫”是指到處可見，人人都有的題材；“目標太高”是指在這一題材上已經(jīng)有非常優(yōu)秀，知名度很高的站點，你要超過它是很困難的。

選定了一個好的題材，是不是可以立刻動手制作了？不，經(jīng)驗告訴我們，必須要先規(guī)劃框架。這是很重要的一步！每個網(wǎng)站都是一項龐大的工程。好比造高樓，沒有設計圖紙，規(guī)劃好結(jié)構，盲目的建造，結(jié)果往往是倒塌；也好比寫文章，構思好提綱，才不至于邏輯混亂，虎頭蛇尾。全面仔細規(guī)劃架構好自己網(wǎng)站，不要急于求成。

規(guī)劃一個網(wǎng)站，可以用樹狀結(jié)構先把每個頁面的內(nèi)容大綱列出來，尤其當你要制作一個很大的網(wǎng)站(有很多頁面)的時候，特別需要把這個架構規(guī)劃好，也要考慮到以后可能的擴充性，免得做好以后又要一改再改整個網(wǎng)站的架構，十分累人，也十分費錢。

大綱列出來后，你還必須考慮每個頁面之間的鏈接關系。是星形，樹形，或是網(wǎng)形鏈接。這也是判別一個網(wǎng)站優(yōu)劣的重要標志。鏈接混亂，層次不清的站點會造成瀏覽困難，影響內(nèi)容的發(fā)揮。

為了提高瀏覽效率，方便資料的尋找，本站的框架基本采用“蒲公英”式，即所有的主要鏈接都在首頁上，鏈接的層次不多，深度淺。

框架定下來了，然后開始一步一步有條理，有次序地做來，就胸有成竹得多，也為你的主頁將來發(fā)展打下良好的基礎。

下一步，你可以動手制作具體內(nèi)容了，我將告訴你一些收集資料的竅門。題材選定，框架選定，接下來就開始往主頁里面填內(nèi)容。我們稱作資料收集

就個人主頁而言，很少有人有能力完全靠自己來創(chuàng)作所有的內(nèi)容。（一些高手能夠提供自己編的軟件，文章或則音樂，是我非常佩服的�。�

大部分人的方法是：從報紙，雜志，光盤等媒體中把相關的資料收集整理，再加上一定的編輯后就可以了。

另外一個好的方法是從網(wǎng)絡上收集，您只要到雅虎，搜狐等搜索引擎上查找相應的關鍵字，就可以找到一大堆的資料。

如果您是英語高手，您可以到國外站點上把最新的信息，資料翻譯成中文，提供給大家，這叫“洋為中用”。

網(wǎng)絡上的資料呈爆炸性的增長，只要注意收集某一非常細小的題材，隨時供大家方便的查找，您的主頁就已經(jīng)有做不完的活了。

到這里我們已經(jīng)完成了制作主頁的準備工作。下面開始正式制作主頁。

先來介紹一下我這個網(wǎng)頁吧。我的網(wǎng)頁主要由三大部分組成：主頁、各子網(wǎng)頁以及各互聯(lián)網(wǎng)鏈接。

首先是主頁，采用的是index格式，是第一個顯示的頁面，其實原來第一個顯示的頁面是一個封面，但在網(wǎng)上用了一段時間之后我覺得有封面比較麻煩，花哨但不實用，顯得有些多余，所以我就把它給去掉了，直接顯示主頁會讓別人有一種開門見山的感覺。主頁是我花費精力和時間最多的一個頁面，尤其是在它的視覺設計上包括結(jié)構，字體，背景以及色彩方面都花了很多工夫。頁面包括自己的一幅小照片以及個人的簡要介紹，以便讓觀者對自己有一個初步的了解。網(wǎng)頁最上面是用藝術字編輯的文字，旁邊的welcome是插入的GIF動畫，左上角顯示日期，右上角顯示你在網(wǎng)頁呆的時間，下面是一排子目錄，包括一些鏈接和子頁面，點開就可以看到關于我的詳細信息。下面是一個搜索引擎，采用的是百度是原代碼。再下來是我的近況，也采用了特效。右邊有一個滾動字幕，是一首詩，采用了特效，下面是一些常用大型網(wǎng)站的鏈接。最下面是關于瀏覽器的說明，主頁基本上就是這些了，還有要說的就是“給我留言”是到網(wǎng)上去申請的免費留言板，然后鏈接上去。子網(wǎng)頁中，“圖文”里面全是照片，這兩個頁面也是我精心設計制作的。其他的頁面就大部分以文字為主對自己進行詳細的介紹，背景圖片是我都是我精心挑選的，多數(shù)頁面都插上了音樂作為背景，有個別頁面還使用了特效。

接下來再介紹介紹網(wǎng)頁的功能吧。本網(wǎng)頁可以說具備了多項功能：各頁面可以讓你對我有一個比較詳細的了解；強大的搜索功能令你在網(wǎng)絡世界中暢通無阻，網(wǎng)站、mp3、flash、信息快遞應有盡有；各大型網(wǎng)站的鏈接讓你輕松登陸以便看消息、發(fā)郵件；想聽歌嗎？“我的音樂”將讓你聽歌變得如此方便；超級留言板可以讓你暢所欲言……

相信你雖然還沒有看到我的網(wǎng)頁就已經(jīng)對它有了一個大致的了解了吧！現(xiàn)在重點介紹一下我的網(wǎng)頁的制作過程以及其間遇到的種種困難。

開始時我選擇了Dreamweaver作為制作軟件，看書學習了一些基礎的東西之后就著手開始了我的網(wǎng)頁制作，我先初步對網(wǎng)頁作了一些頁面規(guī)劃，然后建立了站點，用軟件中的一些基本的功能制作，首先是封面，由于Dreamweaver沒有插入藝術字的功能，所以封面上的藝術字是我先在Word文檔里制作好了之后用圖片的方式插入的。接著有開始設計主頁，我主要用層來設計版面，再適當配合表格，經(jīng)過兩個白天和一個通宵，網(wǎng)頁基本的框架就出來了，但這時卻遇到了一個很令人頭疼的問題：突然所有插上去的圖片都不能顯示了�。。∥矣帽M了所有能想出來的方法，請教了很多的電腦高手都不能把這個無法解釋的問題解決，就連重新安裝Dreamweaver也毫無作用，由于是借別人的電腦，時間緊迫，沒有等到去向老師請教，我就一氣之下把那些東西都刪光了，連Dreamweaer也不例外，當時我真的很失望，想到這兩天廢寢忘食地做的東西一下全沒了就很是接受不了，我曾經(jīng)

一度想放棄，不過冷靜了之后我決定從頭開始。不過在開始制作了之后我發(fā)現(xiàn)很多功能和Word相似，于是很快掌握了其許多基本的功能。接著我又熬了一個通宵，決定把前面的損失彌補過來。前面的工作也不能算完全白做，因為至少我在重新制作的時候不必話太多的時間去重新設計版面。還是按照原來的設計，只是改動了一些，大體的框架還是沒有改變。

總結(jié)通過這次制作網(wǎng)頁，我學到了不少東西，而且學到了不少思考問題的方法。計算機

會在以后的學習生活中充當越來越重要的角色，相信我也會學習到更多關于計算機和網(wǎng)絡的知識。這次制作網(wǎng)頁收獲確實不�。。。�

友情提示：本文中關于《網(wǎng)頁設計實訓報告》給出的范例僅供您參考拓展思維使用，網(wǎng)頁設計實訓報告：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡整理 免責聲明：本文僅限學習分享，如產(chǎn)生版權問題，請聯(lián)系我們及時刪除。

《網(wǎng)頁設計實訓報告》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://www.taixiivf.com/gongwen/731528.html

• 上一篇：c#課程設計報告模板
• 下一篇：ERP實驗報告 總結(jié)