(精品)html05框架.ppt

框架框架本章任务本章任务制作制作“客户中心客户中心”页面页面2会使用框架结构实现多窗口展示页面会使用框架结构实现多窗口展示页面本章目标本章目标3框架框架广告栏顶部框架广告栏顶部框架(top.htm)导航栏左导航栏左侧框架侧框架(left.htm)详细内容页详细内容页面右侧框架面右侧框架(main.htm)框架的框架的边框边框框架集页面框架集页面(FrameSet.htm)4框架使用场合框架使用场合页面的一个固定部分页面的一个固定部分显示徽标或静态信息显示徽标或静态信息在另一个在另一个固定部分固定部分显示导航显示导航部分详细部分详细内容内容在此处显示详细内容，在此处显示详细内容，页面中此部分页面中此部分是变化的是变化的。5 框架的基本结构框架的基本结构框架页面的基本语法框架页面的基本语法边框尺边框尺寸大小寸大小将窗口分割成左中将窗口分割成左中右右3个部分个部分,可选可选将窗口分割成上将窗口分割成上下下2个部分个部分,可选可选第一个窗口要第一个窗口要显示的网页显示的网页6框架的基本结构框架的基本结构rows_cols框架框架 将窗口分割成将窗口分割成上中下上中下3部分部分窗口边框窗口边框的宽度的宽度如果要在浏览器中创建左中如果要在浏览器中创建左中右三个窗口右三个窗口,该如何实现？该如何实现？查看源代码查看源代码每个窗口对应一个页面，以及一个框架集每个窗口对应一个页面，以及一个框架集页面，总共需要几个页面，总共需要几个HTML页面文件？页面文件？7如何创建多个复杂的窗口如何创建多个复杂的窗口 要实现如下图所示的窗口，该如何制作？要实现如下图所示的窗口，该如何制作？1、分成上下两个窗口、分成上下两个窗口2、把下面的窗口分成、把下面的窗口分成 左右两个窗口左右两个窗口top窗口窗口left窗口窗口right窗口窗口8如何创建多个复杂的窗口如何创建多个复杂的窗口 创建多个复杂的窗口实现步骤如下：创建多个复杂的窗口实现步骤如下：1、创建一个、创建一个HTML页面页面“top.html”2、创建一个、创建一个HTML页面页面“left.html”3、创建一个、创建一个HTML页面页面“right.html”top.html效果图效果图left.html效果图效果图right.html效果效果9如何创建多个复杂的窗口如何创建多个复杂的窗口4、新建、新建多框架多框架HTML页面页面“Frame_Sets.html”.查看源代码查看源代码设置无框设置无框架边框架边框不显示不显示滚动条滚动条禁止调整禁止调整框架大小框架大小框架名称，便于超框架名称，便于超文本链接锚标签文本链接锚标签target属性所引用属性所引用10如何设置窗口链接的显示位置如何设置窗口链接的显示位置 如如果果在在同同一一个个页页面面中中，要要实实现现在在一一个个框框架架窗窗口口中中的的超链接页面出现在另一个框架窗口中，如何实现？超链接页面出现在另一个框架窗口中，如何实现？演示示例演示示例2 2：不同框架之间超链接效果不同框架之间超链接效果使用使用target目标窗口属性目标窗口属性11如何设置窗口链接的显示位置如何设置窗口链接的显示位置target目标窗口属性目标窗口属性name“显示的窗口名显示的窗口名”target属性指定了所链接属性指定了所链接的文件出现在名称为的文件出现在名称为“窗口名窗口名”的框架窗口里。的框架窗口里。target属性指定了所链接的属性指定了所链接的文件出现在名称为文件出现在名称为“rightframe”的框架窗口的框架窗口里里演示示例演示示例3：使用使用target=“窗口名窗口名”查看源代码查看源代码12如何设置窗口链接的显示位置如何设置窗口链接的显示位置target目标窗口属性目标窗口属性四个特殊的窗口四个特殊的窗口 显示在新窗口显示在新窗口 显示在本窗口显示在本窗口 显示在父窗口显示在父窗口 显示在整个浏览器窗口显示在整个浏览器窗口 新启一个窗口打开文新启一个窗口打开文件件“right.html”演示示例演示示例4 4：使用四个特殊的窗口使用四个特殊的窗口13小结小结2 2top.htmlleft.htmlright1.html或或right2.htmlframe_sets.html练习答案练习答案练习代码练习代码编写如下图所示效果对应的编写如下图所示效果对应的html代码代码14总结总结创建一个框架页面至少需要哪两个标签？创建一个框架页面至少需要哪两个标签？targettarget设定目标资源所要显示的窗口，其取值可以设定目标资源所要显示的窗口，其取值可以为哪些？为哪些？简述创建一个多框架页面所需的主要步骤。简述创建一个多框架页面所需的主要步骤。15