基于bootstrap電影網(wǎng)站設(shè)計(jì)

目前，隨著計(jì)算機(jī)技術(shù)和通信技術(shù)的發(fā)展，網(wǎng)絡(luò)的規(guī)模逐漸增大。網(wǎng)絡(luò)的元素也在增加。有些是用它來進(jìn)行交流的，有的用它作為商業(yè)用途，在網(wǎng)絡(luò)上進(jìn)行銷售、收購、宣傳等用途。使網(wǎng)絡(luò)成為當(dāng)今社會(huì)越來越重要的元素，而網(wǎng)站是網(wǎng)絡(luò)的一大元素。所謂的網(wǎng)站（網(wǎng)站），是指在互聯(lián)網(wǎng)（Internet）上，根據(jù)一定的規(guī)則，HTM⑶工具制作的用于收藏的有關(guān)具體頁面內(nèi)容的顯示使用。簡(jiǎn)單地說，站點(diǎn)是一個(gè)通信工具，就像公告欄一樣，人們可以通過網(wǎng)站來發(fā)布信息（信息），或者利用網(wǎng)站提供相關(guān)的Web服務(wù)（網(wǎng)絡(luò)服務(wù)）。在IT行業(yè)迅速發(fā)展的今天，電影網(wǎng)站的建立已經(jīng)成為電影發(fā)展必不可少的趨勢(shì)。本設(shè)計(jì)將建立一個(gè)以宣傳類型為目的的網(wǎng)站，將專注于針對(duì)電影的宣傳與推廣，讓更多的網(wǎng)友能通過互聯(lián)網(wǎng)了解、關(guān)注、支持電影以及電影事業(yè)的發(fā)展。電影網(wǎng)站作為一個(gè)新興事物，是電影管理現(xiàn)代化發(fā)展的必然趨勢(shì)。本網(wǎng)站在研究建立的同時(shí)，主要考慮的問題是：在“愛電影”網(wǎng)站的建立工作中，如何將傳統(tǒng)的方式和現(xiàn)代化的方式更加有機(jī)的結(jié)合，使電影服務(wù)體系更完善。本網(wǎng)站制作并實(shí)現(xiàn)了一個(gè)電影網(wǎng)站的前臺(tái)設(shè)計(jì)。此次設(shè)計(jì)主要就是完成電影網(wǎng)站中前臺(tái)頁面的設(shè)計(jì)，盡可能的將電影宣傳信息第一時(shí)間發(fā)布，讓瀏覽者更加清晰和詳細(xì)的了解電影詳情，也盡可能詳細(xì)的展示、介紹不同類型的電影，同時(shí)為愛電影的提供一個(gè)交流的平臺(tái)。在“愛電影”網(wǎng)站的設(shè)計(jì)過程中使用了HTML、DIV+CSSJavaScrip侍開發(fā)工具，開發(fā)軟件為Dreamweaver8、PhotoshopCS5Fireworks8。通過對(duì)“愛電影”網(wǎng)站的需求分析、總體設(shè)計(jì)、詳細(xì)設(shè)計(jì)和測(cè)試，最終完成了首頁、各分類頁、詳情展示頁、注冊(cè)頁、登錄頁等，完成了“愛電影”網(wǎng)站的前臺(tái)設(shè)計(jì)。關(guān)鍵詞：html計(jì)算機(jī)網(wǎng)站bootstrapcssTOC\o"1-5"\h\z摘要i目錄ii第一章引言1項(xiàng)目開發(fā)背景1項(xiàng)目開發(fā)目標(biāo)1項(xiàng)目開發(fā)的意義2論文結(jié)構(gòu)3第二章頁面制作相關(guān)技術(shù)介紹4CSS34HTML54javascript+Jquery5Axure6BootStrap8第三章bootstrap電影網(wǎng)站的需求與可行性分析10bootstrap電影網(wǎng)站的需求分析10bootstrap電影網(wǎng)站的可行性分析10第四章bootstrap電影網(wǎng)站的原型設(shè)計(jì)12bootstrap電影網(wǎng)站的頁面結(jié)構(gòu)12（所做項(xiàng)目名）的Axure原型設(shè)計(jì)13第五章電影網(wǎng)站的Bootstrap設(shè)計(jì)175.1電影首頁頁面的設(shè)計(jì)17第六章結(jié)論25參考文獻(xiàn)26致謝27第一章引言項(xiàng)目開發(fā)背景現(xiàn)在中國大部分的家庭都喜歡在家里置辦屬于自己風(fēng)格的家庭影院。但是，仍然有很人喜歡到電影院去看電影。因?yàn)榧依锏臍夥债吘共蝗缬霸汉?。所以，現(xiàn)代家庭影院的出現(xiàn)并不會(huì)讓電影院沒有生路。Bootstrap電影網(wǎng)站為了提高勞動(dòng)的效率、節(jié)約成本、提高服務(wù)質(zhì)量，我們小組開發(fā)了此款軟件。用以方便影院的售票和客戶的購買。通過這個(gè)軟件，可以很快實(shí)現(xiàn)一些常用的服務(wù)，并保證無錯(cuò)、高效。Bootstrap電影網(wǎng)站每個(gè)社會(huì)服務(wù)系統(tǒng)都有自己的一套管理機(jī)制。當(dāng)然,電影院也不除外。其實(shí)電影院的管理系統(tǒng)應(yīng)該來說比其他的社會(huì)服務(wù)系統(tǒng)的管理要簡(jiǎn)單一點(diǎn)。電影院不外乎是引進(jìn)電影，制定播放影片的時(shí)間表，買票，檢票進(jìn)場(chǎng)觀看，還有就是一些數(shù)據(jù)管理方面的事。如工作人員管理，票務(wù)管理等等。為了工作機(jī)制簡(jiǎn)單有序，必然要引進(jìn)一套管理系統(tǒng)項(xiàng)目開發(fā)目標(biāo).增強(qiáng)影片排行榜功能，從影迷角度，網(wǎng)站表現(xiàn)形式，管理使用的角度擴(kuò)展功能。一般根據(jù)電影的票房情況排行，使電影愛好者可根據(jù)排行情況選擇影片。.增強(qiáng)各影院電影預(yù)告排片功能，可以將華庭和中山兩大影院每月的排片表通過后臺(tái)一定格式的信息錄入，前臺(tái)將排片日期、影片名、影片簡(jiǎn)介、影片海報(bào)等相關(guān)內(nèi)容以一定的模板樣式顯示出來。.增加網(wǎng)上訂票系統(tǒng)，根據(jù)市民服務(wù)系統(tǒng)的要求，其中包括網(wǎng)上電影售票系統(tǒng)。詳見《電影網(wǎng)上訂票系統(tǒng)建設(shè)方案》。所在目前先可以預(yù)留該欄目，顯示頁面建設(shè)中。以便日后開發(fā)此應(yīng)用系統(tǒng)。.完善會(huì)員系統(tǒng)，系統(tǒng)可實(shí)現(xiàn)統(tǒng)一會(huì)員管理平臺(tái)，所有的論壇互動(dòng)、影評(píng)、音像上傳等需要會(huì)員系統(tǒng)的模塊都可使用同一個(gè)會(huì)員管理系統(tǒng)。.增加影評(píng)互動(dòng)模塊，可根據(jù)會(huì)員系統(tǒng)，使網(wǎng)站的注冊(cè)會(huì)員可以在影片介紹等文章后添加影片評(píng)論，發(fā)表自己的見解與觀后感，實(shí)現(xiàn)互動(dòng)性，且所有的評(píng)論后臺(tái)都將具有審核程序，審核通過后才在前臺(tái)顯示，維護(hù)了網(wǎng)站的信息安全。.進(jìn)行全面的頁面的整改，將主頁上圖片切換動(dòng)畫模塊，視頻模塊，廣告位模塊進(jìn)行完善其特有的功能，將左側(cè)嵌入式廣告替換為其它內(nèi)容。在首頁設(shè)立更好的廣告位，便于在推廣活動(dòng)中在此重點(diǎn)顯示。.保留已有的好的風(fēng)格，如：標(biāo)題字體顏色亮顯特色、網(wǎng)站檢索模塊等。站內(nèi)檢索功能，實(shí)現(xiàn)內(nèi)容網(wǎng)站的全中文高速檢索，搜索響應(yīng)時(shí)間快。項(xiàng)目開發(fā)的意義一、全網(wǎng)開放全球現(xiàn)在約有15億的用戶接入了因特網(wǎng)，今后會(huì)更為壯大。通過建設(shè)一個(gè)網(wǎng)站，可以更好的展示個(gè)人/企業(yè)或者機(jī)構(gòu)。在當(dāng)前，門戶博客、網(wǎng)店、微博、輕博等平臺(tái)雖然可以更好的對(duì)自己展示。但是，網(wǎng)站仍然是最重要的自我展示的方案。因此，建設(shè)一個(gè)與自身形象相稱或者更新穎的網(wǎng)站，是當(dāng)前時(shí)代必不可少的選擇！二、新型交流平臺(tái)商業(yè)過程的很大一部分是商業(yè)交往。每個(gè)精明的商人都懂得進(jìn)行廣泛聯(lián)系和接觸的重要性。您可以通過網(wǎng)站在網(wǎng)絡(luò)上每天24小時(shí)既便宜又輕松地向成千上萬的人發(fā)“名片”。政府機(jī)構(gòu)，可以通過網(wǎng)站這一高效開放的平臺(tái)進(jìn)行更好的與民互動(dòng)，進(jìn)一步的了解民生、民情、民意，切實(shí)完成“為人民服務(wù)”的宗旨。個(gè)人通過建設(shè)網(wǎng)站，能夠更好的展示自。同時(shí)也會(huì)使自身的生活變得更加的充實(shí)。有些草根站長(zhǎng)更是通過建設(shè)網(wǎng)站而發(fā)家致富。進(jìn)行網(wǎng)站建設(shè)是今后每位網(wǎng)民必須的網(wǎng)上沖浪的過程。三、更快的了解信息資源在互聯(lián)網(wǎng)時(shí)代，信息是處于一種爆炸的狀態(tài)。在信息橫流、大眾被真假難辨的信息流所迷惑的時(shí)候，您的網(wǎng)站是否可以因?yàn)榻ㄔO(shè)的十分獨(dú)特而脫穎而出，并因此為您帶來收益呢？另外，通過互聯(lián)網(wǎng)，我們可以更好的得到網(wǎng)站用戶的反饋信息，這將對(duì)我們的成長(zhǎng)進(jìn)步起到很大的作用。四、有利于營(yíng)銷我們可能很難讓中央電視臺(tái)詳細(xì)描述我們的企業(yè)/機(jī)構(gòu)/個(gè)人的最新情況，但是如果希望讓人對(duì)這些都很感興趣的話，可以讓記者們宣傳您的網(wǎng)站地址。任何地點(diǎn)的任何人只要能夠訪問互聯(lián)網(wǎng)，他們就能成為您的網(wǎng)站的潛在訪問者，并成為潛在的用戶。當(dāng)然，對(duì)于用戶來說，如果可以提高他們的興趣，那么您網(wǎng)站的粘性就更大了。五、全面互動(dòng)體系雖然在顯示中，人們通常不會(huì)24小時(shí)的與工作的客體保持溝通交流，但是在互聯(lián)網(wǎng)上，這是完全可能的，通過互聯(lián)網(wǎng)的一些應(yīng)用，7*24的全天候交流互動(dòng)完全是可能而且正常的。六、形象共振效應(yīng)當(dāng)我們網(wǎng)站的建設(shè)的十分成功的時(shí)候，將會(huì)為網(wǎng)站的使用者在網(wǎng)站訪客的心目中加分，同時(shí)可能留住訪客成為對(duì)我們“有價(jià)值的人"。反之，則會(huì)使得網(wǎng)站形同虛設(shè)，猶如浪費(fèi)。論文結(jié)構(gòu)本論文由6章組成。其中：第一章為：引言部分（從背景，目標(biāo)和意義三個(gè)角度對(duì)項(xiàng)目進(jìn)行剖析）第二章為：網(wǎng)頁制作相關(guān)技術(shù)介紹（網(wǎng)上找尋資料）第三章為：bootstrap電影網(wǎng)站的需求與可行性分析（在網(wǎng)上查詢并小組一起討論）第四章為：bootstrap電影網(wǎng)站的原型設(shè)計(jì)（使用Axure進(jìn)行了網(wǎng)頁原型的設(shè)計(jì)，再進(jìn)行分工不同的人做不同的工作）第五章為：bootstrap電影網(wǎng)站的bootstrap設(shè)計(jì)（本人做的是對(duì)應(yīng)的網(wǎng)站首頁的布局以及代碼的編寫）第六章為：結(jié)論（總結(jié)了這次網(wǎng)站設(shè)計(jì)以及編寫的點(diǎn)點(diǎn)滴滴，大家一起努力，一起流汗，一起完成這次實(shí)訓(xùn)I）致謝：大家根據(jù)個(gè)人不同的理解，紛紛向老師和幫助自己的人表達(dá)感謝。第二章頁面制作相關(guān)技術(shù)介紹CSS3CSSW層疊樣式表(CascadingStyleSheet)。在網(wǎng)頁制作時(shí)采用層疊樣式表技術(shù)，可以有效地對(duì)頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。CSS31CSSK術(shù)的升級(jí)版本，CSS3i§言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。這些模塊包括：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。主要功能：選擇器、盒模型、背景和邊框、文字特效、2D/3D轉(zhuǎn)換、動(dòng)畫、多列布局、用戶界面圖2-1css3層疊樣式效果圖HTML5萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言(HTML的第五次重大修改(這是一項(xiàng)推薦標(biāo)準(zhǔn)、外語原文)2014年10月29日，萬維網(wǎng)聯(lián)盟宣布，經(jīng)過接近8年的艱苦努力，該標(biāo)準(zhǔn)規(guī)范終于制定完成。技術(shù)要點(diǎn)重要標(biāo)記<video>標(biāo)記定義和用法：</video>標(biāo)簽定義視頻，比如電影片段或其他視頻流。<audio>標(biāo)記定義和用法</audio>標(biāo)簽定義聲音，比如音樂或其他音頻流。<canvas>標(biāo)記定義和用法：<canvas>標(biāo)簽定義圖形，比如圖表和其他圖像。HTML5的canvas元素使用JavaScript在網(wǎng)頁上繪制圖像。畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素。canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。程序接口除了原先的DOMS口，HTML5曾力□了更多API,如：.用于即時(shí)2D繪圖的Canvas標(biāo)簽.定時(shí)媒體回放.離線數(shù)據(jù)庫存儲(chǔ).文檔編輯.拖拽控制.瀏覽歷史管理元素變化新的解析順序新的元素：section,video,progress,nav,meter,time,aside,canvasinput元素的新屬性：日期和時(shí)間，email,url。新的通用屬性：ping,charset,async全域?qū)傩裕篿d,tabindex,repeat。移除元素：center,font,strike。javascript+JqueryjavascriptJavaScript一種直譯式腳本語言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分,

