首 页 | 科技新闻 | 科学探索 | 技术学院 | 网络管理 | 企业专题 | 趋势报道 | 生命科学 | 创新企业
您现在的位置: 火爆网 > 科技 > 技术学院 > 网页设计 > 文章正文
用Dreamweaver做限时自动关闭的网页
做限时自动关闭的网页
2008-3-14  来源:网友提供  作者:网友提供
设计页面时,经常会从一个页面打开一个子窗口以供浏览者查看。通常,这种子窗口中的内容一经浏览者看过,对于浏览者而言就不再需要,而他们常常会忘记关掉这些小窗口,致使许多的浏览器窗口打开着,耗用大量的资源。因此我们可以将子窗口设计成经过一段时间后可以自动关闭的形式。

  本例中制作了两个页面,如图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键,在浏览器中预览页面效果。


火爆网编辑:lijiajerry 查看和发表评论
>> 与《用Dreamweaver做限时自动关闭的网页》相关的文章
Dreamweaver制作细边线表格
Dreamweaver 应用表格排序
个人主页之非一般感觉
在自制主页中实现搜索功能
网页设计基础知识
Dreamweaver网页制作技巧:使用模板
我也说两句    
  • 严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
  • 用户需对自己在使用火爆网服务过程中的行为承担法律责任。
  • 本站管理员有权保留或删除评论内容。
  • 评论内容只代表网友个人观点,与本网站立场无关。
  • 姓 名: * 评 分: 1分 2分 3分 4分 5分
    内 容:
     
    网页设计基础知识
    网页设计基础知识
    阅读排行
    ·Fireworks 9亲密接触·Fireworks 9亲密接触
    ·Fireworks 9 亲密接·在网站内加入RSS功能
    ·有关HTML代码的另类·Dreamweaver网页制作
    ·设计干净的链接·ASP.NET 程序中常用
    ·Java连接各种数据库·rss订阅原理
    热点排行
    ·Java连接各种数据库·rss订阅原理
    ·在网站内加入RSS功能·ASP.NET 程序中常用
    ·Dreamweaver网页制作·Fireworks 9亲密接触
    ·Fireworks 9亲密接触·Fireworks 9 亲密接
    ·设计干净的链接·有关HTML代码的另类
    体育推荐
    ·麦蒂28分火箭苦战过·国安3-1逆转越南弱旅
    ·火箭取篮网收割19连·费德勒海宁前景相似
    ·火箭登上西部第三·60米栏刘翔摘金
    ·火箭轻取17连胜·王楠横扫朝鲜头牌
    ·切尔西3-0完胜晋级8·弗格森进八强却称失
    娱乐推荐
    ·张柏芝闭关45天 身材激·《国家宝藏2》下周进军
    ·张韶涵被建议动手术·巩俐周迅芝华士大拼性
    ·9+2音乐先锋榜揭晓·李准基粉丝录制生日VC
    ·《婚礼2008》让你笑“·港媒夸何洁唱功超越蔡
    ·何洁武汉跨江签新片 万·林志玲自曝内心小秘密