高校门户网站首页动态Banner的制作研究

ISSN1009-3044

ComputerKnowledgeandTechnology

电脑知识

电脑知识

与技术

与技术

Vol.12,No.2,

January

2016

E-mail:kfyj@

第12卷第2期(2016年1月)

Tel:+86-551-6569

高校门户网站首页动态Banner的制作研究

孙慕梓

（北京社会管理职业学院，北京101601）

摘要：动态Banner是高校门户网站首页的重要信息传递区域，也是高校门户网站建设的重要工作。本文从策划、设计、制

作与发布四个角度，探讨了动态Banner制作的常用工具与方法；并提出了高校门户网站动态Banner策划规则。设计师在

策划和设计高校网站时，合理运用本文阐述的策略与规则，可以更加突出网站的高等教育特色，还可以极大地提升网站的

视觉吸引力。

关键词：网站；Banner；Photoshop；Flash

中图分类号：TP393文献标识码：A文章编号：1009-3044(2016)02-0204-03

DOI:10.14004/.2016.0200

ResearchonthedynamicBanneroftheUniversityPortalHomepage

SUNMu-zi

(BeijingCollegeofSocialAdministration,Beijing101601,China)

Abstract:DynamicBannerisanimportantinformationdeliveryareaofthehomepageoftheuniversityportal,butalsotheim-

anning,design,productionandreleaseofthefouraspects,this

paperdiscussesthedynamicBannerproductionofcommontoolsandmethods;andproposedtheuniversityportalwebsitedy-

lanninganddesignofcollegewebsite,thereasonableuseofthestrategyandtherulesof

thisarticlecanbemoreprominentwebsiteofthehighereducationfeatures,butalsogreatlyenhancethevisualappealofthesite.

Keywords:Website;Banner;Photoshop;Flash

1高校门户网站首页动态Banner

随着互联网技术广泛应用于社会政治、经济、生活等各个

方面，网站已经成为人们在Internet上发布和传递信息的重要

渠道，同时，网站也成为人们检索和获取信息的重要方式。随

着我国高等教育事业的蓬勃发展，门户网站建设已经融入高校

校园文化建设中，业已成为加强高校对外宣传和对内管理不可

缺少的一环。好的门户网站，能够给浏览者以清晰明确的信息

展示，能够让浏览者高效地了解到学校的特色和内涵，也能够

充分体现出校园文化建设的和谐与理性。

高校门户网站是凝聚高校特色文化与教育模式的载体，就

如同一张网络“名片”，传递着大学的信息与风貌。然而，建设

优秀的高校门户网站，除了丰富的校园静态信息外，最能体现

网站特点的就是动态Banner的设计与制作。

网站动态Banner建设分为策划、设计、制作与发布四部

分。其中，策划阶段的主要任务是在明确高校宣传定位的前提

下提出设计规划；设计阶段的主要任务是按照Web特有设计规

律制定出网站动态Banner美学方案；制作阶段的主要任务是使

用最合适的方法完成动态Banner设计方案；发布阶段的主要任

务是测试效果的连贯性与生成最终的格式。网站动态Banner

建设既需要艺术上的美感，也需要技术上的精湛，是艺术与技

术的融合与统一。通过艺术与技术的科学结合，高校可以根据

自己的特点和性质量身定制出一套符合自身特点的动态网站

Banner。

高校门户网站的首页通常由Logo、导航、Banner、内容、链

接、版权六类元素组成

[1]

。高校网站首页Banner是指，在一个

高等学校的网站首页中，横向贯穿整个或者大半个页面，并且

能够突出显示出学校网站的主题、主旨或者主要特色的图案区

域。

Banner可以位于网页的顶部、中部、底部任意一个位置处，

高校网站首页的Banner通常位于页面的顶部和中部，较少置于

底部去显示。Banner既可以使用单幅静态图形展示，又可用多

帧图像制作成动态效果展示。其中，多帧图像展示出的动态效

果称为动态Banner。

动态Banner是目前高校门户网站建设的国际化发展方

向。作为教育和成长相结合的统一体，高校承载了不同侧面的

发展变化，仅通过单幅图片很难把一个高等院校的历史沿革与

校园百态，恰当而又充分地展示出来。然而，表现形式极其丰

富的动态效果有效地解决了这一问题，动态Banner可以更充分

地展现出高等院校不同视角下的人文风采，也可以更充分地吸

引住网站浏览者，让浏览者第一时间捕捉到高校的特色风格。

