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

详解

喜欢网页制作的朋友总是希望自己的作品完美无缺。然而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)
}
在该函数中,共有十四个变量,CLOCKgrf以上所有的变量均是定义无边窗口效果图片的路径,变量titHTML 和titWIN定义的是窗口的标题;变量winBORDERCOLOR和变量winBORDERCOLORsel分别定义的是窗口边框的颜色以及按下鼠标时遍框的颜色;变量winBGCOLOR和winBGCOLORsel分别定义的是标题部分的颜色以及按下鼠标时标题部分的颜色。另外函数一共拥有六个参数,它们分别是theURL,W,H,X,Y, wname。其中theURL表示的是要打开的目标文档的路径;w代表打开窗口的宽度;h代表的是打开窗口的高度;x表示窗口左上角在屏幕中的横坐标;y表示窗口左上角在屏幕中的纵坐标;参数wname表示该窗口的名称。
最后将该首页的内容“超酷无边窗口”几个字中的无边窗口四字做上链接,在属性面板中将Link(链接)文本框中的值改为“#;”,然后保存。

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

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

时间: 2024-11-18 13:00:48

打造美丽新“视”界—无边窗口制作详解的相关文章

云学习的新“视”界

12月12日举办的云基地2011云世界大会不但展示了http://www.aliyun.com/zixun/aggregation/13422.html">云计算技术在创新突破阶段的成果,同时还带来了云计算在各领域的创新应用,让人们真实地体验云计算带来的方便与效率,其中值得一提的是云计算对教育培训领域的深远意义. 在过去很长一段时间,教育培训的方式更多依赖面对面的讲授,即使是近年风行的电子化在线学习方式在传播范围和内容方面仍受限制,这种情况在很多欠发达地区尤为明显,而云计算的发展和创新有望

C/S考试系统程序制作详解

大型作业答辩:C/S考试系统程序制作详解 一.服务器程序 采用了WinSocket32的完成端口模型(I/O completion ports) WIN32多线程技术 ODBC APIS 进行数据库操作 二.客户端程序 用Win32 API函数构造主窗体和界面元素,如图一所示: 图一 程序组织结构 服务器程序详解 一.完全端口模型(I/O completion ports)是迄今为止最为复杂的一种I/O模型,假如一个程序需要管理为数众多的套接字,那么采用这种模型往往可以达到最佳的系统性能,不幸的

五种形式的网页弹出窗口代码详解

弹出窗口|网页|详解 1.弹启一个全屏窗口 <html> <body http://www.webjx.com','example01','fullscreen'/">http://www.webjx.com','example01','fullscreen');"> <b>www.webjx.com</b> </body> </html> 运行代码复制代码另存代码 --您可以运行代码察看特效,您也可以复制或

WPS演示倒计时制作详解之滚动条

倒计时制作详解(一)滚动条 倒计时在教学和演示中应用比较广范,制作方法各有特点,我将利用图文教程的方式,详细展示常见倒计时的几种做法,这是其中做法之一. 打开wps视频模板,在第一页第一个文本框中修改题目"倒计时",在第二个文本框中题目修改为"制作人:北方",字体微软雅黑,字号等项默认. 图- 1 在幻灯片任务窗格中,单击第一页后面,出现一条横向闪动的细线,通过按键盘上的回车键,新建一张幻灯片.在其中第一个文本框中修改题目"倒计时一",设置对齐方

教程/dreamweaver/提高 表格妙用-线框制作详解(2)

dreamweaver|教程|详解 将Width的显示状态从"Percent"更改为代表实际大小的"Pixels",这样避免在窗口放缩时引起的错乱,OK,同时在网页编辑窗口中用鼠标选定表格,属性板如下: 这是默认状态下的表格属性设置,将其中的"Border","CellPad","CellSpace"值全部设定为0. 鼠标在表格内部空点,这时属性板已经自动切换到单元格的属性设置窗口,将单元格的"B

DreamWeaver表格妙用-线框制作详解(2)

dreamweaver|详解 将Width的显示状态从"Percent"更改为代表实际大小的"Pixels",这样避免在窗口放缩时引起的错乱,OK,同时在网页编辑窗口中用鼠标选定表格,属性板如下: 这是默认状态下的表格属性设置,将其中的"Border","CellPad","CellSpace"值全部设定为0. 鼠标在表格内部空点,这时属性板已经自动切换到单元格的属性设置窗口,将单元格的"Bg&q

FW动画类型及制作详解

详解 写在前面的话: 我一直认为FW比之PS强大的地方主要体现在两点上,一是向量图形编辑模式与位图编辑模式的完美整合,二就是纯图形处理功能与GIF动画制作功能的整合.至于说在软件的使用简便性上的对比,我现在到觉得无益探讨,盖因对于某一软件使用操作的得心应手完全取决于使用者的喜好.续论上述两个优势.图形模式混合处理这一功能,ADOBE在PS6中以经引入,我们抛之不谈.就动画处理图形处理的整合上来说,PS比之FW仍有相当距离. (注:以上是作者的观点,并不代表pcedu.com.cn的立场) 现在就

Fireworks动画类型及制作详解

详解 我一直认为FW比之PS强大的地方主要体现在两点上,一是向量图形编辑模式与位图编辑模式的完美整合, 二就是纯图形处理功能与GIF动画制作功能的整合.至于说在软件的使用简便性上的对比,我现在到觉得无益 探讨,盖因对于某一软件使用操作的得心应手完全取决于使用者的喜好.续论上述两个优势.图形模式混合处 理这一功能,ADOBE在PS6中以经引入,我们抛之不谈.就动画处理图形处理的整合上来说,PS比之FW仍有相 当距离.现在就让我们共同走进FW中来仔细了解一下FW在动画处理上的强大功能及其灵活简便,并

教程/dreamweaver/提高 表格妙用-线框制作详解(5)

dreamweaver|教程|详解 隔距边框的制作 "隔距边框"在网页中主要用来排列各个栏目或频道的项目列表用的,为了方便大家理解,笔者先把制作完成以后的效果图给大家展示下,如下: 下面是相应的制作过程,(以制作三框隔距为例说明) 首先在网页中插入一个1行3列的表格对象,在插入过程中直接把"Border"设定为0,"CellSpace"设定为2,"CellPad"设定为1,如图 注意:在这里进行设置,同属性板中是完全等效的.