網(wǎng)頁設(shè)計(jì)設(shè)計(jì)報(bào)告

1、題 目； Dreamweaver 網(wǎng)頁設(shè)計(jì) 系(部)院： 信息工程學(xué)院 專 業(yè)： 教育技術(shù) 作者姓名： 馮彩娟 指導(dǎo)教師： 馬月進(jìn) 完成日期： 2011年 6 月 20 日 II隴東學(xué)院信息工程學(xué)院教育技術(shù)班Dreamweaver網(wǎng)頁設(shè)計(jì)摘 要:Dreamweaver網(wǎng)頁設(shè)計(jì)，簡(jiǎn)單的說就是教會(huì)你怎么制作網(wǎng)站。通常由個(gè)人或者專門的部門設(shè)計(jì)、開發(fā)、維護(hù)。本文給出了網(wǎng)站設(shè)計(jì)詳細(xì)設(shè)計(jì)與開發(fā)過程，本網(wǎng)站是基于html語言、css、javascricp代碼，在Dreamweaver 8.0環(huán)境下完成的。網(wǎng)站實(shí)現(xiàn)了向廣大網(wǎng)絡(luò)用戶展示如何設(shè)計(jì)網(wǎng)站，如確定主題、網(wǎng)站規(guī)劃、素材收集、風(fēng)格設(shè)計(jì)、內(nèi)容設(shè)計(jì)、發(fā)布維護(hù)等

2、。網(wǎng)友可以在線留言給本網(wǎng)站，達(dá)到用戶與網(wǎng)絡(luò)管理員的互動(dòng)，從而提高網(wǎng)站的信息面。 關(guān)鍵詞：規(guī)劃；風(fēng)格；設(shè)計(jì)目 錄第一章 引 言31.1 選題的背景和意義31.2 選題的現(xiàn)狀31.3 選題主要工作內(nèi)容4第二章 開發(fā)工具簡(jiǎn)介42.1 系統(tǒng)開發(fā)技術(shù)簡(jiǎn)介4第三章 系統(tǒng)設(shè)計(jì)43.1 網(wǎng)站總體結(jié)構(gòu)43.2 網(wǎng)站功能模塊設(shè)計(jì)53.2.1 網(wǎng)站總體模塊功能簡(jiǎn)介53.2.2 網(wǎng)站不同權(quán)限模塊功能簡(jiǎn)介6第四章 主要功能模塊的實(shí)現(xiàn)74.1 首頁設(shè)計(jì)與實(shí)現(xiàn)7第五章 結(jié)束語7致謝8參考文獻(xiàn)8 第一章 引 言1.1 選題的背景和意義在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們

3、政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。Internet上發(fā)布信息主要是通過網(wǎng)站來實(shí)現(xiàn)的，獲取信息也是要在Internet“海洋”中按照一定的檢索方式將所需要的信息從網(wǎng)站上下載下來。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位以及教育機(jī)構(gòu)信息化建設(shè)中的重要組成部分，從而倍受人們的重視。在這個(gè)終身學(xué)習(xí)的環(huán)境中，通過互聯(lián)網(wǎng)的在線學(xué)習(xí)更是必不可少的。1.2 選題的現(xiàn)狀中國國務(wù)院新聞辦公室主任王晨近今年在北京說，截至2009年底，中國網(wǎng)民人數(shù)達(dá)到3.84億，比1997年增長(zhǎng)了618倍，年均增長(zhǎng)3,195萬人，互聯(lián)網(wǎng)普及率達(dá)到28.9%，超過世界平均水平。中國境內(nèi)網(wǎng)站

