網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)報(bào)告

福州軟件職業(yè)技術(shù)學(xué)院

實(shí)訓(xùn)報(bào)告

題目：動(dòng)漫實(shí)訓(xùn)課程名稱：網(wǎng)頁(yè)設(shè)計(jì)系別：計(jì)算機(jī)系專業(yè)/班級(jí)：軟件技術(shù)4班年級(jí)：201*級(jí)學(xué)號(hào)：09013430姓名：游浠指導(dǎo)老師：黃偉雄

201*年7月9日

目錄

1實(shí)訓(xùn)目的..................................................................................................................................................12實(shí)訓(xùn)內(nèi)容..................................................................................................................................................13方案設(shè)計(jì)與實(shí)施步驟.................................................................................................................................1

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

4.1問題...............................................................................................................................................24.2分析...............................................................................................................................................24.3解決方案........................................................................................................................................25實(shí)訓(xùn)作品展示...........................................................................................................................................3

5.1首頁(yè)...............................................................................................................................................35.2動(dòng)漫分類頁(yè)面.................................................................................................................................35.3動(dòng)漫介紹頁(yè)面.................................................................................................................................46實(shí)訓(xùn)總結(jié)..................................................................................................................................................4

1實(shí)訓(xùn)目的

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

（2）掌握布局技術(shù)，模版應(yīng)用，CSS樣式，超級(jí)鏈接。

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

2實(shí)訓(xùn)內(nèi)容

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

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

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

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

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

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

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

h．作品不得抄襲。

3方案設(shè)計(jì)與實(shí)施步驟

3.1方案設(shè)計(jì)

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

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

西，其中包括:動(dòng)漫分類，動(dòng)漫簡(jiǎn)介，動(dòng)漫排行等

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

3.2實(shí)施步驟

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

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

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

4.1問題

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

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

4.2分析

1.發(fā)現(xiàn)鏈接路徑出錯(cuò)，在運(yùn)行時(shí)采用了絕對(duì)路徑2.代碼錯(cuò)誤

3.一個(gè)頁(yè)面一個(gè)表格，影響很大

4.3解決方案

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

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

5實(shí)訓(xùn)作品展示

5.1首頁(yè)

5.2動(dòng)漫分類頁(yè)面

5.3動(dòng)漫介紹頁(yè)面

6實(shí)訓(xùn)總結(jié)

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

擴(kuò)展閱讀：個(gè)人網(wǎng)站實(shí)訓(xùn)設(shè)計(jì)報(bào)告

目錄

一、課程設(shè)計(jì)題目............................................................1二、課程設(shè)計(jì)目的............................................................1

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

2.1.1知識(shí)目的.......................................................12.1.2技能目的.......................................................12．2通用能力目的........................................................2三、課程設(shè)計(jì)要求............................................................2四、課程設(shè)計(jì)概述............................................................3

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

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

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

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

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

一、課程設(shè)計(jì)題目

個(gè)人網(wǎng)站設(shè)計(jì)

二、課程設(shè)計(jì)目的

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

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

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

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

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

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

2．2通用能力目

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

三、課程設(shè)計(jì)要求

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

（1）在規(guī)定時(shí)間完成課程設(shè)計(jì)任務(wù)書中的全部任務(wù)。

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

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

（7）設(shè)計(jì)報(bào)告要做到文字通暢、論點(diǎn)正確、論述有據(jù)。

（8）課程設(shè)計(jì)報(bào)告、作品刻成光盤和以書面打印形式的報(bào)告交給指導(dǎo)教師。2．注意事項(xiàng)

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

（2）實(shí)訓(xùn)期間的非上機(jī)時(shí)間，學(xué)生應(yīng)在教室進(jìn)行上機(jī)前準(zhǔn)備工作，收集網(wǎng)頁(yè)設(shè)計(jì)與制作相關(guān)的各項(xiàng)知識(shí)。

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

建設(shè)各項(xiàng)知識(shí)的討論，并獨(dú)立完成網(wǎng)站建設(shè)的各項(xiàng)任務(wù)。

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

（5）實(shí)訓(xùn)最后進(jìn)行一次網(wǎng)站評(píng)比，以檢查學(xué)生實(shí)訓(xùn)成果。

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

四、課程設(shè)計(jì)概述

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

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

