中學(xué)生電腦作品網(wǎng)頁設(shè)計(jì)與制作論文

　　摘要：本文主要介紹網(wǎng)絡(luò)設(shè)計(jì)人員對(duì)網(wǎng)站進(jìn)行排版和布局時(shí)，所用到的div+css技術(shù)及相關(guān)應(yīng)用案例，還有網(wǎng)頁的色彩搭配、版面布局等平面設(shè)計(jì)元素的相關(guān)理論和內(nèi)容。

　　關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)與制作論文

　　縱觀國內(nèi)外眾多大型商業(yè)站、個(gè)人網(wǎng)站、行業(yè)網(wǎng)站、企業(yè)網(wǎng)站等，其不僅設(shè)計(jì)風(fēng)格迥異，顏色布局多變，給人以完全不同的視覺沖擊和美觀享受，而且網(wǎng)站的開發(fā)與設(shè)計(jì)呈現(xiàn)出日新月異的發(fā)展趨勢(shì)出來。伴隨著互聯(lián)網(wǎng)的發(fā)展與崛起，信息技術(shù)的不斷成熟與革新，如今網(wǎng)頁設(shè)計(jì)已經(jīng)不再從前那般簡潔樸素，界面丑陋，反而愈加注重網(wǎng)頁的編排，平面元素的應(yīng)用，與用戶的交互等等。因而，本文試圖探討并介紹網(wǎng)頁設(shè)計(jì)中利用CSS+DIV的布局方法，網(wǎng)頁制作的色彩搭配，文字的編排搭配，以及在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的經(jīng)典版面布局風(fēng)格，來重點(diǎn)論述網(wǎng)頁設(shè)計(jì)人員是如何將平面視覺元素運(yùn)用到各大網(wǎng)站中的網(wǎng)頁設(shè)計(jì)里來的。

　　1Div+CSS的布局技術(shù)

　　1）Div技術(shù)從其本質(zhì)上而言，是將網(wǎng)頁HTML文件當(dāng)中混亂臃腫的文字、圖片等內(nèi)容通過Div元素將其分割成每一個(gè)單獨(dú)的區(qū)域，以此來形成一種邏輯清晰，結(jié)構(gòu)明確的模塊組合體。Div元素，憑借其擁有眾多具有獨(dú)特作用的屬性，經(jīng)常被開發(fā)人員用來賦予特殊的值，并將網(wǎng)頁內(nèi)容的開頭和結(jié)尾處放置DIV標(biāo)簽，以此來構(gòu)成完成的一個(gè)模塊。2）CSS是一種具有標(biāo)記行的特殊語言，通過CSS，設(shè)計(jì)人員可以把對(duì)網(wǎng)頁層級(jí)結(jié)構(gòu)的設(shè)計(jì)樣式和網(wǎng)頁內(nèi)容兩者之間完全分離開來，獨(dú)立存在，這樣一來，不僅有利于對(duì)網(wǎng)站中各網(wǎng)頁以統(tǒng)一設(shè)計(jì)風(fēng)格的樣式進(jìn)行布局，而且還有利于提升網(wǎng)頁的加載速度，縮短其響應(yīng)時(shí)間。從當(dāng)前CSS與Div在網(wǎng)頁設(shè)計(jì)中的運(yùn)用案例中來看，這種布局技術(shù)不僅可以使得網(wǎng)頁設(shè)計(jì)人員通過屬性值的設(shè)定精準(zhǔn)的將各類網(wǎng)頁內(nèi)容精準(zhǔn)的進(jìn)行編排和定位，而且還能夠使得文字和圖片之間以精美的排版樣式為網(wǎng)頁的整體瀏覽效果增色不少。另一方面，由于網(wǎng)頁內(nèi)容同其設(shè)計(jì)樣式兩者之間互相分離，因而當(dāng)網(wǎng)頁設(shè)計(jì)人員需要對(duì)其網(wǎng)頁樣式重新編排，或者在CSS樣式中的某幾項(xiàng)屬性值修改時(shí)，只需要在單獨(dú)存在的CSS文件中對(duì)布局元素加以重新設(shè)計(jì)即可達(dá)到目的，從而使得頁面的布局與后期迭代工作變得更加輕松簡單。此外，由于內(nèi)容樣式的分離，使得網(wǎng)頁本身不僅在代碼內(nèi)容上大為減少，而且極大程度上減少了網(wǎng)頁重新改變版面布局的時(shí)間，使得網(wǎng)站部署的帶寬成本節(jié)省不少。

　　2網(wǎng)頁設(shè)計(jì)的色彩搭配

　　網(wǎng)頁設(shè)計(jì)這項(xiàng)工作，從其技術(shù)角度來看，不僅要包含各種平面設(shè)計(jì)元素，而且還需要嚴(yán)格遵循其固有的設(shè)計(jì)原則。而且網(wǎng)頁設(shè)計(jì)本身所體現(xiàn)出來的藝術(shù)高度通常決定著網(wǎng)頁的瀏覽量和點(diǎn)擊量，同時(shí)也是網(wǎng)站開發(fā)人員同互聯(lián)網(wǎng)用戶之間進(jìn)行互動(dòng)和交流的重要媒介。一個(gè)網(wǎng)站在色彩上的搭配和選用不僅有利于傳遞網(wǎng)頁設(shè)計(jì)人員所要表達(dá)的主題及內(nèi)容，而且可以為用戶帶來極為強(qiáng)烈的視覺沖擊，增強(qiáng)其網(wǎng)站本身的觀賞性。

　　2.1劃分網(wǎng)頁層次

　　從人欣賞事物的角度而言，色彩能夠?yàn)槿祟惛兄�事物提供極大的視覺刺激，使其從情感上產(chǎn)生共鳴。因而，如果通過將帶有不同色調(diào)的色彩進(jìn)行均衡組合，會(huì)形成風(fēng)格非常鮮明，內(nèi)容極為出彩的頁面。由于網(wǎng)頁中通常有不同的層次和不同作用的文字內(nèi)容，根據(jù)文字內(nèi)容的重點(diǎn)、情感、風(fēng)格，選用比例均勻，搭配得當(dāng)?shù)膸追N色彩，會(huì)使得網(wǎng)頁內(nèi)容隨色彩的分布而顯得更加錯(cuò)落有致，主次分明，從而將網(wǎng)頁的層次感劃分得一目了然，以便于網(wǎng)民在網(wǎng)頁的閱讀瀏覽過程中抓住重點(diǎn)來獲取信息量。這樣一來，不但網(wǎng)頁的導(dǎo)向性得以凸現(xiàn)出來，而且其視覺表達(dá)效果也十分出彩。下圖是國外一家社交網(wǎng)站的網(wǎng)頁設(shè)計(jì)作品，從該圖中可以看出其在好友動(dòng)態(tài)上色彩選用上用白色和藍(lán)色交替組合的形式進(jìn)行搭配，而在個(gè)人資料及其社交功能上選用的黑色作為背景，黑色和藍(lán)白色形成強(qiáng)烈的視覺區(qū)域和對(duì)比，因而使得當(dāng)用戶在瀏覽該社交網(wǎng)站時(shí)將焦點(diǎn)更多的關(guān)注于內(nèi)容本身上面。