《基于HTML5的表演道具購物網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)》摘要隨著網(wǎng)上購物的發(fā)展，人們?cè)絹碓絻A向于在足不出戶便能直接購物。于是，一個(gè)優(yōu)秀的購物網(wǎng)站便成為商家們的第一門面。對(duì)商家來說，銷售途徑多了一個(gè)銷售渠道，讓更多人知道了解店內(nèi)信息，增加品牌知名度和店內(nèi)產(chǎn)品的消息流通，擴(kuò)大了消費(fèi)群體。對(duì)消費(fèi)者來說，減少不必要的盲目選擇，簡潔明了地對(duì)比不同物品，更直觀看到自己所需的商品，更快捷省時(shí)的搜索到自己需要的商品。本文是對(duì)一個(gè)簡單的購物網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)的描述，該網(wǎng)站基于HTML5技術(shù)的實(shí)現(xiàn)開發(fā)和部署，利用webstorm、photoshop等軟件作為前端界面開發(fā)，盡可能的保證系統(tǒng)的安全性與穩(wěn)定性。用戶可在瀏覽器中直接打開該網(wǎng)站進(jìn)行物品詳情查看、選購等操作。而商家也可方便地更改商品信息，實(shí)現(xiàn)與購物者的交流。關(guān)鍵詞：購物網(wǎng)站、HTML5、交流AbstractWiththedevelopmentofonlineshopping,peoplearemoreandmoreinclinedtoshopdirectlywithoutleavinghome.Asaresult,anexcellentshoppingwebsitehasbecomethefirstsymbolofbusinessmen.Forbusinessmen,thereisanadditionalsaleschanneltoletmorepeopleknowabouttheinformationinthestore,increasebrandawarenessandinformationflowofproductsinthestore,shileexpandingtheconsumergroup.Forconsumers,reducingunnecessaryblindchoice,conciseandclearcomparisonofdifferentitems,moreintuitivetoseethegoodstheyneed,fasterandtime-savingsearchforthegoodstheyneed.ThistextdescribesthedesignandimplementationofasimpleshoppingwebsitebasedonHTML5technology,usingwebstorm,Photoshopandothersoftwareasthefront-endinterfacedevelopment,asfaraspossibletoensurethesecurityandstabilityofthesystem.Userscandirectlyopenthewebsiteinthebrowsertoviewthedetailsoftheitems,purchaseandotheroperations.Businessmencanalsoeasilychangecommodityinformationtoachieveexchangeswithshoppers.Keywords:ShoppingWebsite,HTML5,Communication目錄1緒論課題背景舞臺(tái)劇，可以定義為呈現(xiàn)于舞臺(tái)的戲劇藝術(shù)。舞臺(tái)劇的劇情可以原創(chuàng)也可以根據(jù)小說、動(dòng)漫、電視劇、電影等改編而來。舞臺(tái)劇基本上采用“演唱+舞蹈+對(duì)白”這樣的形式，再加上是現(xiàn)場(chǎng)演出，所以對(duì)演員的要求非常高。另外還不可避免的涉及到音樂、劇本、造型、舞臺(tái)設(shè)計(jì)、燈光等專業(yè)技能。舞臺(tái)劇按內(nèi)容可以分為喜劇、悲劇和正??；按表現(xiàn)形式可以分為歌劇、舞劇、話劇、啞劇、詩劇、偶發(fā)劇、木偶劇等。由于現(xiàn)代科技的進(jìn)步，不僅舞臺(tái)的配套設(shè)施日臻完美，而且舞臺(tái)自身的功能愈發(fā)齊全——燈光的旋、掃、閃，裝置的升、移、搖，音效可以在劇院環(huán)繞，影像可以在舞臺(tái)升騰；舞臺(tái)可以橫移，舞臺(tái)可以旋轉(zhuǎn)，舞臺(tái)可以云山霧罩，舞臺(tái)可以呼風(fēng)喚雨。課題的意義隨著網(wǎng)上購物的發(fā)展，人們?cè)絹碓絻A向于在足不出戶便能直接購物。于是，一個(gè)優(yōu)秀的購物網(wǎng)站便成為商家們的第一門面。對(duì)商家來說，銷售途徑多了一個(gè)銷售渠道，讓更多人知道了解店內(nèi)信息，增加品牌知名度和店內(nèi)產(chǎn)品的消息流通，擴(kuò)大了消費(fèi)群體。對(duì)消費(fèi)者來說，減少不必要的盲目選擇，簡潔明了地對(duì)比不同物品，更直觀看到自己所需的商品，更快捷省時(shí)的搜索到自己需要的商品。該網(wǎng)站是一個(gè)商家與顧客進(jìn)行信息交流的平臺(tái)，顧客自由挑選商品、添加至購物車。與此同時(shí)，商家能方便地更改商品信息，即使并未擁有大量網(wǎng)站開發(fā)經(jīng)驗(yàn)，功能人性化，維護(hù)成本低，可塑性高。如今的社會(huì)里信息瞬息萬變，互聯(lián)網(wǎng)將素未謀面的人連接了起來，他們也許一生也不會(huì)見面，但是他們能通過網(wǎng)絡(luò)了解對(duì)方，足不出戶知天下事已成常態(tài)，網(wǎng)絡(luò)購物也應(yīng)聲而至。所以，為了讓顧客買得放心，商家賺的舒心，如何構(gòu)建一個(gè)“中介”將是一個(gè)個(gè)重要的環(huán)節(jié)。舞臺(tái)劇形勢(shì)國內(nèi)舞臺(tái)劇形勢(shì)在中國，舞臺(tái)劇在人們?nèi)粘５膴蕵坊顒?dòng)中逐漸被邊緣化，因?yàn)樾蓍e時(shí)間資源早已被其他更加豐富多彩的娛樂形式所占用，同時(shí)因?yàn)槲枧_(tái)劇在人力物力方便消耗巨大，雖然有人仍在堅(jiān)持，是由于國人的欣賞水平、文化素質(zhì)尚待提高，還是由于劇團(tuán)的管理體制需要改革，亦或是再無“新鮮血液”。總的來說，由于觀眾群體特殊以及娛樂選擇的多樣性，舞臺(tái)劇在國內(nèi)生存環(huán)境并不樂觀。舞臺(tái)劇很難如其熱愛者所希望的那樣“振興”起來。但舞臺(tái)劇仍將存在，存在于人們?nèi)粘蕵坊顒?dòng)的邊緣地帶。它會(huì)擁有一個(gè)不大但忠實(shí)的觀眾群。這些人或有著某種歷史、文化、藝術(shù)教養(yǎng)的自我期許，或樂于選擇不那么大眾化的娛樂形式來滿足某種文化群體上的區(qū)別化的需求，或二者兼而有之。隨著觀眾群體的減少，以舞臺(tái)劇為業(yè)商業(yè)團(tuán)體收入越來越不穩(wěn)定，逐漸就只剩下憑興趣自己出力表演的團(tuán)體。道具原材料購買難成了他們面臨的最大問題。國外舞臺(tái)劇形勢(shì)舞臺(tái)劇在國外有很強(qiáng)的群眾基礎(chǔ)，由不同文化導(dǎo)致的休閑娛樂模式不同，他們樂于甚至是熱衷于表演，這就體現(xiàn)了舞臺(tái)劇道具購物網(wǎng)站的可行性，強(qiáng)大的客戶基礎(chǔ)可以更好的推進(jìn)商家與客戶之間的商業(yè)交流，互相推進(jìn)網(wǎng)站的進(jìn)步2網(wǎng)站的理論基礎(chǔ)2.1開發(fā)環(huán)境以及開發(fā)技術(shù)依據(jù)網(wǎng)站的開發(fā)目標(biāo)，以及網(wǎng)站的適用人群，從成本、安全性、穩(wěn)定性、可修改可擴(kuò)展性上等方面考慮，該網(wǎng)站采用了以下所列的理論及技術(shù)：操作系統(tǒng)：Windows開發(fā)軟件：Dreamweaver+Webstorm+Photoshop網(wǎng)站開發(fā)：HTML5+JS+CSS2.2HTML5概述HTML是超文本標(biāo)記語言的縮寫，它是用于描述網(wǎng)頁的標(biāo)記語言。它不需要由瀏覽器編譯和直接執(zhí)行。HTML是一種標(biāo)準(zhǔn)，它用符號(hào)標(biāo)記頁面的各個(gè)部分。頁面文件是文本文件，通過在文本文件中添加標(biāo)記，它可以告訴瀏覽器如何顯示其內(nèi)容。HTML5是2008年發(fā)布的最新HTML標(biāo)準(zhǔn)。HTML5最重要的新功能是支持音頻和視頻，如構(gòu)建音頻可視化、在線視頻編輯。這一突破為互聯(lián)網(wǎng)多媒體技術(shù)帶來了更大的發(fā)展空間，為多媒體技術(shù)協(xié)同編輯提供了更好的平臺(tái)。HTML5最流行和最受歡迎的功能之一是能夠?qū)⒁曨l內(nèi)容直接嵌入網(wǎng)頁，而無需第三方插件（如Flash播放器）。瀏覽器提供本地視頻的新功能使Web開發(fā)人員更容易將視頻內(nèi)容發(fā)布到其網(wǎng)站，而無需依賴外部技術(shù)的可用性。HTML5通過使用統(tǒng)一的語言、數(shù)據(jù)模型和規(guī)則來執(zhí)行音頻和視頻，使開發(fā)人員能夠輕松地集成音頻和視頻內(nèi)容以及網(wǎng)頁的其他內(nèi)容，并為互聯(lián)網(wǎng)上的多媒體應(yīng)用提供了一種新的方法。HTML5新功能的應(yīng)用增強(qiáng)了頁面的性能屬性，增加了本地?cái)?shù)據(jù)庫等應(yīng)用，使得互聯(lián)網(wǎng)交互內(nèi)容越來越豐富，用戶體驗(yàn)大大增強(qiáng)。HTML5是全球移動(dòng)互聯(lián)網(wǎng)行業(yè)的焦點(diǎn)。在移動(dòng)互聯(lián)網(wǎng)時(shí)代，最重要的是低功耗設(shè)備、觸摸界面和開放式網(wǎng)絡(luò)標(biāo)準(zhǔn)，這些都是flash的缺點(diǎn)。HTML5標(biāo)準(zhǔn)將贏得移動(dòng)設(shè)備的未來。隨著HTTP直播流、音頻數(shù)據(jù)API對(duì)等網(wǎng)絡(luò)等相關(guān)技術(shù)的發(fā)展，HTML5多媒體的應(yīng)用將更加廣泛，具有廣闊的前景。2.3JS概述JS，全稱為javascript。出生于1995。最初創(chuàng)建JS是為了驗(yàn)證表單輸入。在Javascript誕生之前，表單驗(yàn)證都是在服務(wù)器上完成的。在撥號(hào)上網(wǎng)的時(shí)代，這是一件非常痛苦的事情?，F(xiàn)在，JavaScript已經(jīng)從一種簡單的驗(yàn)證輸入語言發(fā)展到一種非常強(qiáng)大的編程語言。如今，JavaScript已經(jīng)成為一種具有松散性、對(duì)象屬性和繼承機(jī)制的語言。他的語言的核心與C、C++、Java沒有很大的不同，但其中的變量類型不必定義為整數(shù)?？梢允褂米址愋?，這就是它的松散性。它的對(duì)象屬性是指將變量的屬性名映射為任意屬性值，類似于哈希表和關(guān)聯(lián)數(shù)組。繼承機(jī)制是基于原型的，類似于自語言，它與C++和Java有很大的不同。javascript的核心是ecmascript。ecmascript不依賴于瀏覽器。它只是定義了語言的基礎(chǔ)，在這個(gè)基礎(chǔ)上，我們構(gòu)建了腳本語言。為了提高javascript的功能?，F(xiàn)在ecmascript有四個(gè)版本。主流瀏覽器基本上與該語言兼容。因此，javascript與瀏覽器兼容。Javascript由于其跨平臺(tái)和易訪問性在編程中很受歡迎。同時(shí)，一些特殊的功能，比如Ajax，必須依賴于客戶端的javascript支持。因此，JavaScript越來越流行。2.4CSS概述CSS，全稱為CascadingStyleSheets（層疊樣式表），是一種常用于表現(xiàn)HTML和XML等文件樣式的計(jì)算機(jī)語言。從HTML被發(fā)明開始，樣式就以各種形式存在。不同的瀏覽器結(jié)合它們各自的樣式語言為用戶提供頁面效果的控制。隨著HTML的成長，為了滿足頁面設(shè)計(jì)者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。于是CSS便誕生了。CSS為HTML標(biāo)記語言提供了一種樣式描述，具有以下特點(diǎn)：豐富的樣式定義：CSS提供了豐富的文檔樣式外觀，以及設(shè)置文本和背景屬性的能力；允許為任何元素創(chuàng)建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內(nèi)容間的距離；允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。（2）易于使用和修改：CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個(gè)專門的CSS文件中，以供HTML頁面引用?？傊?，CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。另外，可以將相同樣式的元素進(jìn)行歸類，使用同一個(gè)樣式進(jìn)行定義，也可以將某個(gè)樣式應(yīng)用到所有同名的HTML標(biāo)簽中，也可以將一個(gè)CSS樣式指定到某個(gè)頁面元素中。如果要修改樣式，我們只需要在樣式列表中找到相應(yīng)的樣式聲明進(jìn)行修改。（3）多頁面應(yīng)用：CSS樣式表可以單獨(dú)存放在一個(gè)CSS文件中，這樣我們就可以在多個(gè)頁面中使用同一個(gè)CSS樣式表。CSS樣式表理論上不屬于任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實(shí)現(xiàn)多個(gè)頁面風(fēng)格的統(tǒng)一。（4）層疊：簡單的說，層疊就是對(duì)一個(gè)元素多次設(shè)置同一個(gè)樣式，這將使用最后一次設(shè)置的屬性值。例如對(duì)一個(gè)站點(diǎn)中的多個(gè)頁面使用了同一套CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以針對(duì)這些樣式單獨(dú)定義一個(gè)樣式表應(yīng)用到頁面中。這些后來定義的樣式將對(duì)前面的樣式設(shè)置進(jìn)行重寫，在瀏覽器中看到的將是最后面設(shè)置的樣式效果。（5）頁面壓縮：在使用HTML定義頁面效果的網(wǎng)站中，往往需要大量或重復(fù)的表格和font元素形成各種規(guī)格的文字樣式，這樣做的后果就是會(huì)產(chǎn)生大量的HTML標(biāo)簽，從而使頁面文件的大小增加。而將樣式的聲明單獨(dú)放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時(shí)使用的時(shí)間也會(huì)大大的減少。另外，CSS樣式表的復(fù)用更大程度的縮減了頁面的體積，減少下載的時(shí)間。2.5Dreamweaver簡介借助共享型用戶界面設(shè)計(jì),在AdobeCreativeSuite4的不同組件之間更快、更明智地工作。使用工作區(qū)切換器可以從一個(gè)工作環(huán)境快速切換到下一個(gè)環(huán)境。利用AdobeDreamweaverCS6軟件中改善的FTP性能，更高效地傳輸大型文件?！皩?shí)時(shí)視圖”和“多屏幕預(yù)覽”面板可呈現(xiàn)HTML5代碼，使您能檢查自己的工作。使用響應(yīng)迅速的CSS3自適應(yīng)網(wǎng)格版面，來創(chuàng)建跨平臺(tái)和跨瀏覽器的兼容網(wǎng)頁設(shè)計(jì)。利用簡潔、業(yè)界標(biāo)準(zhǔn)的代碼為各種不同設(shè)備和計(jì)算機(jī)開發(fā)項(xiàng)目，提高工作效率。直觀地創(chuàng)建復(fù)雜網(wǎng)頁設(shè)計(jì)和頁面版面，無需忙于編寫代碼。將CSS屬性變化制成動(dòng)畫轉(zhuǎn)換效果，使網(wǎng)頁設(shè)計(jì)栩栩如生。在您處理網(wǎng)頁元素和創(chuàng)建優(yōu)美效果時(shí)保持對(duì)網(wǎng)頁設(shè)計(jì)的精準(zhǔn)控制。通過CSS面板設(shè)置樣式，該面板經(jīng)過更新可支持新的CSS3規(guī)則。設(shè)計(jì)視圖現(xiàn)支持媒體查詢，在您調(diào)整屏幕尺寸的同時(shí)可應(yīng)用不同的樣式。使用HTML5進(jìn)行前瞻性的編碼，同時(shí)提供代碼提示和設(shè)計(jì)視圖渲染支持。2.6Webstorm簡介作為一款JavaScript開發(fā)工具，Webstorm目前已經(jīng)被廣大中國JS開發(fā)者譽(yù)為“Web前端開發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScriptIDE”等。支持HTML5、CSS、JS，能夠進(jìn)行批量代碼分析，實(shí)現(xiàn)代碼的檢測(cè)與修復(fù)。支持不同瀏覽器的提示，還包括所有用戶自定義的函數(shù)(項(xiàng)目中)，代碼補(bǔ)全包含了所有流行的庫，比如：JQuery,YUI,Dojo,Prototype,MootoolsandBindows。方便、簡潔的界面和功能，為開發(fā)帶來了巨大的便利。2.7Photoshop簡介作為一款圖像處理軟件，Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進(jìn)行圖片編輯工作，在圖像、圖形、文字、視頻、出版等各方面都有涉及。Photoshop的專長在于圖像處理，而不是圖形創(chuàng)作。圖像處理是對(duì)已有的位圖圖像進(jìn)行編輯加工處理以及運(yùn)用一些特殊效果，其重點(diǎn)在于對(duì)圖像的處理加工；圖形創(chuàng)作軟件是按照自己的構(gòu)思創(chuàng)意，使用矢量圖形等來設(shè)計(jì)圖形。通過Photoshop的處理，可以將不同的對(duì)象組合在一起，使圖像發(fā)生變化。從功能上看，該軟件可分為圖像編輯、圖像合成、校色調(diào)色及功能色效制作部分等。圖像編輯是圖像處理的基礎(chǔ)，可以對(duì)圖像做各種變換如放大、縮小、旋轉(zhuǎn)、傾斜、鏡像、透視等；也可進(jìn)行復(fù)制、去除斑點(diǎn)、修補(bǔ)、修飾圖像的殘損等。圖像合成則是將幾幅圖像通過圖層操作、工具應(yīng)用合成完整的、傳達(dá)明確意義的圖像，這是美術(shù)設(shè)計(jì)的必經(jīng)之路；該軟件提供的繪圖工具讓外來圖像與創(chuàng)意很好地融合。校色調(diào)色可方便快捷地對(duì)圖像的顏色進(jìn)行明暗、色偏的調(diào)整和校正，也可在不同顏色進(jìn)行切換以滿足圖像在不同領(lǐng)域如網(wǎng)頁設(shè)計(jì)、印刷、多媒體等方面應(yīng)用。特效制作在該軟件中主要由濾鏡、通道及工具綜合應(yīng)用完成。包括圖像的特效創(chuàng)意和特效字的制作，如油畫、浮雕、石膏畫、素描等常用的傳統(tǒng)美術(shù)技巧都可藉由該軟件特效完成。網(wǎng)絡(luò)的普及是促使更多人需要掌握Photoshop，使Photoshop成為在制作網(wǎng)頁時(shí)是必不可少的網(wǎng)頁圖像處理軟件。3需求分析3.1需求分析3.1.1開發(fā)原由在人們忙碌的一天后，已經(jīng)沒有精力再去逛實(shí)體店，只想回到家中好好休息，這一定程度上限制了本就需要到親力親為的道具挑選，這一矛盾導(dǎo)致了購買舞臺(tái)劇道具變得十分麻煩。但是網(wǎng)購十分巧妙地補(bǔ)充了一空白，在人們拖著疲憊不堪的身體回到家中，只需要輕松動(dòng)動(dòng)手指，就可以買到自己所喜愛的物品，根本不需要花費(fèi)太多時(shí)間。因此，網(wǎng)購對(duì)于忙碌的上班族是十分有益的。而對(duì)于學(xué)生黨來說，相比于是否方便，價(jià)格顯然是首要考慮的問題，因?yàn)榫W(wǎng)店沒有像實(shí)體店需要店面和裝修的費(fèi)用，因此網(wǎng)店中的物品成本相對(duì)實(shí)體店較低，學(xué)生黨不必過多的擔(dān)心購物給生活、學(xué)習(xí)和經(jīng)濟(jì)帶來的影響。3.1.2用戶需求(1)在主頁面上可以看到大部分常見商品的款式、簡介以及價(jià)格。(2)消費(fèi)者無需注冊(cè)，即可瀏覽物品信息。(3)首頁設(shè)置有熱門推薦，商家可自選商品展示給顧客用以推薦商品。(4)通過給商品設(shè)置標(biāo)簽，用以分類商品，并增加篩選功能，以標(biāo)簽為依據(jù)進(jìn)行商品篩選。(5)頁面設(shè)置浮標(biāo)，用以設(shè)置譬如“回到頂端”、“聯(lián)系管理員”等功能的按鈕。3.2成本及技術(shù)可行性分析3.2.1成本可行性本網(wǎng)站在開發(fā)階段無需投入設(shè)備購買以及日常維護(hù)人員，如果想在現(xiàn)實(shí)生活中直接使用，也僅僅只要租用穩(wěn)定的服務(wù)器即可。同時(shí)，在網(wǎng)站的開發(fā)上，對(duì)開發(fā)環(huán)境以及設(shè)備要求不高，各種軟硬件的配置要求較低，由此可知，設(shè)備上的投入是可行。同時(shí)，該網(wǎng)站在設(shè)計(jì)時(shí)保留了可更改性，若投入后效果不錯(cuò)，可以在主頁中比如懸浮窗口投放廣告，增進(jìn)與別的商家合作，從而賺取額外的資金，獲得運(yùn)營所需的經(jīng)濟(jì)效益。隨著網(wǎng)購的發(fā)展，網(wǎng)站的宣傳以及后續(xù)編排將會(huì)越來越順利。3.2.2技術(shù)可行性該網(wǎng)站只是簡單的網(wǎng)購網(wǎng)站，完成挑選，篩選，修改等基本功能。網(wǎng)站主要應(yīng)用在PC端，不管是硬件環(huán)境，網(wǎng)絡(luò)環(huán)境還是軟件環(huán)境，相對(duì)來說都是比較可靠安全的。網(wǎng)站采用多框架相結(jié)合，不局限于一直使用同一框架，在圖片選取方面，也經(jīng)過了精心的挑選以及處理，這些技術(shù)在網(wǎng)絡(luò)上都有相當(dāng)多的技術(shù)文檔可以查詢被我們參考采納。因此，在技術(shù)上，這是可行的。3.2.3應(yīng)用可行性隨著私人電腦的推廣和普及，以及網(wǎng)絡(luò)環(huán)境的搭建，使用死人電腦的人數(shù)日漸增多，基本上實(shí)現(xiàn)了人手一臺(tái)。用戶對(duì)于相關(guān)新鮮的產(chǎn)品接受率高，而且該網(wǎng)站的操作簡單，界面簡潔方便，各種功能一看便知，故此，一般大眾都可以掌握并且使用。3.3性能需求為了讓用戶在網(wǎng)站上體驗(yàn)良好，該網(wǎng)站在對(duì)用戶響應(yīng)時(shí)間上，可靠性，安全性等方面都有較高的要求。3.3.1UI需求網(wǎng)站的UI要求如下：頁面內(nèi)容：由于商品較多，容易讓用戶眼花繚亂，所以要求開發(fā)員對(duì)每個(gè)版面有個(gè)整體的規(guī)劃和主題的突出，在術(shù)語以及行文的格式上約定要規(guī)范，明確，并且統(tǒng)一。各個(gè)欄目統(tǒng)一布局，舍去花里胡哨的無用信息，簡潔明了地向顧客傳遞商品信息。導(dǎo)航欄目：各個(gè)不同頁面上的不同功能具有明確的導(dǎo)航，同時(shí)規(guī)定導(dǎo)航文字貼近功能，讓用戶便于理解，以及使用順利技術(shù)環(huán)境：網(wǎng)站的頁面應(yīng)該自動(dòng)適用于不同分辨率的屏幕頁面，使得不同的電腦用不同的分辨率都可以瀏覽使用。在網(wǎng)頁中出現(xiàn)的鏈接上保證沒有錯(cuò)誤鏈接以及空鏈接，程序上盡量無bug，采用CSS控制的字體大小以及各個(gè)功能欄目的布局。藝術(shù)風(fēng)格：雖然目前階段網(wǎng)頁布局單一，無法加入大量的個(gè)人藝術(shù)設(shè)計(jì)，但是由于極高的可塑性，日后開發(fā)時(shí)能夠輕松地修改。頁面自然，字體的選擇應(yīng)該合理，并且整個(gè)網(wǎng)站的字體選擇應(yīng)該大體一致。需要用戶注意的功能應(yīng)該在界面上標(biāo)注顯示。3.3.2功能響應(yīng)需求在響應(yīng)時(shí)間上，當(dāng)用戶在微信端進(jìn)入網(wǎng)頁時(shí)，應(yīng)及時(shí)響應(yīng)授權(quán)界面，響應(yīng)式時(shí)間盡可能在3秒以內(nèi)，網(wǎng)頁應(yīng)該對(duì)用戶點(diǎn)擊的功能實(shí)時(shí)監(jiān)測(cè)，及時(shí)響應(yīng)的同時(shí)應(yīng)該檢測(cè)出各種超出范圍的情況，比如設(shè)備的通信突然中斷，無法連接數(shù)據(jù)庫服務(wù)器等等，及時(shí)做出響應(yīng)，避免用戶在使用期間長時(shí)間等待以及網(wǎng)頁無法做出響應(yīng)。3.3.3可靠性需求網(wǎng)頁應(yīng)該保證用戶只要授權(quán)即可使用該網(wǎng)頁的功能，同時(shí)搭建服務(wù)器時(shí)應(yīng)該盡可能的保證更多的人在網(wǎng)頁上登錄，使用時(shí)，網(wǎng)頁可以正常運(yùn)轉(zhuǎn)，做出正確的響應(yīng)。3.3.4開放性需求網(wǎng)頁具有非常高的靈活性，在開發(fā)過程中預(yù)留了之后的功能擴(kuò)展。3.3.5可擴(kuò)展性需求網(wǎng)頁在設(shè)計(jì)上要求盡可能的提現(xiàn)擴(kuò)展性的要求，以適應(yīng)將來所需要的功能的擴(kuò)展。3.3.6安全性需求因?yàn)榫W(wǎng)頁具有支付功能，設(shè)計(jì)到交易，故而應(yīng)該考慮到用戶各種操作給網(wǎng)頁帶來的風(fēng)險(xiǎn)。在支付上，調(diào)用的是微信的支付接口。網(wǎng)頁在設(shè)計(jì)開發(fā)時(shí)需要考慮到用戶可能出現(xiàn)的各種誤操作可能發(fā)生的情況，同時(shí)應(yīng)該防止用戶數(shù)據(jù)丟失，被破壞等，方便萬一出現(xiàn)錯(cuò)誤時(shí)找到問題的來源。3.4非功能性需求3.4.1外部接口說明用戶接口：用戶需要一臺(tái)連接了網(wǎng)絡(luò)的手機(jī)，同時(shí)是微信上的用戶3.4.2性能需求1、理論上可以支持無限的終端數(shù)量2、理論上應(yīng)該可以支持無限的同時(shí)操作的用戶數(shù)量，只是在并行下用戶同時(shí)出現(xiàn)邀請(qǐng)的動(dòng)作是，服務(wù)器的并發(fā)量高，可能會(huì)造成反應(yīng)速度較慢，這需要根據(jù)實(shí)際情況慢慢改進(jìn)3、用戶等待網(wǎng)頁的響應(yīng)時(shí)間應(yīng)該控制在3秒之內(nèi)4、網(wǎng)頁對(duì)硬件的基本沒有要求，只需要一臺(tái)使用可以使用微信并且上網(wǎng)的手機(jī)即可。同時(shí)對(duì)內(nèi)存儲(chǔ)器和輔助存儲(chǔ)器的容量有一點(diǎn)要求。因?yàn)榫W(wǎng)頁會(huì)在用戶端對(duì)用戶數(shù)據(jù)做緩存，故而內(nèi)存不應(yīng)該低于1M3.4.3特性1、安全性因?yàn)檫@個(gè)網(wǎng)頁是社交網(wǎng)頁，在使用過程中會(huì)發(fā)生交易，故而網(wǎng)頁應(yīng)該保證盡可能安全。2、穩(wěn)定性網(wǎng)頁應(yīng)該及時(shí)維護(hù)，保證用戶在使用期間穩(wěn)定，不會(huì)出現(xiàn)異常情況包括無法使用其中功能那個(gè)，無法退款等3、友好性網(wǎng)頁的設(shè)計(jì)要求對(duì)用戶友好，包括界面友好與簡便操作。同時(shí)各種欄目可以反映其功能，讓用戶方便操作4、擴(kuò)展性在設(shè)計(jì)開發(fā)之初，預(yù)留了以后擴(kuò)展的空間3.4.4網(wǎng)頁運(yùn)行環(huán)境只需在瀏覽器的網(wǎng)頁搜索該網(wǎng)頁即可使用3.5功能性需求網(wǎng)頁基于微信環(huán)境，是在微信上運(yùn)行的一款社交網(wǎng)頁，總體來說可以分為前臺(tái)用戶體驗(yàn)網(wǎng)頁與后端信息管理系統(tǒng)。一是前臺(tái)用戶體驗(yàn)網(wǎng)頁，用戶在微信上搜索該網(wǎng)頁之后，通過授權(quán)即可使用該網(wǎng)頁上的功能。用戶可以發(fā)起邀請(qǐng)，然后填寫聚會(huì)相關(guān)名稱，選擇時(shí)間，地點(diǎn)，之后填入聚會(huì)的消費(fèi)金額并支付之后可以發(fā)送給朋友，朋友在接收用戶邀請(qǐng)之后，支付消費(fèi)金額該邀約即成立。之后用戶在聚會(huì)之后可以通過網(wǎng)頁支付，并返回剩余金額到各自的微信上，用戶可以再網(wǎng)頁找到自己以往的賬單等。同時(shí)也可以創(chuàng)建群活動(dòng)基金，可以預(yù)先在里面存入金額，隨用隨取，同時(shí)可以隨時(shí)退款。二是后端信息管理系統(tǒng)，這是網(wǎng)頁的管理員對(duì)網(wǎng)頁前臺(tái)頁面用到的部分信息的管理，主要是城市省份和商家推薦以及對(duì)用戶的部分消費(fèi)返現(xiàn)的管理。網(wǎng)頁管理員通過賬號(hào)密碼登錄進(jìn)該系統(tǒng)，對(duì)城市省份和商家推薦以及對(duì)用戶的部分消費(fèi)返現(xiàn)的進(jìn)行管理，同時(shí)可以打印下載當(dāng)天的網(wǎng)頁流水等，比對(duì)微信端數(shù)據(jù)與數(shù)據(jù)庫數(shù)據(jù)是否能夠匹配。以判斷網(wǎng)頁流水是否出現(xiàn)異常等等。同時(shí)可以通過后端管理系統(tǒng)上傳商家的推薦圖等等。4核心代碼主頁面CSS框架：*{ margin:0; padding:0;}body{ height:100%; font-size:14px;}a{ text-decoration:none; color:#c8c8c8;}li{ list-style:none; float:left; padding:022px;}a:hover{ text-decoration:none;}.cont{ position:relative; width:1200px; margin:0auto;}.top{ height:100px; width:100%; min-width:1200px;background-color:#ffffff;}.logo{ float:left; margin-top:25px; margin-left:20px;}.logoa{ display:block; width:50px; height:50px; background-image:url(../images/1.png); background-size:cover; background-position:00;}.top_nav{ float:right; margin:36px180px0px0px;}.top_navlia:hover{ color:#000000; text-decoration:none;}.top_right{ position:absolute; right:0px; top:36px; width:160px; height:20px;}.login{ position:relative; display:inline-block; height:20px; width:30px; margin-left:40px; background-image:url(../images/login.png); background-position:-155px0px; background-size:240px107px;}.login:hover{ background-position:-5px0px;}.shop_car{ display:block; position:relative; float:right; height:20px; width:30px; background-image:url(../images/login.png); background-position:-155px-22px; background-size:240px107px;}.shop_car_menu{ position:absolute; width:400px; height:0px; top:25px; right:0px; box-shadow:02px10px; transition:0.2s; overflow:hidden; background-color:lightblue; border-radius:10px;}.shop_car:hover{ background-position:-5px-22px;}.shop_car:hover>.shop_car_menu,.shop_car_menu:hover{ height:300px; background-color:#ffffff; z-index:1;}.head{ height:90px; width:100%; min-width:1200px; background-color:#fafafa;}.head_nav{ padding:31px0; display:inline-block;}.head_navli{ padding:016px; height:28px;}.head_nava{ color:#666;}.head_navb{ color:#fff;}.head_nava:hover{ color:#5D57E0; text-decoration:none;}.head_navb:hover{ color:#fff; background-image:linear-gradient(hsla(0,0%,0%,0.1),rgba(0,0,0,.1)); box-shadow:inset0001pxrgba(0,0,0,.15),01px2pxrgba(0,0,0,.1);}.nav-buy{ float:left; padding:000250px; height:28px;}.buy-btn{ background-color:#6f97f0; background-image:linear-gradient(hsla(0,0%,100%,.1),rgba(0,0,0,.1)); box-shadow:inset0001pxrgba(0,0,0,.15),01px2pxrgba(0,0,0,.1); display:block; text-align:center; border-radius:4px; width:97px; height:29px; line-height:30px; transition:none;}.head_right{ position:relative; margin-top:26px; margin-left:7px; width:382px; height:32px; border-radius:50px; float:right; background-color:#fff;}.article{text-align:left;}.articleh1{width:865px;margin:0auto;line-height:36px;font-size:18px;}.middle{ height:370px; width:1920px; background-color:rgb(8,8,8);text-align:center;}.middleh1{ color:#ffffff; text-align:center; padding-top:82px; font-size:50px; font-weight:bold;}.middleh2{ color:#999999; font-size:18px; width:865px; margin:0auto; line-height:30px;}.middlea{ color:#5079d9; cursor:pointer; transition:all.15sease-out; text-decoration:none; line-height:30px; margin-left:50px; font-size:18px; float:inherit;}.middle-2{ width:1920px; height:1000px; text-align:center; background-color:#ffffff;}.middle-2h3{color:#000000; text-align:center; padding-top:100px; font-size:50px; font-weight:bold;}.middle-2h4{ color:#999; font-size:18px;}.middle-2lip{ font-size:14px; line-height:24px; padding:040px; box-sizing:border-box; color:#999; text-align:left;}.second{ width:345px; float:left; margin-left:100px;}.middle-3{ background-color:#ffffff; width:1920px; height:1000px;}.middle-3h5{ text-align:center; font-size:18px; font-weight:bold;}.middle-3h6{ color:#000000; text-align:center; padding-top:0px; font-size:50px; font-weight:bold;}.middle-3p{ text-align:center; color:#999; font-size:18px;}.forceTouch{ z-index:10; overflow:hidden; display:flex; justify-content:center; padding:0px; margin-top:50px;}.camera{ z-index:10; overflow:hidden; display:flex; justify-content:center;}.camerali{ width:960px; padding-left:0px;}.camerap{ padding:0px300px; text-align:left; font-size:12px;}.camera-2{ width:1920px; position:relative; left:30px; top:10px;}.middle-4{ position:relative; top:200px;}.other{ position:relative;width:345px; float:left; margin-left:400px;}.otherp{ text-align:left; font-size:14px; line-height:20px;}.icon{ width:128px; height:128px; margin:150px870px; background-repeat:no-repeat; background-position:50%; background-size:contain;}.search_btn{ position:absolute; display:block; border:none; left:10px; top:6px; width:20px; height:20px; background-image:url(../images/search.png); background-size:contain; /*包含圖片*/ background-color:transparent;/*消除背景*/}.search_text{ position:relative; display:block; left:40px; width:300px; height:30px; border-style:none; outline:none;}.labela{ font-size:12px; position:absolute; top:6px; left:180px; border-radius:6px; background-color:#e5efff; border:1pxsolid#93b2f7; color:#3965cc;}.labelb{ font-size:12px; position:absolute; top:6px; left:230px; border-radius:6px; background-color:#FFDEDE; border:1pxsolid#F6A0AC; color:#D83B3B;}#myCarousel{ position:relative; top:-28px;}#myCarouselol{ position:absolute; bottom:40px; margin:0auto;}.small_banner{ position:relative; top:-20px; left:5px;}.small_bannera{ display:block; width:296px; height:200px;} .small_bannerli{ display:block; padding:0; width:296px; height:200px; border-right:1pxsolid#eee;}.small_bannerli:hover{ box-shadow:0px15px25px#b2b2b2; transition:box-shadow0.25s; transform:translate3d(0,-2px,0); border-radius:10px;}.hot_sell{ position:relative; top:200px; height:490px; width:100%; min-width:1200px;}.hot_sell_head,.banner1_head{ position:absolute; top:0px; width:100%; min-width:1200px; height:60px; border-bottom:1pxsolid#eee;}.hot_sell_body{ position:relative; top:60px; width:100%; min-width:1200px; height:430px;}.hot_sell_bodyli,.banner1_bodyli{ position:relative; top:-200px; width:300px; height:100%; border-bottom:0px; background-color:white;}.hot_sell_bodya,.banner1_bodyullia{