《第6章 框架精选文档.ppt》由会员分享，可在线阅读，更多相关《第6章 框架精选文档.ppt（41页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第第第6 6 6 6章章章章 框架框架框架框架本讲稿第一页，共四十一页本章要点框架结构框架结构框架结构框架结构页面属性页面属性页面属性页面属性超链接超链接超链接超链接本讲稿第二页，共四十一页 6.1 6.1 建立框架建立框架 框架在网页设计中，可以将一个浏览器窗口分框架在网页设计中，可以将一个浏览器窗口分成多个独立的小窗口，而且在每个小窗口中，可以成多个独立的小窗口，而且在每个小窗口中，可以分别显示不同的网页，达到在浏览器中同时浏览不分别显示不同的网页，达到在浏览器中同时浏览不同网页的效果。同网页的效果。使用框架可以非常方便地完成导航工作，而且使用框架可以非常方便地完成导航工作，而且各个框架
2、之间不存在干扰问题，所以框架技术一直各个框架之间不存在干扰问题，所以框架技术一直被普遍应用于页面导航。被普遍应用于页面导航。本讲稿第三页，共四十一页 1 1、框架结构、框架结构 框架的基本结构主要包括两部分：框架的基本结构主要包括两部分：框架集框架集 框架框架 它主要是利用它主要是利用标签和标签和标标签来定义的。签来定义的。本讲稿第四页，共四十一页 框架集是在一个文档内定义一组框架结构的框架集是在一个文档内定义一组框架结构的HTMLHTML网页，它定义了网页显示的框架数、框架的网页，它定义了网页显示的框架数、框架的大小、载入框架的网页源和其他可以定义的属性，大小、载入框架的网页源和其他可以定义
3、的属性，用用标签标签来定义一个窗口框架。来定义一个窗口框架。本讲稿第五页，共四十一页 框架是指在网页上定义的一个显示区域，框架是指在网页上定义的一个显示区域，用用标签标签来定义窗口框架中的子窗口的内来定义窗口框架中的子窗口的内容。容。在使用了框架集的页面中，页面的在使用了框架集的页面中，页面的标标记被记被标记所取代，再通过标记所取代，再通过标记定标记定义每一个框架。义每一个框架。本讲稿第六页，共四十一页2 2、框架的基本结构、框架的基本结构frameset cols(rows)=frame src=/本讲稿第七页，共四十一页3 3、框架分割方式、框架分割方式左右分割窗口左右分割窗口 采用采用c
4、olscols属性，在垂直方向上分割窗口。属性，在垂直方向上分割窗口。结构如下：结构如下：frameset cols=frame src=/frame src=/.本讲稿第八页，共四十一页左右分割框架实例本讲稿第九页，共四十一页程序代码程序代码左右分割窗口左右分割窗口本讲稿第十页，共四十一页上下分割窗口上下分割窗口 采用采用rowsrows属性，在水平方向上分割窗口。属性，在水平方向上分割窗口。结构如下：结构如下：frameset rows=frame src=/frame src=/.本讲稿第十一页，共四十一页上下分割框架实例本讲稿第十二页，共四十一页程序代码程序代码上下分割窗口上下分割窗口
5、本讲稿第十三页，共四十一页嵌套分割窗口嵌套分割窗口 一个浏览器窗口可以既左右分割，又上下分一个浏览器窗口可以既左右分割，又上下分割，这种窗口就是嵌套分割窗口。割，这种窗口就是嵌套分割窗口。frameset cols=frame src=/frameset rows=frame src=/frame src=/本讲稿第十四页，共四十一页上下分割框架实例本讲稿第十五页，共四十一页程序代码程序代码嵌套分割窗口嵌套分割窗口嵌套分割窗口嵌套分割窗口本讲稿第十六页，共四十一页6.2 6.2 窗口框架设置窗口框架设置1 1、框架集属性、框架集属性水平水平/垂直分割窗口属性垂直分割窗口属性rows/colsr
6、ows/cols语法：语法：frameset rows=参数值可以用数字，百分比和剩余值及这参数值可以用数字，百分比和剩余值及这3 3种方式的种方式的混合方式来表示。混合方式来表示。本讲稿第十七页，共四十一页设置窗口框架宽度属性设置窗口框架宽度属性borderborder 属性属性border,border,用于设定分割窗口的框架宽度。用于设定分割窗口的框架宽度。语法：语法：frameset 设置边框颜色属性设置边框颜色属性bordercolorbordercolor 属性属性bordercolor,bordercolor,用于设定框架边框的颜色。用于设定框架边框的颜色。语法：语法：frame
7、set 本讲稿第十八页，共四十一页设置框架隐藏属性设置框架隐藏属性frameborderframeborder 该属性用于设定是否显示框架。该属性用于设定是否显示框架。标签：控制窗口框架的所有子窗口标签：控制窗口框架的所有子窗口标签：控制该标签所代表的子窗口标签：控制该标签所代表的子窗口语法：语法：frameset frameborder=valuevalue取值取值0(0(不显示边框不显示边框)或或1(1(显示边框显示边框)本讲稿第十九页，共四十一页框架集属性网页实例本讲稿第二十页，共四十一页程序代码程序代码框架集边框宽度、边框颜色和边框显示属框架集边框宽度、边框颜色和边框显示属性性fram
8、eset cols=*,*,*border=本讲稿第二十一页，共四十一页2 2、框架窗口属性、框架窗口属性(1)src(1)src属性属性 用于设定框架显示的文件路径用于设定框架显示的文件路径 语法：语法：frame src=(2)name(2)name属性属性 用于设定框架窗口的名称用于设定框架窗口的名称 语法：语法：frame name=框架名必须以字母开头，必须是单个单词；区框架名必须以字母开头，必须是单个单词；区分大小写；允许使用下划线，不允许使用空格、句分大小写；允许使用下划线，不允许使用空格、句点和连字符。点和连字符。本讲稿第二十二页，共四十一页(3)scrolling(3)scr
9、olling属性属性 用于设定该窗口是否显示滚动条。用于设定该窗口是否显示滚动条。语法：语法：frame scrolling=value value值有值有3 3个：个：yesyes、nono和和autoauto（默认）（默认）(4)noresize(4)noresize属性属性 用于设定用户能否自行调整框架窗口的大小。用于设定用户能否自行调整框架窗口的大小。语法：语法：frame noresize=本讲稿第二十三页，共四十一页(5)marginwidth(5)marginwidth属性属性 用于设定框架中的内容与框架边缘的左右距离用于设定框架中的内容与框架边缘的左右距离 语法：语法：fram
10、e marginwidth=(6)marginheight(6)marginheight属性属性 用于设定框架中的内容与框架边缘的上下距离用于设定框架中的内容与框架边缘的上下距离 语法：语法：frame marginheight=本讲稿第二十四页，共四十一页框架窗口属性实例本讲稿第二十五页，共四十一页程序代码程序代码框架窗口属性框架窗口属性框架窗口属性框架窗口属性frame scrolling=frame scrolling=frame scrolling=frameset rows=50%,50%scrolling=frameset rows=50%,50%scrolling=framese
11、t rows=50%,50%scrolling=frame src=frame src=frame src=frame src=frame src=frame src=本讲稿第二十六页，共四十一页 6.3 6.3 浮动窗口浮动窗口 浮动框架是在浏览器窗口中可以嵌套子窗口，浮动框架是在浏览器窗口中可以嵌套子窗口，在其中显示网页的内容。在在其中显示网页的内容。在HTMLHTML中通过中通过标标签来实现。签来实现。标签的属性和标签的属性和标签的属标签的属性基本相同。性基本相同。语法：语法：本讲稿第二十七页，共四十一页浮动窗口实例本讲稿第二十八页，共四十一页程序代码程序代码浮动窗口浮动窗口浮动窗口浮动
12、窗口iframe name=iframeiframe name=iframeiframe name=iframescrolling=yesscrolling=yesscrolling=yes本讲稿第二十九页，共四十一页 6.4 6.4 框架与超链接框架与超链接 使用框架的一个重要目的就是不同的框架中显示使用框架的一个重要目的就是不同的框架中显示不同的页面。不同的页面。在在标签中标签中namename属性定义了窗口的名称，属性定义了窗口的名称，在在标签中标签中targettarget属性指定链接文字出自哪个窗口。属性指定链接文字出自哪个窗口。语法：语法：a href=本讲稿第三十页，共四十一页普
13、通框架与超链接实例1.1.普通框架与超链接普通框架与超链接本讲稿第三十一页，共四十一页本讲稿第三十二页，共四十一页首页程序代码首页程序代码普通框架与超链接普通框架与超链接普通框架与超链接普通框架与超链接frame src=frame src=frame src=frame name=frame name=frame name=本讲稿第三十三页，共四十一页左框架超链接代码左框架超链接代码查看图片查看图片查看图片查看图片img src=img src=img src=你想了解北京奥运会场地你想了解北京奥运会场地你想了解北京奥运会场地你想了解北京奥运会场地a href=a href=a href=国
14、家体育场国家体育场国家体育场国家体育场a href=a href=a href=北京科技大学北京科技大学北京科技大学北京科技大学体体体体育馆育馆育馆育馆本讲稿第三十四页，共四十一页右框架超链接代码右框架超链接代码普通框架与超链接普通框架与超链接普通框架与超链接普通框架与超链接国家体育场国家体育场国家体育场国家体育场img src=img src=img src=建设地点：奥林匹克公园建设地点：奥林匹克公园建设地点：奥林匹克公园建设地点：奥林匹克公园建筑面积（万建筑面积（万建筑面积（万建筑面积（万M2M2M2M2）：）：）：）：25.825.825.825.8座席数：座席数：座席数：座席数：91
15、000910009100091000赛时功能：田径、足球赛时功能：田径、足球赛时功能：田径、足球赛时功能：田径、足球赛后功能：将用于国际国内体育比赛和文化、娱乐活动赛后功能：将用于国际国内体育比赛和文化、娱乐活动赛后功能：将用于国际国内体育比赛和文化、娱乐活动赛后功能：将用于国际国内体育比赛和文化、娱乐活动开工时间：开工时间：开工时间：开工时间：2003.122003.122003.122003.12本讲稿第三十五页，共四十一页2.2.浮动框架与超链接浮动框架与超链接浮动框架与超链接实例本讲稿第三十六页，共四十一页点击点击“带您走进动画天地带您走进动画天地”进入的页面进入的页面本讲稿第三十七页
16、，共四十一页点击点击“感谢你的光临感谢你的光临”进入的页面进入的页面本讲稿第三十八页，共四十一页 本章主要介绍了框架网页的结构，框架页相关本章主要介绍了框架网页的结构，框架页相关属性的设置和框架页的超链接。通过本章的学习要属性的设置和框架页的超链接。通过本章的学习要明确使用框架最主要的目的是创建链接的结构，尤明确使用框架最主要的目的是创建链接的结构，尤其要重点掌握框架的基本结构和分割方式，为以后其要重点掌握框架的基本结构和分割方式，为以后网页的制作打下良好的基础。网页的制作打下良好的基础。本章小结本讲稿第三十九页，共四十一页思考题(1)(1)一个框架的基本结构是什么？一个框架的基本结构是什么？(2)(2)框架的分割方式有哪几种框架的分割方式有哪几种?(3)(3)如何设置框架的边框和大小？如何控制如何设置框架的边框和大小？如何控制 框架滚动条的显示？框架滚动条的显示？(4)(4)浮动框架如何设置？浮动框架如何设置？(5)(5)如何设置框架的链接如何设置框架的链接?本讲稿第四十页，共四十一页本讲稿第四十一页，共四十一页