《創(chuàng)意設計類網(wǎng)站的設計與實現(xiàn)8500字（論文）》

VI創(chuàng)意設計類網(wǎng)站的設計與實現(xiàn)TOC\o"1-3"\h\u21792第1章緒論 17311.1創(chuàng)意設計前景 1285951.2創(chuàng)意設計網(wǎng)站開發(fā)意義 129060第2章網(wǎng)站相關技術簡介 1214302.1HTML5語言 2297262.2CSS樣式表 210572.3JavaScript腳本 3281142.4DIV+CSS 3233602.5jQuery 427747第3章創(chuàng)意設計網(wǎng)站的需求分析 5250633.1可行性分析 599883.1.1經(jīng)濟可行性分析 5177643.1.2市場可行性分析 5176743.2網(wǎng)站業(yè)務流程分析 625473.2.1用戶瀏覽體驗流程 6130813.2.2后臺管理流程 617843第4章網(wǎng)站設計理念 7170764.1網(wǎng)頁首部布局 8205954.1.1登錄注冊 8285094.1.2logo部分 8304254.1.3首頁 9157844.1.4設計作品 9296034.2網(wǎng)頁中部布局 930514.2.1設計輪播圖 9184554.2.2首頁推薦 9106144.2.3熱門推薦 953474.3網(wǎng)頁尾部布局 9287854.4網(wǎng)頁整體構(gòu)架 9243084.5網(wǎng)頁設計詳細介紹 10163464.5.1導航欄部分 10184454.5.2輪播圖部分 11241154.5.3作品展示部分 1116687第5章網(wǎng)站功能實現(xiàn) 11212185.1首頁導航欄 11115255.2輪播圖設計 12232875.3登陸 1226435.4注冊 1318322第6章網(wǎng)站測試 14295196.1測試的流程 14136626.2測試的方法 1441706.3測試的結(jié)果 152412結(jié)束語 1830923參考文獻 20創(chuàng)意設計類網(wǎng)站的設計與實現(xiàn)第1章緒論1.1創(chuàng)意設計前景隨著移動互聯(lián)網(wǎng)的興起以及飛速發(fā)展，人們的生活越來越豐富，豐富的生活帶給了人們不一樣的互聯(lián)網(wǎng)體驗，致使人們對于移動互聯(lián)網(wǎng)產(chǎn)品的用戶體驗也不斷的提升，對于移動互聯(lián)網(wǎng)的認知度也逐步增加，（主要表現(xiàn)為對產(chǎn)品交互和外觀審美的要求），因此設計行業(yè)越發(fā)的重要，更是成為了企業(yè)產(chǎn)品的核心內(nèi)容。當今社會，不論是一根筆，還是一架飛機、一棟大樓、一個城市的規(guī)劃布局等等，都離不開設計師們在背后默默無聞的付出。所以設計師的社會需求相對來說還是比較多的，他們中有的人是在自己的事業(yè)中風生水起，在公司和領導團隊中擔任著重要的職務，還有的自己創(chuàng)業(yè)發(fā)展，成立了自己的工作室等諸如此類的優(yōu)秀設計師數(shù)不勝數(shù)。但是還有一小部分或許是初出茅廬，又或者是未遇到伯樂的千里馬，總之就是還未在設計行業(yè)大放光彩的，對于他們，一個好的平臺就很難能可貴了。一個好的平臺可以讓他們在設計行業(yè)大展拳腳，也可以讓他們不斷進步。1.2創(chuàng)意設計網(wǎng)站開發(fā)意義網(wǎng)站是企業(yè)向用戶提供信息的一種渠道。它也是企業(yè)向電商方向發(fā)展的根本。在IT行業(yè)迅猛發(fā)展的當今社會，大多有需求的人利用網(wǎng)站來獲取所需知識。素材資源在創(chuàng)業(yè)設計網(wǎng)站與開發(fā)行業(yè)中占著無比重要的地位。依賴素材資源為設計開發(fā)參考與靈感來源的設計者更是可貴。在本網(wǎng)站，人們可以去首頁瀏覽其他設計師的優(yōu)秀作品并留言交流，而且還可以在論壇社區(qū)與設計者以及更多對設計作品感興趣的人分享心得。第2章網(wǎng)站相關技術簡介隨著計算機在當今社會的應用和發(fā)展，網(wǎng)站已然成為了企業(yè)向大眾展示自家企業(yè)形象的重要方式。當然企業(yè)想要介紹自己的產(chǎn)品以及服務也都是通過網(wǎng)站來實現(xiàn)的。網(wǎng)頁設計是作為當今社會計算機與藝術的結(jié)合體,是電商社會的產(chǎn)物,雖然網(wǎng)頁設計也是平面設計的一種,但是對于網(wǎng)頁設計還不同于平面設計，它需要設計師們擁有獨特的設計需求、設計準則以及設計師們對網(wǎng)頁的獨特的見解,所以在對網(wǎng)頁設計的前提是必須有一個對Web頁面的理解。2.1HTML5語言HTML語言概括了很多的標簽，利用這些標簽統(tǒng)一網(wǎng)絡上的文檔格式。它利用超鏈接的方法使文字、圖片、表格等與其他信息媒體相關聯(lián)。隨著HTML語言的發(fā)展，HTML5開始慢慢發(fā)展成為一種搭建網(wǎng)絡的主要語言，HTML5涉及到的范圍越來越廣，HTML5的使用率越來過高，因此HTML5的開發(fā)人才越來越被企業(yè)、市場所需要和重視。HTML5的主要優(yōu)勢：1.兼容性：基本上所有的現(xiàn)代瀏覽器都能支持HTML5。它也為外部應用程序直接連接到瀏覽器內(nèi)部的數(shù)據(jù)打開了市場，由于它良好的兼容性，使得手機上的各種軟件，應用程序，都很容易使用。2.HTML5能支持大多數(shù)網(wǎng)民所使用的手機系統(tǒng)。3.強化Web的表現(xiàn)性，表現(xiàn)在附加本地數(shù)據(jù)庫，可用于脫機應用程序開發(fā) 4.HTML5開發(fā)能夠為用戶提供更加迅速、便捷的服務，為大部分用戶帶來了方便。能夠?qū)崿F(xiàn)代碼的高度利用。5.用戶體驗感極佳，尤其是手機上的APP，會大量減少代碼量。讓用戶有更好的視覺體驗。6.隨著HTML5開發(fā)的飛速發(fā)展，市場對HTML5開發(fā)人員越來越重視，所需要的HTML5的開發(fā)人才也越來越多，對于他們的需求也越來越高。2.2CSS樣式表CSS是級聯(lián)樣式表。它可以對頁面有更好的布局，它的一些對頁面的修飾是HTML所沒有的，他可以比HTML更精準的控制頁面布局以及美化頁面。同時編寫一個CSS可以被多個頁面所使用，從而為網(wǎng)頁節(jié)省大量的時間與空間。避免了浪費資源，同時提高了網(wǎng)頁打開的效率。CSS在某種程度上也可以算是HTML的拓展，但是它不能將HTML替代，換句話說就是，CSS與HTML不分家，它只是一個修飾頁面的“工具”，它還可以設計和維護網(wǎng)站。比如一夜之間讓所有網(wǎng)站全變成了黑白色，就是依靠CSS來實現(xiàn)的，改變其中的某一個元素的屬性就能改變整個頁面與之相關的所有元素以及頁面外觀。CSS3新版本的主要是新增加了一些選擇器和屬性，增加的這些內(nèi)容可以更方便的讓網(wǎng)頁實現(xiàn)想要的效果，美化網(wǎng)頁的外觀。與舊版本相比節(jié)省了大量書寫代碼時間。CSS幾乎支持任何字體字號以及圖標字體。還可以通過CSS特性增加動畫效果，使網(wǎng)頁更加的絢麗。語言特點：CSS是前端開發(fā)人員定義的,優(yōu)先級較高。CSS的主要優(yōu)勢：1.減少了頁面代碼，代碼結(jié)構(gòu)簡潔，為網(wǎng)頁節(jié)省了大量的時間，提高了瀏覽器的速度。2.輕松地控制頁面的布局和改變頁面的各種審美風格。只需要重新改編CSS代碼，便可以輕松排版網(wǎng)頁。3.頁面布局和排版效果非常好，控制頁面的字體以及外觀也非常的方便，呈現(xiàn)給用戶的視覺感也很棒。4.因為CSS類似于HTML5的拓展，所以CSS代碼也是非常的易于編寫。5.變現(xiàn)和結(jié)構(gòu)分離，你可以先編寫一個控制網(wǎng)頁設計的CSS代碼，將控制網(wǎng)頁設計部分的CSS代碼放置在一個獨立的文件下，可以被其他網(wǎng)頁引用，這也就是我們常說的引用外部文件，一個CSS外部文件可以被多個網(wǎng)頁使用。2.3JavaScript腳本JavaScript腳本是一種高級編程語言。它是關于在HTML代碼中添加一些頁面的用戶交互，也就是網(wǎng)頁與用戶之間的互動，使用戶在瀏覽網(wǎng)頁的時候具有最佳的瀏覽效果。換句話說是給這個網(wǎng)頁賦予了生命。JavaScript是一種相對來說比較弱的語言，它不像Java語言那么嚴格，也正是因為它對語言要求沒有那么多，所以更容易被廣大程序員所接受。JavaScript用于對網(wǎng)頁動態(tài)功能的修飾。JavaScript的優(yōu)點：1減少網(wǎng)絡流量。在還未發(fā)現(xiàn)JavaScript語言之前，傳統(tǒng)的數(shù)據(jù)提交和驗證都是由客戶機瀏覽器通過網(wǎng)絡向服務器開發(fā)執(zhí)行的。一旦數(shù)據(jù)量過大，就會造成浪費。2.易于操作的HTML對象。JavaScript使得操作各種頁面對象變得很容易，用戶使用它來控制每個元素的狀態(tài)、運行等等都很方便。JavaScript允許您選擇瀏覽器，以使您的web頁面更加友好和提高視覺吸引力。2.4DIV+CSSDIV+CSS是Web標準中常用語言之一。Div+CSS是現(xiàn)在頁面布局的常用方法之一。這種頁面布局方式不同于HTML語言中的傳統(tǒng)的表格布局方式，這種布局方式是真正的做到了w3c中的表現(xiàn)行為與結(jié)構(gòu)行為相分離。table表格的布局方式過于的死板，而且表格的標簽比較多在表格中的標簽需要互相嵌套使用，整段代碼看起來非常的亂且復雜，代碼的復雜度高，就會降低網(wǎng)頁的瀏覽速度。還會降低網(wǎng)頁的搜索引擎。因此現(xiàn)在越來越多的網(wǎng)頁設計中開始摒棄之了之前傳統(tǒng)的table表格的布局方式，開始使用全新的DUV+CSS布局方式。DIV+CSS布局方式的優(yōu)點：1.符合w3c的標準，代碼結(jié)構(gòu)簡單，不會像table表格布局方式一樣復雜，一個CSS代碼可以被多個網(wǎng)頁重復使用，而且想要改變頁面的某一元素只需要改變CSS中的某個屬性就可以實現(xiàn)。但如果是使用table表格布局方式，想要改變一個元素就要改動整個表格，牽一發(fā)而動全身。2.瀏覽速度提高，因為table表格布局方式需要使用很多標簽，標簽互相嵌套使用，代碼結(jié)構(gòu)復雜，反應時間長，而DIV+CSS布局方式不需要像table一樣繁瑣，代碼結(jié)構(gòu)清晰簡潔，反應時間短，打開網(wǎng)頁的速度得到了提高。3.DIV+CSS代碼結(jié)構(gòu)簡單，因為代碼量少所以很容易被搜索引擎抓取到重點，便于搜索引擎的搜索。4.網(wǎng)頁的樣式改變非常方便，因為DIV+CSS布局方式是內(nèi)容在一個DIV容器下，結(jié)構(gòu)在CSS外部文件下，內(nèi)容部分與結(jié)構(gòu)部分是分開的，因此對于也頁面的樣式的調(diào)整比較容易，只需要改變CSS外部文件就可以實現(xiàn)。現(xiàn)在國內(nèi)許多網(wǎng)站網(wǎng)站都是使用DIV+CSS這種框架模式，由此可以看出來DIV+CSS布局模式在未來的網(wǎng)頁布局能夠成為主流框架模式。2.5jQueryjQuery是對Javascript原生代碼的一種封裝，jQuery相對于JavaScript來說代碼更簡單，更方便書寫。把一些常用固定代碼簡化整合成的一種固定模式。JQ的兼容性非常好，這使得用戶更容易使用HTML、事件、動畫等還可以為網(wǎng)站提供Ajax交互。jQuery也可以說是一個JavaScript代碼庫。它簡化了原生JavaScript的編程代碼，使代碼結(jié)構(gòu)更簡潔明了，方便易懂。jQuery實現(xiàn)大部分的CSS選擇器,可以方便的獲取DOM對象。jQuery的特點：支持鏈式編程結(jié)構(gòu)：對象、添加樣式、修改文字、過濾添加子元素支持對象自動化檢測：對于空對象。jQuery有自己的處理體系，不會直接拋出錯誤，對于單個對象和對象集合通過同一個方法進行操作。jQuery的優(yōu)點是：jQuery非常的輕巧。不會占用戶過多的空間。輕量級，對項目的影響較輕，可以反復的更換。jQuery基本上實現(xiàn)了絕大多數(shù)的CSS選擇器。jQuery也提供了一些更快、更簡潔的方法來代替CSS選擇器，使編程結(jié)構(gòu)更加靈活、簡單。jQuery的實現(xiàn)，完善的處理機制將會把對象檢測，瀏覽器檢測等功能集成jQuery中。第3章創(chuàng)意設計網(wǎng)站的需求分析本節(jié)主要探討創(chuàng)意設計網(wǎng)站的可行性分析、系統(tǒng)業(yè)務流程分析。企業(yè)向用戶和網(wǎng)民傳遞各種企業(yè)相關信息主要是依靠網(wǎng)站，網(wǎng)站是企業(yè)發(fā)展電商行業(yè)的主要途徑和信息平臺。提到網(wǎng)站，就能想到擁有不同的權限，并且每個權限之間功能差異很大，所以可以籠統(tǒng)的將網(wǎng)站分為兩大模塊：前臺模塊和后臺模塊。兩個模塊之間的權限分工明確，相輔相成。前臺模塊主要起到瀏覽的作用，后臺模塊就是管理各種用戶信息、作品信息、新聞信息等等。因為本網(wǎng)站是面向用戶開發(fā)的。所以，用戶的需求和體驗為首要。怎么讓網(wǎng)站更加方便使用，如何讓用戶擁有最佳的體驗是本章節(jié)著重討論的方面。同時，制定清晰有效的業(yè)務流程、使系統(tǒng)突出差異化也是本節(jié)討論的內(nèi)容之一。3.1可行性分析一個網(wǎng)站的開發(fā)是會受到很多資源的限制的，可能是資源、素材，有可能是是代碼編寫時間，還可能是人為因素等一系列的因素都會影響網(wǎng)站的開發(fā)的。因此，在網(wǎng)站開發(fā)之前對此進行分析還是很有必要的。本節(jié)主要圍繞經(jīng)濟可行性和社會可行性兩個方面進行討論分析。3.1.1經(jīng)濟可行性分析本網(wǎng)站使用了Bootstarp框架?？蚣艿暮侠泶钆涫褂每梢詷O大程度節(jié)省開發(fā)人員的精力，所需人力成本較少?？梢源蟠鬁p少開發(fā)的成本。同時，本網(wǎng)站對于電腦的配置要求也不高，家用的普通配置的電腦也可以很輕松流暢的打開并瀏覽本網(wǎng)站。開發(fā)網(wǎng)站所需要的成本大大低于系統(tǒng)在實際中應用所需要的成本，所以在經(jīng)濟上是可行的。3.1.2市場可行性分析創(chuàng)意設計行業(yè)的收入本身就很高，這就吸引了大多數(shù)人的眼球。而想要進去創(chuàng)意設計市場的人們就會對技術以及創(chuàng)意設計的素材有很大的依賴性，為了實時了解創(chuàng)意設計相關的技術性知識以及收集創(chuàng)意的素材，人們需要一個能夠及時了解行業(yè)動態(tài)以及能夠不斷學習提高自我，提升技巧的平臺。經(jīng)濟全球化的趨勢下，有很多新興產(chǎn)業(yè)的崛起。創(chuàng)意設計為新興產(chǎn)業(yè)的一種，不管是大公司還是小公司都會對創(chuàng)意設計與開發(fā)有著很大的需求。諸如廣告宣傳、品牌設計等等，正因為這方面的人才缺失，才給了人們商機以及生存發(fā)展的機會。有意愿的大學生可以通過網(wǎng)絡平臺等渠道去培養(yǎng)自己這方面的才能，提高自己的技巧，使他們能夠在創(chuàng)意設計行業(yè)有更好的發(fā)展。素材資源在創(chuàng)意設計行業(yè)中有著不可或缺的重要地位，有很多設計師都是依賴素材資源去參考設計的。用素材資源來激發(fā)設計靈感的更是存在，因此創(chuàng)意類網(wǎng)站對于他們來說是非常重要的存在。通過實時提供行業(yè)動態(tài)、素材資源等一些展現(xiàn)形式就可以讓更多設計師們以及設計愛好者們來關注這個平臺。3.2網(wǎng)站業(yè)務流程分析本節(jié)主要對網(wǎng)站基本的使用流程進行分析，主要分析的是用戶瀏覽使用網(wǎng)站以及后臺管理員對一些用戶、新聞等信息的基本數(shù)據(jù)庫操作流程、用戶的登錄注冊的流程等3.2.1用戶瀏覽體驗流程如果用戶只是想要瀏覽一下其他設計師的作品是不需要登錄注冊的。如果想要發(fā)表自己的看法、與其他用戶、設計師交流意見則需要用戶登錄該網(wǎng)站。體驗感極佳。圖3-1網(wǎng)站前臺模塊流程3.2.2后臺管理流程需要用戶注冊并登錄網(wǎng)站并可以看到自己的個人資料、發(fā)布作品、我的發(fā)布、我的評論、回復評論等還可以上傳設計作品，這就是后臺模塊的登錄注冊功能。還有一個管理員功能，可以看到后臺的注冊用戶數(shù)據(jù)庫、作品管理、新聞管理、社區(qū)管理、以及管理員密碼的修改。圖3-2創(chuàng)意設計網(wǎng)站后臺管理流程圖第4章網(wǎng)站設計理念由于人們一直以來先上后下，先左后右的視覺習慣，因此一個好的網(wǎng)頁的布局就顯得尤為重要。頁面的首部占一個頁面的多少，中間要就多少，給頁面的尾部剩多少等等，這都是用戶所關心的問題，而研發(fā)人員要著重考慮的問題是用戶的體驗。一個網(wǎng)頁過長就會有加載時間，網(wǎng)頁太大，下載的速度就會很慢，這樣一來用戶的體驗感就會極差。但是太小的網(wǎng)頁又展現(xiàn)不全。用戶看的不徹底。因此本人便設計了如下的整體構(gòu)架圖。圖4-1首頁布局設計圖4.1網(wǎng)頁首部布局4.1.1登錄注冊登錄，注冊是以自適應來顯示高度跟寬度的。其一是因為它本身寬度和高度比較小，其二是它們本身不是用戶一進入網(wǎng)站所需求的內(nèi)容，但是考慮到它們是網(wǎng)站的門戶及對待用戶的態(tài)度和為吸納用戶的使命。設置在網(wǎng)頁的最頂部。其中登錄，注冊主要體現(xiàn)在用戶投稿作品以及與其他設計師探討心得時候必經(jīng)的過程。4.1.2logo部分Logo是網(wǎng)頁中相對獨立的一部分，但也需要呼應主題和名稱，讓用戶能夠直接了當?shù)牧私忭撁嬷饕胝宫F(xiàn)的內(nèi)容。這里考慮到logo主要用來體現(xiàn)商場的商標，但是不能占據(jù)太多的空間，因此在網(wǎng)頁上設置logo的位置，也不能占據(jù)太多的寬度和高度的思路。4.1.3首頁首頁就是用戶一點進網(wǎng)站所看到的頁面，也是最直觀的能看到的網(wǎng)頁。基本上一個網(wǎng)站的美觀與否看它的首頁就可以了，首頁就是一個網(wǎng)站的“門面擔當”。由此可以看出首頁的重要性。4.1.4設計作品這個便是用戶的體驗了，用戶可通過這個平臺將自己設計作品上傳到設計作品這個網(wǎng)頁中。還有其余的新聞等網(wǎng)頁交互，都會給用戶帶來十足的體驗。4.2網(wǎng)頁中部布局4.2.1設計輪播圖這個板塊的設計其目的就是為了吸引更多的用戶。好看的設計圖能吸引用戶，也可以讓網(wǎng)站給人眼前一亮的感覺。更能有繼續(xù)瀏覽的欲望。還有一方面就是能讓用戶更直觀的了解到網(wǎng)站的應用性，就是網(wǎng)站主要是關于什么的。有了這個版塊就非常的直觀。4.2.2首頁推薦首頁推薦主要就是作品的展示。為用戶瀏覽優(yōu)秀作品提供了便利，使用戶能更好、更方便的瀏覽其他設計師的作品。體驗感極佳。4.2.3熱門推薦熱門推薦這個板塊就是將優(yōu)秀作品以輪播圖的方式展現(xiàn)出來。設置優(yōu)秀作品圖片，在一個div框中顯示，很好的節(jié)約了空間，但是div大小有限，把全部圖片展示圖片顯得很小，不利于用戶觀看，因此在其下方放了相應圖片文字鏈接，當鼠標懸停在這段文字鏈接時，對應文字就會顯示相應圖片。這樣既方便用戶的瀏覽又節(jié)約了空間。4.3網(wǎng)頁尾部布局當用戶瀏覽完作品后。就可以關注網(wǎng)頁信息了。這個就是每個網(wǎng)站都必備的。這個版塊就不重點說明了。4.4網(wǎng)頁整體構(gòu)架網(wǎng)站整體分為六個模塊，首頁、設計作品、新聞、論壇社區(qū)、投稿以及聯(lián)系我們。首頁就是我們一打開網(wǎng)站最先映入眼簾的那個網(wǎng)頁，也分為作品區(qū)和熱門作品區(qū)就是一些設計師們所投稿的作品。設計作品這個版塊就是不注冊登陸網(wǎng)站也是可以看到他人作品的，當然如果用戶登陸網(wǎng)站了會有留言功能，就是在其他設計師作品下的留言。新聞版塊是可以閱讀每日新聞。論壇社區(qū)是必須要求用戶注冊登陸的，在這里可以與其他用戶共同交流，一起探討心得。投稿就是需要用戶注冊登陸然后在投稿這個版塊上傳自己的作品。最后聯(lián)系我們就是基本每個網(wǎng)站必備的，也是網(wǎng)站的一些信息。圖4-2網(wǎng)頁整體構(gòu)建圖4.5網(wǎng)頁設計詳細介紹圖4-3主頁效果圖4.5.1導航欄部分本網(wǎng)站的導航欄改變了傳統(tǒng)的table表格樣式。運用的是列表ul、li浮動所編寫的。為網(wǎng)頁節(jié)省了大量的代碼書寫以及加載時間。導航欄的背景以黑色為主。黑色給人一種精簡的感覺，不會讓人過分注意到的顏色。本身網(wǎng)站是以創(chuàng)意設計的作品為主。黑色沉穩(wěn)內(nèi)斂的導航欄不會喧賓奪主，吸引人的眼球。讓人們把目光放到作品上面。導航欄精簡全面的展示了網(wǎng)站的各種應用。4.5.2輪播圖部分取到了以往的flash動畫效果。用書寫代碼來達到相應的功能，節(jié)約了網(wǎng)頁加載時間及兼容性問題和網(wǎng)頁維護工作時間。4.5.3作品展示部分讓用戶來瀏覽作品。既要做到突出所有作品可以讓用戶直接就能看到，還要保證每個作品的完整性，做到每一個作品都可以完美的展現(xiàn)在用戶的面前，因此布局的重要性就得以體現(xiàn)了。本網(wǎng)頁的布局是每行四個圖片，每個圖片之間都會有一定的像素作為空隙，空隙以白色作顯示。當用戶鼠標放入圖片上時，該作品會有高亮顯示，方便用戶。提高了用戶的體驗感。同時也為了防止瀏覽器兼容性問題或圖片不存在，出現(xiàn)圖片不能顯示以至于用戶提出疑問，特別設置緩沖圖，這也是網(wǎng)頁圖片出現(xiàn)bug的解決方法之一。4.5.4注冊頁面的功能與設計圖4-4注冊頁面功能圖注冊頁面的功能包括用戶名、手機號、郵箱、設置密碼、確定密碼。用戶注冊時需要填寫以上內(nèi)容，且不能隨便填寫，必須符合格式，這就要求程序員必須設置驗證，同時也保證了用戶個人信息的安全性。注冊頁面主要是由表單form來完成的。且這些個人信息是一定會保護好不會被泄露的。第5章網(wǎng)站功能實現(xiàn)5.1首頁導航欄首部導航欄是用樣式為collapsenavbar-collapse的Div容器下的ul、li來實現(xiàn)的，主要包括首頁、設計作品、新聞、論壇社區(qū)、投稿和聯(lián)系我們還有樣式為col-sm-8的Div容器下的登錄注冊網(wǎng)頁。其中登錄注冊是一些表單驗證。利用Js來完成的。對于首頁、設計作品、新聞、論壇社區(qū)、投稿和聯(lián)系我們是利用HTML和CSS來完成的。圖5-1導航欄5.2輪播圖設計輪播圖是為了讓用戶更好的看到優(yōu)秀的作品，既不占空間也不浪費資源。還能為用戶提供最佳的視覺體驗。其主要是用JS來實現(xiàn)的。輪播的效果如圖所示。圖5-2輪播圖5.3登陸用戶注冊頁面，注冊頁面主要由用戶名，手機號，郵箱，密碼，確認密碼組成。其主要體現(xiàn)的就是表單的驗證，同時也給用戶足夠明確的提示能夠讓用戶對不正確的輸入進行更改，方便用戶以后登陸創(chuàng)意設計網(wǎng)站。表單驗證的實現(xiàn)主要由JQuery來實現(xiàn)。圖5-3登錄效果圖5.4注冊同樣注冊也是用jQuery來實現(xiàn)的。新用戶必須要注冊才可以登錄倡議涉及網(wǎng)站。圖5-4用戶注冊圖第6章網(wǎng)站測試6.1測試的流程 測試需要站在用戶的角度上來測試這個網(wǎng)站。軟件測試的流程應該是先從了解用戶的需求出發(fā)、再在用戶需求的基礎上設計測試用例、最后執(zhí)行實施測試計劃。測試包括很多，其中黑盒測試和網(wǎng)絡測試都可以根據(jù)特定的性能指標進行。不過本網(wǎng)站需要的更多的還是軟件測試。6.2測試的方法通過系統(tǒng)測試來檢驗網(wǎng)站是否有潛在的錯誤或缺陷。分別通過以下幾方面。登陸、注冊兩個網(wǎng)頁的輸入框的字段長度、數(shù)據(jù)格式、特殊字符、非法字符、空格處理以及是否必填字段。比如手機號是特定的11位字符的長度不能多也不能少。還有郵箱的特定格式必須要有@和.這兩個特殊字符等諸如此類。提交檢查：注冊成功后是否能成功提交，能否反復提交以及能否保存用戶數(shù)據(jù)等。刪除檢查：以管理員身份登錄本網(wǎng)站，測試能否實現(xiàn)增刪改查新聞、作品、用戶信息等。上傳功能：注冊成功后檢查上傳作品功能是否完善，如上傳不同類型的文件是否能夠?qū)崿F(xiàn)。反應時長：HTTP的請求時長。概率：以上每個測試都要多測幾遍，有可能會出現(xiàn)概率事件，要記錄好是測試幾遍才會出現(xiàn)