商务网页第11课.ppt

3.8 网页框架制作方法 网页框架是一种对浏览器窗口进行界面划分的技术，使用框架可以将多个网页组合成一个页面显示在浏览器中，给人的感觉是一个网页。页面各个框架之间是相对独立的，可以根据处理页面的需要建立关联。 使用框架最主要的目的就是创建链接的页面结构，最常见的框架结构就是导航框架结构，将网站的导航条作为一个单独的框架窗口。 框架的结构有两种基本型，即“上下型”和“左右型”。基于这两种结构进行组合嵌套，可以形成各种各样的框架结构 使用框架，必须首先创建框架结构（有的书称之为“框架集”），按照希望的页面结构类型进行分隔，建立若干个框架，并定义好框架的名称、宽度、高度，然后对各个框架指定需要显示的网页，形成一个页面集成了多个网页的显示效果。 创建页面框架结构，必须使用框架结构标签frameset及其“cols”（列属性）“rows”（行属性），以及框架标签frame及其“src”（指向网页名称）“name”等属性。其中“src”必须设置，确定该框架链接的网页内容。 在制作框架结构的页面时，每个框架的内容都必须绑定一个链接的网页源文件，每个框架的内容都可以重定向（重新绑定网页源文件）。“name”在重定向框架链接内容时才有作用，否则可以不必命名框架名称。 3.8.1 上下型框架制作 创建上下型框架结构，需要使用框架结构标签frameset及其rows属性，以及框架标签frame及其“src”“name”属性。设置方法为 frameset rows=第1行框架的高度属性，第2行框架的高度属性…… frame src=链接源1 name=框架名称/ frame src=链接源2 name=框架名称/ …… /frameset 其中，框架高度的属性值有两种表达方式：绝对像素值、百分比（跟踪浏览器窗口尺寸）。 在定义框架的时候，通常需要同时定义框架的链接源（如网页、网站、图像等）。 html head title上下框架结构示例/title /head frameset rows=130,* frame src=top.html / frame src=middleRight.html / /framesetnoframes/noframes /html 注：“noframes”“/noframes”标签是为了适应不支持框架的浏览器而设立的，目前主流的浏览器均支持框架，故在网页设计制作时可以省略；top.html、middleright.html是已经制作好的网页，具体内容我们会在后面介绍。 3.8.2 左右型框架制作 创建左右型框架结构，需要使用框架结构标签frameset及其cols属性，以及框架标签frame及其“src”“name”属性。设置方法为 frameset cols=第1列框架的宽度属性，第2列框架的宽度属性…… frame src=链接源1 name=框架名称/ frame src=链接源2 name=框架名称/ …… /frameset 其中，框架宽度的属性值也有两种表达方式：绝对像素值、百分比（跟踪浏览器窗口尺寸）。 html head title左右框架结构示例/title /head frameset cols=200,* frame src=middleLeft.html / frame src=middleRight.html / /framesetnoframes/noframes /html 3.8.3 框架重定向 框架重定向通常用于在两个框架之间建立联系。比如，在某个框架执行操作，会在另一个框架中显示操作的结果，多见于左右型框架结构。 框架重定向是通过超链接标签a的“target”属性指向框架名称（框架属性“name”定义的框架名称）来实现的。如： a href=/ target=rightframe人民邮电出版社/a，其中，“rightframe”是在创建框架时定义好的框架名称，这个超链接打开的人民邮电出版社的网站会显示在该框架中。 3.8.4 制作嵌套框架综合范例 嵌套型框架有很多种结构类型，其中上中下嵌套型框架应用较为广泛，本节我们以一种典型的上中下嵌套结构为例进行讲解。 该框架结构总体上分上中下3个框架。其中，中间的框架又拆分成左右两个框架，形成4个框架嵌套的典型结构。 项目内容：按照上边的典型嵌套框架，重新设计制作“云之雷科技有限公司”网站。上框架主要显示企业Logo以及企业名称（或者横幅广告），中左的框架用来显示功能目录，中右的框架为主界面区，以运行网站主要功能的网页，下框