JavaScript为你的网页添油加醋
制作弹出式窗口
有许多网页在打开的时候，会弹出一个较小的窗口，显示广告或一些最新信息。这种弹出式窗口制作很简单，只要在网页代码的〈body〉标签后面插入类似代码即可：
〈script language=″javascript″〉
window.open(′url′,′窗口名′,′属性列表′);
〈/script〉
其中“url”是在窗口中显示的html文档的地址；“窗口名”可任意起一个，但不要用中文；“属性列表”是一个用逗号分开的各个属性值的字符串，它确定了弹出窗口的外观与状态。常用属性有：
toolbar（是否显示工具栏
）、location（是否显示地址栏）、directories（是否显示常用链接）、status（是否显示状态栏）、menubar（是否显示选单条）、scrollbars（是否使用滚动条）、resizable（是否可改变大小），这些属性值等于1时表示是，等于0或不将此属性加入列表时表示否。此外，还有width（窗口宽）、height（窗口高）、top（与屏幕上边的距离）、left（与屏幕左边的距离）等属性用于对弹出窗口大小和位置的控制。
例子：要制作一个只有地址栏、无滚动条、可改变大小、高100像素、宽300像素、初始位置为距屏幕上边与左边都为100像素的弹出窗口，并在其中显示当前目录下hello.htm的内容，则要将上面的代码中间的一段改为：“window.open(′hello.htm′,′window1′,′location=1,scrollbars=0,resizable=1,height=100,width=300,top=100,left=100′);”。
制作“关闭窗口”、“前进”、“后退”链接
“关闭窗口”、“前进”、“后退”这些浏览器本身具备的功能，也可通过页面中的超级链接来实现。
在frontpage中，选择要链接的文字或图像，按ctrl－k 打开“create hyperlink（创建超级链接）”对话框，在“url”中输入“javascript:window.close()”可制作关闭当前浏览器窗口链接；输入“javascript:history.forward()”可制作“前进”链接，功能相当于浏览器上的“前进”按钮；输入“javascript:history.back()”可制作“后退”链接，功能相当于浏览器上的“后退”按钮。这些链接对于没有选单、没有按钮的弹出式窗口会非常有用。
制作具有链接功能的下拉式选单
在frontpage 中，使用“insert（插入）”〉“form field（表单域）”〉“drop－down menu（下拉选单）”命令插入一个下拉选单。右键单击它，在快捷选单中选“form field properties（表单域属性）”，在打开的对话框中按“add...（添加...）”按钮打开“add choice（添加选项）”对话框，在“choice（选项）”中输入要在下拉选单中显示的文本描述，点击“指定值”前的复选框使该项有效，在它下边的文本框中输入相应的完整url地址，然后确定。继续添加其它选单选项，完成后确定。
在表单中任意位置击右键，在快捷选单中选“form properties（表单属性）”，在弹出的对话框中选择“send to other（发送到其它）”。
点击frontpage 界面左下角的“html”标签进入源代码状态，寻找刚才制作的下拉式选择框所对应的代码，在〈select〉标签中加入这样一段代码：onchange=″location.href=this.options[this.selectedindex].value″。
用frontpage可视化编辑样式表
你一定见过许多主页上有这样的链接，它并不像普通链接总是带下划线，当鼠标指上去时，链接文字就会变色并出现下划线，这都是样式表的功劳！
用frontpage打开要编辑的html文件，使用选单命令“format(格式)”〉“stylesheet...(样式...)”打开“format stylesheet(样式格式)”对话框，这里显示了当前文件内联样式表的内容，你可以在〈!－－...－－〉 之间添加或修改样式表语句。如果要添加新的样式语句，首先要输入标签(如：a:link、a:hover、a:active、a:visited 它们分别表示：正常情况下未访问过的、鼠标接近时、鼠标点击时、访问过的链接的样式)。然后，把光标停在这个标签末尾，点击对话框左下角的“style...(样式...)”按钮，进入“style(样式)”对话框，在这里你可以跟据需要设置多种样式属性。如果要更改某个标签的样式，只要光标停在相应标签后面的一对大括号中代码的任意位置，然后按“style...(样式...)”按钮进行修改即可。
例子：你希望鼠标移动到链接上时，文字背景变为黄色，文字本身变为红色且无下划线。先在〈!－－...－－〉之间输入a:hover，然后把光标停在它末尾，按“style...（样式...）”按钮进入“style（样式）”对话框，在“colors（颜色）”页中设置“foreground color（前景颜色）”为红色，“background color（背景颜色）”为黄色，在“text（文本）”页中设置“decoration（修饰）”为“none（无）”，然后确定。这时，frontpage已将代码{ background－color: rgb(0,0,128); color: rgb(255,255,255); text－decoration: none }添加到a:hover标签后面，是不是比自已编容易得多？
制作鼠标指针指在上面时会变化的动态按钮
在frontpage中通过选单命令：“insert（插入）”〉“active elements（active单元）”〉“hover botton（动态按钮）”，可以制作动态效果的按钮。但是，这种按钮效果是基于java applet 小程序的，它有速度慢、不能显示提示文本、鼠标指针不能变为手形等缺点。这里介绍用dreamweaver 2.0 制作基于javascript的动态按钮的方法。
在制作这种按钮效果之前，首先要为每个按钮制作两张不同的图片，一张是正常情况下要显示的图片，另一张是鼠标指针停留在按钮上时要显示的图片。图片命名时最好有规律，比如两张图片名分别是botton.gif 、botton_1.gif。
首先在frontpage中插入第一张图片，并设好超级链接，文件保存后用dreamweaver调入（如果熟悉dreamweaver，可以不要frontpage“帮忙”）。单击已插入的第一张图片选中它，点击“behaviors (行为)”窗口（如果未显示，按f8显示它）中的＋号按钮，在选单中选“swip image（交换图片）”打开对话框，按“browse（浏览）”按钮选择第二张图片，最后点“ok”确定。这样，一个动态效果按钮就做成了，简单吧。（责任编辑 Ray )
用JAVASCRIP来装份你的家园。（
随着INTERNET的逐步盛行，上网冲浪已经成为一种很时尚的事情，在网上拥有一个属于自己的“家园”更是这些网虫们的追求。为了使自己的“家园”更有特色，吸引更多的人参观，这些网虫们可以说是煞费苦心，他们往往利用各种专门网页制作工具例如FRONTPAGE2000、DREAMWEAVER等来制作网页，利用各种特效编辑工具来增强页面效果，然而利用上面的专门制作工具来装扮“家园”不是一件简单容易的事情，而且它们还能在网页中生成大量的垃圾代码和错误代码，从而不利于浏览器快速浏览。为此笔者今天就向各位网友提供另外一种生成特效的方法，那就是往主页中添加HTML源代码，这种方法可以最大程度上对HTML代码进行优化，提高代码质量。在这里笔者就把自己平时在实践过程中，搜集和整理的一些常用的HTML代码小程序推荐给大家。大家使用它们时，只要通过简单的复制和粘贴操作，就能制作出相应的特效来。如果你稍懂一些HTML语言和JaveScript插件语法则更好。
1、显示访问者的浏览器相关信息
如果你想让你的主页自动能显示出访问者的一些相关信息，例如在页面中显示出他的浏览器类型、版本号等信息，并提出建议，如: “请使用600*800显示模式来浏览网页。”那么，大家可以直接把下面的HTML源代码加入到你自己主页的源代码中去。
vari=0；
varj=0；
varn=0；
varBrowserInfo="您的浏览器是:"+navigator.appName+""+navigator.appCodeName+""+navigator.appVersion；functionMakeArray(n)
{
this.length=n；
for(varj=0；j\n；j++)
{
this［j］=0；
}
returnthis；
}
varMessages=newMakeArray(3)；
Messages［0］="您的浏览器名字:"+navigator.appName；
Messages［1］="您的浏览器代码:"+navigator.appCodeName；
Messages［2］="浏览器版本号码:"+navigator.appVersion；
Messages［3］=" 请使用600*800显示模式来浏览网页"；
functionShowInfo()
{
document.Menu.Display.value=Messages［i］；
if(iΛ2)
i=0
elsei++；
document.Menu.Display.value=Messages［i］；
BrowserInfo=Messages［i］；
setTimeout("ShowInfo()"，3000)；
}
2、给主页添加视频动画
只要把下面这段代码添加到你的网页中，就可以在主页中添加Windows视频动画或其他RralMedia格式的视频动画。
< img dynsrc=/test.avi start="fileopen" width="360" height="190" alt="test.avi (40M字节)" controls hspace="-1" vspace="0">
在这段代码中，dynsrc的值为你的动画文件的名字，它应是以avi、ra、ram为后缀名的文件；start的值一般为“fileopen”，这样就可以使动画自动播放；width和height的值分别是动画播放时的画面的宽度和高度(以像素为单位也可以百分比来表示)；alt的值是对动画文件的非显示说明；hspace是画面离页左边的距离(以像素为单位)；vspace是画面离页顶的距离(以像素为单位)，在这里大家可以把test.avi文件改成自己需要的视频文件。
3、去掉超链接的下划线
在你刚开始编网页时，还记得在超链接的下划线吗？你有没有想过要把它去掉吗？如果有这个念头，请把下列语句放在<head>...</head>之间
〈style>
〈!－－
td{font－size:12px; line－height=16px;}
body{font－size:12px; line－height=16px;}
A:link {text－decoration: none; color: ″＃0000ff″}
A:visited {text－decoration: none; color: ″＃ffffff″}
A:active {text－decoration: none}
A:hover {text－decoration: underline; color: ″＃009900″}
－－>
〈/style>
这里的〈style>、〈/style>是风格样式标签，作用是统一整个页面的风格。其中，代码td和body用来控制表格中和不在表格中的文字表现形式。font－size定义了文字大小，而line－height用于控制行距。以A开头的几句控制链接文字的风格：使其在链接、正在被点击过程和点击后都呈现不同的样式，更主要的是消除了链接文字的下划线，效果试试就知道啦。另外，在color后的颜色也可用black、blue、white限定词等来代替颜色的16进制码，例如可写成color:blue的形式。
4、在线改变网页的背景图象
平时看到的网页背景一般是静态的，浏览者是无权自己更换背景图案的，不知你有没有想过做出来的网页可以让浏览者自己改变背景图像呢？如果你有这个念头的话，下面的这段代码就能帮你轻松实现这样的功能，你所要做的就是把它们COPY然后贴在你HTML代码的合适位
置就可以了。不敢说很有用，但用得好的话绝对是锦上添花。好了，一起先来看看代码好了。
<FORM>
<SELECT onChange="document.body.style.background=this.options[this.selectedIndex].value">
<OPTION VALUE="url('背景一的地址')" SELECTED>第一种背景
<OPTION VALUE="url('背景二的地址')"> 第二种背景
<OPTION VALUE="url('背景三的地址')"> 第三种背景
.......其它选择格式如上......
</SELESTED>
</FORM>
使用这段代码时，我们可以自己先选择好或者制作好需要的背景，然后把各个背景图像的
URL替换上面代码中的背景地址，这样我们就可以轻松实现在线更改背景图案。
5、让主页中的自动换行适应不同的浏览器
有时你会见过这样的主页，一行字老长老长，让您拉着滚动条走了好远好远，这样是不是很麻烦，让人浏览起来感觉极不协调！能不能在Netscape让中文随着窗口的大小或表格的大小而自动换行，象西文那样呢？其实很简单，只要在<head>和</head>加入以下html源代码内容,您就不用再痛苦的手动换行了.
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=gb2312">
<TITLE>举例说明</TITLE>
</HEAD>
<BODY></BODY>
</HTML>
6、 自动滚屏
绝大多数主页的显示范围会超出屏幕，访问者都必须要按动水平或垂直滚动杆来跳过开始的欢迎词，下面的函数演示了自动按指定的方向、速率、范围游动的主页的制作。
varposition=0；
functionscroller()
{
if(position!=400)
{
position++；
parent.scroll(400，position)；
clearTimeout(timer)；
vartimer=setTimeout("scroller()"，0)；
timer；
}
}
看到这儿，想必大家心里一定痒痒的，那就赶快行动起来，让自己的“家园”变得更加靓丽吧！
