1、網(wǎng)頁美工設(shè)計(jì)教案網(wǎng)頁美工設(shè)計(jì)1.1 平面構(gòu)成概述 平面構(gòu)成是設(shè)計(jì)的基礎(chǔ)，平面構(gòu)成主要是研究在二維空間內(nèi)基本形態(tài)的創(chuàng)造和畫面的構(gòu)成方式，是在二維的平面空間里按照一定的主題要求，方法原理，對設(shè)計(jì)元素進(jìn)行各種視覺信息形式的設(shè)計(jì)與組成，使組成效果具有較強(qiáng)烈的視覺信息和美感的創(chuàng)造活動(dòng)。構(gòu)成是一個(gè)近代造型概念，其含義是指將不同或相同形態(tài)的幾個(gè)以上的單元重新組合成為一個(gè)新的單元，構(gòu)成對象的主要形態(tài)，包括自然形態(tài)、幾何形態(tài)和抽象形態(tài)。并賦予其視覺化的、力學(xué)化的觀念。平面構(gòu)成探討的是二度空間的視覺文法。其構(gòu)成形式主要有重復(fù)、近似、漸變、變異、對比、集結(jié)、發(fā)射、特異、空間與矛盾空間、分割、肌理及錯(cuò)視等等。 平面構(gòu)

2、成設(shè)計(jì)的元素概念元素：點(diǎn)、線、面、體。視覺元素：將概念元素體現(xiàn)在實(shí)際設(shè)計(jì)中，包括大小、形狀、色彩、肌理等。關(guān)系元素：把視覺元素在畫面上進(jìn)行組織、排列，形成一個(gè)畫面的依據(jù)完成視覺傳達(dá)的目的。包括方向、位置、空間、重心等。 實(shí)用元素：是指設(shè)計(jì)所表達(dá)的內(nèi)容、目的和功能。 平面構(gòu)成的形式美（1）總法則:變化統(tǒng)一 （2）對比與調(diào)和 （3）對稱與均衡 （4）節(jié)奏與韻律 平面構(gòu)成的骨骼及基本形式任何一幅構(gòu)成作品，都是按照一定的規(guī)律將基本形組合起來的，這種管轄編排形象的方式稱為骨骼。在基本形的組合中，排列和組合往往都需要框架，這個(gè)框架就稱為骨骼?；拘魏凸趋赖年P(guān)系就是骨與肉的關(guān)系，極為重要。骨骼的樣式分為規(guī)律

3、性骨骼和非規(guī)律性骨骼。規(guī)律性包括重復(fù)、近似、漸變、發(fā)射、特異等，具有很強(qiáng)的規(guī)律性。非規(guī)律性包括密集、對比、節(jié)奏、韻律、分割、肌理、空間等。 1.2 網(wǎng)頁中的平面構(gòu)成網(wǎng)頁設(shè)計(jì)中的平面構(gòu)成 網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺。通俗的說，您的網(wǎng)站就是由網(wǎng)頁組成的。網(wǎng)頁（Web page）是一個(gè)文件，他存放在世界某個(gè)角落的某一部計(jì)算機(jī)中，而這部計(jì)算機(jī)必須是與互聯(lián)網(wǎng)相連的。網(wǎng)頁經(jīng)由網(wǎng)址（URL）來識別與存取，當(dāng)我們在瀏覽器輸入網(wǎng)址后，經(jīng)過一段復(fù)雜而又快速的程序，網(wǎng)頁文件會(huì)被傳送到你的計(jì)算機(jī)，然后再通過瀏覽器解釋網(wǎng)頁的內(nèi)容，再展示到你的眼前。是萬維網(wǎng)中的一頁，通常是HTML格式（文件擴(kuò)展名

4、為.html或.htm）。網(wǎng)頁通常用圖像檔來提供圖畫。網(wǎng)頁要透過網(wǎng)頁瀏覽器來閱讀。 1.2.2 構(gòu)成設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中的運(yùn)用網(wǎng)頁的視覺傳達(dá)設(shè)計(jì)是指將各要素組合的形式法則及藝術(shù)規(guī)律，對于網(wǎng)頁設(shè)計(jì)來講，其信息內(nèi)容的有效傳達(dá)是通過將各種構(gòu)成要素的設(shè)計(jì)編排來實(shí)現(xiàn)的。它既包括一般構(gòu)成規(guī)律的應(yīng)用，也有其具自身特點(diǎn)的藝術(shù)語言。構(gòu)成設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中的運(yùn)用主要體現(xiàn)在以下幾個(gè)方面：（1）版式設(shè)計(jì) （2）導(dǎo)航設(shè)計(jì) （3）文字的編排與設(shè)計(jì) （4）圖片的編排與設(shè)計(jì) 第二章 網(wǎng)頁的色彩搭配 本章知識重點(diǎn)：1. 色彩構(gòu)成的基本原理2. 網(wǎng)頁配色的原理3. 網(wǎng)頁常用配色分析2.1 色彩構(gòu)成原理 色彩的形成在網(wǎng)頁設(shè)計(jì)中，色彩具有

5、先聲奪人的力量，色彩是網(wǎng)頁設(shè)計(jì)中最直接、最有力的表現(xiàn)形式，既可以表現(xiàn)網(wǎng)站風(fēng)格，樹立網(wǎng)站形象，又給人留下深刻的印象。人們不僅發(fā)現(xiàn)、觀察、創(chuàng)造、欣賞著絢麗繽紛的色彩世界，還通過日久天長的時(shí)代變遷不斷深化對色彩的認(rèn)識和運(yùn)用?！吧适瞧扑榈墓?，太陽光與地球相撞破碎分散，因而使整個(gè)地球形成美麗的色彩?！比祟愖罨镜囊曈X經(jīng)驗(yàn)得出結(jié)論：沒有光就沒有色。白天使人們能看到五色的物體，但在漆黑無光的夜晚就什么也看不見了。倘若有燈光照明，則光照到哪里，便又可看到物像及其色彩了。 色彩的對比 色彩對比指各色彩之間存在的矛盾、對立、差別。色彩誘人魅力，主要在于色彩對比的妙用。色彩對比強(qiáng)烈，視覺刺激力會(huì)很強(qiáng)；色彩對比弱，

6、易產(chǎn)生協(xié)調(diào)的效果；如果沒有對比，會(huì)出現(xiàn)混沌、模糊、乏味的效果。因此色彩對比是網(wǎng)頁配色的必要環(huán)節(jié)與過程。色彩對比通常以色相對比考慮居多（圖2-2 http:/ ），同時(shí)還有色彩的明度對比、純度對比、面積對比等。在網(wǎng)頁配色中，無論是色相對比、明度對比和純度對比，都是基于色彩面積的對比，也就是色彩的比例問題。因?yàn)樯嗜绻麤]有相當(dāng)?shù)拿娣e，就很難感受到其色相。因此，形態(tài)作為視覺色彩的載體，總有其一定的面積，面積是色彩不可缺少的特性。 2.2 網(wǎng)頁配色的原理 2.2.1 色彩的基本知識在千變?nèi)f化的色彩世界中，人們視覺感受到的色彩非常豐富，可分為無彩色系和有彩色系兩大類。有彩色系，包括在可見光譜中的全部色彩

7、，它以紅、橙、黃、綠、藍(lán)、紫等為基本色。無彩色系，指由黑色、白色及黑白兩色相融而成的各種深淺不同的灰色系列。色彩的三屬性包括色相、明度、純度。 色彩的心理感覺心理感受是視覺對色彩的反應(yīng)，隨內(nèi)外環(huán)境而改變。視覺感受色彩的明度及色相的影響，會(huì)產(chǎn)生冷暖、輕重、遠(yuǎn)近、脹縮、動(dòng)靜等不同感受。色彩心理效應(yīng)的產(chǎn)生，色彩產(chǎn)生的視覺效應(yīng)，但卻能影響人們的心理感受，并作用于感情，甚至長時(shí)間影響人們的精神世界。就色彩本質(zhì)而言，色彩本身并沒有任何感情色彩，而是在人們在生活中積累的普遍經(jīng)驗(yàn)的作用下，形成人們對色彩的心理感受，因此，人們的色彩心理感受也成為了表達(dá)色彩特性的另一種語言。（1）不同顏色的心理感受 （2）色彩的

