網頁設計課程設計報告書

PAGEPAGE17河南城建學院《網頁設計》課程設計報告學號：專業(yè)：信息管理與信息系統(tǒng)姓名：題目：旅游河南網指導老師：設計時間：6月18~6月21計算機科學與工程系2012年6月一、設計目的 31、課程目的 32、背景 3二、需求分析 41、河南旅游現(xiàn)狀分析 42、網站所需功能 53、資料需求分析 5三、功能模塊分析及設計 61、功能模塊圖 62、功能模塊設計 71）登錄注冊模塊 72）導航欄模塊 73）搜索模塊 7四、制作過程及要點 81、首頁布局設計 82、分工設計 91）“更多”項的鏈接網頁 92）“山水”導航欄的鏈接網頁 113）“旅途光影”的鏈接網頁 123、合并所有網頁 13五、系統(tǒng)介紹或功能展示 14六、設計總結 16七、參考資料 17

一、設計目的1、課程目的DreamweaverCS4網頁課程設計作為獨立的教學環(huán)節(jié)，是信息管理與信息系統(tǒng)專業(yè)集中實踐性環(huán)節(jié)系列之一，是學習完《DreamweaverCS4多媒體教學》課程后進行的一次全面的綜合練習。其目的在于加深對DreamweaverCS4應用基礎理論和基本知識的理解，掌握使用網頁設計分析、設計的基本方法，提高解決實際管理問題、開發(fā)信息系統(tǒng)的實踐能力。同時課程設計應充分體現(xiàn)“教師指導下的以學生為中心”的教學模式，以學生為認知主體，充分調動學生的積極性和能動性，重視學生自學能力的培養(yǎng)。2、背景快速發(fā)展的今天，互聯(lián)網成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經濟、生活等各個方面發(fā)揮著重要的作用。不論是最新的新聞信息,新產品的出臺,新游戲的發(fā)布,最新的各種IT動態(tài),包括等候就業(yè)人才的個人簡歷,我們都是可以通過網絡來獲得。旅游網站作為信息技術與旅游業(yè)高度結合的產物，旅游市場營銷的一個重要發(fā)展趨向就是人本化、信息化和高效化。無疑就是這一發(fā)展趨勢的集中體現(xiàn)。1999年，世界旅游組織明確將旅游網絡作為信息時代旅游市場營銷的重要的戰(zhàn)略方式和手段。明確的信息傳遞是旅游業(yè)的天性，這就意味著因特網和網絡技術在提升旅游目的地競爭力和市場營銷方面的重要作用。互聯(lián)網的交互性、實時性、豐富性和便捷性等優(yōu)勢促使傳統(tǒng)旅游業(yè)迅速融入網絡經濟的浪潮之中?，F(xiàn)在全球電子商務交易總額中，旅游電子商務已占到1/5份額，成為全球電子商務的第一行業(yè)。二、需求分析1、河南旅游現(xiàn)狀分析河南，是中華民族最為重要的發(fā)祥地和發(fā)源地、華夏歷史文明傳承創(chuàng)新區(qū)。從夏代到北宋，先后有20個朝代建都或遷都于此，長期是全國政治、經濟、文化中心。從中國歷史上第一個王朝夏朝在商丘建都起，河南又孕育了洛陽、開封、安陽、鄭州等聞名海內外的古都，中國八大古都中河南占其四。全省有全國重點文物保護單位189處，地下文物和館藏文物均居全國首位。河南是姓氏的重要發(fā)源地，中國300個大姓中根在河南的有171個，有“陳林半天下，黃鄭排滿街”之稱的海外四大姓氏均起源于河南。2011年河南省接待海內外游客3.07億人次，其中入境游客168.29萬人次，旅游總收入2802億元。共有4A級以上景區(qū)84處。當然，河南旅游業(yè)也存在不少問題。首先，旅游服務體系結構不合理。河南省旅游服務體系基本完善，但由于全省旅游經濟發(fā)展不平衡，各地市旅游服務體系發(fā)展也參差不齊，在基礎設施、彈性要素、外部保障體系等方面與資源及其河南在全國的地位不相吻合。其次，旅游專業(yè)人才匱乏。21世紀企業(yè)競爭主要體現(xiàn)在人才的競爭，河南省旅游業(yè)的發(fā)展很大程度上受人才短缺、管理水平低下的制約。旅游資源開發(fā)與規(guī)劃管理、人力資源管理、企業(yè)管理、景觀設計、市場營銷等方面的高素質人才嚴重短缺，這些都極大地制約了河南旅游的高層次地發(fā)展。其次，河南省目前還缺少一個公益性的旅游信息網絡宣傳平臺。近日，河南省旅游局聯(lián)合河南省旅100游信息化工作領導小組辦公室對省轄市旅游局網站進行了首次試行綜合評估。此次評估結果顯示，各省轄市旅游局網站建設整體尚處于發(fā)展階段。多數(shù)市旅游局重視旅游信息化建設，不斷完善旅游門戶網站建設，以電子政務創(chuàng)新旅游管理，有力提升了旅游信息化水平，但普遍還存在政府信息公開、交流互動、旅游管理系統(tǒng)應用上的欠缺，網站技術建設和網絡安全還有待進一步加強。2、網站所需功能本網站旨在免費為廣大國內游客提供豐富的河南省內旅游信息，及時更新各種旅游資訊，為旅客提供吃、食、住、行等各方面信息，并為游客提供旅游圖片交流區(qū)，是一個公益宣傳為主，交流互動為輔的現(xiàn)代旅游網站平臺。3、資料需求分析為了實現(xiàn)站內含有豐富的河南省內旅游信息，并及時更新各種旅游資訊，為旅客提供吃食、住、行等各方面信息，可在站內實現(xiàn)旅游搜索，且為游客提供旅游圖片交流區(qū)，經過我們小組成員對關于本網站方面的調查分析，現(xiàn)初步需要收集整理以下資料：1）全省各市的旅游景點介紹，包括：圖片、歷史、位置、門票、交通等信息2）各景區(qū)的即時資訊3）一些關于河南的視頻及音樂文件4）適合作為網站內插圖的個性圖片等其他資料5）建立一個關于用戶數(shù)據(jù)庫系統(tǒng)，包含用戶名及密碼6）一些優(yōu)秀的互聯(lián)網網站鏈接

