《網(wǎng)頁設(shè)計(jì)》教案

《網(wǎng)頁設(shè)計(jì)》教素

一、網(wǎng)站設(shè)計(jì)概述與規(guī)范

授課題目授課時間

任務(wù)1網(wǎng)站設(shè)計(jì)構(gòu)成元素

案例、情境、自主探究教學(xué)法

教學(xué)方法課時2學(xué)時

任務(wù)驅(qū)動、演示、項(xiàng)目教學(xué)法

機(jī)房、計(jì)算機(jī)、擴(kuò)音器、

理論課■實(shí)訓(xùn)課■討論課口

授課方式教具Office2010>Photoshop、

習(xí)題課口其他口

Illustrator

1.了解項(xiàng)目實(shí)訓(xùn)內(nèi)容、步驟及要求。

教學(xué)目的2.掌握網(wǎng)頁美工設(shè)計(jì)的工作流程和設(shè)計(jì)要領(lǐng)；

3.掌握網(wǎng)頁的版面構(gòu)成元素及各元素的作用。

1.掌握網(wǎng)頁美工設(shè)計(jì)的工作流程和設(shè)計(jì)要領(lǐng)；

教學(xué)重點(diǎn)

2.掌握網(wǎng)頁的版面構(gòu)成元素及各元素的作用。

教學(xué)難點(diǎn)掌握網(wǎng)頁的版面構(gòu)成元素及各元素的作用。

課后作業(yè)

根據(jù)選擇的網(wǎng)站從多個角度進(jìn)行網(wǎng)頁設(shè)計(jì)分析，完成案例分析報告。

與思考題

教學(xué)后記

一、了解網(wǎng)站設(shè)計(jì)

網(wǎng)站不單單是把各種信息簡單地堆積起來能看或者表達(dá)清楚就行，還要考

慮通過各種設(shè)計(jì)手段和技術(shù)讓受眾能更多更有效地接收頁面中的各種信息，從

而對網(wǎng)站留下深刻的印象并催生消費(fèi)行為，提升企業(yè)品牌形象。

1.什么是網(wǎng)站設(shè)計(jì)

網(wǎng)站設(shè)計(jì)是以互聯(lián)網(wǎng)為載體，以互聯(lián)網(wǎng)技術(shù)和數(shù)字交互式技術(shù)為基礎(chǔ)，依

照客戶的需求與消費(fèi)者的需要設(shè)計(jì)有關(guān)商業(yè)宣傳目的網(wǎng)頁，同時遵循藝術(shù)設(shè)計(jì)

規(guī)律，實(shí)現(xiàn)商業(yè)目的與功能的統(tǒng)一，是一種商業(yè)功能和視覺藝術(shù)相結(jié)合的設(shè)計(jì)。

2.網(wǎng)站設(shè)計(jì)特點(diǎn)

與當(dāng)初的純文字和數(shù)字的網(wǎng)頁相比，現(xiàn)在的網(wǎng)頁無論是在內(nèi)容上，還是在

形式上都已經(jīng)得到了極大的豐富。網(wǎng)頁視覺設(shè)計(jì)也具有了視覺傳達(dá)設(shè)計(jì)的一般

特征，同時兼有了時代新的藝術(shù)形式。

教學(xué)

基本

二、網(wǎng)站設(shè)計(jì)構(gòu)成元素

過程

及設(shè)與傳統(tǒng)媒體不同，網(wǎng)站界面除了文字和圖像以外，還包含動畫、聲音和視頻

計(jì)等新興多媒體元素，更有由代碼語言編程實(shí)現(xiàn)的各種交互式效果，這些極大的

增加了網(wǎng)站界面的生動性和復(fù)雜性，同時也使網(wǎng)頁設(shè)計(jì)者需要考慮更多的頁面

元素的布局和優(yōu)化。

1.文字

文字元素是信息傳達(dá)的主體部分，從網(wǎng)頁最初的純文字界面發(fā)展至今，文

字仍是其他任何元素所無法取代的重要構(gòu)成。

2.圖形符號

圖形符號是視覺信的載體，通過精練的形象代表或某一事物，表達(dá)一定的

含義，圖形符號在網(wǎng)站界面設(shè)計(jì)中可以有多種表現(xiàn)形式。

3.圖像

圖像在網(wǎng)站界面設(shè)計(jì)中有多種形式，圖像具有比文字和圖形符號都要強(qiáng)烈

和直觀的視覺表現(xiàn)效果。

4.多媒體

網(wǎng)站界面構(gòu)成中的多媒體元素主要包括動畫、聲音和視頻，這些都是網(wǎng)站

界面構(gòu)成中最吸引人的元素，但是網(wǎng)站界面還是應(yīng)該堅(jiān)持以內(nèi)容為主，任何技

術(shù)和應(yīng)用都應(yīng)該以信息的更好傳達(dá)為中心，不能一味的追求視覺化的效果。

BASKETBALL

5.色彩

網(wǎng)站界面中的配色可以為瀏覽者帶來不同的視覺和心理感受，它不像文字、

圖像和多媒體等元素那樣直觀、形象，它需要設(shè)計(jì)師憑借良好的色彩基礎(chǔ)，根據(jù)

一定的配色標(biāo)準(zhǔn)，反復(fù)試驗(yàn)、感受之后才能夠確定。

三、任務(wù)實(shí)施一一案例分析

標(biāo)出示網(wǎng)頁的組成元素，分析網(wǎng)站網(wǎng)頁設(shè)計(jì)的特點(diǎn)、優(yōu)劣及建議。

一、網(wǎng)站設(shè)計(jì)概述與規(guī)范

授課題目任務(wù)2網(wǎng)站設(shè)計(jì)原則授課時間

任務(wù)3色彩在網(wǎng)站設(shè)計(jì)的作用

案例、情境、自主探究教學(xué)法

教學(xué)方法課時2學(xué)時

任務(wù)驅(qū)動、演示、項(xiàng)目教學(xué)法

機(jī)房、計(jì)算機(jī)、擴(kuò)音器、

理論課■實(shí)訓(xùn)課■討論課口

授課方式教具Office2010>Photoshop、

習(xí)題課口其他口

Illustrator

L了解網(wǎng)站設(shè)計(jì)構(gòu)成元素。

教學(xué)目的2.掌握網(wǎng)站設(shè)計(jì)原則。

3.了解色彩在網(wǎng)站設(shè)計(jì)的作用。

1.了解網(wǎng)站設(shè)計(jì)構(gòu)成元素。

教學(xué)重點(diǎn)

2.掌握網(wǎng)站設(shè)計(jì)原則。

教學(xué)難點(diǎn)能夠掌握網(wǎng)頁的版面構(gòu)成元素及各元素的作用。

課后作業(yè)

根據(jù)選擇的網(wǎng)站從多個角度進(jìn)行網(wǎng)頁設(shè)計(jì)分析，完成案例分析報告。

與思考題

教學(xué)后記

一、網(wǎng)站設(shè)計(jì)原則

網(wǎng)站作為傳播信息的一種載體，也要遵循一些設(shè)計(jì)的基本原則。但是，由

于表現(xiàn)形式、運(yùn)行方式和社會功能的不同，網(wǎng)站設(shè)計(jì)又有其自身的特殊規(guī)律。

網(wǎng)站設(shè)計(jì)，是技術(shù)與藝術(shù)的結(jié)合，內(nèi)容與形式的統(tǒng)一。

1.以用戶為中心

以用戶為中心的原則實(shí)際上就是要求設(shè)計(jì)者要時刻站在瀏覽者的角度來

考慮，主要體現(xiàn)在以下幾個方面。

(1)使用者優(yōu)先觀念

教學(xué)(2)考慮用戶瀏覽器

基本(3)考慮用戶的網(wǎng)絡(luò)連接

過程2.主題明確

及設(shè)網(wǎng)站設(shè)計(jì)表達(dá)的是一定的意圖和要求，有明確的主題，并按照視覺心理規(guī)

