第2章-網(wǎng)頁設(shè)計中的布局基礎(chǔ)

網(wǎng)站設(shè)計原理與實(shí)戰(zhàn)網(wǎng)頁功能與形態(tài)的比較網(wǎng)頁設(shè)計是由一種設(shè)計語言來體現(xiàn)的，此種語言在網(wǎng)頁設(shè)計中具有十分重要的作用。因此，要求設(shè)計師靈活處理好網(wǎng)頁功能性與形態(tài)性之間的關(guān)系。與偏重于網(wǎng)頁的功能性和目的性的設(shè)計相比較而言，僅僅重視形態(tài)的設(shè)計只能被稱為藝術(shù)家的創(chuàng)作作品，然而只注重網(wǎng)頁功能的設(shè)計則又會缺乏審美性。網(wǎng)頁設(shè)計中視覺空間的點(diǎn)、線、面網(wǎng)頁設(shè)計是依靠視覺來傳遞信息的。因此，網(wǎng)頁設(shè)計在開始尋求表現(xiàn)手法之前，首先要找到構(gòu)成頁面的種種不同的空間感覺。構(gòu)成網(wǎng)站頁面視覺空間的基本要素有點(diǎn)、線和面三要素，構(gòu)成頁面要素相互之間的組成關(guān)系，同文章與單詞的關(guān)系相似。網(wǎng)頁設(shè)計中視覺空間的點(diǎn)、線、面網(wǎng)頁設(shè)計中的點(diǎn)點(diǎn)是構(gòu)成視覺空間的基本元素，是表現(xiàn)視覺形象的基本設(shè)計語言。網(wǎng)頁設(shè)計中的線網(wǎng)頁設(shè)計中也可以通過“線”元素的視覺構(gòu)成來表達(dá)類似平穩(wěn)、不平穩(wěn)、條理、圓潤等種種聯(lián)想。網(wǎng)頁設(shè)計中的面因?yàn)槊婢哂忻娣e和質(zhì)量，所以“面”是有形的。在點(diǎn)、線、面三元素中，面占據(jù)空間的位置最多，所以相對于點(diǎn)和線的視覺沖擊力，面的視覺沖擊力更強(qiáng)烈。網(wǎng)頁設(shè)計中由點(diǎn)、線、面組成的基本幾何圖形在進(jìn)行網(wǎng)頁視覺設(shè)計時，很多時候設(shè)計師使用的是由點(diǎn)、線、面組成的幾何圖形來突出體現(xiàn)設(shè)計的創(chuàng)意以及網(wǎng)頁的空間感。大眾化與個性化的網(wǎng)頁視覺布局設(shè)計大眾化網(wǎng)頁視覺布局設(shè)計在網(wǎng)頁設(shè)計中，大眾化的網(wǎng)頁布局設(shè)計是比較常用的。它注重文本信息的快速傳達(dá)，以及方便用戶熟練地使用網(wǎng)站個性化網(wǎng)頁視覺布局設(shè)計在進(jìn)行網(wǎng)頁頁面設(shè)計時，為了避免頁面的單一性與呆板性，網(wǎng)頁設(shè)計師都在尋求個性化的網(wǎng)頁視覺布局設(shè)計，獨(dú)特的有創(chuàng)意的個性化網(wǎng)頁布局設(shè)計不僅可以增加頁面的新穎感與趣味感網(wǎng)頁布局設(shè)計中的實(shí)驗(yàn)形態(tài)實(shí)驗(yàn)形態(tài)的網(wǎng)頁布局結(jié)構(gòu)與其他的網(wǎng)頁視覺布局形態(tài)不同，它不注重功能性的表現(xiàn)，而是將重點(diǎn)放在網(wǎng)頁設(shè)計的創(chuàng)意性、獨(dú)特性、新穎性上，追求前衛(wèi)、新異的網(wǎng)頁頁面設(shè)計。優(yōu)秀網(wǎng)頁的布局結(jié)構(gòu)網(wǎng)頁布局結(jié)構(gòu)的標(biāo)準(zhǔn)網(wǎng)頁布局結(jié)構(gòu)的標(biāo)準(zhǔn)是信息架構(gòu)，信息架構(gòu)是指依據(jù)最普遍、最常見的原則和標(biāo)準(zhǔn)對網(wǎng)頁界面中的內(nèi)容進(jìn)行分類整理、確立標(biāo)記體系和導(dǎo)航系統(tǒng)、實(shí)現(xiàn)網(wǎng)站內(nèi)容的結(jié)構(gòu)化，從而便于瀏覽者更加方便、迅速地找到需要的信息。網(wǎng)頁布局設(shè)計中的相關(guān)元素顯示器的大小和分辨率的高低決定了網(wǎng)頁顯示頁面的尺寸，也就是說網(wǎng)頁的最大局限性在于頁面顯示無法突破顯示器的范圍。網(wǎng)頁的布局類型網(wǎng)頁設(shè)計中的“布局”要素是決定網(wǎng)頁整體視覺感受的比較重要的環(huán)節(jié)。網(wǎng)頁布局的基本方法網(wǎng)頁布局的設(shè)計網(wǎng)站頁面的布局并不是說將頁面中的元素在網(wǎng)頁中隨便的排列，網(wǎng)頁布局的設(shè)計是一個網(wǎng)站頁面展現(xiàn)其美觀、實(shí)用的最重要的方法。網(wǎng)頁布局的構(gòu)成原則網(wǎng)頁布局的構(gòu)成原則包括協(xié)調(diào)、一致、流動、均衡、強(qiáng)調(diào)等。網(wǎng)頁布局的特征在網(wǎng)頁布局設(shè)計中，需要考慮到用戶的體驗(yàn)度，是否能夠準(zhǔn)確、快捷地傳達(dá)信息，另外還要考慮到網(wǎng)頁界面是否具有視覺上的美感和結(jié)構(gòu)形態(tài)的設(shè)計是否合理等因素，不但要突出各個構(gòu)成元素的特性，還要兼顧網(wǎng)頁整體的視覺效果。網(wǎng)站頁面的布局方式左側(cè)的頁面布局左側(cè)的頁面布局是指將頁面中的內(nèi)容居左排列，其以頁面的左側(cè)位置為標(biāo)準(zhǔn)，布局使用的基本框架為1024×768像素的分辨率。水平居中的頁面布局水平居中的頁面布局是指以頁面的水平位置為標(biāo)準(zhǔn)，在頁面的中間位置對內(nèi)容進(jìn)行排列，這樣設(shè)計出來的網(wǎng)頁作品非常具有均衡感。水平和垂直居中的頁面布局水平和垂直居中的頁面布局是指將頁面的橫向和縱向設(shè)計成100%的布局框架，使得頁面中的內(nèi)容不管在任何大小的分辨率下都在瀏覽器的正中間顯示。滿屏的頁面布局滿屏的頁面布局是指將頁面的橫向和縱向的大小不使用固定的像素值進(jìn)行設(shè)置，而是使用相對的百分比值進(jìn)行布局設(shè)置。分割方式的頁面布局在進(jìn)行網(wǎng)頁布局設(shè)計時，首先需要通過頁面的分割方向和布局方式將網(wǎng)頁的基本格式確定下來，再在其基礎(chǔ)上進(jìn)行設(shè)計和制作。課堂練習(xí)——設(shè)計美食飲品網(wǎng)站頁面本案例設(shè)計一個美食飲品網(wǎng)站頁面，使用綠色作為頁面的主色調(diào)，清新的綠色和天空的湛藍(lán)相映襯，表現(xiàn)出自然、健康，還運(yùn)用了一些外部筆刷的特效來增加畫面的整體效果，給人靚麗、清新的感覺，下面我們來解析本案例的具體制作方法。課后練習(xí)——設(shè)計咖啡館網(wǎng)站頁面本案例設(shè)計咖啡館網(wǎng)站頁面，