網(wǎng)頁設(shè)計(jì)與制作的制作技巧

摘要：筆者經(jīng)過學(xué)習(xí)網(wǎng)頁制作后，發(fā)現(xiàn)在實(shí)際操作中，仍然會(huì)出現(xiàn)較多問題。因此本文查閱部分相關(guān)資料，試對網(wǎng)頁設(shè)計(jì)與制作的相關(guān)內(nèi)容的一些制作技巧進(jìn)行整理歸納，希望能為大家提供一些較為有用的具體的可行的制作技巧。

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)制作;技巧;網(wǎng)頁制作

目前，隨著科技的日益進(jìn)步，電腦手機(jī)等電子設(shè)備已經(jīng)成為人們生活中必不可少的部分，同時(shí)利用電腦手機(jī)等查詢資料也變得越來越大眾化。而查詢資料就需要應(yīng)用網(wǎng)頁。因此，網(wǎng)頁等內(nèi)容的設(shè)計(jì)以及如何制作出更好效果的網(wǎng)頁則成為越來越重要的問題。如果能夠有效的解決此類問題，設(shè)計(jì)出整潔好看美觀大方的網(wǎng)頁界面，將會(huì)有效提升網(wǎng)站的用戶數(shù)量，并給予用戶更好地視覺感受，也能夠更好的促進(jìn)網(wǎng)站的成長與發(fā)展。

一、網(wǎng)頁設(shè)計(jì)中應(yīng)注意的問題

在網(wǎng)頁設(shè)計(jì)與制作之前，制作者應(yīng)先仔細(xì)考慮好自己想要做的內(nèi)容及大概的風(fēng)格，并從觀眾的角度看問題，仔細(xì)思考，并為其選擇合適的顏色、配樂、排版等。但設(shè)計(jì)時(shí)仍要注意一下以下的問題。

（一）適當(dāng)選擇背景顏色可以增加整體效果

制作者可以選擇純色或彩色等鮮艷的顏色用于背景顏色的制作。例如黑色、紅色、白色、灰色或紫色等是網(wǎng)頁中的主要顏色之一，他們一般都能產(chǎn)生比較好的制作效果。例如黑色具有深沉莊重等含義，可以利用它較好的展現(xiàn)莊嚴(yán)肅穆的感覺，同時(shí)線條的變化也能突出科技感。而白色是設(shè)計(jì)中最常用的顏色，它具有干凈簡潔的特點(diǎn)，同時(shí)白色與其它色彩進(jìn)行結(jié)合也能夠表現(xiàn)出空間感和通透感，彩色在白色的背景中，能夠體現(xiàn)更好的側(cè)重點(diǎn)，同時(shí)還可以起到良好的過渡作用。利用紅色會(huì)給人以溫暖，喜慶的感覺。尤其紅色是中國春節(jié)期間的主顏色，與黃色的搭配能夠給人一種靈動(dòng)、活力的感覺，并在觀看效果上使網(wǎng)頁界面更為突出及時(shí)尚。同時(shí)在購物網(wǎng)站上，紅色網(wǎng)頁的界面也能有效的激起人的購物欲望。黃色在色彩中是明度很高的顏色，其在網(wǎng)頁界面設(shè)計(jì)中的應(yīng)用能夠給予用戶一種光芒以及溫暖的感覺，并且彩色能夠給人一種鮮艷、熱烈的感覺。

（二）合理安排網(wǎng)頁內(nèi)容及結(jié)構(gòu)

