《HTML5+CSS3网页制作教程》课件-第8章_第1页
《HTML5+CSS3网页制作教程》课件-第8章_第2页
《HTML5+CSS3网页制作教程》课件-第8章_第3页
《HTML5+CSS3网页制作教程》课件-第8章_第4页
《HTML5+CSS3网页制作教程》课件-第8章_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

模块8框架8.1框架简介8.2浮动框架8.3案例：浮动框架实现选项卡式链接思考与练习题

8.1框架简介

框架可以实现在同一个浏览器窗口中显示不止一个页面。通过框架结构标签<frameset>定义如何划分浏览器窗口，划分出的子窗口为一个框架，由<frame>标签定义，每个框架中可以显示一个独立的页面。

示例如下：

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

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

8.2浮动框架

浮动框架的语法格式如下：其中，src用来定义浮动框架内显示的页面的地址。width和height分别用来定义浮动框架的宽与高。name用来定义浮动框架的名称，可将超链接的target目标指向它，实现链接页面在浮动框架中显示。

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

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

图8-1浮动框架的应用

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

【案例描述】综合应用超链接和浮动框架实现选项卡式链接。案例源文件参考“模块8案例”。【考核知识点】超链接的应用、浮动框架的应用。【练习目标】(1)掌握浮动框架的应用。(2)掌握超链接目标的设置。

【案例源代码】

【运行结果】

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

图8-2案例运行结果

【案例分析】

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

思考与练习题

一、选择题1.在HTML中，通过()标签定义浮动框架。A.<frameset>

B.<frame>C.<iframe>

D.<form>2.()属性用于定义浮动框架的名称，可将超链接的target目标指向它，实现链接页面的浮动框架中显示。A.src

B.widthC.height

D.name

二、填空题

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

。

2.有HTML代码如下：

<ahref="page2.html"

>打开页面二</a>

<iframesrc="page1.html"width="500px"height="300p

人人文库> 全部分类> 专业文献 > IT计算机

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论