網(wǎng)站制作畢業(yè)設(shè)計說明書

1、Dreamweaver學(xué)習(xí)網(wǎng)站制作 設(shè)計說明書 系 部： 信息工程系 學(xué)生姓名： 石婷婷 專業(yè)班級： 網(wǎng)絡(luò)08D1 學(xué) 號： 083422106 指導(dǎo)教師： 密海英 2010年10月25日目錄內(nèi)容摘要1一、引言11、Dreamweaver發(fā)展前景與現(xiàn)狀12、Dreamweaver專題學(xué)習(xí)網(wǎng)站的內(nèi)容和意義2二、開發(fā)工具的介紹2三、網(wǎng)站的具體規(guī)劃31、 網(wǎng)站的功能結(jié)構(gòu)32、網(wǎng)站的主題思想33、網(wǎng)站LOGO設(shè)計34、網(wǎng)站布局設(shè)計35、網(wǎng)站的內(nèi)容4頁面設(shè)計過程41、一級導(dǎo)航頁面設(shè)計42、 二級導(dǎo)航頁面設(shè)計63、 三級導(dǎo)航頁面設(shè)計8五、 總結(jié)9致謝10參考文獻11Dreamweaver學(xué)習(xí)網(wǎng)站的設(shè)計與開

2、發(fā)內(nèi)容摘要本課題1、 引言（1） Dreamweaver的發(fā)展前景與現(xiàn)狀這樣不僅能給學(xué)習(xí)者提供良好的學(xué)習(xí)環(huán)境，讓他們可以免費地、自主地學(xué)習(xí)有關(guān)Dreamweaver軟件的知識，還可以通過制作本主題網(wǎng)站更一步提高自己的網(wǎng)頁制作能力以及進一步深入地學(xué)習(xí)有關(guān)Dreamweaver知識。二、開發(fā)工具的介紹 在本次的專題網(wǎng)站制作中，我主要使用了Dreamweaver、Photoshop、Flash等軟件。使用Dreamweaver制作整個網(wǎng)站，對網(wǎng)頁進行合理的排版和布局，同時也采用了CSS樣式，更好地顯示了本網(wǎng)站元素及內(nèi)容，具有更好的易用性和可擴展性，大大簡化了網(wǎng)站的建設(shè)。使用Photoshop來設(shè)計網(wǎng)

3、站的界面，以及對網(wǎng)站中一些圖片的處理，使得網(wǎng)站得到了美化。使用Flash軟件制作了一些動態(tài)的LOGO、滾動圖片、滾動字幕等效果。使得整個網(wǎng)站看上去不會太死板，讓網(wǎng)站顯得更生動，更能夠吸引學(xué)習(xí)者。三、網(wǎng)站的具體規(guī)劃（一）網(wǎng)站的功能結(jié)構(gòu)本專題網(wǎng)站中，主要設(shè)計了網(wǎng)站首頁、課程展示、實例教程、在線測試、學(xué)習(xí)交流五個導(dǎo)航。網(wǎng)站首頁提供了專題簡介、教學(xué)方法、教學(xué)目標以及教學(xué)內(nèi)容，讓學(xué)習(xí)者對本學(xué)習(xí)網(wǎng)站有個初步的認識；課程展示提供了基礎(chǔ)課程、進階課程及網(wǎng)站技巧等內(nèi)容，讓學(xué)習(xí)者能夠清晰地、循序漸進地學(xué)習(xí)相關(guān)內(nèi)容；實例教程提供了一些實例教學(xué)及視頻教學(xué)，讓學(xué)習(xí)者通過實例進一步學(xué)習(xí)；在線測試提供了學(xué)習(xí)者自我檢測的平臺

4、；學(xué)習(xí)交流提供了學(xué)習(xí)者相互交流的平臺。各個功能導(dǎo)航下還具體劃分了小的導(dǎo)航鏈接，詳細結(jié)構(gòu)請見圖31。這樣不僅能給學(xué)習(xí)者提供良好的學(xué)習(xí)環(huán)境，讓他們可以免費地、自主地學(xué)習(xí)有關(guān)Dreamweaver軟件的知識，還可以通過制作本主題網(wǎng)站更一步提高自己的網(wǎng)頁制作能力以及進一步深入地學(xué)習(xí)有關(guān)Dreamweaver知識。首頁圖 31 網(wǎng)站功能結(jié)構(gòu)圖分類清晰、內(nèi)容豐富、由淺到深。語言通俗易懂，讓那些原本對Dreamweaver知識一竅不通的學(xué)習(xí)者都能夠自主學(xué)習(xí)。（三）網(wǎng)站LOGO設(shè)計本專題網(wǎng)站LOGO，是用Flash制作的一個動態(tài)的LOGO?！癉reamweaver”從左往右滾動顯示，“學(xué)習(xí)網(wǎng)站”從右向左滾動顯

5、示，這樣會使得網(wǎng)站看上去不會太枯燥，單調(diào)。（四）網(wǎng)站布局設(shè)計本網(wǎng)站以清新自然的綠色為主色調(diào)，使學(xué)習(xí)者在視覺上產(chǎn)生眼前一亮的視覺效果。本網(wǎng)站在布局上簡單而又不顯單調(diào)，樸素而又不失優(yōu)雅。采用圖文結(jié)合的方法讓學(xué)習(xí)者能夠更直觀地學(xué)習(xí)。用Flash做一些動態(tài)效果，使得整個頁面更加活潑生動。（五）網(wǎng)站的內(nèi)容對（二）二級導(dǎo)航頁面設(shè)計 設(shè)計思想：頁面上半部分減少圖片展示區(qū)域其余與一級導(dǎo)航頁面相同，下方左邊是內(nèi)容放置區(qū)域，右邊是一個用flash制作的熱點內(nèi)容，這樣使得頁面更加簡單整潔，讓人有一種賞心悅目的視覺效果。效果圖如43、44所示，其它頁面整體設(shè)計與之相同。 圖43 專題簡介效果圖圖44 基礎(chǔ)課程效果圖（

