《HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)教程》課件-8. 第六章 拓展知識(shí)

目錄CONTENTS第一章網(wǎng)頁(yè)設(shè)計(jì)綜述第二章HTML語(yǔ)言第三章CSS第四章JavaScript第五章網(wǎng)頁(yè)設(shè)計(jì)綜合案例第六章拓展知識(shí)06第六章拓展知識(shí)目錄6.1網(wǎng)頁(yè)配色6.2網(wǎng)頁(yè)版式設(shè)計(jì)6.3切片工具6.4案例制作6.1網(wǎng)頁(yè)配色6.1.1色彩概述1.色彩的產(chǎn)生色彩，是在可見(jiàn)光的作用下產(chǎn)生的視覺(jué)現(xiàn)象。是光照射到物體，物體對(duì)光產(chǎn)生吸收或反射，反射的光刺激人眼，并通過(guò)視覺(jué)神經(jīng)傳遞到大腦，最終對(duì)色彩產(chǎn)生感受的過(guò)程。色彩的產(chǎn)生是光照射物體，物體對(duì)光產(chǎn)生吸收或反射，反射的光刺激人眼，并通過(guò)視覺(jué)神經(jīng)傳遞到大腦，最終對(duì)色彩產(chǎn)生感受的過(guò)程。的三原色物的三原色光2.色彩的分類

色光三原色：朱紅光、翠綠光、藍(lán)紫光。

色料三原色：紅（品紅或玫瑰紅）、黃（檸檬黃）藍(lán)（湖藍(lán)）。*不可復(fù)制（1）原色原色，是混合產(chǎn)生各種色彩的最基本的色，是任何色彩無(wú)法調(diào)制出來(lái)的。也稱為一次色。

+++===（2）間色間色，是兩種原色的等量混合。在伊頓的十二色相環(huán)中，間色處于兩種原色之間。間色也稱為二次色。（3）復(fù)色復(fù)色，在間色的基礎(chǔ)上產(chǎn)生，是兩種間色或三原色的適當(dāng)混合。復(fù)色也稱為再間色或三次色。6.1.2色彩的基本特性

1.色相：色相是色彩的最大特征。所謂色相是指色彩的相貌，區(qū)別各種不同色彩的名稱，也就是辯別色彩的差異，指不同波長(zhǎng)的光給人的不同的色彩感受。具體某一種顏色2.明度（亮度）亮度（Saturation），是色彩的深淺變化。以無(wú)彩色為例，最亮的是白色，最暗的是黑色，以及黑白之間不同程度的灰，都具有明暗強(qiáng)度的表現(xiàn)。3.飽和度（純度）飽和度（Brightness),稱為色彩的鮮艷程度。高純度的色彩視覺(jué)沖擊力要強(qiáng)烈于低純度的色彩。飽和度常用高低來(lái)描述，飽和度越高，色彩越鮮艷，飽和度越低，色越晦澀，越弱。純色是飽和度最高的一級(jí)。

綠色T恤穿綠色T恤的美女和一群人一群人

在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，一般不會(huì)使用單一的一種顏色，而是多種顏色配合使用。也即是網(wǎng)頁(yè)的配色。6.1.3網(wǎng)頁(yè)配色的基本概念（1）概念色相對(duì)比：因色相之間的差別形成的對(duì)比。各色相由于在色環(huán)上的距離遠(yuǎn)近不同，形成不同的色相對(duì)比。1.色相對(duì)比同類色是指色系相同，明度不同的色彩，在24色相環(huán)中指30°或45°范圍內(nèi)的色彩，如黃色與黃綠色。鄰近色是指相鄰的不同色彩。在24色相環(huán)中指60°范圍內(nèi)的色彩，如黃色和綠色。對(duì)比色是指在24色相環(huán)中相差120度以內(nèi)的顏色，比如橙紅和黃綠?；パa(bǔ)色是指在24色相環(huán)中相差180度顏色，比如紅與綠。（2）分類：2.明度對(duì)比(1)概念：明度對(duì)比：將不同明度的色并置產(chǎn)生明暗對(duì)比效果的視覺(jué)效應(yīng)。也就是因?yàn)槊鞫炔顒e而形成的色彩。

(2)分類：明度對(duì)比的強(qiáng)弱決定于色彩明度差別跨度的大小，配色明度在3個(gè)階段以內(nèi)的組合叫短調(diào)，為明度的弱對(duì)比。配色明度在3-5個(gè)階段以內(nèi)的組合叫中調(diào)，為明度的中對(duì)比。明度差在5個(gè)階段以上的組合叫長(zhǎng)調(diào)，為明度的強(qiáng)對(duì)比。短調(diào)，主色和輔色明度接近，整體給人朦朧、輕飄、軟弱，遙遠(yuǎn)的感覺(jué)。

