網(wǎng)頁美工設(shè)計模塊一 網(wǎng)頁設(shè)計基礎(chǔ)

網(wǎng)頁美工設(shè)計模塊一網(wǎng)頁設(shè)計根底任務(wù)一初識網(wǎng)頁美工教學(xué)目標教學(xué)重難點1.了解網(wǎng)頁美工的任務(wù)2．理清網(wǎng)頁美工的設(shè)計流程通過學(xué)習(xí)，學(xué)生能夠：1．了解網(wǎng)頁美工任務(wù)概述2.理清網(wǎng)頁美工的設(shè)計流程3.了解網(wǎng)頁美工的設(shè)計概述新課導(dǎo)入網(wǎng)頁美工是對平面視覺傳達設(shè)計美學(xué)的一種繼承和延伸，兩者的表現(xiàn)形式和目的都有一定相似性。網(wǎng)頁美工把傳統(tǒng)平面設(shè)計中美的形式規(guī)律同現(xiàn)代的網(wǎng)頁設(shè)計的具體問題結(jié)合起來，將一些平面設(shè)計中美的根本形式運用到網(wǎng)頁中去，增加網(wǎng)頁設(shè)計的美感，滿足群眾的視覺審美需求。目標展示如以下圖所示，網(wǎng)頁美工設(shè)計與企業(yè)整體形象一致。注意網(wǎng)頁色彩、圖片的應(yīng)用及版面規(guī)劃，保持網(wǎng)頁的整體一致性。手寫板，超越傳統(tǒng)辦公的筆和紙，網(wǎng)站規(guī)劃表達主旨，傳承傳統(tǒng)而又賦予創(chuàng)意，版面簡潔，色彩協(xié)調(diào)。手寫板的網(wǎng)站設(shè)計任務(wù)分解網(wǎng)頁美工顧名思義就是對網(wǎng)頁進行美化，其主要任務(wù)之一是制作網(wǎng)頁效果圖。網(wǎng)頁效果圖，又稱頁面效果圖，用于建站前期，是一個網(wǎng)頁頁面的圖片表現(xiàn)形式。也就是說，將網(wǎng)頁頁面用圖片的形式表現(xiàn)出來。網(wǎng)站制作人員在了解客戶需求之后，根據(jù)客戶需求起草網(wǎng)站籌劃書，客戶同意籌劃方案后，網(wǎng)站美工要制作出假設(shè)干張網(wǎng)頁效果圖，用戶選取一張用來做模型，或者根據(jù)用戶意見再次修改效果圖，直到用戶滿意。網(wǎng)站前臺人員以效果圖為模型，使用Dreamweaver等網(wǎng)頁制作軟件搭建成真正的網(wǎng)站。一、網(wǎng)頁美工任務(wù)概述任務(wù)分解二、網(wǎng)頁美工設(shè)計流程1．需求分析與客戶的充分溝通，了解客戶的需求是創(chuàng)作網(wǎng)頁的前提。2．網(wǎng)站規(guī)劃網(wǎng)站工程的規(guī)劃十分重要，其根本原那么是先整體布局，再局部整理，力求做到條理清晰、內(nèi)容明確。3.繪制效果圖通過前期的溝通與籌劃，使用圖形軟件實施創(chuàng)意，完成初步的作品設(shè)計，即提供網(wǎng)頁效果圖。4.客戶反響在提供效果圖后，設(shè)計師需要根據(jù)客戶提出的修改建議修正設(shè)計作品，最終達成一致意見。5.切片與輸出根據(jù)網(wǎng)頁制作的需要，完成效果圖切片，并輸出為相應(yīng)格式的單個文件，為完成整個網(wǎng)站的后期開發(fā)作好準備。二、網(wǎng)頁美工設(shè)計概述任務(wù)分解1.網(wǎng)頁創(chuàng)意既要考慮網(wǎng)頁的新穎獨特，又要考慮網(wǎng)頁是否符合行業(yè)特點及網(wǎng)頁整體功能的實現(xiàn)。2.網(wǎng)頁版面構(gòu)成要素點、線、面的和諧構(gòu)成。3.網(wǎng)頁色彩規(guī)劃一是先定主色、再配輔色；二是有效利用其他色彩進行網(wǎng)頁色彩搭配；三是注意色彩的比照。作業(yè)布置在互聯(lián)網(wǎng)上瀏覽網(wǎng)頁，下載3張讓人賞心悅目的網(wǎng)頁，并具體闡述其優(yōu)點。

網(wǎng)頁美工設(shè)計模塊一網(wǎng)頁設(shè)計根底任務(wù)二網(wǎng)頁設(shè)計欣賞教學(xué)目標教學(xué)重難點1．提高網(wǎng)頁鑒賞能力。