廣泛用于客戶端的腳本語言，最早是在HTML標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用，用來給HTMLM］頁增加動(dòng)態(tài)功能。在1995年時(shí)，由Netscape公司的BrendanEich,在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。因?yàn)镹etscape與Sun合作，Netscape管理層希望它外觀看起來像Java,因此取名為JavaScript。但實(shí)際上它的語法風(fēng)格與Self及Scheme較為接近。為了取得技術(shù)優(yōu)勢(shì)，微軟推出了JScript,CEnvi推出ScriptEase,與JavaScript同樣可在瀏覽器上運(yùn)行。為了統(tǒng)一規(guī)格，因?yàn)镴avaScript兼容于ECMA標(biāo)準(zhǔn)，因此也稱為ECMAScript。HTMlMWoHTME素。cookies,包括創(chuàng)建和修改等。Node.js技術(shù)進(jìn)行服務(wù)器端編程。Jquery動(dòng)態(tài)特效AJAX通過插件來擴(kuò)展方便的工具-例如瀏覽器版本判斷漸進(jìn)增強(qiáng)鏈?zhǔn)秸{(diào)用多瀏覽器支持，支持InternetExplorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了對(duì)InternetExplorer6,7,8的支持）AxureAxureRP是一個(gè)專業(yè)的快速原型設(shè)計(jì)工具。表美國Axure公司；AxureRP是一個(gè)專業(yè)的快速原型設(shè)計(jì)工具。表美國Axure公司；RP貝^是RapidPrototypingAxureRP是美國AxureSoftwareSolution公司旗艦產(chǎn)品，是一個(gè)專業(yè)的快速原型設(shè)計(jì)工具，讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計(jì)功能和界面的專家能夠快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。作為專業(yè)的原型設(shè)計(jì)工具，它能快速、高效的創(chuàng)建原型，同時(shí)支持多人協(xié)作設(shè)計(jì)和版本控制管理。AxureRP已被一些大公司采用。AxureRP的使用者主要包括商業(yè)分析師、信息架構(gòu)師、可用性專家、產(chǎn)品經(jīng)理、IT咨詢師、用戶體驗(yàn)設(shè)計(jì)師、交互設(shè)計(jì)師、界面設(shè)計(jì)師等，另外，架構(gòu)師、程序開發(fā)工程師也在使用Axureo鼠標(biāo)及鍵盤交互功能支持更多的新特性，包括OnDoubleClick（雙擊），OnContextMenu（右擊）,OnMouseDown鼠標(biāo)按鍵按下），OnMouseUp鼠標(biāo)按鍵松開），OnMouseMove鼠標(biāo)指針移動(dòng)），OnMouseHover（鼠標(biāo)指車t經(jīng)過），OnLongClick（鼠標(biāo)長(zhǎng)按）,OnKeyDown鍵盤按鍵按下），OnKeyUp（鍵盤按鍵松開）支持HTML的特性，以及更好的支持手機(jī)演示特性。新增部件樣式控制Axure7對(duì)于部件修飾功能有較大的改善，包括支持圓角、陰影、描邊等設(shè)置。更細(xì)化的部件屬性更為豐富的部件屬性，可以設(shè)置各種形狀、樣式，較AxureRP6.5單調(diào)的形狀而言，也是一種驚喜。更多交互條件包括關(guān)閉指定窗口、設(shè)置錨點(diǎn)以及更為靈活的事件觸發(fā)條件，對(duì)于移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)有很大幫助。圖2-4Axure界面效果圖BootstrapBootstrap,來自Twitter,是目前很受歡迎的前端框架。Bootstrap是基于HTMLCSSJAVASCRIPT勺，它簡(jiǎn)潔靈活，使得Web開發(fā)更加快捷。它由Twitter的設(shè)計(jì)師MarkOtto和JacobThornton合作開發(fā)，是一個(gè)CSS/HTM眶架。Bootstrap提供了優(yōu)雅的HTML?CSS?范，它即是由動(dòng)態(tài)CSS語言less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目，包括NASA勺MSNBC微軟全國廣播公司）的BreakingNews^B使用了該項(xiàng)目。國內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如WeX的端開源框架等，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來。外文名：Bootstrap類型：開源的用于前端開發(fā)的工具包設(shè)計(jì)者：MarkOtto和JacobThornton優(yōu)點(diǎn)：兼容大部分jQuery插件原理Bootstrap框架的網(wǎng)格系統(tǒng)工作原理如下：1、數(shù)據(jù)行（.row）必須包含在容器（.container）中，以便為其賦予合適的對(duì)齊方式和內(nèi)距（padding）。如：<divclass="container"><divclass="row"></div></div>2、在行（.row）中可以添加列（.column），但列數(shù)之和不能超過平分的總列數(shù)，比如12。如：<divclass="container"><divclass="row"><divclass="col-md-4"></div><divclass="col-md-8"></div>3、具體內(nèi)容應(yīng)當(dāng)放置在列容器（column）之內(nèi)，而且只有列（column）才可以作為行容器（.row）的直接子元素4、通過設(shè)置內(nèi)距（padding）從而創(chuàng)建列與列之間的間距。然后通過為第一列和最后一列設(shè)置負(fù)值的外距（margin）來抵消內(nèi)距（padding）的影響功能柵格系統(tǒng)柵格系統(tǒng)與著名的960Grid大同小異，不過960Grid默認(rèn)是16欄、940像素寬，由于LESS帶來的動(dòng)態(tài)語言特性（變量、函數(shù)等），可以通過配置幾個(gè)參數(shù)，自定義柵格。因?yàn)閽仐壛藢?duì)老舊瀏覽器的支持，可以直接用：last-child將最后一欄的margin-right去掉，這也是它與960Grid的區(qū)別之一。字體樣式字體風(fēng)格比較明顯，標(biāo)題、<em><strong>、<b><i>以及<address>和<blockquote>等語義標(biāo)簽都配了一些默認(rèn)樣式。然后是列表，通過.unstyled類樣式獲得樣式充值效果，這個(gè)方式比較實(shí)用，特別是網(wǎng)站是以內(nèi)容為主的時(shí)候。代碼塊也比較樸素，借鑒了GoogleCodePrettify風(fēng)格。標(biāo)簽樣式設(shè)計(jì)得比較貼心，風(fēng)格趨于內(nèi)斂。多媒體展現(xiàn)多媒體列表其實(shí)也比較簡(jiǎn)單，定義了3種縮略圖尺寸：330像素X230像素、210像素X150像素和90像素X90像素。表格的樣式也是簡(jiǎn)約風(fēng)格。表單Bootstrap對(duì)表單進(jìn)行了比較充分的定制，風(fēng)格比較鮮明，label左浮動(dòng)，圓角輸入框，正確、錯(cuò)誤的狀態(tài)，表單legend的字號(hào)，前綴字符，輸入、復(fù)選框等。文件選擇比較樸素，沒有提供更個(gè)性的解決方案，要想實(shí)現(xiàn)更個(gè)性的解決方案，需要與JavaScript配合設(shè)計(jì)。表單的按鈕也十分細(xì)致，效果如圖1-3所示。導(dǎo)航等網(wǎng)站的全局導(dǎo)航欄保持一致，使用樣式實(shí)現(xiàn)背景色漸變，固定在頭部，因此不需要考慮瀏覽器兼容問題。止匕外，還實(shí)現(xiàn)了提示、警告、彈出對(duì)話框設(shè)計(jì)風(fēng)格的統(tǒng)一。以上樣式的部分是Bootstrap框架的核心。在代碼上，基本把樣式重置與定制都做了，上述內(nèi)容，除了比較明顯的組件（如面包屑、翻頁等），基本都直接用標(biāo)簽作選擇器。有許多風(fēng)格是利用CSS3羊式屬性設(shè)計(jì)出來的，最明顯的莫過于背景色漸變與圓角。因此，對(duì)于圖省事、不介意早期瀏覽器的效果，不需要考慮IE6的開發(fā)者，Bootstrap是個(gè)好選擇，因?yàn)樗r(shí)省力，而且美觀大方。在樣式之外，Bootstrap還提供了十幾個(gè)常用的JavaScript插件，如模態(tài)對(duì)話框、下拉菜單、滾動(dòng)監(jiān)聽、標(biāo)簽頁、工具提示等jQuery插件。第三章bootstrap電影網(wǎng)站的需求與可行性分析bootstrap電影網(wǎng)站的需求分析電影購票系統(tǒng)，具有操作簡(jiǎn)單進(jìn)入頁面，選擇好用戶需求，再選擇好座位，點(diǎn)擊確認(rèn)購買便可。具有實(shí)用價(jià)值本網(wǎng)站不需要購買，審核，具有較好的實(shí)用性，存在很高的使用價(jià)值?？煽啃愿弑揪W(wǎng)站和多家電影院合作，不存在欺騙，欺詐等現(xiàn)象，且對(duì)會(huì)員的各種信息進(jìn)行加密，不會(huì)存在泄漏會(huì)員的個(gè)人信息。bootstrap電影網(wǎng)站的可行性分析網(wǎng)站功能模塊可行性首頁是客戶打開網(wǎng)頁，圖片自動(dòng)旋轉(zhuǎn)木馬，使用JavaScript展示宣傳片。要呈現(xiàn)給用戶的第一時(shí)間，充滿“愛電影”的網(wǎng)站亮點(diǎn)，吸引用戶。1、電影首頁：這個(gè)模塊是在網(wǎng)站上的電影分類的，通過對(duì)電影的分類來找到用戶想要找到的電影。2、電影新聞：本模塊主要宣傳最新電影新聞廣播、電影宣傳圖片輪播。3、電影商城欄目：這個(gè)模塊主要是為動(dòng)畫電影玩具及相關(guān)產(chǎn)品展示。4、電影社區(qū)論壇：這個(gè)模塊主要是熱愛電影的人，可以交換觀看體驗(yàn)，討論電影的細(xì)節(jié)，并一起觀看影片的互動(dòng)電影。5、電影電視節(jié)：該模塊主要想去電影院觀影提供城市院線電影的具體細(xì)節(jié)，如一部電影，名字起的時(shí)間，特定的地點(diǎn)，查看提供便捷服務(wù)。社會(huì)可行性分析近年來，隨著中國國民經(jīng)濟(jì)的不斷發(fā)展，人民生活水平不斷提高，人均可支配收入不斷增加，人們的消費(fèi)需求和消費(fèi)也越來越多。據(jù)相關(guān)統(tǒng)計(jì)分析，在2014全國電影票房收入約100億元，在2013,電影票房同比增長(zhǎng)約44%強(qiáng)勁增長(zhǎng)的基礎(chǔ)上，同比增長(zhǎng)約60%改革開放以來，全國城市票房已經(jīng)增加了約10倍，平均漲幅超過35%今年的房屋總量占比,國內(nèi)電影票房達(dá)57億元左右，占全年票房的55位右。包頭市，總?cè)丝冢鞘腥丝诮f。目前，共有約10家電影院，平均每2000萬人影院數(shù)，包頭地區(qū)沒有一家可以提供電影信息宣傳推廣的電影網(wǎng)站。所以分析認(rèn)為，電影網(wǎng)站的建立，有望借此機(jī)會(huì)大力推廣，以滿足日益增長(zhǎng)的電影行業(yè)的宣傳工作。因此，建立電影網(wǎng)站的前景是非常樂觀的技術(shù)可行性分析1、細(xì)化網(wǎng)站目標(biāo)。具體目標(biāo)的技術(shù)可行性分析。電影信息摘要，了解網(wǎng)站建設(shè)的目標(biāo)和具體要求，功能實(shí)現(xiàn)中的每一個(gè)具體的目標(biāo)和功能的技術(shù)，同時(shí)也考慮到需要什么條件和多少人需要實(shí)現(xiàn)，并列出每個(gè)具體目標(biāo)的內(nèi)容，任務(wù)列表。2、網(wǎng)站可用性分析。網(wǎng)站的設(shè)計(jì)要求使它易于使用，而不僅僅是一個(gè)簡(jiǎn)單的信息和安排數(shù)組。此要求與網(wǎng)站的布局和服務(wù)器的功能有關(guān)。3、網(wǎng)站的互動(dòng)分析?；?dòng)是現(xiàn)代網(wǎng)站發(fā)展的趨勢(shì)，網(wǎng)站的互動(dòng)性能可以提高網(wǎng)站的處理功能和存儲(chǔ)容量的需求，內(nèi)部結(jié)構(gòu)設(shè)計(jì)可以相應(yīng)調(diào)整。4、網(wǎng)站的性能分析。網(wǎng)站的用戶數(shù)量隨著網(wǎng)站的性能和功能的不斷變化，在保證網(wǎng)站性能的前提下，不斷滿足更多用戶的需求，并不斷地進(jìn)行規(guī)劃、設(shè)計(jì)和系統(tǒng)維護(hù)。站點(diǎn)的整體性能一般通過站點(diǎn)的響應(yīng)時(shí)間和處理時(shí)間以及平均用戶等待時(shí)問和系統(tǒng)輸出來衡量。因此，為了提高網(wǎng)站的性能，可以通過調(diào)查用戶的數(shù)量和信息處理量來確定網(wǎng)站服務(wù)器的功能。