中調(diào)：主色和輔色的明度對(duì)比在3-5階段之內(nèi)，中調(diào)畫面感覺(jué)豐富、穩(wěn)定，有朝氣蓬勃的意境。

長(zhǎng)調(diào)：主色和輔色的明度對(duì)比大，明度差在5個(gè)階段之外。給人畫面對(duì)比強(qiáng)烈、清晰、肯定、醒目的感覺(jué)。5.純度對(duì)比(1)概念：

因色彩純度的差異而形成的色彩鮮濁對(duì)比稱之為純度對(duì)比。這種對(duì)比可以是同一種色相純度鮮濁對(duì)比，也可以是不同色相間的純度對(duì)比。色彩純度差別的大小決定對(duì)比的強(qiáng)弱。

鮮調(diào)：占主體的色和其他色相均屬高純度色。色彩飽和，艷麗。有積極、強(qiáng)烈、沖動(dòng)、快樂(lè)、活潑的性格意味。(2)分類：中調(diào)：主體色和其他色相均屬中純度色，也稱之為中調(diào)，溫和，典雅，調(diào)和，渾厚。有穩(wěn)定、文雅、可靠、中庸的性格意味；

濁調(diào)：畫面中占主體的色和其他色均屬低純度色，也稱之為灰調(diào)（或者濁調(diào)），色彩含蓄，淡雅。有平淡、自然、簡(jiǎn)樸、消極、陳舊的性格意味。6.冷暖對(duì)比(1)概念因色彩感覺(jué)的冷暖差別而形成的對(duì)比。冷暖感覺(jué)本是觸覺(jué)對(duì)外界的反映，色彩的冷暖主要來(lái)自人的生理和心理感受。

冷暖對(duì)比色在色環(huán)上的兩端，冷極色藍(lán)、暖極色橙，紅、黃為暖色，紅紫、黃綠為中性微暖色，青紫、藍(lán)綠為中性微冷色。

(2)分類暖色，暖色易產(chǎn)牛緊張、激動(dòng)、興奮等情緒，并具有積極、熱情、活力、外向特征；以暖色為主課構(gòu)成暖色基調(diào)，暖色調(diào)給人的感覺(jué)希望、熱情、喜慶、濃郁、陽(yáng)光感、迫近感。冷色，冷色具有寒冷、沉著、寂寞、深遠(yuǎn)、理智、消極、冷靜、清爽、內(nèi)向的特點(diǎn)。以冷色為主可以構(gòu)成冷色基調(diào)，冷色基調(diào)給人的感覺(jué)寒冷、清爽、理智、流動(dòng)感、空間感等。

冷暖對(duì)比，冷暖對(duì)比能強(qiáng)有力的烘托主題氣氛：我們常常在冷調(diào)或暖調(diào)的畫面中施以小面積的暖調(diào)或冷調(diào)，使畫面形成冷暖的對(duì)比。7.面積對(duì)比(1)概念指各種色彩在畫面中所占的面積比例變化和差別引起的色相、明度、純度、冷暖等方面的對(duì)比。色彩的面積的大小對(duì)色彩對(duì)比的影響力最大（2）分類

相同色彩的面積對(duì)比：面積相同，對(duì)比效果弱

相同色彩的面積對(duì)比：

面積差別越大，對(duì)比效果越強(qiáng)

不同色彩的面積對(duì)比：

兩色面積相差不多，對(duì)比相對(duì)強(qiáng)烈

不同色彩的面積對(duì)比：

面積差別越大，對(duì)比效果越弱，大面積會(huì)對(duì)面積較小的起到烘托或者融合的作用。6.1.4網(wǎng)頁(yè)配色技巧1.確定主色即由某一種色相支配、統(tǒng)一畫面的配色，如果不是同一種色相，色環(huán)上相鄰的類似色也可以形成相近的配色效果。即使出現(xiàn)多種色相，只要保持色調(diào)一致，畫面也能呈現(xiàn)整體統(tǒng)一性。確定網(wǎng)站的主題色時(shí)要考慮這樣幾個(gè)因素：一是網(wǎng)站的主題，二是色彩的象征意義，三是網(wǎng)站受眾群體的的職業(yè)、年齡、社會(huì)角色等。紅色熱情強(qiáng)烈渾厚綠色生機(jī)勃勃春意怏然空曠寧?kù)o藍(lán)色安靜清冷孤寂紫色虛幻迷離孤僻（1）同色系搭配

確定一種網(wǎng)頁(yè)主色后，調(diào)整他的亮度和飽和度，產(chǎn)生一種新的顏色。放置于網(wǎng)頁(yè)的不同位置。這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，又不乏層次感。2.用主要配色方法配置主輔色（2）鄰近色搭配

