Dreamweaver網(wǎng)站制作畢業(yè)設計說明書優(yōu)質(zhì)資料

1、 Dreamweaver學習網(wǎng)站制作設計說明書 信息工程系 系 部： 學生姓名： 石婷婷 網(wǎng)絡08D1 專業(yè)班級： 083422106 學 號： 密海英 指導教師： 日月年20101025 目錄 . 1內(nèi)容摘要 . 1一、引言 . 1Dreamweaver發(fā)展前景與現(xiàn)狀 1、 2專題學習網(wǎng)站的內(nèi)容和意義Dreamweaver . 2、 2二、開發(fā)工具的介紹 . 3三、網(wǎng)站的具體規(guī)劃 . 3 . 、1 網(wǎng)站的功能結構 3 . 2、網(wǎng)站的主題思想 . 3設計3、網(wǎng)站LOGO . 44、網(wǎng)站布局設計 . 45、網(wǎng)站的內(nèi)容 4頁面設計過程 . 四、 4 . 1、一級導航頁面設計 . 6 2、二級導航頁

2、面設計 8三級導航頁面設計 . 3、 . 9總結五、 0 1致謝 . 1 1. . 參考文獻 Dreamweaver學習網(wǎng)站的設計與開發(fā) 內(nèi)容摘要 本課題通過對Dreamweaver學習網(wǎng)站的制作，為使用者提供一個自主學習、測試的Dreamweaver的平臺。網(wǎng)站采用了清新自然的綠色為主色調(diào)，顏色明快柔和，界面美觀簡潔。清新的綠色讓學習者產(chǎn)生視覺上的放松。本網(wǎng)站文本簡明、通俗易懂，整體結構清晰、統(tǒng)一，便于學習。網(wǎng)站資源豐富、層次清楚、內(nèi)容嚴謹。頁面多處插入了flash，使得頁面更加生動、活潑，富有感染力。網(wǎng)站導航清晰，布局簡單卻不單調(diào)，讓學習者能夠一目了然，方便快捷。 本網(wǎng)站采用了實例教學的手

3、法，使得學習者能夠更加直觀地去學習。此外，還增加了在線測試的功能，打破了以往只能夠“教”而不能夠“測”的網(wǎng)站，這樣才能使學習者更加直接地了解自己的學習情況，從而提高自己的學習能力 一、引言 （一）Dreamweaver的發(fā)展前景與現(xiàn)狀 公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見MACROMEDIA是美國Dreamweaver即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)站設計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。 它于1997年首次推出。2002年推出Dreamweaver UltraDev，它主要運用其核心的Roundtrip HTM

4、L技術，可確保在切換程序代碼與設計檢視時的程序代碼質(zhì)量，Dreamweaver 成為專業(yè)網(wǎng)站外觀設計的先驅(qū)。2002年推出了Dreamweaver MX ,目的是支持現(xiàn)代網(wǎng)頁專業(yè)人員兼?zhèn)涞亩嘀亟巧?003年推出Dreamweaver MX 2004，新增了對以往CSS為基礎設計與開發(fā)提供支持的革命性功能，將網(wǎng)頁設計提升到新的層次。之后，又推出Dreamweaver 8,它是以之前版本為基礎，擴充了主要范圍的功能，例如XML和CSS，并簡化了其工作流程，以幫助使用者事半功倍。 在這個高速發(fā)展的信息化時代，Dreamweaver仍然是目前最流行的網(wǎng)頁制作軟件之一，它最佳的制作效率、網(wǎng)站管理能力、

5、及無可比擬的控制能力等特點，使得網(wǎng)頁制作變得更加簡單、快捷、方便。 （二）Dreamweaver學習網(wǎng)站的內(nèi)容和意義 本網(wǎng)站的內(nèi)容：根據(jù)指定的主題制作的一個Dreamweaver 學習網(wǎng)站，其中包括Dreamweaver知識的收集、分類、整理，確保內(nèi)容的正確、邏輯嚴謹、層次清楚；提供友好的操作界面，方便學習者自主地學習；提供測試功能以便學習者及時測試自己的學習效果，以便更好地提高自己的能力。形成的一個內(nèi)容正確實用，布局合理，色彩搭配協(xié)調(diào)，頁面美觀且比較完整的學習Dreamweaver知識的專題網(wǎng)站。 本網(wǎng)站的意義：網(wǎng)上雖然有許多關于本專題的學習網(wǎng)站，但此次想通過自己的努力制作一個專門針對大專院

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

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

