何 莉

（武昌職業(yè)學(xué)院，湖北 武漢 430202）

淺析網(wǎng)頁(yè)設(shè)計(jì)及其應(yīng)用

何 莉

（武昌職業(yè)學(xué)院，湖北 武漢 430202）

網(wǎng)頁(yè)設(shè)計(jì)將計(jì)算機(jī)技術(shù)的應(yīng)用、視覺藝術(shù)的表現(xiàn)緊密結(jié)合在一起，相得益彰，從而達(dá)到技術(shù)與藝術(shù)相互融合的新高度。文章以計(jì)算機(jī)技術(shù)作為基礎(chǔ)，通過確定主題、版面布局、網(wǎng)頁(yè)制作來完成合理的頁(yè)面結(jié)構(gòu)，然后通過創(chuàng)意設(shè)計(jì)、色彩調(diào)整來實(shí)現(xiàn)精美的網(wǎng)頁(yè)效果，探討了網(wǎng)頁(yè)設(shè)計(jì)特色中的技術(shù)性與藝術(shù)性。

網(wǎng)頁(yè)設(shè)計(jì)；技術(shù)性；藝術(shù)性

網(wǎng)頁(yè)設(shè)計(jì)作為一種視覺語(yǔ)言，是集創(chuàng)意、技術(shù)、美感于一體的創(chuàng)新活動(dòng)。它是企業(yè)向用戶提供產(chǎn)品和服務(wù)信息的便捷形式，運(yùn)用相關(guān)的軟件技術(shù)、美學(xué)知識(shí)等，依照設(shè)計(jì)要求對(duì)網(wǎng)頁(yè)的構(gòu)成元素進(jìn)行藝術(shù)設(shè)計(jì)。要使網(wǎng)站集計(jì)算機(jī)技術(shù)與藝術(shù)創(chuàng)作于一體，設(shè)計(jì)者既要重視網(wǎng)頁(yè)設(shè)計(jì)各種關(guān)鍵技術(shù)的合理性，呈現(xiàn)精美的網(wǎng)頁(yè)效果，又要把握網(wǎng)頁(yè)整體頁(yè)面藝術(shù)設(shè)計(jì)的美觀協(xié)調(diào)性。因此，研究技術(shù)與藝術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的相互結(jié)合有著十分重要的作用。

1 網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)性

網(wǎng)頁(yè)設(shè)計(jì)既是一門科學(xué)，也是一門藝術(shù)。網(wǎng)頁(yè)設(shè)計(jì)一方面建立在頁(yè)面設(shè)計(jì)和編程技巧的基礎(chǔ)之上，另一方面則依賴于對(duì)藝術(shù)美學(xué)的敏銳程度。網(wǎng)頁(yè)設(shè)計(jì)師一定要熟練掌握核心技術(shù)要點(diǎn)才能在業(yè)內(nèi)做到出類拔萃。

1.1 網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)要點(diǎn)

（1）確定網(wǎng)頁(yè)主題。制作網(wǎng)站前，首先需要分析網(wǎng)站的功能及建站的目的，確定網(wǎng)站的用戶群和網(wǎng)站內(nèi)容，即確定網(wǎng)站的主題。在確定主題后，可繪制出網(wǎng)站架構(gòu)圖，并搜集建站所需的相關(guān)資料和素材。另外，可要求客戶提供與公司相關(guān)的文字及圖像等資料，如公司介紹、產(chǎn)品圖像等。

（2）設(shè)計(jì)整體頁(yè)面。網(wǎng)頁(yè)設(shè)計(jì)師與客戶溝通，了解客戶的基本要求后，制定網(wǎng)站建設(shè)方案并使用Photoshop等圖像處理軟件進(jìn)行頁(yè)面效果圖設(shè)計(jì)。頁(yè)面效果圖主要包括網(wǎng)站首頁(yè)效果圖和各頻道首頁(yè)效果圖。將效果圖設(shè)計(jì)好后交給客戶查看，客戶查看后提出修改意見，設(shè)計(jì)人員根據(jù)客戶意見進(jìn)行修改，最終確定網(wǎng)頁(yè)頁(yè)面效果圖。在效果圖得到客戶認(rèn)可后，設(shè)計(jì)師可使用Photoshop等圖像處理軟件中的切片工具將效果圖切割并保存為JPG，GIF或PNG格式的小圖像，將它們作為制作網(wǎng)頁(yè)的圖像素材。

