前端畢業(yè)設(shè)計(jì)范文

1、前端畢業(yè)設(shè)計(jì)范文滁州職業(yè)技術(shù)學(xué)院信息工程系xx屆軟件專(zhuān)業(yè)畢業(yè)姓名：班級(jí)：設(shè)計(jì)課題：指導(dǎo)教師：xx年11月13日摘要21世紀(jì)是信息高速發(fā)達(dá)的時(shí)代，網(wǎng)絡(luò)作為當(dāng)今最流行最方便快捷的媒介也越來(lái)越被人們接受，并且融入我們的生活。隨著旅游類(lèi)的網(wǎng)站不斷推進(jìn)，網(wǎng)站的作用超越了傳統(tǒng)的信息獲取，交流它更能體現(xiàn)組織機(jī)構(gòu)的風(fēng)采，性質(zhì)。所以旅游類(lèi)的網(wǎng)站對(duì)現(xiàn)在的發(fā)展已經(jīng)勢(shì)在必行。本主要圍繞旅游網(wǎng)站為開(kāi)發(fā)主題，最基本也是最必須的三個(gè)技能。前端的開(kāi)發(fā)中，在頁(yè)面的布局時(shí)，HTML將元素進(jìn)行定義，CSS寸展示的元素進(jìn)行定位，再通過(guò)JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然表面看起來(lái)這些很簡(jiǎn)單，但這里面需要掌握的東西絕對(duì)不會(huì)少

2、。在進(jìn)行開(kāi)發(fā)前，需要對(duì)這些概念弄清楚，弄明白，這樣在開(kāi)發(fā)的過(guò)程中才會(huì)得心應(yīng)手。分析并解決實(shí)現(xiàn)中的若干技術(shù)問(wèn)題；介紹了個(gè)性化頁(yè)面的背景；闡述整個(gè)個(gè)性化頁(yè)面生成系統(tǒng)的系統(tǒng)結(jié)構(gòu)及工作原理；分析了系統(tǒng)實(shí)現(xiàn)中的特殊性，難點(diǎn)和重點(diǎn)；雖然還沒(méi)有設(shè)計(jì)用戶(hù)注冊(cè)，用戶(hù)登錄，用戶(hù)管理，但是我會(huì)把自己的網(wǎng)站以一種簡(jiǎn)單明了的方式向大家展現(xiàn)出旅游的各個(gè)方面。分析并解決實(shí)現(xiàn)中的若干技術(shù)問(wèn)題；建立完整的旅游網(wǎng)站，進(jìn)行測(cè)試并分析結(jié)果。本網(wǎng)站的建立的作用具有一目了然的特性，不僅能讓本地區(qū)的人們了解更多的旅游資料，更可讓世界各地的人了解一些地區(qū)的明文風(fēng)該網(wǎng)站中還存在一些不足之處，如網(wǎng)站的留言系統(tǒng)、用戶(hù)注冊(cè)、用戶(hù)登錄沒(méi)建立等等。這些

3、問(wèn)題和功能有待于進(jìn)一步學(xué)習(xí)和添加。關(guān)鍵詞：網(wǎng)站設(shè)計(jì)XHTMLCSSjavaScript和JQuery目錄目錄.3第一章緒論41.1 弓|言41.2 旅游網(wǎng)站發(fā)展現(xiàn)狀41.3 本課題目的與意義6第二章開(kāi)發(fā)工具和開(kāi)發(fā)技術(shù)簡(jiǎn)介72.1 Dreamweaver簡(jiǎn)介72.2 PhotoShop簡(jiǎn)介82.3 AdobeFlash簡(jiǎn)介92.4 HTML語(yǔ)言簡(jiǎn)介92.5 CSS簡(jiǎn)介10第三章需求分析123.1 網(wǎng)站系統(tǒng)分析123.2 功能性需求分類(lèi)123.3 非功能性需求13第四章網(wǎng)站開(kāi)發(fā)過(guò)程及實(shí)現(xiàn)144.1 創(chuàng)建站點(diǎn)144.2 首頁(yè)設(shè)計(jì)154.2.1 首頁(yè)頂部設(shè)計(jì)164.2.2 導(dǎo)航欄設(shè)計(jì)184.2.3 首