三、功能模塊分析及設計1、功能模塊圖經過對本網站的基本需求分析，網站首頁可設計出登錄注冊模塊、導航欄模塊、搜索模塊、旅游資訊模塊、旅游鏈接模塊、圖片模塊共計6大模塊，用戶可以根據(jù)自己的需要在這些模塊上進行不同的操作，實現(xiàn)自己的需求。其功能模塊操作流程圖如圖3-1：網站首頁網站首頁登錄瀏覽注冊地址鏈接旅游資訊旅游鏈接圖片區(qū)登錄上傳圖片返回首頁搜索圖3-12、功能模塊設計1）登錄注冊模塊用戶通過該模塊注冊登陸，從而能實現(xiàn)本站會員所特有的功能。2）導航欄模塊用戶通過點擊導航欄中的不同地市鏈接位置，可以進入相應的地市專題子網頁中，進而瀏覽更多更全面的關于當?shù)氐穆糜涡畔ⅰ?）搜索模塊在搜索框中輸入查詢的關鍵字查詢，可以再在站內搜索出相關內容。4）旅游資訊模塊本模塊為即時熱點旅游資訊，通過點擊“旅游資訊”標題，進入到旅旅游資訊子網頁中，可以瀏覽更多資訊；點擊各資訊標題，則進入到相應的資訊中。5）旅游鏈接模塊用戶通過點擊導航欄中的不同鏈接位置，可以進入相應的專題子網頁中；點擊更多，進入到相應的子網頁中，進而瀏覽更多更全面的旅游信息。6）圖片模塊用戶可以在首頁“旅途光影”中簡單瀏覽一些圖片，單擊圖片，進入到相應的專題網頁中瀏覽更多圖片；單擊“旅途光影”，進入到圖片專題網頁中，可以瀏覽更多圖片，還可以注冊登錄后上傳圖片。

