WEB項(xiàng)目設(shè)計(jì)報(bào)告

1、web技術(shù)及應(yīng)用項(xiàng)目設(shè)計(jì)報(bào)告同濟(jì)大學(xué)EP車隊(duì)官網(wǎng)指導(dǎo)老師：曹建平老師小組成員：陳霏霏082085黃毓敏 082172尹攀飛 082226目錄1323334455610711【題目】同濟(jì)大學(xué) EP 車隊(duì)官網(wǎng)【項(xiàng)目背景 】隨著日益增長的能源消耗和嚴(yán)峻的環(huán)境問題，節(jié)能環(huán)保已成為當(dāng)今汽車設(shè)計(jì)的主題。作為汽車工業(yè)未來的中堅(jiān)力量，同濟(jì)大學(xué) EP 項(xiàng)目以學(xué)生為團(tuán)隊(duì)， 致力于設(shè)計(jì)研發(fā)節(jié)能環(huán)保的 EP 節(jié)能賽車 ,參加世界 EP 節(jié)能競技大賽，用他們年輕的激情與活力詮釋節(jié)能環(huán)保的公益主題。同濟(jì)大學(xué)志遠(yuǎn)車隊(duì)成立于 2000 年，至今已走過了 11 年的風(fēng)雨。在 2010 年結(jié)束的日本 “本田宗一郎杯 ”節(jié)能競技大

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

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

4、、刪除任何用戶。2. 車隊(duì)成員?？梢栽L問任何頁面（除去管理員刪減人員的頁面“上還會(huì)顯示學(xué)生的姓名（從實(shí)現(xiàn)存在于數(shù)據(jù)庫中的車隊(duì)成員名單“admin.aspx ”）。一些頁面userinfo.mdb ”中提取。由于要輸入所有車隊(duì)成員的信息這個(gè)過程過于繁瑣，所以，我們選擇填了幾個(gè)人的基本資料）3. 非車隊(duì)成員?？梢栽L問除去車隊(duì)資源下載，上傳的頁面外的所有頁面。一些頁面上還會(huì)顯示改用戶的昵稱。以上所做的這些，最中心的目的就是保證安全性。這是本網(wǎng)站設(shè)計(jì)的亮點(diǎn)所在?！驹敿?xì)設(shè)計(jì) 】由于詳細(xì)敘述起來會(huì)比較繁瑣，所以我按照頁面一個(gè)一個(gè)來介紹頁面一： Homepage Homepage的設(shè)計(jì)亮點(diǎn)有幾下幾個(gè)：1、登

5、陸名次的顯示，該message會(huì)顯示出您是第幾個(gè)瀏覽本網(wǎng)頁的。2、友情鏈接（此版塊在接下來的各網(wǎng)頁中都會(huì)出現(xiàn)），會(huì)將我們帶領(lǐng)鏈接到同濟(jì)大學(xué)的官網(wǎng)、同濟(jì)大學(xué)汽車學(xué)院的官網(wǎng)以及汽車學(xué)院創(chuàng)新基地的官網(wǎng)。以便于讓瀏覽者能獲得更多的相關(guān)信息，拓寬他們的視野。3、我們也預(yù)留出了一個(gè)版塊可以留出來用來招商，放廣告。4、登陸以及注冊(cè)版塊：如是車隊(duì)成員，則在下拉框里選擇“車隊(duì)成員”，接著輸入您的姓名和密碼，點(diǎn)擊登錄，網(wǎng)頁會(huì)直接帶領(lǐng)你到個(gè)人信息版塊，因?yàn)檐囮?duì)成員的信息已經(jīng)完整地輸入在數(shù)據(jù)庫里，并由管理員管理，您可以從此版塊跳轉(zhuǎn)到聊天室，資料管理下載界面和車隊(duì)通訊錄界面。如果是非車隊(duì)成員，請(qǐng)先點(diǎn)擊注冊(cè)，進(jìn)入注冊(cè)頁面

6、。注冊(cè)完成后，再登錄，則會(huì)根據(jù)你剛剛insert的數(shù)據(jù)驗(yàn)證，并直接帶你跳入聊天界面，可以和車隊(duì)成員近距離的接觸和切磋。如果是管理員，則用戶名為“Admin”，可以直接進(jìn)入人員刪減編輯的界面進(jìn)行管理。頁面二：注冊(cè)界面login.aspxlogin的設(shè)計(jì)亮點(diǎn)有以下幾個(gè)：1、驗(yàn)證碼的設(shè)計(jì)，登錄者會(huì)隨機(jī)看到四位數(shù)字，作為驗(yàn)證碼，且必須填寫。隨著每次刷新頁面，此四位數(shù)字會(huì)發(fā)生變化。2、在輸入的基本信息中，我們加入了各種驗(yàn)證控件，包括正則，必須填寫，以及長度規(guī)定的等等。在用戶名注冊(cè)的時(shí)候，如果你所要注冊(cè)的昵稱已經(jīng)有人使用，則不能再申請(qǐng)。3、興趣愛好的多項(xiàng)選擇4、填完后的資料會(huì)添加到空白的數(shù)據(jù)庫表guest

