用DW设计限时自动关闭的网页

7次阅读

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

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

具体操作如下:

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 秒,也可以根据需要将之修改为自己需要的时间毫秒数。

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

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

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)"”示 )。设置完毕,按下回车键,确认操作。

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

正文完