| 网站首页 | 文章中心 | 电子书下载 | 矢量图库 | 视频教程 | 素材下载 | 程序代码下载 | JS代码 | 论坛 | 
龙腾教程网  
常用软件类:
|杀毒安全 |联络聊天 |网络软件 |多媒体类 |系统工具 |图形图像 |系统工具 |应用软件 |行业软件
开发设计类:
|动画制作 |图像处理 |3D设计 |操作系统 |站长学院 |网络相关 |WEB设计 |数据库类 |程序开发
 
  您当前位置:您现在的位置: 龙腾软件教程网 >> 文章中心 >> WEB设计 >> Dreamweaver >> 基础教程 >> 文章正文>>>>>> 
Dreamweaver制作自动关闭的网页

设计页面时,经常会从一个页面打开一个子窗口以供浏览者查看。通常,这种子窗口中的内容一经浏览者看过,对于浏览者而言就不再需要,而他们常常会忘记关掉这些小窗口,致使许多的浏览器窗口打开着,耗用大量的资源。因此我们可以将子窗口设计成经过一段时间后可以自动关闭的形式。

本例中制作了两个页面,如图1所示, Index.html是显示于子窗口中的页面,而在名为firstpage.html的页面中,包含在子窗口中打开Index.html的链接。单击链接时,将在子窗口中打开index.html。可以直接单击子窗口中的“关闭”链接关闭子窗口,也可以不去理睬它,在15秒之后,子窗口也会自动关闭。


图1 浏览器的弹出页面

具体操作如下:

1. 在本地站点中生成一个Smlple文件夹。

2. 在Smlple文件夹中,生成名为Index.html以及名为firstpage.html的文件。

3. 双击Index.html,打开该文档,进入到文档的设计视图窗口中。

4. 单击菜单View/Head Content,显示文档的头部区域。

5. 单击设计视图窗口中的文档头部窗格。选择菜单Insert/Invisible Tags/Script,打开Inset Script对话框。如图2所示,在Language下拉列表框中选择JavaScript选项,并在Coctento文本框中输入“setTimeout("self.close()",15000)”。单击OK按钮,完成在文档头部插入15秒后自动关闭子窗口的脚本。在代码中,15000表示15000毫秒,也即15秒,也可以根据需要将之修改为自己需要的时间毫秒数。


图2 设置时间

6. 在文档窗口中输入“关闭”字样,在属性面板上的Link文本框中输入“###”,将其设置为一个空链接。

7. 在状态栏左端的快速标记编辑器上,单击标记按钮。选中“关闭”链接,然后按下Ctrl+T组合键,打开快速标记编辑器,进入到快速标记编辑器的编辑标记模式。然后在“>”前输入“onclick="selfclose()"”。 如图3所示,设置完毕,单击OK按钮,确认操作。这样在Index.html被作为子窗口打开后,单击该链接就可以立刻关闭该子窗口。


图3

8. 保存Index.html文件,并退出index.html的Dremweaver窗口。

9. 现在开始设计fristpage.html页面。在本地站点的Smlple文件夹中,双击 fristpage.html,打开该文档,进入到文档的设计视图窗口中。

10. 在文档中输入“单击这里打开会自动关闭的子窗口”字样。然后在属性面板上的 Link文本框中输入“###”,将之设置为空链接。

11. 可以通过为该链接应用Open Browser Window行为来设置单击链接时打开Index.html窗口,不过更方便的方法是利用快速标识编辑器。方法是首先将插入点放置到链接中,然后在状态栏左端的标识选择器上,单击标识按钮,选中整个链接。然后按下Ctrl+T组合键,打开快速标记编辑器,进入到快速标记编辑器的 编辑标识模式。再在“>”前输入“onclick="window.open( index.html ,null , width=200px,height=200px )"”(如图4所示)。设置完毕,按下回车键,确认操作。


图4 设置单击链接时打开

12.上述操作就完成了本例的设置。可以单击菜单用File/save,保存所做的工作。然后按下F12键,在浏览器中预览页面效果。


上一篇:
  • 上一篇文章:
  • 下一篇
  • 下一篇文章: 没有了
  • 收藏此文到百度搜藏 百度搜藏| 新浪VIvi| 365key| Younote| 博采中心| 你好BLOG| 亿友网摘| 和讯网摘|
    相关文章    
    Dreamweaver CS3 新功能介绍
    Dreamweaver定义模板批量制作web网页
    使用Dreamweaver CPU占100%的解决方法
    Dreamweaver+asp.net制作自己的站内搜索
    Dreamweaver制作表格细边框技巧
    Dreamweaver网站制作高级实列技巧23条
    Dreamweaver制作多样式表格
    Dreamweaver插入Java applet小程序的方法
    Dreamweaver制作网页中常用的过渡效果
    Dreamweaver MX打造自己的网站站内搜索引擎
     
     
     
    最新文章
    普通文章 Dreamweaver制作自动关闭的网页最新文章
    普通文章 DELPHI实现把WORD、EXCEL和图片等最新文章
    普通文章 ajax实现分页控件代码最新文章
    普通文章 javascript动态更改DropDownList最新文章
    普通文章 javascript 的window.open()的参最新文章
    普通文章 photoshop绘制森林中的精灵最新文章
    普通文章 photoshop设计卡通饼干字体最新文章
    普通文章 SnagIt批量捕获网络图像技巧最新文章
    普通文章 迅雷文件管理实用招数最新文章
    普通文章 基于VLAN技术的校园一卡通管理最新文章
     
    热门文章
    推荐文章 Photoshop绘制卡通动漫娃娃最新文章
    推荐文章 Photoshop绘制逼真绚丽的金鱼
     
     
    设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 

    版权所有2006-2008 龙腾教程网