網(wǎng)站設(shè)計(jì)實(shí)習(xí)報(bào)告

實(shí)習(xí)名稱：電子商務(wù)網(wǎng)站設(shè)計(jì)實(shí)習(xí)地點(diǎn)：行知匯元實(shí)習(xí)項(xiàng)目名稱：東軟集團(tuán)

實(shí)習(xí)目的：這次實(shí)習(xí)，我們組做的項(xiàng)目是東軟集團(tuán)。東軟是中國最大的IT解決方案與服務(wù)供應(yīng)商，為客戶提供行業(yè)解決方案和產(chǎn)品工程解決方案以及相關(guān)產(chǎn)品與服務(wù)。這次實(shí)習(xí)，主要是了解IT行業(yè)的情況，學(xué)習(xí)JSP的CSS和DIV布局以及Javascript語言。除此之外，還了解了東軟集團(tuán)的相關(guān)情況以及發(fā)展趨勢。

實(shí)習(xí)步驟：第一天和第二天都是學(xué)習(xí)CSS和DIV布局以及Javascript語言，然后完成老師布置的小作業(yè)，主要是了解一下CSS和DIV布局以及Javascript語言,為下面的實(shí)習(xí)做好準(zhǔn)備。第三天，老師給我們發(fā)了實(shí)習(xí)項(xiàng)目素材，然后各個(gè)小組選好項(xiàng)目后就開始正式進(jìn)入項(xiàng)目制作。

剛開始我們沒有一點(diǎn)頭緒，由于小組的技術(shù)水平實(shí)在有限，大家都在為如何開始而焦頭爛額，看著其他小組都已經(jīng)進(jìn)入工作狀態(tài)了，但是我們卻還在徘徊。第四天，我們也進(jìn)入狀態(tài)，我主要負(fù)責(zé)首頁部分制作以及后臺數(shù)據(jù)庫的建立和連接。

下面是我制作的首頁部分：

下面介紹一下首頁制作用到的主要技術(shù)：

首頁分為頭部、主題main和底部，頭部用無序列表做了一個(gè)導(dǎo)航欄。中間放了一個(gè)Flash，然后分為左右兩部分。左右兩部分使用table表格做的，插入了一些圖片和文字。首頁的制作花費(fèi)了一天時(shí)間，接下來其他的子頁制作差不多也是參照首頁的布局。

然后是“關(guān)于東軟”這個(gè)子頁的制作，剛開始我也是用DIV和CSS布局制作的，但是在啊瀏覽器中出現(xiàn)了問題。后來我又改用框架�？梢钥瓷蠄D，頭部和主頁一樣，左邊是用表格制作的一個(gè)鏈接欄，右邊是一個(gè)框架，點(diǎn)擊鏈接，頁面會(huì)在框架中顯示。

這是我制作的媒體鏈接的一個(gè)子頁，主要是和數(shù)據(jù)庫鏈接，用戶可以在頁面中輸入信息，然后提交，就會(huì)提交到后臺數(shù)據(jù)庫。由于技術(shù)有限，還沒有實(shí)現(xiàn)提交的信息在前臺頁面顯示的功能。

在最后的一天時(shí)間里，大家都忙著整合頁面了，而我們還在建數(shù)據(jù)庫。下面是我和我的組員喬娟同學(xué)一起制作的“登錄”、“注冊”頁面。

注冊界面：

登錄界面：

