对于拥有个人网站的站长来说,网站经营久了是不是总想在自己的小站中添加一些网页广告呢?一来可以增加一些收入,二来也为小站做一下宣传,增添几分生气。目前网页中的广告类型繁多,各式各样的广告给网页带来不同的效果。因此我们在网页中添加广告时不仅要考虑到能让浏览者一目了然,还要考虑网页的美观。综合以上几点,我们列出了网页中常见的几种广告方式及各种广告的制作方法,希望各位站长根据自己的实际情况添加适合小站的网页广告。
种类一:横幅广告
横幅式广告又叫“旗帜广告”,这是在网页中最常见的网页广告,该广告最常用的尺寸是486×60(或80)像素,一般插入到网页的固定位置,如页眉、页尾等部分(图1)。通常情况下整个图片和Flash动画都可以制作出广告内容,这样可以加大广告信息量。
广告网址:http://www.skycn.com
采用站点:经常被新浪、搜狐、电脑报、天空软件站、天极网等一些国内著名的网站采用。
广告特点:该广告通常放在网页开头位置,用图片或动画的方式显示广告信息,让浏览者一目了然,快速了解广告的内容。普通页面结构的网站都可使用。
制作方法:
通常情况下横幅式广告分为图片横幅(包括GIF动画)广告和Flash动画横幅广告两种。把两种广告插入到页面中的方法也有一定的差别。
1.图片横幅广告
直接插入法:直接插入横幅式广告制作非常简单,我们可以使用Dreamweaver或Frontpage等网页编辑工具轻松完成。首先我们制作出表示广告内容的图片或GIF动画。随后我们将这些图片插入到网页相应的位置即可。
插入广告图片时,首先用网页编辑工具打开需要插入广告的网页,随后我们找到需要插入广告的部分,单击“插入→图片→来自文件”并选择需要的图片即可。这样我们就可以将该广告图片插入到网页中,随后在该图片上单击右键选择“超链接”命令(图2),在打开的“插入超链接”对话框的地址栏中输入该广告图片链接的网址即可。
编写脚本法:用上面的方法直接插入横幅式广告,每次修改广告图片都要对该网页进行修改,修改不好就会影响网页的正常运行。为了保证网页的安全,很多站长采用插入脚本的方法来插入横幅广告。
利用脚本语音插入横幅广告时,首先打开记事本程序,然后在记事本中输入以下源代码:
document.writeln("<a href=http://www.ip-guard.com/s_chinese/index.htm?AD=Skycn1 target=_blank><img border=0 src=tuijianimg/ip-guard.gif width=468 height=60></a>");
提示:href=http://www.ip-guard.com/s_chinese/index.htm?AD=Skycn1表示图片链接的网页。target=_blan 表示从新的网页中打开该页。src=tuijianimg/ip-guard.gif 表示插入的横幅式广告中的图片。width=468 height=60表示该广告图片在文件中的宽度和高度。
输入后,将记事本文件保存为.js格式的文件即可。名字经常可以随便输入,如:top.js。
然后用网页编辑工具打开需要插入广告的网页,并切换到源代码界面,在该界面中需要插入代码的位置插入<script language=javascript src= top.js></script>语句。其中src= top.js就是我们刚刚编写的脚本文件。
最后,对网页文件进行保存即可。以后我们在修改网页中的广告和图片时只要将脚本语言中的图片名称和链接网址修改即可。
2.Flash横幅广告
插入Flash广告的方法和插入图片、GIF广告的方法不太一样,由于在制作Flash动画时已经将超链接制作在动画中了,因此我们只要将Flash文件插入到网页中即可。
插入Flash广告时,首先确定广告放置的位置,单击“插入→图片→Flash电影”,随后打开一个选择文件对话框,这时选择我们的Flash广告,这样即可插入到网页中。随后双击该插入的文件,弹出一个“Flash电影属性”对话框,在此对电影质量、背景颜色、文件大小等进行相应设置即可。
种类二:插页广告
插页广告(InterstitialAds)又叫“弹出广告”,广告商将自己的广告产品放入某一个特定的网页中,当用户打开该网页时,在该网页出现之前会弹出一个新的窗口,该窗口为广告显示内容。
广告网址:http://it.sohu.com
采用站点:新浪、搜狐、天空软件站、QQ广告、天极网等一些国内著名的网站中都经常采用该类广告。
广告特点:不占用页面空间,显示的广告窗口比较明显,广告界面中的图片先显示广告内容。
制作方法:
该类广告分为普通插页广告和自动关闭插页广告。普通插页广告在网页打开后会插入一个广告页面,该页面不会自动消失,浏览者必须单击该页面标题栏中的“关闭”按钮才能关闭广告窗口;自动关闭插页广告是在该广告弹出后几秒钟后自动关闭广告窗口。
1.普通插页广告
插页式广告是用Javascript语言编写的,在相关的网页中插入下面的Javascript语言即可。
第一步:插入JS脚本文件。在网页的html码的与之间加上下面的代码,调用 chromeless window程序:
<script src="/blog/js/chromeless_35.js"></script>
提示:script src=后面为JS文件的路径,chromeless_35.js是一个特定的JS脚本文件,名字可以随意更改,如果你需要可以到网站上下载一个,如http://fym888.nease.net/js/chromeless_35.js即可下载。下载后将它放入相应的文件夹下即可。
第二步:插入弹出页面文件。输入上面的js脚本文件后,我们还要输入需要弹出窗口的脚本程序。其代码如下:
<Script language="Javascript">
AD = new ADM("POPUNDER",3);
AD.src = "http://images.sohu.com/cs/button/tclpc/2005/itpopun715a.html";
AddSchedule(AD);
</Script>
提示:AD.src后面的网址为弹出窗口的页面地址,我们可以根据需要插入相应的网页。
2.自动关闭插页广告
现在很多插入广告在屏幕右下角显示一段时间后,会自动消失,就像QQ、MSN等登录信息一样(图5)。
这类插页广告其实也是用源代码编写的(完整代码下载地址:http://www.cpcw.com/xd/zd.rar)。制作时首先用网页制作工具FrontPage打开或新建一网页,随后将该代码复制到网页代码的<body>和</body>中间。
该代码复制后,在网页中会增加一个层,这个层默认是隐藏状态的,因此在“设计”页面中我们无法看到。随后单击“视图→任务窗格”命令,在右侧打开任意窗口,选择好层后,在任务窗口中打开“层”属性窗口,单击“可视性”设为“可视”,这时我们可以在“设计”界面出现一个层窗口,我们就可以在该层中插入表格并插入广告图片了。随后给该插入图片或文件选择好超链接(图6),编辑后将层的“可视性”改回“隐藏”属性即可。
种类三:框架广告
框架广告是网页中一种常见的广告,该类广告都是由一组广告组成的,站长将这一组广告用Javascript插入到一个网页中,并让该组广告定时显示不同的广告内容,随后将该网页放在页面的框架中,这样浏览者在浏览该页面时根据浏览次数网页会自动显示不同的广告内容,页面的横幅广告使用的就是框架式广告。
广告网址:http://it.sohu.com
采用站点:框架式广告是一种特殊的广告,如搜狐、新浪、IT168等著名网站经常使用该类广告。
广告特点:有横幅式广告明显的特点,此外该类广告能自动切换广告内容。
制作方法:
首先准备好需要插入的广告图片,这些广告图片的尺寸要保持一致。随后就来制作广告页面。首先在DM中新建一个网页,将“框架式广告.txt”中的源代码复制到该网页的与之间。
其中:var oddseconds = sec onds%9 表示广告图片参数。
在每组语句中都有一串类似于以下的代码:
{
document.write("<a href=http://www.hongit.com target=_blank>&limg src= 1.gif border=0></a>");
}
该语句中的href=表示该广告图片链接的网页,target=_blank表示网页打开方式,其中_blank表示使用一个新窗口打开;_self表示在同一窗口中打开。后面的src= 1.gif表示插入的广告图片,border=0表示边框为0,也就是不显示边框。
广告网页制作后,下面我们就可以看看如何插入到框架中了,需要说明的是,该框架并不是我们创建的框架网页,而是在某一网页中插入的一个镶嵌式框架。插入这样的框架时我们可以在FrontPage中轻松完成。
首先打开需要插入框架广告的网页,在合适的位置先来创建一个表格,然后在表格中插入一个“嵌入式框架”,插入时用鼠标单击“插入”菜单中的“嵌入框架”命令,这时在网页中插入一个,用鼠标拖动该框架的边框即可调整框架的尺寸。
现在单击“设置起始网页”按钮,打开插入超链接对话框,在此选择我们刚刚创建的广告网页,单击“确定”即可将该网页导入到框架中。最后双击该框架边框,弹出一个“框架属性”对话框,在此将“显示边框”前面的钩去掉,这样以后在该网页中只显示框架中的图片,不显示框架的边框。将“对齐方式”设置为顶部对齐,将“滚动条”设置为不滚动。至此嵌入式广告创建成功。
种类四:飘浮广告
飘浮广告就是在网页上面的一个浮动的小图片,该图片在网页中不停地飘动,用鼠标点击该图片可以查看详细内容。
广告网址:http://www.skycn.com
采用站点:飘浮广告的使用率非常高,如搜狐、新浪、雅虎、华军下载园、天极等网站相关页面都提供了飘浮广告。
广告特点:由于该广告采用浮动窗口的形式,这样可以引起浏览者的注意力。
制作方法:
飘浮广告一般分为图片飘浮和Flash飘浮两种格式。
第一步:首先准备好制作飘浮广告的素材图片。
第二步:我们还要下载一个js脚本文件。在此我们提供了一个名为ad.js脚本文件(http://www.cpcw.com/xz/ad.rar)。
下载后将该脚本文件保存到相应的文件夹中,随后用记事本将其打开,下面我们还要对该脚本文件信息修改。
第三步:用网页编辑工具打开需要添加飘浮广告的网页,并切换到代码窗口,随后在<head>、</head>之间添加一串<script language=javascript src= ad.js></script>语句,其中src= ad.js为添加的脚本名称。添加后保存该网页并预览这时我们看到一个无显示图片的方框在该网页中飘动。下面我们还要通过简单的设置,即可插入自己的图片和广告链接。
1.图片飘浮广告
如果你在网页中添加的是一个图片飘浮广告,我们可以将var isflash=设置的值设为0,即var isflash=0,其中1表示是 0表示否。
在var pic="1.gif"语句中输入广告图片的路径。
var alt="支持本站,请点击广告赞助商";表示鼠标放在图片上时显示的提示文字。
在var url="http://www.vscool.net";输入图片广告链接的网址。在var Wimg=100; var Himg=100;语句中输入图片的宽度和高度。
输入后单击“保存”按钮,随后预览该网页,怎么样图片广告已经在该页面上面飘浮着了。
2.Flash飘浮广告
Flash飘浮广告就是飘浮的窗口中是一个Flash动画文件。设置Flash动画广告时,首先将js脚本程序中的var isflash语句设置为1,即var isflash=1。随后在var flashurl="3.swf"语句中输入飘浮的Flash文件的路径及名称。
随后单击保存即可,预览该网页,该网页的飘浮广告已经变成了Flash动画了。
种类五:滚动广告
我们经常在网上看到一些滚动的图片或文字,单击这些图片和文字就可以进入指定链接的网页,很多网站将这些滚动的图片或文字制作成广告,放入某些网址的相应页面中,单击图片或文字上的链接即可访问该广告的内容。
广告网址:http://www.sina.com.cn
采用站点:滚动广告的利用非常普遍,几乎每个门户网站都使用该类广告。像国内的新浪、搜狐、网易、搜房网等网站出现该类广告的次数更是频繁。
广告特点:该类广告一般作为提示信息出现在网站比较醒目或是一个栏目比较明显的位置,如我们常见的公告栏就使用滚动广告做成的。
制作方法:
该类广告分为图片滚动广告和文字滚动广告两种方式。滚动的方向可以是向上、向下、向左、向右几种滚动方式。
1.图片滚动广告
在网页中添加图片滚动广告非常简单,首先准备几张大小相同的广告图片,然后放入同一个文件夹中,随后启动编辑工具,打开或新建一页面,在该网页中创建一个行数和列数都为1的表格,然后我们再把边框尺寸设置为0,这样设置出来的表格边框为虚线,在网页中不会被显示。
然后将鼠标指针定义到该表格中,然后切换到“代码”窗口中,最后在<td></td>语句之间,插入下面的语句:
<marquee behavior=scroll direction=left width="100%" scrollamount=5 scrolldelay=30 onmouseover='this.stop()' onmouseout='this.start()'>
</marquee>
该语句就是滚动代码,其中direction=left 表示该广告由右向左滚动,如果你将direction= 赋予值right,这样就会出现图片由左向右滚动,改为up图片就会向上滚动,改为Down图片会向下滚动。我们可以根据需要进行修改。如果要改为上下滚动我们应该将图片外面的表格调整为竖式。后面的scrollamount=5表示图片滚动的速度,在此我们根据需要进行输入。
提示:在Dreamweaver中如果插入上面的语句,先将<td></td>之间的 语句删除,否则有多行表格出现。
上面的语句插入后,切换到视图界面,下面我们就可以将需要的图片插入到表格中了。当然你可以在表格中设置几个单元格来固定图片。图片插入后,按下F12键,看看图片是不是开始滚动了。
插入图片后,下面我们还要创建超链接,将每个图片对应的广告网址链接起来,这样图片滚动广告创建成功。
2.文字滚动广告
文字滚动广告的制作方法和图片滚动方法一样,只要将插入的图片改成文字,随后添加上超链接即可。
在文字滚动广告中如果将direction=left,改为direction=UP就使广告中的文字就向上滚动,这就是我们常见的公告栏的效果