◆張俊霞 范建淑

(濟(jì)寧職業(yè)技術(shù)學(xué)院 山東 272000)

網(wǎng)頁設(shè)計(jì)與制作中的基本要素探究

◆張俊霞 范建淑

(濟(jì)寧職業(yè)技術(shù)學(xué)院 山東 272000)

隨著近年來社會(huì)的進(jìn)步和發(fā)展，當(dāng)前階段網(wǎng)絡(luò)技術(shù)發(fā)展和計(jì)算機(jī)技術(shù)發(fā)展已經(jīng)逐漸的深入到了人們的生活當(dāng)中去，成為了生活和工作當(dāng)中不可缺少的一部分?，F(xiàn)階段人們對(duì)于網(wǎng)絡(luò)的應(yīng)用已經(jīng)不僅僅限于娛樂，而是直接的參與到了網(wǎng)站建設(shè)當(dāng)中去，促使其能夠具有良好的可行性和時(shí)尚性，讓網(wǎng)絡(luò)的作用能得到充分的展現(xiàn)。本文主要對(duì)網(wǎng)頁設(shè)計(jì)與制作的基本要素進(jìn)行了分析，希望能為網(wǎng)頁設(shè)計(jì)當(dāng)中的一些注意事項(xiàng)和重點(diǎn)內(nèi)容建設(shè)提供更多的幫助。

網(wǎng)頁設(shè)計(jì)；制作；基本要素

0 前言

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，已經(jīng)有越來越多的人開始學(xué)習(xí)網(wǎng)頁制作。而在網(wǎng)絡(luò)制作方面的新技術(shù)和新方法也在不斷的推出。網(wǎng)頁設(shè)計(jì)與制作是網(wǎng)站制作當(dāng)中的重要環(huán)節(jié)，其在設(shè)計(jì)方面是更加具有挑戰(zhàn)性和創(chuàng)新性的，因此需要更多的從全面角度進(jìn)行思考，從而找到有效的方式來進(jìn)行網(wǎng)頁設(shè)計(jì)和制作，下面將對(duì)網(wǎng)頁設(shè)計(jì)與制作當(dāng)中的基本要素進(jìn)行詳細(xì)的論述和分析。

1 網(wǎng)頁設(shè)計(jì)與制作概述

網(wǎng)絡(luò)是當(dāng)前人們生活、工作和學(xué)習(xí)當(dāng)中重要的組成部分，而網(wǎng)頁的設(shè)計(jì)和制作則是網(wǎng)站建設(shè)中的重要環(huán)節(jié)，如果在網(wǎng)頁的設(shè)計(jì)和制作當(dāng)中出現(xiàn)了問題，那么則會(huì)導(dǎo)致整個(gè)網(wǎng)頁的設(shè)計(jì)難以吸引人，并且也將導(dǎo)致網(wǎng)站當(dāng)中的效果難以發(fā)揮。在網(wǎng)頁設(shè)計(jì)當(dāng)中從目前的情況來看，網(wǎng)頁設(shè)計(jì)與制作的重要組成部分包括了網(wǎng)頁設(shè)計(jì)與制作的網(wǎng)頁布局、色彩構(gòu)造以及框架結(jié)構(gòu)等等部分[1]。在進(jìn)行設(shè)計(jì)和制作的過程中需要對(duì)每一個(gè)環(huán)節(jié)都加以考慮，才能讓網(wǎng)頁設(shè)計(jì)制作的效果得到提升，在整體上更加的統(tǒng)一化。

2 網(wǎng)頁設(shè)計(jì)與制作過程

2.1 設(shè)計(jì)頁面布局

當(dāng)前階段在頁面的設(shè)計(jì)布局方面常見的布局結(jié)構(gòu)有幾種：

（1）兩欄式結(jié)構(gòu)。也就是將整個(gè)頁面分為兩個(gè)部分，上面不部分是網(wǎng)站的標(biāo)志或者是廣告條，下面則分為左右兩個(gè)部分，左部分是導(dǎo)航或者是信息分類，右邊是主要內(nèi)容。這樣的布局方式是比較容易掌握的，但如果在色彩的搭配上不夠注意，那么則會(huì)導(dǎo)致出現(xiàn)一種單調(diào)的感覺，難以更好的展現(xiàn)效果。

（2）三欄式結(jié)構(gòu)。這種結(jié)構(gòu)當(dāng)中主要應(yīng)用在一些大型的網(wǎng)站布局當(dāng)中，主要是上半部分為廣告條，下面分為三個(gè)部分，中間比較大部分作為主要信息的公布，左右兩側(cè)則主要是小的內(nèi)容或者是廣告。這種結(jié)構(gòu)的布局能帶給人一種簡(jiǎn)潔并且充實(shí)的感受，但是整體上比較古板，也是一種比較常見的布局方式[2]。