計(jì)律和形式將主題主動地傳達(dá)給觀賞者，以使主題在適當(dāng)?shù)沫h(huán)境里被人們及時地

理解和接受，從而滿足其需求。

3.視覺美觀

網(wǎng)站設(shè)計(jì)首先需要能夠吸引瀏覽者的注意力，由于網(wǎng)頁內(nèi)容的多樣化，傳

統(tǒng)的普通網(wǎng)頁不再是主打的環(huán)境，交互設(shè)計(jì)、多媒體內(nèi)容、三維空間等形式開

始大量在網(wǎng)站設(shè)計(jì)中出現(xiàn)，給瀏覽者帶來不一樣的視覺體驗(yàn)，給網(wǎng)站界面的視

覺效果增色不少。

4.內(nèi)容與形式統(tǒng)一

任何設(shè)計(jì)都有一定的內(nèi)容和形式。設(shè)計(jì)的內(nèi)容是指它的主題、形象、題材

等要素的總和，形式就是它的結(jié)構(gòu)、風(fēng)格設(shè)計(jì)語言等表現(xiàn)方式。一個優(yōu)秀的設(shè)

計(jì)必定是形式對內(nèi)容的完美表現(xiàn)。

5.有機(jī)的整體

網(wǎng)站的整體性包括內(nèi)容和形式上的整體性，這里主要討論設(shè)計(jì)形式上的整

體性。

二、色彩在網(wǎng)站設(shè)計(jì)中的作用

不同的顏色能夠表現(xiàn)出不同的情感，使瀏覽者產(chǎn)生不同的心理感覺，并且

色彩還與文化、地域等有著息息相關(guān)的聯(lián)系，因此，色彩在網(wǎng)站設(shè)計(jì)中的應(yīng)用

非常重要，甚至可以說色彩對網(wǎng)站頁面設(shè)計(jì)的成敗起到?jīng)Q定性的作用。

1.突出網(wǎng)頁主題

網(wǎng)頁中不同的內(nèi)容需要有不同的色彩來表現(xiàn)，利用不同色彩自身的表現(xiàn)

力、情感效應(yīng)以及審美心理感受，可以使網(wǎng)頁的內(nèi)容與形式有機(jī)地結(jié)合起來，

以色彩的內(nèi)在力量來烘托主題、突出主題。

2.劃分視覺區(qū)域

網(wǎng)站的首要功能是傳遞信息，色彩正是創(chuàng)造有序的視覺信息流程的重要元

素。利用不同色彩劃分視覺區(qū)域，是視覺設(shè)計(jì)中的常用方法，在網(wǎng)頁設(shè)計(jì)中同

樣如此。

ON&CFHRST

3.吸引瀏覽者目光

在網(wǎng)絡(luò)上有不計(jì)其數(shù)的網(wǎng)站，即使是那些已經(jīng)具有一定規(guī)模和知名度的

網(wǎng)站，也要時刻考慮如何能更好地吸引瀏覽者的目光，如何使我們的網(wǎng)站能

夠吸引瀏覽者呢？這就需要利用色彩的力量，不斷設(shè)計(jì)出各式各樣賞心悅目

的網(wǎng)頁，來“討好”挑剔的瀏覽者。網(wǎng)頁中的色彩應(yīng)用，或含蓄優(yōu)雅、或動

感強(qiáng)烈、或時尚新穎、或單純有力，無論哪種形式都是為了一個明確的目

標(biāo)，即引起更多瀏覽者的關(guān)注。由于色彩設(shè)計(jì)的特殊性能，越來越多的網(wǎng)頁

設(shè)計(jì)師認(rèn)識到，一個網(wǎng)站擁用突出的色彩設(shè)計(jì)，對于網(wǎng)站的生存起著至關(guān)重

要的作用，是邁向成功的第一步。

4.增強(qiáng)網(wǎng)站頁面的藝術(shù)性

色彩對于網(wǎng)頁作品的藝術(shù)品位起著舉足輕重的作用，不僅在視覺上，而

且在心理作用和象征作用中都可以得到充分的體現(xiàn)。好的色彩應(yīng)用，可以大

大增強(qiáng)網(wǎng)頁的藝術(shù)性，也使得網(wǎng)頁更富有審美情趣。

三、如何設(shè)計(jì)出好的網(wǎng)站

首先，設(shè)計(jì)師需要確定網(wǎng)站設(shè)計(jì)策略，決定網(wǎng)站主題之后，通過網(wǎng)頁元素

來實(shí)現(xiàn)網(wǎng)頁布局和視覺效果，最后完成表現(xiàn)圖形，這就是設(shè)計(jì)師的整個設(shè)計(jì)過

程和內(nèi)容。也就是說，設(shè)計(jì)師在網(wǎng)站設(shè)計(jì)過程中需要綜合考慮設(shè)計(jì)策略、主題、

要素、構(gòu)圖、技巧及圖形這6個標(biāo)準(zhǔn)。

1.不要主動降低自己的眼光

對于網(wǎng)頁設(shè)計(jì)而言，對品質(zhì)的評價遠(yuǎn)遠(yuǎn)高于價格，人們經(jīng)常會問“這是誰

設(shè)計(jì)的網(wǎng)站”，對設(shè)計(jì)師的評價也是非常重要的，因此，設(shè)計(jì)師進(jìn)行設(shè)計(jì)的時

候沒有必要因?yàn)閮r格而降低自己的標(biāo)準(zhǔn)。

2.多嘗試新技術(shù)、新方法

對于一個設(shè)計(jì)項(xiàng)目，設(shè)計(jì)師不要局限于自己固有的風(fēng)格。設(shè)計(jì)師有必要努

力采用更好的感覺去拓寬自己獨(dú)有的設(shè)計(jì)風(fēng)格。

四、如何提升網(wǎng)站的用戶體驗(yàn)

隨著互聯(lián)網(wǎng)上競爭的加劇，越來越多的企業(yè)開始意識到提供優(yōu)質(zhì)的用戶體

驗(yàn)是一個重要的、可持續(xù)的競爭優(yōu)勢。用戶體驗(yàn)形成了用戶對企業(yè)的整體印象,

界定了企業(yè)和競爭對手的差異，并且決定了客戶什么時候會再次光顧。

用戶體驗(yàn)一般包含四個方面：品牌(Branding),使用性(Usability)、