通過學(xué)習(xí)，學(xué)生能夠：1．了解網(wǎng)站規(guī)劃的根底知識，了解網(wǎng)頁創(chuàng)意的根本方法，進而提高網(wǎng)頁鑒賞能力。新課導(dǎo)入如何才能設(shè)計出與眾不同的漂亮的網(wǎng)頁?除了豐富的內(nèi)容、合理的版式、獨特的風(fēng)格和賞心悅目的色彩，作為一名網(wǎng)頁設(shè)計者就應(yīng)該拓寬視野，使自己了解更多不同的類型和不同風(fēng)格的網(wǎng)頁，這樣才能不斷地提高自己的設(shè)計水平。所以，對于初學(xué)者來說，網(wǎng)頁欣賞是至關(guān)重要的，因為只有在量的積累下，才會有質(zhì)的提升。本任務(wù)通過對信息資訊類、電子科技類、文化教育類、休閑娛樂類、個性類網(wǎng)站的欣賞與分析，讓網(wǎng)頁美工設(shè)計初學(xué)者了解網(wǎng)站規(guī)劃的根底知識，了解網(wǎng)頁創(chuàng)意的根本方法，進而提高網(wǎng)頁鑒賞能力。目標展示如以下圖所示，網(wǎng)頁美工設(shè)計與企業(yè)整體形象一致。注意網(wǎng)頁色彩、圖片的應(yīng)用及版面規(guī)劃，保持網(wǎng)頁的整體一致性。手寫板，超越傳統(tǒng)辦公的筆和紙，網(wǎng)站規(guī)劃表達主旨，傳承傳統(tǒng)而又賦予創(chuàng)意，版面簡潔，色彩協(xié)調(diào)。手寫板的網(wǎng)站設(shè)計任務(wù)分解資訊及信息門戶類網(wǎng)站具有傳媒特性，提供新聞或行業(yè)信息的發(fā)布傳播。此類網(wǎng)站除提供資訊信息外還同時運營其他網(wǎng)絡(luò)效勞。比較顯著的特點是信息量大，內(nèi)容豐富，頁面通常為分欄結(jié)構(gòu)，排版較長。如以下圖。一、資訊類網(wǎng)站任務(wù)分解二、電子科技類電子科技類網(wǎng)站多采用冷色調(diào)，給人深厚的科技感。色彩大多以藍色為主，再搭配明度不一的灰色或白色，使整體看上去穩(wěn)重、大方、整潔、干凈。此類網(wǎng)站版式多以橫向分欄或居中的風(fēng)格居多。三、文化教育類任務(wù)分解教育類網(wǎng)站的主要目的是宣傳和推廣教育、正確引導(dǎo)學(xué)生學(xué)習(xí)知識。一般來說教育網(wǎng)站在整體設(shè)計給人很強的文化氣息，根本采用圖片與文字搭配，簡潔、緊湊的布局排版風(fēng)格，且其文字介紹內(nèi)容簡單明了，頁面效果簡潔細致。四、休閑娛樂類任務(wù)分解娛樂類網(wǎng)站多以色彩豐富著稱，最重要的就是要有很強的視覺性和娛樂性。為了突出宣傳效果，往往都會使用大幅的圖片或者動畫，因此，這些內(nèi)容一般也都會擺放在頁頭或中間醒目的位置。網(wǎng)站設(shè)計師會應(yīng)用一些色彩鮮艷、表現(xiàn)強烈的顏色到娛樂類網(wǎng)站的設(shè)計中，應(yīng)用這些色彩可加深瀏覽者的印象，以到達加重瀏覽者感觀刺激的作用。五、個性化網(wǎng)頁任務(wù)分解個性化網(wǎng)站大多反映的是個人的喜好和性格，其版式隨意自然，內(nèi)容的劃分全靠網(wǎng)頁的各項具體元素來承擔(dān)。這些網(wǎng)站往往以大面積簡潔，小面積繁復(fù)為主。各項繁復(fù)的小元素構(gòu)成網(wǎng)站的版式、網(wǎng)站內(nèi)容、網(wǎng)站的色彩和網(wǎng)站的細節(jié)。換句話說就是利用小畫來畫出大畫。網(wǎng)頁美工設(shè)計模塊一網(wǎng)頁設(shè)計根底任務(wù)三

認識網(wǎng)頁元素教學(xué)目標教學(xué)重難點1．了解網(wǎng)頁元素的構(gòu)成。通過學(xué)習(xí)，學(xué)生能夠：1．通過對網(wǎng)頁常見組成元素的欣賞與分析，讓網(wǎng)頁美工設(shè)計者初步了解網(wǎng)頁元素的構(gòu)成。