8、冷暖感冬天看到黃色的光，會(huì)有溫暖感，夏天看到藍(lán)色的水會(huì)有涼爽感。冷暖感本身屬于觸感，然而即使不去用手摸而只是用眼睛看也會(huì)感到暖和冷，這是由于生活經(jīng)驗(yàn)積累而產(chǎn)生的。色彩的冷暖感被稱為色性，而冷暖感主要取決于色調(diào)。暖色，如黃色，橙色，紅色，紫色等都屬于暖色系列。 （3）色彩的軟硬感軟硬感與冷暖感類似，色彩的軟硬感與明度有關(guān)系。明度低的色彩給人以堅(jiān)硬、冷漠的感覺。相反，明度高的色彩給人以柔軟、親切的感覺。軟色調(diào)給我們以明快，柔和，親切的感覺。 （4）色彩的輕重感色彩的輕重在不同的領(lǐng)域方面起著不同的作用。例如，工業(yè)、鋼鐵等重工業(yè)領(lǐng)域可以用重一點(diǎn)的色彩；紡織、文化等科學(xué)教育領(lǐng)域可以用輕一點(diǎn)的色彩。（5）

9、色彩的動(dòng)靜感動(dòng)靜感的出現(xiàn)是人們在生活中，喧鬧和安靜的氣氛下產(chǎn)生出的心理感受。色彩的動(dòng)靜感是人的情緒在視覺上的反映。紅、橙、黃色給人以興奮感，青、藍(lán)色給人以沉靜感，而綠和紫屬中性，介乎兩種感覺之間。白和黑及純度高的色給人以緊張感。 網(wǎng)頁設(shè)計(jì)中色彩的基本原則 網(wǎng)頁設(shè)計(jì)要求頁面的新穎、整潔，文字優(yōu)美流暢，瀏覽者在瀏覽網(wǎng)頁時(shí)，留下的第一印象就是頁面的色彩設(shè)計(jì)，色彩可以產(chǎn)生強(qiáng)烈的視覺效果，使頁面更加生動(dòng)，它的好壞直接影響閱讀者的觀賞興趣。因此，網(wǎng)頁的色彩設(shè)計(jì)應(yīng)把握以下幾個(gè)方面：色彩的個(gè)性鮮明性。網(wǎng)頁的色彩設(shè)計(jì)要具有自己獨(dú)特的風(fēng)格，彰顯鮮明的個(gè)性，容易引人注目，使得大家對你的網(wǎng)站印象深刻。色彩的合理性。網(wǎng)

10、頁設(shè)計(jì)的色彩搭配要遵從藝術(shù)設(shè)計(jì)的規(guī)律，同時(shí)，還要考慮人的生理特點(diǎn)，合理的色彩搭配給人一種和諧、愉快的感覺，避免采用大面積純度較高的單一色彩，這樣容易造成視覺疲勞。 2.2.4 色彩均衡網(wǎng)頁設(shè)計(jì)要讓人看上去舒適、協(xié)調(diào)，除了文字，圖片等內(nèi)容的合理排版，色彩的均衡也是相當(dāng)重要的一個(gè)部分。一般網(wǎng)站不可能單一的運(yùn)用一種顏色，所以色彩均衡問題是設(shè)計(jì)者必須要考慮的問題。對稱是一種絕對的平衡，色彩對稱和圖案的對稱形式是一樣的，有左右對稱，回旋對稱，放射對稱等。中規(guī)中矩的色彩對稱作品給人以莊重、大方、穩(wěn)重、嚴(yán)肅、安定、平靜等感覺，但運(yùn)用不當(dāng)也易產(chǎn)生平淡、呆板、單調(diào)、缺少活力等不良印象。 2.3 網(wǎng)頁常用配色分析

11、常用的網(wǎng)頁色彩模式 RGB模式 RGB 模式是所有基于光學(xué)原理的設(shè)備所采用的色彩方式。R代表紅色，G代表綠色，B代表藍(lán)色，是通過對紅(R)、綠(G)、藍(lán)(B)三個(gè)顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB 模式是一種加色模式。RGB圖像雖然只使用三個(gè)顏色通道，但每個(gè)通道有8位的色彩信息（0255的亮度值），可描述的色彩數(shù)目為2563=1678萬種顏色。由于網(wǎng)頁（WEB）是基于計(jì)算機(jī)瀏覽器開發(fā)的媒體，所以顏色以光學(xué)顏色RGB（紅、綠、藍(lán)）為主。RGB模式是網(wǎng)頁設(shè)計(jì)使用比較廣泛的色彩模式。 CMYK模式 CMYK模式與RGB模式相反，該模式是一種減色模式。CMYK代表印刷上

12、用的四種顏色，C代表青色，M代表洋紅色，Y代表黃色，K代表黑色。理論上，純青色(c)、洋紅(M)和黃色(Y)色素能夠合成吸收所有顏色并產(chǎn)生黑色。但在實(shí)際引用中，青色、洋紅色和黃色很難疊加形成真正的黑色，由于這個(gè)原因，這些顏色叫做減色。 Lab模式 Lab顏色模型是在1931年國際照明委員會(huì)(CIE)制定的顏色度量國際標(biāo)準(zhǔn)的基礎(chǔ)上建立的。1976年，這種模型被重新修訂并命名為CIE L。a和b。Lab模式由三個(gè)信道組成，L信道表示亮度，它控制圖片的亮度和對比度，a通道包括的顏色從深綠(低亮度值)到灰色(中亮度值)到亮粉紅色(高亮度值)，b通道包括的顏色從亮藍(lán)色(低亮度值)到灰色到焦黃色(高亮度值

13、)。 HSB模式 這是一種從視覺的角度定義的顏色模式。 網(wǎng)頁色彩搭配的技巧網(wǎng)頁設(shè)計(jì)中的色彩運(yùn)用詮釋在整體風(fēng)格的統(tǒng)一性。作為展示給瀏覽者的頁面，色彩是呈現(xiàn)的第一視覺沖擊力，色彩的搭配、區(qū)域分布、提示性功能等，都是可以通過色彩來進(jìn)行視覺上的空間劃分。此類設(shè)計(jì)色彩同樣也要根據(jù)適用的人群，整體風(fēng)格來進(jìn)行展示。 2.3.3 三種以上的色彩搭配網(wǎng)頁設(shè)計(jì)面對三種以上的色彩搭配時(shí)，如圖2-18，首先應(yīng)該確定主色調(diào)，也就是頁面色彩，有利于體現(xiàn)網(wǎng)站主題。其次是確定輔色調(diào)，也就是僅次與主色調(diào)的視覺面積的輔助色，是烘托主色調(diào)、支持主色調(diào)、起到融合主色調(diào)效果的輔助色調(diào)。再處理局部點(diǎn)睛色，在小范圍內(nèi)點(diǎn)上強(qiáng)烈的顏色來突出主

14、題效果，使頁面更加鮮明生動(dòng)。頁面設(shè)計(jì)時(shí)還應(yīng)考慮背景色，即襯托環(huán)抱整體的色調(diào)，協(xié)調(diào)、支配整體的作用。 第三章 網(wǎng)頁編排設(shè)計(jì)本章知識重點(diǎn)：1. 文字設(shè)計(jì)要點(diǎn)2. 網(wǎng)頁文字設(shè)計(jì)方法3. 網(wǎng)頁布局基礎(chǔ)結(jié)構(gòu)3.1字體編排與編排的基本形式網(wǎng)頁文字的形式概述 文字是人類思想感情交流的必然產(chǎn)物。隨著人類文明的進(jìn)步，它由簡單變得復(fù)雜，逐步形成了科學(xué)的規(guī)范化的程式。它既具有人類思想感情的抽象意義與韻調(diào)和音響節(jié)律，又具有結(jié)構(gòu)完整而變化無窮的鮮明形象。尤其是象形文字，更是抽象與具象的緊密結(jié)合。 文字的設(shè)計(jì)要點(diǎn)1正確對于不同漢字或拉丁字母的構(gòu)成，筆畫都是法定的，只要有一處筆畫不符，輕則字義不同，重則不成其字。因此字形要

15、確切無誤，不能對筆畫任意減少或者改變，以保證其信息傳達(dá)的準(zhǔn)確性。2字體不宜過多如寫漢字，不宜三筆隸書，二筆仿宋；寫拉丁字母也不宜把楷、小楷等組在一起；印刷體與手寫體不能在一字中混合運(yùn)用。另外，在字體的運(yùn)用中，不要在一個(gè)網(wǎng)頁或者站點(diǎn)上使用超過3種字體，如圖3-1所示。3字體和內(nèi)容相符每一種字體都有它的表情，如黑體有醒目嚴(yán)肅之感，楷體有端莊剛直的表情。仿宋有清秀自由的意境。因此，選擇某種字體問題為設(shè)計(jì)美術(shù)字之基調(diào)時(shí)，應(yīng)該按文字內(nèi)容的精神而定。只有這樣才能表里如一，發(fā)揮出文字最大的感染力。至于變形文字，可不拘一格。筆畫的長短、肥瘦、曲直也可自由規(guī)范，只要根據(jù)文字固有結(jié)構(gòu)變化即可，甚至還可進(jìn)一步按透視