功能性(Functionality)和內(nèi)容(Content)(>一個成功的網(wǎng)站必定在這4個

方面充分考慮，使用戶可以便捷地訪問到自己需要的內(nèi)容的同時，又在不知不

覺中接受了設(shè)計(jì)本身要傳達(dá)的品牌和內(nèi)容。

隨著計(jì)算機(jī)技術(shù)在移動、網(wǎng)絡(luò)和圖形技術(shù)等方面的高速發(fā)展，人機(jī)交互技

術(shù)逐漸滲透到人類活動的各個領(lǐng)域中，也使得用戶的體驗(yàn)從單純的可用性工

程，擴(kuò)展到更廣的范圍。

二、網(wǎng)站頁面規(guī)劃

授課題目授課時間

任務(wù)4網(wǎng)頁設(shè)計(jì)組成與規(guī)范

案例、情境、自主探究教學(xué)法

教學(xué)方法課時2學(xué)時

任務(wù)驅(qū)動、演示、項(xiàng)目教學(xué)法

機(jī)房、計(jì)算機(jī)、擴(kuò)音器、

理論課■實(shí)訓(xùn)課■討論課口

授課方式教具Office2010>Photoshop、

習(xí)題課口其他口

Illustrator

1.掌握網(wǎng)站頁面規(guī)劃方法及技巧；

教學(xué)目的

2.掌握網(wǎng)站欄目結(jié)構(gòu)，能夠進(jìn)行頁面策劃。

1.掌握網(wǎng)站頁面規(guī)劃方法及技巧；

教學(xué)重點(diǎn)

2.掌握網(wǎng)站欄目結(jié)構(gòu)，能夠進(jìn)行頁面策劃。

教學(xué)難點(diǎn)掌握網(wǎng)站欄目結(jié)構(gòu)策劃、網(wǎng)站欄目規(guī)劃及網(wǎng)站頁面策劃。

課后作業(yè)根據(jù)所選的網(wǎng)站從網(wǎng)站頁面規(guī)劃、網(wǎng)站欄目規(guī)劃的角度進(jìn)行分析，完成案例

分析報告。

與思考題

教學(xué)后記

一、新課導(dǎo)入

網(wǎng)站需要給用戶一個清晰的層次結(jié)構(gòu)，這樣才能夠讓用戶在瀏覽你的網(wǎng)站

時不會迷路。這個不迷路的實(shí)質(zhì)就是網(wǎng)站結(jié)構(gòu)清晰、目錄清楚、內(nèi)容成體系。

這可以使我們的網(wǎng)站能夠呈現(xiàn)給用戶更加清晰和簡便的該問方式，讓用戶更快

捷地找到自己需要的東西，從而改善網(wǎng)站的用戶瀏覽體驗(yàn)，最大限度的留住用

戶。

二、網(wǎng)站欄目結(jié)構(gòu)

清晰的網(wǎng)站結(jié)構(gòu)非常重要，最常見的網(wǎng)站結(jié)構(gòu)是按照層級形式創(chuàng)建的，以首頁作為各

個節(jié)點(diǎn)的根據(jù)。

網(wǎng)站的結(jié)構(gòu)分為物理結(jié)構(gòu)與邏輯結(jié)構(gòu)兩類。

教學(xué)

基本

過程

及設(shè)

計(jì)三、網(wǎng)站欄目規(guī)劃

網(wǎng)站欄目的規(guī)劃，其實(shí)也是對網(wǎng)站內(nèi)容的高度提煉。不管網(wǎng)站的內(nèi)容有多

精彩，缺乏準(zhǔn)確的欄目提煉，也難以引起瀏覽者的關(guān)注。

網(wǎng)站的欄目規(guī)劃首先要做到“提綱挈領(lǐng)、點(diǎn)題明義”，用最簡練的語言提

煉出網(wǎng)站中每一個部分的內(nèi)容，清晰地告訴瀏覽者網(wǎng)站在說什么，有哪些信息

和功能。

四、網(wǎng)站頁面策劃

一個網(wǎng)站往往包含了很多的元素，對于網(wǎng)站的解構(gòu)需要從整體入手，并逐

漸細(xì)化到各個細(xì)節(jié)元素。從整體來看，網(wǎng)站最重要的就是信息架構(gòu)、內(nèi)容安排

和視覺設(shè)計(jì)。信息架構(gòu)作為網(wǎng)站最核心的骨架，代表了產(chǎn)品內(nèi)容的組織形式，

表現(xiàn)為產(chǎn)品功能信息分類、分層的關(guān)系，在設(shè)計(jì)上主要體現(xiàn)為界面布局和導(dǎo)航,

視覺體現(xiàn)為網(wǎng)站的配色方案。

五、任務(wù)實(shí)施一一案例分析

從網(wǎng)站欄目結(jié)構(gòu)、網(wǎng)站欄目規(guī)劃、網(wǎng)站頁面策劃的角度分析所選的網(wǎng)站,

完成案例分析報告。

二、網(wǎng)站頁面規(guī)劃

授課題目授課時間

任務(wù)4網(wǎng)頁設(shè)計(jì)組成與規(guī)范

案例、情境、自主探究教學(xué)法

教學(xué)方法課時2學(xué)時

任務(wù)驅(qū)動、演示、項(xiàng)目教學(xué)法

機(jī)房、計(jì)算機(jī)、擴(kuò)音器、

理論課■實(shí)訓(xùn)課■討論課口

授課方式教具Office2010>Photoshop、

習(xí)題課口其他口

Illustrator

1.掌握網(wǎng)站頁面規(guī)劃方法及技巧；

教學(xué)目的

2.了解網(wǎng)站欄目結(jié)構(gòu)與頁面策劃。

1.掌握網(wǎng)站頁面規(guī)劃方法及技巧；

教學(xué)重點(diǎn)

2.了解網(wǎng)站欄目結(jié)構(gòu)與頁面策劃。

教學(xué)難點(diǎn)掌握網(wǎng)站頁面規(guī)劃方法及技巧。

課后作業(yè)

標(biāo)出網(wǎng)頁中的組成元素，并完成網(wǎng)站頁面規(guī)劃設(shè)計(jì)。

與思考題

教學(xué)后記

一、網(wǎng)頁的組成

網(wǎng)頁一般由頁首、主體內(nèi)容和頁尾三部分組成。

1.網(wǎng)頁頁首

網(wǎng)頁頁首包含了網(wǎng)站Logo和導(dǎo)航欄等網(wǎng)頁元素，一般出現(xiàn)在網(wǎng)站的所有

頁面中，在整個網(wǎng)站中占重要地位。

網(wǎng)站Logo是一個網(wǎng)站的標(biāo)志，代表了網(wǎng)站的形象，在網(wǎng)站的宣傳和推廣

上起著重要的作用。網(wǎng)站Logo通常放在網(wǎng)站頁面的左上角，也可根據(jù)需要放

置在其他位置。

……/^LemonadeDONATI

International

2.網(wǎng)站導(dǎo)航欄

網(wǎng)站導(dǎo)航欄用于鏈接網(wǎng)站的不同頁面，引導(dǎo)用戶瀏覽網(wǎng)站的不同信息。對

于內(nèi)容不多的網(wǎng)站，可使用簡潔、清晰的導(dǎo)航欄；綜合類網(wǎng)站由于欄目多，信

息量大，通常會將導(dǎo)航欄分成多行，便于訪問者了解網(wǎng)站的內(nèi)容并瀏覽。

ftMyBag9AndaStoreISgnM"」一，回

COFFEETEAMENUCOFFEEHOUSESOCIALIMPACTCARDBLOGSHOP

教學(xué)口手凱環(huán)訃網(wǎng)口環(huán)中no客戶湍付設(shè)為首頁a收箍本頁令我嫡聞登錄

基本

?FKIimP1斥國內(nèi)社會圖片財(cái)經(jīng)汽車窗旅游體盲城市無人機(jī)潮卜看卬國

軍事臺海評論博覽科技數(shù)弟智能健康,滑雪公益?TT

過程www.huanqiucom

及設(shè)3.網(wǎng)頁主體內(nèi)容

■從版面看，網(wǎng)頁主體內(nèi)容一般被分類放置在頁面的不同版塊中，以幫助用

戶快速獲取所需信息，同時對網(wǎng)站內(nèi)容起到很好的導(dǎo)航作用；從組成元素看，

網(wǎng)頁內(nèi)容包括文字、圖像和動畫等元素，這些元素是網(wǎng)站信息輸出的主要載體。

(1)圖像

圖像不僅能直觀地表達(dá)信息內(nèi)容，還能裝飾網(wǎng)頁，增加網(wǎng)頁的吸引力，提

升訪問者的瀏覽體驗(yàn)。網(wǎng)頁中的圖像包括網(wǎng)頁廣告、產(chǎn)品圖像、裝飾圖像、按

鈕和圖標(biāo)等。

其中，網(wǎng)站Banner是網(wǎng)頁中尺寸最大的橫幅廣告，通常置于網(wǎng)頁主體內(nèi)

容的頂端，并以多張圖像輪播的形式出現(xiàn)，主要體現(xiàn)企業(yè)形象或主推事物，如

圖所示。

此外，網(wǎng)頁中的圖像分為靜態(tài)圖像和動態(tài)圖像兩種類型。其中，靜態(tài)圖像

主要使用JPEG和PNG格式；動態(tài)圖像則為GIF格式。設(shè)計(jì)網(wǎng)頁圖像時應(yīng)在確

保圖像質(zhì)量的前提下，盡量壓縮其體積，以免影響網(wǎng)頁打開速度。

(2)文字

文字是網(wǎng)頁中的主要內(nèi)容，在網(wǎng)頁設(shè)計(jì)中可以通過對文字的字體、字號、

顏色、行距、對齊方式，以及文本版塊的底紋及版塊邊框等進(jìn)行設(shè)計(jì)，使其既

能發(fā)揮信息傳達(dá)作用，又可裝飾頁面，如圖所示。

(3)網(wǎng)頁頁尾

網(wǎng)頁頁尾通常包括網(wǎng)站的版權(quán)信息、備案信息和聯(lián)系方式等內(nèi)容，也可以

是一些文字、按鈕或圖片形式的導(dǎo)航鏈接。

二、課堂互動

網(wǎng)頁由哪些元素組成？各組成元素分別有什么作用？

三、網(wǎng)頁設(shè)計(jì)賞析與分析

網(wǎng)頁的版面布局、色彩和內(nèi)容等是根據(jù)網(wǎng)站的定位確定的，設(shè)計(jì)優(yōu)秀的網(wǎng)

頁既能體現(xiàn)網(wǎng)站的功能和風(fēng)格，又方便用戶瀏覽。

四、任務(wù)實(shí)施一一案例分析

對常見網(wǎng)站頁面進(jìn)行賞析，并標(biāo)出網(wǎng)頁中的組成元素，完成網(wǎng)站頁面規(guī)劃

設(shè)計(jì)。

三、網(wǎng)站元素設(shè)計(jì)

授課時間

授課題目任務(wù)5網(wǎng)站Logo設(shè)計(jì)

案例、情境、自主探究教學(xué)法

教學(xué)方法課時2學(xué)時

任務(wù)驅(qū)動、演示、項(xiàng)目教學(xué)法

機(jī)房、計(jì)算機(jī)、擴(kuò)音器、

理論課■實(shí)訓(xùn)課■討論課口

授課方式教具Office2010>Photoshop、

習(xí)題課口其他口

Illustrator

1.掌握網(wǎng)站Logo設(shè)計(jì)的特點(diǎn)、規(guī)范及方法；

教學(xué)目的

2.掌握網(wǎng)站Logo的特點(diǎn)、設(shè)計(jì)規(guī)范及表現(xiàn)形式。

1.掌握網(wǎng)站Logo設(shè)計(jì)的特點(diǎn)、規(guī)范及方法；

教學(xué)重點(diǎn)

2.掌握網(wǎng)站Logo的特點(diǎn)、設(shè)計(jì)規(guī)范及表現(xiàn)形式。

運(yùn)用造型邏輯的原理，對LOGO中幾何形體和幾何之間的關(guān)系有一定的了

教學(xué)難點(diǎn)

解，掌握LOGO設(shè)計(jì)中幾何知識的運(yùn)用，能進(jìn)行簡單的幾何圖形LOGO設(shè)計(jì)。

課后作業(yè)

利用幾何圖形的組合，臨摹或設(shè)計(jì)一個幾何圖形LOGOo

與思考題

教學(xué)后記

一、認(rèn)識網(wǎng)站Logo

網(wǎng)站Logo是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)，它用于傳遞網(wǎng)站的定位和經(jīng)營