8、；學習交流提供了學習者相互交流的平臺。各個功能導航下還具體劃分了小的導航鏈接，詳細結構請見圖31。 本網(wǎng)站的意義：網(wǎng)上雖然有許多關于本專題的學習網(wǎng)站，但此次想通過自己的努力制作一個專門針對大專院校生，以及一些行外者學習的Dreamweaver學習網(wǎng)站。這樣不僅能給學習者提供良好的學習環(huán)境，讓他們可以免費地、自主地學習有關Dreamweaver軟件的知識，還可以通過制作本主題網(wǎng)站更一步提高自己的網(wǎng)頁制作能力以及進一步深入地學習有關Dreamweaver知識。 課程展示 首頁 實例教程 網(wǎng)站首頁 在線測試 學習交流 教學 目 標 專題簡介 教 學 方法 教學內(nèi) 容基礎課程進階課 程網(wǎng)站技巧視頻教程

9、在線測試 留言板 圖 31 網(wǎng)站功能結構圖 （二）網(wǎng)站的主題思想 本網(wǎng)站是一個Dreamweaver專題學習網(wǎng)站，目的就是要提供給學習者一個舒適的學習平臺。網(wǎng)站的主題思想就是一切為了學習者能夠通過本網(wǎng)站能夠更好、更快、更舒適地學習。所以本網(wǎng)站分類清晰、內(nèi)容豐富、由淺到深。語言通俗易懂，讓那些原本對Dreamweaver知識一竅不通的學習者都能夠自主學習。 設計LOGO（三）網(wǎng)站本專題網(wǎng)站LOGO，是用Flash制作的一個動態(tài)的LOGO?！癉reamweaver”從左往右滾動顯示，“學習網(wǎng)站”從右向左滾動顯示，這樣會使得網(wǎng)站看上去不會太枯燥，單調(diào)。 （四）網(wǎng)站布局設計 本網(wǎng)站以清新自然的綠色為主

10、色調(diào)，使學習者在視覺上產(chǎn)生眼前一亮的視覺效果。本網(wǎng)站在布局上簡單而又不顯單調(diào)，樸素而又不失優(yōu)雅。采用圖文結合的方法讓學習者能夠更直觀地學習。用Flash做一些動態(tài)效果，使得整個頁面更加活潑生動。 （五）網(wǎng)站的內(nèi)容 對本專題的學習課程內(nèi)容進行收集、分類、整理，讓學習者一目了然。在導航上清楚地呈現(xiàn)每個課程的標題，以便于學習者分類學習以及查找。 在網(wǎng)站首頁上的內(nèi)容有：專題簡介、教學方法、教學目標、教學內(nèi)容四個鏈接導航，查看具體內(nèi)容點擊即可。 在課程展示上的內(nèi)容有：基礎課程、進階課程和網(wǎng)站技巧三塊，其中基礎課程中有新功能簡介、窗口布局、菜單概述、常用工具欄、定義站點、創(chuàng)建頁面、頁面制作、超級鏈接、表格

11、設計、框架技術和創(chuàng)建導航條共十一章內(nèi)容；進階課程中有可視化操作iframe、滾動字幕、彈出菜單、Dreamweaver的插件、彈出窗口、添加音樂背景、操作框架、創(chuàng)建模板、應用模板、層及應用、行為事件和發(fā)布網(wǎng)站共十二章內(nèi)容；網(wǎng)站技巧中有網(wǎng)頁建設之色彩全攻略、網(wǎng)站優(yōu)化的十大奇招妙計、網(wǎng)頁設計應防止的10個錯誤、令網(wǎng)站打開提高速度的7大秘方、網(wǎng)頁制作高手進階、淺談設計中的文字、網(wǎng)頁設計高手進階技巧、巧用記事本編輯網(wǎng)頁、Dreamweaver編寫CSS需要掌握的技巧、小技巧讓你輕松Diy你的網(wǎng)頁滾動條、巧用DW進行網(wǎng)頁制作技巧、Dreamweaver技巧12條、個性化表單設計技巧五則、巧用背景顏色和間