（3）網(wǎng)頁(yè)制作。網(wǎng)頁(yè)的制作可以分為結(jié)構(gòu)層制作和樣式、行為層制作兩部分。結(jié)構(gòu)層制作就是使用HTML代碼搭建網(wǎng)頁(yè)的主體結(jié)構(gòu)，如文字、圖像、超鏈接等，可以直接編寫代碼來實(shí)現(xiàn)，也可以在Dreamweaver的可視化界面中操作。在網(wǎng)頁(yè)的結(jié)構(gòu)層制作完成后，樣式層就可以使用Css樣式（層疊樣式表）來制作，行為層則基于JavaScript（動(dòng)態(tài)腳本語(yǔ)言），最終完成網(wǎng)頁(yè)整體外觀和頁(yè)面布局。

1.2 網(wǎng)頁(yè)設(shè)計(jì)的注意事項(xiàng)

當(dāng)今互聯(lián)網(wǎng)世界的確引人注目，置身于其中，種類繁多的網(wǎng)站讓人眼花繚亂。網(wǎng)站設(shè)計(jì)既要考慮網(wǎng)站功能的實(shí)現(xiàn)，滿足大多數(shù)用戶的需求，又要保證一定的藝術(shù)欣賞性，因此，在網(wǎng)頁(yè)設(shè)計(jì)的過程中，不得不注意以下事項(xiàng)。

（1）強(qiáng)調(diào)導(dǎo)航欄的設(shè)計(jì)。 首先，在設(shè)計(jì)網(wǎng)站的導(dǎo)航結(jié)構(gòu)時(shí)，提前規(guī)劃是非常重要的。合理的位置、獨(dú)特的風(fēng)格、適當(dāng)?shù)募夹g(shù)等，這些都是制作導(dǎo)航欄時(shí)必然要考慮的。首先，要具有良好的導(dǎo)航功能，盡可能減少操作，確保多級(jí)頁(yè)面之間快速鏈接，盡量讓用戶在短時(shí)間內(nèi)瀏覽到需求頁(yè)面；其次，最好放在一個(gè)醒目的地方，布局、色彩與整體頁(yè)面風(fēng)格一致；最后，對(duì)網(wǎng)站建立層次結(jié)構(gòu)，分層管理，便于內(nèi)容更新與及時(shí)維護(hù)。

（2）優(yōu)化網(wǎng)頁(yè)中的圖片。在互聯(lián)網(wǎng)中瀏覽網(wǎng)頁(yè)時(shí)，一般來說文字先于圖片。圖片文件的大小會(huì)延長(zhǎng)網(wǎng)頁(yè)的加載時(shí)間，因此，在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，盡量選擇適當(dāng)?shù)膱D片文件格式來保存。假如圖片是單色，最好保存成PNG或者GIF格式；如果像生活隨拍照片那樣的連續(xù)性色調(diào)，就可以保存成 JPG格式?，F(xiàn)在有許多工具可以優(yōu)化圖片，壓縮文件大小，把圖片數(shù)量降到最低，并且靈活使用圖片。這樣一來，將可以大大減少頁(yè)面的讀取時(shí)間，提高網(wǎng)頁(yè)的性能。

（3）注重搜索引擎和兼容性。在設(shè)計(jì)網(wǎng)站時(shí)，千萬(wàn)不要忽略基本的SEO模塊。例如，網(wǎng)頁(yè)內(nèi)容結(jié)構(gòu)、用文字表示標(biāo)題。在熟悉HTML/Css 后，會(huì)發(fā)現(xiàn)DIV比表格布局要好用一些，既可以準(zhǔn)確地呈現(xiàn)網(wǎng)頁(yè)效果，對(duì)搜索引擎排名也有幫助。運(yùn)用Css樣式來更換背景、文字和圖片，非常實(shí)用。網(wǎng)頁(yè)測(cè)試主要是在瀏覽器端實(shí)現(xiàn)，僅用一個(gè)瀏覽器測(cè)試網(wǎng)頁(yè)遠(yuǎn)遠(yuǎn)不夠，需要在多種瀏覽器端測(cè)試兼容性。

2 網(wǎng)頁(yè)設(shè)計(jì)的藝術(shù)性

2.1 網(wǎng)頁(yè)設(shè)計(jì)形式與內(nèi)容相統(tǒng)一