理念，同時便于人們識別。通過調(diào)查發(fā)現(xiàn)，一個網(wǎng)站的首頁美觀與否往往是初

次來訪問的瀏覽者決定是否進(jìn)行深入瀏覽的標(biāo)準(zhǔn)，而Logo作為首先映入訪問

者眼簾的具體形象，其重要性則不言而喻。

二、網(wǎng)站Logo的特點(diǎn)

在網(wǎng)站Logo設(shè)計(jì)中極為強(qiáng)調(diào)統(tǒng)一的原則，統(tǒng)一并不是反復(fù)某一種設(shè)計(jì)原

理，而應(yīng)該是將其他的任何設(shè)計(jì)原理，正確地應(yīng)用于設(shè)計(jì)的完整表現(xiàn)。

IH[^鳳凰旅行稗

北京歡忑/

三、網(wǎng)站Logo的設(shè)計(jì)規(guī)范

現(xiàn)代人對簡潔、明快、流暢、瞬間印象的訴求使得Logo的設(shè)計(jì)越來越追

求一種獨(dú)特的、高度的洗練。

教學(xué)

基本

過程

及設(shè)

計(jì)

四、網(wǎng)站Logo的表現(xiàn)形式

網(wǎng)站Logo形式一般可以分為特定圖案，特定字體，合成字體。

Authe祺gent

五、實(shí)戰(zhàn)分析：設(shè)計(jì)影視網(wǎng)站Logo

本案例設(shè)計(jì)一款影視網(wǎng)站Logo,主要通過對文字的變形處理，使文字兼具

圖案與文字的屬性，體現(xiàn)出影視網(wǎng)站的特點(diǎn)，整體效果簡潔鮮明，主題突出。

六、幾何圖形LOGO設(shè)計(jì)的核心

用幾何圖形去呈現(xiàn)、組合、襯托企業(yè)或者是“寓意”。

幾何圖形元素本身就可以代表某個企業(yè)或者“寓意”。

X

CHANEL

七、幾何圖形LOGO設(shè)計(jì)技巧

組合：幾何圖形元素進(jìn)行組合可以代表某個企業(yè)或者其“寓意”。

Microsoft

襯托：把幾何圖形作為底圖、外框、特征強(qiáng)化元素來襯托某個企業(yè)或者其

“寓意”。

mi9＞國煙。6?

八、任務(wù)實(shí)施---Logo設(shè)計(jì)

旋轉(zhuǎn)70',微調(diào)

三、網(wǎng)站元素設(shè)計(jì)

授課題目授課時間

任務(wù)6網(wǎng)站圖標(biāo)設(shè)計(jì)

案例、情境、自主探究教學(xué)法

教學(xué)方法課時2學(xué)時

任務(wù)驅(qū)動、演示、項(xiàng)目教學(xué)法

機(jī)房、計(jì)算機(jī)、擴(kuò)音器、

理論課■實(shí)訓(xùn)課■討論課口

授課方式教具Office2010>Photoshop、

習(xí)題課口其他口

Illustrator

1.了解網(wǎng)站圖標(biāo)；

教學(xué)目的2.掌握網(wǎng)站圖標(biāo)設(shè)計(jì)的原則及技巧；

3.能夠設(shè)計(jì)簡約實(shí)用的網(wǎng)站圖標(biāo)。

1.了解網(wǎng)站圖標(biāo)；

教學(xué)重點(diǎn)

2.掌握網(wǎng)站圖標(biāo)設(shè)計(jì)的原則及技巧。

教學(xué)難點(diǎn)掌握網(wǎng)站圖標(biāo)的設(shè)計(jì)方法和原則，能夠設(shè)計(jì)簡約實(shí)用的網(wǎng)站圖標(biāo)。

課后作業(yè)

根據(jù)課上內(nèi)容，設(shè)計(jì)一組簡約實(shí)用的網(wǎng)站圖標(biāo)。

與思考題

教學(xué)后記

一、新課導(dǎo)入

圖標(biāo)是一種非常小的可視控件，是網(wǎng)頁中的指示路牌，它以最便捷、簡單

的方式去指引瀏覽者獲取其想要的信息資源。用戶通過圖標(biāo)上的指示不用仔細(xì)

的瀏覽文字信息就可以很快的找到自己需要的信息或者完成某項(xiàng)任務(wù)，從而節(jié)

省大量寶貴的時間和精力。

二、了解網(wǎng)站圖標(biāo)

圖標(biāo)是具有指代意義的具有標(biāo)識性質(zhì)的圖形，更是一種標(biāo)識，它具有高度

濃縮并快捷傳達(dá)信息、便于記憶的特性。圖標(biāo)的應(yīng)用范圍極為廣泛，可以說它

無所不在。

教學(xué)

基本三、網(wǎng)站圖標(biāo)設(shè)計(jì)原則

過程網(wǎng)站設(shè)計(jì)趨向于簡潔、細(xì)致，設(shè)計(jì)精良的圖標(biāo)可以使網(wǎng)站頁面脫穎而出,

及設(shè)這樣的網(wǎng)站設(shè)計(jì)更加連貫、富于整體感、交互性更強(qiáng)。

計(jì)(1)易識別

(2)風(fēng)格統(tǒng)一

(3)與網(wǎng)頁協(xié)調(diào)

(4)富有創(chuàng)意

與陋片分0，3徵*\

;■!!?■■wneayM人ABIIRII王■?身X天才■色■Q?Mssmiia

四、網(wǎng)站圖標(biāo)應(yīng)用

圖標(biāo)在網(wǎng)頁中占據(jù)的面積很小，不會阻礙網(wǎng)頁信息的宣傳，另外設(shè)計(jì)精美

的圖標(biāo)還可以為網(wǎng)頁增添色彩。由于圖標(biāo)本身具備的種種優(yōu)勢，幾乎每一個網(wǎng)

頁的界面中都會使用圖標(biāo)來為用戶指路，從而大大提高了用戶瀏覽網(wǎng)站的速度

和效率。

三、網(wǎng)站元素設(shè)計(jì)

授課題目授課時間

任務(wù)7網(wǎng)站按鈕設(shè)計(jì)

案例、情境、自主探究教學(xué)法

教學(xué)方法課時2學(xué)時

任務(wù)驅(qū)動、演示、項(xiàng)目教學(xué)法

機(jī)房、計(jì)算機(jī)、擴(kuò)音器、

理論課■實(shí)訓(xùn)課■討論課口

授課方式教具Office2010>Photoshop、

習(xí)題課口其他口

Illustrator

1.了解網(wǎng)站按鈕的功能；

教學(xué)目的2.掌握網(wǎng)站按鈕設(shè)計(jì)的方法；

3.能夠設(shè)計(jì)網(wǎng)站按鈕。

1.了解網(wǎng)站按鈕的功能；

教學(xué)重點(diǎn)

2.掌握網(wǎng)站按鈕設(shè)計(jì)的方法。

教學(xué)難點(diǎn)能夠掌握網(wǎng)站按鈕設(shè)計(jì)的方法。

課后作業(yè)

根據(jù)課上內(nèi)容，完成網(wǎng)站按鈕設(shè)計(jì)。

與思考題

教學(xué)后記

一、新課導(dǎo)入

不論是在PC端還是在移動端，用戶在使用網(wǎng)站時都是通過點(diǎn)擊相應(yīng)的按

鈕順著設(shè)計(jì)師的想法下去的，如果能夠在頁面中合理的使用按鈕，用戶會得到

很好的用戶體驗(yàn)，如果所設(shè)計(jì)的頁面中用戶連按鈕都需要找半天，或者是單擊

按鈕出現(xiàn)誤操作之類的，用戶會直接放棄該網(wǎng)站。

教學(xué)

基本二、網(wǎng)站按鈕的功能

過程網(wǎng)頁中的按鈕主要具有兩個作用：第一是提示性作用，通過提示性的文本

及設(shè)或者圖形告訴用戶單擊后會有什么結(jié)果；第二是動態(tài)響應(yīng)作用，即當(dāng)瀏覽者在

計(jì)

進(jìn)行不同的操作時，按鈕能夠呈現(xiàn)出不同的效果。

1.真正的按鈕

真正的按鈕是指具有明確的操作目的性，并且能夠?qū)崿F(xiàn)表單提交功能的。