4、頁(yè)主要內(nèi)容設(shè)計(jì)204.2.4 首頁(yè)底部設(shè)計(jì)254.3 其余頁(yè)面的制作254.3.1 2級(jí)頁(yè)面的制作：254.3.2 3級(jí)頁(yè)面設(shè)計(jì)284.4測(cè)試30第五章結(jié)論32致謝34第一章緒論1.1 引言新的世紀(jì)，互聯(lián)網(wǎng)進(jìn)入一個(gè)嶄新的階段，信息化的發(fā)展帶動(dòng)其它產(chǎn)業(yè)的發(fā)展，各行業(yè)都將與它進(jìn)行更深入的融合和滲透。，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活、旅游等各個(gè)方面發(fā)揮著重要的作用。為了適應(yīng)知識(shí)經(jīng)濟(jì)社會(huì)的需要，促進(jìn)學(xué)習(xí)與交流。網(wǎng)上交流和協(xié)作的功能比較普遍；技術(shù)管理和資源管理受到重視。隨著互聯(lián)網(wǎng)的普及和發(fā)展，必將有越來(lái)越多的企業(yè)及個(gè)人在英特網(wǎng)上擁有自己的網(wǎng)站。網(wǎng)站建設(shè)成為企業(yè)

5、形象宣傳、產(chǎn)品展示推廣、客戶(hù)溝通的最新最快捷的橋梁；成為個(gè)人展示自我，與世界交流的重要平臺(tái)。越來(lái)越多的人已開(kāi)始從對(duì)互聯(lián)網(wǎng)的認(rèn)知階段進(jìn)入到認(rèn)同和行動(dòng)階段。Inter上發(fā)布信息主要是通過(guò)網(wǎng)站來(lái)實(shí)現(xiàn)的，獲取信息也是要在Inter“海洋”中按照一定的檢索方式將所需要的信息從網(wǎng)站上下載下來(lái)。因此網(wǎng)站建設(shè)在Inter應(yīng)用上的地位顯而易見(jiàn)，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。為了更好的協(xié)作，更多的與外界交流新的信息，和他人共享信息，特構(gòu)建旅游網(wǎng)站。旅游網(wǎng)站也是近十年來(lái)在我國(guó)逐步興起和發(fā)展的，到現(xiàn)在已經(jīng)初步形成了類(lèi)型齊全、涵蓋旅游業(yè)各個(gè)方面的網(wǎng)上旅游產(chǎn)業(yè)體系，旅游產(chǎn)品的在線(xiàn)

6、宣傳和銷(xiāo)售正影響著越來(lái)越多的旅游者、旅游服務(wù)提供商和旅游管理者。隨著我國(guó)旅游業(yè)的迅猛發(fā)展，推進(jìn)旅游信息化，廣泛實(shí)現(xiàn)旅游電子政務(wù)、電子商務(wù)，建立高度發(fā)達(dá)的網(wǎng)上旅游系統(tǒng)，對(duì)于促進(jìn)我國(guó)旅游業(yè)的跨越式發(fā)展有著重要的作用。1.2 旅游網(wǎng)站發(fā)展現(xiàn)狀1我國(guó)旅游網(wǎng)站發(fā)展概述第一階段（19972000年）：我國(guó)真正出現(xiàn)基于互聯(lián)網(wǎng)的旅游網(wǎng)站以1997年中國(guó)旅游資訊網(wǎng)和華夏旅游網(wǎng)的成立為標(biāo)志。此階段旅游網(wǎng)站信息很少，網(wǎng)站只由一到數(shù)張?jiān)O(shè)計(jì)簡(jiǎn)單、以景點(diǎn)介紹的簡(jiǎn)單文字為主的網(wǎng)頁(yè)構(gòu)成。第二階段（2000-xx年）：2000年4月以網(wǎng)上預(yù)訂為主的青旅在線(xiàn)誕生，電子商務(wù)模式首次引入旅游網(wǎng)站。此階段旅游網(wǎng)站提供的預(yù)訂服務(wù)一般只包