四、制作過程及要點1、首頁布局設計在做好網站需求分析和模塊分析設計后，我們小組成員一起對首頁布局進行了分析討論，并畫出了簡要的大概布局圖，如圖4-1：注冊登錄框網站標題欄各地市導航欄更多搜索欄Flash欄旅游資訊走馬燈熱門排行城市導航更多人文景區(qū)山水景區(qū)歷史景區(qū)圖片區(qū)（旅途光影）友情鏈接欄版權欄圖4-12、分工設計完成網站首頁基本布局后，我們對小組工作進行了個人分工，我主要負責各地市導航欄中的“更多”項的鏈接網頁及該網頁的其他鏈接網頁的制作、城市導航欄中的“更多”項的鏈接網頁及該網頁的其他鏈接網頁的制作、山水導航欄所鏈接的網頁制作、旅途光影欄所鏈接的網頁制作。考慮到分工后我們要在各自的電腦上分別建立站點，為避免以后所有網頁合后出現(xiàn)文件鏈接不正確等問題，我們就統(tǒng)一規(guī)定站點建立在F盤名為“旅游河南”的文件夾中，圖片則放在其子文件夾“images”中。1）“更多”項的鏈接網頁首先，我上網查詢了一下全省共有18個地級市，并了解了各市的基本信息及旅游景點，然后又收集了一些各地的熱門景點的文字及圖片信息，然后分析匯總，并下載了一些個性圖片用于網頁布局，然后制作出了“河南旅游網—更多城市”主頁面，如下圖4-2：圖4-2搜索框左邊的河南歷史文字部分為走馬燈效果，代碼為：<marqueealigh=leftbgcolor=#00FFFFdirection=leftbehavior=scrollheight=30hspace=1scrollamount=2Scrolldelay=1width=480VSpace=1loop=-1>其次，該頁面完成后，我又對其中的一些地市建立了超鏈接，如我的家鄉(xiāng)駐馬店，其鏈接頁面如下圖4-3：圖4-3最后，我又對各地市的頁面中建立了鏈接頁面，如駐馬店頁面中的“地理”，其頁面如下圖4-4：圖4-42）“山水”導航欄的鏈接網頁我先對網站首頁“山水”導航欄的幾個景區(qū)建立了超鏈接網頁，如云臺山，其頁面如下圖4-5：圖4-5然后又對“山水”導航欄的“更多”項建立了超鏈接網頁，其頁面如下圖4-6：圖4-63）“旅途光影”的鏈接網頁在制作“旅途光影”的鏈接網頁時，我采用了上方固定，左側嵌套的框架結構，根據(jù)左側頁面內的鏈接，左側主界面可顯示出相應的頁面，如下圖4-7：圖4-7

3、合并所有網頁1）小組成員都完成各自分工后，開始合并各自站點內的文件到一臺電腦的站點中，所有圖片應放到“images”文件夾中，其他文件直接放在“旅游河南”文件夾的根目錄里，如下圖4-8：圖4-82）然后對子網頁中有返回首頁的，建立超鏈接至首頁。所有鏈接建立后，從首頁開始瀏覽，依次點開擊各超鏈接，檢查各頁面是否正確出效果。確保各項頁面信息顯示均正常后，則本靜態(tài)網站設計圓滿結束！

