現(xiàn)在還有許多人都在盲意圖認為,只需用好了軟件,就能搞好網(wǎng)頁規(guī)劃了。其實網(wǎng)頁規(guī)劃是一個理性思考與理性分析相結(jié)合的復雜的進程,它的方向取決于規(guī)劃的使命,它的完結(jié)依賴于網(wǎng)頁的制造。正所謂“功夫在詩外”,網(wǎng)頁規(guī)劃中最重要的東西,并非在軟件的運用上,而是在咱們對網(wǎng)頁規(guī)劃的理解以及規(guī)劃制造的水平上,在于咱們自身的美感以及對頁面的掌握上。
首先,咱們要弄清楚網(wǎng)頁規(guī)劃的使命。
一、規(guī)劃的使命
規(guī)劃是一種審美活動,成功的規(guī)劃著作一般都很藝術(shù)化。但藝術(shù)僅僅規(guī)劃的方法,而并非規(guī)劃的使命。規(guī)劃的使命是要完結(jié)規(guī)劃者的意圖,而并非發(fā)明美。
網(wǎng)頁規(guī)劃的使命,是指規(guī)劃者要體現(xiàn)的主題和要完結(jié)的功用。站點的性質(zhì)不同,規(guī)劃的使命也不同。從方法上,能夠?qū)⒄军c分為以下三類。
第一類是資訊類站點,像新浪、網(wǎng)易、搜狐等門戶網(wǎng)站。這類站點將為拜訪者提供大量的信息,并且拜訪量較大。因而需留意頁面的切割、結(jié)構(gòu)的合理、頁面的優(yōu)化、界面的親和等問題。
第二類是資訊和形象相結(jié)合的網(wǎng)站,像一些較大的公司、國內(nèi)的高校等。這類網(wǎng)站在規(guī)劃上要求較高,既要確保資訊類網(wǎng)站的上述要求,一同又要杰出企業(yè)、單位的形象。然而就現(xiàn)狀上來看,這類網(wǎng)站有粗制濫造的嫌疑。
第三類則是形象類網(wǎng)站,比方一些中小型的公司或單位。這類網(wǎng)站一般較小,有的則有幾頁,需求完結(jié)的功用也較為簡略,網(wǎng)頁規(guī)劃的首要使命是杰出企業(yè)形象。這類網(wǎng)站對規(guī)劃者的美工水平要求較高。
當然,這僅僅從全體上來看,詳細情況還要詳細分析。不同的站點還要區(qū)別對待。別忘了最重要的一點,那便是客戶的要求,它也歸于規(guī)劃的使命。
清晰了規(guī)劃的使命之后,接下來要想的便是怎么完結(jié)這個使命了。
二、規(guī)劃的完結(jié)
規(guī)劃的完結(jié)能夠分為兩個部分。第一部分為站點的規(guī)劃及草圖的制造,這一部分能夠在紙上完結(jié)。第二部分為網(wǎng)頁的制造,這一進程是在計算機上完結(jié)的。
1、方針清晰、定位正確
2、主題鮮明、富有特征
在方針清晰的基礎(chǔ)上,完結(jié)網(wǎng)站的構(gòu)思構(gòu)思即全體規(guī)劃計劃。對網(wǎng)站的全體風格和特征作出定位,規(guī)劃網(wǎng)站的安排結(jié)構(gòu)。
要做到主題鮮明杰出,力求簡潔,要害清晰,以簡略清晰的言語和畫面告知咱們本站點的主題,吸引對本站點有需求的人的視野,對無關(guān)的人員也能留下必定的形象。關(guān)于一些職業(yè)標志和公司的標志應充沛加以運用。
3、版式編列布局合理
網(wǎng)頁規(guī)劃作為一種視覺言語,當然要考究編列和布局,雖然主頁的規(guī)劃不等同于平面規(guī)劃,但它們有許多附近之處,應充沛加以運用和借鑒。
版式規(guī)劃經(jīng)過文字圖形的空間組合,表達出諧和與美。版式規(guī)劃經(jīng)過視覺要素的理性分析,和嚴厲的方法構(gòu)成訓練,培育對全體畫面的掌握才能和審美才能。一個優(yōu)異的網(wǎng)頁規(guī)劃者也應該知道哪一段文字圖形該落于何處,才能使整個網(wǎng)頁生輝。
努力做到全體布局合理化、有序化、全體化。優(yōu)異之作,善于以奇妙、合理的視覺方法使一些言語無法表達的思維得以闡述,做到豐厚多樣而又簡潔明了。
多頁面站點頁面的編列規(guī)劃要求把頁面之間的有機聯(lián)系反映出來,這兒首要的問題是頁面之間和頁面內(nèi)的次序與內(nèi)容的聯(lián)系。為了達到最佳的視覺體現(xiàn)作用,應考究全體布局的合理性。特別是聯(lián)系非常嚴密的有上下文聯(lián)系的頁面,必定規(guī)劃有向前和向后的按鈕,便于閱讀者仔細研讀。
站點規(guī)劃簡略有序,主次聯(lián)系清楚,將零亂的頁面,安排進程稠濁的內(nèi)容依全體布局的需求進行分組歸納,經(jīng)過進行具有內(nèi)在聯(lián)系的安排擺放,反復推敲文字、圖形與空間的聯(lián)系,使閱讀者有一個流通的視覺體驗。
4、顏色諧和要害杰出
色調(diào)及黑、白、灰的三色空間聯(lián)系不管在規(guī)劃還是在繪畫方面都起著重要的作用。在頁面上必定得清晰調(diào)性,而其它有色或無色的內(nèi)容均屬黑、白、灰的三色空間聯(lián)系,從而構(gòu)成它們的空間層次。
顏色是藝術(shù)體現(xiàn)的要素之一,它是光刺激眼睛再傳導到大腦中樞而發(fā)生的一種感覺。在網(wǎng)頁規(guī)劃中,依據(jù)諧和、均衡和要害杰出的準則,將不同的顏色進行組合、調(diào)配來構(gòu)成美麗的頁面。
運用顏色對人們心思的影響的成果,合理地加以運用。依照顏色的記憶性準則,一般暖色較冷色的記憶性強。顏色還具有聯(lián)想與標志的特質(zhì),一般來說,赤色是火的顏色,熱情、奔放;也是血的顏色,能夠標志生命。黃色是明度最高的顏色,顯得富麗、尊貴、明快。綠色是大天然草木的顏色,意味著純天然和成長,標志安寧平和與安全,如綠色食品。紫色是尊貴的標志,有莊重感。白色能給人以純真與清白的感覺,表示平和與純潔。不同的顏色調(diào)配所體現(xiàn)出來的作用也不同。比方綠色和金黃、淡白調(diào)配,能夠發(fā)生優(yōu)雅,舒適的氣氛。藍色和白色混合,能體現(xiàn)柔順、濃艷、浪漫的氣氛。赤色和黃色、金色的調(diào)配能渲染喜慶的氣氛。而金色和粟色的調(diào)配則會給人帶來暖意。規(guī)劃的使命不同,配色計劃也隨之不同。考慮到網(wǎng)頁的適應性,應盡量運用網(wǎng)頁安全色。但顏色的運用并沒有必定的規(guī)律,假如必定要用某個規(guī)律去套,作用只會適得其反。經(jīng)歷上咱們可先確認一種能體現(xiàn)主題的主體色,然后依據(jù)詳細的需求,運用顏色的近似和比照來完結(jié)整個頁面的配色計劃。整個頁面在視覺上應是一個全體,以達到諧和、悅意圖視覺作用。
在顏色的運用進程中,還應留意的一個問題是:因為國家和種族的不同,宗教和崇奉的不同,生活的地理位置、文明涵養(yǎng)的差異,不同的人群對顏色的喜惡程度有著很大差異。如:兒童喜愛比照激烈、特性鮮明的純顏色;生活在草原上的人喜愛赤色;生活在鬧市中的人喜愛濃艷的顏色;生活在沙漠中的人喜愛綠色。在規(guī)劃中要考慮首要讀者群的布景和構(gòu)成。
5、方法內(nèi)容諧和共同
方法服務(wù)于內(nèi)容,內(nèi)容又為意圖服務(wù),方法與內(nèi)容的共同是規(guī)劃網(wǎng)頁的底子準則之一。
畫面的安排準則中,將豐厚的意義和多樣的方法安排在一個共同的結(jié)構(gòu)里,方法言語必須契合頁面的內(nèi)容,體現(xiàn)內(nèi)容的豐厚含義。
運用比照與諧和,對稱與平衡,節(jié)奏與韻律以及留白等方法,如經(jīng)過空間、文字、圖形之間的相互聯(lián)系建立全體的均衡狀況,發(fā)生諧和的美感。如對稱準則在頁面規(guī)劃中,它的均衡有時會使頁面顯得板滯,但假如參加一些動感的的文字、圖畫,或選用夸張的方法來體現(xiàn)內(nèi)容往往會達到比較好的作用。
接下來咱們要做的便是經(jīng)過軟件的運用,將規(guī)劃的藍圖變?yōu)閷嵺`,終究的集成一般是在Dreamweaver里完結(jié)的。雖然在草圖上,咱們定出了頁面的大體概括,可是構(gòu)思一般都是在制造進程中發(fā)生的。規(guī)劃著作必定要有構(gòu)思,這是最底子的要求,沒有構(gòu)思的規(guī)劃是失敗的。在制造的進程中,咱們會碰到許多問題,其中最靈敏的莫過于頁面的顏色了!
三、顏色的運用
顏色是一種古怪的東西,它是美麗而豐厚的,它能喚起人類的心構(gòu)思知。一般來說,赤色是火的顏色,熱情、奔放;也是血的顏色,能夠標志生命。黃色是明度最高的顏色,顯得富麗、尊貴、明快。綠色是大天然草木的顏色,意味著純天然和成長,標志安寧平和與安全,如綠色食品。紫色是尊貴的標志,有莊重感。白色能給人以純真與清白的感覺,表示平和與純潔。
咱們知道,顏色是光的折射發(fā)生的,紅、黃、藍是三原色,其它的顏色都能夠用這三種顏色諧和而成。換一種思路,咱們能夠用顏色的變化來體現(xiàn)光影作用,這無疑將使咱們的著作更貼近實踐。
顏色代表了不同的情感,有著不同的標志含義。這些標志含義是人們思維交流傍邊的一個復雜問題,它因人的年齡、地域、時代、民族、階層、經(jīng)濟區(qū)域、工作才能、教育水平、風俗習慣、宗教崇奉、生活環(huán)境、性別差異而有所不同。
單純的顏色并沒有實踐的意義,和不同的顏色調(diào)配,它所體現(xiàn)出來的作用也不同。比方綠色和金黃、淡白調(diào)配,能夠發(fā)生優(yōu)雅,舒適的氣氛。藍色和白色混合,能體現(xiàn)柔順、濃艷、浪漫的氣氛。赤色和黃色、金色的調(diào)配能渲染喜慶的氣氛。而金色和粟色的調(diào)配則會給人帶來暖意。規(guī)劃的使命不同,配色計劃也隨之不同?紤]到網(wǎng)頁的適應性,應盡量運用網(wǎng)頁安全色。
但顏色的運用并沒有必定的規(guī)律,假如必定要用某個規(guī)律去套,作用只會適得其反。經(jīng)歷上咱們可先確認一種能體現(xiàn)主題的主體色,然后依據(jù)詳細的需求,運用顏色的近似和比照來完結(jié)整個頁面的配色計劃。整個頁面在視覺上應是一個全體,以達到諧和、悅意圖視覺作用。
四、造型的組合
在網(wǎng)頁規(guī)劃中,咱們首要經(jīng)過視覺傳達來體現(xiàn)主題。在視覺傳達中,造型是很重要的一個元素。拋去是圖還是文字的問題,畫面上的一切元素能夠共同作為畫面的底子構(gòu)成要素點、線、面來進行處理。在一幅成功的著作里,是需求點、線、面的共同組合與調(diào)配來構(gòu)造整個頁面的。
一般咱們能夠運用的組合方法有次序、比例、均衡、對稱、接連、距離、堆疊、反復、穿插、節(jié)奏、韻律、歸納、變異、特寫、反射等等,它們都有各自的特色。在規(guī)劃中應依據(jù)詳細情況,選擇最適合的體現(xiàn)方法,這樣有利于主題的體現(xiàn)。
經(jīng)過點、線、面的組合,能夠杰出頁面上的重要元素,杰出規(guī)劃的主題,增強美感,讓觀者在感受美的進程中領(lǐng)會規(guī)劃的主題,從而完結(jié)規(guī)劃的使命。
造型的奇妙運用不只能帶來極大的美感,并且能較好地杰出企業(yè)形象,并且能將網(wǎng)頁上的各種元素有機的安排起來,它乃至還能夠引導觀者的視野。
五、規(guī)劃的準則
規(guī)劃是有準則的,不管運用何種方法對畫面中的元素進行組合,都必定要遵循五個大的準則:共同、連接、切割、比照及諧和。
共同,是指規(guī)劃著作的全體性,共同性。規(guī)劃著作的全體作用是至關(guān)重要的,在規(guī)劃中切勿將各組成部分孤立渙散,那樣會使畫面呈現(xiàn)出一種枝蔓紛雜的雜亂作用。
連接,是指要留意頁面的相互聯(lián)系。規(guī)劃中應運用各組成部分在內(nèi)容上的內(nèi)在聯(lián)系和體現(xiàn)方法上的相互照應,并留意整個頁面規(guī)劃風格的共同性,完結(jié)視覺上和心思上的連接,使整個頁面規(guī)劃的各個部分極為融洽,猶如一氣呵成。
切割,是指將頁面分成若干小塊,小塊之間有視覺上的不同,這樣能夠使觀者一望而知。在信息量許多時為使觀者能夠看清楚,就要留意到將畫面進行有效的切割。切割不只是體現(xiàn)方法的需求。換個角度來講,切割也能夠被視為關(guān)于頁面內(nèi)容的一種分類歸納。
比照便是經(jīng)過矛盾和抵觸,使規(guī)劃愈加富有氣憤。比照方法許多,例如:多與少、曲與直、強與弱、長與短、粗與細、疏與密、虛與實、主與次、黑與白、動與靜、美與丑、聚與散等等。在運用比照的時分應穩(wěn)重,比照過強容易破壞美感,影響共同。
諧和是指整個頁面契合美的規(guī)律,天衣無縫。假如一件規(guī)劃著作僅僅是顏色、形狀、線條等的隨意混合,那么著作將不但沒有“生命感”,并且也底子無法完結(jié)視覺規(guī)劃的傳達功用。諧和不只要看結(jié)構(gòu)方法,并且要看著作所形成的視覺作用能否與人的視覺感受形成一種溝通,發(fā)生心靈的共識。這是規(guī)劃能否成功的要害。
六、網(wǎng)頁的優(yōu)化
在網(wǎng)頁規(guī)劃中,網(wǎng)頁的優(yōu)化是較為重要的一個環(huán)節(jié)。它的成功與否會影響頁面的閱讀速度和頁面的適應性,影響觀者對網(wǎng)站的形象。
在資訊類網(wǎng)站中,文字是頁面中最大的構(gòu)成元素,因而字體的優(yōu)化顯得尤為重要。運用css款式表指定文字的款式是必要的,一般咱們將字體指定為宋體,巨細指定為12px,顏色要視布景色而定,準則上以能看清且與整個頁面調(diào)配諧和為準。在白色的布景上,咱們一般運用黑色,這樣不易發(fā)生視覺疲勞,能確保閱讀者較長時刻地閱讀網(wǎng)頁。
圖片是網(wǎng)頁中的重要元素。圖片的優(yōu)化能夠在確保閱讀質(zhì)量的前提下將其size降至最低,這樣能夠成倍地提高網(wǎng)頁的下載速度。運用Photoshop6或Fireworks4能夠?qū)D片切成小塊,分別進行優(yōu)化。輸出的格局能夠為gif或jpeg,要視詳細情況而定。一般咱們把有較為復雜顏色變化的小塊優(yōu)化為jpeg,而把那種只有單純色塊的卡通畫式的小塊優(yōu)化為gif,這是由這兩種格局的特色決議的。
表格(table)是頁面中的重要元素,是頁面排版的首要方法。咱們能夠設(shè)定表格的寬度、高度、邊框、布景色、對齊方法等參數(shù)。許多時分,咱們將表格的邊框設(shè)為0,以此來定位頁面中的元素,或許籍此確認頁面中各元素的相對位置。咱們知道:閱讀器在讀取網(wǎng)頁html原代碼時,是讀完整個table才將它顯示出來的。假如一個大表格中含有多個子表格,必須等大表格讀完,才能將子表格一同顯示出來。咱們在拜訪一些站點時,等候多時無結(jié)果,按"中止"按鈕卻一下顯示出頁面便是這個原因。因而,咱們在規(guī)劃頁面表格的時分,應該盡量避免將一切元素嵌套在一個表格里,并且表格嵌套層次盡量要少。在運用Dreamweaver制造網(wǎng)頁時,會主動在每一個td內(nèi)增加一個空字符“ ”。假如單元格內(nèi)沒有填充其它元素,這個空字符會保存,在指定td的寬度或高度后,能夠在源代碼內(nèi)將其刪去。
網(wǎng)頁的適應性是很重要的,在不同的體系上,不同的分辨率下,不同的閱讀器上,咱們將會看到不同的結(jié)果,因而規(guī)劃時要統(tǒng)籌考慮。一般咱們在800*600下制造網(wǎng)頁,最佳閱讀作用也是在800*600分辨率下,在其它情況下只需確保底子共同,不出現(xiàn)較大問題即可 |