《Flash CS6動畫制作（第3版）》課件 項目3 Flash網(wǎng)站的設(shè)計與制作

FlashCS6動畫制作電子工業(yè)出版社Flash網(wǎng)站的設(shè)計與制作項目3項目3Flash網(wǎng)站的設(shè)計與制作│

項目分析本項目先介紹Flash網(wǎng)站的架構(gòu)與應(yīng)用領(lǐng)域，然后介紹Flash網(wǎng)站美工設(shè)計，最后介紹Logo動畫和Flash網(wǎng)站的制作，由此引領(lǐng)讀者完成Flash網(wǎng)站的設(shè)計與制作。任務(wù)1熟識Flash網(wǎng)站的架構(gòu)與應(yīng)用領(lǐng)域Flash網(wǎng)站，顧名思義，就是通過Flash技術(shù)制作的網(wǎng)站，網(wǎng)頁內(nèi)容基本上以圖形和動畫為主，比較適合制作以文字內(nèi)容為輔，以平面、動畫視覺效果呈現(xiàn)為主的網(wǎng)站，如企業(yè)品牌推廣、特定網(wǎng)絡(luò)廣告、網(wǎng)絡(luò)游戲、個性網(wǎng)站等。本任務(wù)主要介紹Flash網(wǎng)站的架構(gòu)與應(yīng)用領(lǐng)域等。任務(wù)目標(biāo)（1）掌握Flash網(wǎng)站的架構(gòu)。（2）了解Flash網(wǎng)站的應(yīng)用領(lǐng)域。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的架構(gòu)與網(wǎng)站的主體框架類似，網(wǎng)站的架構(gòu)具有支撐網(wǎng)站的作用，就像人是由骨骼和血肉組成的，網(wǎng)站的架構(gòu)正如人的骨架一樣，由此可見，網(wǎng)站的架構(gòu)對于網(wǎng)站來說非常重要。1．網(wǎng)站的開發(fā)流程為了加快建設(shè)網(wǎng)站的速度和降低項目失敗的風(fēng)險，應(yīng)該采用一定的流程來策劃、設(shè)計、制作和發(fā)布網(wǎng)站。網(wǎng)站的開發(fā)流程如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的架構(gòu)2．客戶需求分析客戶需求分析的主要任務(wù)就是把客戶的需求信息有機地表現(xiàn)出來，把網(wǎng)站的目標(biāo)信息有效地傳達給瀏覽者或潛在用戶，從而達到最佳的網(wǎng)站營銷效果。3．網(wǎng)站策劃設(shè)計（1）確定網(wǎng)站的目標(biāo)。建立網(wǎng)站的第一步就是確定目標(biāo)。由于網(wǎng)站的分類不同，目標(biāo)受眾也不同，因此在建立網(wǎng)站之前需要考慮網(wǎng)站所面對的對象。不同的網(wǎng)站有不同的目標(biāo)，所以獲得的收益不同。（2）確定網(wǎng)站的主題。網(wǎng)站的主題就是網(wǎng)站所要表達的主要內(nèi)容，是對網(wǎng)站的一個準(zhǔn)確定位。在選擇主題和內(nèi)容時，主題定位要小，內(nèi)容要精。不要試圖做一個包羅萬象的網(wǎng)站，這樣往往會使網(wǎng)站失去特色。（3）確定網(wǎng)站的界面。界面是網(wǎng)站給瀏覽者的第一印象，建立網(wǎng)站就像寫論文，要先列大綱，才能主題明確、層次清晰。不僅要仔細考慮每個欄目和板塊的組織編排，把架構(gòu)規(guī)劃好，還要考慮到以后的可擴充性，避免制作過程中多次修改整個網(wǎng)站的架構(gòu)。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的架構(gòu)（4）確定網(wǎng)站的內(nèi)容。網(wǎng)站的內(nèi)容和網(wǎng)站的建設(shè)目標(biāo)及類型有很大的關(guān)系。個人網(wǎng)站的內(nèi)容依賴個人的興趣、愛好及其愿意為瀏覽者提供的特殊信息。企業(yè)網(wǎng)站一般用于展示其組織結(jié)構(gòu)、業(yè)務(wù)范圍、產(chǎn)品類型等。商業(yè)網(wǎng)站要根據(jù)網(wǎng)站提供的服務(wù)、實現(xiàn)的功能、達到的目標(biāo)來確定內(nèi)容。（5）確定網(wǎng)站的風(fēng)格。風(fēng)格是指網(wǎng)站帶給瀏覽者的綜合感受，包括網(wǎng)站的形象設(shè)計、版面布局、瀏覽方式、交互性等因素，不管是哪個因素，都要能夠突出網(wǎng)站的獨特性。（6）確定網(wǎng)站的功能。個人、企業(yè)做網(wǎng)站首先要知道自己想要的功能。網(wǎng)站的功能可以從系統(tǒng)、布局或交互的角度等多個方面進行描述。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的架構(gòu)4．網(wǎng)站整體設(shè)計1）欄目結(jié)構(gòu)的劃分網(wǎng)站結(jié)構(gòu)是網(wǎng)站設(shè)計的基礎(chǔ)，網(wǎng)站結(jié)構(gòu)劃分就是將網(wǎng)站的架構(gòu)通過圖表的形式表現(xiàn)出來。合理的結(jié)構(gòu)設(shè)計對于網(wǎng)站的規(guī)劃是非常重要的，下面介紹3種常用的結(jié)構(gòu)類型。（1）層狀結(jié)構(gòu)：類似于目錄系統(tǒng)的樹形結(jié)構(gòu)。層狀結(jié)構(gòu)是按照網(wǎng)頁之間的包含關(guān)系組織而成的，結(jié)構(gòu)簡單且直觀，條理清晰，能將所有的內(nèi)容劃分得非常清晰且便于理解。層狀結(jié)構(gòu)如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的架構(gòu)（2）線性結(jié)構(gòu)：類似于數(shù)據(jù)結(jié)構(gòu)中的線性表，如網(wǎng)絡(luò)服務(wù)器的鏈接，各頁面之間都建立了鏈接，可以引導(dǎo)瀏覽者按部就班地瀏覽整個網(wǎng)站的文件。線性結(jié)構(gòu)常用于制作需要按步驟進行的欄目，如用戶注冊、建立訂單等。線性結(jié)構(gòu)如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的架構(gòu)（3）Web結(jié)構(gòu)：類似于Internet的組成結(jié)構(gòu)，各網(wǎng)頁之間形成網(wǎng)狀連接，允許用戶隨意瀏覽。Web結(jié)構(gòu)如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的架構(gòu)2）網(wǎng)站版式布局的設(shè)計和傳統(tǒng)的報刊類似，網(wǎng)站頁面也需要進行排版布局。在設(shè)計時要把文字、圖片、空白當(dāng)作一個整體來看待，采用劃分平面的方式，在傳達信息的同時使瀏覽者產(chǎn)生感觀與精神上美的享受。網(wǎng)站版式布局是一種不同于傳統(tǒng)媒體的具有獨特風(fēng)格和藝術(shù)特色的視聽表現(xiàn)方式，下面探討網(wǎng)站版式布局的設(shè)計。（1）對齊式布局。這種版式布局可分為上下對齊和左右對齊兩種，使文字、圖像等元素按比例合理布局。如圖所示，頁面采用的是左右對齊式布局，滿載文字信息，一點兒都不浪費空間，是特別適合傳遞商業(yè)性信息的版式。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的架構(gòu)（2）全景式布局。這種版式布局可以分散排列多張圖片，看起來就像在瀏覽電子畫冊一樣，可以自由、輕松地細細品味，如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的架構(gòu)（3）包圍式布局。這種版式布局的基本構(gòu)思是在頁面四周用純色或圖案包圍起來，以便產(chǎn)生一個被界定的區(qū)域，如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的架構(gòu)（4）對稱式布局。這種版式布局以中心線為基準(zhǔn)，且左右對稱。這種版式是最常見的，是一種格調(diào)高雅的穩(wěn)定型版式，給人以嚴謹、理性的感覺。如圖所示，黑白兩色將頁面分為左右對稱的形式，不但背景對稱，圖像也對稱，充分體現(xiàn)了頁面主題。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的架構(gòu)（5）滿版式布局。這種版式布局以圖像充滿屏幕，主要以圖像為訴求點，可以將部分文字置于圖像之上。其視覺傳達效果直觀而突出，給人以生動大方的感覺。如圖所示，整個畫面充滿了音樂氣息，樂符、音響、吉他等元素的出現(xiàn)，使畫面更具有律動感和空間感。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的架構(gòu)（6）三角形布局。這種版式布局是指網(wǎng)頁中的各視覺元素呈三角形或多角形排列。正三角形最具穩(wěn)定性；倒三角形可產(chǎn)生動感；側(cè)三角形則構(gòu)成一種均衡版式，既安定又有動感。如圖所示，將兩個三角形分別放置在相應(yīng)的對角上，并配以標(biāo)志及導(dǎo)航，可以突顯主題內(nèi)容，使畫面更具動感、現(xiàn)代感。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的架構(gòu)（7）自由式布局。采用這種版式布局的頁面具有活潑、輕快的氣氛。如圖所示，素描風(fēng)格的背景搭配貼畫風(fēng)格的人物，有趣的導(dǎo)航奇妙地融入其中，這樣搭配組合的構(gòu)圖自由、形式獨特，且極具趣味性。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)站的應(yīng)用領(lǐng)域Flash網(wǎng)站以強大的交互性、無縫的跳轉(zhuǎn)鏈接、跨平臺和客戶端的支持、極具視覺沖擊的表現(xiàn)力而深受大眾的喜愛，其應(yīng)用領(lǐng)域也越來越廣泛。1．網(wǎng)絡(luò)游戲利用Flash技術(shù)開發(fā)的網(wǎng)絡(luò)游戲是一種新興的游戲形式，以畫面精美、操作簡單、無須安裝等優(yōu)點深受廣大網(wǎng)友青睞。隨著Flash技術(shù)的迅速發(fā)展，F(xiàn)lash網(wǎng)絡(luò)游戲發(fā)展空間巨大。網(wǎng)絡(luò)游戲的代表：仙劍類《飄渺仙緣》、角色扮演《十年一劍》、策略類《三十六計》等。2．電子雜志企業(yè)文化的建設(shè)直接影響企業(yè)的凝聚力和競爭力，越來越多的企業(yè)開始注重并花費大量的人力和財力進行這方面的團隊建設(shè)。傳統(tǒng)的板報和告示欄顯然已無法滿足需求，網(wǎng)絡(luò)傳播成了最有效且最經(jīng)濟的手段。電子雜志是網(wǎng)絡(luò)時代的一種重要工具，可以用于各種群體之間的信息交流和信息發(fā)布。通過電子雜志可以輕松解決印制成本及運輸費用的問題。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)站的應(yīng)用領(lǐng)域3．特定網(wǎng)上廣告與傳統(tǒng)的廣告相比，使用Flash制作的廣告具有明顯的優(yōu)勢，因為其制作成本低、周期短、產(chǎn)品多樣化、自由度高且具有交互性。Flash廣告可以通過網(wǎng)絡(luò)有目的地將產(chǎn)品信息隨著動畫悄無聲息地傳遞給用戶，使用戶在不知不覺中了解產(chǎn)品，并且不容易產(chǎn)生逆反心理，也突顯了Flash在商業(yè)推廣上的巨大價值。4．企業(yè)品牌推廣Flash網(wǎng)站以新穎獨特的視覺體驗，被越來越多的有實力的企業(yè)所引用。Flash網(wǎng)站對企業(yè)品牌推廣來說效果非常好，特別是一些高端的汽車品牌和房地產(chǎn)項目。除了上述應(yīng)用，F(xiàn)lash網(wǎng)站還可以用于企業(yè)宣傳、產(chǎn)品展示、形象推廣、動態(tài)視頻展示等。項目3Flash網(wǎng)站的設(shè)計與制作模擬實訓(xùn)一、實訓(xùn)目的（1）掌握Flash網(wǎng)站的架構(gòu)。（2）了解Flash網(wǎng)站的應(yīng)用領(lǐng)域。二、實訓(xùn)內(nèi)容分組制作網(wǎng)站的策劃書（自選題目），應(yīng)包括建設(shè)網(wǎng)站的目標(biāo)、主題、功能和欄目內(nèi)容，在Word或Photoshop中制作網(wǎng)站結(jié)構(gòu)圖和版式布局設(shè)計草圖。項目3Flash網(wǎng)站的設(shè)計與制作任務(wù)2掌握Flash網(wǎng)站美工設(shè)計人們對美的追求是不斷加深的，網(wǎng)頁設(shè)計也是如此。網(wǎng)頁設(shè)計的審美需求是對平面視覺傳遞美學(xué)設(shè)計的一種繼承和拓展。需要考慮如何提高用戶接收網(wǎng)頁信息的效率，增加網(wǎng)頁設(shè)計的美感，從而迎合大眾的視覺審美。本任務(wù)主要介紹Flash網(wǎng)站美工設(shè)計的相關(guān)知識，包括Flash網(wǎng)頁的平面構(gòu)成、色彩搭配及設(shè)計風(fēng)格等。任務(wù)目標(biāo)（1）了解Flash網(wǎng)頁的平面構(gòu)成。（2）熟悉Flash網(wǎng)頁的色彩搭配。（3）掌握Flash網(wǎng)頁的設(shè)計風(fēng)格。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)頁的平面構(gòu)成網(wǎng)頁具有獨特的信息表達方式和強大的交互性，因此網(wǎng)頁設(shè)計在平面構(gòu)成的創(chuàng)意上受到諸多限制和挑戰(zhàn)。在設(shè)計網(wǎng)頁時，運用平面構(gòu)成的原理和藝術(shù)表現(xiàn)形式能夠使網(wǎng)頁效果更加豐富。1．平面構(gòu)成的形式表現(xiàn)平面構(gòu)成的原理已經(jīng)廣泛應(yīng)用于不同的設(shè)計領(lǐng)域，在網(wǎng)頁設(shè)計中也不例外。1）分割構(gòu)成在平面構(gòu)成中，把整體分成各個部分稱為分割，下面介紹幾種常用的分割方法。（1）等形分割。這種分割方法要求分割的形狀完全相同，分割后再加上分割線用于界定會有更好的效果。等形分割頁面示例如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)頁的平面構(gòu)成（2）自由分割。這種分割方法將畫面進行自由分割，呈現(xiàn)的是不規(guī)則的形狀。不同于等形分割的整齊效果，自由分割根據(jù)圖像效果隨意分割，以呈現(xiàn)活潑靈動的感覺。自由分割頁面示例如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)頁的平面構(gòu)成2）對稱構(gòu)成對稱通常分為上下、左右或反射等基本形式，但僅限于此不免單調(diào)乏味，所以在設(shè)計網(wǎng)頁時要在基本形式的基礎(chǔ)上添加靈活的運用，這樣才能達到意想不到的效果。網(wǎng)頁中常用的幾種對稱形式如下。（1）左右對稱。這種對稱形式在平面構(gòu)成中最常見，可以將對立的元素在一個頁面中平衡放置。左右對稱頁面示例如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)頁的平面構(gòu)成（2）中軸對稱。這種對稱形式的布局比較簡單，所以在修飾方面也盡量以簡單樸素的方式呈現(xiàn)。中軸對稱頁面示例如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)頁的平面構(gòu)成（3）回旋對稱。這種對稱形式給人一種相對平衡的感覺，使用該形式布局網(wǎng)頁時，打破了常規(guī)的設(shè)計習(xí)慣，可以給人耳目一新的感覺?；匦龑ΨQ頁面示例如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)頁的平面構(gòu)成3）平衡構(gòu)成在設(shè)計的時候，平衡是非常重要的因素。平衡可以讓人們在瀏覽網(wǎng)頁時產(chǎn)生視覺上的滿足感。平衡構(gòu)成一般分為對稱平衡和非對稱平衡兩種。（1）對稱平衡。這種平衡方法是最自然、最常用到的。在網(wǎng)頁中，整體或局部采用對稱平衡布局，可以在視覺上達到平衡，讓畫面呈現(xiàn)穩(wěn)定感。對稱平衡頁面示例如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)頁的平面構(gòu)成（2）非對稱平衡。這種平衡方法并非真正的“不對稱”，而是更高層次的“對稱”，如果沒有設(shè)計好，頁面就會顯得凌亂，故采取這種方法進行布局時要謹慎。非對稱平衡頁面示例如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)頁的平面構(gòu)成2．平面構(gòu)成的紋理表現(xiàn)紋理是網(wǎng)頁中重要的視覺特征，其實際上來源于色彩。在網(wǎng)頁設(shè)計中，采用不同的紋理，搭配對應(yīng)的內(nèi)容，能夠給瀏覽者留下深刻的印象，尤其是紙質(zhì)、木紋等圖案更具有真實感，而發(fā)散和密集的構(gòu)成也可以增加網(wǎng)頁的空間感。1）肌理構(gòu)成肌理也可以理解為質(zhì)感，由于不同物體的材料不同，表現(xiàn)出的組織、構(gòu)造也不同，因此產(chǎn)生的光滑感、粗糙感和軟硬感不同。在網(wǎng)頁設(shè)計中，為了達到預(yù)期的效果，強化心理表現(xiàn)和獨特的視覺呈現(xiàn)，可以通過多種方法創(chuàng)建不同的肌理構(gòu)成。如圖所示，網(wǎng)頁的背景以木紋圖案構(gòu)成，可以更好地襯托網(wǎng)站主題。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)頁的平面構(gòu)成2）發(fā)散構(gòu)成發(fā)散現(xiàn)象在日常生活中隨處可見，如太陽的光芒、怒放的花朵、蜘蛛網(wǎng)等都可以構(gòu)成發(fā)散的圖形。發(fā)散其實是一種特殊的重復(fù)和漸變，基本的線條、形狀圍繞一個中心，形成強烈的視覺效果，可以產(chǎn)生炫目、富有節(jié)奏變化的頁面，如圖所示。這種構(gòu)圖由中心向外或由外向中心集中，以螺旋線的方式排列發(fā)散。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)頁的平面構(gòu)成3）密集構(gòu)成密集構(gòu)成在網(wǎng)頁設(shè)計中也是常見的構(gòu)圖方式。這種構(gòu)圖使用基本形狀在整個頁面中自由發(fā)散，最集中或最稀疏的地方常常成為設(shè)計的視覺焦點，在構(gòu)圖上呈現(xiàn)了視覺的張力。如圖所示，使用密集的方塊構(gòu)成網(wǎng)頁畫面，呈現(xiàn)有韻律的節(jié)奏感。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)頁的平面構(gòu)成3．平面構(gòu)成的藝術(shù)表現(xiàn)重復(fù)、漸變和空間構(gòu)成屬于色彩構(gòu)成的方式，適用于網(wǎng)頁設(shè)計。運用這些方式可以使網(wǎng)頁具有豐滿、穩(wěn)重、整體的視覺感觀。1）重復(fù)構(gòu)成重復(fù)構(gòu)成方式是指相同的形狀在同一頁面中多次出現(xiàn)，利用重復(fù)的圖案加深人們的印象，突出主題，在網(wǎng)頁設(shè)計中可以以背景和圖像兩種形式出現(xiàn)。重復(fù)構(gòu)成頁面示例如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)頁的平面構(gòu)成2）漸變構(gòu)成漸變構(gòu)成方式以基本的形狀形成漸次的構(gòu)圖變化。漸變構(gòu)成頁面示例如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作了解Flash網(wǎng)頁的平面構(gòu)成3）空間構(gòu)成一般的空間是指二維空間。在日常生活中，人們會覺得遠處的物體小，而近處的物體大，對這些特性加以分析，可以形成立體空間元素的構(gòu)成法則。如圖所示，可以利用文字的扭曲、線條的延伸和圖像的虛實營造出平面圖像上下、前后的感覺，制造空間感。項目3Flash網(wǎng)站的設(shè)計與制作熟悉Flash網(wǎng)頁的色彩搭配在構(gòu)思設(shè)計Flash網(wǎng)頁的過程中，可以模仿但不能千篇一律，在設(shè)計中要能夠看到新的創(chuàng)意與不同意境的表達，同樣的事物，不同的人看到的和感受到的，以及想要表達的思路是不盡相同的，因此，激發(fā)創(chuàng)意思維，特別是空間想象思維是非常關(guān)鍵的。這就需要有較好的審美品位，了解基本的配色原則。認識色彩時，除了存在客觀方面的因素，還存在主觀方面的因素，色彩信息作用于人的視覺器官，通過視覺神經(jīng)傳入大腦后，根據(jù)以往的記憶及經(jīng)驗產(chǎn)生聯(lián)想，從而形成一系列的色彩心理反應(yīng)。下面是幾種Flash網(wǎng)頁的配色方案。1．冷、暖感覺的配色色彩本身并無冷、暖的溫度差別，而是視覺色彩引起的人們對冷、暖感覺的心理聯(lián)想。看到藍色、藍紫色、藍綠色等配色后，人們很容易聯(lián)想到太空、冰雪、海洋等物象，產(chǎn)生寒冷、理智、平靜等感覺。其所激起的情感和表示暖的色彩所激發(fā)的情感完全不同。項目3Flash網(wǎng)站的設(shè)計與制作熟悉Flash網(wǎng)頁的色彩搭配2．輕、重感覺的配色色彩的明度與純度會引起人們對色彩物理印象的錯覺。一般來說，顏色的重量感主要取決于色彩的明度，明色給人以輕的感覺。明度高的色彩會使人聯(lián)想到藍天、白云、花卉、棉花、羊毛等，可以產(chǎn)生輕柔、漂浮、上升、敏捷、靈活等感覺，如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作熟悉Flash網(wǎng)頁的色彩搭配3．興奮、舒適的配色色彩的色相和明度會給人以興奮或舒適等感受。例如，紅色、橙色、黃色等鮮艷而明亮的色彩會給人以興奮感，高明度、高純度的色彩也會使人產(chǎn)生興奮感。如圖1所示，頁面中大面積橙色和白色營造的氛圍比較容易讓人興奮，橙色的搭配使頁面在冬日里看起來更加溫暖，畫面更具渲染力；如圖2所示，頁面顏色非常柔和，給人一種舒適的感覺。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)頁的設(shè)計風(fēng)格隨著人們對審美要求的不斷提高，網(wǎng)頁視覺效果的呈現(xiàn)也越來越受到重視。根據(jù)不同的客戶需求，設(shè)計出不同風(fēng)格的網(wǎng)頁至關(guān)重要。下面介紹幾種不同風(fēng)格的網(wǎng)頁設(shè)計。1．平面風(fēng)格平面風(fēng)格的網(wǎng)頁通過色塊或位圖等元素展現(xiàn)形成二維的畫面效果，如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)頁的設(shè)計風(fēng)格2．矢量風(fēng)格矢量風(fēng)格的網(wǎng)頁是由矢量圖像組合而成的，網(wǎng)頁的圖像效果可以任意縮放，不會影響展示效果。矢量風(fēng)格是動畫網(wǎng)站中常見的一種設(shè)計風(fēng)格。矢量風(fēng)格網(wǎng)頁示例如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)頁的設(shè)計風(fēng)格3．像素風(fēng)格像素風(fēng)格的網(wǎng)頁使用圖標(biāo)風(fēng)格的圖像制作，以強調(diào)鮮明的輪廓、亮麗的色彩，同時，其造型比較卡通，受到很多用戶的喜愛。如圖所示，網(wǎng)頁采用真人和像素畫相結(jié)合的方式制作而成。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)頁的設(shè)計風(fēng)格4．三維風(fēng)格三維是在二維坐標(biāo)系中增加了一個方向向量，構(gòu)成了空間。三維風(fēng)格中的立體空間效果，能夠在突出主題的同時無限延伸視線，如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作模擬實訓(xùn)一、實訓(xùn)目的（1）了解Flash網(wǎng)頁的平面構(gòu)成。（2）熟悉Flash網(wǎng)頁的色彩搭配。（3）欣賞不同的Flash網(wǎng)頁的設(shè)計風(fēng)格。二、實訓(xùn)內(nèi)容分析如圖所示的美容網(wǎng)站的美工設(shè)計。項目3Flash網(wǎng)站的設(shè)計與制作任務(wù)3制作Logo動畫在全球競爭加劇、人們注意力持續(xù)時間持續(xù)縮短的當(dāng)今社會，如何為人們提供新鮮的視覺感受，讓品牌脫穎而出變得更加重要。動態(tài)的物體可以迅速抓住人們的眼球，引起他們的興趣。利用Flash軟件將Logo設(shè)計與動畫相結(jié)合，可以創(chuàng)造出具有動態(tài)效果的、引人注意的品牌形象。這種視覺上的吸引力在充滿噪聲和干擾的數(shù)字世界里，既可以使網(wǎng)站生動有趣又可以留住用戶，提升品牌競爭力。這就是Logo動畫的魅力。任務(wù)目標(biāo)（1）了解Logo動畫。（2）掌握Logo動畫的制作方法。項目3Flash網(wǎng)站的設(shè)計與制作了解Logo動畫Logo是商標(biāo)、徽標(biāo)的英文logotype的縮寫，品牌Logo對企業(yè)而言具有識別和推廣的作用。個性形象的Logo可以讓用戶記住公司主體和品牌文化。在網(wǎng)站中，Logo主要是各個網(wǎng)站用來區(qū)分與其他網(wǎng)站鏈接的圖形標(biāo)志，代表一個網(wǎng)站或網(wǎng)站的一個板塊。Logo動畫一般在網(wǎng)站首頁橫幅中呈現(xiàn)，也可以在網(wǎng)站加載時呈現(xiàn)。Logo動畫其實是把一個靜態(tài)的Logo分解成多個元素，再把Logo的內(nèi)涵與這些元素通過動畫的方式融合在一起，這樣也就把新的生命力注入Logo中，使整個網(wǎng)站更生動、更具有活力。Logo設(shè)計的趨勢離不開當(dāng)下媒體技術(shù)的發(fā)展，隨著動態(tài)設(shè)計的熱度持續(xù)增長，Logo動畫也已經(jīng)常見于網(wǎng)站品牌設(shè)計和營銷方案中。下圖所示為某公司Logo動畫設(shè)計。項目3Flash網(wǎng)站的設(shè)計與制作了解Logo動畫Logo動畫的優(yōu)勢主要包括以下幾點。（1）更好地呈現(xiàn)品牌故事。動態(tài)Logo和傳統(tǒng)的靜態(tài)Logo可以同時存在，如果Logo動起來，設(shè)計師就多了一種傳達品牌故事的方式，可以跳出局限于平面的呈現(xiàn)方式，讓用戶以一種全新的方式來感知品牌。（2）具有更高的識別度。動態(tài)Logo比靜態(tài)Logo更容易被用戶理解和記住，能夠更好地吸引潛在用戶的注意力。（3）喚醒用戶的情緒。動態(tài)圖像不僅能夠讓用戶喜悅、興奮，還可以觸發(fā)用戶不同的情緒。一個有趣的動態(tài)Logo不僅能夠給用戶帶來積極的情緒，還可以使用戶將Logo和快樂的東西聯(lián)系起來。（4）應(yīng)用范圍更廣，效果更好。社交網(wǎng)絡(luò)是產(chǎn)品推廣的主要平臺之一。不管是網(wǎng)頁、App，還是動態(tài)圖片和視頻，都是具有強大傳播力的營銷工具，它們易于共享，承載能力強。因此，Logo動畫更易于在互聯(lián)網(wǎng)上廣泛傳播，同時可以融入產(chǎn)品視頻宣傳等不同的形式，進行廣泛的傳播與分享。項目3Flash網(wǎng)站的設(shè)計與制作模擬實訓(xùn)一、實訓(xùn)目的（1）了解Logo動畫的制作及運用。（2）掌握Logo動畫的制作方法。二、實訓(xùn)內(nèi)容設(shè)計并制作一個學(xué)校的Logo動畫，其Logo如圖所示。項目3Flash網(wǎng)站的設(shè)計與制作任務(wù)4設(shè)計與制作Flash網(wǎng)站Flash網(wǎng)站以其特有的美觀性越來越受到人們的歡迎，使用Flash技術(shù)制作的網(wǎng)站可以彰顯企業(yè)的地位，通過與眾不同的視覺表達帶給用戶高端的感官體驗。本任務(wù)將通過案例介紹Flash網(wǎng)站的設(shè)計與制作。任務(wù)目標(biāo)（1）掌握Flash網(wǎng)站的設(shè)計。（2）掌握Flash網(wǎng)站的制作。項目3Flash網(wǎng)站的設(shè)計與制作掌握Flash網(wǎng)站的設(shè)計1．色彩風(fēng)格的設(shè)計網(wǎng)站的色彩風(fēng)格是一個網(wǎng)站的基調(diào)，不同的色彩搭配，給人的第一感覺也是不一樣的。網(wǎng)頁風(fēng)格的4個基本要素是顏色、線