资源简介

(共26张PPT)
中等职业教育国家规划教材
项目四 网页广告的设计与制作
任务3 设计网页其他元素
任务情景
任务分析
任务实施
项目四 网页广告的设计与制作
任务情景
现在，张家豪已经完成了网页设计中最重要的Logo和Banner的设计。但是还无法构成一个完整的网页。为了使自己的网页能够顺利地完成，他学习了更多互联网的相关信息，了解网页的构成元素。除了Logo和Banner外，一个正规的网站中都还需要具备Flash动画、悬浮广告、超链接等这些网页广告元素。张家豪为了使自己的网站看起来赏心悦目，让更多的观者愿意继续浏览自己的网站，对这些广告细节元素的安排、设计半点都不敢马虎。
项目四 网页广告的设计与制作
任务分析
为了进一步充实和完善自己的网站，根据网站内容需要，张家豪还需要完成以下任务：
◆了解网站Flash动画广告
◆了解网站超链接广告
◆了解网站悬浮广告
◆了解网站版权信息
项目四 网页广告的设计与制作
任务实施
步骤一 了解网站Flash动画广告
步骤二 了解网站超链接广告
步骤三 了解网站悬浮广告
步骤四 了解网站版权信息
项目四 网页广告的设计与制作
（一）各类网站广告
简单地说，网站广告就是在网站上做的广告。利用网站上的广告横幅、文本链接、多媒体的方法，在互联网上刊登或发布广告，通过网络传递到互联网用户的一种高科技广告运作方式，这也是大多数网站主要的收入来源。
网站广告作为新媒体的产物，有很多种分类方式，常见的是按形式分类。我们前文详细描述过的网站Banner（旗帜广告）就是网站广告最主要的形式之一。另外还有，竖幅广告，是位于网页的两侧，广告面积较大（如图4-66所示）； 超链接广告，以一排文字或图片作为一个广告，点击链接可以进入相应的广告页面； 按钮广告，按钮广告一般位于页面两侧；悬浮广告，浮动广告在页面中随机或按照特定路径飞；插播式广告(弹出式广告)等等。
项目四 网页广告的设计与制作
知识准备
图4-66 竖幅广告
知识准备
项目四 网页广告的设计与制作
需要注意的是无论是Flash动画、悬浮广告还是超链接，其版式设计、色彩、字体设计、图片等都要符合产品特色和目标受众审美，这点与其他平面设计差别不大，在功能上，主要注意是否达到了以下三个要求：
1.准确表达广告信息
广告设计无论是在传统媒体还是网络新媒体，都是实用目的很强的，有明确的目的性的，准确传达广告信息是网站广告的首要任务。
2.树立品牌形象
企业的品牌形象决定了企业产品在消费者心中的地位，网站广告在多媒体的基础上应该具有更好的塑造力，促进良好的品牌形象在大众中传播。
知识准备
项目四 网页广告的设计与制作
3.引导消费
广告的最终目的是促成消费和购买，网站广告也不例外，下图为兰蔻、大众汽车和聚美优品三个品牌在百度上投放的网站广告（如图4-67所示）。
图4-67 兰蔻、大众汽车和聚美优品在百度上投放的网站广告
知识准备
项目四 网页广告的设计与制作
Flash是一个功能完整、界面美观并且动感效果十足的网站设计工具。Flash动画设计也最能体现网站的技术含量和设计师的动态设计水平。
随着网络的发展，特效软件的不断升级，网页中最容易吸引观者眼球的就是绚丽、动感十足的Flash动画。在网页中可以使用Flash动画锦上添花的地方也很多：动画网页式导航菜单的设计、个性化Logo设计、醒目的网站首页设计、网页间的跳转设计等地方都可以以动画的形式呈现。
项目四 网页广告的设计与制作
步骤一 了解网站Flash动画广告
1.Flash动画在网络应用中的优势主要有以下几点：
（1）适合网络运行：Flash动画软件产生的动画网页文件一般非常小，即使是在网络状况很差的时候也可以很快运行。
（2）表现形式多样：Flash动画网页的表现形式多样，可以包含文字、图片、声音以及动画等内容，丰富的表现形式使Flash网页可以更好地为网站增色。
（3）内容针对性强：Flash动画网页可根据网站的特点，对网站进行有针对性地宣传和表现。这就使得Flash动画能够更加直观地宣传内容，使浏览者更好地理解网站的意图。
（4）具有交互功能：Flash软件可以轻松实现按钮等交互功能。通过单击Flash动画按钮连接到相关页面，以了解更加详细的信息。
步骤一 了解网站Flash动画广告
项目四 网页广告的设计与制作
图为北京大悦城官方网站首页跳转的界面，Flash动画的形式非常具有互动性和趣味性（如图4-68所示）。
图4-68 北京大悦城首页
步骤一 了解网站Flash动画广告
项目四 网页广告的设计与制作
2.制作网站相关的Flash动画时，可参考如下基本流程来进行：
（1）确认主题：确认网站建立的主题，以及在该主题下Flash动画需要表现的内容等。
（2）头脑风暴：在确认主题后，在该主题的结构内进行开放性思考，从而确定网站的制作风格以及表现方式等。设计整体结构，策划好栏目和板块的编排问题。
（3）收集素材：根据前期构思策划的最终提案，收集Flash动画制作中需要用到的文字、图片以及声音等素材。
步骤一 了解网站Flash动画广告
项目四 网页广告的设计与制作
（4）收集与网站相关的元素：主要是网站已经完成设计的Logo、Banner、导航条、内容展示等。
（5）Flash动画：使用Flash软件将之前策划好的创意付诸行动，按照固定的尺寸、收集的素材，制作出动画并导出合适大小的SWF文件。
（6）文件修改发布：把制作好的动画文件测试和调整，模拟其在网站上播放的效果并加以修改，最后根据网站的应用目的和需要，将其以相应格式进行发布。
步骤一 了解网站Flash动画广告
项目四 网页广告的设计与制作
网页中指向本网站其他页面或其他网站内容的超链接。一个网页很难容纳全部内容，并且一个网页也不适合屏数过多，这时就需要用超链接指向其他相关的内容。没有超级链接的网站，用户操作非常不便，甚至很难再回到浏览过的页面。考虑到用户的实用性，超链接在页面里是随处可见的。
步骤二 了解网站超链接广告
项目四 网页广告的设计与制作
超链接可以是图片式的，也可以是文字式的，是根据内容的情况而定，同一个网页中往往两者都具备（如图4-69所示）。
图4-69 图片式和文字式超链接
步骤二 了解网站超链接广告
项目四 网页广告的设计与制作
文字式超链接点击前后的颜色，一定都要符合整体页面的风格。但点击前后的色彩要有变化，方便用户区分哪些是看过的，哪些还没有看过。有的网站首页是由一整张图片组成的。图片上只有网站的标志和网址。
步骤二 了解网站超链接广告
项目四 网页广告的设计与制作
悬浮广告在网页页面上悬浮或移动的广告，形式可以为Gif或Flash等格式。
悬浮广告有三种形式：悬浮侧栏（120*270）、悬浮按钮（100*100）和悬浮视窗（300*250）。
悬浮侧栏，可以配置在两侧同时展现，或仅在左侧，或仅在右侧进行展现。当两侧同时展现的时候，通常情况下，左右两侧的推广物料和内容是不同的，关闭一侧的侧栏不影响另一侧侧栏的展示。
悬浮按钮的展示与悬浮侧栏基本相同。
悬浮视窗，只能在窗口右下角进行展示。
步骤三 了解网站悬浮广告
项目四 网页广告的设计与制作
网站的版权区一般在网站的最下部，单独一个区域内，标注网站内容的版权与相关信息，故叫做版权区。其中主要内容包括版权、网站信息和网站联系方式的文字或超链接。
这一区域相当于给这个网页整体信息做广告。它的表现方式是文字信息和超链接，一般使用简单布局，不需要使用复杂背景和很花哨的设计。此外，版权区还需要按照规定放置网站备案号、网上报警亭等内容。
步骤四 了解网站版权信息
项目四 网页广告的设计与制作
图为新浪微博网站的版权区，和网页的微博内容部分一样，用白色框出长方形的区域作为版权区，与整个网站设计风格相契合（如图4-70所示）。
在完整的学习了网页广告设计中包括Logo设计、Banner设计、Flash动画、超链接等网站广告相关知识，进行细致的专业设计，才能最后制作完成网页的广告。
图4-70 版权区
步骤三 了解网站悬浮广告
项目四 网页广告的设计与制作
项目小结
本项目阐述了网页广告在网页设计中的重要性、注意事项以及后期投放相关的内容。以爱特米诺公司网站为例，详细介绍了网站Logo的设计制作方法和网站Banner的设计制作方法，以及其他常见网页广告形式和设计要求。另外还分析了网页广告需要注意的事项，与网页中其他元素的整体性以及互相之间色彩、内容、布局的影响。页面中其他网页广告的设计风格和主色调。
本项目的重点内容是网页广告设计相关内容的全面指导，网页广告的设计风格很大程度上影响了网站最终呈现出的视觉效果。
项目四 网页广告的设计与制作
实战1
在具体项目中，要根据具体需要设计的是什么类别、什么特点的网站Logo，再决定针对要求进行网站Logo的设计训练。
请根据个人爱好，设计一个服装品牌的网站Logo，可以使用已有品牌，也可虚拟品牌。Logo设计需附创意说明和网站实际应用效果图。
实战2
请为一个你个人喜爱或者感兴趣的品牌，设计一个在在国内大型电子商务网站上投放的Banner。可以是品牌的新产品发布，也可以自己为品牌策划一个活动，主题自拟。需要提交Banner成品文件和投放效果图，单张、系列均可。
实战强化
项目四 网页广告的设计与制作
一、填空题
1.网站Logo设计的一般要求是：在大小上符合___________，以利于不同网站链接的采用。
2.网站Logo的设计形式的组合方式一般分为如下几方面:___________、_____________、_____________。
3.Banner所传播的经济信息要____________，不能虚夸，更不能伪造虚构，或以歧义的文案误导引诱用户。
思考与练习
项目四 网页广告的设计与制作
4.网站广告由于互联网自身的特性，它的计费方式也比传统媒体中广告的计费方式多样化，主要有：___________、___________和___________三种。
5.在设计和投放网站广告的时候，从视觉美观的角度来说，需要注意的是版式设计、色彩、字体设计、图片等是否符合产品特色和目标受众审美，在功能上，主要要注意是否达到了___________、___________、___________三个要求。
6.制作网站相关的Flash动画时，可参考的基本流程包括：___________、___________、___________、___________、___________、___________等步骤。
思考与练习
项目四 网页广告的设计与制作
二、简答题
1.简述网页设计主要包括那些设计内容。
2.网站Logo设计需要注意哪些方面？有哪几种常见的设计形式？
3.分析色彩搭配对网站Logo设计的重要性。
4.分析Banner相较于其他广告形式的优势。
5.比较静态Banner和动态Banner设计各自的特点和优势。6.分析Banner设计的规范与流程，设计Banner时还需要考虑哪些别的网页环境因素的影响？
7.除了Logo和Banner外，网站中还有哪些常见的网页广告形式？
8.举一例设计、创意最令你印象深刻的Flash动画广告，并分析其成功之处。
思考与练习
项目四 网页广告的设计与制作
THANKS！

展开更多......

收起↑