《网页设计》教案

《网页设计》教素

一、网站设计概述与规范

授课题目授课时间

任务1网站设计构成元素

案例、情境、自主探究教学法

教学方法课时2学时

任务驱动、演示、项目教学法

机房、计算机、扩音器、

理论课■实训课■讨论课口

授课方式教具Office2010>Photoshop、

习题课口其他口

Illustrator

1.了解项目实训内容、步骤及要求。

教学目的2.掌握网页美工设计的工作流程和设计要领；

3.掌握网页的版面构成元素及各元素的作用。

1.掌握网页美工设计的工作流程和设计要领；

教学重点

2.掌握网页的版面构成元素及各元素的作用。

教学难点掌握网页的版面构成元素及各元素的作用。

课后作业

根据选择的网站从多个角度进行网页设计分析，完成案例分析报告。

与思考题

教学后记

一、了解网站设计

网站不单单是把各种信息简单地堆积起来能看或者表达清楚就行，还要考

虑通过各种设计手段和技术让受众能更多更有效地接收页面中的各种信息，从

而对网站留下深刻的印象并催生消费行为，提升企业品牌形象。

1.什么是网站设计

网站设计是以互联网为载体，以互联网技术和数字交互式技术为基础，依

照客户的需求与消费者的需要设计有关商业宣传目的网页，同时遵循艺术设计

规律，实现商业目的与功能的统一，是一种商业功能和视觉艺术相结合的设计。

2.网站设计特点

与当初的纯文字和数字的网页相比，现在的网页无论是在内容上，还是在

形式上都已经得到了极大的丰富。网页视觉设计也具有了视觉传达设计的一般

特征，同时兼有了时代新的艺术形式。

教学

基本

二、网站设计构成元素

过程

及设与传统媒体不同，网站界面除了文字和图像以外，还包含动画、声音和视频

计等新兴多媒体元素，更有由代码语言编程实现的各种交互式效果，这些极大的

增加了网站界面的生动性和复杂性，同时也使网页设计者需要考虑更多的页面

元素的布局和优化。

1.文字

文字元素是信息传达的主体部分，从网页最初的纯文字界面发展至今，文

字仍是其他任何元素所无法取代的重要构成。

2.图形符号

图形符号是视觉信的载体，通过精练的形象代表或某一事物，表达一定的

含义，图形符号在网站界面设计中可以有多种表现形式。

3.图像

图像在网站界面设计中有多种形式，图像具有比文字和图形符号都要强烈

和直观的视觉表现效果。

4.多媒体

网站界面构成中的多媒体元素主要包括动画、声音和视频，这些都是网站

界面构成中最吸引人的元素，但是网站界面还是应该坚持以内容为主，任何技

术和应用都应该以信息的更好传达为中心，不能一味的追求视觉化的效果。

BASKETBALL

5.色彩

网站界面中的配色可以为浏览者带来不同的视觉和心理感受，它不像文字、

图像和多媒体等元素那样直观、形象，它需要设计师凭借良好的色彩基础，根据

一定的配色标准，反复试验、感受之后才能够确定。

三、任务实施一一案例分析

标出示网页的组成元素，分析网站网页设计的特点、优劣及建议。

一、网站设计概述与规范

授课题目任务2网站设计原则授课时间

任务3色彩在网站设计的作用

案例、情境、自主探究教学法

教学方法课时2学时

任务驱动、演示、项目教学法

机房、计算机、扩音器、

理论课■实训课■讨论课口

授课方式教具Office2010>Photoshop、

习题课口其他口

Illustrator

L了解网站设计构成元素。

教学目的2.掌握网站设计原则。

3.了解色彩在网站设计的作用。

1.了解网站设计构成元素。

教学重点

2.掌握网站设计原则。

教学难点能够掌握网页的版面构成元素及各元素的作用。

课后作业

根据选择的网站从多个角度进行网页设计分析，完成案例分析报告。

与思考题

教学后记

一、网站设计原则

网站作为传播信息的一种载体，也要遵循一些设计的基本原则。但是，由

于表现形式、运行方式和社会功能的不同，网站设计又有其自身的特殊规律。

网站设计，是技术与艺术的结合，内容与形式的统一。

1.以用户为中心

以用户为中心的原则实际上就是要求设计者要时刻站在浏览者的角度来

考虑，主要体现在以下几个方面。

(1)使用者优先观念

教学(2)考虑用户浏览器

基本(3)考虑用户的网络连接

过程2.主题明确

及设网站设计表达的是一定的意图和要求，有明确的主题，并按照视觉心理规

计律和形式将主题主动地传达给观赏者，以使主题在适当的环境里被人们及时地

理解和接受，从而满足其需求。

3.视觉美观

网站设计首先需要能够吸引浏览者的注意力，由于网页内容的多样化，传