因而，以哈佛大学为代表的欧美知名高校，已经率先采用了动

态效果作为其门户网站首页的Banner；目前，国内高校也在积

极的使用动态Banner作为其网站最大的设计特色。

2高校门户网站首页动态Banner的策划原则

目前，可链接的国内高校网站超过1400所，虽然这些网站

收稿日期：2015-11-25

204

计算机工程应用技术

本栏目责任编辑：梁书

第12卷第2期(2016年1月)

首页框架不同，但是绝大部分网站表现出了在视觉效果上雷

同、在设计风格上相似的特点。原因在于：大部分高校网站的

首页使用校园风景或人物图片作为Banner，没有经过科学有效

的策划阶段，及时采用了动态效果，也只是多幅静态图片的延

时刷新，

在Banner

Banner

因而这类动态

通常是页面中面积最大的图片元素，

Banner只能起到单一的页面装饰作用。

高校网站首页

1)

策划上应遵循一定的原则。

策划首页

高校门户网站首页动态

Banner，首先要了解网站的定位。随着生源数量

Banner的定位

与质量压力的加大，高校网站在定位上也产生了一定的变化，

由展示演变为了推广。人才是高校的发展的主体，国内外高校

都希望能够通过网站等宣传方式，在最大程度上吸引住最多、

最优秀的考生。因而，高校网站动态Banner的定位，不仅仅是

一般意义上的推广，更是一种准确、独特、及时、有效地体现出

学校特色和办学内涵的传播。

2)

(1)

高校门户网站首页动态Banner

最有效的动态

简洁性原则

的策划原则

Banner策划通常具有简洁的特点。根据网

页的7s定律，如果在7秒钟之内，高校网站的浏览者没有看出

首页动态Banner传递的指定信息，那么该Banner可以认定为失

败的产品。目前国际上比较流行的高校动态Banner风格为简

洁，简洁才能够带来清晰和精炼，简洁才能够突出表达的重点。

动态Banner策划的简洁性并不等于简单化，而是一种平中

见奇的构思，意料之外的创意，也是一种思想上亮点，形式上提

纯。

(2)

校园网站同校报、

实时性原则

招生简章等传统纸质宣传媒体的最大不

同之处，就在于实时性。高校网站的实时性不仅仅体现在新闻

的上传和传播上，也体现在动态Banner的更新和推广上。针对

特色新闻及人物，凭借网络大容量和多媒体的特点，可以从不

同角度和内容策划动态

(3)

Banner，进行横向报道和纵向深入。

网页能否最短时间吸引浏览者视线，

冲击性原则

其根本在于视觉冲击

力。因而，在策划高校网站首页动态Banner时，要把握住冲击

性原则，突出静态画面特征和动态技法特征。达到与人沟通的

目的，以表达自己的思维和想法。好的办法能帮助设计师们达

到这样的效果呢法。通过运用各种方式抓住和强调Banner主

题特征，并将这些特征置于静态画面的主要视觉部位和动态效

果的关键切换时间，使网站浏览者在接触到页面的瞬间即很快

感受到，

(4)

从而产生强烈的视觉冲击力。

动态

主线性原则

Banner不是毫无关系的图片堆叠，而是一个完整的主

线，共同向浏览者阐明了一个真实的校园情怀故事。基于此，

在策划高校网站动态Banner时，要设定好主线，通过时间、空间

发展变化展现出想要表现的理念。

(5)

优秀的动态

加速性原则

Banner策划，一定是充分考虑到了加快下载速

度的最有方案。互联网中有一条不成文的法则：如果整个页面

下载时间超过30s，浏览者在心理上将对该网页产生极强的负

面评价。动态Banner文件本身就比静态图片要大，如果高校网

站在策划动态Banner启用了过多的动态效果，或者使用了分辨

率过高的静态素材，网站首页的下载速度很难保持在浏览者心

理愉悦的范围内。策划中，要规定好动态效果保持在3秒内，

本栏目责任编辑：梁书

ComputerKnowledgeandTechnology

电脑知识

与技术

最多不能超过5秒。因此，为了保证网站对浏览者的吸引力，

在动态Banner策划部分要强调加速性，保证页面的下载速度。

3网站动态Banner的设计

根据网页的7s定律，浏览者对网页注意力只能集中在几秒

内，所以对网页动态Banner的设计除了需要表现网站宣传主题

外，还需要制定相应的设计方法并使用成熟的设计工具。太多