4、達(dá)323萬個(gè)，比1997年增長(zhǎng)了2,152倍。中國擁有IPv4地址約2.3億個(gè)，已成為世界第二大IPv4地址擁有國。中國使用寬帶上網(wǎng)的網(wǎng)民達(dá)到3.46億人，使用手機(jī)上網(wǎng)的網(wǎng)民達(dá)到2.33億人。中國網(wǎng)民上網(wǎng)方式已從最初以撥號(hào)上網(wǎng)為主，發(fā)展到以寬帶和手機(jī)上網(wǎng)為主。中國互聯(lián)網(wǎng)發(fā)展與普及水平居發(fā)展中國家前列。 如此看來，網(wǎng)絡(luò)已經(jīng)成為中國人民的一大精神食糧，通過網(wǎng)絡(luò)獲取信息，應(yīng)經(jīng)是最快速，最方便的方式。那么要讓更多人了解網(wǎng)頁設(shè)計(jì)并且自己制作網(wǎng)頁，那么建立一個(gè)網(wǎng)絡(luò)上的Dreamweaver學(xué)習(xí)網(wǎng)站是一個(gè)簡(jiǎn)單有效的方法。1.3 選題主要工作內(nèi)容開發(fā)一個(gè)簡(jiǎn)單的Dreamweaver學(xué)習(xí)網(wǎng)，將詳細(xì)的講述如何設(shè)計(jì)

5、網(wǎng)站的主題、風(fēng)格、內(nèi)容、發(fā)布維護(hù)等。 第二章 開發(fā)工具簡(jiǎn)介2.1 開發(fā)技術(shù)簡(jiǎn)介 Dreamweaver 8.0是創(chuàng)建和管理網(wǎng)頁的專業(yè)化可視編輯器。使用Dreamweaver可以輕松創(chuàng)建跨平臺(tái)、跨瀏覽器的頁面。Macromedia的Roundtrip HTML技術(shù)允許用戶隨意導(dǎo)入HTML文檔而無需重新設(shè)置代碼格式。可以為用戶做到：使用動(dòng)態(tài)HTML功能（例如具有動(dòng)態(tài)效果的層和行為）而不用寫一行代碼。它甚至還可以檢查用戶的工作成果在所有流行的平臺(tái)和瀏覽器中可能發(fā)生的錯(cuò)誤。另外它還是一個(gè)可以完全自定義的應(yīng)用程序。用戶可以創(chuàng)建自己的對(duì)象和命令修改菜單和快捷鍵，甚至編寫JavaScript代碼擴(kuò)展Drea

6、mweaver的行為和屬性檢查器。第三章 系統(tǒng)設(shè)計(jì)3.1 網(wǎng)站總體結(jié)構(gòu)本網(wǎng)站的主頁頁面包括：網(wǎng)頁設(shè)計(jì)步驟的各個(gè)導(dǎo)航、網(wǎng)頁設(shè)計(jì)小技巧、常見問題、優(yōu)秀作品欣賞等。為了使用戶能快速、簡(jiǎn)捷的使用網(wǎng)站的各個(gè)功能，特此加強(qiáng)了主頁的功能；用戶通過對(duì)首頁的瀏覽就能了解到怎樣制作網(wǎng)站。主頁內(nèi)容設(shè)計(jì)素材收集發(fā)布維護(hù)網(wǎng)站規(guī)劃確定主題視頻教程風(fēng)格設(shè)計(jì)小技巧常見問題作品欣賞 3.2.1 網(wǎng)站總體模塊功能簡(jiǎn)介正如前節(jié)所述，網(wǎng)站整體上結(jié)構(gòu)上可以劃分成以下幾個(gè)模塊：1 確定主題要制作網(wǎng)站首先我們要明確我們要做一個(gè)關(guān)于什么的網(wǎng)站，選擇一個(gè)自己感興趣的主題。網(wǎng)站主題就是你建立的網(wǎng)站所要包含的主要內(nèi)容，一個(gè)網(wǎng)站必須要有一個(gè)明確的主

7、題。特別是對(duì)于個(gè)人網(wǎng)站，你不可能像綜合網(wǎng)站那樣做得內(nèi)容大而全，包羅萬象。你沒有這個(gè)能力，也沒這個(gè)精力，所以必須要 找準(zhǔn)一個(gè)自己最感興趣內(nèi)容，做深、做透，辦出自己的特色，這樣才能給用戶留下深刻的印象。2 網(wǎng)站規(guī)劃 一個(gè)網(wǎng)站設(shè)計(jì)得成功與否，很大程度上決定于設(shè)計(jì)者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設(shè)計(jì)師設(shè)計(jì)大樓一樣，圖紙?jiān)O(shè)計(jì)好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、版面布局、文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時(shí)駕輕就熟，胸有成竹。3 素材收集明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。常言道：“巧婦難為無米之炊”。要想讓自己的網(wǎng)

