打造美丽新“视”界—无边窗口制作详解

　　喜欢网页制作的朋友总是希望自己的作品完美无缺。然而IE浏览器窗口总灰头土脸，千篇一律。简单的网页还能胜任，如果碰到艺术性较强的网页，IE窗口的地址栏以及各种按扭多多少少会影响网页的整体效果。如何才能使网页的艺术效果与浏览器的窗口很好的结合起来，使之更加完美？今天我就给大家介绍一种非常流行的网页效果。

　　在下面在制作过程当中，我们要用到两个HTML页面，一个是首页面index.htm，点击该页面中的一个超级链接，便可以打开我们想要的无边窗口。另一个是内容页面index2.htm，该页面便是无边窗口的内容页面。另外我们还要在以上两的文件的根目录下建两个文件夹，其中一个文件夹用来保存实现网页效果用到的javascript文件，把该文件夹命名为js。另外一个用来放置网页效果所需的图片，命名为images。前面所提到的javascript文件和网页效果图片的制作过程因为篇幅有限，具体制作过程在这里就不在详述，大家可以到电脑爱好者网站或者www.htmlcn.com去下载。考虑到现在大多数网友都喜欢用Dreamweaver来制作页面，那我们就选择它的4.0版本来作为此次制作的编辑工具。所有准备工作已经就绪，下面开始制作。

一：制作原理
　　该窗口实际上应用了IE5.5中windows对象中一个新属性Fullscreen，它是将打开的窗口先设置为Full screen（满屏显示），然后在用windows对象中的resizTo方法缩小窗口而形成的如图一的那种无边框窗口，所以该窗口只支持IE5.5以上的版本的浏览器。

二：开始制作
1：制作内容页面index2.htm
　　打开Dreamweaver4.0，按下Ctrl+N键新键一个页面。 在页面中输入所需要的内容，这里我们只是简单的输入“美丽新视界”几个字，当然你可以把该页制作的足够复杂。编辑完成后，保存。然后使用文本编辑工具以Html代码的格式打开刚刚编辑好的那个文件，找到代码的第七行，这一行定义的是BODY元素的样式规则，将BODY的样式规则改成如下内容：
body {
font-family: "宋体";
font-size:9pt
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #99ccff;
scrollbar-base-color: #6666FF;
scrollbar-face-color: #6666FF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #6666FF;
scrollbar-shadow-color:#6666FF}
　　然后保存，上面的CSS代码控制的是内容窗口滚动条的样式，把滚动条的样式改成如上规则为的是防止页面内容太多出现滚动条而导致与无边窗口的颜色不匹配，因为默认滚动条的颜色是windows的默认色，我们的目的就是要将IE窗口的颜色打造成我们需要的颜色，所以滚动条也不例外。
2：制作首页内容index.htm
　　首先新用Dreamweaver新建一个页面，输入所需要的内容，这里我们输入“超酷无边窗口”几个字，然后保存 ．
到电脑爱好者网站或者www.htmlcn.com下载上文提到的javascript文件和效果图片。
将下载到的chromeless_30.js文件复制到已经建好的js文件夹。
接着再把无边窗口所需要的效果图片也复制到images文件夹下。
然后把刚刚编辑好的首页面用Dreamweaver打开，按下Ctrl+Shift+W键打开Head部分窗口，点击这个窗口使窗口的背景变为白色。然后点击对象面板右上角的小三角，在弹出的菜单中选择invislbles选项，切换到invislblesinvislbles对象面板。

点击invislbles对象面板中的insert Script（插入脚本）按扭，在insert script对话框中直接点击Ok按扭。点选Head窗口中的最后一个教本图标。

点击属性面板Source文本框后面的浏览文件夹图标。

在Select script file对话框中选择js文件夹下的chromeless_30.js。
再次点击对象面板中的insert Script（插入脚本）按扭，打开insert Script对话框。将以下函数的所有代码复制到insert Script对话框的Content文本框中。然后点击Ok按扭。

函数如下：
function openIT(theURL,W,H,X,Y, wname) {
CLOSEdwn = "images/close_dwn.gif?http://www.xvna.com"
CLOSEup = "images/close_up.gif?http://www.xvna.com"
CLOSEovr = "images/close_ovr.gif?http://www.xvna.com"
MINIdwn = "images/mini_dwn.gif?http://www.xvna.com"
MINIup = "images/mini_up.gif?http://www.xvna.com"
MINIovr = "images/mini_ovr.gif?http://www.xvna.com"
NONEgrf = "images/none.gif?http://www.xvna.com"
CLOCKgrf = "images/clock.gif?http://www.xvna.com"
titHTML = "<font color='#FFFFFF' style='font-size:12px'> :: 美丽新视界 ::.</font>"
titWIN = " :: 美丽新视界 ::.
winBORDERCOLOR = "#000000"
winBORDERCOLORsel = "#CCCCCC"
winBGCOLOR = "#6666FF"
winBGCOLORsel = "#ADC8E5"
return openchromeless(theURL, wname, W, H, X, Y, NONEgrf, CLOSEdwn, CLOSEup, CLOSEovr, MINIdwn, MINIup, MINIovr, CLOCKgrf, titHTML, titWIN, winBORDERCOLOR, winBORDERCOLORsel, winBGCOLOR, winBGCOLORsel)
}
　　在该函数中，共有十四个变量，CLOCKgrf以上所有的变量均是定义无边窗口效果图片的路径，变量titHTML 和titWIN定义的是窗口的标题；变量winBORDERCOLOR和变量winBORDERCOLORsel分别定义的是窗口边框的颜色以及按下鼠标时遍框的颜色；变量winBGCOLOR和winBGCOLORsel分别定义的是标题部分的颜色以及按下鼠标时标题部分的颜色。另外函数一共拥有六个参数，它们分别是theURL，W，H，X，Y， wname。其中theURL表示的是要打开的目标文档的路径；w代表打开窗口的宽度；h代表的是打开窗口的高度；x表示窗口左上角在屏幕中的横坐标；y表示窗口左上角在屏幕中的纵坐标；参数wname表示该窗口的名称。
最后将该首页的内容“超酷无边窗口”几个字中的无边窗口四字做上链接，在属性面板中将Link（链接）文本框中的值改为“#;”，然后保存。

　　编辑器打开该首页，找到<a href="#;"在后面加上onclick="mywin=openIT('index3.htm',400,400,null,null,'mywin')" 然后保存，注意openIt后面括号内容的第一项是内容页面相对于首页面的路径。
在浏览器中打开index.htm，点击“无边窗口”，查看效果。

　　由于本人能力有限，上面的制作过程难免有不足之处。其实无边窗口的制作方法有好多种，最简单的一种便是利用Dreamweaver的插件来实现。我写此文章的目的是让大家真真切切的明白无边窗口的制作原理，这样对于刚刚接触javascript的网友是有很大的帮助的，让大家制作完成后有一种真正的成就感。该窗口的具体效果大家可以到www.htmlcn.com去感受一下，有什么好的意见可以写信[email protected]与我联系，今天就到这里吧。