过场动画，需第1时间进行产品的展示，命中主题。并配以鼓

动人心的措辞口号引导用户。

1)

(1)

动态

分析需求，

Banner

完成动态

设计方法

Banner

Banner

需求分析就是确定要达到什么样的设计效果。在动态

风格设计

展时期，

设计过程中，

网站会有不同的宣传目标，

首先要进行的需求分析。高校在不同的发

这样就会有相应的宣传主

题。在需求分析过程中，设计师应系统地分析高校的宣传目的

和需要，从而分析和寻求动态Banner设计方案中的主题。

确定好高校宣传主题，就等于确定了网页动态Banner的设

计风格。在风格的设计过程中，要确保主题突出、不能喧宾夺

主，

Banner

更不能风格与主题相矛盾。这就需要设计师在完成动态

达过多的信息，

风格设计时，

减少过于细碎的切割处理，

要减少过多的辅助干扰元素，

突出用户的浏览重

不要追求传

心。

不同于传统静态Banner，动态Banner风格设计要确保画面

效果和切换动画之间风格的统一性。统一的风格有助于加深

浏览者对高校网站的印象。风格统一，并不意味要把每个画面

的颜色及元素完成的相似，可以选用不同的色彩搭配及元素形

式，关键是要让色彩及元素搭配合理，

在变化的同时更加突出

主题。

(2)

布局设计，

突出中心，

就是经营动态

完成动态Banner

Banner

布局设计

的画面。成功的布局设计

可以充分吸引浏览者停留观看、了解内容、产生欲望。设计动

态Banner的布局，必须要设定视觉的中心，视觉中心通常位于

屏幕的中央或者中间偏上的位置处。确定好视觉中心后，还要

通过均衡的手段，

Banner

在布局设计上通过力量上的平衡感，使动态

画面产生一定的空间感。

的画面具有一定的稳定性；再通过对比的设计方法，使

通过这三步的设计，设计师可以很好地把视点集中到了画

面的最中心，从而引导用户的目光集中在画面的中心点上。重

要的宣传卖点可以安排在这个部位，稍微次要的内容可以安排

在视觉中心以外的地方，这样就突出了动态Banner的布局重

点。

(3)

文字承载了网站宣传的口号和说明性内容，

相辅相成，完成动态Banner文字设计

是动态Banner

设计中必不可少的环节和元素。虽然文字元素信息量大、缺乏

生气，但是好的设计却能够让文字在体现自身内容的同时，表

现出最理想的效果。好Banner设计，一定是文字与其他元素相

辅相成、和谐统一的画面效果。

在文字设计过程中，首先要文字与图片的比例不能过大，

这样就避免了页面的单调和凌乱；其次，要通过字号、颜色、排

列、组合、字体和中英文之间的混搭，衬托出Banner内容的丰富

性和灵活性。

(4)

Banner

均衡色彩，

规格尺寸大小不一，

完成动态Banner

文件大小也有一定的限制，

色彩设计

这

计算机工程应用技术

205

ComputerKnowledgeandTechnology

电脑知识

与技术

就给动态Banner颜色设计上增加了许多障碍。具体表现在：动

态Banner颜色不能太丰富，否则会在文件大小的限制下失真、

也会无法突出重点。在动态Banner色彩设计上，仍然要遵循和

谐、均衡和重点突出的原则。

在不同的色彩组合与搭配的过程中，动态Banner的美感要

注重颜色至简性，在方寸间把握住平衡。也就是说，颜色设计

上，要采用简洁明确、朴素有力的色彩方案，给浏览者带来的更

强的视觉传达力，以及更突出的重量感和力量感。颜色过度的

设计方案，虽然色彩种类多，但是却很难带来更好的视觉传达

效果。因为，颜色过度首先使用会打乱色彩节奏，并减弱颜色

间的对比，从而使设计整体效果变弱。

因而，在动态Banner的色彩设计上，颜色简单就是视觉传

达的有力，

2)

从而以清晰快速的方式达到网络推广的目的。

行的图像处理软件。

Adobe

动态Banner

Photoshop

设计的技术实现

，

Photoshop

简称“PS”

可以有效地进行动态

，是由AdobeSystems开发和发

Banner的

静态设计效果的制作工作。

动态Banner的静态设计制作，主要包括背景图层的制作、

中间层和内容层的制作、构图元素的勾画与编辑和文字表达的

制作与排列。