7、括交通及住宿企業(yè)的電話(huà)等，游客的預(yù)訂仍需繞開(kāi)網(wǎng)站，直接與相關(guān)企業(yè)打交道。網(wǎng)站的資訊信息已日益豐富，并由層次分明、包含超級(jí)鏈接的網(wǎng)頁(yè)組成。第三階段（xx-xx年）：隨著xx年2月金旅雅途網(wǎng)的成立，中國(guó)出現(xiàn)一批以網(wǎng)上交易平臺(tái)服務(wù)為主要業(yè)務(wù)的旅游網(wǎng)站。此時(shí)旅游網(wǎng)站已有較強(qiáng)的互動(dòng)性，且開(kāi)始提供一些在線(xiàn)服務(wù)。網(wǎng)上預(yù)訂的業(yè)務(wù)也大大增強(qiáng)，只是從網(wǎng)上預(yù)訂客房后仍需通過(guò)銀行等途徑匯去所需款項(xiàng)，預(yù)訂的飛機(jī)票等也必須派人上門(mén)遞送，屬于“鼠標(biāo)加水泥”的模式。第四階段（xx一）:xx年4月中國(guó)第一個(gè)旅游目的地營(yíng)銷(xiāo)系統(tǒng)“南海目的地營(yíng)銷(xiāo)系統(tǒng)”在廣東省南海市建成，南海旅游網(wǎng)成為中國(guó)首個(gè)運(yùn)行DMS勺旅游網(wǎng)站。從此階段開(kāi)始，功能

8、強(qiáng)大的數(shù)據(jù)庫(kù)系統(tǒng)使游客可以很方便地實(shí)現(xiàn)食、住、行、游、娛、購(gòu)等信息的在線(xiàn)查詢(xún)，甚至可以借助多媒體工具進(jìn)行網(wǎng)上虛擬旅游。未來(lái)的旅游網(wǎng)站的知識(shí)內(nèi)容將日益豐富，欄目的內(nèi)容將日益詳細(xì)，分類(lèi)將日益科學(xué)，單調(diào)的、一成不變的旅游行程表將被靈活多變的自助旅游的游程定制所替代，為游客提供個(gè)性化的旅游產(chǎn)品等智能服務(wù)將成為旅游網(wǎng)站的重要功能。（二）網(wǎng)站分類(lèi)對(duì)于種類(lèi)繁多的旅游網(wǎng)站可以從不同角度進(jìn)行分類(lèi)，如按網(wǎng)站性質(zhì)的不同可將我國(guó)旅游網(wǎng)站分為如下七類(lèi)：政府旅游部門(mén)網(wǎng)站、應(yīng)用服務(wù)供應(yīng)商網(wǎng)站、旅游企業(yè)網(wǎng)站、專(zhuān)業(yè)旅游網(wǎng)站、網(wǎng)絡(luò)內(nèi)容供應(yīng)商網(wǎng)站的旅游頻道、各類(lèi)旅游目的地咨訊網(wǎng)和地方性旅游網(wǎng)站、個(gè)人旅游網(wǎng)站。止匕外，旅游網(wǎng)站還可按

9、專(zhuān)業(yè)屬性、服務(wù)類(lèi)型、提供信息等不同要素進(jìn)行分類(lèi)。（三）網(wǎng)站構(gòu)建中存在的問(wèn)題目前我國(guó)旅游網(wǎng)站數(shù)量非常龐大，現(xiàn)在用各種搜索引擎搜索到的旅游網(wǎng)站已達(dá)數(shù)萬(wàn)家。但是大多數(shù)旅游網(wǎng)站的構(gòu)建無(wú)論從網(wǎng)頁(yè)設(shè)計(jì)的科學(xué)性、有效性，還是從網(wǎng)站的服務(wù)內(nèi)容、服務(wù)范圍、服務(wù)功能來(lái)看,都非常不規(guī)范，存在不少問(wèn)題。以政府旅游網(wǎng)站為例，域名的使用就非常混亂，48%勺省級(jí)政府旅防I網(wǎng)站未使用.的正規(guī)域名，網(wǎng)站的信息提供也參差不齊；再以專(zhuān)業(yè)旅游網(wǎng)站為例，從網(wǎng)上選取50家較為成功的專(zhuān)業(yè)旅游網(wǎng)站進(jìn)行了測(cè)評(píng)結(jié)果來(lái)看，酒店客房和機(jī)票的查詢(xún)預(yù)訂是專(zhuān)業(yè)旅游網(wǎng)站提供的主要功能，在選取的專(zhuān)業(yè)旅游網(wǎng)站中，100%的網(wǎng)站都提供了此兩項(xiàng)功能，但從具體功能來(lái)

