網(wǎng)頁設(shè)計與制作課程設(shè)計報告

1、學號2014-2015學年 第一學期*網(wǎng)頁設(shè)計與制作課程設(shè)計報告題目：維影影視公司網(wǎng)頁設(shè)計專業(yè)：數(shù)字媒體技術(shù)班級：12（1）班姓名：*指導(dǎo)教師：*成績：計算機與信息工程系二0一四年六月二十日目 錄1 設(shè)計內(nèi)容及要求21.1設(shè)計內(nèi)容21.2設(shè)計任務(wù)及具體要求22 總體設(shè)計32.1該網(wǎng)站的功能簡介32.2 網(wǎng)站設(shè)計概括圖33設(shè)計過程43.1各個模塊的設(shè)計流程43.2對關(guān)鍵代碼和效果處理加以分析說明94設(shè)計結(jié)果與分析115 小 結(jié)12致謝13參考文獻14 17 / 20文檔可自由編輯1 設(shè)計內(nèi)容及要求1.1設(shè)計內(nèi)容維影影視網(wǎng)站主要根據(jù)課程設(shè)計要求進行設(shè)計，并了解了維影公司的基本情況，該網(wǎng)站主要包括六

2、大模塊：1）導(dǎo)航欄模塊，主要有首頁、產(chǎn)品展示、新聞動態(tài)、留言板、關(guān)于我們、聯(lián)系我們。2）新聞動態(tài)模塊，最近的一些影視方面的信息。 3）產(chǎn)品分類模塊，主要是些電影的類型分類。4）在線客服模塊，為來訪者提供一些我們公司的在線服務(wù)。5）公司簡介模塊，介紹公司的一些基本情況。6）熱銷產(chǎn)品模塊，向大家介紹一些我們公司的一些熱銷電影。 1.2設(shè)計任務(wù)及具體要求主要利用Photoshop和Dreamweaver進行一個小型的影視公司網(wǎng)站開發(fā)，網(wǎng)站內(nèi)容涵蓋了維影影視公司的一些最基本情況，以及維影公司的最新電影出臺情況，并且提供一系列的人工在線服務(wù)為我們的來訪者解答這種問題。 要求：明確課程設(shè)計的目的，能根據(jù)課

3、程設(shè)計的要求，查閱相關(guān)文獻，為完成設(shè)計準備必要的知識； 提高學生用Photoshop和Dreamweaver進行程序設(shè)計的能力，重點提高用Dreamweaver進行網(wǎng)頁制作技術(shù)水平；初步了解軟件開發(fā)的一般方法和步驟； 提高撰寫技術(shù)文檔的能力。2 總體設(shè)計2.1該網(wǎng)站的功能簡介該網(wǎng)站的主要功能是介紹維影公司的基本情況，并作為一個功能型的網(wǎng)站展示給我們大家，包括一些最新電影展示，最終目的還是為一些想做影視的公司提供一些服務(wù)，宣傳自己。2.2 網(wǎng)站設(shè)計概括圖圖1 總體布局圖3設(shè)計過程3.1各個模塊的設(shè)計流程 1）主頁模塊設(shè)計該模塊主要是是展示我們網(wǎng)頁的基本框架，以及有什么基本功能，通過主頁我們可以很

4、清晰的看到我們維影網(wǎng)站的整體布局，以及我們來訪者可以從我們網(wǎng)站上獲得什么相關(guān)的信息，一目了然看到我們是一個實力雄厚的大公司，從網(wǎng)站我們就可以看到該公司是一個結(jié)構(gòu)分明，管理有條不紊。 圖2 主頁模塊設(shè)計圖2）產(chǎn)品展示模塊設(shè)計 該模塊主要是展示維影公司最近一段時間的所拍攝的電影，通過電影展示我們維影公司的影視實力。圖3 產(chǎn)品展示模塊設(shè)計圖3）留言板模塊設(shè)計該模塊主要為供我們來訪者提一些關(guān)于影視方面的意見，以及他們對電影的看法，以及喜歡看什么類型的電影，好讓我們公司通過這些寶貴意見做的更好，是項吸納民意的好辦法。圖4 旅游寶典模塊設(shè)計圖4）聯(lián)系我們模塊設(shè)計該模塊主要為將我們的地理坐標告訴來訪者，如果

5、有人愿意找我們公司做一些什么關(guān)于欄目包裝、宣傳片什么之類的可以通過該地址找到我們公司。 圖5 聯(lián)系我們頁面設(shè)計圖5）在線客服模塊設(shè)計該模塊主要為來訪者提供一些在線服務(wù)，為他們解答一些先關(guān)的疑難問題，是我們在線交流的必要手段，不管來訪者有什么問題，我們公司都可以一一解答，這是一個仁智的服務(wù)。圖6 旅游景點模塊設(shè)計圖3.2對關(guān)鍵代碼和效果處理加以分析說明1）主頁部分設(shè)計代碼wangyebody,td,th font-size: 14px;color: #FFF;a:link text-decoration: none;a:visited text-decoration: none;color: #

