Open方法和close方法 主讲人:傅伟玉.

Slides:



Advertisements
Similar presentations
第5章 表格的设计与 制作. 内容提要 表格的创建、编辑 表格的属性设置 特效表格的制作 布局表格的基本操作 表格和布局表格的应用.
Advertisements

Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
第六章 网页设计与制作基础.
ASP.NET 網頁製作教本 -- 從基本語法學起
第3章 文字与段落 清华大学出版社.
HTML第一课 李 伟 HTML开发语言基础.
第5章 HTML 標籤介紹.
網路程式設計-期末專案 資工二B B975701 2 8 黃首翰 ~Rock your life~
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
第8讲 HTML与PHP基础 静态网页 vs. 动态网页.
第五章:JDBC与数据库 第一讲.
第7章 表 格 清华大学出版社.
第三讲 站点链接与表格布局.
教学内容 1、演示并讲解用表格布局制作的网页 2、用表格制作网页.
Web图片搜索引擎设计 ——基于文本的图片信息提取.
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
网页 设计与制作.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
学习情境三:配置WEB服务器 服务器配置与管理.
第五单元课1-3 层叠样式表.
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
第3章 JavaScript语言基础.
《网页设计与制作》 教学课件 主讲人:湖南铁道职业技术学院 陈承欢
俄语字母的发音体系 阅读规则.
Dreamweaver的工作界面.
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
第二部分 HTML语言控制 本次课的主要内容: 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
HTML 語法教學 授課:彭穎聰 老師.
第6章 网页图像处理 通过本章学习,应该掌握以下内容: 能够选择合适的网页颜色 了解网页图像的基本格式 掌握使用网页图像的要点
全球資訊網(WWW)簡介.
第六章 操作浏览器窗口.
第8章 样式表.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
CSS简介 WEB前端三剑客之二.
湖北职院计科系.
教師: 陳明瑤 電郵: 網際網路應用-網頁設計3 教師: 陳明瑤 電郵:
AJAX基础.
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
網路概念 APACHE PHP MYSQL HTML BY 董仔 08/01/14.
HTML 钟晖云 QQ:
Ch.13 HTML網頁實作.
Cookie 存取Cookie Cookie有效時間 Session 存取Session session 函數
Image对象 主讲人:傅伟玉.
8 网页制作基础知识 赵国庆 博士 北京师范大学教育技术学院
網頁製作比賽 ----技術探討
HTML & CSS.
主讲:陶建平 华中科技大学网络与计算中心
張智星 台大資工系 多媒體檢索實驗室 第六章 文件物件模型(DOM) 張智星 台大資工系 多媒體檢索實驗室.
网 站 设 计 与 建 设 Website design and developments
Cookie 存取Cookie Cookie有效時間 Session 存取Session session 函數
W3C标准网页制作 主讲教师:张 涛.
W3C标准网页制作 主讲教师:张 涛.
第2章 初识Dreamweaver CS4 Adobe Dreamweaver CS4是建立Web站点和应用程序的 专业工具。它将可视布局工具、应用程序开发功能和 代码编辑支持组合在一起,其功能强大,使得各个层 次的开发人员和设计人员都能够快速创建界面吸引人 的基于标准的网站和应用程序。从对基于CSS的设计.
2.2 Web界面设计 信息工程系 向模军 Tel: QQ:
第三章 HTML相关技术基础知识 纵观各种动态页面开发技术,无论是JSP、ASP还是PHP都无 法摆脱HTML的影子。这些动态的页面开发技术无非是在静 态HTML页面的基础上添加了动态的可以交互的内容。HTML 是所有动态页面开发技术的基础。在接下来的章节将要详 细介绍的就是HTML相关的一系列技术,包括HTML、
第13章 CSS 通过CSS可以使用更丰富、更灵活的样式,更简单地 设计出更美观的网页。同时,也让网页的设计与维护 更有效率。CSS在网页设计中的作用尤为重要,是网 页设计师必备的知识。本章首先介绍什么是CSS、CSS 的基本语法等基础知识,接着学习利用“CSS”面板 管理规则,如何在Dreamweaver中创建与应用CSS样式.
领导艺术与方法 适合对象:课长级以上人员 人力资源部 李晓红 2006/6/12
主讲:陶建平 华中科技大学网络与计算中心
網路程式設計-期末專案 資工二B B96570101 戴偉恒 地 方 美 食.
網站(web) 授課:方順展.
布局大师——表格.
HTML大探索.
ASP动态网页设计实用教程 主讲教师:贾海陶.
CHAPTER 14 視窗與超連結的各種變化.
表格 (Table).
分頁.
第2章 块级标签 经济管理学院.
教师:李金双 网页制作 教师:李金双
Presentation transcript:

