第6章 框架PPT讲稿.ppt

第第第第6 6 6 6章章章章 框架框架框架框架第1页，共41页，编辑于2022年，星期一本章要点框架结构框架结构框架结构框架结构页面属性页面属性页面属性页面属性超链接超链接超链接超链接第2页，共41页，编辑于2022年，星期一 6.1 6.1 6.1 6.1 建立框架建立框架建立框架建立框架 框架在网页设计中，可以将一个浏览器窗口分框架在网页设计中，可以将一个浏览器窗口分成多个独立的小窗口，而且在每个小窗口中，可以成多个独立的小窗口，而且在每个小窗口中，可以分别显示不同的网页，达到在浏览器中同时浏览不分别显示不同的网页，达到在浏览器中同时浏览不同网页的效果。同网页的效果。使用框架可以非常方便地完成导航工作，而且各个框使用框架可以非常方便地完成导航工作，而且各个框使用框架可以非常方便地完成导航工作，而且各个框使用框架可以非常方便地完成导航工作，而且各个框架之间不存在干扰问题，所以框架技术一直被普遍应用于架之间不存在干扰问题，所以框架技术一直被普遍应用于架之间不存在干扰问题，所以框架技术一直被普遍应用于架之间不存在干扰问题，所以框架技术一直被普遍应用于页面导航。页面导航。页面导航。页面导航。第3页，共41页，编辑于2022年，星期一 1 1、框架结构、框架结构 框架的基本结构主要包括两部分：框架的基本结构主要包括两部分：框架的基本结构主要包括两部分：框架的基本结构主要包括两部分：框架集框架集 框架框架 它主要是利用它主要是利用它主要是利用它主要是利用标签和标签和标标签来定义的。签来定义的。第4页，共41页，编辑于2022年，星期一 框架集是在一个文档内定义一组框架结构的框架集是在一个文档内定义一组框架结构的框架集是在一个文档内定义一组框架结构的框架集是在一个文档内定义一组框架结构的HTMLHTMLHTMLHTML网页，它定义了网页显示的框架数、框架的大小、载网页，它定义了网页显示的框架数、框架的大小、载网页，它定义了网页显示的框架数、框架的大小、载网页，它定义了网页显示的框架数、框架的大小、载入框架的网页源和其他可以定义的属性，用入框架的网页源和其他可以定义的属性，用入框架的网页源和其他可以定义的属性，用入框架的网页源和其他可以定义的属性，用标签标签标签标签来定义一个窗口框架。来定义一个窗口框架。来定义一个窗口框架。来定义一个窗口框架。第5页，共41页，编辑于2022年，星期一 框架是指在网页上定义的一个显示区域，用框架是指在网页上定义的一个显示区域，用标签标签来定义窗口框架中的子窗口的内容。来定义窗口框架中的子窗口的内容。在使用了框架集的页面中，页面的在使用了框架集的页面中，页面的标标标标记被记被记被记被标记所取代，再通过标记所取代，再通过标记所取代，再通过标记所取代，再通过标记标记标记标记定义每一个框架。定义每一个框架。定义每一个框架。定义每一个框架。第6页，共41页，编辑于2022年，星期一2 2、框架的基本结构、框架的基本结构frameset cols(rows)=frameset cols(rows)=frameset cols(rows)=frame src=frame src=frame src=/第7页，共41页，编辑于2022年，星期一3 3 3 3、框架分割方式、框架分割方式、框架分割方式、框架分割方式左右分割窗口左右分割窗口 采用采用采用采用colscolscolscols属性，在垂直方向上分割窗口。属性，在垂直方向上分割窗口。属性，在垂直方向上分割窗口。属性，在垂直方向上分割窗口。结构如下：结构如下：frameset cols=frame src=/frame src=/.第8页，共41页，编辑于2022年，星期一左右分割框架实例第9页，共41页，编辑于2022年，星期一程序代码程序代码左右分割窗口左右分割窗口左右分割窗口左右分割窗口第10页，共41页，编辑于2022年，星期一上下分割窗口上下分割窗口 采用采用采用采用rowsrowsrowsrows属性，在水平方向上分割窗口。属性，在水平方向上分割窗口。属性，在水平方向上分割窗口。属性，在水平方向上分割窗口。结构如下：结构如下：frameset rows=frameset rows=frameset rows=frame src=frame src=frame src=/frame src=/.第11页，共41页，编辑于2022年，星期一上下分割框架实例第12页，共41页，编辑于2022年，星期一程序代码程序代码上下分割窗口上下分割窗口上下分割窗口上下分割窗口第13页，共41页，编辑于2022年，星期一嵌套分割窗口嵌套分割窗口嵌套分割窗口嵌套分割窗口 一个浏览器窗口可以既左右分割，又上下分割，一个浏览器窗口可以既左右分割，又上下分割，一个浏览器窗口可以既左右分割，又上下分割，一个浏览器窗口可以既左右分割，又上下分割，这种窗口就是嵌套分割窗口。这种窗口就是嵌套分割窗口。这种窗口就是嵌套分割窗口。这种窗口就是嵌套分割窗口。frameset cols=frame src=/frameset rows=frame src=/frame src=/第14页，共41页，编辑于2022年，星期一上下分割框架实例第15页，共41页，编辑于2022年，星期一程序代码程序代码嵌套分割窗口嵌套分割窗口嵌套分割窗口嵌套分割窗口第16页，共41页，编辑于2022年，星期一6.2 6.2 6.2 6.2 窗口框架设置窗口框架设置窗口框架设置窗口框架设置1 1、框架集属性、框架集属性水平水平/垂直分割窗口属性垂直分割窗口属性rows/colsrows/cols语法：语法：语法：语法：frameset rows=参数值可以用数字，百分比和剩余值及这参数值可以用数字，百分比和剩余值及这参数值可以用数字，百分比和剩余值及这参数值可以用数字，百分比和剩余值及这3 3 3 3种方式的混种方式的混种方式的混种方式的混合方式来表示。合方式来表示。合方式来表示。合方式来表示。第17页，共41页，编辑于2022年，星期一设置窗口框架宽度属性设置窗口框架宽度属性borderborder 属性属性border,border,用于设定分割窗口的框架宽度。用于设定分割窗口的框架宽度。语法：语法：语法：语法：frameset 设置边框颜色属性设置边框颜色属性bordercolorbordercolor 属性属性bordercolor,bordercolor,用于设定框架边框的颜色。用于设定框架边框的颜色。语法：语法：frameset frameset frameset 第18页，共41页，编辑于2022年，星期一设置框架隐藏属性设置框架隐藏属性设置框架隐藏属性设置框架隐藏属性frameborderframeborderframeborderframeborder 该属性用于设定是否显示框架。该属性用于设定是否显示框架。标签：控制窗口框架的所有子窗口标签：控制窗口框架的所有子窗口标签：控制窗口框架的所有子窗口标签：控制窗口框架的所有子窗口标签：控制该标签所代表的子窗口标签：控制该标签所代表的子窗口标签：控制该标签所代表的子窗口标签：控制该标签所代表的子窗口语法：语法：frameset frameborder=frameset frameborder=frameset frameborder=valuevalue取值取值0(0(不显示边框不显示边框)或或1(1(显示边框显示边框)第19页，共41页，编辑于2022年，星期一框架集属性网页实例第20页，共41页，编辑于2022年，星期一程序代码程序代码框架集边框宽度、边框颜色和边框显示属性框架集边框宽度、边框颜色和边框显示属性框架集边框宽度、边框颜色和边框显示属性框架集边框宽度、边框颜色和边框显示属性frameset cols=*,*,*border=第21页，共41页，编辑于2022年，星期一2 2、框架窗口属性、框架窗口属性(1)src(1)src(1)src(1)src属性属性属性属性 用于设定框架显示的文件路径用于设定框架显示的文件路径 语法：语法：语法：语法：frame src=frame src=frame src=(2)name(2)name(2)name(2)name属性属性属性属性 用于设定框架窗口的名称用于设定框架窗口的名称 语法：语法：frame name=框架名必须以字母开头，必须是单个单词；区框架名必须以字母开头，必须是单个单词；区分大小写；允许使用下划线，不允许使用空格、句分大小写；允许使用下划线，不允许使用空格、句点和连字符。点和连字符。第22页，共41页，编辑于2022年，星期一(3)scrolling(3)scrolling属性属性 用于设定该窗口是否显示滚动条。用于设定该窗口是否显示滚动条。语法：语法：语法：语法：frame scrolling=value value值有值有3 3个：个：yesyes、nono和和autoauto（默认）（默认）(4)noresize(4)noresize属性属性 用于设定用户能否自行调整框架窗口的大小。用于设定用户能否自行调整框架窗口的大小。语法：语法：frame noresize=第23页，共41页，编辑于2022年，星期一(5)marginwidth(5)marginwidth属性属性 用于设定框架中的内容与框架边缘的左右距离用于设定框架中的内容与框架边缘的左右距离 语法：语法：frame marginwidth=frame marginwidth=frame marginwidth=(6)marginheight(6)marginheight属性属性 用于设定框架中的内容与框架边缘的上下距离用于设定框架中的内容与框架边缘的上下距离用于设定框架中的内容与框架边缘的上下距离用于设定框架中的内容与框架边缘的上下距离 语法：语法：frame marginheight=frame marginheight=frame marginheight=第24页，共41页，编辑于2022年，星期一框架窗口属性实例第25页，共41页，编辑于2022年，星期一程序代码程序代码框架窗口属性框架窗口属性框架窗口属性框架窗口属性frame scrolling=frame scrolling=frame scrolling=frameset rows=50%,50%scrolling=frameset rows=50%,50%scrolling=frameset rows=50%,50%scrolling=frame src=frame src=frame src=frame src=frame src=frame src=第26页，共41页，编辑于2022年，星期一 6.3 6.3 6.3 6.3 浮动窗口浮动窗口浮动窗口浮动窗口 浮动框架是在浏览器窗口中可以嵌套子窗口，在浮动框架是在浏览器窗口中可以嵌套子窗口，在浮动框架是在浏览器窗口中可以嵌套子窗口，在浮动框架是在浏览器窗口中可以嵌套子窗口，在其中显示网页的内容。在其中显示网页的内容。在其中显示网页的内容。在其中显示网页的内容。在HTMLHTMLHTMLHTML中通过中通过中通过中通过标签来标签来标签来标签来实现。实现。实现。实现。标签的属性和标签的属性和标签的属性和标签的属性和标签的属性基标签的属性基标签的属性基标签的属性基本相同。本相同。本相同。本相同。语法：语法：第27页，共41页，编辑于2022年，星期一浮动窗口实例第28页，共41页，编辑于2022年，星期一程序代码程序代码浮动窗口浮动窗口浮动窗口浮动窗口iframe name=iframeiframe name=iframeiframe name=iframescrolling=yesscrolling=yesscrolling=yes第29页，共41页，编辑于2022年，星期一 6.4 6.4 框架与超链接框架与超链接 使用框架的一个重要目的就是不同的框架中使用框架的一个重要目的就是不同的框架中显示不同的页面。显示不同的页面。在在标签中标签中namenamenamename属性定义了窗口的名称，属性定义了窗口的名称，在在标签中标签中targettarget属性指定链接文字出自哪个窗属性指定链接文字出自哪个窗口。口。语法：语法：语法：语法：a href=a href=a href=第30页，共41页，编辑于2022年，星期一普通框架与超链接实例1.1.1.1.普通框架与超链接普通框架与超链接普通框架与超链接普通框架与超链接第31页，共41页，编辑于2022年，星期一第32页，共41页，编辑于2022年，星期一首页程序代码首页程序代码普通框架与超链接普通框架与超链接普通框架与超链接普通框架与超链接frame src=frame src=frame src=frame name=frame name=frame name=第33页，共41页，编辑于2022年，星期一左框架超链接代码左框架超链接代码查看图片查看图片查看图片查看图片img src=img src=img src=你想了解北京奥运会场地你想了解北京奥运会场地你想了解北京奥运会场地你想了解北京奥运会场地a href=a href=a href=国家体育场国家体育场国家体育场国家体育场a href=a href=a href=北京科技大学北京科技大学北京科技大学北京科技大学体体体体育馆育馆育馆育馆第34页，共41页，编辑于2022年，星期一右框架超链接代码右框架超链接代码普通框架与超链接普通框架与超链接普通框架与超链接普通框架与超链接国家体育场国家体育场国家体育场国家体育场img src=img src=img src=建设地点：奥林匹克公园建设地点：奥林匹克公园建设地点：奥林匹克公园建设地点：奥林匹克公园建筑面积（万建筑面积（万建筑面积（万建筑面积（万M2M2M2M2）：）：）：）：25.825.825.825.8座席数：座席数：座席数：座席数：91000910009100091000赛时功能：田径、足球赛时功能：田径、足球赛时功能：田径、足球赛时功能：田径、足球赛后功能：将用于国际国内体育比赛和文化、娱乐活动赛后功能：将用于国际国内体育比赛和文化、娱乐活动赛后功能：将用于国际国内体育比赛和文化、娱乐活动赛后功能：将用于国际国内体育比赛和文化、娱乐活动开工时间：开工时间：开工时间：开工时间：2003.122003.122003.122003.12第35页，共41页，编辑于2022年，星期一2.2.浮动框架与超链接浮动框架与超链接浮动框架与超链接实例第36页，共41页，编辑于2022年，星期一点击点击“带您走进动画天地带您走进动画天地”进入的页面进入的页面第37页，共41页，编辑于2022年，星期一点击点击“感谢你的光临感谢你的光临”进入的页面进入的页面第38页，共41页，编辑于2022年，星期一 本章主要介绍了框架网页的结构，框架页相关属本章主要介绍了框架网页的结构，框架页相关属本章主要介绍了框架网页的结构，框架页相关属本章主要介绍了框架网页的结构，框架页相关属性的设置和框架页的超链接。通过本章的学习要明确性的设置和框架页的超链接。通过本章的学习要明确性的设置和框架页的超链接。通过本章的学习要明确性的设置和框架页的超链接。通过本章的学习要明确使用框架最主要的目的是创建链接的结构，尤其要重使用框架最主要的目的是创建链接的结构，尤其要重使用框架最主要的目的是创建链接的结构，尤其要重使用框架最主要的目的是创建链接的结构，尤其要重点掌握框架的基本结构和分割方式，为以后网页的制点掌握框架的基本结构和分割方式，为以后网页的制点掌握框架的基本结构和分割方式，为以后网页的制点掌握框架的基本结构和分割方式，为以后网页的制作打下良好的基础。作打下良好的基础。作打下良好的基础。作打下良好的基础。本章小结第39页，共41页，编辑于2022年，星期一思考题(1)(1)一个框架的基本结构是什么？一个框架的基本结构是什么？一个框架的基本结构是什么？一个框架的基本结构是什么？(2)(2)框架的分割方式有哪几种框架的分割方式有哪几种框架的分割方式有哪几种框架的分割方式有哪几种?(3)(3)(3)(3)如何设置框架的边框和大小？如何控制如何设置框架的边框和大小？如何控制 框架滚动条的显示？框架滚动条的显示？框架滚动条的显示？框架滚动条的显示？(4)(4)浮动框架如何设置？浮动框架如何设置？浮动框架如何设置？浮动框架如何设置？(5)(5)(5)(5)如何设置框架的链接如何设置框架的链接如何设置框架的链接如何设置框架的链接?第40页，共41页，编辑于2022年，星期一第41页，共41页，编辑于2022年，星期一