（3）“三”型結(jié)構(gòu)。這種結(jié)構(gòu)的出現(xiàn)主要是在一些國(guó)外的網(wǎng)站當(dāng)中，國(guó)內(nèi)的主要應(yīng)用在一些視頻網(wǎng)站當(dāng)中。有著分類清晰使用方便的特點(diǎn)。左右兩側(cè)是框架，中間部分則主要是大的窗口展示。整體頁面布局上是十分簡(jiǎn)潔的，但由于當(dāng)中所涉及到的信息量不大，因此其使用范圍也受到了一定的限制。

（4）flash型。這種結(jié)構(gòu)的設(shè)計(jì)，主要依靠的是flash技術(shù)，在頁面的內(nèi)容表現(xiàn)上比較豐富，能帶給人一種視覺上的沖擊性，如果能進(jìn)行有效的處理，那么則能達(dá)到其他的網(wǎng)頁設(shè)計(jì)中不能產(chǎn)生的效果，極具吸引力。

2.2 主頁設(shè)計(jì)當(dāng)中的色彩搭配

網(wǎng)頁設(shè)計(jì)和制作當(dāng)中最終要呈現(xiàn)出的網(wǎng)頁是能夠具有吸引力的，能夠帶給人更加直觀印象的。因此在設(shè)計(jì)當(dāng)中色彩的合理搭配就顯得格外的重要。網(wǎng)頁的色彩搭配上主要有幾點(diǎn)原則：

（1）在選擇色彩上盡量的選擇同一個(gè)色調(diào)內(nèi)的色彩。這樣的色彩搭配也就是在顏色上是一致的，然后通過對(duì)對(duì)比度、飽和度和透明度等調(diào)整來讓色彩加重或者變淡，從而形成新的色彩[3]。采取這樣的色彩搭配方式能讓整個(gè)頁面看起來更加的干凈，并且具有層次感。

（2）對(duì)比色搭配。所謂對(duì)比色搭配主要采取是顏色的強(qiáng)烈對(duì)比性來讓網(wǎng)頁重點(diǎn)得到突出，產(chǎn)生較為強(qiáng)烈的視覺效果。合理的使用對(duì)比色能夠能起到畫龍點(diǎn)睛的效果，并且能讓使用者一眼就看到當(dāng)中的重點(diǎn)，促使網(wǎng)站的使用性能得到提升。

（3）暖色搭配。暖色之前的合理使用能夠讓整個(gè)網(wǎng)頁展現(xiàn)出一種溫馨和溫暖的感受。在使用的過程中可以根據(jù)網(wǎng)站的性質(zhì)和特點(diǎn)來合理的進(jìn)行選擇。

（4）冷色搭配。冷色主要包括藍(lán)色、綠色和紫色等顏色，這些顏色的合理使用能夠營(yíng)造出寧靜和高雅的氛圍，在搭配的效果上能更好的凸顯網(wǎng)站重點(diǎn)主題，產(chǎn)生較好的視覺效果。

在進(jìn)行網(wǎng)頁的色彩搭配設(shè)計(jì)當(dāng)中需要先確定整個(gè)網(wǎng)站的風(fēng)格，然后按照風(fēng)格來進(jìn)行色彩合理的選擇，并在當(dāng)中搭配相應(yīng)的圖片和文字，促使頁面能得到基本完成[4]。然后需要進(jìn)行網(wǎng)站的子頁面創(chuàng)設(shè)，通過編輯方式來對(duì)可編輯區(qū)和不可編輯區(qū)進(jìn)行相應(yīng)的設(shè)計(jì)和內(nèi)容制作。在制作的過程中可以通過模板的方式來進(jìn)行一次性的多個(gè)子頁面制作，并在當(dāng)中進(jìn)行適當(dāng)?shù)男薷暮驼{(diào)整。這樣能夠促使整體的工作效率得到明顯的提升，并且也能讓網(wǎng)站風(fēng)格上更加的統(tǒng)一化。

2.3 網(wǎng)頁的排版設(shè)計(jì)制作

一個(gè)網(wǎng)頁要想能得到使用者的喜愛，不僅需要有一些唯美的圖片作為吸引，同時(shí)也要具有良好的層次感。網(wǎng)頁的排版是網(wǎng)站制作當(dāng)中的重要組成部分，制作者需要靈活的利用各種表格、層、CSS樣式來進(jìn)行排版設(shè)計(jì)[5]。在設(shè)計(jì)的過程中有一個(gè)很重要的原則就是需要合理的利用空間，讓網(wǎng)頁能讓人看上去整潔有序，不能密密麻麻或者是層次不清。同時(shí)需要在制作網(wǎng)頁的過程中注意不要將多個(gè)網(wǎng)頁一起來進(jìn)行制作，因?yàn)橐坏┮薷牡脑挄?huì)增加更多的工作量，也將導(dǎo)致設(shè)計(jì)性效果上受到影響及。在排版的過程中首先應(yīng)當(dāng)制作出代表性比較強(qiáng)的一個(gè)網(wǎng)頁，然后再來進(jìn)行下一頁的設(shè)計(jì)和結(jié)構(gòu)排版。這樣的制作方式不僅能感受到輕松，也能提升工作效率，促使整體性得到提升。

