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

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

網(wǎng)頁設(shè)計基礎(chǔ)任務(wù)一初識網(wǎng)頁美工網(wǎng)頁美工設(shè)計模塊一網(wǎng)頁設(shè)計基礎(chǔ)任務(wù)一初識網(wǎng)頁美工教學(xué)目標(biāo)教學(xué)重難點1.了解網(wǎng)頁美工的任務(wù)2．理清網(wǎng)頁美工的設(shè)計流程通過學(xué)習(xí)，學(xué)生能夠：1．了解網(wǎng)頁美工任務(wù)概述2.理清網(wǎng)頁美工的設(shè)計流程3.了解網(wǎng)頁美工的設(shè)計概述教學(xué)目標(biāo)教學(xué)重難點1.了解網(wǎng)頁美工的任務(wù)通過學(xué)習(xí)，學(xué)生能夠新課導(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è)計的美感，滿足大眾的視覺審美需求。新課導(dǎo)入網(wǎng)頁美工是對平面視覺傳達設(shè)計美學(xué)的一種繼承和延伸，兩目標(biāo)展示如下圖所示，網(wǎng)頁美工設(shè)計與企業(yè)整體形象一致。注意網(wǎng)頁色彩、圖片的應(yīng)用及版面規(guī)劃，保持網(wǎng)頁的整體一致性。手寫板，超越傳統(tǒng)辦公的筆和紙，網(wǎng)站規(guī)劃體現(xiàn)主旨，傳承傳統(tǒng)而又賦予創(chuàng)意，版面簡潔，色彩協(xié)調(diào)。手寫板的網(wǎng)站設(shè)計目標(biāo)展示如下圖所示，網(wǎng)頁美工設(shè)計與企業(yè)整體形象一致。注意網(wǎng)頁任務(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)站美工要制作出若干張網(wǎng)頁效果圖，用戶選取一張用來做模型，或者根據(jù)用戶意見再次修改效果圖，直到用戶滿意。網(wǎng)站前臺人員以效果圖為模型，使用Dreamweaver等網(wǎng)頁制作軟件搭建成真正的網(wǎng)站。一、網(wǎng)頁美工任務(wù)概述任務(wù)分解網(wǎng)頁美工顧名思義就是對網(wǎng)頁進行美化，其主要任務(wù)之一是網(wǎng)頁美工設(shè)計模塊一--網(wǎng)頁設(shè)計基礎(chǔ)[精]課件網(wǎng)頁美工設(shè)計模塊一--網(wǎng)頁設(shè)計基礎(chǔ)[精]課件作業(yè)布置在互聯(lián)網(wǎng)上瀏覽網(wǎng)頁，下載3張讓人賞心悅目的網(wǎng)頁，并具體闡述其優(yōu)點。

作業(yè)布置在互聯(lián)網(wǎng)上瀏覽網(wǎng)頁，下載3張讓人賞心悅目的網(wǎng)頁，并具網(wǎng)頁美工設(shè)計模塊一

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

通過學(xué)習(xí)，學(xué)生能夠：1．了解網(wǎng)站規(guī)劃的基礎(chǔ)知識，了解網(wǎng)頁創(chuàng)意的基本方法，進而提高網(wǎng)頁鑒賞能力。教學(xué)目標(biāo)教學(xué)重難點1．提高網(wǎng)頁鑒賞能力。通過學(xué)習(xí)，學(xué)生能新課導(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ī)劃的基礎(chǔ)知識，了解網(wǎng)頁創(chuàng)意的基本方法，進而提高網(wǎng)頁鑒賞能力。新課導(dǎo)入如何才能設(shè)計出與眾不同的漂亮的網(wǎng)頁?除了豐富的內(nèi)容、目標(biāo)展示如下圖所示，網(wǎng)頁美工設(shè)計與企業(yè)整體形象一致。注意網(wǎng)頁色彩、圖片的應(yīng)用及版面規(guī)劃，保持網(wǎng)頁的整體一致性。手寫板，超越傳統(tǒng)辦公的筆和紙，網(wǎng)站規(guī)劃體現(xiàn)主旨，傳承傳統(tǒng)而又賦予創(chuàng)意，版面簡潔，色彩協(xié)調(diào)。手寫板的網(wǎng)站設(shè)計目標(biāo)展示如下圖所示，網(wǎng)頁美工設(shè)計與企業(yè)整體形象一致。注意網(wǎng)頁任務(wù)分解資訊及信息門戶類網(wǎng)站具有傳媒特性，提供新聞或行業(yè)信息的發(fā)布傳播。此類網(wǎng)站除提供資訊信息外還同時運營其他網(wǎng)絡(luò)服務(wù)。比較顯著的特點是信息量大，內(nèi)容豐富，頁面通常為分欄結(jié)構(gòu)，排版較長。