6、003;a:hover text-decoration: none;a:active text-decoration: none;#_01 tr td strong a color: #FFF;4設(shè)計結(jié)果與分析在進行網(wǎng)頁設(shè)計與制作的過程中，并不是一帆風順的，總會遇到很多在想象不到的錯誤。1.首先在ps里進行設(shè)計時要事先想好各個模塊該怎么擺放，怎么設(shè)置，整個頁面是否傾斜等都應(yīng)考慮，否則在Dreamweaver里會帶來很多的麻煩。2.要為每個頁面添加居中操作。3.應(yīng)先把所有頁面在ps里設(shè)計好，再導(dǎo)入到Dreamweaver里進行代碼設(shè)計，否則會為后來增加更多的工作量。4.修改頁面的背景顏色，可以在

7、修改-頁面屬性進行設(shè)置。5.在對頁面添加鏈接時，切記要使用鏈接的相對地址，否則會使網(wǎng)站傳送到服務(wù)器端將無法顯示的問題。6.最好將所有網(wǎng)頁中使用到的圖片放置在同一個文件夾下，這樣便于后期查錯的管理和修改。7. 在使用ps導(dǎo)出為web格式時，要事先將各個模塊切割好，便于到Dreamweaver里進行代碼設(shè)計。8.設(shè)計好后要對整個網(wǎng)站進行調(diào)試與測試。5 小 結(jié)隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和日益更新，網(wǎng)絡(luò)為人們的生活帶來了各種各樣的便利，人們足不出戶便可以買到自己想要的東西，看自己想看的視頻，瀏覽各種各樣的新聞，這一切都歸功于互聯(lián)網(wǎng)，但是僅僅有互聯(lián)網(wǎng)是遠遠不夠的，如果只有互聯(lián)網(wǎng)人們并不能獲得自己想要的東西，所

8、以網(wǎng)站作為互聯(lián)網(wǎng)中的一個關(guān)鍵節(jié)點起著至關(guān)重要的作用，通過各種網(wǎng)站人們才能找到自己想要的東西，而網(wǎng)頁作為網(wǎng)站的內(nèi)容與載體更是起到了不可小覷的作用。一個網(wǎng)站的網(wǎng)頁制作的是否精美，是否符合網(wǎng)站主題，關(guān)系到客戶的直接感受，關(guān)系到人們是否愿意訪問并停留在這個頁面，最終的是關(guān)系到網(wǎng)站最后的整體收益，當今，網(wǎng)站大多是作為一種盈利性的手段而存在的，所以在對其網(wǎng)頁進行設(shè)計時，應(yīng)盡可能多的從客戶和收益方面考慮，當然一些公益性的網(wǎng)站除外，但是即使如此網(wǎng)站也應(yīng)做到盡善盡美，畢竟他是面向整個互聯(lián)網(wǎng)的，是全球化的。所以通過此次課程設(shè)計我深刻的體會到，要想將一個網(wǎng)站設(shè)計的精美，不是一朝一夕就能完成的事情，我們需要先做好前期

9、的策劃與設(shè)計，確定好網(wǎng)站的主題，圍繞著主題進行一系列的頁面設(shè)計，在設(shè)計的時候一定要在腦海中有個基本的雛形，最好是將整個設(shè)計的思路通過圖形化的方式，繪制到圖紙上或是電腦中，便于后期使用軟件進行圖形化制作時提供便利。在使用Dreamweaver進行這個頁面的代碼設(shè)計時，切記要對整個頁面進行居中操作，為熱點添加鏈接時，最好一次性將整個網(wǎng)頁的鏈接添加，否則二次打開進行添加會大大增加工作量。最后最重要的就是要對整個網(wǎng)站進行測試與調(diào)整，只有完成了這些才算是真正的完成了一個網(wǎng)站網(wǎng)頁的設(shè)計與制作。致謝在這次網(wǎng)頁制作課程設(shè)計中，我的老師和同學給了我及大的幫助。特別是我的指導(dǎo)老師樊郁徽老師，還有我的網(wǎng)頁制作任課老師章功干老師。在此，我對他們表示感謝!感謝他們在我面對困難時給了我?guī)椭椭С帧Ｒ哺兄x那些給我?guī)椭乃型瑢W！參考文獻1郝軍啟，劉治國，趙喜來等著.Dreamweaver cs4網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)標準