網(wǎng)頁(yè)設(shè)計(jì)師在體現(xiàn)精美畫面效果時(shí)，不得不將設(shè)計(jì)形式與內(nèi)容統(tǒng)一起來，保持協(xié)調(diào)性。外觀設(shè)置中講究一些技巧，如布局的對(duì)稱與組織排列、文字的排版與段落間距、圖片的擺放與錯(cuò)落有致、色彩的對(duì)比與調(diào)和均衡，都可以產(chǎn)生和諧的畫面感。還可以從一些細(xì)節(jié)中去體現(xiàn)，如將LOGO盡可能地放在每個(gè)頁(yè)面上最顯眼的位置、突出標(biāo)準(zhǔn)色彩、精辟的宣傳標(biāo)語(yǔ)、標(biāo)題字都采用陰影效果等。

2.2 網(wǎng)站整體的版式設(shè)計(jì)

在互聯(lián)網(wǎng)時(shí)代，一個(gè)網(wǎng)站成功與否，很大程度上取決于用戶體驗(yàn)。網(wǎng)站設(shè)計(jì)最重要的訣竅，就是設(shè)計(jì)的網(wǎng)頁(yè)要易讀。網(wǎng)頁(yè)設(shè)計(jì)講究頁(yè)面布局和版式設(shè)計(jì)，通過文字圖形的空間組合，表達(dá)出和諧與美。頁(yè)面布局時(shí)，主體色調(diào)和諧一致，各級(jí)頁(yè)面要注意主頁(yè)與分頁(yè)面的層次關(guān)系，將相互之間的聯(lián)系巧妙地體現(xiàn)出來，易于建立超級(jí)鏈接，最終提升用戶體驗(yàn)。

2.3 色彩在網(wǎng)頁(yè)設(shè)計(jì)中的作用

色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁(yè)設(shè)計(jì)中，根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩有機(jī)組合起來構(gòu)成精美的畫面。根據(jù)色彩對(duì)人們心理的影響，合理地加以運(yùn)用，使網(wǎng)頁(yè)設(shè)計(jì)作品更賞心悅目，給予用戶美的感受。

（1）網(wǎng)頁(yè)色彩的搭配。當(dāng)網(wǎng)頁(yè)中運(yùn)用一種色彩時(shí)，先定好主題色，然后調(diào)整不同的透明度、飽和度，作為輔色，讓頁(yè)面的整體色彩統(tǒng)一，具有層次感；當(dāng)需要運(yùn)用多種顏色時(shí)，就可以運(yùn)用一個(gè)色系，表達(dá)一種特定的感覺，選擇飽和度不同的深淺顏色，如淺色系中的淡紅、淡黃、淡藍(lán)。

（2）網(wǎng)頁(yè)配色的誤區(qū)。有些初學(xué)者認(rèn)為選擇幾種不同的色彩，就會(huì)顯得網(wǎng)頁(yè)比較活潑，有活力，其實(shí)不然。首先，花里胡哨的色彩組合，會(huì)削弱視覺效果，所以要盡量控制在5種顏色以內(nèi)。其次，一些網(wǎng)站背景的顏色沖淡了文字的視覺效果，如橙色背景紅色文字，會(huì)讓人感覺緊張，深藍(lán)背景黑色文字，難以看清文字。這就需要花點(diǎn)心思來規(guī)劃文字與背景顏色的搭配方案，增強(qiáng)背景與文字的對(duì)比度，重點(diǎn)突出文字內(nèi)容。

[1]趙錫源.論網(wǎng)站藝術(shù)設(shè)計(jì)[J].新聞愛好者，2010（2）：98.

[2]陳心威.淺談色彩在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J].福建電腦，2009（10）：146.

Analysis on the characteristics of Web page design and application

He Li
（Wuchang Polytechnic College, Wuhan 430202, China）

Web design combines the application of computer technology with the performance of the visual arts together, which brings out the best in each other, so as to achieve new heights of fusion technology and art. With computer technology as the foundation, by identifying subject, the layout, web page creation, the article completes the reasonable structure of the page. Then through creative design, color adjustment to realize the fine web effect, and discusses the technical and artistic quality in web design features.

Web page design; technical; artistic

何莉（1984— ），女，湖北黃岡，碩士，講師；研究方向：計(jì)算機(jī)技術(shù)。