《HTML5+CSS3网页制作教程》课件_第8章.pptx

模块8框架;

8.1框架简介

;

示例如下：;

在这个示例中，设置了一个框架集，将浏览器窗口划分成两列，第一列占据浏览器窗口30%宽度，第二列占据浏览器窗口70%宽度。页面page1.html置于第一个框架中，页面page2.html置于第二个框架中。

由于HTML5已经舍弃了frameset标签，所以本书不再详细介绍，大家了解即可。;

8.2浮动框架;

【例8-1】浮动框架的应用。;

上述代码在浏览器中的预览效果如图8-1所示。

;

8.3案例：浮动框架实现选项卡式链接

;

【案例源代码】

;

;

【运行结果】

源代码在浏览器中的运行结果如图8-2所示。

;

【案例分析】

案例页面包括标题、超链接、浮动框架及页脚等。浮动框架的初始页面为page1.html，名称为ifr。当点击各教程网站链接时，相应的网站页面会显示在浮动框架内，这是通过超链接的target属性设置的，将target属性值设置为浮动框架的名称ifr即可。案例效果图是应用了CSS样式后的结果，需要将外部CSS样式文件“style8.css”引入到HTML页面中的head标签内。

;

思考与练习题

;

二、填空题

1.HTML中定义浮动框架的标签是。

2.有HTML代码如下：

ahref=page2.html打开页面二/a

iframesrc=page1.htmlwidth=500pxheight=300pxname=ifr/iframe

在横线处将代码补充完整，使点击超链接时，“page2.html”页面显示在浮动框架中。