五、系統(tǒng)介紹或功能展示1、用戶通過登錄注冊模塊注冊登陸，從而能實現(xiàn)本站會員所特有的功能。2、用戶通過點擊導航欄中的不同的鏈接位置，可以進入相應的地市專題子網頁中，進而瀏覽更多更全面的關于當?shù)氐穆糜涡畔?。如點首頁導航欄中的“更多”進入到更多城市的介紹頁面，然后再點擊“平頂山”進入到平頂山的專題網頁，其效果依次如下圖5-1：圖5-13、在搜索框中輸入查詢的關鍵字查詢，可以再在站內搜索出相關內容。4、旅游資訊模塊為即時熱點旅游資訊，通過點擊“旅游資訊”標題，進入到旅旅游資訊子網頁中，可以瀏覽更多資訊；點擊各資訊標題，則進入到相應的資訊中。5、首頁中插入了一段視頻，并且在頁面其他部分對一些圖片采用走馬燈的形式出現(xiàn)，或是添加了一些動態(tài)圖片，增加了頁面的美觀。6、用戶可以在首頁“旅途光影”中簡單瀏覽一些圖片，單擊圖片，進入到相應的專題網頁中瀏覽更多圖片；單擊“旅途光影”，進入到圖片專題網頁中，可以瀏覽更多圖片，還可以注冊登錄后上傳圖片。如下圖5-2：圖5-2六、設計總結不知不覺,三天的的《網頁設計》的課程設計已經過去,回顧這幾天的日子,真的令我體會很深,也學會很多東西,懂得很多以前不懂的東西,也明白了一些事情。自從第一天接觸《網頁設計》課程，我以下定決心要把網頁這門課學好，做出一個優(yōu)秀的網站。所以我時刻沒有錯過任何學習的機會，無論在課堂上,還是在課外上。回顧這次的課程設計，我覺得我過得很充實，很有意義,因為我可以誠實的說在這幾天里我每時每刻都在設計網站,還記得晚上做網站做到一、二點，可能有人會說我傻，但正因為這個傻的行動，令我學會很多東西，學會別人不懂的東西，做出一個令自己滿意的網站，可能跟別人比還需要繼續(xù)完善，但我不會因為課程設計結束，就把網頁設計拋到九霄云外，我會繼續(xù)學習網頁設計技術，把它變?yōu)樽约旱囊豁椞亻L。作為網頁設計的初學者，我對網頁設計非常感興趣，想設計出一個美觀、實用、內容豐富的個人網頁。我通過自己動手、動腦，通過網絡資源和老師的指導，在不斷發(fā)現(xiàn)問題和解決問題的過程中學到了很多知識，增強了我的創(chuàng)作能力和動手能力，在網頁設計過程中，從構思到設計、完善、維護，整個過程我都全身心投入，使我真正學到了網頁設計的知識。在本次網頁設計中，我不僅學到了很多關于網頁設計方面的知識，也從中學會了關于使用網頁制作軟件方面的知識。在這個過程中，我通過上網搜集資料自學了Dreamweaver網頁軟件的應用，學會了簡單地使用Dreamweaver。在設計過程中也出現(xiàn)了很多的問題，但上網查找、小組討論等方式，不斷地學習、提高，設計出的網頁也在不斷的進步?？梢哉f在自己動手，不斷實踐的過程中，網頁設計水平得到了很大的提高。在這個制作過程中，我學會了面對困難和挑戰(zhàn)，但我十分享受這一過程，這是一個能令人感覺到收獲的過程，這次的網頁制作使我產生很強的成就感。制作網頁開始的時候還是興致勃勃，充滿激情的。但是學習內容越來越多，就逐漸感覺有點思維混亂，開始煩躁，失去了當初的那種興奮的感覺，原來在自己看來是一種樂趣的事情，現(xiàn)在卻成了一種負擔。但我堅持一步步做下來，到看到成品時，內心得到了強烈的滿足感，從中使我感悟到：學習網頁制作需要耐心，如果你沒有耐心，你就學不會，因為當你碰到問題時，如果不能立刻得到問題的答案，你就可能做不下去了。學習網頁制作需要堅持，堅持不斷地學習，才能作出理想的作品，才能更加充實自己。通過這次課程設計，我也認識到，學習網頁制作不能一蹴而就，它是一個循序漸進的積累過程。想