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

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