16、法。立體投影、空心變化等手法加強(qiáng)其裝飾意義。4字體勻稱結(jié)構(gòu)嚴(yán)謹(jǐn)字與字之間看起來要大小相稱；字的筆畫有繁有簡，要合理安排。字的結(jié)構(gòu)要做到多樣統(tǒng)一，均勻穩(wěn)定，疏密有致，變化有序。 文字字體與版式設(shè)計(jì)1文字的大小 (1)文字的大小決定形象放大標(biāo)題會(huì)給人有力量、活躍、自信的印象；縮小則表現(xiàn)出 纖細(xì)和縝密的印象。另外，文字大小的對比也會(huì)左右印象。標(biāo)題文字的大小與正文之比叫做 跳動(dòng)率。跳動(dòng)率越大，畫面越活躍；反之，越穩(wěn)重。 （2）粗細(xì)印象優(yōu)先將標(biāo)題的文字變大，粗細(xì)效果會(huì)加倍。例如，大而粗的文字最有精神，大而細(xì)的文字都市性 印象最強(qiáng)。另一方面，將文字變小，粗細(xì)效果會(huì)減弱。雖然細(xì)而小的文字有優(yōu)美的感覺，但 如

17、果使用細(xì)而大的文字，效果會(huì)更加明顯。總之，文字越大，越能強(qiáng)化粗細(xì)的印象。如圖3-2所示。2字體的粗細(xì) 網(wǎng)頁設(shè)計(jì)者可以用字體更充分地體現(xiàn)設(shè)計(jì)中要表達(dá)的情感。字體選擇是一種感性、直觀的行為。粗體字強(qiáng)壯有力，有男性特點(diǎn)，適合機(jī)械、建筑業(yè)等內(nèi)容；細(xì)體字高雅細(xì)致有女性特點(diǎn)，更適合服裝、化妝品、食品等行業(yè)的內(nèi)容。在同一頁面中，字體種類少，界面雅致，有穩(wěn)定感；字體種類多，則界面活躍，豐富多彩。關(guān)鍵是如何根據(jù)頁面內(nèi)容來掌握這個(gè)比例關(guān)系。 (2)細(xì)字不適合做新聞標(biāo)題字體網(wǎng)頁新聞的大標(biāo)題要用粗字來表示，如果用細(xì)字，看起來就像無聊的、沒有什么價(jià)值的新聞。粗字熱情而細(xì)字冷靜，因此，熱門的新聞與細(xì)字不相稱。粗字給人有精

18、神、有力量的印象，最適合于強(qiáng)調(diào)戲劇性信息與富有活力感的網(wǎng)頁。(3)正文不要應(yīng)用粗細(xì)變化粗細(xì)效果對于正文中的小字是一樣的。 但是如果極端運(yùn)用粗細(xì)變化， 就會(huì)造成可讀性的降低。調(diào)整字體粗細(xì)要把握好度。特別應(yīng)注意的是，主頁的設(shè)計(jì)未必能夠同制作者所指定的設(shè)計(jì)完全相同，考慮到這個(gè)差距的存在性，還是使用標(biāo)準(zhǔn)式樣比較穩(wěn)妥。3字距與行距字距與行距的處理能直接體現(xiàn)設(shè)計(jì)作品的風(fēng)格與品味，也能夠影響讀者的視覺和心理感受?，F(xiàn)代網(wǎng)頁設(shè)計(jì)較流行把標(biāo)題文字字距拉開或變窄的排列方式，來體現(xiàn)輕松、舒展、娛樂或抒情的版面，也常通過壓扁文字或加寬行距來體現(xiàn)。此外，運(yùn)用字距與行距的寬窄同時(shí)綜合變化，這樣能夠令作品版式增加空間層次和彈

19、性。字距與行距變化不是絕對的，關(guān)鍵是要根據(jù)設(shè)計(jì)的主題內(nèi)容和設(shè)計(jì)情況需要進(jìn)行靈活處理。 4特殊字體 網(wǎng)頁設(shè)計(jì)者必須考慮到大多數(shù)瀏覽者的機(jī)器里只裝有三種字體類型及一些相應(yīng)的特定字體。而我們指定的其他字體在瀏覽者的機(jī)器里并不一定能夠找到，這給網(wǎng)頁設(shè)計(jì)帶來很大的局限。(1)特殊字體應(yīng)用一些網(wǎng)站設(shè)計(jì)者喜歡使用特殊的字體，雖然可以在網(wǎng)頁中使用特殊的字體，但是如果瀏覽者計(jì)算機(jī)上沒有安裝相應(yīng)的字體，則顯示效果無法預(yù)料，顯示的網(wǎng)頁可能非常糟糕。(2)文字圖形化字體在一定的條件下，確實(shí)不能用電腦中提供的字體，必須要自己創(chuàng)造。這也是漢字魅力所在的地方。所謂“文字圖形化”是為了實(shí)現(xiàn)文字的字體效果，將文字筆畫做合理的變

20、形搭配。 5文字編排方式網(wǎng)頁里的正文部分是由許多單個(gè)文字經(jīng)過編排組成的群體，我們要充分發(fā)揮這個(gè)群體形狀在 界面整體布局中的作用。 （1）兩端對齊文字編排可以橫排也可豎排，只要左右或上下的長度對齊，這樣的字群組合就顯得整齊、端正、嚴(yán)謹(jǐn)、大方、美觀。但要注意避免平淡，可選取不同形式的字體穿插使用，這種方式容易與圖片混排。如圖3-6所示。 （2）一端對齊一端對齊能產(chǎn)生視覺節(jié)奏與韻律的形式美感。通過左對齊或右對齊的方式使行首或行尾自然形成一條清晰的垂直線。另一端任其長短不同，能產(chǎn)生虛實(shí)變化，又富有節(jié)奏感。左對齊符合人們的閱讀時(shí)的習(xí)慣，有親切感。右對齊可改變?nèi)藗兊拈喿x習(xí)慣，會(huì)顯得有新意，有一定的格調(diào)。如

21、圖3-7所示。 （3）文字繞圖編排文字圍繞圖形邊緣排列，這樣穿插形式的應(yīng)用非常廣泛，能給人以親切、自然、生動(dòng)和融洽的感覺。 公司簡介的網(wǎng)頁中，將文字繞圖排列，極具親和力。如圖3-8所示。 （4）自由編排在綜合甚至打破上述幾種方式的基礎(chǔ)上，使版式更加活潑、更加新穎，具有較強(qiáng)烈的動(dòng)感。但要注意保持版面的完整性，還要注重有一定的編排規(guī)律。 傾斜的文字適合版面活潑動(dòng)感的特點(diǎn)，突出視覺焦點(diǎn)。如圖3-8所示。 （5）標(biāo)題與正文的編排標(biāo)題的字體、位置、大小、排列方向能夠直接影響編排版式的藝術(shù)風(fēng)格。標(biāo)題完全可以打破一般視覺的常規(guī)導(dǎo)向，可橫排、豎排、居中或邊置等排列。標(biāo)題雖是整段或整篇文章的標(biāo)題，但不一定千篇一

22、律地置于段首之上。可作居中、橫向、豎向或邊置等編排處理，甚至可以直接插入字群中，以新穎的界面來打破舊有的規(guī)律。 6文字的強(qiáng)調(diào)運(yùn)用對比的法則，將強(qiáng)調(diào)的文字作適當(dāng)?shù)奶幚?，使被?qiáng)調(diào)的文字在字體、規(guī)格、顏色、方位等方面與正文相區(qū)別而產(chǎn)生變化以滿足實(shí)現(xiàn)文字的語義功能和美學(xué)效應(yīng)。但是，應(yīng)該注意盡可能少地運(yùn)用強(qiáng)調(diào)，如果什么都想強(qiáng)調(diào)，其實(shí)是什么也沒有強(qiáng)調(diào)。況且，在一個(gè)頁面上運(yùn)用過多的特殊設(shè)置會(huì)影響瀏覽者閱讀頁面內(nèi)容，除非你有特殊的設(shè)計(jì)目的。 3.2網(wǎng)頁設(shè)計(jì)中的排版布局網(wǎng)頁文字設(shè)計(jì)方法1對比主要通過筆畫大小、筆畫的形態(tài)、筆畫色彩等的強(qiáng)烈對比使各自的特征更加鮮明。如圖3-13所示。2筆畫互用筆畫的互用主要通過相關(guān)