2.偽按鈕

在網(wǎng)頁中為了突出某些重要的文字鏈接而將其設(shè)計(jì)為與網(wǎng)頁風(fēng)格相統(tǒng)的

按鈕形式，使其在網(wǎng)頁中的表現(xiàn)更加突出，吸引用戶的注意，這樣的按鈕稱為

偽按鈕。

三、如何設(shè)計(jì)出色的網(wǎng)站按鈕

當(dāng)我們在設(shè)計(jì)按鈕的時候，是否想過用戶會在什么情形下與之交互？按鈕

將會在整個交互和反饋的循環(huán)中提供信息？

1.按鈕需要看起來可點(diǎn)擊

2.按鈕的色彩很重要

3.按鈕的尺寸

4.按鈕的位置

5.良好的對比效果

6.使用標(biāo)準(zhǔn)形狀

7.明確告訴用戶按鈕的功能

8.賦予按鈕更高的視覺優(yōu)先級

四、實(shí)戰(zhàn)分析：設(shè)計(jì)游戲網(wǎng)站按鈕

本案例設(shè)計(jì)一個游戲網(wǎng)站按鈕，主要是通過為圖形添加多種圖層樣式，體

現(xiàn)出按鈕圖形的質(zhì)感，再通過高光的繪制，使得按鈕的質(zhì)感表現(xiàn)更加強(qiáng)烈，并

且能夠與網(wǎng)頁的設(shè)計(jì)風(fēng)格相統(tǒng)一。

三、網(wǎng)站元素設(shè)計(jì)

授課題目授課時間

任務(wù)8網(wǎng)站導(dǎo)航設(shè)計(jì)

案例、情境、自主探究教學(xué)法

教學(xué)方法課時2學(xué)時

任務(wù)驅(qū)動、演示、項(xiàng)目教學(xué)法

機(jī)房、計(jì)算機(jī)、擴(kuò)音器、

理論課■實(shí)訓(xùn)課■討論課口

授課方式教具Office2010>Photoshop、

習(xí)題課口其他口

Illustrator

1.了解網(wǎng)站頁面中各種元素設(shè)計(jì)要點(diǎn)及要求。

教學(xué)目的2.了解網(wǎng)站導(dǎo)航設(shè)計(jì)的基本原則；

3.掌握網(wǎng)站導(dǎo)航設(shè)計(jì)方法和技巧。

1.了解網(wǎng)站導(dǎo)航設(shè)計(jì)的基本原則；

教學(xué)重點(diǎn)

2.掌握網(wǎng)站導(dǎo)航設(shè)計(jì)方法和技巧。

教學(xué)難點(diǎn)了解網(wǎng)站導(dǎo)航設(shè)計(jì)的基本原則，能夠進(jìn)行網(wǎng)站導(dǎo)航設(shè)計(jì)。

課后作業(yè)

根據(jù)所學(xué)內(nèi)容，完成網(wǎng)站導(dǎo)航設(shè)計(jì)。

與思考題

教學(xué)后記

一、新課導(dǎo)入

導(dǎo)航的設(shè)計(jì)應(yīng)該引人注目，瀏覽者進(jìn)入網(wǎng)站，首先會尋找導(dǎo)航，通過導(dǎo)航

條可以直觀地了解網(wǎng)站的內(nèi)容及信息的分類方式，判斷這個網(wǎng)站上是否有自己

需要和感興趣的內(nèi)容。因此，導(dǎo)航的好壞對提升用戶體驗(yàn)有著至關(guān)重要的作用。

二、了解網(wǎng)站導(dǎo)航

在網(wǎng)站中，導(dǎo)航就是在每個網(wǎng)頁間自由地來去，引導(dǎo)用戶在網(wǎng)站中到達(dá)他

所想到達(dá)的位置，這就是網(wǎng)站中都包含很多導(dǎo)航要素的目的。一般來說，在網(wǎng)

頁的上端或左側(cè)設(shè)置主導(dǎo)航要素的情況是比較普遍的方式。

教學(xué)

基本

過程三、導(dǎo)航在網(wǎng)站頁面中的布局位置

及設(shè)網(wǎng)站導(dǎo)航如同啟明燈，為瀏覽者順暢閱讀提供了方便的指引作用。將網(wǎng)站

計(jì)導(dǎo)航放在怎樣的位置才可以達(dá)到既不過多占用網(wǎng)頁空間，又可以方便瀏覽者使

用呢？這是用戶體驗(yàn)必須要考慮的問題。