鄰近色就是在色相環(huán)上距離比較相近的顏色，如紅色與橙色、藍(lán)色與綠色、藍(lán)色與紫色、紫色與紅色。這種頁(yè)面總體感覺(jué)和諧、安詳、耐看。（3）對(duì)比色相構(gòu)成對(duì)比色相對(duì)比，120度左右的兩色強(qiáng)對(duì)比.

確定網(wǎng)頁(yè)主題色后，選擇他的對(duì)比色并調(diào)整一下其明度和純度作為輔助色，放置于網(wǎng)頁(yè)中，和諧的對(duì)比色網(wǎng)頁(yè)，色彩對(duì)比強(qiáng)烈、鮮明、飽滿、華麗、活躍。（4）互補(bǔ)色相構(gòu)成互補(bǔ)色相對(duì)比，180度左右的兩色對(duì)比為最強(qiáng)色相對(duì)比。紅與綠、黃與紫、藍(lán)與紫。

確定網(wǎng)頁(yè)主題色后，選擇他的互補(bǔ)色并調(diào)整一下其明度和純度作為輔助色，放置于網(wǎng)頁(yè)中，和諧的互補(bǔ)色搭配頁(yè)面會(huì)產(chǎn)生與眾不同的強(qiáng)烈效果。（5）使用黑、白、灰與有彩色搭配

黑、白、灰的無(wú)彩色系有著千萬(wàn)種變化，它們能與任何色彩搭配，并把與之搭配的有彩色配出更鮮艷的效果。3.點(diǎn)綴點(diǎn)睛色在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，一般使用點(diǎn)睛色來(lái)突出強(qiáng)調(diào)畫面主要內(nèi)容，所以，點(diǎn)睛色一般采用為對(duì)比色和互補(bǔ)色6.1.5.網(wǎng)頁(yè)色彩搭配的原則:1.色彩的鮮明性：網(wǎng)頁(yè)的色彩要鮮艷，才能引人注目。

2.色彩的獨(dú)特性：要有與眾不同的色彩，使得大家對(duì)網(wǎng)頁(yè)的印象強(qiáng)烈。3.色彩的合適性：色彩和你表達(dá)的內(nèi)容氣氛相適合，如用粉色體現(xiàn)女性站點(diǎn)的柔性。

4.黑白灰的使用：黑色白色灰色是萬(wàn)能色，他們可以與任何一種顏色搭配。當(dāng)兩種顏色對(duì)比強(qiáng)烈或較弱時(shí)，都可以加入無(wú)彩色系進(jìn)行調(diào)和。5.畫面留白：網(wǎng)頁(yè)配色時(shí)不易將畫面設(shè)計(jì)的過(guò)滿，適當(dāng)?shù)牧舭卓梢越o用戶留下遐想的空間，讓人感覺(jué)輕松、愉悅。

網(wǎng)頁(yè)版式設(shè)計(jì)的概念:在網(wǎng)頁(yè)設(shè)計(jì)中根據(jù)特定的主題和內(nèi)容，把文字、圖形圖像、動(dòng)畫、視頻、色彩等信息傳達(dá)要素界定在一個(gè)范圍內(nèi)，有機(jī)的、秩序的、藝術(shù)性的組織在一起，形成協(xié)調(diào)、美觀、有特點(diǎn)的頁(yè)面。6.2網(wǎng)頁(yè)版式設(shè)計(jì)網(wǎng)頁(yè)布局的主要功能：一是輔助實(shí)現(xiàn)頁(yè)面功能，一個(gè)成功的布局必須能夠有效的將圖片、文字、動(dòng)畫、鏈接等有效的集成到網(wǎng)頁(yè)中；二是提供舒適的用戶體驗(yàn)，風(fēng)格統(tǒng)一的網(wǎng)站將更易于用戶的理解，帶來(lái)更好的可用性；三是提升公司的形象，精美的布局不僅能使作品美觀，易于欣賞，更能鮮明的反映和升華公司的形象。因?yàn)榫W(wǎng)頁(yè)整體設(shè)計(jì)是公司文化和理念的一個(gè)體現(xiàn)。網(wǎng)站的基本元素是網(wǎng)頁(yè)，一個(gè)個(gè)頁(yè)面構(gòu)成了一個(gè)完整的網(wǎng)站，網(wǎng)頁(yè)基本元素概括為是文字、圖片、多媒體等。細(xì)分主要包括：圖標(biāo)、網(wǎng)站banner、主體內(nèi)容、功能區(qū)、導(dǎo)航區(qū)、廣告欄、版權(quán)區(qū)等。這些元素在網(wǎng)頁(yè)的位置安排，就是網(wǎng)頁(yè)的整體布局。6.2.1網(wǎng)頁(yè)元素的組成網(wǎng)頁(yè)的版面設(shè)計(jì)主要包含網(wǎng)頁(yè)元素造型、版式形式及版式構(gòu)成這幾方面。6.2.2網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)成要素1、點(diǎn)的作用