23、、相似、相近的筆畫間的互相借用來組成文字間的關(guān)系。如圖3-14所示。 3筆畫突變筆畫突變是指在局部的某個(gè)或者某些筆畫上采用不同于正常筆畫的形態(tài)造型，突出文字內(nèi)涵和特征。如圖3-15所示。4添加形象添加形象主要是通過在漢字局部筆畫上添加與漢字表義相關(guān)的圖像或圖形來增加漢字的表意功能。將某個(gè)筆畫換成有意義或有趣地圖形，會(huì)使整個(gè)視覺活躍起來。 5筆畫連接筆畫相連是通過一組文字筆畫上的連貫來表達(dá)文字間的關(guān)系，增強(qiáng)一組文字的視覺感染力。如圖3-16所示。 6讓點(diǎn)變化將一些文字或字母的點(diǎn)進(jìn)行變化，如字母 i 的變化。如圖3-17所示。 7添加圓框或方框?qū)⑽淖址旁趫A框或方框中也是一種比較簡單的設(shè)計(jì)字體方法，

24、如圖3-18所示。 網(wǎng)頁按鈕設(shè)計(jì)方法打開網(wǎng)頁后，要想促使瀏覽者繼續(xù)瀏覽，除了主頁上的內(nèi)容外，按鈕的設(shè)計(jì)起著至關(guān)重要的作用。好的按鈕設(shè)計(jì)一定會(huì)是醒目且能“吸引”用戶眼球的。以下是好的按鈕設(shè)計(jì)不可少的5個(gè)特征。 網(wǎng)頁版式設(shè)計(jì)的發(fā)展趨勢網(wǎng)絡(luò)技術(shù)日新月異的發(fā)展給網(wǎng)頁設(shè)計(jì)帶來了新的表現(xiàn)天地。在網(wǎng)絡(luò)世界里，技術(shù)失重起著先導(dǎo)作用，設(shè)計(jì)則隨著它的發(fā)展而發(fā)展，技術(shù)更新對網(wǎng)頁版式設(shè)計(jì)的影響無疑是巨大的。 3.3網(wǎng)頁布局的基本結(jié)構(gòu)1左右對稱結(jié)構(gòu)布局左右對稱結(jié)構(gòu)是網(wǎng)頁布局中最為簡單的一種。“左右對稱”所指的只是在視覺上的相對對稱，而非幾何意義上的對稱，這種結(jié)構(gòu)將網(wǎng)頁分割為左右兩部分。一般使用這種結(jié)構(gòu)的網(wǎng)站均把導(dǎo)航區(qū)設(shè)

25、置在左半部，而右半部用作主體內(nèi)容的區(qū)域。左右對稱性結(jié)構(gòu)便于瀏覽者直觀地讀取主體內(nèi)容，但是卻不利于發(fā)布大量的信息，所以這種結(jié)構(gòu)對于內(nèi)容較多的大型網(wǎng)站來說并不合適，如圖3-20所示。2“同”字型結(jié)構(gòu)布局“同”字結(jié)構(gòu)名副其實(shí)，采用這種結(jié)構(gòu)的網(wǎng)頁，往往將導(dǎo)航區(qū)置于頁面頂端，一些如廣告條、友情鏈接、搜索引擎、注冊按鈕、登陸面板、欄目條等內(nèi)容置于頁面兩側(cè)，中間為主體內(nèi)容，這種結(jié)構(gòu)比左右對稱結(jié)構(gòu)要復(fù)雜一點(diǎn)，不但有條理，而且直觀，有視覺上的平衡感，但是這種結(jié)構(gòu)也比較僵化。在使用這種結(jié)構(gòu)時(shí)，高超的用色技巧會(huì)規(guī)避“同”字結(jié)構(gòu)的缺陷，如圖3-21所示。3“回”字型結(jié)構(gòu)布局“回”字型結(jié)構(gòu)實(shí)際上是對“同”字型結(jié)構(gòu)的一種

26、變形，即在“同”字型結(jié)構(gòu)的下面增加了一個(gè)橫向通欄，這種變形將“同”字型結(jié)構(gòu)不是很重視的頁腳利用起來，這樣增大了主體內(nèi)容，合理地使用了頁面有限的面積，但是這樣往往使頁面充斥著各種內(nèi)容，擁擠不堪，如圖10.12所示。如圖3-22所示。4 “匡”字型結(jié)構(gòu)布局和“回”字型結(jié)構(gòu)一樣，“匡”字型結(jié)構(gòu)其實(shí)也是“同”字型結(jié)構(gòu)的一種變形，也可以認(rèn)為是將“回”字型結(jié)構(gòu)的右側(cè)欄目條去掉得出的新結(jié)構(gòu)，這種結(jié)構(gòu)是“同”字型結(jié)構(gòu)和“回”字型結(jié)構(gòu)的一種折中，這種結(jié)構(gòu)承載的信息量與“同”字型相同，而且改善了“回”字型的封閉型結(jié)構(gòu)。5自由式結(jié)構(gòu)布局以上3種結(jié)構(gòu)是傳統(tǒng)意義上的結(jié)構(gòu)布局。自由式結(jié)構(gòu)布局相對而言就沒有那么“安分守己”

27、了，這種結(jié)構(gòu)的隨意性特別大，顛覆了從前以圖文為主的表現(xiàn)形式，將圖像、Flash動(dòng)畫或者視頻作為主體內(nèi)容，其他的文字說明及欄目條均被分布到不顯眼的位子，起裝飾作用，這種結(jié)構(gòu)在時(shí)尚類網(wǎng)站中使用的非常多，尤其是在時(shí)裝、化妝用品的網(wǎng)站中。 6“另類”結(jié)構(gòu)布局如果說自由式結(jié)構(gòu)是現(xiàn)代主義的結(jié)構(gòu)布局，那么“另類”結(jié)構(gòu)布局就可以被稱為后現(xiàn)代的代表了。在“另類”結(jié)構(gòu)布局中，傳統(tǒng)意義上的所有網(wǎng)頁元素全部被顛覆，被打散后融入到一個(gè)模擬的場景中。 3.4網(wǎng)頁中的圖像1網(wǎng)頁圖像的常用格式GIF：支持256色，可以做成逐幀動(dòng)畫，可以設(shè)置透明背景，一般用于網(wǎng)頁中的小圖標(biāo)，如： JPG：支持百萬級真彩，一般用于網(wǎng)頁中的照片。

28、 PNG：有GIF、JPG的所有優(yōu)點(diǎn)，是網(wǎng)頁圖片發(fā)展的方向，但圖片文件大小稍大。 DW：只支持以上三種格式的圖片，其它如BMP格式是也可以在IE瀏覽器中被顯示，但在DW中無法顯示，由于BMP文件體積很大，在網(wǎng)頁中一般不推薦。 2.頁面尺寸由于頁面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁的局限性就在于你無法突破顯示器的范圍，而且因?yàn)闉g覽器也將占去不少空間，留下給你的頁面范圍變得越來越小。一般分辨率在800 x600的情況下，頁面的顯示尺寸為：780 x428個(gè)象素；分辨率在640 x480的情況下，頁面的顯示尺寸為:620X311個(gè)象素；分辨率在1024X768的情況下，頁面的顯示尺寸為：1007x

29、600。從以上數(shù)據(jù)可以看出，分辨率越高頁面尺寸越大。 3.頁頭頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁眉里。這樣，訪問者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。頁頭是整個(gè)頁面設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁面的協(xié)調(diào)性。頁頭常放置站點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告。 4.文本文本在頁面中出現(xiàn)都數(shù)以行或者塊(段落)出現(xiàn)，它們的擺放位置決定者整個(gè)頁面布局的可視性。在過去因?yàn)轫撁嬷谱骷夹g(shù)的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經(jīng)可以按照自己的要求放置到頁面的任何位置。5.多媒體除了文本和圖片，還有聲音，動(dòng)畫，視頻等等其它媒體。雖然

