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

1、Dreamweaver學(xué)習(xí)網(wǎng)站制作 設(shè)計(jì)說明書 系 部： 信息工程系 學(xué)生姓名： 石婷婷 專業(yè)班級(jí)： 網(wǎng)絡(luò)08D1 學(xué) 號(hào)： 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è)計(jì)34、網(wǎng)站布局設(shè)計(jì)35、網(wǎng)站的內(nèi)容4頁面設(shè)計(jì)過程41、一級(jí)導(dǎo)航頁面設(shè)計(jì)42、 二級(jí)導(dǎo)航頁面設(shè)計(jì)63、 三級(jí)導(dǎo)航頁面設(shè)計(jì)8五、 總結(jié)9致謝10參考文獻(xiàn)11Dreamweaver學(xué)習(xí)網(wǎng)站的設(shè)計(jì)與開

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

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

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

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

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

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

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

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