2.4 HTML框架标记 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（高等教育出版社）

网页设计与制作 第02章_HTML 本章内容 HTML基础知识 HTML的一些基本标记 HTML表格标记 HTML框架标记 HTML滚动字幕和多媒体标记 2 网页设计与制作 2.4 HTML框架标记 2.4.1 什么是框架 框架是由英文Frame翻译而来，也可以称为“帧”。通过使用框架技术，可以将多个不同的HTML文件同时装载到一个浏览器窗口中，也就是说，通过框架技术将浏览器窗口按一定的结构和比例划分为多个框架，每个框架中可以载入一个指定的HTML文件（称为框架页面，该文件必须事先存在，可以使用相对路径或绝对路径），这样就使得这些框架所对应的多个网页文件可以同时显示在一个浏览器窗口中。 3 网页设计与制作 2.4 HTML框架标记 请阅读例2.14代码 <html> <head> <title>三个框架的简单示例</title> </head> <frameset cols="30%,*"> <frameset rows="80%,*"> <frame src="ep2_10.html"> <frame src="ep2_11.html"> </frameset> <frame src="http://www.baidu.com/"> </frameset> </html> 4 网页设计与制作 2.4 HTML框架标记 在本例中，HTML页面的文档体标记<body>被框架集标记<frameset>所取代，然后通过框架标记<frame>来定义每一个框架。在框架布局上，通过设置<frameset>标记的cols属性，将浏览器窗口从整体上划分为左、右两个框架： （1）左框架：宽度为窗口总宽度的30%。然后通过嵌套使用<frameset>标记并设置rows属性，又将左框架划分为了上、下两个子框架，其中上框架的高度为窗口总高度的80%，对应载入了本地HTML文档ep2_10.html；下框架的高度为窗口总高度的剩余部分即20%，对应载入了本地HTML文档ep2_11.html。 （2）右框架：宽度为窗口总宽度的剩余部分即70%，对应载入了百度的首页（http://www.baidu.com/）。 5 网页设计与制作 2.4 HTML框架标记 2.4.2 框架相关标记及属性 1．框架集标记<frameset></frameset> <frameset></frameset>标记对用于定义一个框架集（frameset），并同时指定一个浏览器窗口如何拆分为多个框架（frame），每个框架可对应一个独立的HTML文档。<frameset></frameset>标记对必须放在HTML文档的<body></body>标记对之外，并且可以嵌套使用以形成更复杂的框架结构。 6 网页设计与制作 2.4 HTML框架标记 <frameset>标记必须至少用到rows属性和cols属性中的一个，否则浏览器无法正常显示出多个框架。rows属性用于指定文档中各个框架的行定位（也就是拆分为上下结构），而cols属性用于指定文档中各个框架的列定位（也就是拆分为左右结构）。这两个属性的取值可以是百分数、绝对像素值或星号“*”，其中星号代表该方向所有剩余空间，如果同一个属性中出现多个星号则将所有剩余空间平均分配。这两个属性的使用示例见表2.6。 除此之外，<frameset>还有其他一些属性。border属性用于设置边框粗细，默认为5像素；bordercolor属性用于设置边框颜色；framespacing属性用于设置框架与框架之间的空白距离。 7 网页设计与制作 2.4 HTML框架标记 代码 说明 <frameset rows="50%, 30%, 20%"> 共有3个按行排列的框架（形成上、中、下的结构），它们的高度分别占浏览器窗口高度的50%、30%、20% <frameset rows="*,*,*"> 共有3个按行排列的框架（形成上、中、下的结构），它们的高度分别占浏览器窗口高度的1/3 <frameset cols="20%,*,*"> 共有3个按列排列的框架（形成左、中、右的结构），它们的宽度分别占浏览器窗口宽度的20%、40%、40% <frameset rows="40%,*" cols="50%,200, *"> 共有6个框架（形成2行3列的结构），第一行的3个框架的高度均为浏览器窗口高度的40%，第二行的3个框架的高度均为浏览器窗口高度的60%。第一列的2个框架的宽度均为浏览器窗口宽度的50%，第二列的2个框架的宽度均为固定的200像素，第三列的2个框架的宽度均为浏览器窗口宽度的剩余值 8 网页设计与制作 表2.6 <frameset>标记的rows属性和cols属性的使用示例 2.4 HTML