點(diǎn)是造型的基本要素，也是構(gòu)成中最簡(jiǎn)潔的形態(tài)。點(diǎn)在頁(yè)面中可以是一段文字、一張圖片或一個(gè)按鈕圖標(biāo)等。點(diǎn)具有視覺(jué)集中的屬性，具有強(qiáng)烈的視覺(jué)吸引力。所以可利用點(diǎn)的這一特性強(qiáng)調(diào)將要重點(diǎn)表現(xiàn)的對(duì)象。當(dāng)點(diǎn)的大小不同時(shí)，人們會(huì)在視覺(jué)上注意大的點(diǎn)，然后逐漸向較小的點(diǎn)移動(dòng)。隨著點(diǎn)的增加，人們的注意力會(huì)逐漸的分散。在這個(gè)頁(yè)面中，三個(gè)顏色的產(chǎn)品造型是三個(gè)點(diǎn)，并置的三個(gè)不同的色彩強(qiáng)烈的吸引了瀏覽者的目光，起到了強(qiáng)調(diào)的突出的作用?？煽诳蓸?lè)的頁(yè)面設(shè)計(jì)也采用了點(diǎn)的造型，瀏覽者首先被大點(diǎn)也就是紅色的標(biāo)志的吸引，然后移動(dòng)到小點(diǎn)——泡上，本設(shè)計(jì)通過(guò)引導(dǎo)瀏覽者的目光成功的宣傳了公司的標(biāo)志和產(chǎn)品。2、線構(gòu)成

線在頁(yè)面中既是一個(gè)造型元素，也是分割畫面的主要工具。線，分為直線和曲線。直線：給人以速度，明確而銳利的感覺(jué)，具有男性感。曲線，則優(yōu)美輕快，富于旋律，表現(xiàn)女性的柔美。這個(gè)頁(yè)面中的曲線和直線相結(jié)合的造型，增加了畫面的趣味性，也起到分割畫面的作用。這個(gè)頁(yè)面構(gòu)成中主要以直線造型為主，這個(gè)折線式造型即與畫面中的花造型呼應(yīng)，又分割了畫面，引導(dǎo)了瀏覽者的視線過(guò)渡到導(dǎo)航區(qū)。面不僅是造型元素，同時(shí)還是劃分空間的有力武器。由線和面形成的對(duì)空間的分割與遮擋使空間的層次得以延伸，形成距離美感。

一張普通的圖片經(jīng)線、面分割后，形成了色調(diào)、面積等方面的對(duì)比關(guān)系，使畫面的層次分明，突出了中心內(nèi)容。3、面構(gòu)成

這個(gè)頁(yè)面主要使用了面的構(gòu)成形式，通過(guò)面的分割，劃分為不同的功能區(qū)域，同時(shí)又形成了不同的色調(diào)，豐富了畫面的層次。4、留白的運(yùn)用

所謂“留白”，就是除文字、圖片、圖案等信息要素以外的空白空間?！傲舭住迸c其它元素一樣具有大小、形狀等特征，它與其它元素的關(guān)系就是“圖”與“底”的關(guān)系，是相互依存、相互襯托的。

在網(wǎng)頁(yè)設(shè)計(jì)中，“無(wú)意”的留白應(yīng)與“有意”的造型同樣引起足夠的重視，因?yàn)椤盁o(wú)意”的留白空間有時(shí)給人的視覺(jué)沖擊會(huì)高于其它的元素所帶來(lái)的效果。

點(diǎn)、線、面的區(qū)分并不是絕對(duì)的，孤立的文字與小的圖片，在頁(yè)面中往往被視為頁(yè)面中的點(diǎn)。按一定方向、秩序排列的字與圖片會(huì)形成視覺(jué)上的線，它一般起到引導(dǎo)和分割畫面的作用。大段的文字和圖片又會(huì)形成面，起到突出主題和襯托的作用。在這個(gè)頁(yè)面中，單獨(dú)的字被認(rèn)為是頁(yè)面中的點(diǎn)，畫面左側(cè)按秩序排列的文字形成了線的感覺(jué)，起到分割畫面的作用，頁(yè)面中間大段的文字又形成了面的感覺(jué)。6.2.3網(wǎng)頁(yè)版式設(shè)計(jì)的布局分類

