3.7网页制作.pptVIP

3.7 框架 实例3-19 框架的简介 实例3-20 使用框架 实例3-21 使用内嵌框架 实例3-19 框架的简介 要求与目的： 掌握什么是框架 了解框架的使用 掌握frameset元素及其属性设置 了解常用的划分方式 二、实例结果见图所示 二、过程与步骤： 1．通过依次单击任务栏上的【开始】→【程序】→【附件】→【记事本】菜单命令打开记事本。 2．在记事本的编辑面板中输入以下代码，创建三个简单的网页x.htm、y.htm和frame1.htm： ―――以下代码是x.htm――― htmlheadtitle页面x/title/head body font size=+3b这是文件x.htm/b/font /body /html ―――以下代码是frame1.htm――― html headtitle框架示例/title/head frameset cols=20%,* frameset rows=40%,* frame src=x.htm noresize frame src=bd.jpg /frameset frame src=y.htm scrolling=yes /frameset /html ―――以下代码是y.htm――― html headtitle页面y/title/head body font size=+3 color=blueb这是文件y.htm/b/font /body /html 3．将以上的代码分别保存到相同的目录下，名字分别为x.htm、y.htm和frame1.htm。 4．运行结果见图3－29所示。 三、涵盖知识点： 1．什么是框架 框架（也称为帧）将web浏览器的窗口分割为不同的区域，每个区域都可以显示一个独立可滚动的页面。例如，可以在网页中使用三个框架，一个用于显示标题或静态的logo，一个用作导航菜单和一个用于显示数据。每个框架中的文件都可以彼此独立的创建、修改和滚动。见图3－28所示，页面使用了三个框架。 2．框架划分 标准的html文档有一个head部分和body部分。但使用框架的html文档有一个head部分和frameset部分，没有body部分，也就是说frameset和body不能同时使用。 使用frameset可以任意划分框架，其属性见表3－6所示。 表3－6 Frameset属性 框架可以嵌套，即在frameset的内部继续划分，这种方法在实际做的过程中用的比较多。本例中可以看到，就使用了框架的嵌套。 frameset cols=20%,* frameset rows=40%,* frame src=x.htm noresize frame src=bd.jpg /frameset frame src=y.htm scrolling=yes /frameset 此例中划分的过程是：首先，总体将web页面划分为两列，左侧宽度为窗口宽度的20%，右侧则为“*”表示，即80%。其次，将左侧的框架继续划分为上下两部分，上面的占左侧框架高度的40%，下面当然为60%。 3．框架内容 框架的内容要用到frame标记，frame可以指定每个框架的外观和内容。其主要属性有两个src和name。Src指定该框架放置的初始文件的位置，name指定框架名。本例中我们的三个文件放在同一目录下，因此使用相对目录即可。Frame标记还具有下列属性见表3－7所示。 表3－7 frame标记属性 实例3-20 使用框架 要求与目的： 掌握frameset和frame标记的各种属性 掌握框架链接操作 能熟练灵活运用框架设计交互页面 二、实例结果,见图所示 二、过程与步骤： 1．通过依次单击任务栏上的【开始】→【程序】→【附件】→【记事本】菜单命令打开记事本。 2．在记事本的编辑面板中输入以下代码，创建了带有导航栏（framelnk.htm）的简单交互页面frame2.htm： ―――以下代码是framelnk.htm――― html headtitle导航栏/title/head body font size=+3 b a href=x.htmtarget=link文件x.htm/abr a href=y.htmtarget=link文件y.htm/abr a href=ceng.htmtarget=link层的使用/abr a href=form2.htmtarget=link使用表单/abr a href=bd.jpgtarget=link北大博雅塔/a /b/font/body /html ―――以下代码是frame2.htm――― html headtitle框架示例2/title/h