Dreamweaver網(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參考文獻(xiàn)11Dreamweaver學(xué)習(xí)網(wǎng)站的設(shè)

2、計與開發(fā)內(nèi)容摘要本課題通過對Dreamweaver學(xué)習(xí)網(wǎng)站的制作，為使用者提供一個自主學(xué)習(xí)、測試的Dreamweaver的平臺。網(wǎng)站采用了清新自然的綠色為主色調(diào)，顏色明快柔和，界面美觀簡潔。清新的綠色讓學(xué)習(xí)者產(chǎn)生視覺上的放松。本網(wǎng)站文本簡明、通俗易懂，整體結(jié)構(gòu)清晰、統(tǒng)一，便于學(xué)習(xí)。網(wǎng)站資源豐富、層次清楚、內(nèi)容嚴(yán)謹(jǐn)。頁面多處插入了flash，使得頁面更加生動、活潑，富有感染力。網(wǎng)站導(dǎo)航清晰，布局簡單卻不單調(diào)，讓學(xué)習(xí)者能夠一目了然，方便快捷。本網(wǎng)站采用了實例教學(xué)的手法，使得學(xué)習(xí)者能夠更加直觀地去學(xué)習(xí)。此外，還增加了在線測試的功能，打破了以往只能夠“教”而不能夠“測”的網(wǎng)站，這樣才能使學(xué)習(xí)者更加直接

3、地了解自己的學(xué)習(xí)情況，從而提高自己的學(xué)習(xí)能力1、 引言（1） Dreamweaver的發(fā)展前景與現(xiàn)狀Dreamweaver是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)站設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。它于1997年首次推出。2002年推出Dreamweaver UltraDev，它主要運用其核心的Roundtrip HTML技術(shù)，可確保在切換程序代碼與設(shè)計檢視時的程序代碼質(zhì)量，Dreamweaver 成為專業(yè)網(wǎng)站外觀設(shè)計的先驅(qū)。2002年推出了Dreamwe

4、aver MX ,目的是支持現(xiàn)代網(wǎng)頁專業(yè)人員兼?zhèn)涞亩嘀亟巧?003年推出Dreamweaver MX 2004，新增了對以往CSS為基礎(chǔ)設(shè)計與開發(fā)提供支持的革命性功能，將網(wǎng)頁設(shè)計提升到新的層次。之后，又推出Dreamweaver 8,它是以之前版本為基礎(chǔ)，擴充了主要范圍的功能，例如XML和CSS，并簡化了其工作流程，以幫助使用者事半功倍。在這個高速發(fā)展的信息化時代，Dreamweaver仍然是目前最流行的網(wǎng)頁制作軟件之一，它最佳的制作效率、網(wǎng)站管理能力、及無可比擬的控制能力等特點，使得網(wǎng)頁制作變得更加簡單、快捷、方便。（二）Dreamweaver學(xué)習(xí)網(wǎng)站的內(nèi)容和意義本網(wǎng)站的內(nèi)容：根據(jù)指定的主

5、題制作的一個Dreamweaver 學(xué)習(xí)網(wǎng)站，其中包括Dreamweaver知識的收集、分類、整理，確保內(nèi)容的正確、邏輯嚴(yán)謹(jǐn)、層次清楚；提供友好的操作界面，方便學(xué)習(xí)者自主地學(xué)習(xí)；提供測試功能以便學(xué)習(xí)者及時測試自己的學(xué)習(xí)效果，以便更好地提高自己的能力。形成的一個內(nèi)容正確實用，布局合理，色彩搭配協(xié)調(diào)，頁面美觀且比較完整的學(xué)習(xí)Dreamweaver知識的專題網(wǎng)站。本網(wǎng)站的意義：網(wǎng)上雖然有許多關(guān)于本專題的學(xué)習(xí)網(wǎng)站，但此次想通過自己的努力制作一個專門針對大專院校生，以及一些行外者學(xué)習(xí)的Dreamweaver學(xué)習(xí)網(wǎng)站。這樣不僅能給學(xué)習(xí)者提供良好的學(xué)習(xí)環(huán)境，讓他們可以免費地、自主地學(xué)習(xí)有關(guān)Dreamweav