第四章bootstrap電影網(wǎng)站的原型設(shè)計(jì)bootstrap電影網(wǎng)站的頁面結(jié)構(gòu)這部分請(qǐng)?zhí)砑右欢ǖ奈淖謹(jǐn)⑹?，介紹網(wǎng)站頁面構(gòu)成，每個(gè)頁面的大概功能圖4-1表4-1網(wǎng)站設(shè)計(jì)思想表文件名內(nèi)容index.htmlXXXXXXXXXXXXX登錄如有帳號(hào)直接登錄，否則注冊(cè)首頁點(diǎn)擊登錄，跳轉(zhuǎn)到首頁，查看本電影站放映的電影購票點(diǎn)擊購票系統(tǒng)，選擇影片進(jìn)行購票

（所做項(xiàng)目名）的Axure原型設(shè)計(jì)■于bootstrap電影網(wǎng)站設(shè)計(jì)圖4.2-1此頁面為登錄頁面點(diǎn)擊登錄按鈕，則跳轉(zhuǎn)到首頁,如圖此頁面為登錄頁面點(diǎn)擊登錄按鈕，則跳轉(zhuǎn)到首頁,如圖4.2-3點(diǎn)擊注冊(cè)頁面則跳轉(zhuǎn)至注冊(cè)頁面，如圖冊(cè)頁面則跳轉(zhuǎn)至注冊(cè)頁面，如圖4.2-2注冊(cè)頁面Y明鼻.注冊(cè)頁面Y明鼻.利工學(xué)?作邙1J汽E靜?本-?M???AKIS4T?.期1**SnS曰41-與FuHtiAr--—修匕行――■wid『-，a)?Mefg.睥.品理事?h匹邛二軍r皿至"kownr*h3randWW方字nene-,J1■富司斗丁耳聞3?鼬，而|『<■Vw4竄日金.?■咽E/-￡2"REIb,rn.?4'<度.t?z打算ia事■7：！餐7s餐7s哈P-IQ圖4.2-2此頁面為注冊(cè)頁面，用戶填寫注冊(cè)資料，填寫完整后點(diǎn)擊提交按鈕，則系統(tǒng)判斷是否按照要求填寫完整，如是，則顯示隱藏框“注冊(cè)成功”等待兩秒后，跳轉(zhuǎn)至登錄頁面如圖圖4.2-1并自動(dòng)填寫會(huì)員名和密碼。如否，則彈出提示框：“請(qǐng)完整填寫資料”