新課導(dǎo)入網(wǎng)站由多張網(wǎng)頁構(gòu)成，每張網(wǎng)頁包含大量的內(nèi)容，以內(nèi)容來劃分，一般的網(wǎng)頁界面包括網(wǎng)站Logo、網(wǎng)站Banner、導(dǎo)航欄、文字、圖像、鏈接六局部。目標展示中興網(wǎng)站展示，組成網(wǎng)頁的六要素，如圖網(wǎng)站logo網(wǎng)站Banner導(dǎo)航欄文字圖片鏈接任務(wù)分解一、網(wǎng)頁logo任務(wù)分解二、網(wǎng)頁Banner網(wǎng)頁Banner主要表達網(wǎng)頁中心意旨，形象鮮明地表達網(wǎng)站最主要的情感思想。Banner可以是網(wǎng)站頁面的橫幅廣告、也可以是主題內(nèi)容的集中呈現(xiàn)多。如以下圖。三、網(wǎng)頁導(dǎo)航任務(wù)分解四、休閑娛樂類任務(wù)分解文本是網(wǎng)頁中的主要信息。在網(wǎng)頁中可以通過字體、字號、顏色、底紋以及邊框等來設(shè)置文本屬性。這里指的文字是文本文字，而并非圖片中的文字。如以下圖，某電子雜志。五、網(wǎng)頁圖像任務(wù)分解圖片不僅能夠增加網(wǎng)頁的吸引力，同時也大大地提升了用戶在瀏覽網(wǎng)頁的體驗。圖像在網(wǎng)頁中具有畫龍點睛的作用,它能裝飾網(wǎng)頁,表達個人的情調(diào)和風(fēng)格。常用的圖像格式有g(shù)if、jpg和png三種。用的最多的是gif和jpg兩種。雖然圖片有很多的優(yōu)點，但并不是參加的圖片越多越好。圖像和動畫越多，網(wǎng)頁的瀏覽速度就會收到影響。如以下圖。六、網(wǎng)頁鏈接任務(wù)分解超鏈接是整個網(wǎng)站的通道，它是把網(wǎng)頁指向另一個目的端的鏈接。例如指向另一個網(wǎng)頁或相同網(wǎng)頁上的不同位置。這個目的端通常是另一個網(wǎng)頁，但也可以是圖片、電子郵件地址、文件、程序，或者也可以是本網(wǎng)站的其他位置。超鏈接可以是文本或者圖片。作業(yè)布置瀏覽網(wǎng)頁，下載一張網(wǎng)頁并注明網(wǎng)頁的主要組成元素。網(wǎng)頁美工設(shè)計模塊一網(wǎng)頁設(shè)計根底任務(wù)四

認識網(wǎng)頁布局教學(xué)目標教學(xué)重難點1．了解網(wǎng)頁常用布局方式的特點通過學(xué)習(xí)，學(xué)生能夠：1．了解網(wǎng)頁的常用布局方式

新課導(dǎo)入網(wǎng)頁可以說是網(wǎng)站構(gòu)成的根本元素。當我們輕點鼠標，在網(wǎng)海中遨游，一副副精彩的網(wǎng)頁會呈現(xiàn)在我們面前，那么，網(wǎng)頁的精彩與否的因素是什么呢？色彩的搭配、文字的變化、圖片的處理等，這些當然是不可忽略的因素，除了這些，還有一個非常重要的因素——網(wǎng)頁的布局。網(wǎng)頁的布局方式總是在不斷變化著的。因為，只有不斷的變化才會提高，才會不斷豐富我們的網(wǎng)頁!任務(wù)分解一、國字型任務(wù)分解二、拐角型這種結(jié)構(gòu)與上一種其實是很相近的，只是形式上的區(qū)別，上面是標題及廣告橫幅，左側(cè)是窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。采用拐角型布局設(shè)計的網(wǎng)頁，如圖肯德基的網(wǎng)站設(shè)計。三、T字型任務(wù)分解T型布局指網(wǎng)頁上方是網(wǎng)站標志及廣告條、下方左半部為主菜單、右半局部顯示內(nèi)容的布局。因為看上去像英文字母“T〞，所以稱為T型布局。T型布局的優(yōu)點是頁面結(jié)構(gòu)清晰，主次清楚，強調(diào)秩序，能給人以穩(wěn)重、可信賴的感覺，比較容易上手。缺點是規(guī)矩呆板，如果細節(jié)和色彩搭配不當，容易產(chǎn)生乏味的感覺。采用T字型布局的網(wǎng)頁設(shè)計。如以下圖。四、框架型任務(wù)分解框架型布局一般分為上下、左右和綜合布局，一般左面是導(dǎo)航鏈接，有時最上面會有一個小的標題或標志，右面是正文。我們見到的大局部的大型論壇都是這種結(jié)構(gòu)，有一些企業(yè)網(wǎng)站也喜歡采用該結(jié)構(gòu)。這種類型結(jié)構(gòu)非常清晰，一目了然。最典型的綜合框架型頁面布局如以下圖。五、“三〞型布局任務(wù)分解“三〞字形布局這是一種簡潔明快的網(wǎng)頁布局，這種布局多用于國外站點，國內(nèi)用的不多。特點是