網(wǎng)頁美工設(shè)計(jì)課件

1、網(wǎng)頁美工設(shè)計(jì)網(wǎng)頁美工設(shè)計(jì)一 、網(wǎng)頁概念 (web page)，是網(wǎng)站中的一頁,通常是HTML格式。網(wǎng)頁要使用網(wǎng)頁瀏覽器來閱讀。它是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗的說， 一個(gè)網(wǎng)站就是由多個(gè)網(wǎng)頁組成的。蘋果園網(wǎng)站首頁北京首都機(jī)場首頁二 、網(wǎng)頁構(gòu)成元素 網(wǎng)頁構(gòu)成元素主要包含導(dǎo)航欄、LOGO、Banner、按鈕、 文字等. 文字，就是網(wǎng)頁的內(nèi)容。 圖片，就是網(wǎng)頁的美觀。 除此之外，網(wǎng)頁的元素還包括動(dòng)畫、音樂、程序等等。 LOGO（標(biāo)志）1、LOGO的位置通常在頁面的左上角2 、圖形、符號既要簡練、概括，又要講究藝術(shù)性。 3 、色彩要單純、強(qiáng)烈、醒目。 導(dǎo)航條1、橫排豎排,一排,兩排

2、,多排,都可2 、圖片式導(dǎo)航，很漂亮 3 、動(dòng)態(tài)導(dǎo)航,體積小,變化效果豐富Banner1、46860 為國際標(biāo)準(zhǔn)尺寸,但也可根據(jù)自己的畫面定制大小.2 、好的Banner要符合網(wǎng)站的風(fēng)格 3 、 一個(gè)網(wǎng)頁中若有多個(gè)Banner,要?jiǎng)屿o結(jié)合4 、色彩不易多,圖形要簡潔明了,文字不易太長,一二句話即可按鈕1、 也叫下壓式按鈕, 是一種能在被按下時(shí)產(chǎn)生事件的控件。 2 、每當(dāng)按鈕被按下時(shí)，就產(chǎn)生一個(gè)動(dòng)作事件 3 、從某種意義上來說,只要通過點(diǎn)擊能產(chǎn)生另一個(gè)動(dòng)作的地方,都可以看作是一個(gè)按鈕4 、它的設(shè)計(jì)形式多樣化,導(dǎo)航條也是一種特殊的按鈕文字1、文字就是頁面中的內(nèi)容2 、包括任何地方出現(xiàn)的文字三 、網(wǎng)

3、頁構(gòu)架設(shè)計(jì) 如果把網(wǎng)頁比喻成人的話，先要有骨架，也就是網(wǎng)頁的排版框架。 網(wǎng)頁的分類主要有：分欄式結(jié)構(gòu)，區(qū)塊分布，平面圖片設(shè)計(jì)，以及非規(guī)律的設(shè)計(jì) 。分欄式結(jié)構(gòu)分欄式結(jié)構(gòu)1是二分欄2是標(biāo)準(zhǔn)三分欄3是四分欄46是一些LOGO以及導(dǎo)航在下面的情況，79則是一般的變化 二分欄二分欄 三分欄三分欄 三分欄三分欄 四分欄四分欄 導(dǎo)航在下面導(dǎo)航在下面 導(dǎo)航在下面導(dǎo)航在下面 特殊效果的網(wǎng)頁特殊效果的網(wǎng)頁利用導(dǎo)航分欄利用導(dǎo)航分欄 區(qū)塊分布區(qū)塊分布 區(qū)塊編排，是以顏色或線條，來劃分一些區(qū)域的編排方式，其實(shí)也就是分欄結(jié)構(gòu)的變異 。 區(qū)域編排的設(shè)計(jì)頁面一般情況下不長，一屏或一屏半左右的長度，用于信息量少的企業(yè)站點(diǎn)，和專