導(dǎo)航的位置不僅會影響到網(wǎng)站的整體視覺風(fēng)格，而且關(guān)系到用戶訪問網(wǎng)頁

的便利性。應(yīng)該根據(jù)網(wǎng)頁的整體版式合理安排導(dǎo)航元素的放置。

四、網(wǎng)站導(dǎo)航設(shè)計(jì)的基本原則

為了使導(dǎo)航能夠快速、方便地幫助用戶定位信息，在設(shè)計(jì)時應(yīng)該遵循以下

的原則。

1.減少選項(xiàng)數(shù)目

將信息進(jìn)行合理的分類，減少導(dǎo)航的數(shù)目。

2.提供導(dǎo)航標(biāo)志

加強(qiáng)用戶定位以減少由于導(dǎo)航選項(xiàng)過多而給用戶造成的迷失。

3.提供總體視圖

界面總體視圖與導(dǎo)航標(biāo)志的作用相同，即幫助用戶定位。

4.避免復(fù)雜的嵌套關(guān)系

在導(dǎo)航設(shè)計(jì)中應(yīng)該盡量避免這種層次關(guān)系。

圖區(qū)日戲S

四、實(shí)戰(zhàn)分析：設(shè)計(jì)汽車網(wǎng)站導(dǎo)航菜單

本實(shí)例所設(shè)計(jì)的汽車網(wǎng)站導(dǎo)航菜單，采用通欄的方式放置在頁面頂部，使

導(dǎo)航與網(wǎng)頁形成整體，在設(shè)計(jì)中主要使用“矩形工具”繪制相應(yīng)的矩形色塊來

區(qū)分導(dǎo)航菜單的各部分，非常簡潔、大方。

三、網(wǎng)站元素設(shè)計(jì)

授課時間

授課題目任務(wù)9網(wǎng)站輪播Banner設(shè)計(jì)

案例、情境、自主探究教學(xué)法

教學(xué)方法課時2學(xué)時

任務(wù)驅(qū)動、演示、項(xiàng)目教學(xué)法

機(jī)房、計(jì)算機(jī)、擴(kuò)音器、

理論課■實(shí)訓(xùn)課■討論課口

授課方式教具Office2010>Photoshop、

習(xí)題課口其他口

Illustrator

1.了解網(wǎng)站Banner類型；

教學(xué)目的2.掌握網(wǎng)站Banner設(shè)計(jì)思路；

3.掌握網(wǎng)站Banner設(shè)計(jì)方法。

1.掌握網(wǎng)站Banner設(shè)計(jì)思路；

教學(xué)重點(diǎn)

2.掌握網(wǎng)站Banner設(shè)計(jì)方法。

教學(xué)難點(diǎn)掌握網(wǎng)站Banner的設(shè)計(jì)思路和設(shè)計(jì)方法。。

課后作業(yè)根據(jù)所學(xué)，通過改變文案排列方式和Banner背景元素，設(shè)計(jì)不同風(fēng)格的網(wǎng)

站Bannero

與思考題

教學(xué)后記

一、案例導(dǎo)入

本例通過改變文案排列方式和Banner背景元素，打造清新、時尚和可愛

3種風(fēng)格的Banner,效果如圖所示。

教學(xué)

基本

過程

及設(shè)

計(jì)

潮區(qū)新貨*

二除新大賞.

白裝感季W(wǎng)折嗨促

僅4天5.26-5.29

設(shè)計(jì)思路

①確認(rèn)廣告風(fēng)格，文案層級；

②選擇合適的背景、字體和輔助元素突出廣告風(fēng)格;

③根據(jù)模特位置調(diào)整文案位置；

④根據(jù)文案層級調(diào)整文字順序。

三、網(wǎng)頁背景

網(wǎng)頁背景是很重要的網(wǎng)頁元素之一，它決定了網(wǎng)站的基調(diào)。網(wǎng)頁背景主要

分為兩類，一類是使用純色或漸變色作為網(wǎng)頁背景。常用的顏色有白色、灰色、

黑色、淺藍(lán)色、淺綠色等，這些顏色能給人舒適、溫和的感覺，便于訪問者瀏

覽網(wǎng)頁內(nèi)容。

另一類是應(yīng)用圖片作為網(wǎng)頁背景，并按從上到下的瀏覽順序，將場景、主

題圖像集中于頁首，以此向?yàn)g覽者敘述故事、傳遞情感，呼應(yīng)網(wǎng)站主題或企業(yè)

精神，而下方版塊部分則使用與頂部圖像相關(guān)聯(lián)的素材進(jìn)行銜接，使網(wǎng)頁渾然

一體。

四、網(wǎng)頁圖像風(fēng)格

根據(jù)網(wǎng)站的主題和風(fēng)格，網(wǎng)頁中圖像的選擇應(yīng)有所區(qū)別。

1.寫實(shí)風(fēng)格

采用經(jīng)藝術(shù)加工修飾后的寫實(shí)風(fēng)格圖像，能直觀、真實(shí)地反應(yīng)客觀情況，

使瀏覽者身臨其境，常用于攝影、旅行、資訊、商品展示等網(wǎng)頁。

2.手繪風(fēng)格

手繪風(fēng)格的圖像更具親和力，常用于可愛、童真、個性、夸張等風(fēng)格的網(wǎng)

頁，如嬰幼兒用品、動漫、游戲、服飾等。

3.矢量風(fēng)格

矢量風(fēng)格的圖像常用于科技、時尚等風(fēng)格的網(wǎng)頁。這類圖像色彩鮮艷，對

比效果強(qiáng)烈，具有很強(qiáng)的裝飾性。

五、任務(wù)實(shí)施---設(shè)計(jì)網(wǎng)站Banner

通過更改背景、字體和構(gòu)圖方式等，分別制作不同風(fēng)格的Banner。

三、網(wǎng)站元素設(shè)計(jì)

授課題目授課時間

任務(wù)10網(wǎng)站廣告設(shè)計(jì)

案例、情境、自主探究教學(xué)法

教學(xué)方法課時2學(xué)時

任務(wù)驅(qū)動、演示、項(xiàng)目教學(xué)法

機(jī)房、計(jì)算機(jī)、擴(kuò)音器、

理論課■實(shí)訓(xùn)課■討論課口

授課方式教具Office2010>Photoshop、

習(xí)題課口其他口

Illustrator

1.了解網(wǎng)站廣告的類型及設(shè)計(jì)方法；

教學(xué)目的

2.能夠進(jìn)行網(wǎng)站廣告設(shè)計(jì)。

L了解網(wǎng)站廣告的常見類型；

教學(xué)重點(diǎn)

2.能夠進(jìn)行網(wǎng)站廣告設(shè)計(jì)。

教學(xué)難點(diǎn)掌握設(shè)計(jì)網(wǎng)站廣告的方法和技巧。

課后作業(yè)

根據(jù)所學(xué)的內(nèi)容，完成網(wǎng)站廣告設(shè)計(jì)。

與思考題

教學(xué)后記

一、新課導(dǎo)入

廣告是大多數(shù)網(wǎng)站頁面中不可或缺的元素，但是如何合理的在網(wǎng)站頁面中

設(shè)置廣告位，使廣告得到最優(yōu)的展示效果，但又不影響網(wǎng)站頁面中其他元素的

表現(xiàn)，這也是設(shè)計(jì)師需要考慮的問題。

教學(xué)世紀(jì)顯“9NIE殳UA=*=**&■%UTCtttI早Et

基本