10、看，尚無(wú)一家旅游網(wǎng)站能夠提供客房的實(shí)時(shí)狀況，如最近一天的客房銷(xiāo)售情況和促銷(xiāo)優(yōu)惠的報(bào)價(jià)?；疖?chē)票的查詢(xún)只有45%勺網(wǎng)站提供，國(guó)內(nèi)火車(chē)票的預(yù)訂尚無(wú)一家網(wǎng)站開(kāi)通，唯一一家開(kāi)通火車(chē)票預(yù)訂的是再見(jiàn)城市網(wǎng)站，也僅開(kāi)通了歐洲火車(chē)通票預(yù)訂。能提供出租車(chē)預(yù)訂的網(wǎng)站只占22.7%。目前，在所選取的網(wǎng)站中尚無(wú)一家提供酒店、機(jī)票、出租車(chē)、門(mén)票的組合預(yù)訂，而提供了門(mén)票或?qū)в晤A(yù)訂的也只有兩家。從預(yù)訂方式來(lái)看，選取的網(wǎng)站都提供了網(wǎng)上預(yù)訂功能，但提供網(wǎng)上支付功能的網(wǎng)站只占22.7%。止匕外，絕大多數(shù)專(zhuān)業(yè)網(wǎng)站沒(méi)有設(shè)計(jì)旅游投訴的功能。既能體現(xiàn)旅游網(wǎng)站內(nèi)涵又便于查詢(xún)記憶的網(wǎng)站域名和網(wǎng)站LOGO名和標(biāo)志LOG*設(shè)計(jì)既要體現(xiàn)旅游網(wǎng)站的內(nèi)

11、涵，使游客通過(guò)網(wǎng)站的名稱(chēng)就可以對(duì)網(wǎng)站本科畢業(yè)設(shè)計(jì)（論文）題目:學(xué)院：專(zhuān)業(yè)班級(jí)：姓名：指導(dǎo)教師：系主任:數(shù)字媒體技術(shù)系網(wǎng)站前端設(shè)計(jì)與開(kāi)發(fā)學(xué)號(hào)：學(xué)院院長(zhǎng)：二O一三年月日畢業(yè)設(shè)計(jì)（論文）誠(chéng)信聲明我謹(jǐn)在此保證：本人所寫(xiě)的畢業(yè)設(shè)計(jì)（論文），凡引用他人的研究成果均已在或注釋中列出。設(shè)計(jì)（論文）主體均由本人獨(dú)立完成，沒(méi)有抄襲、剽竊他人已經(jīng)發(fā)表或未發(fā)表的研究成果行為。如出現(xiàn)以上違反知識(shí)產(chǎn)權(quán)的情況，本人愿意承擔(dān)相應(yīng)的責(zé)任。聲明人（簽名）：年月曰21世紀(jì)是信息高速發(fā)達(dá)的時(shí)代，網(wǎng)絡(luò)作為當(dāng)今最流行最方便快捷的媒介也越來(lái)越被人們接受，并且融入我們的生活。隨著高校信息化建設(shè)的不斷推進(jìn)，網(wǎng)站的作用超越了傳統(tǒng)的信息獲取，交流

12、它更能體現(xiàn)組織機(jī)構(gòu)的風(fēng)采，性質(zhì)。所以高校院系建立本院系美觀，專(zhuān)業(yè)，易于維護(hù)管理的網(wǎng)站已經(jīng)勢(shì)在必行。本論文主要圍繞數(shù)字媒體技術(shù)專(zhuān)業(yè)的門(mén)戶(hù)網(wǎng)站為開(kāi)發(fā)主題，最基本也是最必須的三個(gè)技能。前端的開(kāi)發(fā)中，在頁(yè)面的布局時(shí)，HTML將元素進(jìn)行定義，CSS寸展示的元素進(jìn)行定位，再通過(guò)JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然表面看起來(lái)這些很簡(jiǎn)單，但這里面需要掌握的東西絕對(duì)不會(huì)少。在進(jìn)行開(kāi)發(fā)前，需要對(duì)這些概念弄清楚，弄明白，這樣在開(kāi)發(fā)的過(guò)程中才會(huì)得心應(yīng)手。分析并解決實(shí)現(xiàn)中的若干技術(shù)問(wèn)題；介紹了個(gè)性化頁(yè)面的背景及jsp+javascript+mysql系統(tǒng)的一般原理；闡述整個(gè)個(gè)性化頁(yè)面生成系統(tǒng)的系統(tǒng)結(jié)構(gòu)及工作原