30、它們不是經(jīng)常能被利用到，但隨著動(dòng)態(tài)網(wǎng)頁的興起，它們在網(wǎng)頁布局上也將變得更重要。6.頁腳頁腳和頁頭相呼應(yīng)。頁頭是放置站點(diǎn)主題的地方，而頁腳是放置制作者或者公司信息的地方。你能看到，許多制作信息都是放置在頁腳的。 7.圖片圖片和文本是網(wǎng)頁的兩大構(gòu)成元素，卻一不可。如何處理好圖片和文本的位置成了整個(gè)頁面布局的關(guān)鍵。而你的布局思維也將體現(xiàn)在這里。 第四章 Photoshop設(shè)計(jì)制作網(wǎng)頁圖像本章知識重點(diǎn)：1. 網(wǎng)站Logo標(biāo)志的設(shè)計(jì)2. 網(wǎng)站Banner的設(shè)計(jì)3. 設(shè)計(jì)制作網(wǎng)頁導(dǎo)航欄4. 設(shè)計(jì)制作網(wǎng)站首頁版面 4.1 設(shè)計(jì)制作網(wǎng)站Logo標(biāo)志（步驟詳見書）任務(wù)描述隨著時(shí)代的進(jìn)步，社會(huì)的發(fā)展，互聯(lián)網(wǎng)走入千

31、家萬戶。互聯(lián)網(wǎng)成為我們經(jīng)常說到的“信息高速公路”。與此同時(shí)，在越來越多的人加入到互聯(lián)網(wǎng)中、越來越多地使用互聯(lián)網(wǎng)的過程中，網(wǎng)頁設(shè)計(jì)越來越重要，而越來越注重個(gè)性化、獨(dú)特化的形式美的外觀，用簡練的元素、的特的創(chuàng)意傳遞人們心中的意愿。4.2設(shè)計(jì)制作網(wǎng)站Banner（步驟詳見書）任務(wù)描述Banner在網(wǎng)絡(luò)廣告展示、交換鏈接、網(wǎng)站內(nèi)部告知等很多方面，都有著廣泛的應(yīng)用。Banner在網(wǎng)頁設(shè)計(jì)的構(gòu)圖中考察作者對畫面中塊面的把握，位置的安排，虛實(shí)的呼應(yīng)等因素，因此Banner的設(shè)計(jì)在網(wǎng)頁制作中顯的尤為重要。 4.3設(shè)計(jì)制作網(wǎng)頁導(dǎo)航欄（步驟詳見書）任務(wù)描述導(dǎo)航欄是網(wǎng)頁的一個(gè)重要組成部分。導(dǎo)航欄的設(shè)計(jì)，有時(shí)會(huì)決定一

32、個(gè)頁面的成敗，同時(shí)導(dǎo)航欄也是提高站點(diǎn)易用性的關(guān)鍵。網(wǎng)站的瀏覽者通過導(dǎo)航欄了解站點(diǎn)內(nèi)容的分類，并使用導(dǎo)航欄上的鏈接瀏覽站點(diǎn)的相關(guān)信息。導(dǎo)航欄一般都處于頁面最醒目的位置，以方便瀏覽者的使用。 4.4設(shè)計(jì)制作網(wǎng)站首頁版面（步驟詳見書）任務(wù)描述版式設(shè)計(jì)，就是指在版面上，將有限的視覺元素進(jìn)行有機(jī)的排列組合，并通過理性思維，用個(gè)性化的方式表現(xiàn)出具有個(gè)人風(fēng)格和藝術(shù)特色的視覺效果。它使得版面在傳達(dá)信息的同，也會(huì)產(chǎn)生感官上的美感。 第五章Flash網(wǎng)頁動(dòng)畫設(shè)計(jì)與制作本章知識重點(diǎn)：1. Flash基本操作2. Flash時(shí)間軸及幀操作3. Flash元件和實(shí)例4. Flash文件發(fā)布和播放5. 逐幀動(dòng)畫6. 補(bǔ)間

33、動(dòng)畫7. 網(wǎng)頁特殊動(dòng)畫5.1 Flash基本操作Flash CS5是Adobe公司推出的一款全新的矢量動(dòng)畫制作和多媒體設(shè)計(jì)軟件，廣泛應(yīng)用于網(wǎng)站廣告、游戲設(shè)計(jì)、MTV制作、電子賀卡、多媒體課件等領(lǐng)域。Flash CS5的操作界面由以下幾部分組成：菜單欄、主工具欄、工具箱、時(shí)間軸、場景和舞臺、屬性面板以及浮動(dòng)面板，如圖5-1。5.1.1 Flash文檔創(chuàng)建新建文件是使用Flash CS5進(jìn)行設(shè)計(jì)的第一步。選擇“文件 新建”命令，彈出“新建文檔”對話框，選擇完成后，單擊“確定”按鈕，即可完成新建文件的任務(wù) ，如圖5-2。 5.1.2 Flash文檔打開如果要修改已完成的動(dòng)畫文件，必須先將其打開。選擇

34、“文件 打開”命令，彈出“打開”對話框，在對話框中搜索路徑和文件，確認(rèn)文件類型和名稱，單擊“打開”按鈕，或直接雙擊文件，即可打開所指定的動(dòng)畫文件，如圖5-3 。 5.1.3 Flash文檔保存編輯和制作完動(dòng)畫后，就需要將動(dòng)畫文件進(jìn)行保存。選擇“保存”命令，彈出“另存為”對話框 ，輸入文件名，選擇保存類型，單擊“保存”按鈕，即可將動(dòng)畫保存，如圖5-4 。 繪圖工具使用 使用工具面板中的工具，可以完成繪圖、上色、選擇和修改繪圖對象，并可以更改舞臺中的視圖。工具面板分為4個(gè)部分：繪圖工具、選取工具、顏色工具和查看工具，如圖5-5。 箭頭工具：選取和移動(dòng)對象、修正對象輪廓、旋轉(zhuǎn)或縮放對象。精選工具：對

35、曲線、圓形、矩形等圖形對象的外形進(jìn)行編輯調(diào)整。若圖形對象是組件，必須先解散。套索工具：使用圈選方式來選取對象，它可以圈出不規(guī)則形狀。3D旋轉(zhuǎn)工具：進(jìn)行3D旋轉(zhuǎn)操作。直線工具：只能畫直線。按住Shift鍵，拖放鼠標(biāo)可以繪制垂直、水平直線或45斜線。鉛筆工具：畫直線或曲線。所畫線條包括：Straighten（平直）、Smooth（平滑）、Ink（墨水）三種模式。鋼筆工具：可以繪制連續(xù)線條與貝塞爾曲線，且繪制后還可以配合精選工具來加以修改。用鋼筆工具繪制的不規(guī)則圖形，可以在任何時(shí)候重新調(diào)整。橢圓、矩形和多邊形工具：繪制橢圓或矩形、多邊形。配合Shift鍵，可繪制圓或正方形。筆刷工具：填充工作區(qū)中任意

36、區(qū)域的顏色。它與鉛筆工具不同，筆刷工具畫出的是填充區(qū)，而鉛筆工具則是線條。Deco工具：是一種類似“噴涂刷”的填充工具，使用Deco工具可以快速完成大量相同元素的繪制，也可以應(yīng)用它制作出很多復(fù)雜的動(dòng)畫效果。將其與圖形元件和影片剪輯元件配合，可以制作出效果更加豐富的動(dòng)畫效果。自由形變工具：可對選定對象進(jìn)行縮放、旋轉(zhuǎn)、扭曲等形變。骨骼工具：適合做機(jī)械運(yùn)動(dòng)或人走路等那些甩反向運(yùn)動(dòng)的動(dòng)畫。漸變工具：改變圖形對象中的漸進(jìn)色的方向、深度和中心位置等。墨水瓶工具：更改線條的顏色和樣。顏料桶工具：更改填充區(qū)域的顏色。包括：缺口大?。℅ap Size）和鎖定填充（Lock Fill）兩個(gè)選項(xiàng)。吸管工具：從工作區(qū)

37、中拾取已經(jīng)存在的顏色及樣式屬性，并將其應(yīng)用于別的對象中。橡皮擦工具：完整或部分地擦除線條、填充及形狀。視圖移動(dòng)工具：用于移動(dòng)工作區(qū)使其便于編輯，其功能相當(dāng)于移動(dòng)滾動(dòng)條。選擇該工具后，使用鼠標(biāo)在工作區(qū)中拖動(dòng)頁面即可調(diào)整。縮放工具：用于調(diào)整工作區(qū)的顯示比例。5.2 Flash時(shí)間軸及幀操作時(shí)間軸時(shí)間軸面板主要用于組織和控制影片中圖層和幀的內(nèi)容,使這些內(nèi)容提要隨著時(shí)間推移而發(fā)生相應(yīng)的變化。其結(jié)構(gòu)如圖5-6： 幀和關(guān)鍵幀F(xiàn)lash文檔是將時(shí)間長度分為幀。幀就像電影中的底片,基本上制作動(dòng)畫的大部分操作都是對幀的操作。幀類型分為：關(guān)鍵幀、空白關(guān)鍵幀和普通幀。關(guān)鍵幀是用于定義變化的幀,每一個(gè)關(guān)鍵幀都有自己獨(dú)

