WEB項目設(shè)計報告

《WEB項目設(shè)計報告》由會員分享，可在線閱讀，更多相關(guān)《WEB項目設(shè)計報告（12頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、《web技術(shù)及應(yīng)用》大作業(yè)項目報告 《web技術(shù)及應(yīng)用》項目設(shè)計報告 ——同濟(jì)大學(xué)EP車隊官網(wǎng) 指導(dǎo)老師：曹建平 老師 小組成員：陳霏霏082085 黃毓敏082172 尹攀飛082226 目錄 1、題目……………………………………………………第3頁 2、項目背景………………………………………………第3頁 3、需求分析………………………………………………第3頁 4、整體設(shè)計…………………………

2、……………………第4頁 5、詳細(xì)設(shè)計（數(shù)據(jù)庫設(shè)計、功能模塊設(shè)計）…………第5頁 6、小組分工………………………………………………第10頁 7、心得體會………………………………………………第11頁 【題目】 同濟(jì)大學(xué)EP車隊官網(wǎng) 【項目背景】 隨著日益增長的能源消耗和嚴(yán)峻的環(huán)境問題，節(jié)能環(huán)保已成為當(dāng)今汽車設(shè)計的主題。作為汽車工業(yè)未來的中堅力量，同濟(jì)大學(xué)EP項目以學(xué)生為團(tuán)隊，致力于設(shè)計研發(fā)節(jié)能環(huán)保的EP節(jié)能賽車,參加世界EP節(jié)能競技大賽，用他們年輕的激情與活力詮釋節(jié)能環(huán)保的公益主題。同濟(jì)大學(xué)志遠(yuǎn)車隊

3、成立于2000年，至今已走過了11年的風(fēng)雨。在2010年結(jié)束的日本“本田宗一郎杯”節(jié)能競技大賽，中國節(jié)能競技大賽以及 殼牌馬拉松節(jié)能環(huán)保大賽三大賽事中，志遠(yuǎn)車隊均表現(xiàn)出色，在國內(nèi)外取得了傲人的佳績，為今后的發(fā)展奠定了堅實的基礎(chǔ)。 我們小組中有EP車隊中的“中堅力量”，對EP有著特殊的情感，并希望能有更多的人能了解我們，且加入到我們“環(huán)保愛車一族”中來，所以，我們希望做這個網(wǎng)頁能成為大家交流的平臺和切磋的場地。 【需求分析】 環(huán)保是當(dāng)今世界的一大主題，而汽車工業(yè)又是近幾年來蓬勃向上的產(chǎn)業(yè)，不論是F1賽事的火紅，還是汽車市場的“走俏”，都預(yù)示著社會對其的強(qiáng)烈關(guān)注度；并且汽車對環(huán)境也起

4、著至關(guān)重要的作用。所以，作為一個社會人，會關(guān)心汽車，會關(guān)心環(huán)保，更會關(guān)心環(huán)保汽車的進(jìn)展。當(dāng)今世界上都活躍著那么一些人，為此奮斗著，做出創(chuàng)新，參加比賽；也有那么一些人，確無從獲得此方面的消息，無法投身其中。 環(huán)保車網(wǎng)頁就此有了需求，其中我們同濟(jì)大學(xué)汽車學(xué)院也占了一席之地——EP志遠(yuǎn)車隊！ 【整體設(shè)計】 由于這是一個比較實用性的、來源相對官方的網(wǎng)站，因此風(fēng)格較為簡約樸素，廣告比較少，頁面并不華麗，更多的精力放在了網(wǎng)站的實用性、安全性建設(shè)上。 來訪本網(wǎng)站的用戶，被嚴(yán)格的分成了類，每一類用戶都有不同的權(quán)限。 1.管理員?？梢栽L問所有的頁面，同時還設(shè)有管理員專用通道（當(dāng)se

5、ssion中user_name是“Admin”時，可以訪問并管理車隊最機(jī)密的信息），管理員可以通過此通道查詢、修改、添加、刪除任何用戶。 2.車隊成員?？梢栽L問任何頁面（除去管理員刪減人員的頁面“admin.aspx”）。一些頁面上還會顯示學(xué)生的姓名（從實現(xiàn)存在于數(shù)據(jù)庫中的車隊成員名單“userinfo.mdb”中提取。由于要輸入所有車隊成員的信息這個過程過于繁瑣，所以，我們選擇填了幾個人的基本資料） 3.非車隊成員?？梢栽L問除去車隊資源下載，上傳的頁面外的所有頁面。一些頁面上還會顯示改用戶的昵稱。 以上所做的這些，最中心的目的就是保證安全性。這是本網(wǎng)站設(shè)計的亮點所在。