在網(wǎng)頁制作環(huán)節(jié)，內(nèi)容的合理篩選對瀏覽者的信息獲取有著重要意義，而網(wǎng)頁內(nèi)容的篩選需要以框架設(shè)計(jì)為前提，即根據(jù)網(wǎng)站框架情況，決定網(wǎng)站內(nèi)容的含量。那么在制作網(wǎng)頁之前，就需要先對其進(jìn)行規(guī)劃。同時(shí)，受眾經(jīng)過長時(shí)間的觀看后，對于設(shè)計(jì)良好的版面，也會(huì)使受眾產(chǎn)生愉悅感。那么這就需要設(shè)計(jì)者進(jìn)行仔細(xì)計(jì)劃，首先，需要整理和組織框架內(nèi)容，明確網(wǎng)頁主旨，并圍繞要求進(jìn)行收集、篩選相應(yīng)素材，建立清晰脈絡(luò);做好計(jì)劃是其中很重要的一點(diǎn)。第二，要考慮具體的技術(shù)執(zhí)行等內(nèi)容;其次要掌握受眾的群體信息，及實(shí)際需求。需要根據(jù)受眾的掌握情況，安排相應(yīng)的內(nèi)容，不能安排過難或過簡單的內(nèi)容，選擇適合的內(nèi)容難度展現(xiàn)給受眾;再然后，列出初分類，做好頁面的制作計(jì)劃;并且，著手進(jìn)行層級(jí)內(nèi)容的規(guī)劃及網(wǎng)頁內(nèi)容的規(guī)劃;最后對內(nèi)容進(jìn)行豐富及完善。

同時(shí)，本文提出建議，從內(nèi)容編排的合理性角度考慮，主欄目應(yīng)當(dāng)放置與主題密切相關(guān)的內(nèi)容，其他的輔助信息（如個(gè)人信息等）則應(yīng)當(dāng)盡量放在網(wǎng)站的最底部或者左側(cè)、右側(cè)，避免輔助信息出現(xiàn)在不恰當(dāng)?shù)奈恢茫D(zhuǎn)移受眾的注意力。而在版面布局方面，常見的結(jié)構(gòu)類型主要有以下幾種（1）???? 國字型布局，即把標(biāo)志或者廣告等內(nèi)容放置在頁面最上方，將最終的內(nèi)容放置在中間放置因?yàn)橹虚g位置是受眾第一眼看到的部分，然后，在最下方的部分可以放置聯(lián)系方式、版權(quán)等信息;（2）T型布局，即將標(biāo)志或者廣告放置在頁面最頂部，下方為導(dǎo)航欄及網(wǎng)頁正文信息。即向受眾展示網(wǎng)頁的主要內(nèi)容，及本網(wǎng)站都有哪些內(nèi)容;（3）POP布局，以精美海報(bào)畫面為主體。而具體的制作方式，則需要考慮內(nèi)容及整體效果等因素。

二、網(wǎng)頁制作中的技巧

內(nèi)容與色彩的選用有了初步方案后，但在網(wǎng)頁制作的過程中，仍然不可避免地會(huì)遇到一些實(shí)際問題。以下介紹一些較好的方法。

（一）常用圖片切換方式

在網(wǎng)頁制作中經(jīng)常使用兩種方法實(shí)現(xiàn)圖片切換：第一，JavaScript代碼，首先創(chuàng)建SQL數(shù)據(jù)庫，引入外部代碼進(jìn)行編輯，最后，調(diào)用數(shù)據(jù)庫。第二，F(xiàn)lash軟件制作，隨后插入網(wǎng)頁中。準(zhǔn)備好需要切換的素材圖片，然后導(dǎo)入圖片，各個(gè)圖片占一個(gè)圖層，選中以后轉(zhuǎn)變成為圖形元件。把幀轉(zhuǎn)換成關(guān)鍵幀，按照順序排列好，存儲(chǔ)文件。在網(wǎng)頁中插入Flash，完成循環(huán)播放。其中利用CSS技術(shù)實(shí)現(xiàn)圖片切換能夠得到較好的應(yīng)用。編寫代碼簡單，文件占用空間較小，后期維護(hù)較為簡單，對素材圖片沒有太多的要求，僅需改變鏈接地址與圖片地址即可。

（二）網(wǎng)頁尺寸選擇技巧

大多數(shù)初學(xué)者在制作網(wǎng)頁時(shí)，并不知道如何設(shè)定網(wǎng)頁界面的寬度尺寸。本文建議設(shè)計(jì)者規(guī)定好合適的字體大小，方法程度后，選擇合適的比例，避免出現(xiàn)設(shè)計(jì)太窄太寬等問題，同時(shí)也盡量避免因受眾放大或縮小而導(dǎo)致影響最終效果。盡量保證滾動(dòng)部分寬度等設(shè)計(jì)合理，避免出現(xiàn)圖片或者視頻變形，影響最終效果等問題。網(wǎng)頁的頁面寬度選擇技巧如下：網(wǎng)頁寬度在778之間，不建議出現(xiàn)水平滾動(dòng)條部分，在1 002像素內(nèi)建議不出現(xiàn)水平滾動(dòng)條，選擇垂直滾動(dòng)條更對版面的設(shè)計(jì)起到作用。

