导航
- 世界上第一个Banner广告诞生
- 酒香也怕巷子深
- banner的作用
- 表达什么
- 轮播图
- 结语
- 参考
如果把眼睛比喻为心灵的窗户,那么banner就是网站中一扇面向外面的窗户。
世界上第一个Banner广告诞生
1994年10月27日,世界上第一支在线广告诞生了。现在看来俗气的彩虹字体、直白的广告语——“你点击过这里吗?你会这么做的”,却开创了在线广告的世界历史。
它出现于《连线》杂志的在线分支HotWired中。HotWired是一个电子杂志出版商,它以付费的方式采集内容,需要创建盈利模式来支付作者稿费。于是,它开创了一项商业计划:将网站中的部分版面,留给广告主,形式与传统纸媒中广告版面的售卖方式类似。他们将广告版面称为“Banner Ads”(横幅广告),并向广告主索要了一笔前期费用,用于在一段时间内展示此广告——这种付费方式与今天的点击付费模式截然不同。
Banner广告的概念随之风靡开来,不久之后,各大内容网站都开放了Banner广告位,并因此获得了不菲的广告报酬。
简单来说,banner也就是大家常见的广告大图,或者广告小图。Banner可以作为网站页面的横幅广告,一般放在网站页面的顶部的各种宣传图。

酒香也怕巷子深
过去我们总是说“酒香不怕巷子深”。但是,在信息过剩的今天,如果不懂得宣传自己,即便是"好酒"是容易埋没在信息的海洋中。
我们通过建立自己的技术博客,分享技术见解,希望以文会友。
高质量的输出和读者的认可才有可能激励自己把这件事情持续的做下去。
所以,我们的内心是渴望读者的。
如何吸引和打动读者,那么Banner的展现就显得尤为重要。
banner的作用
在互联网高度发达的当下,在人工智能的加持下,每天都会有大量的信息蜂拥而至。如何快速吸引用户驻足,赢得用户的注意力,显得尤为重要。
站点banner是指放置在网页顶部的广告条,即网络横幅广告,是网页广告中较为重要的一种表现形式。
还记得我们在《打造顶部组件》中提到的大多数情况下浏览者不由自主的以“F”形状的模式阅读网页。
而网站的Banner正好处于“F”区域的顶部————这正好是访客打开网站最先映入眼帘的区域。
表达什么
我们把网站的黄金位置留给了banner,那么应该呈现什么内容给访客呢?
Banner 通常呈现的内容主要有以下几个方面:
- 品牌或产品信息:Banner 的主要目的是传递品牌或产品的信息,因此其内容通常包括品牌名称、标志或关键词等。
- 促销信息:在一些特定的时间和场合下,Banner 可能会呈现促销信息,例如打折、优惠等。
- 活动信息:Banner 也可以用于呈现一些活动信息,例如抽奖、比赛等。
- 个性化内容:根据不同的需求和目的,Banner 可以呈现个性化的内容,例如用户自定义的标题、图片、文字等。
在技术博客中,我们通常会把那些新文章或者阅读量高的文章或者一些站点公告信息放在banner中展示。
轮播图
如果我比别人看得更远,那是因为我站在巨人的肩上。--牛顿
Banner应用到互联网后,一般不再是单张Banner图,而通常是多张图片轮播,因此习惯称作Banner轮播图或广告轮播图。
轮播图是媒体组件的一种,支持自定义轮播图片、轮播动画效果等,能够在可视化应用中展示多张图片轮流播放的效果。
轮播图也是目前互联网产品中应用最多的展现形式。
轮播图包含的几个元素:
- 文案
- 图片
- 链接
- 播放频率
我们希望通过图片吸引用户,用文字表达主题,引导用户点击banner的链接。
所以,这里文案和图片是重点。这就需要一定的文字功底和设计能力。
当轮播图的元素准备好之后,如何实现这样的效果呢?
主流的前端框架大多数都有轮播组件。
这里以bootstrap为例,官方提供了carousel组件。

对于有一点html,css基础的同学非常友好。有兴趣的同学可以到官网去体验一下bootstrap-carousel。
结语
当我们是一个站长的时候,我们不会只是简单思考这个网站的实现技术,还需要思考网站的一些运营指标。比如,
- 流量指标:包括独立访客数、总访问量、页面浏览量等。
- 转化指标:包括销售额、用户留存率、客单价等。
- 安全指标:包括响应时间、吞吐量、错误率等。
- 运营指标:包括活跃用户数、新增用户数、用户平均停留时长等。
- 技术指标:包括服务器负载、并发量、链接速度等。
- 其他指标:包括社交媒体影响力、品牌知名度等。
为了实现这些指标,我们可能会考虑更多的运维策略和运营策略。
本文介绍的banner和轮播图也属于网站运营策略的一种,希望能够起到抛砖引玉的作用。