過程8?>82(M9t2

*00-at20-l9?

及設(shè)M7t-S0644M4

計(jì)

二、網(wǎng)站廣告的常見類型

News/?Poducts/a^M&Activiiy/?aDown/T?

?"7,”------—■吁時■

網(wǎng)站廣告的形式多種多樣，形形色色，也經(jīng)常會出現(xiàn)一些新的廣告形式。

就目前來看，網(wǎng)站廣告的主要形式有以下幾種。

1.文字廣告

2.Banner廣告

3.對聯(lián)浮動廣告

4.網(wǎng)頁漂浮廣告

5.彈出廣告

三、如何設(shè)計(jì)出色的網(wǎng)站廣告

網(wǎng)站廣告在設(shè)計(jì)制作之前，需要根據(jù)客戶的意圖和要求，將前期的調(diào)查信

息加以分析綜合，整理成完整的策劃資料，它是網(wǎng)站廣告設(shè)計(jì)制作的基礎(chǔ)，是

廣告具體實(shí)施的依據(jù)。

1.為廣告選擇合適的排版方式

2.為廣告選擇合適的配色

3.融合、補(bǔ)充或?qū)Ρ?/p>

四、實(shí)戰(zhàn)分析：設(shè)計(jì)家電網(wǎng)站宣傳廣告

本案例設(shè)計(jì)一個家電網(wǎng)站宣傳廣告，運(yùn)用畫面左右明度的對比來突出產(chǎn)品

和主題的表現(xiàn)效果，并且主題文字采用細(xì)線字體和簡約的設(shè)計(jì)方法，使整個廣

告畫面給人一種高檔感。

五、任務(wù)實(shí)施一一設(shè)計(jì)網(wǎng)站廣告

天描38節(jié)

不一樣的做派

■ttwnxnomutexMKMiOMmvM

全場滿300減50元

四、網(wǎng)站圖形與文字排版設(shè)計(jì)

授課題目授課時間

任務(wù)11網(wǎng)頁文字排版設(shè)計(jì)

案例、情境、自主探究教學(xué)法

教學(xué)方法課時2學(xué)時

任務(wù)驅(qū)動、演示、項(xiàng)目教學(xué)法

機(jī)房、計(jì)算機(jī)、擴(kuò)音器、

理論課■實(shí)訓(xùn)課■討論課口

授課方式教具Office2010>Photoshop、

習(xí)題課口其他口

Illustrator

1.掌握網(wǎng)站頁面中的文字字體、大小及使用技巧；

教學(xué)目的2.掌握網(wǎng)頁中文字使用技巧；

3.掌握網(wǎng)頁文字排版設(shè)計(jì)常用手法。

1.掌握網(wǎng)站頁面中的文字字體、大小及使用技巧；

教學(xué)重點(diǎn)

2.掌握網(wǎng)站文字的排版方法及原則。

1.掌握網(wǎng)頁中文字使用技巧；

教學(xué)難點(diǎn)

2.掌握網(wǎng)頁文字排版設(shè)計(jì)常用手法。

課后作業(yè)

根據(jù)所學(xué)內(nèi)容，完成網(wǎng)頁中的文字排版設(shè)計(jì)。

與思考題

教學(xué)后記

一、新課導(dǎo)入

網(wǎng)頁中應(yīng)該采用易于用戶閱讀的字體，在網(wǎng)頁的正文內(nèi)容部分還需要注意

字體的大小以及行距等屬性的設(shè)置，避免文字過小或過密造成閱讀障礙。網(wǎng)頁

中文字的處理直接影響到用戶的瀏覽體驗(yàn)，為網(wǎng)頁中的文字應(yīng)用合適的屬性設(shè)

置，可以使瀏覽者能夠方便、順利、愉快的接受信息所要傳達(dá)的主題內(nèi)容。

二、關(guān)于字體

字體分為襯線字體(serif)和非襯線字體(sansserif)o

1.網(wǎng)頁中常用中文字體

在不同平臺的界面設(shè)計(jì)中規(guī)范的字體會有不同，網(wǎng)頁正文內(nèi)容部分所使用

的中文字體一般都是宋體12Px或14px,大號字體使用微軟雅黑或黑體，大號

字體是18px、20px、26px、30px,一般使用雙數(shù)字號，單數(shù)字號的字體在顯示

的時候會有毛邊。

2.字體大小

如今隨著顯示器越來越大，分辨率越來越高，經(jīng)常會覺得網(wǎng)頁中12Px大

小的文字看起來有點(diǎn)吃力，設(shè)計(jì)師也會不自覺的開始大量使用14Px大小的字

體，而且越來越多的網(wǎng)站開始使用15、16Px甚至18px以上的字號做正文文

字。

教學(xué)

基本

過程

及設(shè)

計(jì)

上加自28格物館⑦月活動日歷的K用”?那是你股見過美麗的省!

是不星SW&己12了T?年?快娉住兩年恒壽大片一《閶&e：s)I國情伯國

年的尼已.日和SSEE;舄)?g?.■足也不再不對整片

笊名：并非史料?日??BfcgW在搔.

?e-

【案記自博】鬻年.東畫只評HMHC!

【3大片】聘年陰歲宿.怎就少了TA!的到《歌?住在自fsiren1即同？東BF■只

年導(dǎo).unttiw.M了ISKsnnnHKwe.juia臺玄1也于知不足

RfiXA:片I大*上..久習(xí)住母-

W.上n日北！《劃8四3歐-等你票！

三、網(wǎng)頁文字使用技巧

文字設(shè)計(jì)能夠起到美化網(wǎng)站頁面、有效傳達(dá)主題信息、豐富頁面內(nèi)容等重

要作用。如何更好地對網(wǎng)站中的文字進(jìn)行設(shè)計(jì)，以達(dá)到更好的整體訴求效果，

給瀏覽者新穎的視覺體驗(yàn)?zāi)兀?/p>

1.字不過三

在網(wǎng)頁中使用1至2種字體樣式就可以了，然后通過對字體大小或顏色來

強(qiáng)調(diào)重點(diǎn)內(nèi)容。

2.文字與背景的層次要分明

網(wǎng)頁中的文字內(nèi)容一定要非常清晰、易讀。

3.字體要與整體氛圍相匹配

在網(wǎng)頁中需要根據(jù)頁面的整體氛圍來選擇合適的字體進(jìn)行表現(xiàn)。

四、網(wǎng)頁文字的排版

網(wǎng)站上每一個元素都能影響瀏覽，排版設(shè)計(jì)的好壞絕對能考驗(yàn)一個設(shè)計(jì)師

的基本功底。網(wǎng)頁中文字的排版處理需要考慮到文字辨識度和易讀性。在我看

看來，好的網(wǎng)頁文字排版一字有著比較棒的閱讀性，文字內(nèi)容在視覺上是平衡

和連貫的，并且有整體的空間感。

文字排版的易讀性規(guī)則

在最佳易讀性規(guī)則中主要向大家介紹文字排版中行距和間距的設(shè)置，以及

如何為文字設(shè)置合適的行寬和行高，幫助瀏覽者保持閱讀節(jié)奏，讓瀏覽者擁有

更好的閱讀和瀏覽體驗(yàn)。

五、文字排版設(shè)計(jì)常用手法

在設(shè)計(jì)領(lǐng)域中被廣泛應(yīng)用的四項(xiàng)基本原則，包括對比、重復(fù)、對齊、親密

性，這四項(xiàng)原則在網(wǎng)頁設(shè)計(jì)中對文字內(nèi)容的排版設(shè)計(jì)也非常適用。

1.對比

在文字排版設(shè)計(jì)中我們可以將對比分為3類，主要是標(biāo)題與正文字體、字

號對比，文字顏色對比，以及文字與背景的對比。

2.重復(fù)

設(shè)計(jì)中的元素可以在整個網(wǎng)頁設(shè)計(jì)中重復(fù)出現(xiàn)，對文字來說，可能字體、

字號、樣式的重復(fù)，也可能是同一種類型的圖案裝飾、文字與圖片整體布局方

式等。

3.對齊

網(wǎng)頁中元素的對齊是必不可少的，通過對齊處理可以幫助設(shè)計(jì)師設(shè)計(jì)出吸

引人的設(shè)計(jì)。

4.親密性

指在網(wǎng)頁中將相關(guān)的內(nèi)容組織在一起，讓它們從頁面整體視覺效果上更加