網(wǎng)頁(yè)設(shè)計(jì)不是把所有內(nèi)容放到網(wǎng)頁(yè)中就行了，還需要把網(wǎng)頁(yè)內(nèi)容進(jìn)行合理的排版布局，以給瀏覽者賞心悅目的感覺(jué)，增強(qiáng)網(wǎng)站的吸引力。網(wǎng)頁(yè)版式的基本類型主要有骨骼型、曲線型、傾斜型、背景式、發(fā)射型、突破型等多種。

1、水平式構(gòu)圖

水平式構(gòu)圖也叫做橫板構(gòu)圖，就是把畫面水平地分成幾部分，分別放入圖片或文字內(nèi)容。這種構(gòu)圖給人的感覺(jué)比較穩(wěn)重、開闊、舒展、自由，適合各種不同類型的網(wǎng)頁(yè)設(shè)計(jì)。分割后的畫面應(yīng)體現(xiàn)主次關(guān)系，并盡量突出主題，注意不要使分割顯得過(guò)于生硬呆板，圖形要生動(dòng)活潑、具有動(dòng)感。有時(shí)可以通過(guò)一些圖形或文字的跨越打破界限，也可以協(xié)調(diào)各區(qū)域色彩而使之調(diào)和，或處理分割區(qū)域的邊緣以達(dá)到融合的目的。如這個(gè)橫板構(gòu)圖的頁(yè)面設(shè)計(jì)，采用了跨界的花朵造型打破界限，避免了橫板構(gòu)圖容易形成的生硬呆板的感覺(jué)。同時(shí)不同的橫板區(qū)域采用了不同的色彩，以突出重點(diǎn)。2、垂直式構(gòu)圖純粹的垂直式分割構(gòu)圖在網(wǎng)頁(yè)中出現(xiàn)不算多，一般都是橫板與豎版混合使用。由于網(wǎng)頁(yè)內(nèi)容多于瀏覽器窗口，我們習(xí)慣縱向滾動(dòng)窗口，這樣，左右分割的畫面看起來(lái)似乎比橫向分割的畫面來(lái)得舒服一些。垂直式構(gòu)圖會(huì)給人以嚴(yán)肅、莊重、崇高、向上的感覺(jué)，這種版式的網(wǎng)頁(yè)設(shè)計(jì)往往對(duì)比感強(qiáng)，結(jié)構(gòu)清晰，但變化較少，有時(shí)也不夠靈活。如圖頁(yè)面設(shè)計(jì)采用了三欄的垂直式構(gòu)圖方式，結(jié)構(gòu)清晰，同時(shí)為了更加靈活，每欄的采用了不同的構(gòu)成方式。3、棋盤式構(gòu)圖通過(guò)水平和垂直分割，把畫面分成多個(gè)大小相近的區(qū)域，像棋盤的格子，分別放置圖片和文字內(nèi)容。這種構(gòu)圖形式活潑、隨意而不失規(guī)范化；頁(yè)面感覺(jué)內(nèi)容豐富、飽滿，具有趣味。但是網(wǎng)頁(yè)設(shè)計(jì)若選用這種構(gòu)圖容易分散人的注意力，不易表現(xiàn)比較嚴(yán)肅的主題，也不適合文字內(nèi)容多的頁(yè)面。設(shè)計(jì)時(shí)還需注意盡量從色調(diào)上統(tǒng)一畫面，不要顯得過(guò)于散亂。如這個(gè)頁(yè)面設(shè)計(jì)，采用棋盤式構(gòu)圖，比較靈活，內(nèi)容豐富，同時(shí)它采用了同類色的配色方法，使畫面協(xié)調(diào)統(tǒng)一4、傾斜式構(gòu)圖傾斜式構(gòu)圖是網(wǎng)頁(yè)設(shè)計(jì)中出現(xiàn)不多的一種版式，主要是因?yàn)榧炔槐阌谥谱饕膊槐阌跒g覽，雖然這種版式會(huì)給人以強(qiáng)大的視覺(jué)沖擊力，但他在網(wǎng)頁(yè)中的應(yīng)用明顯要少于在其它媒體上的應(yīng)用。傾斜式的版式具有不穩(wěn)定和運(yùn)動(dòng)感，對(duì)比強(qiáng)烈、刺激。雖然不便于與文字內(nèi)容結(jié)合，但是作為網(wǎng)站首頁(yè)或是局部使用還是值得嘗試的。傾斜式版式適用于運(yùn)動(dòng)、時(shí)尚、娛樂(lè)等表現(xiàn)速度、前衛(wèi)的網(wǎng)站。5、曲線形圖片、文字在頁(yè)面上作曲線的分割或編排構(gòu)成，使畫面產(chǎn)生自然流暢、豐富多彩的視覺(jué)效果。如這個(gè)咖啡館的網(wǎng)頁(yè)設(shè)計(jì)，采用曲線造型為主，讓人聯(lián)想到咖啡的絲滑順暢。6、背景式構(gòu)圖以一張圖片作為網(wǎng)頁(yè)的背景，圖形、標(biāo)題、文字等其他元素皆置于其上。背景式構(gòu)圖會(huì)給人以非常整體自然的感覺(jué)，創(chuàng)作也十分自由，一些視覺(jué)效果和無(wú)須變化的元素都可以制作在背景里。背景式構(gòu)圖的頁(yè)面風(fēng)格主要由背景圖來(lái)控制，在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候就必須計(jì)劃好背景中圖形與頁(yè)面其它元素之間的排列關(guān)系，做到相互配合，有主有次，前后呼應(yīng)，渾然一體。背景圖色調(diào)要柔和并留有變化頁(yè)面內(nèi)容的余地，切不可過(guò)于繁亂、細(xì)碎，喧賓奪主，尤其注意文字部分的背景要整體且能突出文字，且不能影響內(nèi)容的可讀性。如這個(gè)頁(yè)面設(shè)計(jì)，采用背景式構(gòu)圖，背景圖案的色色調(diào)與頁(yè)面主色調(diào)一致，頁(yè)面協(xié)調(diào)統(tǒng)一，頁(yè)面主體部分采用白色背景，突出文字，不能影響內(nèi)容的可讀性。7、中心式構(gòu)圖主體部分圖形置于頁(yè)面中心，進(jìn)而吸引瀏覽者的視線以起到突出頁(yè)面主體的作用；頁(yè)面背景和其他部分比較簡(jiǎn)潔、單一、具有個(gè)性風(fēng)格的特點(diǎn)。如這個(gè)頁(yè)面設(shè)計(jì)，將產(chǎn)品造型與后面的圖案巧妙地結(jié)合在一起放置在頁(yè)面中心位置，鮮艷的色彩，生動(dòng)的造型一下吸引了瀏覽者的目光，同時(shí)單一的背景顏色，起到了突出主題的作用。8、散點(diǎn)式構(gòu)圖與棋盤式構(gòu)圖有相似之處，不過(guò)更加隨意，沒(méi)有規(guī)律。散點(diǎn)式構(gòu)圖如同散文寫作的“形散而神不散”，看似零散的畫面，實(shí)際上需要精密構(gòu)思。頁(yè)面上的所有元素都不應(yīng)是可有可無(wú)的，而是為同一個(gè)目的的服務(wù)，更深刻地表現(xiàn)網(wǎng)站主題。頁(yè)面中的每一個(gè)色塊，看似不經(jīng)意，其實(shí)都是經(jīng)過(guò)設(shè)計(jì)者深思熟慮的，色塊的大小組合，使畫面達(dá)到了均衡而不呆板，不同色彩的搭配，既達(dá)到了和諧又富有變化。9、發(fā)射式構(gòu)圖發(fā)射式構(gòu)圖可以分為相信發(fā)射和離心發(fā)射兩種。在空間中以一個(gè)點(diǎn)或幾個(gè)點(diǎn)為中心，其它元素作向心或離心狀排列，這種構(gòu)圖式稱為發(fā)射式構(gòu)圖。所以具有明顯的節(jié)奏感和空間感。而且由于其特殊的構(gòu)成方式使發(fā)射中心自然稱為畫面焦點(diǎn)，并成為瀏覽者的視覺(jué)中心。雖然發(fā)射式構(gòu)圖具有較強(qiáng)的視覺(jué)吸引力，但由于制作復(fù)雜也不易與內(nèi)容結(jié)合，所以在網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用較少。如這個(gè)頁(yè)面，采用了發(fā)射式構(gòu)圖，使企業(yè)的主題形象成為畫面的焦點(diǎn)，同時(shí)1234的造型增強(qiáng)了頁(yè)面的節(jié)奏感10、框架結(jié)構(gòu)頁(yè)面設(shè)計(jì)除了規(guī)則的構(gòu)圖形式外有時(shí)會(huì)采用不規(guī)則的幾何圖形形成頁(yè)面的框架，承載頁(yè)面內(nèi)容。這些圖形合理的搭配和有效的穿插，能使頁(yè)面除了信息傳達(dá)外，更具層次感和美感。如這個(gè)頁(yè)面設(shè)計(jì)，通過(guò)統(tǒng)一的色調(diào)，將不規(guī)則的造型轉(zhuǎn)化為頁(yè)面的框架，支撐起整個(gè)頁(yè)面。使單一的豎版構(gòu)圖更富有變化和層次感。11.突破在頁(yè)面設(shè)計(jì)過(guò)程中，有時(shí)為使頁(yè)面更加生動(dòng)有趣，會(huì)將素材破格而出，起到畫龍點(diǎn)睛的作用。如這個(gè)頁(yè)面中的重復(fù)的滑雪者和眼鏡造型，破格的造型使瀏覽者眼前一亮，同時(shí)作為頁(yè)面的元素，使頁(yè)面結(jié)構(gòu)更加的穩(wěn)固。這個(gè)頁(yè)面的素材和主體框架的結(jié)合很巧妙，破框而出的噴濺牛奶和靜態(tài)的巧克力、杯子的動(dòng)靜結(jié)合于頁(yè)面頭部，使得整個(gè)頁(yè)面主次清晰而又連貫。網(wǎng)頁(yè)設(shè)計(jì)完成后，需要將設(shè)計(jì)的圖應(yīng)用到網(wǎng)頁(yè)中，一般的網(wǎng)站，對(duì)上傳的圖片都有大小的要求。如果文件太大，網(wǎng)頁(yè)加載的時(shí)間就會(huì)變長(zhǎng)。Photoshop中的切片工具可以把圖像切成幾個(gè)小圖，并將其保存為Web所用格式。在網(wǎng)頁(yè)中使用時(shí)，圖像通過(guò)HTML或CSS在瀏覽器中重新組合以便達(dá)到一個(gè)平滑流暢的效果。6.3切片工具6.3.1切片的屬性設(shè)置切片按照其內(nèi)容類型（表格、圖像、無(wú)圖像）以及創(chuàng)建方式（用戶、基于圖層、自動(dòng)）可分為好多種。使用“切片工具”創(chuàng)建的切片稱作用戶切片；通過(guò)圖層創(chuàng)建的切片稱作基于圖層的切片。