江事理出Gewara格瓦拉日電崽sfinnvfWr?租"■3?XW?K蕾中.不左rf?1010-1068江事理出Gewara格瓦拉日電崽sfinnvfWr?租"■3?XW?K蕾中.不左rf?1010-1068夠瓦擔(dān)皿生璃w?圖4.2-3此頁面為首頁，當(dāng)用戶登錄成功后，將跳轉(zhuǎn)至此頁面，此頁面有導(dǎo)航功能,下拉菜單，選擇器，和圖片輪播功能等。其部分交互頁面如圖4.2-4

圖片輪播j9顯球單擊時(shí)?8用例1弓在當(dāng)前婷口打開贓案J/每?jī)伸o入時(shí)J界用伊!1夕設(shè)量山到停匕循環(huán)改到停Lt精環(huán)?S1到寫匕精球J?威項(xiàng)移出時(shí)?昂用傀1手設(shè)里d1到b-Jext同左福高out500ns向左百高in500ms———精齊司導(dǎo)2000定秒?d2到Wxt自動(dòng)脩環(huán)傕環(huán)良嗝工00口電此s1副Next向無涓就out5gli號(hào)間正滑中in500ms同交雁環(huán)菌球耳隔2口00釗＞過志面板CC態(tài)阿可開普用就熟面做司痣動(dòng)動(dòng)態(tài)面板無霜來園版整近51也為向左海朝向右港碓裁A時(shí).甫弱1胸沒隹d1到Next何丘港就out5Cams向左滑動(dòng)in500rriE=這謂琉指瓊京喝2000鈕；心SINext目動(dòng)情環(huán)睛礙如0。孰.M到z2更參普中圖4.2-4(1)■"?思標(biāo)單擊問J,用倒1手四川乳網(wǎng)白亢同壬滑前014500例;_^入；￡出力500值自前相瓦s1乳Next向三備動(dòng)out500ms；Qik±in500ms自動(dòng)笛環(huán)笛環(huán)亙展2000里也(P到Ne建目前蕾玨」/品檢秘人因dA用例1手信各d1乳停止獵二R.d之乳停止宿隊(duì)￡1氫停止帚然?"?鼠標(biāo)移出目」豆再的1岳波著d1到Next向主點(diǎn)意out500ms淡/；二土m503ms多意喟圻謔環(huán)亙泰2口口口室就四到隨漓目前靖環(huán)巖環(huán)河隔NWQ至秩e1社Next向左滑動(dòng)OLrtSOCrro四原由in5D0ms曰前f&環(huán)情雜，同梟2000里號(hào)更多事件圖4.2-4(2)