6、er軟件的知識，還可以通過制作本主題網(wǎng)站更一步提高自己的網(wǎng)頁制作能力以及進(jìn)一步深入地學(xué)習(xí)有關(guān)Dreamweaver知識。二、開發(fā)工具的介紹 在本次的專題網(wǎng)站制作中，我主要使用了Dreamweaver、Photoshop、Flash等軟件。使用Dreamweaver制作整個網(wǎng)站，對網(wǎng)頁進(jìn)行合理的排版和布局，同時也采用了CSS樣式，更好地顯示了本網(wǎng)站元素及內(nèi)容，具有更好的易用性和可擴展性，大大簡化了網(wǎng)站的建設(shè)。使用Photoshop來設(shè)計網(wǎng)站的界面，以及對網(wǎng)站中一些圖片的處理，使得網(wǎng)站得到了美化。使用Flash軟件制作了一些動態(tài)的LOGO、滾動圖片、滾動字幕等效果。使得整個網(wǎng)站看上去不會太死板，讓

7、網(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é)目標(biāo)以及教學(xué)內(nèi)容，讓學(xué)習(xí)者對本學(xué)習(xí)網(wǎng)站有個初步的認(rèn)識；課程展示提供了基礎(chǔ)課程、進(jìn)階課程及網(wǎng)站技巧等內(nèi)容，讓學(xué)習(xí)者能夠清晰地、循序漸進(jìn)地學(xué)習(xí)相關(guān)內(nèi)容；實例教程提供了一些實例教學(xué)及視頻教學(xué)，讓學(xué)習(xí)者通過實例進(jìn)一步學(xué)習(xí)；在線測試提供了學(xué)習(xí)者自我檢測的平臺；學(xué)習(xí)交流提供了學(xué)習(xí)者相互交流的平臺。各個功能導(dǎo)航下還具體劃分了小的導(dǎo)航鏈接，詳細(xì)結(jié)構(gòu)請見圖31。本網(wǎng)站的意義：網(wǎng)上雖然有許多關(guān)于本專題的學(xué)習(xí)網(wǎng)站，但此次想通過

8、自己的努力制作一個專門針對大專院校生，以及一些行外者學(xué)習(xí)的Dreamweaver學(xué)習(xí)網(wǎng)站。這樣不僅能給學(xué)習(xí)者提供良好的學(xué)習(xí)環(huán)境，讓他們可以免費地、自主地學(xué)習(xí)有關(guān)Dreamweaver軟件的知識，還可以通過制作本主題網(wǎng)站更一步提高自己的網(wǎng)頁制作能力以及進(jìn)一步深入地學(xué)習(xí)有關(guān)Dreamweaver知識。首頁課程展示網(wǎng)站首頁學(xué)習(xí)交流在線測試實例教程基礎(chǔ)課程進(jìn)階課程網(wǎng)站技巧 留言板在線測試視頻教程教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)方法專題簡介圖 31 網(wǎng)站功能結(jié)構(gòu)圖（二）網(wǎng)站的主題思想本網(wǎng)站是一個Dreamweaver專題學(xué)習(xí)網(wǎng)站，目的就是要提供給學(xué)習(xí)者一個舒適的學(xué)習(xí)平臺。網(wǎng)站的主題思想就是一切為了學(xué)習(xí)者能夠通過本網(wǎng)

9、站能夠更好、更快、更舒適地學(xué)習(xí)。所以本網(wǎng)站分類清晰、內(nèi)容豐富、由淺到深。語言通俗易懂，讓那些原本對Dreamweaver知識一竅不通的學(xué)習(xí)者都能夠自主學(xué)習(xí)。（三）網(wǎng)站LOGO設(shè)計本專題網(wǎng)站LOGO，是用Flash制作的一個動態(tài)的LOGO?！癉reamweaver”從左往右滾動顯示，“學(xué)習(xí)網(wǎng)站”從右向左滾動顯示，這樣會使得網(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)站的