這兩個(gè)界面主要實(shí)現(xiàn)用戶注冊和登錄功能，幫助企業(yè)更好管理用戶信息。用戶也可以通過注冊為企業(yè)會(huì)員，了解企業(yè)更多的信息，是用戶和企業(yè)實(shí)現(xiàn)互動(dòng)的一個(gè)平臺。實(shí)習(xí)心得：本次實(shí)習(xí)，收獲頗多，在網(wǎng)站制作的知識方面，我學(xué)會(huì)了JSP語言，學(xué)會(huì)了用DIV和CSS技術(shù)布局網(wǎng)頁格局。雖然剛開始沒有一點(diǎn)基礎(chǔ)，做起來確實(shí)很困難，真的感覺力不從心，但是通過幾天的學(xué)習(xí)以及老師和同學(xué)的指導(dǎo)，最終讓我們齊心協(xié)力作出了一個(gè)網(wǎng)站，不管結(jié)果如何，但在這個(gè)過程中，真的讓我學(xué)會(huì)很多東西，也讓我體會(huì)到了團(tuán)隊(duì)如何將工作銜接順利。其次，滿碩滿老師教給我們很多東西，記得第一天班會(huì)時(shí)他就讓我們做自我介紹，然后在接下來的一天的報(bào)告會(huì)時(shí)，他就針對前一天我們的情況，跟我們講了五條毛毛蟲的故事，目的是教育我們一定要定好目標(biāo)，然后朝著目標(biāo)努力。這個(gè)報(bào)告會(huì)讓我覺得自己應(yīng)該定目標(biāo)了，不能讓大學(xué)四年就這樣白白浪費(fèi)了。

再次，在這次實(shí)習(xí)過程中，整個(gè)專業(yè)更加團(tuán)結(jié)了，凝聚力更強(qiáng)大了。雖然在項(xiàng)目制作中，和團(tuán)隊(duì)同學(xué)有一些意見分歧，但是最后大家都是民主決定的。大家在這次實(shí)習(xí)中，雖然剛開始都不適應(yīng)，但我相信，在最后產(chǎn)品展示時(shí)，大家心里都是激動(dòng)和興奮的，畢竟這是我們十天的努力結(jié)果啊。

這次實(shí)習(xí)，留給我的東西很多，教會(huì)我的東西也很多，很感謝學(xué)校給我們安排的這次實(shí)習(xí)，真的非常有意義。也感謝行知匯元給我們提供實(shí)習(xí)平臺和場地。最后感謝這十天里和我一起風(fēng)雨同舟的伙伴們。

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

目錄

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

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

2.1.1知識目的.......................................................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對所開發(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)各頁面的詳細(xì)設(shè)計(jì)................................................8

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

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

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

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

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

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

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

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

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

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

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

2．2通用能力目

這是對自己在一學(xué)期內(nèi)該學(xué)習(xí)科目以來的成果的檢查，這是一個(gè)自我審視的過程：檢測我該學(xué)期的學(xué)習(xí)成果，衡量一期以來的收獲，更為重要的是揚(yáng)長避短，發(fā)現(xiàn)自己的問題與缺點(diǎn)，使自己及時(shí)改正，發(fā)覺自身的優(yōu)點(diǎn)和長處并堅(jiān)持發(fā)揚(yáng)，有利于我以后的學(xué)習(xí)和發(fā)展。這不僅是為了肩負(fù)學(xué)生的責(zé)任而去完成老師交給我的任務(wù)，更是對過去學(xué)習(xí)的知識的溫習(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)站，目的在于簡單的介紹一下個(gè)人狀況，可以使老師和同學(xué)們更進(jìn)一步的了解我現(xiàn)在以及部分過去的情況，加強(qiáng)老師和同學(xué)們對我的認(rèn)識，深化我們大家的情誼，有利于以后在學(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ì)課題的全部內(nèi)容。（3）通過對所選課題的分析，有針對性的進(jìn)行調(diào)查研究，學(xué)會(huì)收集、整理相關(guān)資料等。（4）完成網(wǎng)站模塊或功能的設(shè)計(jì)，由于在課程教學(xué)中本課程以靜態(tài)網(wǎng)頁為主，所以對網(wǎng)站設(shè)計(jì)過程中對后臺的設(shè)計(jì)可以適當(dāng)簡單一點(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以上者，成績?yōu)椴患案瘛?/p>

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

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

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

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

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

（6）不準(zhǔn)無故曠課、遲到、早退；若有特殊情況，需事先請假，征求許可。（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í)際測試本程序運(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è)置對象。

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