13、理；分析了系統(tǒng)實(shí)現(xiàn)中的特殊性，難點(diǎn)和重點(diǎn)；設(shè)計(jì)實(shí)現(xiàn)用戶(hù)注冊(cè)，用戶(hù)登錄，用戶(hù)管理等jsp頁(yè)面。分析并解決實(shí)現(xiàn)中的若干技術(shù)問(wèn)題；建立完整的校園網(wǎng)站，進(jìn)行測(cè)試并分析結(jié)果。該網(wǎng)站有效地實(shí)現(xiàn)用戶(hù)通過(guò)JSP頁(yè)面訪(fǎng)問(wèn)來(lái)進(jìn)行用戶(hù)注冊(cè)，登陸，并對(duì)網(wǎng)站內(nèi)容進(jìn)行有效的管理，提升了后期添加和刪除信息的有效性，具有一定的應(yīng)用價(jià)值關(guān)鍵字：JSP;用戶(hù)登錄；javascript;網(wǎng)站美化；交互設(shè)計(jì)。ABSTRACTThetwenty-firstCenturyistherapiddevelopmentofinformationage,workastheworldsmostpopularandmostconvenientmed

14、iaareincreasinglyaeptedbypeople.Alongwiththeinformationdevelopment,websitefunctionsbeyondthetraditionalinformationacquisition,municationwhichcanbetterreflecttheorganizationstyle,properties.Souniversitiesestablishthedepartments,professionalappearance,easymaintenanceandmanagementofthesitehasbeenimpera

15、tive.Thisthesismainlyfocusesondigitalmediatechnologymajorportalforthedevelopmentofthetheme,thethreemostbasicandnecessaryskills.Developmentofthefront,inthelayoutofthepage,HTMLwilldefinetheelements,positioningCSStodisplayelements,andthenthroughtheJavaScripttoachievethecorrespondingeffectandinteraction

16、.Althoughthesurfacelooksliketheseareverysimple,butitneedstograspthingsnever.Inthedevelopment,theneedfortheseconceptsclear,understand,sointhedevelopmentprocesswillbehandy.Themainworkdoneinthisarticleisasfollows:(1) IntroducesthebackgroundandgeneralprincipleofJSP+Javascript+MySQLsystempersonalizedpage

17、s;(2) Introducesthestructureandworkingprincipleoftheentirepersonalizationpageproductionsystem;analysisoftheparticularity,thedifficultyandkeysystem;user(3) Thedesignandimplementationofuserregistration,login,usermanagementandotherJSPpage.(4) Analyzeandsolvesometechnicalproblemsinimplementation;(5) The

18、establishmentofapletecampussite,testingandanalysis;ThesiteeffectivelyachievetheuserthroughtheJSPpageaesstouserregistration,login,andcarryoneffectivemanagementtothewebsitecontent,enhancetheeffectivenessofthelateadditionanddeletionofinformation,hasacertainapplicationvalue.Keywords:JSP;Userlogin;JavaSc

19、ript;WebsiteLandscaping;InteractionDesign目錄摘要ABSTRACT第1章緒論.11.1 選題背景及意義11.2 國(guó)內(nèi)外高校網(wǎng)站建設(shè)狀況31.3 研究?jī)?nèi)容和擬解決的問(wèn)題51.4 本章小結(jié).6第2章前端開(kāi)發(fā)工具及相關(guān)技術(shù)72.1 前端開(kāi)發(fā)環(huán)境72.2 前端開(kāi)發(fā)工具72.3 前端開(kāi)發(fā)相關(guān)技術(shù)82.3.1 Javascript簡(jiǎn)介82.3.2 Javascript基本特點(diǎn)82.3.3 CSS簡(jiǎn)介92.3.4JQuery.92.4本章小結(jié)11第3章前端布局分析與設(shè)計(jì)123.1 前端總體開(kāi)發(fā)流程及設(shè)計(jì)123.1.1 分層開(kāi)發(fā)123.1.2 代碼編寫(xiě)123.1.3 內(nèi)