如下圖。一、資訊類網(wǎng)站任務(wù)分解資訊及信息門戶類網(wǎng)站具有傳媒特性，提供新聞或行業(yè)信息任務(wù)分解二、電子科技類電子科技類網(wǎng)站多采用冷色調(diào)，給人深厚的科技感。色彩大多以藍色為主，再搭配明度不一的灰色或白色，使整體看上去穩(wěn)重、大方、整潔、干凈。此類網(wǎng)站版式多以橫向分欄或居中的風(fēng)格居多。任務(wù)分解二、電子科技類電子科技類網(wǎng)站多采用冷色調(diào)，給人深厚三、文化教育類任務(wù)分解教育類網(wǎng)站的主要目的是宣傳和推廣教育、正確引導(dǎo)學(xué)生學(xué)習(xí)知識。一般來說教育網(wǎng)站在整體設(shè)計給人很強的文化氣息，基本采用圖片與文字搭配，簡潔、緊湊的布局排版風(fēng)格，且其文字介紹內(nèi)容簡單明了，頁面效果簡潔細致。三、文化教育類任務(wù)分解教育類網(wǎng)站的主要目的是宣四、休閑娛樂類任務(wù)分解娛樂類網(wǎng)站多以色彩豐富著稱，最重要的就是要有很強的視覺性和娛樂性。為了突出宣傳效果，往往都會使用大幅的圖片或者動畫，因此，這些內(nèi)容一般也都會擺放在頁頭或中間醒目的位置。網(wǎng)站設(shè)計師會應(yīng)用一些色彩鮮艷、表現(xiàn)強烈的顏色到娛樂類網(wǎng)站的設(shè)計中，應(yīng)用這些色彩可加深瀏覽者的印象，以達到加重瀏覽者感觀刺激的作用。四、休閑娛樂類任務(wù)分解娛樂類網(wǎ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)頁任務(wù)分解個性化網(wǎng)站大多反映的是個網(wǎng)頁美工設(shè)計模塊一

網(wǎng)頁設(shè)計基礎(chǔ)任務(wù)三

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