统的普通网页不再是主打的环境，交互设计、多媒体内容、三维空间等形式开

始大量在网站设计中出现，给浏览者带来不一样的视觉体验，给网站界面的视

觉效果增色不少。

4.内容与形式统一

任何设计都有一定的内容和形式。设计的内容是指它的主题、形象、题材

等要素的总和，形式就是它的结构、风格设计语言等表现方式。一个优秀的设

计必定是形式对内容的完美表现。

5.有机的整体

网站的整体性包括内容和形式上的整体性，这里主要讨论设计形式上的整

体性。

二、色彩在网站设计中的作用

不同的颜色能够表现出不同的情感，使浏览者产生不同的心理感觉，并且

色彩还与文化、地域等有着息息相关的联系，因此，色彩在网站设计中的应用

非常重要，甚至可以说色彩对网站页面设计的成败起到决定性的作用。

1.突出网页主题

网页中不同的内容需要有不同的色彩来表现，利用不同色彩自身的表现

力、情感效应以及审美心理感受，可以使网页的内容与形式有机地结合起来，

以色彩的内在力量来烘托主题、突出主题。

2.划分视觉区域

网站的首要功能是传递信息，色彩正是创造有序的视觉信息流程的重要元

素。利用不同色彩划分视觉区域，是视觉设计中的常用方法，在网页设计中同

样如此。

ON&CFHRST

3.吸引浏览者目光

在网络上有不计其数的网站，即使是那些已经具有一定规模和知名度的

网站，也要时刻考虑如何能更好地吸引浏览者的目光，如何使我们的网站能

够吸引浏览者呢？这就需要利用色彩的力量，不断设计出各式各样赏心悦目

的网页，来“讨好”挑剔的浏览者。网页中的色彩应用，或含蓄优雅、或动

感强烈、或时尚新颖、或单纯有力，无论哪种形式都是为了一个明确的目

标，即引起更多浏览者的关注。由于色彩设计的特殊性能，越来越多的网页

设计师认识到，一个网站拥用突出的色彩设计，对于网站的生存起着至关重

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

4.增强网站页面的艺术性

色彩对于网页作品的艺术品位起着举足轻重的作用，不仅在视觉上，而

且在心理作用和象征作用中都可以得到充分的体现。好的色彩应用，可以大

大增强网页的艺术性，也使得网页更富有审美情趣。

三、如何设计出好的网站

首先，设计师需要确定网站设计策略，决定网站主题之后，通过网页元素

来实现网页布局和视觉效果，最后完成表现图形，这就是设计师的整个设计过

程和内容。也就是说，设计师在网站设计过程中需要综合考虑设计策略、主题、

要素、构图、技巧及图形这6个标准。

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

对于网页设计而言，对品质的评价远远高于价格，人们经常会问“这是谁

设计的网站”，对设计师的评价也是非常重要的，因此，设计师进行设计的时

候没有必要因为价格而降低自己的标准。

2.多尝试新技术、新方法

对于一个设计项目，设计师不要局限于自己固有的风格。设计师有必要努

力采用更好的感觉去拓宽自己独有的设计风格。

四、如何提升网站的用户体验

随着互联网上竞争的加剧，越来越多的企业开始意识到提供优质的用户体

验是一个重要的、可持续的竞争优势。用户体验形成了用户对企业的整体印象,

界定了企业和竞争对手的差异，并且决定了客户什么时候会再次光顾。

用户体验一般包含四个方面：品牌(Branding),使用性(Usability)、