10、內(nèi)容對本專題的學(xué)習(xí)課程內(nèi)容進(jìn)行收集、分類、整理，讓學(xué)習(xí)者一目了然。在導(dǎo)航上清楚地呈現(xiàn)每個課程的標(biāo)題，以便于學(xué)習(xí)者分類學(xué)習(xí)以及查找。在網(wǎng)站首頁上的內(nèi)容有：專題簡介、教學(xué)方法、教學(xué)目標(biāo)、教學(xué)內(nèi)容四個鏈接導(dǎo)航，查看具體內(nèi)容點擊即可。在課程展示上的內(nèi)容有：基礎(chǔ)課程、進(jìn)階課程和網(wǎng)站技巧三塊，其中基礎(chǔ)課程中有新功能簡介、窗口布局、菜單概述、常用工具欄、定義站點、創(chuàng)建頁面、頁面制作、超級鏈接、表格設(shè)計、框架技術(shù)和創(chuàng)建導(dǎo)航條共十一章內(nèi)容；進(jìn)階課程中有可視化操作iframe、滾動字幕、彈出菜單、Dreamweaver的插件、彈出窗口、添加音樂背景、操作框架、創(chuàng)建模板、應(yīng)用模板、層及應(yīng)用、行為事件和發(fā)布網(wǎng)站共十二

11、章內(nèi)容；網(wǎng)站技巧中有網(wǎng)頁建設(shè)之色彩全攻略、網(wǎng)站優(yōu)化的十大奇招妙計、網(wǎng)頁設(shè)計應(yīng)防止的10個錯誤、令網(wǎng)站打開提高速度的7大秘方、網(wǎng)頁制作高手進(jìn)階、淺談設(shè)計中的文字、網(wǎng)頁設(shè)計高手進(jìn)階技巧、巧用記事本編輯網(wǎng)頁、Dreamweaver編寫CSS需要掌握的技巧、小技巧讓你輕松Diy你的網(wǎng)頁滾動條、巧用DW進(jìn)行網(wǎng)頁制作技巧、Dreamweaver技巧12條、個性化表單設(shè)計技巧五則、巧用背景顏色和間距制細(xì)邊表格共十二項內(nèi)容。實例教學(xué)提供了以實例為基礎(chǔ)的教學(xué)，可以讓學(xué)習(xí)者更加直觀地學(xué)習(xí)。主要采用錄頻工具制作了視頻教學(xué)課程。在線測試提供了自我檢測的平臺，讓學(xué)習(xí)者在學(xué)習(xí)的同時能夠?qū)ψ约核鶎W(xué)內(nèi)容的掌握情況有個認(rèn)識，以

12、便更好地提高自己的學(xué)習(xí)效率。學(xué)習(xí)交流提供了一個互相交流的平臺，讓學(xué)習(xí)者對所學(xué)習(xí)內(nèi)容有個相互探討的平臺，以便促進(jìn)學(xué)習(xí)。4、 頁面設(shè)計過程（一）一級導(dǎo)航頁面設(shè)計首頁設(shè)計首先是用Photoshop設(shè)計出頁面的原型，將網(wǎng)站的導(dǎo)航都包括在里面，本網(wǎng)站導(dǎo)航是采用的一個四葉草的圖片，跟網(wǎng)站主色調(diào)融合，使得整體頁面更加和諧；然后進(jìn)行切片，將切片好的圖片放在指定的文件夾內(nèi)；最后，在Dreamweaver界面中插入圖片，以及所制作的Flash，制作模板，這樣更有利于網(wǎng)站頁面的修改。制作效果如圖41所示。圖41 網(wǎng)站首頁效果圖 設(shè)計思想：網(wǎng)站的左上角是一個女孩在拿著一本書躺在寬闊的天空下，一眼就讓人看出來這是一個學(xué)

13、習(xí)網(wǎng)站，寬闊的天空正說明了知識的無窮無盡。右上角是用Flash制作的一個動態(tài)的LOGO,突出了本網(wǎng)站的主題Dreamweaver學(xué)習(xí)網(wǎng)站。中間一部分是用Flash制作的一個滾動的圖片展示效果，將一些本專題的教程和一些優(yōu)秀的作品呈現(xiàn)出來。左下方是一個圓孤形狀的圖片，里面是網(wǎng)站首頁的二級導(dǎo)航。右下方是一個友情提示，讓學(xué)習(xí)者注意休息，保護(hù)視力！課程展示設(shè)計方法同上，設(shè)計效果如42所示。圖42課程展示效果圖（二）二級導(dǎo)航頁面設(shè)計 設(shè)計思想：頁面上半部分減少圖片展示區(qū)域其余與一級導(dǎo)航頁面相同，下方左邊是內(nèi)容放置區(qū)域，右邊是一個用flash制作的熱點內(nèi)容，這樣使得頁面更加簡單整潔，讓人有一種賞心悅目的視覺

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

