網(wǎng)頁(yè)版式布局課程市公開(kāi)課一等獎(jiǎng)百校聯(lián)賽優(yōu)質(zhì)課金獎(jiǎng)名師賽課獲獎(jiǎng)?wù)n件

網(wǎng)頁(yè)版式布局課程1/20什么是網(wǎng)頁(yè)板式布局版式指是瀏覽器看到完整一個(gè)頁(yè)面（能夠包含框架和層）。因?yàn)槊總€(gè)人顯示器分辨率不一樣，所以同一個(gè)頁(yè)面大小可能出現(xiàn)640*480像素,800*600像素,1024*768像素等不一樣尺寸。布局，就是以最適合瀏覽方式將圖片和文字排放在頁(yè)面不一樣位置。2/20網(wǎng)頁(yè)板式布局和布局一.確定草案新建頁(yè)面就象一張白紙，沒(méi)有任何表格，框架和約定俗成東西，你能夠盡可能發(fā)揮你想象力，將你想到"景象"畫上去(我們提議您用一張白紙和一支鉛筆，當(dāng)然用作圖軟件photoshop等也能夠)。這屬于創(chuàng)造階段，不考究細(xì)膩工整，無(wú)須考慮細(xì)節(jié)功效，只以粗陋線條勾畫出創(chuàng)意輪廓即可。盡你可能多畫幾張，最終選定一個(gè)滿意作為繼續(xù)創(chuàng)作腳本，最終選定一個(gè)滿意作為繼續(xù)創(chuàng)作腳本。二.粗略布局在草案基礎(chǔ)上，將你確定需要放置功效模塊安排到頁(yè)面上。(注：功效模塊我們?cè)?首頁(yè)設(shè)計(jì)-引子"中提過(guò)，主要包含網(wǎng)站標(biāo)志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計(jì)數(shù)器,版權(quán)信息等)。注意，這里我們必須遵照突出重點(diǎn)、平衡諧調(diào)標(biāo)準(zhǔn)，將網(wǎng)站標(biāo)志，主菜單等最主要模塊放在最顯眼，最突出位置，然后在考慮次要模塊排放。3/20三.定案將粗略布局精細(xì)化，詳細(xì)化。（靠你智慧和經(jīng)驗(yàn)，旁敲側(cè)擊多方聯(lián)想，才能作出含有創(chuàng)意布局。）在布局過(guò)程中，我們能夠遵照標(biāo)準(zhǔn)有：1、正常平衡---亦稱"勻稱"。多指左右、上下對(duì)照形式，主要強(qiáng)調(diào)秩序，能到達(dá)安定老實(shí)、信賴效果。

2、異常平衡---即非對(duì)照形式，但也要平衡和韻律，當(dāng)然都是不均整，此種布局能到達(dá)強(qiáng)調(diào)性、不安性、高注目性效果。

3、對(duì)比---所謂對(duì)比，不但利用色彩、色調(diào)等技巧來(lái)作表現(xiàn)，在內(nèi)容上也可包括古與今、新與舊、貧與富等對(duì)比。

4、凝視---所謂凝視是利用頁(yè)面中人物視線，使瀏覽者仿照跟隨心理，以到達(dá)注視頁(yè)面效果，普通多用明星凝視狀。

5、空白---空白有兩種作用，首先對(duì)其它網(wǎng)站表示突出卓越，另首先也表示網(wǎng)頁(yè)品位優(yōu)越感，這種表現(xiàn)方法對(duì)體顯網(wǎng)頁(yè)格調(diào)十分有效。

6、盡可能用圖片講解---此法對(duì)不能用語(yǔ)言說(shuō)服、或用語(yǔ)言無(wú)法表示情感，尤其有效。圖片講解內(nèi)容，能夠傳達(dá)給瀏覽者更多心理因4/20以上設(shè)計(jì)標(biāo)準(zhǔn)，即使枯燥，不過(guò)我們假如能領(lǐng)會(huì)并活用到頁(yè)面布局里，效果就大不一樣了。比如，○網(wǎng)頁(yè)白色背景太虛，則能夠加些色快；○版面零碎，能夠用線條和符號(hào)串聯(lián)；○左面文字過(guò)多，右面則能夠插一張圖片保持平衡；○表格太規(guī)矩，能夠改用導(dǎo)角試試?？纯次覀兘?jīng)慣用到版面布局形式：5/201．“國(guó)字”型布局“國(guó)”字型布局由“同”字型布局進(jìn)化而來(lái)，因布局結(jié)構(gòu)與漢字“國(guó)”相同而得名。其頁(yè)面最上部分普通放置網(wǎng)站標(biāo)志和導(dǎo)航欄或Banner廣告，頁(yè)面中間主要放置網(wǎng)站主要內(nèi)容，最下部分普通放置網(wǎng)站版權(quán)信息和聯(lián)絡(luò)方式等。