教學(xué)目標(biāo)教學(xué)重難點1．了解網(wǎng)頁元素的構(gòu)成。通過學(xué)習(xí)，學(xué)生新課導(dǎo)入網(wǎng)站由多張網(wǎng)頁構(gòu)成，每張網(wǎng)頁包含大量的內(nèi)容，以內(nèi)容來劃分，一般的網(wǎng)頁界面包括網(wǎng)站Logo、網(wǎng)站Banner、導(dǎo)航欄、文字、圖像、鏈接六部分。新課導(dǎo)入網(wǎng)站由多張網(wǎng)頁構(gòu)成，每張網(wǎng)頁包含大量的內(nèi)容，以內(nèi)容來目標(biāo)展示中興手機網(wǎng)站展示，組成網(wǎng)頁的六要素，如圖網(wǎng)站logo網(wǎng)站Banner導(dǎo)航欄文字圖片鏈接目標(biāo)展示中興手機網(wǎng)站展示，組成網(wǎng)頁的六要素，如圖網(wǎng)站logo任務(wù)分解網(wǎng)站Logo是一個站點的象征，應(yīng)體現(xiàn)該網(wǎng)站的特色、內(nèi)容，以及其內(nèi)在的文化內(nèi)涵和理念。成功的網(wǎng)站標(biāo)志有著獨特的形象標(biāo)識，在網(wǎng)站的推廣和宣傳中將起到事半功倍的效果。如下圖。靈動信息技術(shù)有限公司的Logo。網(wǎng)站標(biāo)志一般放在網(wǎng)站的左上角，訪問者一眼就能看到它。一、網(wǎng)頁logo任務(wù)分解網(wǎng)站Logo是一個站點的象征，應(yīng)體現(xiàn)該網(wǎng)站的特色、內(nèi)任務(wù)分解二、網(wǎng)頁Banner網(wǎng)頁Banner主要體現(xiàn)網(wǎng)頁中心意旨，形象鮮明地表達網(wǎng)站最主要的情感思想。Banner可以是網(wǎng)站頁面的橫幅廣告、也可以是主題內(nèi)容的集中呈現(xiàn)多。如下圖。任務(wù)分解二、網(wǎng)頁Banner網(wǎng)頁Banner主要體現(xiàn)網(wǎng)頁中三、網(wǎng)頁導(dǎo)航任務(wù)分解使用導(dǎo)航的目的就是引導(dǎo)瀏覽者游歷網(wǎng)站。網(wǎng)站導(dǎo)航實際上并不是一個非常確定的功能或者手段，而是一個通稱，凡是有助于方便用戶瀏覽網(wǎng)站信息、獲取網(wǎng)站服務(wù)并且在整個過程中不至迷失、在發(fā)現(xiàn)問題時可以及時找到在線幫助的所有形式都是網(wǎng)站導(dǎo)航系統(tǒng)的組成部分。網(wǎng)站的導(dǎo)航系統(tǒng)實際上就是一組使用了超鏈接技術(shù)的網(wǎng)頁對象，包括文字、圖片、按鈕等。他們讓網(wǎng)站中的內(nèi)容有效的連接起來。如下圖。三、網(wǎng)頁導(dǎo)航任務(wù)分解使用導(dǎo)航的目的就是引導(dǎo)瀏覽四、休閑娛樂類任務(wù)分解文本是網(wǎng)頁中的主要信息。在網(wǎng)頁中可以通過字體、字號、顏色、底紋以及邊框等來設(shè)置文本屬性。這里指的文字是文本文字，而并非圖片中的文字。如下圖，某電子雜志。四、休閑娛樂類任務(wù)分解文本是網(wǎng)頁中的主要信息。五、網(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ù)分解超鏈接是整個網(wǎng)站的通道，它是把網(wǎng)頁指向另一個目的端的鏈接。例如指向另一個網(wǎng)頁或相同網(wǎng)頁上的不同位置。這個目的端通常是另一個網(wǎng)頁，但也可以是圖片、電子郵件地址、文件、程序，或者也可以是本網(wǎng)站的其他位置。超鏈接可以是文本或者圖片。六、網(wǎng)頁鏈接任務(wù)分解超鏈接是整個網(wǎng)站的通道，它作業(yè)布置瀏覽網(wǎng)頁，下載一張網(wǎng)頁并注明網(wǎng)頁的主要組成元素。作業(yè)布置瀏覽網(wǎng)頁，下載一張網(wǎng)頁并注明網(wǎng)頁的主要組成元素。網(wǎng)頁美工設(shè)計模塊一

網(wǎng)頁設(shè)計基礎(chǔ)任務(wù)四

認識網(wǎng)頁布局網(wǎng)頁美工設(shè)計模塊一網(wǎng)頁設(shè)計基礎(chǔ)任務(wù)四認識網(wǎng)頁布局教學(xué)目標(biāo)教學(xué)重難點1．了解網(wǎng)頁常用布局方式的特點通過學(xué)習(xí)，學(xué)生能夠：1．了解網(wǎng)頁的常用布局方式