7、info.mdb中，進(jìn)行記錄，以便下次登錄。頁面三：聊天室界面chattingroom.aspx此界面的亮點(diǎn)有以下幾個(gè)：1、發(fā)言框上面會(huì)用session 引過來登陸者的名稱2、聊天框里可以選擇字體的不同顏色。發(fā)言后會(huì)按照“XXX說：時(shí)間 <br>說話的內(nèi)容”發(fā)言的內(nèi)容是你剛選擇的字體的顏色。3、按“離開聊天室”就會(huì)回到主頁。4、可以選擇輸入信息的字體大小，顏色，和插入各種表情頁面五：資源共享界面download.aspx此頁面就是三圖標(biāo)之一帶領(lǐng)到的網(wǎng)頁，亮點(diǎn)有以下幾個(gè)：1、瀏覽上傳文件，可從本地將文件上傳到公共網(wǎng)頁，讓大家共享2、點(diǎn)擊文件名可下載此文件3、點(diǎn)擊刪除按鈕可將此文件刪除

8、頁面六：車隊(duì)通訊錄addresslist.aspx此頁面呈現(xiàn)車隊(duì)成員的通訊錄，改頁面的亮點(diǎn)有下：1、車隊(duì)成員資料的查詢，用數(shù)據(jù)庫表的查詢語句，可以在userinfo表中查出你要的同學(xué)的基本信息，然后方便車隊(duì)成員之間的聯(lián)系和交流。2、下方的 datalist里呈現(xiàn)著車隊(duì)成員的所有聯(lián)系方式。沒耐心尋找的可以使用查詢功能。頁面七： Technik 頁面此頁面介紹的是有關(guān)EP賽車的一些基本知識(shí)，亮點(diǎn)有其下：1、點(diǎn)擊不同的圖片可以進(jìn)入到不同的，講述汽車不同的部分的知識(shí)的網(wǎng)頁。方便瀏覽者獲取專業(yè)信息。2、特別是第一張大圖，我們利用了dreamweaver的熱點(diǎn)功能，點(diǎn)該圖上對(duì)應(yīng)的汽車部分，就會(huì)跳出有關(guān)這部

9、分知識(shí)的網(wǎng)頁。頁面八：介紹頁面vollstellung.aspx1、改頁面主要介紹EP車隊(duì)的一些資料。讓大家有一個(gè)基本的認(rèn)識(shí)。2、此頁面下端有一個(gè)圖片觀察窗，可以獲得并查看所有有關(guān)的圖片，能讓人有一個(gè)直觀的感受。頁面九：車隊(duì)成員個(gè)人信息頁user.aspx此頁面是車隊(duì)成員登陸成功后到的頁面1、車隊(duì)成員同樣可以跳轉(zhuǎn)到三個(gè)網(wǎng)頁2、并且可以直接根據(jù)自己的信息，進(jìn)行信息的更改編輯。這是通過datalist這個(gè)控件來實(shí)現(xiàn)達(dá)到的。頁面十： car 頁面 autos.aspx此頁面是展示車隊(duì)進(jìn)幾年來賽車圖片的頁面1、在下拉框里可以選擇賽車的年份2、展示圖片出就會(huì)相應(yīng)地跳出相關(guān)的圖片，展示你所要看的賽車。3、

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

11、的資料收集：尹攀飛有關(guān) EP的照片收集：黃毓敏有關(guān)網(wǎng)頁的美化、排版工作：陳霏霏滾動(dòng)圖片窗口的制作：尹攀飛登陸，注冊(cè)以及聊天界面制作以及程序編寫：黃毓敏technik網(wǎng)頁 &Dreamweaver熱點(diǎn)操作的設(shè)計(jì) &歷年賽車展示的程序編寫：陳霏霏race ，growth&activity等網(wǎng)頁的制作：尹攀飛資源共享界面（上傳，下載 &刪除）的網(wǎng)頁制作及程序編寫：陳霏霏個(gè)人信息的編輯以及管理員界面對(duì)成員進(jìn)行編輯和刪除的制作：尹攀飛 contact us 界面和 sponsor 界面的制作：黃毓敏【心得體會(huì) 】上完這門課，真的是收獲頗豐。我的每一份實(shí)驗(yàn)報(bào)告里我都有寫一句話： “實(shí)踐檢驗(yàn)真理”。我覺得這句話用在網(wǎng)頁制作上尤其合適。網(wǎng)頁制作的過程在腦中是十分順暢的，改用哪個(gè)控件，編一個(gè)什么程序不就可以了嗎？但是當(dāng)你真正在計(jì)算機(jī)上實(shí)踐時(shí)，卻并不是那么回事！“為什么我這句話老是錯(cuò)呢？明明對(duì)的?。俊?“哪里沒定義啊，明明定義過了啊”各種各樣的問題，尤其千奇百怪。做這個(gè)網(wǎng)頁的過程中，還碰到過用不同的電腦會(huì)有不同的結(jié)果的事情。而我們能做的，就是平心靜氣的檢查每一句語句，一遍遍的調(diào)試，一遍遍的修改。再不行就上網(wǎng)搜解決方法，不知不覺中竟然也學(xué)到了不