20、部測(cè)試與后續(xù)優(yōu)化133.2 前端UI設(shè)計(jì)143.2.1 模塊分布143.2.2 顏色配置15xx版畢業(yè)論文題目:響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)學(xué)生姓名：羅智剛學(xué)號(hào)：120xx132專(zhuān)業(yè)班級(jí)：B12計(jì)算機(jī)科學(xué)與技術(shù)2班指導(dǎo)教師：李莉企業(yè)導(dǎo)師：林志宏二級(jí)學(xué)院：電氣與信息工程學(xué)院摘要在信息高速發(fā)展的這個(gè)時(shí)代，網(wǎng)絡(luò)作為現(xiàn)今最為方便快捷的媒介也越來(lái)越被人們接受，并且融入我們的生活。在xx年時(shí)，隨著HTML5在國(guó)內(nèi)的興起，也在不斷的推進(jìn)著信息時(shí)代的發(fā)展，網(wǎng)站也逐漸脫離了傳統(tǒng)的枯燥頁(yè)面風(fēng)格，如今的HTML*匕起以前的HTM序說(shuō)，更容易維護(hù)和管理，而且還能實(shí)現(xiàn)跨平臺(tái)開(kāi)發(fā)，減少開(kāi)發(fā)成本。本論文主要圍繞寫(xiě)意集團(tuán)的HTM

21、L5!向應(yīng)式網(wǎng)站為開(kāi)發(fā)主題，用到的也是最必備的三個(gè)技能元素，在布局頁(yè)面時(shí)，用HTML各元素進(jìn)行定義，布局基礎(chǔ)布局；css對(duì)展示的HTM玩素布局進(jìn)行定位渲染，然后利用Javascript或者jQuery實(shí)現(xiàn)相應(yīng)的效果和交互。雖然這么看起來(lái)很簡(jiǎn)單，但這里需要認(rèn)真了解的東西很多。在開(kāi)發(fā)前，需要對(duì)這些概念弄清楚，在開(kāi)發(fā)過(guò)程中還要考慮兼容，性能等各種問(wèn)題。分析并解決實(shí)現(xiàn)中的若干技術(shù)問(wèn)題：介紹企業(yè)官網(wǎng)個(gè)性化頁(yè)面的背景及HTML印向應(yīng)式布局的一般原理；闡述整個(gè)企業(yè)官網(wǎng)的結(jié)構(gòu)及工作原理；分析實(shí)現(xiàn)中的難點(diǎn)和重點(diǎn)；關(guān)鍵詞：HTML5;CSS3;響應(yīng)式；javascript;網(wǎng)站美化；交互設(shè)計(jì)abstractInt

22、hiseraofrapiddevelopmentofinformationandworkasthemostconvenientmedianowincreasinglybeingaeptedandintegratedintoourlives.Inxx,withtheriseofHTML5nthecountry,hasalsobeenadvancingthedevelopmentoftheinformationage,thesiteisalsomovingawayfromthetraditionalboringpagestyle,andnowHTML5paredtothepreviousHTMLi

23、seasiertomaintainandmanagement,butalsotoachievecross-platformdevelopment,reducedevelopmentcosts.ThispapermainlyaroundFreehandGroupHTML5Responsivewebsitedevelopmenttopics,usedinthethreemostessentialelementsofskill,inthelayoutofthepage,usingHTMLtodefinetheelements,layoutbasiclayout;csstodisplayHTMLelementspositioninglayoutrendering,thenuseJavascriptorjQuerytoachievetheappropriateeffectsandinteractions.Althoughsuchlooksverysimple,buthereneedtounderstandalotofseriousthings.Beforedevelopment,theneedtoclarifytheseconceptsinthedevelopmentprocess,butalsoconsideravarietyofproblemswi