教學(xué)目標(biāo)教學(xué)重難點1．了解網(wǎng)頁常用布局方式的特點通過學(xué)習(xí)，新課導(dǎo)入網(wǎng)頁可以說是網(wǎng)站構(gòu)成的基本元素。當(dāng)我們輕點鼠標(biāo)，在網(wǎng)海中遨游，一副副精彩的網(wǎng)頁會呈現(xiàn)在我們面前，那么，網(wǎng)頁的精彩與否的因素是什么呢？色彩的搭配、文字的變化、圖片的處理等，這些當(dāng)然是不可忽略的因素，除了這些，還有一個非常重要的因素——網(wǎng)頁的布局。網(wǎng)頁的布局方式總是在不斷變化著的。因為，只有不斷的變化才會提高，才會不斷豐富我們的網(wǎng)頁!新課導(dǎo)入網(wǎng)頁可以說是網(wǎng)站構(gòu)成的基本元素。當(dāng)我們輕點鼠標(biāo)，在網(wǎng)任務(wù)分解國字型也可以稱為同字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是在網(wǎng)上見到的差不多做多的一種結(jié)構(gòu)類型。采用“國”字型布局的網(wǎng)頁。如下圖。一、國字型任務(wù)分解國字型也可以稱為同字型，是一些大型網(wǎng)站所喜歡的類型，任務(wù)分解二、拐角型這種結(jié)構(gòu)與上一種其實是很相近的，只是形式上的區(qū)別，上面是標(biāo)題及廣告橫幅，左側(cè)是窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。采用拐角型布局設(shè)計的網(wǎng)頁，如圖肯德基的網(wǎng)站設(shè)計。任務(wù)分解二、拐角型這種結(jié)構(gòu)與上一種其實是很相近的，只是形式上三、T字型任務(wù)分解

T型布局指網(wǎng)頁上方是網(wǎng)站標(biāo)志及廣告條、下方左半部為主菜單、右半部分顯示內(nèi)容的布局。因為看上去像英文字母“T”，所以稱為T型布局。T型布局的優(yōu)點是頁面結(jié)構(gòu)清晰，主次分明，強調(diào)秩序，能給人以穩(wěn)重、可信賴的感覺，比較容易上手。缺點是規(guī)矩呆板，如果細節(jié)和色彩搭配不當(dāng)，容易產(chǎn)生乏味的感覺。采用T字型布局的網(wǎng)頁設(shè)計。如下圖。三、T字型任務(wù)分解T型布局指網(wǎng)頁上方是網(wǎng)站標(biāo)志四、框架型任務(wù)分解框架型布局一般分為上下、左右和綜合布局，一般左面是導(dǎo)航鏈接，有時最上面會有一個小的標(biāo)題或標(biāo)志，右面是正文。我們見到的大部分的大型論壇都是這種結(jié)構(gòu)，有一些企業(yè)網(wǎng)站也喜歡采用該結(jié)構(gòu)。這種類型結(jié)構(gòu)非常清晰，一目了然。最典型的綜合框架型頁面布局如下圖。四、框架型任務(wù)分解框架型布局一般分為上下、左右五、“三”型布局任務(wù)分解“三”字形布局這是一種簡潔明快的網(wǎng)頁布局，這種布局多用于國外站點，國內(nèi)用的不多。特點是頁面上橫向兩條色塊，將頁面整體分割，如圖所示的Etsy購物網(wǎng)站。五、“三”型布局任務(wù)分解“三”字形布局這是一六、POP型任務(wù)分解POP引自廣告術(shù)語，是指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，大部分為一些精美的平面設(shè)計結(jié)合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接，甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種布局大部分出現(xiàn)在企業(yè)網(wǎng)站和個人首頁，如果處理得好的話，會給人帶來賞心悅目的感覺。如圖所示的“哦，你好世界”網(wǎng)站。六、POP型任務(wù)分解POP引自廣告術(shù)語，是指頁六、標(biāo)題正文型任務(wù)分解標(biāo)題文本型布局是指頁面內(nèi)容以文本為主，這種類型頁面最上面往往是標(biāo)題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這一類。如圖所示。某網(wǎng)站的用戶聯(lián)系信息頁面。

六、標(biāo)題正文型任務(wù)分解標(biāo)題文本型布局是指頁面內(nèi)容作業(yè)布置瀏覽網(wǎng)頁，下載本任務(wù)所述的七種布局方式的網(wǎng)頁，每種布局方式至少一張。

作業(yè)布置瀏覽網(wǎng)頁，下載本任務(wù)所述的七種布局方式的網(wǎng)頁，每種布網(wǎng)頁美工設(shè)計模塊一