使用Photoshop设计动态Banner的静态效果图像，主要应

用了Photoshop中的放大、缩小、旋转、倾斜、镜像、透视等变换

功能，以及修补、校色调色、滤镜等图像处理功能。并且，在制

作过程中，要确保效果符合从左到右、从上到下的浏览习惯。

制作完成后，设计师需要生成一个PSD格式的图像，交给动画

制作师进行后续的动态效果的制作。

4Flash技术实现网站动态Banner的制作

一些网页的设计师经常会给动态Banner中加入尽可能多

的特效，以彰显页面的活泼性和多变性。高校网站首页在视觉

传达上要体现出文化性和高尚性的特点，加入过多的特效往往

会让表现力适得其反。在高校网站动态Banner制作过程中，要

明确技术是为内容服务的，不要过分追求华而不实的动态特

效。

1)

可以实现动态

网站动态Banner

Banner

制作工具概述

效果制作的工具有多种，如Javascript

技术和Flash软件。其中，Javascript兼容性高、修改简单，但是

不容易制作出复杂的动态效果，并且会减低访问速度。Adobe

公司的Flash软件具有入门容易、操作相对简单、表现效果丰

富、

ner的制作通常使用

价格相对低廉和功能强大的特点，因而，目前网站动态Ban⁃

帧。同时，

Flash本身就是一个动画概念，

Flash技术来完成。

Flash可以增加很多特效，

通常一秒可播放

还可以编码、导入视频、

12帧或24

编

辑视频、添加音乐，还可以把成片发布到网络中。Flash动画入

门也比较容易，一个有一定计算机基础的人，初步掌握Flash动

画大概需要一个月。由于Flash的易操作性和崭新的视觉效

果，Flash动画已经成为目前网站动态Banner的制作的主要技

术。

[2]

2)

(1)

使用Flash实现动态Banner

Photoshop

使用

背景绘制

制作的常用流程

Flash软件就可以绘制动态Banner

成背景，而是直接使用静态设计师在

的强大绘图功能，通常动画制作师不必采用

的背景，但是鉴于

Banner设计阶段完的

Flash

PSD

完

206

计算机工程应用技术

第12卷第2期(2016年1月)

格式文件中的背景图像。背景图像的绘制要充分考虑到设计

稿规定的景别、角度以及结构框架绘制，并且要有摄像机意识，

即空间距离意识和镜头关系意识。

(2)

关键帧动画的制作，

关键帧动画制作

是控制Banner动作轨迹特征和动态幅

度的关键。虽然可以采用逐帧动画的方法来完成，即一幅一幅

地绘制动画效果图。但是，由于逐帧绘制动画的方式工作量非

常庞大、对美工要求太高，所以虽然逐帧动画看起来比较流畅，

但这种方式很少使用于网站动态Banner的制作中。

网站动态Banner关键帧动画的制作，通常采用Flash中的

补间动画方式。利用补间动画方式，动态Banner制作师只需要

绘制开始和结束两个关键帧的内容，从开始到结束中间的过渡

部分内容可以由Flash自动生成。正是因为补间动画的方式仅

需绘制两帧图像，关键帧动画的制作时间就大大地缩短了。

[3]

(3)

使用

交互性的制作

Flash完成的动态Banner，还可以具有交互性，从而是

网页更具有生命力。Flash内置的ActionScript脚本语言，可以

实现多种浏览者与网页互动的功能。即高校网站的动态

ner

Ban⁃

传元素进行全方位的深入了解，

还可以嵌入一些链接，浏览者通过点击、选择等操作，对宣

(4)

使用

修线上色

形成了更加立体的认识。

Flash完成的动态Banner的修线有两种方式：一种是

将动画中的错误或多余的线条进行修改；第二种是为了给动画

填充颜色而添加上去的线条，颜色填充完后再把线条删除。

使用Flash完成的动态Banner的上色，就是给场景中的背

景、物体、人物以及动物填充颜色的过程，它可以看做动画的最

后包装，

Banner的视觉质量。

也是运动主体的视觉包装。上色质量直接关系到动态

[3]

(5)

制作师在使用

制作取景框

Flash制作动态Banner动画时，部分元件是

安置在

Banner

全屏播放或者大于

动画时，

Flash的舞台以外的。网页内嵌的

在100%

100%

的比例下，

的比例播放时，

浏览者看不到舞台外部；

Flash播放器播放

舞台外的部分就会一

而

览无余了，这就严重影响了到动态Banner的显示效果。为了让

