《html框架》PPT课件.ppt

第七章 框 架,回顾,使用HTML创建一个表格至少需要哪些标签？ 跨多行表格是在单元格里用哪个属性进行设置 ？,本节目标,框架的基本语法 框架的属性的使用 框架子窗口间的链接 浮动框架,一个框架的示例,广告栏顶部框架(top.htm),导航栏左侧框架(left.htm),详细内容页面右侧框架 (main.htm),框架的边框,框架的特征和作用,框架的特点： 框架最大的特点就是把浏览器的窗体分为多个行与列的框架页。 麦新衣女装商城/ 女装 框架的作用 框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。,框架的构成,框架由两个主要部分: 框架由框架集和框架组成，是用标签和标签来定义。 框架集的定义: 框架集是在一个文档内定义一组框架结构的HTML网页。框架集定义了一个网页显示的框架数、框架的大小、载入框架的网页等。用标签来定义窗口框架， 框架的定义: 框架是指在网页上定义的一个区域,用标签来定义窗口框架中的子窗口的内容。, ,框架的基本结构,框架页面的基本语法,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,第一个窗口要显示的网页,框架集的属性,框架属性应用示例, ,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,框架的属性（1）,框架的属性（2）,框架属性应用示例, ,框架名称,可选,要显示的网页,可选,框架边框宽度,可选,框架分割形式,根据框架集标签的分割属性分为: 1、水平分割 2、垂直分割 3、嵌套分割,水平分割框架,水平分割框架的作用 如果想要在水平方向将浏览器分割多个窗口，这需要使用到框架集的左右分割窗口属性cols。cols的默认值为一个窗口。 水平分割框架的语法： 在水平分割中我主要应用了框架集的cols属性。把浏览器从水平方向为准进行分割。分割几个窗口其cols的值就有几个，值的定义为宽度，可以是数字(单位为像素)，也可以是百分比和剩余值。各值之间用逗号分开。其中剩余值用“*“号表示，剩余值表示所有窗口设定之后的剩余部分，当“*“只出现一次时，表示该子窗口的大小将根据浏览器窗口的大小自动调整，当“*“出现一次以上时，表示按比例分割剩余的窗口空间。,水平分割框架示例,把浏览器水平分割成3块。 程序代码： 水平框架 ,水平分割框架效果,浏览器显示效果：,垂直分割框架,垂直分割框架的作用 如果想要在垂直方向将浏览器分割多个窗口，这需要使用到框架集的上下分割窗口属性rows。rows的默认值为一个窗口。 垂直分割框架的语法： 在垂直分割中我主要应用了框架集的rows属性。把浏览器从垂直方向为准进行分割。分割几个窗口其rows的值就有几个，值的定义为宽度，可以是数字(单位为像素)，也可以是百分比和剩余值。各值之间用逗号分开。其中剩余值用“*“号表示，剩余值表示所有窗口设定之后的剩余部分，当“*“只出现一次时，表示该子窗口的大小将根据浏览器窗口的大小自动调整，当“*“出现一次以上时，表示按比例分割剩余的窗口空间。,垂直分割框架示例,把浏览器垂直分割成3块。 程序代码： 垂直框架 ,垂直分割框架效果,浏览器显示效果：,嵌套分割框架,嵌套分割框架的作用 嵌套分割是对水平分割分割和垂直分割的联合应用，框架的嵌套可以是多层的。直到把浏览器分割成你想要的效果。 嵌套分割框架的语法有如下的两种形式： 或者 ,如何创建嵌套框架,要实现如下图所示的窗口，该如何制作？,1、分成上下两个窗口 2、把下面的窗口分成 左右两个窗口,top窗口,left 窗口,right窗口,如何创建嵌套框架,创建多个复杂的窗口实现步骤如下： 1、创建一个HTML页面“top.html” 2、创建一个HTML页面“left.html” 3、创建一个HTML页面“right.html”,top.html效果图,left.html效果图,right.html效果,如何创建嵌套框架,4、新建多框架HTML页面“Frame_Sets.html” 麦新衣女装商城/ 女装, ,页面的一个固定部分显示徽标或静态信息,在另一个固定部分显示导航部分详细内容,在此处显示详细内容， 页面中此部分是变化的。,如果在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？,框架间的链接,如何设置窗口链接,使用框架的目的就是在不同的框架中显示不同的页面，在标签中使用name属性定义了子窗口的名称，而在标签中采用target属性，指定所链接的网页文件显示在那一个子窗口。链接的基本语法如下： ,target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。,target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里,浮动框架,浮动框架的定义： 浮动框架是一种特殊的框架页面。浮动框架就是在浏览器窗口中嵌套子窗口，并在子窗口中显示内容。其基本语法格式如下： 浮动框架应用注意事项： 在应用浮动框架时，要注意，浮动框架标签不能像标签一样取代标签，而是处在标签之内。 浮动框架的作用和属性 Iframe的作用就是在网页中标记出一块区域，使得这块区域可以显示其他内容。iframe元素中的各种常用属性，border、frameBoder、marginHeight、marginWidth、scrolling等，与frame中的用法相同，这里不再重复。,浮动框架示例,程序代码如下： 浮动框架 ,新建浮动框架HTML页面,浮动框架示例,浏览器执行结果如下：,新建浮动框架HTML页面,如何设置浮动窗口链接,使用框架的目的就是在不同的框架中显示不同的页面，在标签中使用name属性定义了子窗口的名称，而在标签中采用target属性，指定所链接的网页文件显示在那一个子窗口。链接的基本语法如下： ,target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。,target属性指定了所链接的文件出现在名称为“rightfram