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

Fire天枰座

Fire天枰座

2016-02-19 21:19

下面图老师小编跟大家分享一个简单易学的用Dreamweaver设计限时自动关闭的网页教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

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

  本例中制作了两个页面,如图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被作为子窗口打开后,单击该链接就可以立刻关闭该子窗口。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

图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 设置单击链接时打开

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

展开更多 50%)
分享

猜你喜欢

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

Web开发
用Dreamweaver设计限时自动关闭的网页

用Dreamweaver设计限时自动关闭网页

Web开发
用Dreamweaver设计限时自动关闭网页

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用Dreamweaver设计自动关闭的网页

Web开发
用Dreamweaver设计自动关闭的网页

Dreamweaver设计自动关闭的网页

Web开发
Dreamweaver设计自动关闭的网页

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

DW设计限时自动关闭网页(1)

Web开发
DW设计限时自动关闭网页(1)

用Dreamweaver为网页设计框架集

Web开发
用Dreamweaver为网页设计框架集

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Dreamweaver CS4 Beta版初步试用感受

Dreamweaver CS4 Beta版初步试用感受

DW网页设计:多彩文字链接

DW网页设计:多彩文字链接
下拉加载更多内容 ↓