（三）文字處理技巧

網(wǎng)頁上文字內(nèi)容的排版也需注意，如果文字過密，或與背景顏色相似、反差較小，長時(shí)間觀看都會(huì)使受眾產(chǎn)生疲勞感，進(jìn)而引發(fā)反感心理。如果文字排版可參照報(bào)紙的編排方式，將網(wǎng)頁內(nèi)容分欄設(shè)計(jì)，兩欄比一滿頁的視覺效果好，更方便訪問者快速閱讀。字體也會(huì)影響文字可讀性，通用字體（Arial等）最易閱讀，特殊字體（Gothic、Script、Westminster、Cloister）用于標(biāo)題效果較好，但不適用于正文。同時(shí)，設(shè)計(jì)者也可以針對關(guān)鍵詞采用加粗或者變顏色的方法加深效果，使關(guān)鍵內(nèi)容一目了然，同時(shí)更有助于受眾理解設(shè)計(jì)的內(nèi)容，而非大段閱讀，難以找到重點(diǎn)等問題出現(xiàn)，甚至對設(shè)計(jì)者所準(zhǔn)備的內(nèi)容產(chǎn)生厭煩感。

除此之外，制作特效時(shí)，考慮到用戶瀏覽的流暢性，應(yīng)當(dāng)優(yōu)選JavaScript，并盡可能減少動(dòng)態(tài)網(wǎng)頁、視頻、聲音等元素。對因網(wǎng)站主題需要，涉及大量圖片時(shí)，應(yīng)當(dāng)考慮以縮略圖鏈接的形式，兼顧加載速度與信息展示效果。其次，考慮到不同分辨率的圖片在加載、下載速度方面的差異，制作時(shí)應(yīng)當(dāng)合理設(shè)置注解，以幫助瀏覽者了解圖片的基本信息，改善其瀏覽體驗(yàn)。這些問題也應(yīng)多多注意。

三、結(jié)論

網(wǎng)頁設(shè)計(jì)與制作是非常重要的一個(gè)部分，文中可見，制作前的大綱及提前準(zhǔn)備十分重要，同時(shí)設(shè)計(jì)者在制作之前也應(yīng)學(xué)好基礎(chǔ)的理論知識(shí)，這樣更有助于設(shè)計(jì)者對其內(nèi)容的理解。而后進(jìn)行不斷的實(shí)踐，在實(shí)踐中也應(yīng)注意文中提到的幾點(diǎn)，例如在整體制作之前先考慮整體的框架、主題，并選擇合適的顏色及字體字號(hào)等。充分設(shè)計(jì)完成后再進(jìn)行制作，制作時(shí)也可以參考本文提出的圖片切換等技巧，幫助設(shè)計(jì)者提升整體的制作效果。

參考文獻(xiàn)：

[1]?? 陳鳳琴.網(wǎng)頁設(shè)計(jì)中的色彩搭配及技巧[J].黑龍江紡織.2019年 01期：29-31.

[2]?? 夏鵬舉.網(wǎng)站設(shè)計(jì)及網(wǎng)頁制作技巧[J].電腦編程技巧與維護(hù).2020年01期：171-173.

[3]?? 吳曉清.網(wǎng)頁制作教學(xué)中圖片切換的CSS應(yīng)用[J].計(jì)算機(jī)產(chǎn)品與流通.2020年 08期：85.

[4]周金容.網(wǎng)頁制作過程與技巧[J].軟件導(dǎo)刊.2016年 06期：149-151.

作者簡介：

明欣玥（1999—），女，漢族，吉林長春人，延邊大學(xué)師范學(xué)院教育技術(shù)學(xué)專業(yè)，17級(jí)在讀本科生（學(xué)號(hào)2174043696）。