6/202．T型布局T型布局結(jié)構(gòu)因與英文大寫字母T相同而得名。其頁(yè)面頂部普通放置橫網(wǎng)站標(biāo)志或Banner廣告，下方左側(cè)是導(dǎo)航欄菜單，下方右側(cè)則用于放置網(wǎng)頁(yè)正文等主要內(nèi)容。7/203．標(biāo)題正文型標(biāo)題正文型布局布局結(jié)構(gòu)普通用于顯示文章頁(yè)面、新聞頁(yè)面和一些注冊(cè)頁(yè)面等。

8/204．左右框架型布局左右框架型布局結(jié)構(gòu)是一些大型論壇和企業(yè)經(jīng)常使用一個(gè)布局結(jié)構(gòu)。其布局結(jié)構(gòu)主要分為左右兩側(cè)頁(yè)面。左側(cè)普通主要為導(dǎo)航欄鏈接，右側(cè)則放置網(wǎng)站主要內(nèi)容9/205．上下框架型上下框架型布局與前面左右框架型布局類似。其區(qū)分僅在于是一個(gè)上下分為兩頁(yè)框架。

10/206.綜合框架型綜合框架型布局是結(jié)合左右框架型布局和上下框架型布局頁(yè)面布局技術(shù)

11/207．POP布局POP布局是一個(gè)頗具藝術(shù)感和時(shí)尚感網(wǎng)頁(yè)布局方式。頁(yè)面設(shè)計(jì)通常以一張精美海報(bào)畫面為布局主體。

12/20以上總結(jié)了當(dāng)前網(wǎng)絡(luò)上常見(jiàn)布局，對(duì)于版面布局技巧，這里提供四個(gè)提議：1.加強(qiáng)視覺(jué)效果2.加強(qiáng)文案可視度和可讀性3.統(tǒng)一感視覺(jué)4.新鮮和個(gè)性是布局最高境界13/20網(wǎng)頁(yè)配色技巧網(wǎng)頁(yè)設(shè)計(jì)中色彩應(yīng)用

色彩利用在網(wǎng)頁(yè)中作用真是太主要了，有些網(wǎng)頁(yè)看上去十分典雅、有品位，令人賞心悅目，不過(guò)頁(yè)面結(jié)構(gòu)卻很簡(jiǎn)單、圖象也不復(fù)雜，這主要是色彩利用得當(dāng)，色彩魅力讓人難以抵擋，你是否明白看似簡(jiǎn)單顏色利用中原理以及奧秘呢？這就包括到很多色彩原理知識(shí)，所以我特地將原來(lái)屬于圖象制作內(nèi)色彩作為一個(gè)獨(dú)立攔目來(lái)介紹。１、色彩基本概念

自然界中顏色能夠分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一灰色，而其它全部顏色均屬于彩色。任何一個(gè)彩色含有三個(gè)屬性：

(1)色相(Hue)：也叫色澤，是顏色基本特征，反應(yīng)顏色基本面貌。

(2)飽和度(Saturation)：也叫純度，指顏色純潔程度。

(3)明度(Brightness或Lightness或Luminousity)：也叫亮度，表達(dá)顏色深淺。

非彩色只有明度特征，沒(méi)有色相和飽和度區(qū)分。14/20２、色彩三原色

電腦屏幕色彩是由RGB（紅、綠、藍(lán)）三種色光所合成，而我們可經(jīng)過(guò)調(diào)整這三個(gè)基色就能夠調(diào)校出其它顏色，在許多圖像處理軟件里，都有提供色彩調(diào)配功效，你可輸入三基色數(shù)值來(lái)調(diào)配顏色，也可直接依據(jù)軟件提供調(diào)色板來(lái)選擇顏色。

３、電腦影像色彩

電腦影像色彩是經(jīng)由位元（BIT）計(jì)算和組合而來(lái)，單純黑白圖像是最簡(jiǎn)單色彩結(jié)構(gòu)，在電腦上用到１位元資料，雖說(shuō)只有黑色和白色，但仍能透過(guò)疏密矩陣排列，將黑與白組合成近似視覺(jué)上灰色調(diào)階。

灰階（Grayscale）影像共有256個(gè)階調(diào)，看起來(lái)類似傳統(tǒng)黑白照片；除黑、白二色之外，還有254種深淺灰色，電腦必須以8位元資料，顯示這256種階調(diào)。

全彩（Fullcolor）是指RGB三色光所能顯示全部顏色，每一色光以8位元表示，各有256種階調(diào)，三色光交互增減，就能顯示24BIT1677萬(wàn)色（256*256*256=16,777，216），這個(gè)數(shù)值就是電腦所能表示最高色彩，也就是通稱RGBTureColor。

15/208位元色是指含有256種階調(diào)，或256種色彩影像，而我們?cè)诮?jīng)常見(jiàn)到GIF格式圖象文件就是帶有256種色彩圖象文件。若要把24位元全彩圖片轉(zhuǎn)成256色8位元，通常必須經(jīng)過(guò)索引步驟（Indexed），也就是在原本24位元1677萬(wàn)色中，先建立顏色分布表（histogram），然后再找出最慣用256種顏色，定義出新調(diào)色盤，最終再以新色盤256色取代原圖。

16/2