和諧、統(tǒng)一。

*+.拿辛?自然ams.B?WWJIWBII.ttiwwT.這口

■<7?H皿<ia。水中什.JttJ?哈物求i磔KE.Wil??O?ftW.

六、實(shí)戰(zhàn)分析：設(shè)計(jì)手機(jī)宣傳網(wǎng)站頁面

本案例設(shè)計(jì)一款手機(jī)宣傳網(wǎng)站頁面，在頁面中充分運(yùn)用不規(guī)則純色圖形的

搭配，著力營造出一種時尚感，扁平化的圖形相搭配，給人一種簡約和時尚感。

四、網(wǎng)站圖形與文字排版設(shè)計(jì)

授課題目授課時間

任務(wù)12網(wǎng)頁圖片排列布局設(shè)計(jì)

案例、情境、自主探究教學(xué)法

教學(xué)方法課時2學(xué)時

任務(wù)驅(qū)動、演示、項(xiàng)目教學(xué)法

機(jī)房、計(jì)算機(jī)、擴(kuò)音器、

理論課■實(shí)訓(xùn)課■討論課口

授課方式教具Office2010>Photoshop、

習(xí)題課口其他口

Illustrator

1.了解圖形在網(wǎng)站設(shè)計(jì)中的作用；

教學(xué)目的2.了解網(wǎng)站圖形設(shè)計(jì)類型；

3.掌握網(wǎng)站圖片的排列布局形式。

1.了解網(wǎng)站圖形設(shè)計(jì)類型；

教學(xué)重點(diǎn)

2.掌握網(wǎng)站圖片的排列布局形式。

教學(xué)難點(diǎn)掌握網(wǎng)站圖片的排列布局形式。

課后作業(yè)

利用所學(xué)的網(wǎng)站圖片排版布局知識進(jìn)行網(wǎng)頁圖片布局設(shè)計(jì)。

與思考題

教學(xué)后記

一、新課導(dǎo)入

圖形與文字不同，它是一種視覺語言，可以理解為是關(guān)于“圖”的設(shè)計(jì)，

因?yàn)閳D形的視覺沖擊力要比文字大的多，所以它將設(shè)計(jì)的思想賦予在形態(tài)上，

通過圖形來傳達(dá)信息。圖形可以集中展現(xiàn)網(wǎng)站頁面的整體結(jié)構(gòu)和風(fēng)格，可以將

信息傳達(dá)的更為直接、立體，并且容易讓人理解。

二、網(wǎng)站圖形設(shè)計(jì)類型

圖形的設(shè)計(jì)類型是指設(shè)計(jì)師設(shè)計(jì)圖形時首先要確定設(shè)計(jì)出來的圖形屬于

哪種類型，確定好最合適的設(shè)計(jì)類型以后，再根據(jù)該類型所特有的特征和性質(zhì)

教學(xué)

來做進(jìn)一步的塑造或者改進(jìn)。圖形的設(shè)計(jì)類型有很多種，包括圖形符號、頁面

基本

過程分割、立體圖形等，類型不同，設(shè)計(jì)出來的效果也會截然不同。

及設(shè)1.插圖

計(jì)插圖是指圖形以造型或圖畫的方式展現(xiàn)在網(wǎng)站頁面設(shè)計(jì)中，在網(wǎng)站設(shè)計(jì)中

主要用來完善視覺傳達(dá)功能。

2.圖形符號

圖形符號是一種不受國家地域、種族文化和語言差別等人為或自然條件限

制的一種單一的視覺語言。

3.照片

網(wǎng)站設(shè)計(jì)中的照片絕大多數(shù)都經(jīng)過了后期的設(shè)計(jì)、加工，因?yàn)檎掌膬?yōu)劣

是決定設(shè)計(jì)好壞的一大決定性因素。

4.頁面分割

頁面分割是指將一個整的網(wǎng)站頁面進(jìn)行水平或者垂直方向的分割，并為其

運(yùn)用強(qiáng)烈的色彩展現(xiàn)網(wǎng)頁視覺平面感的一種方法。完全采用線和面構(gòu)成的水平

或者垂直分割的網(wǎng)站頁面看起來會顯得比較單調(diào)，但其卻能夠很好的展現(xiàn)網(wǎng)頁

視覺的層次感，同時也體現(xiàn)了幾何學(xué)中的秩序美和比例美。

5.立體圖形

立體圖形是指運(yùn)用3D圖形程序?qū)D形圖像素材表現(xiàn)為立體風(fēng)格的效果。

3D圖形領(lǐng)域的目標(biāo)是展現(xiàn)虛擬和現(xiàn)實(shí)，也就是說，讓瀏覽者在體驗(yàn)虛擬世界的

事物的同時有一種近乎現(xiàn)實(shí)的感受。

三、網(wǎng)站圖片的排列布局形式

在網(wǎng)站中使用漂亮的圖片能夠有效地提升網(wǎng)站頁面的視覺美感，但是僅僅

有漂亮的圖片是不夠的，重要的是如何在網(wǎng)站頁面中對圖片進(jìn)行合理的布局設(shè)

計(jì)，為頁面內(nèi)容的呈現(xiàn)提供基礎(chǔ)。網(wǎng)頁中圖片展示形式非富多樣，不同形式的

圖片展示效果也讓瀏覽網(wǎng)頁的樂趣變更更加多樣化。

L傳統(tǒng)矩陣展示

將網(wǎng)頁中的圖片限制最大寬度或高度并進(jìn)行矩陣平鋪展現(xiàn)，這是最常見的

多張圖片展現(xiàn)形式。不同的邊距與距離會產(chǎn)生不同的風(fēng)格，用戶一掃而過的快

速瀏覽可以在短時間獲得更多的信息。

2.大小不一的矩陣展示

在傳統(tǒng)矩陣式平鋪布局基礎(chǔ)上掙脫圖片尺寸一致性束縛，圖片以基礎(chǔ)面積

單元的1倍、2倍、4倍尺寸展現(xiàn)。

3.瀑布流展示

瀑布流的展示方式是最近幾年流行起來的一種圖片展示方式，定寬而不定

高的設(shè)計(jì)讓頁面突破于傳統(tǒng)的矩陣式圖片展現(xiàn)布局，巧妙的利用視覺層級，視

線的任意流動又緩解了視覺疲勞。

4.下一張圖片預(yù)覽

在一些圖片類的網(wǎng)站頁面中，當(dāng)以大圖的方式預(yù)覽某張圖片時，需要在頁

面中提供下一張圖片預(yù)覽的功能，這樣能夠有效地提升用戶體驗(yàn)。

四、實(shí)戰(zhàn)分析：設(shè)計(jì)產(chǎn)品促銷活動頁面

本實(shí)例所設(shè)計(jì)的產(chǎn)品促銷活動頁面中，顏色使用較多，而且色彩明暗度變

化較頻繁，頁面整體給人一種豐富感，由于大面積顏色占主體，顏色明暗度變

化較集中，整體又給人一種統(tǒng)一、直觀的印象。內(nèi)容頁中的產(chǎn)品列表區(qū)域，產(chǎn)

品背景一律使用了白色，突出產(chǎn)品的同時，整體又給人一種簡練、直觀的印象。

五、網(wǎng)站頁面布局設(shè)計(jì)

授課題目授課時間

任務(wù)13網(wǎng)頁布局基本方法

案例、情境、自主探究教學(xué)法

教學(xué)方法課時2學(xué)時

任務(wù)驅(qū)動、演示、項(xiàng)目教學(xué)法

機(jī)房、計(jì)算機(jī)、擴(kuò)音器、

理論課■實(shí)訓(xùn)課■討論課口

授課方式教具Office2010>Photoshop、

習(xí)題課口其他口

Illustrator

1.了解網(wǎng)站頁面布局；

教學(xué)目的2.了解網(wǎng)頁布局設(shè)計(jì)基本方法及構(gòu)成原則；

3.掌握網(wǎng)站頁面布局的方法。