（3）.CSS樣式可以有效的控制網(wǎng)頁對象的外觀，美化網(wǎng)頁界面，如文本字體，顏色，表單樣式、圖像風(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以及其他媒體元素，也可以對各種多媒體元素進(jìn)行處理。

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

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

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

象就行了。

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

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

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

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

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

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

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

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

第十一個(gè)為插入Flash按鈕，F(xiàn)lash是現(xiàn)在網(wǎng)頁中新興的一種多媒體，有動(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)頁制作設(shè)計(jì)的。第十五為插入Java語言編寫的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è)頁面，分為三層，第一層為首頁，第二層為二級子頁，第三層為內(nèi)容頁。

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

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

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

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

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

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

根據(jù)中國互聯(lián)網(wǎng)信息中心發(fā)表的權(quán)威報(bào)告顯示，截止11年6月底，我國網(wǎng)站數(shù)達(dá)到287.8萬個(gè)。網(wǎng)站數(shù)量的劇增，導(dǎo)致競爭的加劇。于是愈來愈多的，尤其是個(gè)人，開始對網(wǎng)站的發(fā)展前景表示擔(dān)憂。甚至有人斷言，個(gè)人網(wǎng)站的時(shí)代已經(jīng)過去。需求分析最根本的任務(wù)是確定“為了滿足客戶的需要”。具體的說，應(yīng)該確定系統(tǒng)必須具有功能和性能，系統(tǒng)要求的運(yùn)行環(huán)境，并且預(yù)測系統(tǒng)發(fā)展的前景。必須仔細(xì)分析系統(tǒng)中的資料，既要分析系統(tǒng)中的數(shù)據(jù)流，又要分析長期使用的資料儲(chǔ)存。該階段不是確定系統(tǒng)怎樣完成它的工作，而僅僅是確定系統(tǒng)必須完成哪些工作，也就是對目標(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)民的日益增長，建立個(gè)人網(wǎng)站，不但可以剛好的展示自己，而且可以提高自己在計(jì)算機(jī)應(yīng)用方面的能力。故本次作業(yè)，我選擇制作個(gè)人網(wǎng)站。

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

根據(jù)前面的設(shè)計(jì)思想進(jìn)行分析，按照系統(tǒng)開發(fā)的基本觀點(diǎn)對網(wǎng)站進(jìn)行分解，從內(nèi)容上可對網(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)頁制作中，我借鑒了韓國個(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)頁設(shè)計(jì)的軟件的不斷變化升級，使用起來愈來

愈方便。打個(gè)比方：原來的網(wǎng)頁全是如同文本編輯一樣，圖片的定位就相當(dāng)困難，往往要求助于表格加表格，表格里插表格，這就需要熟練掌握表格的應(yīng)用。而且還很難達(dá)到目標(biāo)，有時(shí)不得不更改一些自己的目標(biāo)。這有時(shí)是牽一發(fā)而動(dòng)全身的。現(xiàn)在呢？在Dreamweaver出現(xiàn)后，采用了高級的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è)，政府部門以致國際組織等等，無不將網(wǎng)站作為

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

個(gè)人網(wǎng)站致力于廣大用戶提供優(yōu)質(zhì)的交流平臺，提高網(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)頁面的相互分離。

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

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

做網(wǎng)站，首先必須要解決的就是網(wǎng)站內(nèi)容問題，即確定網(wǎng)站的主題。美國《個(gè)人電腦》雜志(PCMagazine)評出了99年度排名前100位的全美知名網(wǎng)站的十類題材：第1類：網(wǎng)上求職；第2類：網(wǎng)上聊天/即時(shí)信息/ICQ；第3類：網(wǎng)上社區(qū)/討論/郵件列表；第4類：計(jì)算機(jī)技術(shù)；第5類：網(wǎng)頁/網(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)秀的作品。

