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

　　喜欢网页制作的朋友总是希望自己的作品完美无缺。然而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"

　　CLOSEup = "images/close_up.gif"

　　CLOSEovr = "images/close_ovr.gif"

　　MINIdwn = "images/mini_dwn.gif"

　　MINIup = "images/mini_up.gif"

　　MINIovr = "images/mini_ovr.gif"

　　NONEgrf = "images/none.gif"

　　CLOCKgrf = "images/clock.gif"

　　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)

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有