38、立的場景；空白關(guān)鍵幀是特殊的關(guān)鍵幀,有自己的獨(dú)立的場景,但是場景中沒有任何對象存在；普通幀只是簡單地延續(xù)前一關(guān)鍵幀中的場景內(nèi)容。 圖層圖層就像透明的膠片一樣，在舞臺一層層地向上疊加。圖層可以組織文檔中的圖形圖像?？梢栽趫D層上繪制和編輯對象，而不會(huì)影響其它圖冊上的對象。如果一個(gè)圖層上沒有內(nèi)容，那么就可以透過它看到下面的圖層。層與層之間是獨(dú)立的，每個(gè)圖層上都有若干幀，每個(gè)Flash動(dòng)畫又由多個(gè)圖層組成。5.3Flash元件和實(shí)例元件和實(shí)例 元件是可以重復(fù)使用的圖像、動(dòng)畫或按鈕。是構(gòu)成動(dòng)畫的基本單位，它可節(jié)省存儲空間，加快動(dòng)畫播放速度。實(shí)例（Instance） 是元件在場景上的具體體現(xiàn)，即在工作區(qū)中

39、的元件元件類型元件的類型有：圖形（Graphic）、按鈕（Button）和電影片段（Movie Clip）。圖形可以是任意靜態(tài)圖形、也可以是受主時(shí)間軸（場景中的時(shí)間軸）控制的動(dòng)畫。按鈕是指可以通過鼠標(biāo)點(diǎn)擊（或滑過、移離等）完成一定的交互功能的符號。電影片段是指可以獨(dú)立于主時(shí)間軸的動(dòng)畫片段。元件創(chuàng)建 新建一個(gè)元件的方法：Insert/New Symbol命令，或Ctrl+F8。創(chuàng)建新符號：用箭頭工具選擇場景中的元素Insert/Convert to Symbol輸入名稱選擇類型單擊OK。創(chuàng)建空符號：Insert/New Symbol輸入名稱選擇類型單擊OK 進(jìn)入符號編輯模式。 5.4Flash文

40、件發(fā)布和播放5.4.1 Flash文件發(fā)布設(shè)置Flash動(dòng)畫制作完成后，可以將動(dòng)畫作為文件導(dǎo)出，或發(fā)布動(dòng)畫。首先需要對動(dòng)畫進(jìn)行優(yōu)化，減少文件的大小，使動(dòng)畫能夠更快速地下載和播放。而測試動(dòng)畫，是為了檢查動(dòng)畫是否能正常播放。在Flash CS3中，可以將動(dòng)畫發(fā)布為SWF格式文件，也可以發(fā)布為QuickTime等其他格式文件，以滿足不同系統(tǒng)平臺的需要。默認(rèn)情況下，使用“發(fā)布”命令可以創(chuàng)建*.SWF格式文件，也可以將Flash影片插入HTML文檔，還可以創(chuàng)建GIF、JPEG、PNG和QuickTime等文件格式。可以根據(jù)需要選擇發(fā)布格式以及設(shè)置相關(guān)的發(fā)布參數(shù)。5.4.2 Flash動(dòng)畫文件播放 要在編

41、輯文件的基礎(chǔ)上創(chuàng)建圖像或影片，發(fā)布功能不是唯一的途徑，導(dǎo)出命令也可以完成這其中的大部分工作，但是要在其他的應(yīng)用程序（如照片編輯或矢量繪圖程序）中使用Flash創(chuàng)建的內(nèi)容，還需要對它進(jìn)行調(diào)整。在將編輯文件導(dǎo)出為影片時(shí)，主要進(jìn)行兩項(xiàng)工作：可以將動(dòng)畫轉(zhuǎn)換為動(dòng)畫文件格式，如Flash，QuickTime，Windows AVI或具有動(dòng)畫效果的GIF?；蛘咭部梢詫?dòng)畫的每一幀作為單獨(dú)的靜態(tài)圖形文件導(dǎo)出。當(dāng)以后者方式導(dǎo)出時(shí)，所創(chuàng)建的每個(gè)文件都有一個(gè)分配的名稱以及一個(gè)表示其位置的編號。因此如果將某個(gè)JPEG序列命名為my image，且影片包含10幀，那么最后的文件將按照從myimage1.jpg到myim

42、age10.jpg的順序進(jìn)行命名。要將動(dòng)畫作為影片或序列導(dǎo)出，具體的操作步驟如下。【步驟1】從“文件”菜單中選擇“導(dǎo)出影片”命令，將出現(xiàn)“導(dǎo)出影片”對話框。如圖5-7：【步驟2】為導(dǎo)出的影片命名，然后選擇文件類型?！静襟E3】最后單擊“保存”按鈕即可。注意：選擇文件類型不同，會(huì)出現(xiàn)的不同的導(dǎo)出對話框。在對話框中調(diào)整設(shè)置后確定即可。使用獨(dú)立的播放器Macromedia Flash Player播放影片與用Web瀏覽器或ActiveX主機(jī)應(yīng)用程序播放的效果一樣。當(dāng)然可以使用Flash Player播放器讓那些沒有安裝Web瀏覽器或ActiveX主機(jī)應(yīng)用程序的用戶也能夠觀看影片。 逐幀動(dòng)畫逐幀動(dòng)畫概念

43、與傳統(tǒng)動(dòng)畫片類似，全部有關(guān)鍵幀組成，可以一幀一幀地繪制，也可以導(dǎo)入外部動(dòng)畫文件。逐幀動(dòng)畫的特點(diǎn)是：在連續(xù)動(dòng)畫的相鄰兩幀中，畫面一般地僅有微小的變化；每一幀都是關(guān)鍵幀；每幀畫面的制作。逐幀動(dòng)畫制作實(shí)例-花開動(dòng)畫(步驟詳見書)補(bǔ)間動(dòng)畫的種類補(bǔ)間是通過為一個(gè)幀中的對象屬性指定一個(gè)值并為另一個(gè)幀中的該相同屬性指定另一個(gè)值創(chuàng)建的動(dòng)畫。Flash 計(jì)算這兩個(gè)幀之間該屬性的值。在類型上又分為補(bǔ)間動(dòng)畫、補(bǔ)間形狀和傳統(tǒng)補(bǔ)間。補(bǔ)間動(dòng)畫是一種基于對象的動(dòng)畫，不再是作用于關(guān)鍵幀，而是作用于動(dòng)畫元件本身，從而使Flash的動(dòng)畫制作更加專業(yè)。補(bǔ)間形狀動(dòng)畫用于創(chuàng)建形狀變化的動(dòng)畫效果，使一個(gè)形狀變成另一個(gè)形狀，同時(shí)也可以設(shè)置

