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

何 莉

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

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

何 莉

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

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

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

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

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

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

1.1 網(wǎng)頁設(shè)計的技術(shù)要點

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

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

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

1.2 網(wǎng)頁設(shè)計的注意事項

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[2]陳心威.淺談色彩在網(wǎng)頁設(shè)計中的應(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ī)技術(shù)。