網(wǎng)頁設(shè)計基礎(chǔ)任務(wù)一初識網(wǎng)頁美工網(wǎng)頁美工設(shè)計模塊一網(wǎng)頁設(shè)計基礎(chǔ)任務(wù)一初識網(wǎng)頁美工教學(xué)目標(biāo)教學(xué)重難點1.了解網(wǎng)頁美工的任務(wù)2．理清網(wǎng)頁美工的設(shè)計流程通過學(xué)習(xí)，學(xué)生能夠：1．了解網(wǎng)頁美工任務(wù)概述2.理清網(wǎng)頁美工的設(shè)計流程3.了解網(wǎng)頁美工的設(shè)計概述教學(xué)目標(biāo)教學(xué)重難點1.了解網(wǎng)頁美工的任務(wù)通過學(xué)習(xí)，學(xué)生能夠新課導(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è)計的美感，滿足大眾的視覺審美需求。新課導(dǎo)入網(wǎng)頁美工是對平面視覺傳達設(shè)計美學(xué)的一種繼承和延伸，兩目標(biāo)展示如下圖所示，網(wǎng)頁美工設(shè)計與企業(yè)整體形象一致。注意網(wǎng)頁色彩、圖片的應(yīng)用及版面規(guī)劃，保持網(wǎng)頁的整體一致性。手寫板，超越傳統(tǒng)辦公的筆和紙，網(wǎng)站規(guī)劃體現(xiàn)主旨，傳承傳統(tǒng)而又賦予創(chuàng)意，版面簡潔，色彩協(xié)調(diào)。手寫板的網(wǎng)站設(shè)計目標(biāo)展示如下圖所示，網(wǎng)頁美工設(shè)計與企業(yè)整體形象一致。注意網(wǎng)頁任務(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)站美工要制作出若干張網(wǎng)頁效果圖，用戶選取一張用來做模型，或者根據(jù)用戶意見再次修改效果圖，直到用戶滿意。網(wǎng)站前臺人員以效果圖為模型，使用Dreamweaver等網(wǎng)頁制作軟件搭建成真正的網(wǎng)站。一、網(wǎng)頁美工任務(wù)概述任務(wù)分解網(wǎng)頁美工顧名思義就是對網(wǎng)頁進行美化，其主要任務(wù)之一是網(wǎng)頁美工設(shè)計模塊一--網(wǎng)頁設(shè)計基礎(chǔ)[精]課件網(wǎng)頁美工設(shè)計模塊一--網(wǎng)頁設(shè)計基礎(chǔ)[精]課件作業(yè)布置在互聯(lián)網(wǎng)上瀏覽網(wǎng)頁，下載3張讓人賞心悅目的網(wǎng)頁，并具體闡述其優(yōu)點。

作業(yè)布置在互聯(lián)網(wǎng)上瀏覽網(wǎng)頁，下載3張讓人賞心悅目的網(wǎng)頁，并具網(wǎng)頁美工設(shè)計模塊一

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

通過學(xué)習(xí)，學(xué)生能夠：1．了解網(wǎng)站規(guī)劃的基礎(chǔ)知識，了解網(wǎng)頁創(chuàng)意的基本方法，進而提高網(wǎng)頁鑒賞能力。教學(xué)目標(biāo)教學(xué)重難點1．提高網(wǎng)頁鑒賞能力。通過學(xué)習(xí)，學(xué)生能新課導(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ī)劃的基礎(chǔ)知識，了解網(wǎng)頁創(chuàng)意的基本方法，進而提高網(wǎng)頁鑒賞能力。新課導(dǎo)入如何才能設(shè)計出與眾不同的漂亮的網(wǎng)頁?除了豐富的內(nèi)容、目標(biāo)展示如下圖所示，網(wǎng)頁美工設(shè)計與企業(yè)整體形象一致。注意網(wǎng)頁色彩、圖片的應(yīng)用及版面規(guī)劃，保持網(wǎng)頁的整體一致性。手寫板，超越傳統(tǒng)辦公的筆和紙，網(wǎng)站規(guī)劃體現(xiàn)主旨，傳承傳統(tǒng)而又賦予創(chuàng)意，版面簡潔，色彩協(xié)調(diào)。手寫板的網(wǎng)站設(shè)計目標(biāo)展示如下圖所示，網(wǎng)頁美工設(shè)計與企業(yè)整體形象一致。注意網(wǎng)頁任務(wù)分解資訊及信息門戶類網(wǎng)站具有傳媒特性，提供新聞或行業(yè)信息的發(fā)布傳播。此類網(wǎng)站除提供資訊信息外還同時運營其他網(wǎng)絡(luò)服務(wù)。比較顯著的特點是信息量大，內(nèi)容豐富，頁面通常為分欄結(jié)構(gòu)，排版較長。