3 網(wǎng)頁的設(shè)計(jì)與制作當(dāng)中需要注意的內(nèi)容

在網(wǎng)頁設(shè)計(jì)和制作當(dāng)中需要注意在細(xì)節(jié)上的控制，只有全面的把握住每一個(gè)細(xì)節(jié)才能讓瀏覽使用者更好的對(duì)此進(jìn)行應(yīng)用，并且留下好的印象。例如在線條的運(yùn)用上，制作網(wǎng)頁中如果需要進(jìn)行過度，那么則需要使用一條線進(jìn)行區(qū)分，如果使用一條直直的線那么則會(huì)顯得比較突兀，而使用一條較細(xì)的線并且在當(dāng)中加上一些色彩則可能會(huì)讓整體效果更加的美觀。再例如在圖標(biāo)的使用上，網(wǎng)站當(dāng)中的各個(gè)標(biāo)題的前面適當(dāng)?shù)脑黾訄D標(biāo)點(diǎn)綴能讓網(wǎng)頁的效果更加突出，但在使用圖標(biāo)的過程中一定要注意圖標(biāo)的顏色和形式是比較接近于整體風(fēng)格的，不能過于雜亂而帶給人一種不好的感覺[6]。此外，在使用字體方面應(yīng)當(dāng)保證自己的統(tǒng)一性，不能亂使用字體，并且在字體的間距和底色使用上都應(yīng)當(dāng)盡量的保持一致性，因?yàn)槲淖值牟煌g距可能會(huì)影響到整體的美觀效果，保持好的文字間距能讓整體的效果得到全面提升。網(wǎng)站建設(shè)的過程中所涉及到的內(nèi)容是多個(gè)方面的，需要我們站在全面的角度上進(jìn)行問題的思考和設(shè)計(jì)制作，從而得到良好的效果。

4 結(jié)語

計(jì)算機(jī)網(wǎng)絡(luò)在現(xiàn)代社會(huì)當(dāng)中已經(jīng)成為了人們生活中不可缺少的重要組成部分，是一個(gè)足不出戶就能達(dá)到各種需求的虛擬世界。網(wǎng)頁是進(jìn)行網(wǎng)絡(luò)傳播的重要媒介，其起到的作用是無法替代的。因此，在當(dāng)前階段作為網(wǎng)站的設(shè)計(jì)者，在進(jìn)行網(wǎng)站設(shè)計(jì)和制作的過程中，一定要站在使用者的角度上來充分的考慮到實(shí)際需求。然后結(jié)合美學(xué)理念來進(jìn)行全面的網(wǎng)頁設(shè)計(jì)，保證網(wǎng)頁能夠?qū)⒕W(wǎng)站當(dāng)中的內(nèi)容全面展現(xiàn)出來，并且達(dá)到好使用效果。當(dāng)前階段在網(wǎng)頁的設(shè)計(jì)上還是有著一定不足之處的，對(duì)此還需要網(wǎng)站設(shè)計(jì)者能不斷的學(xué)習(xí)和積累經(jīng)驗(yàn)，從而為網(wǎng)頁設(shè)計(jì)制作創(chuàng)造更好的條件。

[1]李青．淺談網(wǎng)頁制作的方法和技巧[J]．知識(shí)經(jīng)濟(jì)，2011．

[2]李建霞．淺談圖像處理技術(shù)在網(wǎng)頁制作中的應(yīng)用[J]．電腦知識(shí)與技術(shù)，2012．

[3]袁凱烽 WEB標(biāo)準(zhǔn)在網(wǎng)頁制作中的應(yīng)用[J]．福建電腦，2014．

[4]秦霞．項(xiàng)目教學(xué)法在高職《網(wǎng)頁制作基礎(chǔ)》課程中的實(shí)踐[J]．廣西輕工業(yè)，2012．

[5]王茜茜．網(wǎng)頁制作的有效教學(xué)[J]．佳木斯教育學(xué)院學(xué)報(bào)，2015．

[6]劉寶坤，劉志，趙占柱，高金祥．談靜態(tài)網(wǎng)頁制作[J]．現(xiàn)代農(nóng)業(yè)，2012．