對于內(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í)這對個(gè)人網(wǎng)站的推廣與發(fā)展很為不利，不光是它“適時(shí)”開啟的窗口妨礙了瀏覽者的視線和好感，讓人一看就知道是個(gè)人網(wǎng)站，而且也妨礙了網(wǎng)頁的傳輸速度。所以，就我個(gè)人觀點(diǎn)來說，首先花點(diǎn)錢去注冊一個(gè)域名，獨(dú)立的域名就是個(gè)人網(wǎng)站的第一筆財(cái)富，要把域名起得形象、簡單、易記。

要領(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)困難。所以，我們在動(dòng)手制作網(wǎng)頁前，一定要考慮好欄目和板塊的編排問題。

網(wǎng)站的題材確定后，就要將收集到的資料內(nèi)容作一個(gè)合理的編排。比如，將一些最吸引人的內(nèi)容放在最突出的位置或者在版面分布上占優(yōu)勢地位。欄目的實(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)簡介、版權(quán)信息、個(gè)人信息等大可不必放在主欄目里，以免沖淡主題。6.5網(wǎng)站各頁面的詳細(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頁來填充站點(diǎn)了。在“右側(cè)浮動(dòng)面板組”中選擇“文件/文件”面板，此時(shí)整個(gè)網(wǎng)站中沒有任何內(nèi)容。用鼠標(biāo)右面板中的本地目錄文件夾。在彈出的菜單中選擇“新建文件”，新建的一個(gè)文件后將其命名為“index.html”，它就是未來的首頁。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

“鏈接”，又稱“超鏈接”，它作為網(wǎng)頁的橋梁，起著相當(dāng)重要的作用。網(wǎng)頁中的很多對象都可以加入鏈接屬性�！版溄印笨梢苑譃椤拔淖宙溄印�、“圖像鏈接”、“錨點(diǎn)連接”、“文件下載鏈接”、“跳轉(zhuǎn)菜單”等等。

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

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

（1）首先在winxp下安裝IIS6

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

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

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

七、結(jié)論

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

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

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

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

八、結(jié)束語

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

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

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

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

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

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

這次作業(yè)對于我來說不是一項(xiàng)任務(wù)而是一種享受，因?yàn)槲野l(fā)現(xiàn)我越來越喜歡它，不管別人說做這件事做到多晚做得有多累，我都沒覺得，甚至還越做越興奮。對于一個(gè)女生來說，特別是對于一個(gè)對電腦不感興趣的女生來說，我覺得這是我最大的收獲，我找到了我的興趣、我的老師，我在計(jì)算機(jī)專業(yè)中找到了方向。真的很感謝老師能給我們這次機(jī)會(huì)，當(dāng)然也發(fā)現(xiàn)有很多同學(xué)跟我一樣喜歡上了它，在這方面也做得比較好，于是我也有一種緊迫感，畢竟現(xiàn)在競爭壓力很大，“適者生存，弱者淘汰”是亙古不變的自然法則，我想我應(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)頁制作與網(wǎng)站建設(shè)指南[M]清華大學(xué)出版社

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

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

（10）杜巧玲等編,網(wǎng)頁設(shè)計(jì)超級夢幻組合,清華大學(xué)出版社（11）吳黎兵、羅云芳編，網(wǎng)頁設(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)頁的制作，我對計(jì)算機(jī)有了更深層次得到了解，也有了更濃厚的興趣。

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

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

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

3.不要太濫或者目標(biāo)太高�！疤珵E”是指到處可見，人人都有的題材；“目標(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è)頁面的內(nèi)容大綱列出來，尤其當(dāng)你要制作一個(gè)很大的網(wǎng)站(有很多頁面)的時(shí)候，特別需要把這個(gè)架構(gòu)規(guī)劃好，也要考慮到以后可能的擴(kuò)充性，免得做好以后又要一改再改整個(gè)網(wǎng)站的架構(gòu)，十分累人，也十分費(fèi)錢。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 上一篇：裝飾藝術(shù)設(shè)計(jì)專業(yè)課程調(diào)研報(bào)告
• 下一篇：網(wǎng)頁設(shè)計(jì)實(shí)習(xí)報(bào)告