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

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