網(wǎng)頁設(shè)計的專業(yè)與非專業(yè)

一、版面編排
網(wǎng)頁設(shè)計首先涉及到的是頁面的版面編排問題。"版面編排"實際上就是中國古代畫論中的"經(jīng)營位置"。網(wǎng)頁作為一種版面,既有文字,又有圖片。文字有大有小,還有標題和正文之分;圖片也有大小,而且有橫有豎之別。圖片和文字都需要同時展示給觀眾,不能簡單地羅列在一個頁面上,這樣往往會搞得雜亂無章。必須根據(jù)內(nèi)容的需要,將這些圖片和文字按照一定的次序進行合理的編排和布局,使它們組成一個有機的整體,展現(xiàn)給廣大的觀眾。
1.主次分明,中心突出。在一個頁面上,必然考慮視覺的中心,這個中心一般在屏幕的中央,或者在中間偏上的部位。因此,一些重要的文章和圖片一般可以安排在這個部位,在視覺中心以外的地方就可以安排那些稍微次要的內(nèi)容,這樣在頁面上就突出了重點,做到了主次有別。
2.大小搭配,相互呼應(yīng)。較長的文章或標題,不要編排在一起,要有一定的距離,同樣,較短的文章,也不能編排在一起。對待圖片的安排也是這樣,要互相錯開,造成大小之間有一定的間隔,這樣可以使頁面錯落有致,避免重心的偏離。
3.圖文并茂,相得益彰。文字和圖片具有一種相互補充的視覺關(guān)系,頁面上文字太多,就顯得沉悶,缺乏生氣。頁面上圖片太多,缺少文字,必然就會減少頁面的信息容量。因此,最理想的效果是文字與圖片的密切配合,互為襯托,既能活躍頁面,又使網(wǎng)頁有豐富的內(nèi)容。
二、線條和形狀
文字、標題、圖片等的組合,會在頁面上形成各種各樣的線條和形狀。這些線條與形狀的組合,構(gòu)成了網(wǎng)頁的總體藝術(shù)效果。必須注意藝術(shù)地搭配好這些線條和形狀,才能增強頁面的藝術(shù)魅力。
1.直線(矩形)的應(yīng)用。直線條的藝術(shù)效果是流暢、挺拔、規(guī)矩、整齊,所謂有輪有廓。直線和矩形在頁面上的重復(fù)組合可以呈現(xiàn)井井有條、涇渭分明的視覺效果。一般應(yīng)用于比較莊重、嚴肅的網(wǎng)頁題材。
2.曲線(弧形)的應(yīng)用。曲線的效果是流動、活躍,具有動感。曲線和弧形在頁面上的重復(fù)組合可以呈現(xiàn)流暢、輕快,富有活力的視覺效果。一般應(yīng)用于青春、活潑的網(wǎng)頁題材。
3.曲、直線(矩形、弧形)的綜合應(yīng)用。把以上兩種線條和形狀結(jié)合起來運用,可以大大豐富網(wǎng)頁的表現(xiàn)力,使頁面呈現(xiàn)更加豐富多彩的藝術(shù)效果。這種形式的網(wǎng)頁,適應(yīng)的范圍更大,各種主題的網(wǎng)頁都可以應(yīng)用。但是,在頁面的編排處理上,難度也會相應(yīng)大一些,處理得不好會產(chǎn)生凌亂的效果。最簡單的途徑是,在一個頁面上以一種線條(形狀)為主,只在局部的范圍內(nèi)適當(dāng)用一些其它線條(形狀)。
三、色彩處理
色彩是人的視覺最敏感的東西。網(wǎng)頁的色彩處理得好,可以錦上添花,達到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是"總體協(xié)調(diào),局部對比",也就是:網(wǎng)頁的整體色彩效果應(yīng)該是和諧的,只有局部的、小范圍的地方可以有一些強烈色彩的對比。在色彩的運用上,可以根據(jù)網(wǎng)頁內(nèi)容的需要,分別采用不同的主色調(diào)。因為色彩具有象征性,例如:嫩綠色、翠綠色、金**、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標志色,例如:軍警的橄欖綠,醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺,例如冷、暖的感覺,進、退的效果等。另外,色彩還有民族性,各個民族由于環(huán)境、文化、傳統(tǒng)等因素的影響,對于色彩的喜好也存在著較大的差異。充分運用色彩的這些特性,可以使我們的網(wǎng)頁具有深刻的藝術(shù)內(nèi)涵,從而提升網(wǎng)頁的文化品位。下面介紹幾種常用的配色方案:
1.暖色調(diào)。即紅色、橙色、**、赭色等色彩的搭配。這種色調(diào)的運用,可使網(wǎng)頁呈現(xiàn)溫馨、和煦、熱情的氛圍。
2.冷色調(diào)。即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運用,可使網(wǎng)頁呈現(xiàn)寧靜、清涼、高雅的氛圍。
3.對比色調(diào)。即把色性完全相反的色彩搭配在同一個**里。例如:紅與綠、黃與紫、橙與藍等。
這種色彩的搭配,可以產(chǎn)生強烈的視覺效果,給人亮麗、鮮艷、喜慶的感覺。當(dāng)然,對比色調(diào)如果用得不好,會適得其反,產(chǎn)生俗氣、刺眼的不良效果。這就要把握"大調(diào)和,小對比"這一個重要原則,即總體的色調(diào)應(yīng)該是統(tǒng)一和諧的,局部的地方可以有一些小的強烈對比。
最后,還要考慮網(wǎng)頁底色(背景色)的深、淺,這里借用攝影中的一個術(shù)語,就是"高調(diào)"和"低調(diào)"。底色淺的稱為高調(diào);底色深的稱為低調(diào)。底色深,文字的顏色就要淺,以深色的背景襯托淺色的內(nèi)容(文字或圖片);反之,底色淡的,文字的顏色就要深些,以淺色的背景襯托深色的內(nèi)容(文字或圖片)。這種深淺的變化在色彩學(xué)中稱為"明度變化"。有些網(wǎng)頁,底色是黑的,但文字也選用了較深的色彩,由于色彩的明度比較接近,讀者在閱覽時,眼睛就會感覺很吃力,影響閱讀效果。
相關(guān)文章
15 個為編程初學(xué)者準備的網(wǎng)站(都是國外的一些網(wǎng)站)
今天的文章,我們將分享15個可以學(xué)習(xí)編程的網(wǎng)站,這些網(wǎng)站上提供了很多編程教程,圖書以及編程練習(xí),希望對你有用2024-11-02- 這篇文章主要介紹了web開發(fā)中的長度單位主要包括px,pt,em等,需要的朋友可以參考下2023-08-06
網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對單位,一般用于pc端網(wǎng)頁開發(fā),因為是絕對單位所以在移動端上的使用體驗并不是很好,rem它是描述相對于當(dāng)前根元素字體尺寸,是相對單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮,各有優(yōu)點,選擇適合的壓縮工具為將來做項目開發(fā)使用是一件很重要的事情?。≡谶@介紹YUI-compressor,需要的朋友可以參考下2023-06-21- 瀏覽器是多進程的,有瀏覽器主進程,網(wǎng)絡(luò)進程,渲染進程,插件進程等,在將html,css,javascript解析成一個頁面的時候,就需要多個進程的分工合作2023-05-01
- 本文為大家整理了常用的文件對應(yīng)的MIME類型,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁中使用Unicode字符的介紹(&#,\u等)
國際組織制定了可以容納世界上所有文字和符號的字符編碼方案,稱為Unicode,是通用字符集Universal Character Set的縮寫,用以滿足跨語言、跨平臺進行文本轉(zhuǎn)換、處理的要求2021-11-27前端實現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實現(xiàn)字符串GBK與GB2312的編解碼(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2020-12-02- 這篇文章主要介紹了告別硬編碼讓你的前端表格自動計算,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-27