，，理p*?艮,■i?.1，，理p*?艮,■i?.1??iMi'.EjtE1'1月運(yùn)可豐您所選擇的電影圖4.2-5此頁面為選票，購票頁面。用戶將選擇作為號(hào)，點(diǎn)擊提交選擇，則判斷是否選擇了座位，如果是，則彈出隱藏框“購票成功”，并停頓兩秒后跳轉(zhuǎn)至首頁如否，則彈出隱藏框“請(qǐng)選擇座位號(hào)”。第五章電影網(wǎng)站的Bootstrap設(shè)計(jì)5.1電影首頁頁面的設(shè)計(jì)此頁面，采用div控件布局，將各個(gè)模塊進(jìn)行分區(qū)。其頁面布局如下：導(dǎo)航欄左標(biāo)題欄圖片輪播右標(biāo)題欄底部圖5-1核心代碼如下：布局Html代碼<divclass="biankuang"style="width:1024px;height:768px"><divclass="dingbu"style="width:100%;height:30px;">頂部</div><divclass="zuobu"style="width:200px;height:100%;float:left;">左部</div><divclass="youbu"style="width:100%;height:100%;float:left;">右部</div></div>代碼1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional/ZEN"/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>基于bootstarp電影網(wǎng)站設(shè)計(jì)</title><metaname="keywords"content="網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化”/><metaname="description"content="電影購票系統(tǒng)模板"/><linkhref="images/style.css"rel="stylesheet"type="text/css"/></head><body><divclass="content"><!--主體開始--><divclass="headtop"></div><divclass="headtop2"><!--主體頂部開始--><divclass="logo"></div><divclass="headr"><li><ahref="#">設(shè)為首頁</a>|<ahref="#">加入收藏</a></li><li><imgsrc="images/tel.gif"width="258"height="31"/></li></div></div><!--主體頂部結(jié)束--><divclass="menu"><!--主體導(dǎo)航開始--><li><ahref="#">熱映</a></li><liclass="line"></li><li><ahref="gsjj.html">影院</a></li><liclass="line"></li><li><ahref="fwxm.html">即將上映</a></li><liclass="line"></li><li><ahref="gcal.html">活動(dòng)</a></li><liclass="line"></li><li><ahref="list.html">社區(qū)</a></li><liclass="line"></li><li><ahref="khly.html">客戶留言</a></li><liclass="line"></li><li><ahref="zhaopin.html">電影購票</a></li><liclass="line"></li><li><ahref="lianxi.html">聯(lián)系我們</a></li></div><!--王體導(dǎo)航結(jié)束-->代碼2<divclass="slider3"><!--主體幻燈開始--><divclass="container"id="idTransformView2"><ulclass="sliderslider2"id="idSlider2"><li><imgsrc="images/banner.jpg"/></li><li><imgsrc="images/banner2.jpg"/></li><li><imgsrc="images/banner3.jpg"/></li></ul><ulclass="num"id="idNum2"><li>1</li><li>2</li><li>3</li></ul></div><scripttype="text/javascript">var$=function(id){return"string"==typeofid?document.getElementById(id):id;};varClass={create:function(){returnfunction(){this.initialize.apply(this,arguments);}}}Object.extend=function(destination,source){for(varpropertyinsource){destination[property]=source[property];}returndestination;}varTransformView=Class.create();TransformVtotype={//容器又?象，滑動(dòng)對(duì)象，切換參數(shù)，切換數(shù)量initialize:function(container,slider,parameter,count,options){if(parameter<=0||count<=0)return;varoContainer=$(container),oSlider=$(slider),oThis=this;代碼3this.Index=0;//當(dāng)前索引this._timer=null;//定時(shí)器this._slider=oSlider;//滑動(dòng)對(duì)象this._parameter=parameter;//切換參數(shù)this._count=count||0;//切換數(shù)量this._target=0;//目標(biāo)參數(shù)this.SetOptions(options);this.Up=!!this.options.Up;this.Step=Math.abs(this.options.Step);this.Time=Math.abs(this.options.Time);this.Auto=!!this.options.Auto;this.Pause=Math.abs(this.options.Pause);this.onStart=this.options.onStart;this.onFinish=this.options.onFinish;oContainer.style.overflow="hidden";oContainer.style.position="relative";oSlider.style.position="absolute";oSlider.style.top=oSlider.style.left=0;},//設(shè)置默認(rèn)屬性SetOptions:function(options){this.options={//默認(rèn)值Up:true,//是否向上(否則向左)Step:5,//滑動(dòng)變化率Time:10,//滑動(dòng)延時(shí)Auto:true,//是否自動(dòng)轉(zhuǎn)換Pause:2000,//停頓時(shí)間(Auto為true時(shí)有效)onStart:function。。,//開始轉(zhuǎn)換時(shí)執(zhí)行onFinish:function(){}〃完成轉(zhuǎn)換時(shí)執(zhí)行};Object.extend(this.options,options||{});},//開始切換設(shè)置代碼4Start:function(){if(this.Index<0){this.Index=this._count-1;}elseif(this.Index>=this._count){this.Index=0;}this._target=-1*this._parameter*this.Index;this.onStart();this.Move();},〃移動(dòng)Move:function(){clearTimeout(this._timer);varoThis=this,style=this.Up?"top":"left",iNow=parseInt(this._slider.style[style])||0,iStep=this.GetStep(this._target,iNow);if(iStep!=0){this._slider.style[style]=(iNow+iStep)+"px";this._timer=setTimeout(function(){oThis.Move();},this.Time);}else{this._slider.style[style]=this._target+"px";this.onFinish();if(this.Auto){this._timer=setTimeout(function(){oThis.Index++;oThis.Start();},this.Pause);}}},//獲取步長(zhǎng)GetStep:function(iTarget,iNow){variStep=(iTarget-iNow)/this.Step;if(iStep==0)return0;if(Math.abs(iStep)<1)return(iStep>0?1:-1);returniStep;},〃停止Stop:function(iTarget,iNow){clearTimeout(this._timer);this._slider.style[this.Up?"top":"left"]=this._target+"px";}};window.onload=function(){functionEach(list,fun){for(vari=0,len=list.length;i<len;i++){fun(list[i],i);}代碼5varobjs2=$("idNum2").getElementsByTagName("li");vartv2=newTransformView("idTransformView2","idSlider2”,990,3,{onStart:function(){Each(objs2,function(o,i){o.className=tv2.Index==i"on":"";})},//按鈕樣式Up:false})；tv2.Start();Each(objs2,function(o,i){o.onmouseover=function(){o.className="on";tv2.Auto=false;tv2.Index=i;tv2.Start();}o.onmouseout=function(){o.className="";tv2.Auto=true;tv2.Start();}})}</script></div><!--王體幻燈結(jié)束--><divclass="maintop"></div><divclass="main1"><!--主體內(nèi)容開始--><divclass="main_l"><!--主體左側(cè)開始--><divclass="leftbt"><divclass="xwtxt">快速購票</div></div>代碼6<divclass="leftbtnr"><li><ahref="#">電影首頁</a></li><li><ahref="#">熱映電影</a></li><li><ahref="#">即將上映</a></li><li><ahref="#">電影院</a></li><li><ahref="#">電影活動(dòng)</a></li><li><ahref="#">電影質(zhì)詢</a></li><li><ahref="#">電影庫</a></li><li><ahref="#">電影社區(qū)</a></li></div></div><!--主體左側(cè)結(jié)束--><divclass="mr"><!--主體右側(cè)開始--><divclass="mbrbt"><imgsrc="images/fwxm.gif"/></div><divclass="mrbtnr"><!--主體右側(cè)內(nèi)容開始--><divclass="mrnr"></div><divclass="fanye"><spanclass="disabled"><</span><spanclass="current">1</span><ahref="#?page=2">2</a><ahref="#?page=3">3</a><ahref="#?page=4">4</a><ahref="#?page=5">5</a><ahref="#?page=6">6</a><ahref="#?page=7">7</a>...<ahref="#?page=199">199</a><ahref="#?page=200">200</a><ahref="#?page=2">></a></div></div><!--主體右側(cè)內(nèi)容結(jié)束--></div><!--王體右伊結(jié)束--></div><!--主體內(nèi)容結(jié)束--><divclass="foot"><br/>版權(quán)所有<br/>來源:<ahref="http:〃/"targe