
窗口框架PPT课件.ppt
30页第7章 窗口框架,7.1 窗口框架简介 7.2 窗口框架控制 7.3 定义窗口名称 7.4 浮动窗口,下一页,7.1 窗口框架简介,7.1.1 什么是窗口框架 7.1.2 窗口框架的基本结构 7.1.3 窗口框架的分割方式,7.2.1 框架设置标签frameset 7.2.2 子窗口设置标签frame,7.2 窗口框架控制,7.1.1 什么是窗口框架,窗口框架可用于将窗口画面分割成多个小窗口,且每个小窗口中,可以显示不同的网页,达到在浏览器中同时浏览不同网页的效果 当将浏览的画面分割成多个窗口后,各窗口将可以扮演不同的功能 有时候,希望把网页做成:一个窗口显示的是目录,另一个窗口显示的是所选取的项目内容,这样,目录不变,项目之间的切换就会快多了 这就是HTML中的窗口框架7.1.2 窗口框架的基本结构,窗口框架可以生成能独立变化和滚动的窗口,从而能将一个窗口分割为若干个子窗口,在每个子窗口中显示一个HTML文档例7.1】测试窗口框架文档 文件ex7-01.html的源代码 窗口框架文档 ,运行程序,框架的基本结构,主要利用标签与标签来定义 其中标签用于定义一个窗口框架,标签则用于定义窗口框架中的子窗口。
窗口框架用代替标签,是一个成对标签,有开始和结束标签,在标签内使用了另一个标签,用它来指定每一个窗口的内容窗口框架文档HTML的结构如下: ,7.1.3 窗口框架的分割方式,窗口框架的分割方式可分为两种,一种是水平分割,另一种是垂直分割至于采用哪种分割方式,则要通过标签中的rows属性(水平分割)和cols属性(垂直分割)来设置 在完成窗口画面的分割后,就要控制每个分割出来的子窗口控制子窗口的属性需要通过标签,在标签最重要的属性为子窗口的名称(name属性)与要导入的HTML文件的来源(src属性)框架设置标签标签是成对出现标签,首标签和尾标签之间的内容就是使用框架的HTML文档主体部分 在使用框架的HTML文档中不能出现标签,否则会导致web浏览器忽略所有的框架定义而只显示和之间的内容 标签的作用是将窗口分割为若干个子窗口 标签主要有rows、cols、border、bordercolor和frameborder五个属性7.2.1 框架设置标签frameset,一、水平/垂直分割窗口属性rows/cols 1格式: 2说明: rows后面的值,说明窗口横向分隔情况,cols后面的值说明纵向分隔说明。
各参数值之间用逗号分隔,依次表示各个子窗口的高度(宽度) rows和cols可以用数字、百分比或剩余值以及这三种方式的混合来表示: 数字表示子窗口高度(宽度)所占的像素点数 百分比“%”表示子窗口高度(宽度)占整个浏览器窗口高度(宽度)的百分比 剩余值“*”表示当前所有窗口设定之后的剩余部分当符号*只出现一次,即其他子窗口的大小都有明确定义时,表示该子窗口的大小将根据浏览器窗口的大小而自动调整当符号*出现一次以上时,表示按比例分割浏览器窗口的剩余空间例如, 表示将浏览器窗口分割为3列,第一个子窗口在第一列,窗口宽度为整个浏览器窗口宽度的40%;第二个子窗口在第二列,占浏览器窗口剩余空间的2/3,即其宽度为整个浏览器窗口宽度的40%;第三个子窗口占剩余空间的1/3,宽度为整个浏览器窗口宽度的20% 再如在ex7-1.html的文件中,设置cols=179,*,表示纵向有两个窗口,其中第一个宽度为179个像素点,剩余的是第二个窗口;没有rows,说明用的是默认值,即横向为一个窗口二、设置窗口架框宽度属性border 在标签中,可运用border属性控制分割窗口的框架的宽度,其语法如下所示: 其中的数值代表此窗口框架的宽度,单位为像素。
三、设置边框颜色属性bordercolor 在标签中,可运用bordercolor属性设置边框的颜色,其语法如下所示: 其中的#代表此边框的颜色,取值可为RGB代码四、设置框架隐藏属性frameborder frameborder属性用于控制窗口框架四周,是否显示框架此属性可使用在标签与标签中,使用在标签内时,可控制窗口框架的所有子窗口使用在标签时,则仅能控制该标签所代表的子窗口,其语法为: 0代表不显示框线,1代表显示框线,其默认值为17.2.2 子窗口设置标签frame,窗口框架建立起来后,应在各个子窗口内放入相应的信息子窗口的初始化是用标签来描述的 屏幕上的每一个子窗口均对应一个标签用标签中的src属性链接相应的文件,该文件内容就显示在标签对应的窗口之中Ex7-01-1.html的源代码如下: ,目录 1.春望 2.春晓 ,ex7-01-2.html的源代码如下: 欢迎欣赏唐诗 ,是个单向的标签,使用时,将它写在 的开始和结束标签之间,它主要有六个属性:src、name、marginwidth、marginheight、scrolling和noresize。
1指定子窗口显示网页属性src src属性是用于指定要导入到某个子窗口的HTML文件的位置,其语法如下所示: 如果一个标签中没有src属性,则该窗口显示为空 2定义子窗口名称属性name name属性是用来指定窗口的名称,此属性是可选的当完成定义子窗口的名称后,我们便可在超链接中,指定显示网页的子窗口其语法如下所示: ,3控制框架滚动条属性scrolling scrolling属性用于描述该窗口是否设有滚动条该属性是可选的其设置语法如下: 各设置值所代表的意义依序为显示、不显示、自动设置,默认值是auto 4子窗口大小的调整属性noresize noresize 属性是一个标志,没有取值它说明浏览者是否可以自行用鼠标调整窗口的大小如果设定了noresize属性,则窗口不能调整如果默认,则可以自行调整窗口的大小5设置边距属性marginwidth / marginheight marginwidth属性用来控制窗口内显示的内容与窗口左右边缘的距离,该属性是取一个像素值,默认为1,该属性是可选的 marginheight属性,用来控制窗口内显示的内容与上下边缘的距离,该属性是取一个像素值,默认为1,该属性是可选的。
如果窗口中的内容含有高亮度的链接,那么,当鼠标点了这个链接之后,被链接的内容放在哪个窗口呢?我们来认识一个新的属性targe ,用这个属性就可以将被链接的内容放置到你想要放的窗口内7.3 定义窗口名称,如在文件ex7-01.html中,放置文件的功能是由下面的代码片段实现的: 在文件ex7-1-1.html中,放置文件的功能是由下面的代码片段实现的: 1.春望 2.春晓 ,在ex7-1-1.html文件中,当你单击超级链接时,所链接的内容都将在右边窗口显示 用target属性定义窗口的名称,必须使用字母/数字字符,否则窗口名将被忽略但是,有几个特定的窗口名例外,这几个窗口名有特殊含义,它们是_blank、_self、_parent和_top target=_blank 当将target属性设置为_blank时,若单击超链接后,将以打开另一窗口的方式显示网页 target=_self 当将target属性设置为_self时,则将在同一窗口中显示链接的网页 target=_parent 当将target属性设置为_parent时,若单击超链接后,该链接网页将导入目前子窗口的上一层框架。
若没有上层,则导入在同一窗口中 target=_top 当将target属性设置为_top时,则将脱离目前的窗口框架,在最上层的窗口框架中,显示链接的网页在一个页面中直接引入另一个页面,这种技术称为浮动的窗口(Floating frame)在HTML中通过iframe标签实现 其语法如下所示: 其中#=初始页面的URL 属性参照课本p77,7.4 浮动窗口,【例7.2】浮动的窗口 文件ex7-2.html的源代码: 文件ex7-2-0.html的源代码: 文件ex7-2-1.html的源代码: 文件ex7-2-2.html的源代码:,结束,运行程序,上一页,创建嵌套框架p73 标签属性参照p77 使用框架进行页面布局参照p79,。