44、圖形形狀位置、大小、顏色的變化。傳統(tǒng)補(bǔ)間動(dòng)畫是Flash中較為常見的基礎(chǔ)動(dòng)畫類型，使用它可以制作出對象的位移、變形、旋轉(zhuǎn)、透明度、濾鏡以及色彩變化的動(dòng)畫效果。補(bǔ)間動(dòng)畫的制作實(shí)例-水滴動(dòng)畫(步驟詳見書）網(wǎng)頁特殊動(dòng)畫5.7.1 遮罩動(dòng)畫實(shí)例 遮罩層的作用是：可以透過遮罩層內(nèi)的圖形看到其下面圖層的內(nèi)容，而不可以透過遮罩層內(nèi)的無圖形處看其下面圖層的內(nèi)容。 遮罩層動(dòng)畫可制作圖像文字、電影文字、圖像的動(dòng)態(tài)切換和探照燈效果等。遮罩動(dòng)畫至少要有兩個(gè)層（遮罩層和被遮罩層）的配合才能完成 。下面來制作探照燈效果：（步驟詳見書）引導(dǎo)層動(dòng)畫實(shí)例 讓元件按照設(shè)定的路徑運(yùn)動(dòng)。路徑放在引導(dǎo)層上，元件放在被引導(dǎo)層上。所以，引

45、導(dǎo)層動(dòng)畫至少需要兩層：引導(dǎo)層和被引導(dǎo)層。引導(dǎo)層所繪制的引導(dǎo)線必須是連貫的路徑，不能是雖然連在一起但是斷斷續(xù)續(xù)的線條。而且元件在閉合的路徑里沿最短路徑運(yùn)動(dòng)。下面來完成一個(gè)簡單的引導(dǎo)層動(dòng)畫（步驟詳見書）骨骼動(dòng)畫的創(chuàng)建反向運(yùn)動(dòng)（IK）是一種使用骨骼的有關(guān)結(jié)構(gòu)對一個(gè)對象或彼此相關(guān)的一組對象進(jìn)行動(dòng)畫處理的方法。使用骨骼工具，只需要做很少的設(shè)計(jì)工作，就可以是元件實(shí)例和形狀對象按照復(fù)制而自然的方式移動(dòng)。在Flash CS5中，通過骨骼系統(tǒng)和反向運(yùn)動(dòng)工具可以為一系列元件添加骨骼，將實(shí)例與其他實(shí)例連接在一起，用關(guān)節(jié)連接一系列元件實(shí)例。在一個(gè)骨骼移動(dòng)時(shí)，與運(yùn)動(dòng)的骨骼相關(guān)的其他連接骨骼也會(huì)移動(dòng)。使用反向運(yùn)動(dòng)進(jìn)行動(dòng)畫

46、處理時(shí)，只需要指定對象開始位置和結(jié)束位置，就可以創(chuàng)建出自然的運(yùn)動(dòng)。下面來制作一個(gè)骨骼的跑步動(dòng)畫。（步驟詳見書）5.8 Flash基本網(wǎng)頁動(dòng)畫綜合實(shí)例。（步驟詳見書）第六章Flash交互式網(wǎng)頁動(dòng)畫的創(chuàng)作本章知識重點(diǎn)：1. ActionScript腳本語言2. 按鈕腳本動(dòng)畫制作3. 幀腳本動(dòng)畫制作4. 影片剪輯腳本動(dòng)畫制作 6.1 ActionScript腳本語言ActionScript 是針對Flash Player運(yùn)行時(shí)環(huán)境的腳本語言，在Flash的內(nèi)容和應(yīng)用程序中實(shí)現(xiàn)交互性和數(shù)據(jù)處理等功能。腳本語言屬性設(shè)置打開“編輯”菜單，下“首選參數(shù)”對話框，選擇對話框左側(cè)選項(xiàng)里的ActionScript

47、，右邊對應(yīng)的出現(xiàn)腳本語言屬性設(shè)置內(nèi)容，可對腳本語言屬性進(jìn)行設(shè)置。如圖6-1： 動(dòng)作面板點(diǎn)擊“窗口”菜單里的動(dòng)作選項(xiàng)，或者按F9都可以打開動(dòng)作面板，如圖6-2：影片瀏覽器面板影片瀏覽器使您可以輕松地查看和組織文檔的內(nèi)容，以及在文檔中選擇元素進(jìn)行修改。它包含當(dāng)前使用的元素的顯示列表，該列表顯示為一個(gè)可導(dǎo)航的分層結(jié)構(gòu)樹?？梢赃^濾在影片瀏覽器中顯示文檔中哪些類別的項(xiàng)目，選項(xiàng)包括文本、圖形、按鈕、影片剪輯、動(dòng)作和導(dǎo)入的文件?？梢詫⑺x類別顯示為影片元素（場景）、元件定義，或者二者都顯示。可以展開和折疊導(dǎo)航樹。6.2按鈕腳本動(dòng)畫制作按鈕元件Flash動(dòng)畫制作中，經(jīng)常會(huì)使用到元件，而元件種類分有3種，分別是

48、圖形元件、按鈕元件和影片剪輯元件。按鈕元件是Flash影片中創(chuàng)建互動(dòng)功能的重要組成部分。使用按鈕元件可以在影片中響應(yīng)鼠標(biāo)單擊、滑過或其他動(dòng)作，然后將響應(yīng)的事件結(jié)果傳遞給互動(dòng)程序進(jìn)行處理。利用按鈕庫編輯按鈕動(dòng)畫1、打開按鈕實(shí)例1文件夾下的探照燈文件，在原來圖層的最上方新建圖層4，在第1幀添加動(dòng)作腳本“stop();”。2、新建層5，刪除第1幀后面的幀。通過“窗口”菜單-“公用庫”-“按鈕”，打開公用按鈕庫，選擇其中一個(gè)按鈕，放入舞臺，如圖6-5：3、選中舞臺上的按鈕，單擊右鍵，選擇動(dòng)作命令，打開動(dòng)作面板，給按鈕添加動(dòng)作“on (press) gotoAndPlay(2);”，動(dòng)作面板如圖6-6：

49、 4、測試影片，可以看到點(diǎn)擊按鈕動(dòng)畫才開始播放的效果。 自定義按鈕動(dòng)畫實(shí)例 （步驟詳見書）6.3幀腳本動(dòng)畫制作幀動(dòng)作所謂的“幀動(dòng)作”，就是Flash影片在播放到該幀的時(shí)候應(yīng)該進(jìn)行什么樣的操作。例如跳轉(zhuǎn)、停止、重復(fù)等等。如果要對某一幀添加動(dòng)作，必須要使該幀成為關(guān)鍵幀。如果該幀已經(jīng)為關(guān)鍵幀，我們就不要對它進(jìn)行轉(zhuǎn)換了。幀腳本動(dòng)畫實(shí)例 （步驟詳見書）6.4影片剪輯腳本動(dòng)畫制作實(shí)例影片剪輯腳本動(dòng)畫在Flash 中，除了利用場景、幀控制腳本實(shí)現(xiàn)對動(dòng)畫播放狀態(tài)的簡單控制外，還可利用影片剪輯控制腳本對影片剪輯的屬性進(jìn)行設(shè)置。在Action腳本的實(shí)際應(yīng)用中，影片剪輯控制腳本是除場景、幀控制腳本外，最常用的一類腳

50、本。6.4.2 影片剪輯腳本實(shí)例（步驟詳見書） 6.5 Flash交互式網(wǎng)頁動(dòng)畫實(shí)例（步驟詳見書）第七章 Dreamweaver靜態(tài)基本頁面的制作本章知識重點(diǎn)：Dreamweaver基本概念2. Dreamweaver基本工作環(huán)境3. Dreamweaver基本操作4. Dreamweaver靜態(tài)網(wǎng)頁的制作7.1 Dreamweaver基本概念Macromedia Dreamweaver是一款專業(yè)的網(wǎng)頁設(shè)計(jì)軟件，它采用所見即所得的方式將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合在一起，使得各個(gè)層次的開發(fā)人員和設(shè)計(jì)師都能夠快速創(chuàng)建基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。它針對專業(yè)網(wǎng)頁設(shè)計(jì)師進(jìn)行視覺化網(wǎng)頁

51、開發(fā)工作而特別設(shè)計(jì)，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁。 7.2 Dreamweaver基本工作環(huán)境7.2.1 工作環(huán)境Dreamweaver工作于Windows操作系統(tǒng)下對計(jì)算機(jī)硬件的最低系統(tǒng)要求：Intel Pentium 4 或 AMD Athlon 64 處理器Microsoft Windows XP(帶有 Service Pack 2，推薦 Service Pack 3);Windows Vista Home Premium、Business、Ultimate 或 Enterprise(帶有 Service Pack 1);或 Windows 75

52、12 MB 內(nèi)存1GB 可用硬盤空間用于安裝;安裝過程中需要額外的可用空間(無法安裝在基于閃存的可移動(dòng)存儲設(shè)備上)1280 x800 屏幕，16 位顯卡DVD-ROM 驅(qū)動(dòng)器 7.2.2 工具欄使用文檔工具欄中包含的按鈕可以在文檔的不同視圖之間快速切換。工具欄中還包括一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的常用命令和選項(xiàng)。圖7-3所示顯示展開的文檔工具欄。以下選項(xiàng)出現(xiàn)在“文檔”工具欄中：A.顯示代碼視圖：只在“文檔”窗口中顯示“代碼”視圖。B.顯示代碼視圖和設(shè)計(jì)視圖：將“文檔”窗口拆分為“代碼”視圖和“設(shè)計(jì)”視圖。當(dāng)選擇了這種組合視圖時(shí)，“視圖選項(xiàng)”菜單中的 “頂部的設(shè)計(jì)視圖 ”選項(xiàng)變

53、為可用。 C.顯示設(shè)計(jì)視圖：只在“文檔”窗口中顯示“設(shè)計(jì)”視圖。如果處理的是XML、JavaScript、Java、CSS或其他基于代碼的文件類型，則不能在“設(shè)計(jì)”視圖中查看文件，而且“設(shè)計(jì)”和“拆分”按鈕將會(huì)變暗。D.實(shí)時(shí)代碼視圖：顯示瀏覽器用于執(zhí)行該頁面的實(shí)際代碼。E.檢查瀏覽器兼容性 用于檢查您的頁面是否對于各種瀏覽器均兼容。F.實(shí)時(shí)視圖：顯示不可編輯的、交互式的、基于瀏覽器的文檔視圖。G. CSS檢查模式：檢查CSS代碼是否兼容于各種瀏覽器。H.在瀏覽器中預(yù)覽 /調(diào)試：允許您在瀏覽器中預(yù)覽或調(diào)試文檔。從彈出菜單中選擇一個(gè)瀏覽器。I. 可視化助理：使您可以使用各種可視化助理來設(shè)計(jì)頁面。J

54、. 刷新設(shè)計(jì)視圖:在“代碼”視圖中對文檔進(jìn)行更改后刷新文檔的 “設(shè)計(jì)”視圖。在執(zhí)行某些操作 （如保存文件或單擊該按鈕）之后，您在 “代碼”視圖中所做的更改才會(huì)自動(dòng)顯示在 “設(shè)計(jì)”視圖中。K.文檔標(biāo)題：允許您為文檔輸入一個(gè)標(biāo)題，它將顯示在瀏覽器的標(biāo)題欄中。如果文檔已經(jīng)有了一個(gè)標(biāo)題，則該標(biāo)題將顯示在該區(qū)域中。L.文件管理：顯示“文件管理”彈出菜單。7.2.3 【屬性】面板“屬性”面板用于顯示和編輯當(dāng)前選定頁面元素 （如文本和插入的對象）的最常用屬性?！皩傩浴泵姘逯械膬?nèi)容根據(jù)選定的元素會(huì)有所不同。例如，如果您選擇頁面上的一個(gè)圖像，則“屬性”面板將改為顯示該圖像的屬性 （如圖像的文件路徑、圖像的寬度和