“樣式”選項(xiàng)，此選項(xiàng)用以選擇切片的樣式，包括“正?！?、“固定長(zhǎng)寬比”和“固定大小”三個(gè)選項(xiàng)。“正?！保弘S意切片，切片的大小和位置取決于在圖像中所畫的切片框開始和結(jié)束的位置。“固定長(zhǎng)寬比”：設(shè)置高度和寬度數(shù)值，切片框按照這個(gè)長(zhǎng)寬比進(jìn)行創(chuàng)建?！肮潭ù笮　保汗潭ㄔO(shè)置長(zhǎng)和寬的大小。切片的“高度”和“寬度”選項(xiàng)，當(dāng)選擇“固定長(zhǎng)寬比”或“固定大小”的切片樣式選項(xiàng)時(shí)，可在此選項(xiàng)處輸入寬度和高度的數(shù)值。“基于參考線的切片”選項(xiàng)，在有參考線的情況下，選擇此選項(xiàng)，切片會(huì)基于參考線進(jìn)行創(chuàng)建。6.3.2切片工具的使用1.在Photoshop中打開設(shè)計(jì)圖，2.規(guī)劃一下網(wǎng)頁(yè)布局，本頁(yè)面為橫向版面構(gòu)圖，共分為五欄。了解網(wǎng)頁(yè)最后要呈現(xiàn)的效果。如本網(wǎng)頁(yè)菜單要呈現(xiàn)鼠標(biāo)經(jīng)過(guò)圖像和校友風(fēng)采要實(shí)現(xiàn)flash動(dòng)畫展示效果。其他實(shí)現(xiàn)圖片和文字的展現(xiàn)效果。Logo菜單風(fēng)景圖片風(fēng)景圖片新聞校友會(huì)