如下圖。一、資訊類網(wǎng)站任務(wù)分解資訊及信息門戶類網(wǎng)站具有傳媒特性，提供新聞或行業(yè)信息任務(wù)分解二、電子科技類電子科技類網(wǎng)站多采用冷色調(diào)，給人深厚的科技感。色彩大多以藍色為主，再搭配明度不一的灰色或白色，使整體看上去穩(wěn)重、大方、整潔、干凈。此類網(wǎng)站版式多以橫向分欄或居中的風(fēng)格居多。任務(wù)分解二、電子科技類電子科技類網(wǎng)站多采用冷色調(diào)，給人深厚三、文化教育類任務(wù)分解教育類網(wǎng)站的主要目的是宣傳和推廣教育、正確引導(dǎo)學(xué)生學(xué)習(xí)知識。一般來說教育網(wǎng)站在整體設(shè)計給人很強的文化氣息，基本采用圖片與文字搭配，簡潔、緊湊的布局排版風(fēng)格，且其文字介紹內(nèi)容簡單明了，頁面效果簡潔細致。三、文化教育類任務(wù)分解教育類網(wǎng)站的主要目的是宣四、休閑娛樂類任務(wù)分解娛樂類網(wǎng)站多以色彩豐富著稱，最重要的就是要有很強的視覺性和娛樂性。為了突出宣傳效果，往往都會使用大幅的圖片或者動畫，因此，這些內(nèi)容一般也都會擺放在頁頭或中間醒目的位置。網(wǎng)站設(shè)計師會應(yīng)用一些色彩鮮艷、表現(xiàn)強烈的顏色到娛樂類網(wǎng)站的設(shè)計中，應(yīng)用這些色彩可加深瀏覽者的印象，以達到加重瀏覽者感觀刺激的作用。四、休閑娛樂類任務(wù)分解娛樂類網(wǎ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)頁任務(wù)分解個性化網(wǎng)站大多反映的是個網(wǎng)頁美工設(shè)計模塊一

網(wǎng)頁設(shè)計基礎(chǔ)任務(wù)三

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