15、信通過自己的不斷努力，虛心請教一定會成功完成此次項目的。滿懷信心的開始了本次的項目設(shè)計，在設(shè)計的過程中真的是問題不斷，大大小小的問題全有，不過我并沒有放棄，通過了自己的努力學(xué)習(xí)以及向老師同學(xué)請教，幾乎都一一解決了這些問題。有句話說得好，問題并不可怕，可怕的是你在遇到這些問題時選擇了放棄。通過不斷地學(xué)習(xí)，不斷地努力，在制作網(wǎng)頁時為讓我的網(wǎng)頁更加豐富多彩，在網(wǎng)頁中插入圖像、動畫、動態(tài)特效等，讓瀏覽者更加直接，方便地了解我們的網(wǎng)站，同時在視覺上給人一種賞心悅目的感受。在制作網(wǎng)站中，我使用了PS圖片處理工具、FLASH軟件、Dreamweaver及css處理樣式等。以前也只是掌握了些基礎(chǔ)的知識，現(xiàn)在對

16、這些已經(jīng)有了進(jìn)一步的了解，也比以前更能熟練地運用這些軟件了。在制作網(wǎng)站時，我也瀏覽了一些相關(guān)的網(wǎng)站，它們有的網(wǎng)站不僅內(nèi)容豐富，頁面圖文并茂，在整體樣式上也比較新穎，這是我去值得學(xué)習(xí)的，我們應(yīng)該學(xué)習(xí)它們的精華部分，讓自己的網(wǎng)站更加地完善。通過這次制作網(wǎng)站的過程，我個人有以下幾點心得體會：(1)在制作網(wǎng)站的前期工作也很重要，這是我們?nèi)菀缀雎缘?。一個好的計劃可以詳細(xì)制定網(wǎng)站的相關(guān)內(nèi)容，為后期的制作節(jié)省不少時間，同時也使網(wǎng)頁的結(jié)構(gòu)，主題更加清晰。(2)在制作網(wǎng)站時，不能隨心所欲，要有一個大體的構(gòu)思，使整個網(wǎng)頁層次分明，使人看了一目了然。(3)在內(nèi)容選取上要全面、可靠、嚴(yán)謹(jǐn)。(4)要有自己的獨特風(fēng)格，不

17、能一味地去借鑒別人的網(wǎng)站，結(jié)構(gòu)要新穎，有創(chuàng)意。雖然我的網(wǎng)站并不是用很專業(yè)的技術(shù)手段制作而成的，也有許多的不足之處，例如：網(wǎng)站的導(dǎo)航過于簡單、flash做得還不夠?qū)I(yè)、視頻教學(xué)及在線測試功能還需強化等。但是我也有自己的特色，如：頁面布局簡潔清晰、內(nèi)容由淺到深層層遞進(jìn)、語言通俗易懂及提供了在線測試功能等。我相信通過自己的不斷學(xué)習(xí)、不斷豐富自己、不斷開拓視野、增強自己的實踐操作技能，為以后能做出更加出色的網(wǎng)站而努力！致謝在做畢業(yè)設(shè)計期間，并不是一帆風(fēng)順的。雖然以前做過網(wǎng)站，但是像這種專題學(xué)習(xí)網(wǎng)站還是第一次接觸。就在我一頭霧水，不知從何做起的時候，我的指導(dǎo)老師密老師給我仔細(xì)地講解了一些關(guān)于學(xué)習(xí)網(wǎng)站要完成的任務(wù)，以及達(dá)到什么樣一個效果，讓我有了一個大概的思路。為了讓我們能夠按時完成項目設(shè)計，暑假期間，密老師也時常督促我們，為我們解決遇到的一些問題。非常感謝密海英老師的耐心指導(dǎo)和幫助，讓我能夠成功地完成此項目。同時也要感謝給我?guī)椭?/p>