校友活動(dòng)校友風(fēng)采版權(quán)

3.在Photoshop中工具欄中選擇切片工具。4.將網(wǎng)頁(yè)中的文字圖層隱藏，（因要切割背景圖片）在新加坡校友會(huì)設(shè)計(jì)圖中拖拉切片工具。參照網(wǎng)頁(yè)布局圖來(lái)切圖，切完會(huì)有1234類似的數(shù)字，保存時(shí)會(huì)按照此順序分成一張張圖片。5.如果在切圖時(shí)出現(xiàn)錯(cuò)位等現(xiàn)象，可選擇工具欄中的“切片選擇工具”，選中有問(wèn)題的切片，拖動(dòng)錨點(diǎn)進(jìn)行變形，達(dá)到與其他切片對(duì)齊。

6.調(diào)整好后，打開“文件”菜單，選擇“保存為web所用格式”。7.彈出存儲(chǔ)為web所用格式面板，用左側(cè)工具欄中的“切片選擇工具”將要導(dǎo)出的切片選中。（按著鍵盤上的“shift”鍵，可連續(xù)選擇切片。）在右側(cè)的面板中，進(jìn)行切片屬性的設(shè)置，一般設(shè)置圖片格式為“jpeg”格式，“品質(zhì)”選擇“非常高”，設(shè)置完成后，選擇下方的“存儲(chǔ)按鈕”。8.保存后，彈出“存儲(chǔ)”面板，選擇合適的路徑進(jìn)行保存，“文件名”為英文或數(shù)字，盡量不要用中文進(jìn)行命名，以免網(wǎng)頁(yè)不能解析?！案袷健边x項(xiàng)：有三個(gè)選項(xiàng)，分別是HTML和圖像,僅限圖像和僅限HTML。一般境況下，選擇“僅限圖像”就可。“設(shè)置”選項(xiàng)：背景圖像，默認(rèn)設(shè)置，XHTML和其他。一般選擇“默認(rèn)設(shè)置”。“切片”選項(xiàng)：所有切片，所有用戶切片和選中切片。因本案例只需導(dǎo)出部分切片，所以選擇“選中的切片”。完成設(shè)置后,選擇想要保存文件的文件夾，并單擊保存按鈕。這時(shí)會(huì)自動(dòng)創(chuàng)建“images”圖像文件夾，并將所有選中的切片文件存儲(chǔ)其中。9,因本網(wǎng)頁(yè)菜單要制作鼠標(biāo)經(jīng)過(guò)圖像效果，故需對(duì)菜單部分的鼠標(biāo)經(jīng)過(guò)后效果進(jìn)行切圖。在photoshop中對(duì)菜單文字進(jìn)行調(diào)整，調(diào)整完畢后，打開“文件”菜單，選擇“保存為web所用格式”。打開對(duì)話框，選擇“切片選擇工具”，只選擇菜單部分切片，調(diào)整屬性數(shù)值后點(diǎn)擊保存。10.彈出存儲(chǔ)對(duì)話框，將文件名改為“index2”，其他選項(xiàng)不變，存儲(chǔ)路徑不變，單擊保存。11.至此，所有制作網(wǎng)頁(yè)所需的圖片都保存在指定路徑的“images”文件夾下了。6.4案例制作：本源食品有限公司網(wǎng)站頁(yè)面設(shè)計(jì)制作網(wǎng)站是企業(yè)向?yàn)g覽者傳遞其產(chǎn)品、服務(wù)、理念、文化等信息的平臺(tái)。網(wǎng)頁(yè)設(shè)計(jì)是網(wǎng)站制作的一個(gè)重要環(huán)節(jié)。是通過(guò)使用更合理的顏色、字體、圖片、樣式進(jìn)行頁(yè)面設(shè)計(jì)美化，在功能限定的情況下，盡可能給予用戶完美的視覺(jué)體驗(yàn)。精美的網(wǎng)頁(yè)設(shè)計(jì)，對(duì)于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。網(wǎng)頁(yè)設(shè)計(jì)一般分為三種大類：功能型網(wǎng)頁(yè)設(shè)計(jì)（服務(wù)網(wǎng)站&B/S軟件用戶端）、形象型網(wǎng)頁(yè)設(shè)計(jì)（品牌形象網(wǎng)站）、信息型網(wǎng)頁(yè)設(shè)計(jì)（門戶網(wǎng)站）。設(shè)計(jì)網(wǎng)頁(yè)的目的不同，應(yīng)選擇不同的網(wǎng)頁(yè)策劃與設(shè)計(jì)方案。本源食品有限公司是一家以生產(chǎn)和銷售生態(tài)食品為主的公司。環(huán)保、綠色、健康是公司的主旨。在明確公司理念及企業(yè)文化的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計(jì)方案。對(duì)網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。6.4.1.網(wǎng)站定位