8、站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。常見的一些素材網(wǎng)站如：站酷、素材中國、站長(zhǎng)素材、昵圖網(wǎng)、中國素材網(wǎng)、素材資源網(wǎng)、聯(lián)盟素材、懶人圖庫、紅動(dòng)圖爸、素材藝庫等。4 風(fēng)格設(shè)計(jì) 一個(gè)人擁有自己獨(dú)特的風(fēng)格，是一般人所沒有的就會(huì)讓人注意到那個(gè)人的特別，若那個(gè)人的風(fēng)格是正面的，甚至就會(huì)引起別人的羨慕與注意，或是贊賞。5 內(nèi)容設(shè)計(jì)頁面內(nèi)容要新穎頁內(nèi)容的選擇要不落俗套，要重點(diǎn)突出一個(gè)“新”字，這個(gè)原則要求我們?cè)谠O(shè)計(jì)網(wǎng)站內(nèi)容時(shí)不能照抄別人的內(nèi)容，要結(jié)合自身的實(shí)際情況創(chuàng)作出一個(gè)獨(dú)一無二的網(wǎng)站。6 發(fā)布維護(hù) 網(wǎng)頁制作完畢，最后要發(fā)布到Web服務(wù)器上，才能夠

9、讓全世界的朋友觀看，現(xiàn)在上傳的工具有很多，有些網(wǎng)頁制作工具本身就帶有FTP功能，利用這些 FTP工具，你可以很方便地把網(wǎng)站發(fā)布到自己申請(qǐng)的主頁存放服務(wù)器上。另一方面要注意經(jīng)常維護(hù)更新內(nèi)容，保持內(nèi)容的新鮮，不要一做好就放在那兒不變了，只有不斷地給它補(bǔ)充新的內(nèi)容，才能夠吸引住瀏覽者。7 網(wǎng)頁設(shè)計(jì)小技巧 這個(gè)模塊專門介紹了一些網(wǎng)頁設(shè)計(jì)技巧。8 這部分介紹了一些網(wǎng)頁設(shè)計(jì)中常見的問題，以便我們?cè)O(shè)計(jì)時(shí)參考。9 視頻教程單一的文字介紹給人帶來視覺疲勞，那么我們?cè)谶@里制作了關(guān)于Dreamweaver網(wǎng)頁設(shè)計(jì)的視頻教程，可以更加詳細(xì)的介紹如何設(shè)計(jì)網(wǎng)頁。 3.2.2 網(wǎng)站不同權(quán)限模塊功能簡(jiǎn)介通過對(duì)網(wǎng)站系統(tǒng)需求的分

10、析，確定網(wǎng)站系統(tǒng)應(yīng)該對(duì)不同的用戶提供不同的功能。網(wǎng)站主要用于共享信息，收集互用的意見。經(jīng)過分析，確定本網(wǎng)站的用戶主要分為兩種：管理用戶和普通用戶。因此，本網(wǎng)站主要分為兩大模塊：普通用戶、管理員。第四章 主要功能模塊的實(shí)現(xiàn)4.1 首頁設(shè)計(jì)與實(shí)現(xiàn)登錄到網(wǎng)站后首先進(jìn)入首頁。如圖4-1首頁顯示頁面。第一步 在屬性面板中添加綠色漸變背景圖片。第二步 插入圖片。第三步 用表格布局，建一個(gè)一列六行的表格。第四步 在第一行中用marquee設(shè)計(jì)滾動(dòng)字幕“Dreamweaver網(wǎng)頁設(shè)計(jì)”，然后在選擇圖片填充表格背景。第五步 在第二行中添加表格背景，然后輸入文字，用空格定位。第六步 將光標(biāo)定位到第三行中拆分單元格