浏览者在播放器缩放时，也看不到舞台外的部分，一般需要在

舞台周围绘制一个大大的纯色矩形外框，让它覆盖住场景以外

所有的部分。

(6)

动态

添加音效

Banner的特效不仅体现在动画效果，更体现在与动画

效果相伴的音效上。动态Banner的音效分为两种情况：背景音

效和交互时的音效。通过Flash的导入功能，制作师可以将音

乐和效果导入到库中，再把音乐从元件库拖到场景中，通过查

看波形线确定音乐添加情况，最后，通过属性栏来控制音乐的

音量效果及循环等等。通过音效的添加，一个动态Banner可以

在拥有精美画面的同时，也拥有精彩的声音效果。

[4]

5网站动态banner的发布

件。但是需要注意：

Flash可以将动画同时发布成多个不同格式动态

在发布前最好先优化动画，使动态

Banner

Banner

文

的体积达到最小；同时，需要测试动画否有不连续的地方。因

为需要保证动态

Flash的模拟网上下载功能，

Banner的浏览速度，

测试整个动态

所以制作师可以使用

Banner

（下转第209页

动画的下载

）

本栏目责任编辑：梁书

第12卷第2期(2016年1月)

ComputerKnowledgeandTechnology

电脑知识

与技术

2）图像的分析和增强

图像的分析和增强是Matlab在图像处理技术上最全面也

是最关键的一个步骤，在Matlab图像的统计计算上，该软件可

以给学生提供改善图片的关键技术，例如校正、直方图均衡、调

整对比度等等，这些技术是Matlab中最难的一部分，这一部分

需要老师着重讲解和介绍，才能使学生运用自如。

3）Matlab提供了非常复杂的数学形态学函数，例如腐蚀、

膨胀算子以及在此基础上的开、闭算子等等，这些算子不仅有

助于图像的处理，还对学生的C语言水平有着极大的提高。

结语：实践证明，MATLAB软件功能强大。Matlab对于图

像处理有很大的优势，在图像处理中应用Matlab会大大节约实

验事件并有很好的效果。Matlab图像后处理技术几乎包括所

有经典的图像处理方法，它能有效应对各种劣质或者损坏图

像，在图像精确处理方面发挥着不可替代的作用。Matlab功能

十分强大，界面简洁，易学易用，不仅仅能够为图片后处理提供

强大的支持，还可与C语言等计算机程序结合使用，为工程性

操作提供了更多便利条件。因此，在图像处理技术中使用

MATLAB语言可以快速实现对图片的精准处理和操作，提高了

对图片处理的技术和质量。

参考文献：

[1]杨烨,车立娟.Matlab在医学图像后处理中的应用[J].上海中

医药大学学报,2009(2):40-42.

[2]曾繁如,何政伟,李喆.MATLAB软件与ALOS遥感影像在震

害建筑物自动识别中的应用

——以都江堰市区为例[J].西北

地震学报,2009(4):327-332.

[3]自动化技术、计算机技术[J].中国无线电电子学文摘,2006

(1):157-218.

（上接第206页）

性能。最后，制作师把Flash发布为SWF格式的文件，并上传到

网站上，供浏览者访问观看和欣赏。

与其他高级语言和数据库的完美结合，将成为高校网站首页动

态Banner制作的发展方向。

参考文献：

[1]祝晓铭,王艳平.高校门户网站Banner的“图说”功能研究[J].

现代计算机（普及版）,2014(12).

[2]冯友群.浅谈Flash动画制作及在网站中的应用[J].中国信息

化,2013(14).

[3]常海霞.Flash动画在网页设计中的互动性研究[D].2008

[4]吴韬,魏砚雨.Flash二维动画项目制作教程[M].上海交通大

学出版社,2012(6).

6结束语

目前高校的网站，都在朝着动态化的制作方向发展。通过

动态Banner的策划、设计、制作与发布，可以形成一个多姿多彩

的网络校园风貌和人文景观，最终成为高等院校的网络名片。

动态Banner并不是一劳永逸的，它是一项长变常新的工

作，需要在多角度、全方位、实时性地宣传学校优点、发布学校

的重大事宜与政策，增强浏览者与高校之间的交流，从而提高

校园的管理效率。因而，一个高校网站首页动态Banner的制作

需要更多的技术与支撑，特别是利用Flash内置的ActionScript

本栏目责任编辑：梁书

计算机工程应用技术

209