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

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

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

时间: 2024-08-02 18:27:25

怎样用DW设计限时自动关闭网页的相关文章

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

dreamweaver|设计|网页 设计页面时,经常会从一个页面打开一个子窗口以供浏览者查看.通常,这种子窗口中的内容一经浏览者看过,对于浏览者而言就不再需要,而他们常常会忘记关掉这些小窗口,致使许多的浏览器窗口打开着,耗用大量的资源.因此我们可以将子窗口设计成经过一段时间后可以自动关闭的形式. 本例中制作了两个页面,如图1所示, Index.html是显示于子窗口中的页面,而在名为firstpage.html的页面中,包含在子窗口中打开Index.html的链接.单击链接时,将在子窗口中打开i

Photoshop结合DW设计超酷的网页相册效果教程

  本教程适用对象:有一定的PS基础,最好有网页设计制作基础,那样在PS处理好后可以在DM里面做一个后期的CSS以及布局方面的处理,当然,DM&FW也可做图片批处理并生成相册,不过我个人认为PS&DM的效果比较好. PS的批处理功能是很强大的,如果利用好可以做为我们做很多工作.今天我想讲的是"PS批处理设计制作图片展示" 开始吧 一.准备好自己要做相册的素材,产品展示啦,案例展示了,照片展示了都可以,统一将这些图片放在一个文件夹下,我这里将这个文件叫做"Res

网页设计技巧:创建网页背景材质的方法

文章描述:网页设计技巧:创建网页背景材质的方法. 在网页设计中创建背景材质通常是根据设计方向展开设计的第一步,也是确定设计基调的重要环节.虽然大多数情况下,网页背景材质是非常细微和低调的,但是由于整个背景的范围较大,所以会给人强烈的心理感受.所以这篇文章中,我会就网页背景材质创建过程中常用到的方法做一总结,希望对于大家在设计中的开头步骤能够给与帮助的参考. 一.使用现成的图案来创建网页背景材质. 1.下载现成的图案样式,或者自己动手创建图案,关于如何自己创建图案,之前我写的一篇文章<在Photo

手机网页设计原则:移动网页中的基础元素

文章描述:移动网页设计应该包含的5个基本元素. 大部分人都认为手机网页设计与电脑网页设计有很大不同,其实不是,手机网页除了小且可以触摸外,很多设计原则与电脑网页设计是共通的.这里有 5 个基本的元素,希望对设计师有所帮助. 1. 有意义的导航 在移动设备上获取信息实际上是有趣的体验,因此,令用户在使用过程中感到愉快很有必要,简单地删除屏幕上的链接(或taps)并不能达到用户友好体验的目的.导航应该包含用户需要的内容,并提供明确的路径.如果用户知道跳转的具体页面,就会进行点击. 首先,确保导航在用

如何设计黑板样式网页横幅向学生宣传

译者的话:作为一家教育机构,没有什么比利用学生与黑板的元素来设计网页横幅更适合了.黑板加上一些手写字体,便形成了一个简单但却极具吸引力的视觉焦点.本文通过一个实例来探讨设计一个黑板样式的网页横幅所涉及的各种挑战,也让我们再一次感受学校的岁月离我们又远了一年,祝大家新春快乐. Next Play咨询集团是一家主要面向公立学校进行学校课程以外的补充教育.公立学校一般的教育重点只是帮助学生如何应付各种各样的考试和测验,而Next Play则教导学生将一些理论知识应用到实际的生活中--让学生掌握求职的各

设计理论:网页版面布局的平衡性原理

几年前网页设计还被平面设计视为不入流的设计,不过随着网络使用的普及,网页设计的整体发展有了很大的提高,越来越多的设计师专做了网页设计师! 目前,网络上有关网页制作的各种教程已经相当多,可以方便地学习到最新的技术和技巧.可是,有关网页的设计,比如设计灵感的实现,风格的确定,发展策略,技术的筛选等文章却比较少.于是针对于此,我们这次分享会就请视觉设计师袁青林来为大家介绍一下网页设计的经验,主要就页面布局的平衡性方面,来和大家交流一下.如果您有好的建议和心得,也可以留言,互相交流探讨,在此先道一声谢谢

网页设计-jquery替换网页body中所有的“黑龙江”为“北京”

问题描述 jquery替换网页body中所有的"黑龙江"为"北京" jquery替换网页body中所有的"黑龙江"为"北京","黑龙江"可能是在不同的标签,不同的 中,请问如何写代码?需要完整代码,谢谢了! 解决方案 <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.j

来几个高手哥哥姐姐帮忙看下。怎么用css+div给设计好的网页加个边框啊?

问题描述 [b]怎么用给设计好的网页加个边框啊?网页设置好了,最外边忘记加框框了! 解决方案 解决方案二:该回复于2011-12-05 09:55:14被版主删除解决方案三:body{border:1pxsolidred}其他类似如div加边框div{border:1pxsolidred}解决方案四:赞同上楼解决方案五:div{border:1pxsolidred}解决方案六:网页最外面是指那部分?整个网页的框?

Illustrator设计细腻的网页纹理背景制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计细腻的网页纹理背景的制作教程. 教程分享: 一.单个像素图 首先打开AI软件,新建一个文档,文档大小任意.在视图栏目下勾选"像素预览",勾选这一选项后,当你将自己的图片缩放到足够大时,会出现像素格子,然后再勾选"对齐像素",这样图案就会自动对齐像素,无需你再自己手动控制对齐了.   在绘制像素图之前,或许你对这种微妙的背景纹理没有太大的印象,在 subtlepatterns 这个网站里,你会看到大量的