11、分成3列，每一列中添加適當(dāng)內(nèi)容。第七步 在第四行中輸入“優(yōu)秀作品欣賞”并設(shè)計(jì)表格背景。第九步 將光標(biāo)定位在第五行中，切換到代碼窗口用滾動(dòng)圖片代碼換掉“&nbsp”然后刷新。第十步 在最后一行中設(shè)計(jì)版權(quán)，及表格背景。第十一步 保存，然后預(yù)覽。第十二步 鏈接導(dǎo)航，然后保存。第十三步 確保無誤后另存為其他網(wǎng)頁。第十四步 打開其他網(wǎng)頁進(jìn)行編輯，換掉不同的部分，留下相同的部分，這樣一個(gè)新的網(wǎng)頁就做好了。第十五步 用同樣的辦法做好其他網(wǎng)頁。第五章 結(jié)束語經(jīng)過了這一段時(shí)間的學(xué)習(xí)、制作過程；在老師、同學(xué)的耐心幫助下，最終完成了一個(gè)簡(jiǎn)單的Dreamweaver網(wǎng)頁設(shè)計(jì)網(wǎng)站。剛開始做的時(shí)候找了很多相關(guān)的資

12、料，不管是需求分析時(shí)，還是編碼的過程中，到最后寫論文的過程中總會(huì)遇到各種各樣的問題。因?yàn)橛辛司W(wǎng)絡(luò)，找到了很多解決問題的方法，這為我們帶來了很多的方便，也讓我們學(xué)習(xí)了更多知識(shí)。經(jīng)過不斷的學(xué)習(xí)最后完成了。整個(gè)過程中感覺到困難是無處不在的，最重要的就是我們有沒有去解決它的信心和實(shí)際的行動(dòng)，只要我們?nèi)プ隽?，就是算沒做出來，或都是做的不好，我們都會(huì)學(xué)到很多的新的東西。這也是一種進(jìn)步，一種收獲。當(dāng)然本網(wǎng)站中還有很多不足的地方，由于時(shí)間和能力的原因本網(wǎng)站中也還有許多未能實(shí)現(xiàn)的功能，有些地方設(shè)計(jì)的不是很仔細(xì)，希望各位老師給我更多的建議，以便我在將來設(shè)計(jì)中做的更好。第 8 頁河西學(xué)院計(jì)算機(jī)系本科畢業(yè)論文致謝這個(gè)

13、設(shè)計(jì)是我在這學(xué)期所學(xué)知識(shí)的一個(gè)總結(jié)和檢驗(yàn)的過程，在這個(gè)過程中可以體驗(yàn)到自己去嘗試的快樂，也有功能實(shí)現(xiàn)不了的困惑，老師，同學(xué)的寶貴意見都給了我很多的幫助，在此我十分感謝他們。通過設(shè)計(jì)自己動(dòng)手可以增加事件能力，而且對(duì)網(wǎng)站開發(fā)設(shè)計(jì)有了一個(gè)比較清楚的了解，知道了應(yīng)該怎么樣去分析解決問題，收獲了更多的知識(shí)。使我體會(huì)到一個(gè)系統(tǒng)的開發(fā)需要合理的進(jìn)度安排和很好的邏輯協(xié)調(diào)能力，這種解決問題的能力鍛煉和思考問題的模式都使我受益匪淺，所有這些都構(gòu)成了我不能忘懷這一段時(shí)間之旅的原因。本網(wǎng)站在制作過程中遇到了不少困難，感謝我的同學(xué)以及我的指導(dǎo)老師馬老師從論文設(shè)計(jì)到實(shí)現(xiàn)對(duì)我論文的輔導(dǎo)與幫助。感謝老師在實(shí)現(xiàn)過程中對(duì)我的方法和思路做出了及時(shí)的正確知道，在剛剛開始的時(shí)候我的想法太簡(jiǎn)單、甚至有誤區(qū)，老師給予了相關(guān)指正，謝謝她這幾個(gè)