6、 【詳細(xì)設(shè)計】 由于詳細(xì)敘述起來會比較繁瑣，所以我按照頁面一個一個來介紹 頁面一：Homepage Homepage的設(shè)計亮點有幾下幾個： 1、 登陸名次的顯示，該message會顯示出您是第幾個瀏覽本網(wǎng)頁的。 2、 友情鏈接（此版塊在接下來的各網(wǎng)頁中都會出現(xiàn)），會將我們帶領(lǐng)鏈接到同濟(jì)大學(xué)的官網(wǎng)、同濟(jì)大學(xué)汽車學(xué)院的官網(wǎng)以及汽車學(xué)院創(chuàng)新基地的官網(wǎng)。以便于讓瀏覽者能獲得更多的相關(guān)信息，拓寬他們的視野。 3、 我們也預(yù)留出了一個版塊可以留出來用來招商，放廣告。 4、 登陸以及注冊版塊：如是車隊成員，則在下拉框里選擇“車隊成員”

7、，接著輸入您的姓名和密碼，點擊登錄，網(wǎng)頁會直接帶領(lǐng)你到個人信息版塊，因為車隊成員的信息已經(jīng)完整地輸入在數(shù)據(jù)庫里，并由管理員管理，您可以從此版塊跳轉(zhuǎn)到聊天室，資料管理下載界面和車隊通訊錄界面。如果是非車隊成員，請先點擊注冊，進(jìn)入注冊頁面。注冊完成后，再登錄，則會根據(jù)你剛剛insert的數(shù)據(jù)驗證，并直接帶你跳入聊天界面，可以和車隊成員近距離的接觸和切磋。如果是管理員，則用戶名為“Admin”，可以直接進(jìn)入人員刪減編輯的界面進(jìn)行管理。 頁面二：注冊界面login.aspx login的設(shè)計亮點有以下幾個： 1、 驗證碼的設(shè)計，登錄者會隨機(jī)看到四位數(shù)字，作為驗證碼，且

8、必須填寫。隨著每次刷新頁面，此四位數(shù)字會發(fā)生變化。 2、 在輸入的基本信息中，我們加入了各種驗證控件，包括正則，必須填寫，以及長度規(guī)定的等等。在用戶名注冊的時候，如果你所要注冊的昵稱已經(jīng)有人使用，則不能再申請。 3、 興趣愛好的多項選擇 4、 填完后的資料會添加到空白的數(shù)據(jù)庫表guestinfo.mdb中，進(jìn)行記錄，以便下次登錄。 頁面三：聊天室界面chattingroom.aspx 此界面的亮點有以下幾個： 1、 發(fā)言框上面會用session引過來登陸者的名稱 2、 聊天框里可以選擇字體的不同顏色。發(fā)言后會按照“XXX說：時間
說話的內(nèi)容”發(fā)言的內(nèi)容是你剛選擇

9、的字體的顏色。 3、 按“離開聊天室”就會回到主頁。 4、可以選擇輸入信息的字體大小，顏色，和插入各種表情 頁面五：資源共享界面download.aspx 此頁面就是三圖標(biāo)之一帶領(lǐng)到的網(wǎng)頁，亮點有以下幾個： 1、 瀏覽上傳文件，可從本地將文件上傳到公共網(wǎng)頁，讓大家共享 2、 點擊文件名可下載此文件 3、 點擊刪除按鈕可將此文件刪除 頁面六：車隊通訊錄addresslist.aspx 此頁面呈現(xiàn)車隊成員的通訊錄，改頁面的亮點有下： 1、 車隊成員資料的查詢，用數(shù)據(jù)庫表的查詢語句，可以在userinfo表中查出你要的同學(xué)的基本信息，然后方便車隊成員之間的聯(lián)系和交

10、流。 2、 下方的datalist里呈現(xiàn)著車隊成員的所有聯(lián)系方式。沒耐心尋找的可以使用查詢功能。 頁面七：Technik頁面 此頁面介紹的是有關(guān)EP賽車的一些基本知識，亮點有其下： 1、 點擊不同的圖片可以進(jìn)入到不同的，講述汽車不同的部分的知識的網(wǎng)頁。方便瀏覽者獲取專業(yè)信息。 2、 特別是第一張大圖，我們利用了dreamweaver的熱點功能，點該圖上對應(yīng)的汽車部分，就會跳出有關(guān)這部分知識的網(wǎng)頁。 頁面八：介紹頁面vollstellung.aspx 1、 改頁面主要介紹EP車隊的一些資料。讓大家有一個基本的認(rèn)識。 2、 此頁面下端有一個圖片觀察窗，可以獲得并查看所有有關(guān)

