vbscript在网页中的应用
文/eleboy
这个网页构思为在网页的右边有一黑暗中的人物,在黑色背景下左边白色的文字逐行逐行地从下端向上显现出来。点击这里看实例。
一,背景的制作
我们需要制作一个黑色背景。首先运行FrontPage Editor建立一个新页,选择工具栏中Frame下的New Frames Page,出现对话框后选择Contens式样的Frame(框架)。这时一个分为左右两个框架的新页建立起来。在左右两个框架中都点击New Page按钮后背景现出白色,我们下一步就把它变为黑色。在空白处单击鼠标右键出现以下菜单:(图1)

选择Page Properities后出现以下对话框:(图2)

选择Black后按下确定。此时两个框架(Frame)都变为黑色了。但因为两个框架之间隔着卷轴(Scrollbars),需将其除去。在空白处单击鼠标右键,选择Frame Properities后出现以下对话框:(图3)

在Show Scrollbars的下拉菜单中选择Never,使卷轴不再出现。然后点击Frames Page,将Frame Spacing 的值设为0,完成后按下确定键。把左边的框架(Frame)存为left.htm,右边的框架存为right.htm,整个网页结构存为sinian.htm。
二,图像处理
启动Photoshop打开要事先准备好的人物图片,使用image下的image Size调整好图片的尺寸,通常情况下,图片的宽度不要大于800pixels,高度不要大于600pixels。然后选择image下的Mode既颜色模式转换功能菜单,把图象的颜色模式转换到Indexed Color模式。再选择File下的EXPORT下的GIF89a Export,下图是gif格式图片输出方式的对话框:(图4)

选择左边的图标
后,鼠标便变成图示的吸管样式,用它吸取图像中与网页背景色相同的颜色,因为这个网页的背景是黑色,我们就吸取黑色。这样做的目的是为了减少网页文件的大小。要知道现在的网络速度太慢,我们必需得想经尽一切办法来减给网页图片“减肥”,尽量保证在不影响图片质量的情况下尽最大可能压缩图片。吸掉多余的颜色后按下OK键存为gif格式文件。在此我们把这幅图取名为man.gif。下面我们来制作网页左边框架(Frame)的文字图片。在Photoshop中新建一个文件,并将前景色设为白色,把背景色设为黑色,选择工具栏中的文字工具
,用鼠标点一下后,在弹出的对话框内输入文字,在Size复选框下选择字体的大小,在Font下拉选框下选择合适的字体,并确定Color是白色。如图所示:(图5)

完成后使用Layer下的Flatten image合并图层,最后将图层按上述同样的方法去掉多余的颜色并转换为gif格式。这幅有文字的图片存为word.gif。
现在我们又回到FrontPage Editor下,打开Sinian.htm文件,将有文字的图片设为左边框架中的背景图像,具体如图3所示,勾选Background image,用浏览功能(Browse)把图片选中为这幅有文字的图片word.gif。而人像图片man.gif就直接插入右边的框架(Frame)中。最后调整框架(frame)的宽度至合适位置,让左边框架的文字完全显露出来。
三,让网页动起来
在做完以上两个步骤以后,实际上已经制作完成一个静态网页,现在我们要做的是让这个网页左边的图形文字向上移动。您不要指望FrontPage本身所带的动态效果,实际上,在您上传网页以后你就会发现它们中的很多效果会走样。没办法,世上没有十美的东西,我们只有自己动手编写了。有人认为在可视化网页编写软件产生以后就没有必要学超文本标识语言,笔者反对这种观点,我认为作为一个主页制作者至少也应该看懂html。现在就需用FrontPage Editor的html编辑功能进行编辑。打开左边框架的html文件left.htm,并将窗口下端的Normal菜单转为HTML菜单来进行html编辑。在主体元素<BODY>后面插入以下VB脚本语言:
<script language="VBScript"><!--
dim c,numgc
c=-100000
numgc=document.body.sourceIndex
sub SF
c=c-1
Document.all(numgc).style.BackgroundPosition= "0 " &c
id=SetTimeOut("SF",88,"VBScript")
end sub
SF
--></script>
您可以把id=SetTimeOut("SF",88,"VBScript")中的88改为其它数值来调整网页运动速度。数值越大,速度越慢。
至此,这个网页便制作完成了,各位要看实例的话请到这里:http://www.seek-for.com/0/heart/silian.htm