6、三）三級導(dǎo)航頁面設(shè)計 設(shè)計思想：頁面上方與二級導(dǎo)航頁面一致，下方則為課程內(nèi)容展示，如下圖45所示，其余與之相同。圖45 新功能簡介效果圖5、 總結(jié) 通過本次專題網(wǎng)站的制作自己對Dreamweaver有了進一步的深入了解，覺得自己學(xué)到了許多知識，在制作網(wǎng)站技術(shù)上也有了一定的提高。之所以會選擇該課題，是由于之前做過類似的網(wǎng)站，所以很有信心的選擇了此課題。但當老師告知，這是要做一個學(xué)習(xí)網(wǎng)站，工作量是非常大的，而且還增加了以前從來沒有接觸過的錄頻工具和在線測試功能。這些顯然使我的信心減少了許多，不過相信通過自己的不斷努力，虛心請教一定會成功完成此次項目的。滿懷信心的開始了本次的項目設(shè)計，在設(shè)計的過程中

7、真的是問題不斷，大大小小的問題全有，不過我并沒有放棄，通過了自己的努力學(xué)習(xí)以及向老師同學(xué)請教，幾乎都一一解決了這些問題。有句話說得好，問題并不可怕，可怕的是你在遇到這些問題時選擇了放棄。通過不斷地學(xué)習(xí)，不斷地努力，在制作網(wǎng)頁時為讓我的網(wǎng)頁更加豐富多彩，在網(wǎng)頁中插入圖像、動畫、動態(tài)特效等，讓瀏覽者更加直接，方便地了解我們的網(wǎng)站，同時在視覺上給人一種賞心悅目的感受。在制作網(wǎng)站中，我使用了PS圖片處理工具、FLASH軟件、Dreamweaver及css處理樣式等。以前也只是掌握了些基礎(chǔ)的知識，現(xiàn)在對這些已經(jīng)有了進一步的了解，也比以前更能熟練地運用這些軟件了。在制作網(wǎng)站時，我也瀏覽了一些相關(guān)的網(wǎng)站，它

8、們有的網(wǎng)站不僅內(nèi)容豐富，頁面圖文并茂，在整體樣式上也比較新穎，這是我去值得學(xué)習(xí)的，我們應(yīng)該學(xué)習(xí)它們的精華部分，讓自己的網(wǎng)站更加地完善。通過這次制作網(wǎng)站的過程，我個人有以下幾點心得體會：(1)在制作網(wǎng)站的前期工作也很重要，這是我們?nèi)菀缀雎缘?。一個好的計劃可以詳細制定網(wǎng)站的相關(guān)內(nèi)容，為后期的制作節(jié)省不少時間，同時也使網(wǎng)頁的結(jié)構(gòu)，主題更加清晰。(2)在制作網(wǎng)站時，不能隨心所欲，要有一個大體的構(gòu)思，使整個網(wǎng)頁層次分明，使人看了一目了然。(3)在內(nèi)容選取上要全面、可靠、嚴謹。(4)要有自己的獨特風(fēng)格，不能一味地去借鑒別人的網(wǎng)站，結(jié)構(gòu)要新穎，有創(chuàng)意。雖然我的網(wǎng)站并不是用很專業(yè)的技術(shù)手段制作而成的，也有許多

9、的不足之處，例如：網(wǎng)站的導(dǎo)航過于簡單、flash做得還不夠?qū)I(yè)、視頻教學(xué)及在線測試功能還需強化等。但是我也有自己的特色，如：頁面布局簡潔清晰、內(nèi)容由淺到深層層遞進、語言通俗易懂及提供了在線測試功能等。我相信通過自己的不斷學(xué)習(xí)、不斷豐富自己、不斷開拓視野、增強自己的實踐操作技能，為以后能做出更加出色的網(wǎng)站而努力！致謝在做畢業(yè)設(shè)計期間，并不是一帆風(fēng)順的。雖然以前做過網(wǎng)站，但是像這種專題學(xué)習(xí)網(wǎng)站還是第一次接觸。就在我一頭霧水，不知從何做起的時候，我的指導(dǎo)老師密老師給我仔細地講解了一些關(guān)于學(xué)習(xí)網(wǎng)站要完成的任務(wù)，以及達到什么樣一個效果，讓我有了一個大概的思路。為了讓我們能夠按時完成項目設(shè)計，暑假期間，密老師也時常督促我們，為我們解決遇到的一些問題。非常感謝密海英老師的耐心指導(dǎo)和幫助，讓我能夠成功地完成此項目。同時也要感謝給我?guī)椭耐瑢W(xué)們，謝謝你們！參考文獻 1 王蒙田.網(wǎng)頁制作三合一教程M.中國水利水電學(xué)出版社，2006.7 2 劉瑞新.Dreamweaver8網(wǎng)頁制作短訓(xùn)教程M.機械工業(yè)出版社，2007.13 陸玉柱.Dreamweaver網(wǎng)頁制作寶典M.電子工業(yè)出版