教學(xué)目標(biāo)教學(xué)重難點1．了解網(wǎng)頁元素的構(gòu)成。通過學(xué)習(xí)，學(xué)生新課導(dǎo)入網(wǎng)站由多張網(wǎng)頁構(gòu)成，每張網(wǎng)頁包含大量的內(nèi)容，以內(nèi)容來劃分，一般的網(wǎng)頁界面包括網(wǎng)站Logo、網(wǎng)站Banner、導(dǎo)航欄、文字、圖像、鏈接六部分。新課導(dǎo)入網(wǎng)站由多張網(wǎng)頁構(gòu)成，每張網(wǎng)頁包含大量的內(nèi)容，以內(nèi)容來目標(biāo)展示中興手機網(wǎng)站展示，組成網(wǎng)頁的六要素，如圖網(wǎng)站logo網(wǎng)站Banner導(dǎo)航欄文字圖片鏈接目標(biāo)展示中興手機網(wǎng)站展示，組成網(wǎng)頁的六要素，如圖網(wǎng)站logo任務(wù)分解網(wǎng)站Logo是一個站點的象征，應(yīng)體現(xiàn)該網(wǎng)站的特色、內(nèi)容，以及其內(nèi)在的文化內(nèi)涵和理念。成功的網(wǎng)站標(biāo)志有著獨特的形象標(biāo)識，在網(wǎng)站的推廣和宣傳中將起到事半功倍的效果。如下圖。靈動信息技術(shù)有限公司的Logo。網(wǎng)站標(biāo)志一般放在網(wǎng)站的左上角，訪問者一眼就能看到它。一、網(wǎng)頁logo任務(wù)分解網(wǎng)站Logo是一個站點的象征，應(yīng)體現(xiàn)該網(wǎng)站的特色、內(nèi)任務(wù)分解二、網(wǎng)頁Banner網(wǎng)頁Banner主要體現(xiàn)網(wǎng)頁中心意旨，形象鮮明地表達網(wǎng)站最主要的情感思想。Banner可以是網(wǎng)站頁面的橫幅廣告、也可以是主題內(nèi)容的集中呈現(xiàn)多。如下圖。任務(wù)分解二、網(wǎng)頁Banner網(wǎng)頁Banner主要體現(xiàn)網(wǎng)頁中三、網(wǎng)頁導(dǎo)航任務(wù)分解使用導(dǎo)航的目的就是引導(dǎo)瀏覽者游歷網(wǎng)站。網(wǎng)站導(dǎo)航實際上并不是一個非常確定的功能或者手段，而是一個通稱，凡是有助于方便用戶瀏覽網(wǎng)站信息、獲取網(wǎng)站服務(wù)并且在整個過程中不至迷失、在發(fā)現(xiàn)問題時可以及時找到在線幫助的所有形式都是網(wǎng)站導(dǎo)航系統(tǒng)的組成部分。網(wǎng)站的導(dǎo)航系統(tǒng)實際上就是一組使用了超鏈接技術(shù)的網(wǎng)頁對象，包括文字、圖片、按鈕等。他們讓網(wǎng)站中的內(nèi)容有效的連接起來。如下圖。三、網(wǎng)頁導(dǎo)航任務(wù)分解使用導(dǎo)航的目的就是引導(dǎo)瀏覽四、休閑娛樂類任務(wù)分解文本是網(wǎng)頁中的主要信息。在網(wǎng)頁中可以通過字體、字號、顏色、底紋以及邊框等來設(shè)置文本屬性。這里指的文字是文本文字，而并非圖片中的文字。如下圖，某電子雜志。四、休閑娛樂類任務(wù)分解文本是網(wǎng)頁中的主要信息。五、網(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ù)分解超鏈接是整個網(wǎng)站的通道，它是把網(wǎng)頁指向另一個目的端的鏈接。例如指向另一個網(wǎng)頁或相同網(wǎng)頁上的不同位置。這個目的端通常是另一個網(wǎng)頁，但也可以是圖片、電子郵件地址、文件、程序，或者也可以是本網(wǎng)站的其他位置。超鏈接可以是文本或者圖片。六、網(wǎng)頁鏈接任務(wù)分解超鏈接是整個網(wǎng)站的通道，它作業(yè)布置瀏覽網(wǎng)頁，下載一張網(wǎng)頁并注明網(wǎng)頁的主要組成元素。作業(yè)布置瀏覽網(wǎng)頁，下載一張網(wǎng)頁并注明網(wǎng)頁的主要組成元素。網(wǎng)頁美工設(shè)計模塊一

網(wǎng)頁設(shè)計基礎(chǔ)任務(wù)四

認識網(wǎng)頁布局網(wǎng)頁美工設(shè)計模塊一網(wǎng)頁設(shè)計基礎(chǔ)任務(wù)四認識網(wǎng)頁布局教學(xué)目標(biāo)教學(xué)重難點1．了解網(wǎng)頁常用布局方式的特點通過學(xué)習(xí)，學(xué)生能夠：1．了解網(wǎng)頁的常用布局方式

教學(xué)目標(biāo)教學(xué)重難點1．了解網(wǎng)頁常用布局方式的特點通過學(xué)習(xí)，新課導(dǎo)入網(wǎng)頁可以說是網(wǎng)站構(gòu)成的基本元素。當(dāng)我們輕點鼠標(biāo)，在網(wǎng)海中遨游，一副副精彩的網(wǎng)頁會呈現(xiàn)在我們面前，那么，網(wǎng)頁的精彩與否的因素是什么呢？色彩的搭配、文字的變化、圖片的處理等，這些當(dāng)然是不可忽略的因素，除了這些，還有一個非常重要的因素——網(wǎng)頁的布局。網(wǎng)頁的布局方式總是在不斷變化著的。因為，只有不斷的變化才會提高，才會不斷豐富我們的網(wǎng)頁!新課導(dǎo)入網(wǎng)頁可以說是網(wǎng)站構(gòu)成的基本元素。當(dāng)我們輕點鼠標(biāo)，在網(wǎng)任務(wù)分解國字型也可以稱為同字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是在網(wǎng)上見到的差不多做多的一種結(jié)構(gòu)類型。采用“國”字型布局的網(wǎng)頁。如下圖。一、國字型任務(wù)分解國字型也可以稱為同字型，是一些大型網(wǎng)站所喜歡的類型，任務(wù)分解二、拐角型這種結(jié)構(gòu)與上一種其實是