基于bootstrap電影網(wǎng)站設計

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

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

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

（所做項目名）的Axure原型設計■于bootstrap電影網(wǎng)站設計圖4.2-1此頁面為登錄頁面點擊登錄按鈕，則跳轉到首頁,如圖此頁面為登錄頁面點擊登錄按鈕，則跳轉到首頁,如圖4.2-3點擊注冊頁面則跳轉至注冊頁面，如圖冊頁面則跳轉至注冊頁面，如圖4.2-2注冊頁面Y明鼻.注冊頁面Y明鼻.利工學?作邙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此頁面為注冊頁面，用戶填寫注冊資料，填寫完整后點擊提交按鈕，則系統(tǒng)判斷是否按照要求填寫完整，如是，則顯示隱藏框“注冊成功”等待兩秒后，跳轉至登錄頁面如圖圖4.2-1并自動填寫會員名和密碼。如否，則彈出提示框：“請完整填寫資料”

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

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

，，理p*?艮,■i?.1，，理p*?艮,■i?.1??iMi'.EjtE1'1月運可豐您所選擇的電影圖4.2-5此頁面為選票，購票頁面。用戶將選擇作為號，點擊提交選擇，則判斷是否選擇了座位，如果是，則彈出隱藏框“購票成功”，并停頓兩秒后跳轉至首頁如否，則彈出隱藏框“請選擇座位號”。第五章電影網(wǎng)站的Bootstrap設計5.1電影首頁頁面的設計此頁面，采用div控件布局，將各個模塊進行分區(qū)。其頁面布局如下：導航欄左標題欄圖片輪播右標題欄底部圖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)站設計</title><metaname="keywords"content="網(wǎng)站建設、網(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="#">設為首頁</a>|<ahref="#">加入收藏</a></li><li><imgsrc="images/tel.gif"width="258"height="31"/></li></div></div><!--主體頂部結束--><divclass="menu"><!--主體導航開始--><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">活動</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><!--王體導航結束-->代碼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={//容器又?象，滑動對象，切換參數(shù)，切換數(shù)量initialize:function(container,slider,parameter,count,options){if(parameter<=0||count<=0)return;varoContainer=$(container),oSlider=$(slider),oThis=this;代碼3this.Index=0;//當前索引this._timer=null;//定時器this._slider=oSlider;//滑動對象this._parameter=parameter;//切換參數(shù)this._count=count||0;//切換數(shù)量this._target=0;//目標參數(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;},//設置默認屬性SetOptions:function(options){this.options={//默認值Up:true,//是否向上(否則向左)Step:5,//滑動變化率Time:10,//滑動延時Auto:true,//是否自動轉換Pause:2000,//停頓時間(Auto為true時有效)onStart:function。。,//開始轉換時執(zhí)行onFinish:function(){}〃完成轉換時執(zhí)行};Object.extend(this.options,options||{});},//開始切換設置代碼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();},〃移動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);}}},//獲取步長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><!--王體幻燈結束--><divclass="maintop"></div><divclass="main1"><!--主體內(nèi)容開始--><divclass="main_l"><!--主體左側開始--><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="#">電影活動</a></li><li><ahref="#">電影質詢</a></li><li><ahref="#">電影庫</a></li><li><ahref="#">電影社區(qū)</a></li></div></div><!--主體左側結束--><divclass="mr"><!--主體右側開始--><divclass="mbrbt"><imgsrc="images/fwxm.gif"/></div><divclass="mrbtnr"><!--主體右側內(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><!--主體右側內(nèi)容結束--></div><!--王體右伊結束--></div><!--主體內(nèi)容結束--><divclass="foot"><br/>版權所有<br/>來源:<ahref="http:〃/"targe