確定了網(wǎng)站的定位以后，我們就要開始著手準(zhǔn)備資料了。資料主要分為三方面，一是網(wǎng)站所需要展示的內(nèi)容（產(chǎn)品、案例、服務(wù)項(xiàng)目、公司介紹等）以及網(wǎng)站所需的一些推廣圖片等；二是公司的理念、標(biāo)志、標(biāo)準(zhǔn)色等CI設(shè)計(jì)的內(nèi)容；這些資料主要是協(xié)助定位網(wǎng)頁(yè)設(shè)計(jì)的風(fēng)格的。三是相關(guān)網(wǎng)站的案例等。也就是同類公司的網(wǎng)頁(yè)設(shè)計(jì)，了解同行業(yè)的設(shè)計(jì)風(fēng)格，做到知己知彼，才可以脫穎而出。資料的收集需要圍繞著主題來(lái)看，想要讓自己的網(wǎng)站內(nèi)容更加的豐富，能夠吸引用戶，就需要盡量多的進(jìn)行資料的收集和整理，在收集資料過(guò)程中也會(huì)激發(fā)自己的設(shè)計(jì)靈感。搜集的資料越豐富，在頁(yè)面設(shè)計(jì)時(shí)會(huì)更得心應(yīng)手。6.4.2搜集資料6.4.3網(wǎng)站規(guī)劃網(wǎng)站規(guī)劃包括的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，只有在