11、的圖片，能讓人有一個直觀的感受。 頁面九：車隊成員個人信息頁user.aspx 此頁面是車隊成員登陸成功后到的頁面 1、 車隊成員同樣可以跳轉(zhuǎn)到三個網(wǎng)頁 2、 并且可以直接根據(jù)自己的信息，進(jìn)行信息的更改編輯。這是通過datalist這個控件來實現(xiàn)達(dá)到的。 頁面十：car頁面autos.aspx 此頁面是展示車隊進(jìn)幾年來賽車圖片的頁面 1、 在下拉框里可以選擇賽車的年份 2、 展示圖片出就會相應(yīng)地跳出相關(guān)的圖片，展示你所要看的賽車。 3、 在圖片上方的label里還會出現(xiàn)相應(yīng)的簡介。 頁面十一：race頁面match.aspx 此頁面展示的

12、是EP所征戰(zhàn)的各大賽事 1、 點擊不同賽事的圖片，就會進(jìn)入該賽事詳細(xì)介紹的網(wǎng)頁。 2、 在有關(guān)賽事的頁面上也設(shè)有圖片展示這一部分。 其余網(wǎng)頁：其余網(wǎng)頁只是單純的信息展示，而并無web程序設(shè)計的有關(guān)交互。所以就不在此贅述了。 由以上的詳細(xì)介紹應(yīng)該可以看到我們此網(wǎng)頁滿足了老師對程序編輯和數(shù)據(jù)庫運用的基本要求。 【小組分工】 小組成員：陳霏霏082085；黃毓敏082172；尹攀飛082226 設(shè)計報告書的撰寫：陳霏霏 申優(yōu)PPT的制作：尹攀飛 網(wǎng)頁框架的制定：陳霏霏，尹攀飛，黃毓敏（討論商量所得） 有關(guān)EP的資料收集：尹攀飛 有關(guān)EP的照片收集：黃毓敏 有關(guān)網(wǎng)頁

13、的美化、排版工作：陳霏霏 滾動圖片窗口的制作：尹攀飛 登陸，注冊以及聊天界面制作以及程序編寫：黃毓敏 technik網(wǎng)頁&Dreamweaver熱點操作的設(shè)計&歷年賽車展示的程序編寫：陳霏霏 race，growth&activity等網(wǎng)頁的制作：尹攀飛 資源共享界面（上傳，下載&刪除）的網(wǎng)頁制作及程序編寫：陳霏霏 個人信息的編輯以及管理員界面對成員進(jìn)行編輯和刪除的制作：尹攀飛 contact us界面和sponsor界面的制作：黃毓敏 【心得體會】 上完這門課，真的是收獲頗豐。我的每一份實驗報告里我都有

14、寫一句話：“實踐檢驗真理”。我覺得這句話用在網(wǎng)頁制作上尤其合適。網(wǎng)頁制作的過程在腦中是十分順暢的，改用哪個控件，編一個什么程序不就可以了嗎？但是當(dāng)你真正在計算機(jī)上實踐時，卻并不是那么回事！“為什么我這句話老是錯呢？明明對的啊？”“哪里沒定義啊，明明定義過了啊”各種各樣的問題，尤其千奇百怪。做這個網(wǎng)頁的過程中，還碰到過用不同的電腦會有不同的結(jié)果的事情。而我們能做的，就是平心靜氣的檢查每一句語句，一遍遍的調(diào)試，一遍遍的修改。再不行就上網(wǎng)搜解決方法，不知不覺中竟然也學(xué)到了不少。想到靠我們自己的力量盡然做出了一個和我們天天瀏覽的網(wǎng)頁差不多的網(wǎng)頁（雖然還存在著很大的差距）。但那份滿足以及自豪是難以掩蓋的。 希望老師在批閱的過程中檢驗我們的勞動成果，有不足的地方歡迎批評指正。 PS：十分感謝曹建平老師在一個學(xué)期中對我們的教導(dǎo)，有時陪著我們一個下午，的確是非常辛苦您了！希望您以后工作，生活一帆風(fēng)順，萬事如意！ 您的學(xué)生：陳霏霏，黃毓敏，尹攀飛 祝好！ 3/14/2022 第 12頁