(2)主機(jī)能與互聯(lián)網(wǎng)相連、以便學(xué)生能夠?yàn)g覽優(yōu)秀網(wǎng)站，搜集相關(guān)材料等。

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

（1）.Dreamweaver將“設(shè)計(jì)”和“代碼”編輯器集成在一起，既可以方便的進(jìn)行源代碼編輯，也可以使用鼠標(biāo)方式添加和設(shè)置對(duì)象。

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

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

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

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

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

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

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

第一個(gè)為插入圖象的按鈕，點(diǎn)擊后，會(huì)彈出對(duì)話框，標(biāo)準(zhǔn)對(duì)話框，選擇想要的圖

象就行了。

第二個(gè)（橫向走）為插入輪替圖象，它彈出的對(duì)話框會(huì)讓選擇兩副圖，以及鼠標(biāo)點(diǎn)擊時(shí)的連接等。作好后，用鼠標(biāo)移動(dòng)到圖象上面，圖象就會(huì)變成另外的一副圖象，點(diǎn)擊它，就會(huì)連接到另外一個(gè)頁(yè)面上去。

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

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

第五個(gè)按鈕為插入水平線按鈕，插入后，在屬性浮動(dòng)面板上改改它的大小等。第六個(gè)為導(dǎo)航條，和第二個(gè)差不多，也可以換圖象，不過，比起第二個(gè)要復(fù)雜的多，但絕對(duì)簡(jiǎn)單。

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

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

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

第十個(gè)為插入日期，很簡(jiǎn)單，沒有什么好說的。

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

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

第十三個(gè)為插入制作人，親自制作的東西不想留名嗎？點(diǎn)它就行。

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

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

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

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

五、課程設(shè)計(jì)任務(wù)

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

（1）首頁(yè)采用表格進(jìn)行布局，必須包含導(dǎo)航欄；（2）二級(jí)子頁(yè)可利用模板、表格制作；

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

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

六、課程設(shè)計(jì)步驟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6.4網(wǎng)站總體功能設(shè)計(jì)

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

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

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

要領(lǐng)二：選擇好域名

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

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

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

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

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

盡可能刪除那些與主題無關(guān)的欄目；

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

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

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

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

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

（3）設(shè)置首頁(yè)布局

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

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

（4）設(shè)置首頁(yè)的頁(yè)面屬性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（1）首先在winxp下安裝IIS6

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

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

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

七、結(jié)論

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

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

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

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

八、結(jié)束語(yǔ)

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

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

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

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

當(dāng)然也深刻認(rèn)識(shí)了一點(diǎn)，那就是我們所學(xué)的知識(shí)雖說是很基礎(chǔ)很根本，但沒有根基怎么能建好別墅呢?所以說基礎(chǔ)知識(shí)是很重要的，我們?cè)趯W(xué)習(xí)過程中不能小看而去忽略它，它是一筆財(cái)富，能引導(dǎo)我們看得更遠(yuǎn)飛得更高。

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

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

九、參考文獻(xiàn)

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

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

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

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

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

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

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

課程設(shè)計(jì)心得與體會(huì)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一度想放棄，不過冷靜了之后我決定從頭開始。不過在開始制作了之后我發(fā)現(xiàn)很多功能和Word相似，于是很快掌握了其許多基本的功能。接著我又熬了一個(gè)通宵，決定把前面的損失彌補(bǔ)過來。前面的工作也不能算完全白做，因?yàn)橹辽傥以谥匦轮谱鞯臅r(shí)候不必話太多的時(shí)間去重新設(shè)計(jì)版面。還是按照原來的設(shè)計(jì)，只是改動(dòng)了一些，大體的框架還是沒有改變。

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

會(huì)在以后的學(xué)習(xí)生活中充當(dāng)越來越重要的角色，相信我也會(huì)學(xué)習(xí)到更多關(guān)于計(jì)算機(jī)和網(wǎng)絡(luò)的知識(shí)。這次制作網(wǎng)頁(yè)收獲確實(shí)不小�。�！

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

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

《網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)報(bào)告》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請(qǐng)保留原作者信息,謝謝!
鏈接地址：http://www.hmlawpc.com/gongwen/731528.html

• 上一篇：c#課程設(shè)計(jì)報(bào)告模板
• 下一篇：ERP實(shí)驗(yàn)報(bào)告 總結(jié)