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