12、距制細邊表格共十二項內(nèi)容。 實例教學提供了以實例為基礎的教學，可以讓學習者更加直觀地學習。主要采用錄頻工具制作了視頻教學課程。 在線測試提供了自我檢測的平臺，讓學習者在學習的同時能夠?qū)ψ约核鶎W內(nèi)容的掌握情況有個認識，以便更好地提高自己的學習效率。 學習交流提供了一個互相交流的平臺，讓學習者對所學習內(nèi)容有個相互探討的平臺，以便促進學習。 四、頁面設計過程 （一）一級導航頁面設計 首頁設計首先是用Photoshop設計出頁面的原型，將網(wǎng)站的導航都包括在里面，本網(wǎng)站導航是采用的一個四葉草的圖片，跟網(wǎng)站主色調(diào)融合，使得整體頁面更加和諧；然界面中插入Dreamweaver后進行切片，將切片好的圖片放在指

13、定的文件夾內(nèi)；最后，在圖片，以及所制作的Flash，制作模板，這樣更有利于網(wǎng)站頁面的修改。制作效果如圖41所示。 1 網(wǎng)站首頁效果圖圖4 設計思想：網(wǎng)站的左上角是一個女孩在拿著一本書躺在寬闊的天空下，一眼就讓人看出來這是一個學習網(wǎng)站，寬闊的天空正說明了知識的無窮無盡。右上角是用Flash制作的一個動態(tài)的LOGO,突出了本網(wǎng)站的主題Dreamweaver學習網(wǎng)站。中間一部分是用Flash制作的一個滾動的圖片展示效果，將一些本專題的教程和一些優(yōu)秀的作品呈現(xiàn)出來。左下方是一個圓孤形狀的圖片，里面是網(wǎng)站首頁的二級導航。右下方是一個友情提示，讓學習者注意休息，保護視力！課程展示設計方法同上，設計效果如4

14、2所示。 圖42課程展示效果圖 （二）二級導航頁面設計 設計思想：頁面上半部分減少圖片展示區(qū)域其余與一級導航頁面相同，下方左邊是內(nèi)容放置區(qū)域，右邊是一個用flash制作的熱點內(nèi)容，這樣使得頁面更加簡單整潔，讓人有一種賞心悅目的視覺效果。效果圖如43、44所示，其它頁面整體設計與之相同。 圖43 專題簡介效果圖 圖44 基礎課程效果圖 （三）三級導航頁面設計 設計思想：頁面上方與二級導航頁面一致，下方則為課程內(nèi)容展示，如下圖45所示，其余與之相同。 圖45 新功能簡介效果圖 五、總結 通過本次專題網(wǎng)站的制作自己對Dreamweaver有了進一步的深入了解，覺得自己學到了許多知識，在制作網(wǎng)站技術上

15、也有了一定的提高。 之所以會選擇該課題，是由于之前做過類似的網(wǎng)站，所以很有信心的選擇了此課題。但當老師告知，這是要做一個學習網(wǎng)站，工作量是非常大的，而且還增加了以前從來沒有接觸過的錄頻工具和在線測試功能。這些顯然使我的信心減少了許多，不過相信通過自己的不斷努力，虛心請教一定會成功完成此次項目的。 滿懷信心的開始了本次的項目設計，在設計的過程中真的是問題不斷，大大小小的問題全有，不過我并沒有放棄，通過了自己的努力學習以及向老師同學請教，幾乎都一一解決了這些問題。有句話說得好，問題并不可怕，可怕的是你在遇到這些問題時選擇 了放棄。通過不斷地學習，不斷地努力，在制作網(wǎng)頁時為讓我的網(wǎng)頁更加豐富多彩，在

16、網(wǎng)頁中插入圖像、動畫、動態(tài)特效等，讓瀏覽者更加直接，方便地了解我們的網(wǎng)站，同時在視覺上給人一種賞心悅目的感受。 在制作網(wǎng)站中，我使用了PS圖片處理工具、FLASH軟件、Dreamweaver及css處理樣式等。以前也只是掌握了些基礎的知識，現(xiàn)在對這些已經(jīng)有了進一步的了解，也比以前更能熟練地運用這些軟件了。 在制作網(wǎng)站時，我也瀏覽了一些相關的網(wǎng)站，它們有的網(wǎng)站不僅內(nèi)容豐富，頁面圖文并茂，在整體樣式上也比較新穎，這是我去值得學習的，我們應該學習它們的精華部分，讓自己的網(wǎng)站更加地完善。 通過這次制作網(wǎng)站的過程，我個人有以下幾點心得體會： (1)在制作網(wǎng)站的前期工作也很重要，這是我們?nèi)菀缀雎缘?。一個好

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