Open方法和close方法 主讲人:傅伟玉

使用open( )方法 打开一个新窗口 Open()方法使用方法 最简单的使用方法 variant = window.open( URL [, name [, features]] ) 最简单的使用方法 Window.open(“outwindow.htm”) 使用open( )方法 在本章,我们主要介绍window对象是最常用的那部分:方法。首先看看open ( )方法。 使用window对象的open ( )方法可以打开一个新的浏览器窗口并在其中显示一文档。实际上在前面章节的例子中,我们已经用到了window.open ( )方法。例如在上一章的例子document.htm中,在进入主页面,点击“开新窗口”按钮后,就创建了一个新Web窗口。它就是使用window对象的open ( )方法创建的。当然它也仅仅使用了open ( )方法的最简单形式。上图为open ( )方法的使用格式。 此方法返回一个window对象的变量,其代表新的窗口,如果有URL,则是想要打开的文档的URL,name是该窗口的名字,feature是一个字符串,其中可有一到多个选项,如确定窗口类型、定义工具按钮、菜单、是否显示状态栏、窗口尺寸是否固定等等。最简单形式即仅仅将想在新浏览器窗口中打开的那个文档的URL作为参数传给open ( ) 。

使用open方法的简单例子 打开主页时弹出的子窗口 主窗口 使用open方法的简单例子 我们在打开某些网站的主页时,常常会连带打开一个小窗口,而小窗口没有通常窗口有的菜单,工具条,以及web地址输入框,并且大小固定,而其内部则会有一些提示语言,或某些热门链接,那么它们是怎么实现的呢?来看下面的例子:打开一个窗口时,自动弹出一个小窗口。下面是这个例子的整个源代码:open.htm <HTML> <TITLE>New window example</TITLE> <BODY onload="OpenWindow( )"> <FORM> <CENTER> <BR> <H1>打开主窗口的同时开新窗口</H1> </CENTER> </FORM> </BODY>

使用open方法的简单例子 <BODY> 中定义onload事件 <BODY onload="OpenWindow()"> 事件处理器 window.open("new.htm", null, "height=200,width=400, status=yes,toolbar=no, menubar=no,location=no") 使用open方法的简单例子(续) 在这个例子中,由于有<BODY onload=“Openwindow ( )”>的设置,所以打开主页面时便去执行函数Openwindow ( ) ,其内部包含关键语句window.open ( ) ,因而打开了新窗口(如前面图中所示),现在来解析window.open(“new.htm”,null,“height=200,width=400,status=yes, toolbar=no, menubar=no,location=no”)内部的参数: 第一项是要打开文档的URL,第二项是给打开新窗口起的名字(为了便于控制),后面跟的是其它选项,窗口高度为200,宽度为400,有状态栏,无工具条,无菜单,无URL地址输入框。

使用open( )方法和close( )方法的例子 定义事件 <a onmouseout=“myFloater.close()” onmouseover=“MakeAnotherWindow( )”>开启一个视窗(、</a> 事件处理器:函数MakeAnotherWindow( ) function MakeAnotherWindow( ){ myFloater=window.open(" new2.htm ","myWindow", "width=220,height=200”); } 使用open( )方法和close( )方法的例子 本例进一步强化了对open( )方法和close( )方法的使用。下面是这个例子的HTML源码 popwindow.htm: <html> <head> <title>popwindow</title> <body bgcolor="#FFFFCC" link="#999900" vlink="#CC9966" alink="#990066"> <p align="center"><br> <font color="red" size="+2"><b>利用Javascript写一个简单的说明视窗!!</b></font> </p> <div align="center"><center> <table bgColor="#dbffdb" border="0" cellPadding="10" width="450"> <tbody> <tr>

使用open( )方法和close( )方法的例子 弹出提示窗口 使用open( )方法和close( )方法的例子(续) 在本例的初始页面中,当鼠标移入图中的超级链接时,会弹出一个提示窗口,当鼠标离开超级链接,则新弹出的窗口会自动关闭,页面恢复初始页面的样子。这种操作往往希望给用户一些提示信息,但又不愿占据太多的主页面空间。 请注意本例中close( )方法的使用,它引用前面定义窗口时的返回值,确定了要关闭的窗口,如果用 window.close( )就会关闭当前窗口,而不是希望关闭的窗口。 初始页面