55、高度、圖像周圍的邊框 （如果有），等等）。默認(rèn)情況下，“屬性”面板位于工作區(qū)的底部邊緣，但是可以將其取消?？坎⑹蛊涑蔀楣ぷ鲄^(qū)中的浮動(dòng)面板。如圖7-4所示7.2.4 面板組在執(zhí)行Dreamweaver的操作時(shí)，面板是一個(gè)很重要的編輯輔助工具，Dreamweaver中有很多類型的面板，我們可以根據(jù)自己的使用習(xí)慣，將不同的面板進(jìn)行重新組合，這就是所謂的面板組。在Photoshop等其他Adobe公司的設(shè)計(jì)軟件中，也有類似的概念。把面板的標(biāo)簽拖到該組突出顯示的放置區(qū)域，可將面板添加到面板組中。如圖7-6所示；要重新排列組中的面板，請將面板標(biāo)簽拖移到組中的一個(gè)新位置。要從組中刪除面板以使其成為浮動(dòng)面板，

56、請將該面板的標(biāo)簽拖移到組外部。7.3Dreamweaver基本操作站點(diǎn)的基本操作為了達(dá)到最佳效果并在以后的工作中節(jié)省時(shí)間，應(yīng)對站點(diǎn)進(jìn)行設(shè)計(jì)和規(guī)劃。這是創(chuàng)建任何類型網(wǎng)站的前提，即使是創(chuàng)建個(gè)人主頁，仔細(xì)認(rèn)真的規(guī)劃站點(diǎn)也是有益的，它可以使用戶能夠成功地訪問您的站點(diǎn)內(nèi)的頁面。Dreamweaver不僅可以創(chuàng)建單獨(dú)的頁面文檔，同時(shí)也是一個(gè)強(qiáng)大的站點(diǎn)創(chuàng)建和管理的軟件。站點(diǎn)結(jié)構(gòu)的規(guī)劃一開始就仔細(xì)進(jìn)行站點(diǎn)規(guī)劃可以減少失誤和提高工作效率，如果沒有考慮網(wǎng)站中的文檔在文件夾中的層次結(jié)構(gòu)就開始創(chuàng)建文檔，可能會(huì)導(dǎo)致一個(gè)文件夾內(nèi)充滿了各種類型名稱類似的文件，不利于對文檔進(jìn)行管理和修改。站點(diǎn)結(jié)構(gòu)規(guī)劃的原則是將不同的文件分類

57、放置在不同的文件夾內(nèi)以便于設(shè)計(jì)者管理，同時(shí)本地站點(diǎn)和遠(yuǎn)程站點(diǎn)應(yīng)具有完全相同的目錄結(jié)構(gòu)?！拘〖记伞咳绻谑褂肈reamweaver開始工作之前就規(guī)劃好站點(diǎn)布局可以節(jié)省很多時(shí)間，最簡單易行的方法就是繪制站點(diǎn)結(jié)構(gòu)草圖，列出站點(diǎn)布局和鏈接關(guān)系。以便以后建立站點(diǎn)時(shí)參照它來工作。如圖7-8所示頁面布局和設(shè)計(jì)外觀網(wǎng)頁設(shè)計(jì)工作中，頁面布局和整體設(shè)計(jì)風(fēng)格保持一致原則十分重要，從用戶體驗(yàn)的角度來看，這樣的原則可以使用戶順利的瀏覽整個(gè)站點(diǎn)的頁面，不會(huì)因?yàn)轫撁骘L(fēng)格相差過大而不利于瀏覽。本地站點(diǎn)是一個(gè)本地的文件夾，站點(diǎn)以這個(gè)文件夾作為工作目錄，這是Dreamweaver站點(diǎn)所處理的文件的存儲位置。建立了一個(gè)本地文件夾即

58、可定義Dreamweaver本地站點(diǎn)。遠(yuǎn)程站點(diǎn)是一個(gè)遠(yuǎn)端的文件夾，該文件夾位于運(yùn)行Web服務(wù)器的計(jì)算機(jī)上。本地站點(diǎn)和遠(yuǎn)程站點(diǎn)應(yīng)具有完全相同的目錄結(jié)構(gòu)。如果外端文件夾結(jié)構(gòu)與本地文件夾結(jié)構(gòu)不一樣，Dreamweaver會(huì)將文件上傳到錯(cuò)誤的位置。文件的命名和管理站點(diǎn)內(nèi)文件及文件夾的命名是在網(wǎng)站制作之初的設(shè)計(jì)部分就要考慮的，每一個(gè)網(wǎng)頁都有自己的文件名。網(wǎng)頁里面的文件夾在調(diào)用的時(shí)候也會(huì)把名字體現(xiàn)到網(wǎng)頁鏈接里面來。如果僅僅只要我們制作的網(wǎng)站能夠在瀏覽器里面正常運(yùn)行，那么無論將這些文件怎么命名都可以。但實(shí)際上如果沒有良好的命名規(guī)則進(jìn)行必要的約束，最終會(huì)導(dǎo)致整個(gè)網(wǎng)站或是文件夾無法管理。HTML基本概念網(wǎng)頁文件

59、本身就是一種文本文件，而這種文本文件的本質(zhì)就是HTML（Hyper Text Mark-up Language）語言。HTML是一種用于描述網(wǎng)頁文檔的超文本標(biāo)記語言，之所以稱為超文本標(biāo)記語言，是因?yàn)樵贖TML文本中包含了所謂“超級鏈接”點(diǎn)。所謂超級鏈接，就是一種URL指針，通過激活（點(diǎn)擊）它，可使瀏覽器方便地獲取新的網(wǎng)頁。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。在網(wǎng)頁中查看源代碼在網(wǎng)頁瀏覽中養(yǎng)成查看源代碼的習(xí)慣，有助于提高對HTML語言的掌握。在IE中查看源代碼的操作步驟如下：（1）在網(wǎng)頁空白處單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“查看源文件”選項(xiàng)如圖7-9所示（2）Windows將自動(dòng)打開

60、記事本，顯示網(wǎng)頁的源代碼，如圖7-10所示在Dreamweaver中查看源代碼在Dreamweaver中提供了十分方便的查看源代碼功能，可以通過單擊文檔工具欄上的代碼按鈕，切換到“代碼”視圖來查看，如圖7-11所示。也可以通過單擊文檔工具欄上的拆分按鈕來同時(shí)在文檔窗口中顯示源代碼和頁面，如圖7-12所示。也可使用代碼檢查器，在單獨(dú)的編碼窗口中工作，就像在“代碼”視圖中工作一樣。操作步驟如下：（1）在Dreamweaver中打開一個(gè)網(wǎng)頁。（2）選擇“窗口”“代碼檢查器”。菜單命令或使用“F10”快捷鍵。如圖7-13所示HTML標(biāo)簽簡介HTML標(biāo)記標(biāo)簽通常被稱為HTML標(biāo)簽(HTML tag)，它