4、業(yè)型站點(diǎn)或個(gè)人主頁 區(qū)域編排的設(shè)計(jì)頁面不適合門戶站點(diǎn)和信息量很大的站點(diǎn)。 區(qū)域的設(shè)置可大可小，但是依據(jù)內(nèi)容編排。在分欄式結(jié)構(gòu)里面也可以套設(shè)區(qū)域結(jié)構(gòu) 以顏色區(qū)分的以顏色區(qū)分的以顏色區(qū)分的以顏色區(qū)分的以線條區(qū)分的以線條區(qū)分的在分欄里套設(shè)區(qū)域結(jié)構(gòu)的在分欄里套設(shè)區(qū)域結(jié)構(gòu)的平面圖片設(shè)計(jì)平面圖片設(shè)計(jì) 平面圖片設(shè)計(jì)是指在網(wǎng)頁里面用整張圖片分割的技法。 非常有視覺效果。 適合個(gè)人主頁在內(nèi)容很少的情況下選用。背景是整圖片背景是整圖片背景是整圖片背景是整圖片背景是整圖片背景是整圖片背景是整圖片背景是整圖片非規(guī)律設(shè)計(jì)非規(guī)律設(shè)計(jì) 非規(guī)律設(shè)計(jì)是指在網(wǎng)頁里面用以上幾種通常規(guī)律的結(jié)合 。 視覺效果強(qiáng)烈,不受版面分欄的約束,

5、設(shè)計(jì)比較隨意,大膽。 適合內(nèi)容較少的情況下選用。四 、網(wǎng)頁色彩設(shè)計(jì) 根據(jù)專業(yè)的研究機(jī)構(gòu)研究表明：彩色的記憶效果是黑白的3.5倍。也就是說，在一般情況下，彩色頁面較完全黑白頁面更加吸引人。 色彩基本知識1、顏色是因?yàn)楣獾恼凵涠a(chǎn)生的。 2、.紅，黃，藍(lán)是三原色，其它的色彩都可以用這三種色彩調(diào)和而成。3、顏色分非彩色和彩色兩類。非彩色是指黑，白，灰系統(tǒng)色。彩色是指除了非彩色以外的所有色彩。 4、明度是指色彩的明暗程度. 純度是色彩的飽和程度 色相是色彩的相貌,指色彩的類別5、任何色彩都有飽和度和透明度的屬性，屬性的變化產(chǎn)生不同的色相，所以至少可以制作幾百萬種色彩。 色彩的象征1、色彩是人的視覺最敏

6、感的東西。主頁的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。2、色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào)，局部對比” 。紅色象征熱情、活潑、熱鬧、革命、溫暖、幸福、吉祥、危險(xiǎn)紅色象征熱情、活潑、熱鬧、革命、溫暖、幸福、吉祥、危險(xiǎn) 橙色象征光明、華麗、興奮、甜蜜、快樂橙色象征光明、華麗、興奮、甜蜜、快樂. 黃色象征明朗、愉快、高貴、希望、發(fā)展、注意黃色象征明朗、愉快、高貴、希望、發(fā)展、注意. 綠色綠色 新鮮、平靜、安逸、和平、柔和、青春、安全、理想新鮮、平靜、安逸、和平、柔和、青春、安全、理想. 藍(lán)色藍(lán)色 深遠(yuǎn)、永恒、沉靜、理智、誠實(shí)、寒冷深遠(yuǎn)、永恒、沉靜、理智、誠實(shí)、寒冷. 紫色紫色 優(yōu)雅、高貴、

7、魅力、自傲、輕率優(yōu)雅、高貴、魅力、自傲、輕率. 白色白色 純潔、純真、樸素、神圣、明快、柔弱、虛無純潔、純真、樸素、神圣、明快、柔弱、虛無. 灰色灰色 謙虛、平凡、沉默、中庸、寂寞、憂郁、消極謙虛、平凡、沉默、中庸、寂寞、憂郁、消極. 黑色黑色 崇高、嚴(yán)肅、剛健、堅(jiān)實(shí)、粗莽、沉默、黑暗、罪惡、恐怖、絕望、死亡崇高、嚴(yán)肅、剛健、堅(jiān)實(shí)、粗莽、沉默、黑暗、罪惡、恐怖、絕望、死亡. 色彩的搭配技巧1、先選定一種色彩，然后調(diào)整透明度或者飽和度 2、用對比色3、用同一個(gè)色系4、用黑色與一種彩色搭配5、顏色控制在四色以內(nèi)五 、網(wǎng)頁整體風(fēng)格 網(wǎng)頁風(fēng)格(style)是抽象的,是指站點(diǎn)的整體形象給瀏覽者的綜合感受。 這個(gè)“整體形象”包括站點(diǎn)的CI（標(biāo)志、色彩、字體、標(biāo)語）、版面布局、瀏覽方式、交互性