功能性(Functionality)和内容(Content)(>一个成功的网站必定在这4个

方面充分考虑，使用户可以便捷地访问到自己需要的内容的同时，又在不知不

觉中接受了设计本身要传达的品牌和内容。

随着计算机技术在移动、网络和图形技术等方面的高速发展，人机交互技

术逐渐渗透到人类活动的各个领域中，也使得用户的体验从单纯的可用性工

程，扩展到更广的范围。

二、网站页面规划

授课题目授课时间

任务4网页设计组成与规范

案例、情境、自主探究教学法

教学方法课时2学时

任务驱动、演示、项目教学法

机房、计算机、扩音器、

理论课■实训课■讨论课口

授课方式教具Office2010>Photoshop、

习题课口其他口

Illustrator

1.掌握网站页面规划方法及技巧；

教学目的

2.掌握网站栏目结构，能够进行页面策划。

1.掌握网站页面规划方法及技巧；

教学重点

2.掌握网站栏目结构，能够进行页面策划。

教学难点掌握网站栏目结构策划、网站栏目规划及网站页面策划。

课后作业根据所选的网站从网站页面规划、网站栏目规划的角度进行分析，完成案例

分析报告。

与思考题

教学后记

一、新课导入

网站需要给用户一个清晰的层次结构，这样才能够让用户在浏览你的网站

时不会迷路。这个不迷路的实质就是网站结构清晰、目录清楚、内容成体系。

这可以使我们的网站能够呈现给用户更加清晰和简便的该问方式，让用户更快

捷地找到自己需要的东西，从而改善网站的用户浏览体验，最大限度的留住用

户。

二、网站栏目结构

清晰的网站结构非常重要，最常见的网站结构是按照层级形式创建的，以首页作为各

个节点的根据。

网站的结构分为物理结构与逻辑结构两类。

教学

基本

过程

及设

计三、网站栏目规划

网站栏目的规划，其实也是对网站内容的高度提炼。不管网站的内容有多

精彩，缺乏准确的栏目提炼，也难以引起浏览者的关注。

网站的栏目规划首先要做到“提纲挈领、点题明义”，用最简练的语言提

炼出网站中每一个部分的内容，清晰地告诉浏览者网站在说什么，有哪些信息

和功能。

四、网站页面策划

一个网站往往包含了很多的元素，对于网站的解构需要从整体入手，并逐

渐细化到各个细节元素。从整体来看，网站最重要的就是信息架构、内容安排

和视觉设计。信息架构作为网站最核心的骨架，代表了产品内容的组织形式，

表现为产品功能信息分类、分层的关系，在设计上主要体现为界面布局和导航,

视觉体现为网站的配色方案。

五、任务实施一一案例分析

从网站栏目结构、网站栏目规划、网站页面策划的角度分析所选的网站,

完成案例分析报告。

二、网站页面规划

授课题目授课时间

任务4网页设计组成与规范

案例、情境、自主探究教学法

教学方法课时2学时

任务驱动、演示、项目教学法

机房、计算机、扩音器、

理论课■实训课■讨论课口

授课方式教具Office2010>Photoshop、

习题课口其他口

Illustrator

1.掌握网站页面规划方法及技巧；

教学目的

2.了解网站栏目结构与页面策划。

1.掌握网站页面规划方法及技巧；

教学重点

2.了解网站栏目结构与页面策划。

教学难点掌握网站页面规划方法及技巧。

课后作业

标出网页中的组成元素，并完成网站页面规划设计。

与思考题

教学后记

一、网页的组成

网页一般由页首、主体内容和页尾三部分组成。

1.网页页首

网页页首包含了网站Logo和导航栏等网页元素，一般出现在网站的所有

页面中，在整个网站中占重要地位。

网站Logo是一个网站的标志，代表了网站的形象，在网站的宣传和推广

上起着重要的作用。网站Logo通常放在网站页面的左上角，也可根据需要放

置在其他位置。

……/^LemonadeDONATI

International

2.网站导航栏

网站导航栏用于链接网站的不同页面，引导用户浏览网站的不同信息。对

于内容不多的网站，可使用简洁、清晰的导航栏；综合类网站由于栏目多，信

息量大，通常会将导航栏分成多行，便于访问者了解网站的内容并浏览。

ftMyBag9AndaStoreISgnM"」一，回

COFFEETEAMENUCOFFEEHOUSESOCIALIMPACTCARDBLOGSHOP

教学口手凯环讣网口环中no客户湍付设为首页a收箍本页令我嫡闻登录

基本

©FKIimP1斥国内社会图片财经汽车窗旅游体盲城市无人机潮卜看卬国

军事台海评论博览科技数弟智能健康,滑雪公益•TT

过程www.huanqiucom

及设3.网页主体内容

■从版面看，网页主体内容一般被分类放置在页面的不同版块中，以帮助用

户快速获取所需信息，同时对网站内容起到很好的导航作用；从组成元素看，

网页内容包括文字、图像和动画等元素，这些元素是网站信息输出的主要载体。

(1)图像

图像不仅能直观地表达信息内容，还能装饰网页，增加网页的吸引力，提

升访问者的浏览体验。网页中的图像包括网页广告、产品图像、装饰图像、按

钮和图标等。

其中，网站Banner是网页中尺寸最大的横幅广告，通常置于网页主体内

容的顶端，并以多张图像轮播的形式出现，主要体现企业形象或主推事物，如

图所示。

此外，网页中的图像分为静态图像和动态图像两种类型。其中，静态图像

主要使用JPEG和PNG格式；动态图像则为GIF格式。设计网页图像时应在确

保图像质量的前提下，尽量压缩其体积，以免影响网页打开速度。

(2)文字

文字是网页中的主要内容，在网页设计中可以通过对文字的字体、字号、

颜色、行距、对齐方式，以及文本版块的底纹及版块边框等进行设计，使其既

能发挥信息传达作用，又可装饰页面，如图所示。

(3)网页页尾

网页页尾通常包括网站的版权信息、备案信息和联系方式等内容，也可以

是一些文字、按钮或图片形式的导航链接。

二、课堂互动

网页由哪些元素组成？各组成元素分别有什么作用？

三、网页设计赏析与分析

网页的版面布局、色彩和内容等是根据网站的定位确定的，设计优秀的网

页既能体现网站的功能和风格，又方便用户浏览。

四、任务实施一一案例分析

对常见网站页面进行赏析，并标出网页中的组成元素，完成网站页面规划

设计。

三、网站元素设计

授课时间

授课题目任务5网站Logo设计

案例、情境、自主探究教学法

教学方法课时2学时

任务驱动、演示、项目教学法

机房、计算机、扩音器、

理论课■实训课■讨论课口

授课方式教具Office2010>Photoshop、

习题课口其他口

Illustrator

1.掌握网站Logo设计的特点、规范及方法；

教学目的

2.掌握网站Logo的特点、设计规范及表现形式。

1.掌握网站Logo设计的特点、规范及方法；

教学重点

2.掌握网站Logo的特点、设计规范及表现形式。

运用造型逻辑的原理，对LOGO中几何形体和几何之间的关系有一定的了

教学难点

解，掌握LOGO设计中几何知识的运用，能进行简单的几何图形LOGO设计。

课后作业

利用几何图形的组合，临摹或设计一个几何图形LOGOo

与思考题

教学后记

一、认识网站Logo

网站Logo是网站特色和内涵的集中体现，它用于传递网站的定位和经营

理念，同时便于人们识别。通过调查发现，一个网站的首页美观与否往往是初

次来访问的浏览者决定是否进行深入浏览的标准，而Logo作为首先映入访问

者眼帘的具体形象，其重要性则不言而喻。

二、网站Logo的特点

在网站Logo设计中极为强调统一的原则，统一并不是反复某一种设计原

理，而应该是将其他的任何设计原理，正确地应用于设计的完整表现。

IH[^凤凰旅行稗

北京欢忑/

三、网站Logo的设计规范

现代人对简洁、明快、流畅、瞬间印象的诉求使得Logo的设计越来越追

求一种独特的、高度的洗练。

教学

基本

过程

及设

计

四、网站Logo的表现形式

网站Logo形式一般可以分为特定图案，特定字体，合成字体。

Authe祺gent

五、实战分析：设计影视网站Logo

本案例设计一款影视网站Logo,主要通过对文字的变形处理，使文字兼具

图案与文字的属性，体现出影视网站的特点，整体效果简洁鲜明，主题突出。

六、几何图形LOGO设计的核心

用几何图形去呈现、组合、衬托企业或者是“寓意”。

几何图形元素本身就可以代表某个企业或者“寓意”。

X

CHANEL

七、几何图形LOGO设计技巧

组合：几何图形元素进行组合可以代表某个企业或者其“寓意”。

Microsoft

衬托：把几何图形作为底图、外框、特征强化元素来衬托某个企业或者其

“寓意”。

mi9＞国烟。6❷

八、任务实施---Logo设计

旋转70',微调

三、网站元素设计

授课题目授课时间

任务6网站图标设计

案例、情境、自主探究教学法

教学方法课时2学时

任务驱动、演示、项目教学法

机房、计算机、扩音器、

理论课■实训课■讨论课口

授课方式教具Office2010>Photoshop、

习题课口其他口

Illustrator

1.了解网站图标；

教学目的2.掌握网站图标设计的原则及技巧；

3.能够设计简约实用的网站图标。

1.了解网站图标；

教学重点

2.掌握网站图标设计的原则及技巧。

教学难点掌握网站图标的设计方法和原则，能够设计简约实用的网站图标。

课后作业

根据课上内容，设计一组简约实用的网站图标。

与思考题

教学后记

一、新课导入

图标是一种非常小的可视控件，是网页中的指示路牌，它以最便捷、简单

的方式去指引浏览者获取其想要的信息资源。用户通过图标上的指示不用仔细

的浏览文字信息就可以很快的找到自己需要的信息或者完成某项任务，从而节

省大量宝贵的时间和精力。

二、了解网站图标

图标是具有指代意义的具有标识性质的图形，更是一种标识，它具有高度

浓缩并快捷传达信息、便于记忆的特性。图标的应用范围极为广泛，可以说它

无所不在。

教学

基本三、网站图标设计原则

过程网站设计趋向于简洁、细致，设计精良的图标可以使网站页面脱颖而出,

及设这样的网站设计更加连贯、富于整体感、交互性更强。

计(1)易识别

(2)风格统一

(3)与网页协调

(4)富有创意

与陋片分0，3徵*\

;■!!«■■wneayM人ABIIRII王■♦身X天才■色■Q»Mssmiia

四、网站图标应用

图标在网页中占据的面积很小，不会阻碍网页信息的宣传，另外设计精美

的图标还可以为网页增添色彩。由于图标本身具备的种种优势，几乎每一个网

页的界面中都会使用图标来为用户指路，从而大大提高了用户浏览网站的速度

和效率。

三、网站元素设计

授课题目授课时间

任务7网站按钮设计

案例、情境、自主探究教学法

教学方法课时2学时

任务驱动、演示、项目教学法

机房、计算机、扩音器、

理论课■实训课■讨论课口

授课方式教具Office2010>Photoshop、

习题课口其他口

Illustrator

1.了解网站按钮的功能；

教学目的2.掌握网站按钮设计的方法；

3.能够设计网站按钮。

1.了解网站按钮的功能；

教学重点

2.掌握网站按钮设计的方法。

教学难点能够掌握网站按钮设计的方法。

课后作业

根据课上内容，完成网站按钮设计。

与思考题

教学后记

一、新课导入

不论是在PC端还是在移动端，用户在使用网站时都是通过点击相应的按

钮顺着设计师的想法下去的，如果能够在页面中合理的使用按钮，用户会得到

很好的用户体验，如果所设计的页面中用户连按钮都需要找半天，或者是单击

按钮出现误操作之类的，用户会直接放弃该网站。

教学

基本二、网站按钮的功能

过程网页中的按钮主要具有两个作用：第一是提示性作用，通过提示性的文本

及设或者图形告诉用户单击后会有什么结果；第二是动态响应作用，即当浏览者在

计

进行不同的操作时，按钮能够呈现出不同的效果。

1.真正的按钮

真正的按钮是指具有明确的操作目的性，并且能够实现表单提交功能的。

2.伪按钮

在网页中为了突出某些重要的文字链接而将其设计为与网页风格相统的

按钮形式，使其在网页中的表现更加突出，吸引用户的注意，这样的按钮称为

伪按钮。

三、如何设计出色的网站按钮

当我们在设计按钮的时候，是否想过用户会在什么情形下与之交互？按钮

将会在整个交互和反馈的循环中提供信息？

1.按钮需要看起来可点击

2.按钮的色彩很重要

3.按钮的尺寸

4.按钮的位置

5.良好的对比效果

6.使用标准形状

7.明确告诉用户按钮的功能

8.赋予按钮更高的视觉优先级

四、实战分析：设计游戏网站按钮

本案例设计一个游戏网站按钮，主要是通过为图形添加多种图层样式，体

现出按钮图形的质感，再通过高光的绘制，使得按钮的质感表现更加强烈，并

且能够与网页的设计风格相统一。

三、网站元素设计

授课题目授课时间

任务8网站导航设计

案例、情境、自主探究教学法

教学方法课时2学时

任务驱动、演示、项目教学法

机房、计算机、扩音器、

理论课■实训课■讨论课口

授课方式教具Office2010>Photoshop、

习题课口其他口

Illustrator

1.了解网站页面中各种元素设计要点及要求。

教学目的2.了解网站导航设计的基本原则；

3.掌握网站导航设计方法和技巧。

1.了解网站导航设计的基本原则；

教学重点

2.掌握网站导航设计方法和技巧。

教学难点了解网站导航设计的基本原则，能够进行网站导航设计。

课后作业

根据所学内容，完成网站导航设计。

与思考题

教学后记

一、新课导入

导航的设计应该引人注目，浏览者进入网站，首先会寻找导航，通过导航

条可以直观地了解网站的内容及信息的分类方式，判断这个网站上是否有自己

需要和感兴趣的内容。因此，导航的好坏对提升用户体验有着至关重要的作用。

二、了解网站导航

在网站中，导航就是在每个网页间自由地来去，引导用户在网站中到达他

所想到达的位置，这就是网站中都包含很多导航要素的目的。一般来说，在网

页的上端或左侧设置主导航要素的情况是比较普遍的方式。

教学

基本

过程三、导航在网站页面中的布局位置

及设网站导航如同启明灯，为浏览者顺畅阅读提供了方便的指引作用。将网站

计导航放在怎样的位置才可以达到既不过多占用网页空间，又可以方便浏览者使

用呢？这是用户体验必须要考虑的问题。

导航的位置不仅会影响到网站的整体视觉风格，而且关系到用户访问网页

的便利性。应该根据网页的整体版式合理安排导航元素的放置。

四、网站导航设计的基本原则

为了使导航能够快速、方便地帮助用户定位信息，在设计时应该遵循以下

的原则。

1.减少选项数目

将信息进行合理的分类，减少导航的数目。

2.提供导航标志

加强用户定位以减少由于导航选项过多而给用户造成的迷失。

3.提供总体视图

界面总体视图与导航标志的作用相同，即帮助用户定位。

4.避免复杂的嵌套关系

在导航设计中应该尽量避免这种层次关系。

图区日戏S

四、实战分析：设计汽车网站导航菜单

本实例所设计的汽车网站导航菜单，采用通栏的方式放置在页面顶部，使

导航与网页形成整体，在设计中主要使用“矩形工具”绘制相应的矩形色块来

区分导航菜单的各部分，非常简洁、大方。

三、网站元素设计

授课时间

授课题目任务9网站轮播Banner设计

案例、情境、自主探究教学法

教学方法课时2学时

任务驱动、演示、项目教学法

机房、计算机、扩音器、

理论课■实训课■讨论课口

授课方式教具Office2010>Photoshop、

习题课口其他口

Illustrator

1.了解网站Banner类型；

教学目的2.掌握网站Banner设计思路；

3.掌握网站Banner设计方法。

1.掌握网站Banner设计思路；

教学重点

2.掌握网站Banner设计方法。

教学难点掌握网站Banner的设计思路和设计方法。。

课后作业根据所学，通过改变文案排列方式和Banner背景元素，设计不同风格的网

站Bannero

与思考题

教学后记

一、案例导入

本例通过改变文案排列方式和Banner背景元素，打造清新、时尚和可爱

3种风格的Banner,效果如图所示。

教学

基本

过程

及设

计

潮区新货*

二除新大赏.

白装感季W折嗨促

仅4天5.26-5.29

设计思路

①确认广告风格，文案层级；

②选择合适的背景、字体和辅助元素突出广告风格;

③根据模特位置调整文案位置；

④根据文案层级调整文字顺序。

三、网页背景

网页背景是很重要的网页元素之一，它决定了网站的基调。网页背景主要

分为两类，一类是使用纯色或渐变色作为网页背景。常用的颜色有白色、灰色、

黑色、浅蓝色、浅绿色等，这些颜色能给人舒适、温和的感觉，便于访问者浏

览网页内容。

另一类是应用图片作为网页背景，并按从上到下的浏览顺序，将场景、主

题图像集中于页首，以此向浏览者叙述故事、传递情感，呼应网站主题或企业

精神，而下方版块部分则使用与顶部图像相关联的素材进行衔接，使网页浑然

一体。

四、网页图像风格

根据网站的主题和风格，网页中图像的选择应有所区别。

1.写实风格

采用经艺术加工修饰后的写实风格图像，能直观、真实地反应客观情况，

使浏览者身临其境，常用于摄影、旅行、资讯、商品展示等网页。

2.手绘风格

手绘风格的图像更具亲和力，常用于可爱、童真、个性、夸张等风格的网

页，如婴幼儿用品、动漫、游戏、服饰等。

3.矢量风格

矢量风格的图像常用于科技、时尚等风格的网页。这类图像色彩鲜艳，对

比效果强烈，具有很强的装饰性。

五、任务实施---设计网站Banner

通过更改背景、字体和构图方式等，分别制作不同风格的Banner。

三、网站元素设计

授课题目授课时间

任务10网站广告设计

案例、情境、自主探究教学法

教学方法课时2学时

任务驱动、演示、项目教学法

机房、计算机、扩音器、

理论课■实训课■讨论课口

授课方式教具Office2010>Photoshop、

习题课口其他口

Illustrator

1.了解网站广告的类型及设计方法；

教学目的

2.能够进行网站广告设计。

L了解网站广告的常见类型；

教学重点

2.能够进行网站广告设计。

教学难点掌握设计网站广告的方法和技巧。

课后作业

根据所学的内容，完成网站广告设计。

与思考题

教学后记

一、新课导入

广告是大多数网站页面中不可或缺的元素，但是如何合理的在网站页面中

设置广告位，使广告得到最优的展示效果，但又不影响网站页面中其他元素的

表现，这也是设计师需要考虑的问题。

教学世纪显“9NIE殳UA=*=**&■%UTCtttI早Et

基本

过程8»>82(M9t2

*00-at20-l9«

及设M7t-S0644M4

计

二、网站广告的常见类型

News/«Poducts/a^M&Activiiy/»aDown/T«

•"7,”------—■吁时■

网站广告的形式多种多样，形形色色，也经常会出现一些新的广告形式。

就目前来看，网站广告的主要形式有以下几种。

1.文字广告

2.Banner广告

3.对联浮动广告

4.网页漂浮广告

5.弹出广告

三、如何设计出色的网站广告

网站广告在设计制作之前，需要根据客户的意图和要求，将前期的调查信

息加以分析综合，整理成完整的策划资料，它是网站广告设计制作的基础，是

广告具体实施的依据。

1.为广告选择合适的排版方式

2.为广告选择合适的配色

3.融合、补充或对比

四、实战分析：设计家电网站宣传广告

本案例设计一个家电网站宣传广告，运用画面左右明度的对比来突出产品

和主题的表现效果，并且主题文字采用细线字体和简约的设计方法，使整个广

告画面给人一种高档感。

五、任务实施一一设计网站广告

天描38节

不一样的做派

■ttwnxnomutexMKMiOMmvM

全场满300减50元

四、网站图形与文字排版设计

授课题目授课时间

任务11网页文字排版设计

案例、情境、自主探究教学法

教学方法课时2学时

任务驱动、演示、项目教学法

机房、计算机、扩音器、

理论课■实训课■讨论课口

授课方式教具Office2010>Photoshop、

习题课口其他口

Illustrator

1.掌握网站页面中的文字字体、大小及使用技巧；

教学目的2.掌握网页中文字使用技巧；

3.掌握网页文字排版设计常用手法。

1.掌握网站页面中的文字字体、大小及使用技巧；

教学重点

2.掌握网站文字的排版方法及原则。

1.掌握网页中文字使用技巧；

教学难点

2.掌握网页文字排版设计常用手法。

课后作业

根据所学内容，完成网页中的文字排版设计。

与思考题

教学后记

一、新课导入

网页中应该采用易于用户阅读的字体，在网页的正文内容部分还需要注意

字体的大小以及行距等属性的设置，避免文字过小或过密造成阅读障碍。网页

中文字的处理直接影响到用户的浏览体验，为网页中的文字应用合适的属性设

置，可以使浏览者能够方便、顺利、愉快的接受信息所要传达的主题内容。

二、关于字体

字体分为衬线字体(serif)和非衬线字体(sansserif)o

1.网页中常用中文字体

在不同平台的界面设计中规范的字体会有不同，网页正文内容部分所使用

的中文字体一般都是宋体12Px或14px,大号字体使用微软雅黑或黑体，大号

字体是18px、20px、26px、30px,一般使用双数字号，单数字号的字体在显示

的时候会有毛边。

2.字体大小

如今随着显示器越来越大，分辨率越来越高，经常会觉得网页中12Px大

小的文字看起来有点吃力，设计师也会不自觉的开始大量使用14Px大小的字

体，而且越来越多的网站开始使用15、16Px甚至18px以上的字号做正文文

字。

教学

基本

过程

及设

计

上加自28格物馆⑦月活动日历的K用”?那是你股见过美丽的省!

是不星SW&己12了T«年?快娉住两年恒寿大片一《阊&e：s)I国情伯国

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

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

•e-

【案记自博】鬻年.东画只评HMHC!

【3大片】聘年阴岁宿.怎就少了TA!的到《歌।住在自fsiren1即同？东BF■只

年导.unttiw.M了ISKsnnnHKwe.juia台玄1也于知不足

RfiXA:片I大*上..久习住母-

W.上n日北！《划8四3欧-等你票！

三、网页文字使用技巧

文字设计能够起到美化网站页面、有效传达主题信息、丰富页面内容等重

要作用。如何更好地对网站中的文字进行设计，以达到更好的整体诉求效果，

给浏览者新颖的视觉体验呢？

1.字不过三

在网页中使用1至2种字体样式就可以了，然后通过对字体大小或颜色来

强调重点内容。

2.文字与背景的层次要分明

网页中的文字内容一定要非常清晰、易读。

3.字体要与整体氛围相匹配

在网页中需要根据页面的整体氛围来选择合适的字体进行表现。

四、网页文字的排版

网站上每一个元素都能影响浏览，排版设计的好坏绝对能考验一个设计师

的基本功底。网页中文字的排版处理需要考虑到文字辨识度和易读性。在我看

看来，好的网页文字排版一字有着比较棒的阅读性，文字内容在视觉上是平衡

和连贯的，并且有整体的空间感。

文字排版的易读性规则

在最佳易读性规则中主要向大家介绍文字排版中行距和间距的设置，以及

如何为文字设置合适的行宽和行高，帮助浏览者保持阅读节奏，让浏览者拥有

更好的阅读和浏览体验。

五、文字排版设计常用手法

在设计领域中被广泛应用的四项基本原则，包括对比、重复、对齐、亲密

性，这四项原则在网页设计中对文字内容的排版设计也非常适用。

1.对比

在文字排版设计中我们可以将对比分为3类，主要是标题与正文字体、字

号对比，文字颜色对比，以及文字与背景的对比。

2.重复

设计中的元素可以在整个网页设计中重复出现，对文字来说，可能字体、

字号、样式的重复，也可能是同一种类型的图案装饰、文字与图片整体布局方

式等。

3.对齐

网页中元素的对齐是必不可少的，通过对齐处理可以帮助设计师设计出吸

引人的设计。

4.亲密性

指在网页中将相关的内容组织在一起，让它们从页面整体视觉效果上更加

和谐、统一。

*+.拿辛•自然ams.B«WWJIWBII.ttiwwT.这口

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

六、实战分析：设计手机宣传网站页面

本案例设计一款手机宣传网站页面，在页面中充分运用不规则纯色图形的

搭配，着力营造出一种时尚感，扁平化的图形相搭配，给人一种简约和时尚感。

四、网站图形与文字排版设计

授课题目授课时间

任务12网页图片排列布局设计

案例、情境、自主探究教学法

教学方法课时2学时

任务驱动、演示、项目教学法

机房、计算机、扩音器、

理论课■实训课■讨论课口

授课方式教具Office2010>Photoshop、

习题课口其他口

Illustrator

1.了解图形在网站设计中的作用；

教学目的2.了解网站图形设计类型；

3.掌握网站图片的排列布局形式。

1.了解网站图形设计类型；

教学重点

2.掌握网站图片的排列布局形式。

教学难点掌握网站图片的排列布局形式。

课后作业

利用所学的网站图片排版布局知识进行网页图片布局设计。

与思考题

教学后记

一、新课导入

图形与文字不同，它是一种视觉语言，可以理解为是关于“图”的设计，

因为图形的视觉冲击力要比文字大的多，所以它将设计的思想赋予在形态上，

通过图形来传达信息。图形可以集中展现网站页面的整体结构和风格，可以将

信息传达的更为直接、立体，并且容易让人理解。

二、网站图形设计类型

图形的设计类型是指设计师设计图形时首先要确定设计出来的图形属于

哪种类型，确定好最合适的设计类型以后，再根据该类型所特有的特征和性质

教学

来做进一步的塑造或者改进。图形的设计类型有很多种，包括图形符号、页面

基本

过程分割、立体图形等，类型不同，设计出来的效果也会截然不同。

及设1.插图

计插图是指图形以造型或图画的方式展现在网站页面设计中，在网站设计中

主要用来完善视觉传达功能。

2.图形符号

图形符号是一种不受国家地域、种族文化和语言差别等人为或自然条件限

制的一种单一的视觉语言。

3.照片

网站设计中的照片绝大多数都经过了后期的设计、加工，因为照片的优劣

是决定设计好坏的一大决定性因素。

4.页面分割

页面分割是指将一个整的网站页面进行水平或者垂直方向的分割，并为其

运用强烈的色彩展现网页视觉平面感的一种方法。完全采用线和面构成的水平

或者垂直分割的网站页面看起来会显得比较单调，但其却能够很好的展现网页

视觉的层次感，同时也体现了几何学中的秩序美和比例美。

5.立体图形

立体图形是指运用3D图形程序将图形图像素材表现为立体风格的效果。

3D图形领域的目标是展现虚拟和现实，也就是说，让浏览者在体验虚拟世界的

事物的同时有一种近乎现实的感受。

三、网站图片的排列布局形式

在网站中使用漂亮的图片能够有效地提升网站页面的视觉美感，但是仅仅

有漂亮的图片是不够的，重要的是如何在网站页面中对图片进行合理的布局设

计，为页面内容的呈现提供基础。网页中图片展示形式非富多样，不同形式的

图片展示效果也让浏览网页的乐趣变更更加多样化。

L传统矩阵展示

将网页中的图片限制最大宽度或高度并进行矩阵平铺展现，这是最常见的

多张图片展现形式。不同的边距与距离会产生不同的风格，用户一扫而过的快

速浏览可以在短时间获得更多的信息。

2.大小不一的矩阵展示

在传统矩阵式平铺布局基础上挣脱图片尺寸一致性束缚，图片以基础面积

单元的1倍、2倍、4倍尺寸展现。

3.瀑布流展示

瀑布流的展示方式是最近几年流行起来的一种图片展示方式，定宽而不定

高的设计让页面突破于传统的矩阵式图片展现布局，巧妙的利用视觉层级，视

线的任意流动又缓解了视觉疲劳。

4.下一张图片预览

在一些图片类的网站页面中，当以大图的方式预览某张图片时，需要在页

面中提供下一张图片预览的功能，这样能够有效地提升用户体验。

四、实战分析：设计产品促销活动页面

本实例所设计的产品促销活动页面中，颜色使用较多，而且色彩明暗度变

化较频繁，页面整体给人一种丰富感，由于大面积颜色占主体，颜色明暗度变

化较集中，整体又给人一种统一、直观的印象。内容页中的产品列表区域，产

品背景一律使用了白色，突出产品的同时，整体又给人一种简练、直观的印象。

五、网站页面布局设计

授课题目授课时间

任务13网页布局基本方法

案例、情境、自主探究教学法

教学方法课时2学时

任务驱动、演示、项目教学法

机房、计算机、扩音器、

理论课■实训课■讨论课口

授课方式教具Office2010>Photoshop、

习题课口其他口

Illustrator

1.了解网站页面布局；

教学目的2.了解网页布局设计基本方法及构成原则；

3.掌握网站页面布局的方法。