五类主流网页广告制作秀(下)

站长空间

如果网站发展得顺利,必定会有网络广告的投入,而各式各样的广告会给网页带来不同的效果。站长们怎样选择网页广告的类型呢?我们不仅要考虑到能让浏览者一目了然,还要考虑网页的美观。上期我们为大家介绍了横幅广告和插页广告,现在接着介绍目前主流的网页广告制作方法。

种类三:框架广告

框架广告是网页中一种常见的广告,该类广告都是由一组广告组成的,站长将这一组广告用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就使广告中的文字就向上滚动,这就是我们常见的公告栏的效果。