页面框架

  • 框架的两类用途:
  • 框架文件的特点
  • 创建框架网页的步骤:
  • 框架页面的基本语法
    • 实例
  • Iframe
    • 基本语法
      • 在网页中创建内嵌框架

框架的两类用途:

1、显示多窗口页面—使用框架集
2、页面复用—使用内嵌框架

框架文件的特点

页面框架_第1张图片

创建框架网页的步骤:

创建各子窗口对应的HTML文件
创建整个框架页面文件,引用子窗口文件

框架页面的基本语法

页面框架_第2张图片

实例

将页面分为上中下
frameset 标签为容器放置三个页面,用frame来放置。
不放在body中。
noresize="noresize是否允许拉动边框

主界面

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<frameset rows="10%,*,10%" border="1">
		<frame src="top.html" name="top" noresize="noresize">
		<frame src="middle.html" name="center" >
		
	frameset>
html>

top界面

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		第一个窗口
	body>
html>

中部

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		第二个窗口
	body>
html>

底部

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		第三个窗口
	body>
html>

效果:
页面框架_第3张图片
将界面划分为左中右

主界面

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<frameset cols="30%,*,10%" border="1">
		<frame src="left.html" name="left" >
		<frame src="center.html" name="r" >
		<frame src="right.html" name="m" >
	frameset>
html>

左部分

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<p>导航菜单栏p>
		<p>
			<a href="http://www.baidu.com" target="r">百度a>
		p>
		<p>
			<a href="form.html" target="r">form.htmla>
		p>
		<p>
			<a href="table.html" target="r">table.htmla>
		p>
	body>
html>

中部分

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		中间
	body>
html>

右部分

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		右边
	body>
html>

效果
页面框架_第4张图片

将两者结合起来,第二个的主体放在第一个的主题中使用


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<frameset rows="10%,*,10%" border="1">
		<frame src="top.html" name="top" noresize="noresize">
		<frame src="middle.html" name="center" >
		
	frameset>
html>

效果
页面框架_第5张图片

注意点:
点击连接后在中部显示,a标签的target选择放入容器的name。
父容器指显示在其父标签的容器。
_top指返回该标签的顶层。

Iframe

页面框架_第6张图片

基本语法

页面框架_第7张图片

在网页中创建内嵌框架

页面框架_第8张图片

iframe 可以设置默认的界面,利用a标签的target和iframe的name就可以实现页面点击互换(覆盖ifame原来的界面)。


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<iframe src="top.html" width="100%" height="100px" name="top">iframe>
		
		<iframe src="center.html" width="100%" height="300px" scrolling="yes" name="center">iframe>
		<iframe src="bottom.html" width="100%" height="" name="bottom">iframe>
		<a href="form.html" target="center">form.htmla>
	body>
html>

你可能感兴趣的:(HTML基础)