HTML网页设计教程框架
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<!--程序 程序7-4--> 程序 <html> <head> <title>框架的边框控制 框架的边框控制</title> 框架的边框控制 </head> <frameset rows="30%,*" border="12"> <frame> <frameset cols="20%,*"> <frame> <frame> </frameset> </frameset> </html>
框架的边框
框架的隐藏
frameborder属性用于控制窗口框架的周围是 属性用于控制窗口框架的周围是 否显示框架，此属性可使用在<frameset>标记 否显示框架，此属性可使用在 标记 标记中， 与<frame>标记中，如果使用在 标记中 如果使用在<frameset> 标记内时，可控制窗口框架的所有子窗口， 标记内时，可控制窗口框架的所有子窗口，如果 用在<frame>标记中，则只能控制该标记所代 标记中， 用在 标记中 表的子窗口。 表的子窗口。 基本语法： 基本语法：
–
<frame src="html文件的位置"> src属性的设置方法和前面介绍的<img>标记的src属性 的用法是一样的，下面的<frame>标记，将设置子窗口 显示名称为frame.html的网页。 <frame src="frame.html">。
语法说明：
–
–
指定子窗口显示网页
<!--程序 程序7-6--> 程序 <html> <head> <title>指定子窗口显示网页 指定子窗口显示网页</title> 指定子窗口显示网页 </head> <frameset cols="30%,40%,*"> <frame src=left.html> <frame src=center.html> <frame src=right.html> </frameset> </html>
<!--程序 程序7-1--> 程序 <html> <head> <title>采用整数设置窗口的水平分割 采用整数设置窗口的水平分割</title> 采用整数设置窗口的水平分割 </head> <frameset rows="80,120,*"> <frame> <frame> <frame> </frameset> </html>
指定子窗口显示网页
定义子窗口名称
name属性用来指定窗口的名称，当完成子窗口 属性用来指定窗口的名称， 属性用来指定窗口的名称 的名称定义后， 的名称定义后，可指定超链接的链接目标显示到 网页的某个子窗口。 网页的某个子窗口。 基本语法： 基本语法：
–
<frame name="子窗口名称">
<!--程序 程序7-7--> 程序 <html> <head> <title>指定子窗口的名称 指定子窗口的名称</title> 指定子窗口的名称 </head> <frameset cols="30%,40%,*"> <frame src=left.html name=left> <frame src=center.html name=center> <frame src=right.html name=right> </frameset> </html>
基本的注意事项 有用的提示： 有用的提示： 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生， 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。 标签中加入： 。 为不支持框架的浏览器添加 <noframes> 标签。 标签。 重要提示： 标签同时使用！ 重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！ 不过， 标签， 标签内。（在下面的第一个实例中， 。（在下面的第一个实例中 不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中， 可以查看它是如何实现的。） 可以查看它是如何实现的。） 如何使用 <noframes> 标签 本例演示：如何使用 <noframes> 标签。 本例演示： 标签。 <html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的浏览器无法处理框架！</body> 您的浏览器无法处理框架！ 您的浏览器无法处理框架 </noframes> </frameset> </html>
窗口的嵌套分割
在实际应用中，“厂”字型框架使用极为广泛。 在实际应用中， 字型框架使用极为广泛。 “厂”字型的网页就是窗口中包含水平和垂直分 如图所示，实现“ 割，如图所示，实现“厂”字型框架需要对窗口 进行嵌套分割。 进行嵌套分割。
窗口的嵌套分割
<!--程序 程序7-3--> 程序 <html> <head> <title>窗口的嵌套分割 窗口的嵌套分割</title> 窗口的嵌套分割 </head> <frameset rows="30%,*"> <frame> <frameset cols="20%,*"> <frame> <frame> </frameset> </frameset> </html>
–
<frame scrolling="yes或no或auto"> yes表示为显示滚动条，no表示不显示滚动条，auto为 自动设置。
语法说明： 语法说明：
–
<!--程序 程序7-8--> 程序 <html> <head> <title>控制框架滚动条 控制框架滚动条</title> 控制框架滚动条 </head> <frameset rows="20%,70%,*"> <frame scrolling=yes> <frame scrolling=no> <frame scrolling=auto> </frameset> </html>
WEB编百度文库基础
Company name
使用框架创建多页面布局
主要内容
• 建立水平或垂直的框架分割窗口 • 用嵌套框架分割窗口 • 对滚动条进行控制 • 在空白窗口显示网页 • 在框架或浮动框架上进行链接
7.1框架简介
框架技术可以将浏览器分割成多个小窗口，并且在 每个小窗口中，可以显示不同的网页，这样我们就 可以很方便的在浏览器中浏览不同的网页效果。 当浏览器分割成多个窗口后，各窗口就会扮演不同 的角色，实现不同的功能。举例来说，有些论坛就 是把浏览器分割成两个窗口，一个窗口主要来显示 帖子的标题，而另一个窗口会显示具体的内容。这 样的设计显然比起一个窗口的网页在浏览时方便得 多，而且用户也可以任意的切换题目。。
框架的边框
标记中， 在<frameset>标记中，可运用 标记中 可运用border属性控 属性控 制分割窗口框架的边框。 制分割窗口框架的边框。 基本语法： 基本语法：
–
<frameset border="n"> n为整数，代表此窗口框架的宽度，单位为像素(px)。
语法说明： 语法说明：
–
框架的边框
窗口的水平分割
语法说明
–
– – – – –
rows属性的值代表各子窗口的高度，第一个子窗口高为 高度1，第二个子窗口高为高度2，依此类推，而最后一 个*，则代表最后一个子窗口的高度，值为其他子窗口 高度分配后所剩余的高度。 设置高度数值的方式有两种： 采用整数设置，单位为像素（px），语法如下： <frameset rows="100，200，*"> 用百分比设置，语法如下： <frameset rows="20％，50％，*">
窗口的水平分割
rows属性可定义一个水平分割的窗口框架。 属性可定义一个水平分割的窗口框架。 属性可定义一个水平分割的窗口框架 <frameset rows="高度 ，高度 高度1，高度2,…,* "> 高度 <frame src="url"> <frame src="url"> … </frameset>
– –
<frameset frameborder="0"或"1">语法说明： "0"表示不显示边框，"1"表示显示边框，默认值为1。
7.3子窗口的设置
指定子窗口显示网页 定义子窗口名称 控制子窗口滚动条 调整子窗口的尺寸 设置子窗口的边距
指定子窗口显示网页
src属性是用来指定要导入到某个子窗口的 属性是用来指定要导入到某个子窗口的HTML 属性是用来指定要导入到某个子窗口的 文件的位置，语法如下： 文件的位置，语法如下： 基本语法：
–
<frame src="url" marginwidth="value" marginheight="value"> 在HTML文件中，利用框架<frame>标记中的marginwidth 和marginheight属性可以设置相应子框架的左右和上下 边缘的空白。
语法说明： 语法说明：
–
<!--程序 程序7-9 --> 程序 <html> <head><title>设置框架边距 设置框架边距 </title></head> <frameset cols="30%,*"> <frame src=left.html marginheight=50 marginwidth=50> <frame src=right.html> </frameset> </html>
控制子窗口滚动条
scrolling属性用于控制窗口框架中是否显示滚动 属性用于控制窗口框架中是否显示滚动 使用此属性，可以避免HTML文件因内容过 条，使用此属性，可以避免 文件因内容过 多而无法完全显示。此属性用于<frame>标记 多而无法完全显示。此属性用于 标记 中。 基本语法： 基本语法：
窗口的垂直分割
cols属性可定义一个垂直分割的窗口框架。 基本语法： <frameset cols="宽度 ，宽度 宽度1，宽度2,…,* "> 宽度 <frame src="url"> <frame src="url"> … </frameset>
一个垂直分割的例子
<!--程序 程序7-1--> 程序 <html> <head> <title>采用整数设置窗口的水平分割 采用整数设置窗口的水平分割</title> 采用整数设置窗口的水平分割 </head> <frameset rows="80,120,*"> <frame> <frame> <frame> </frameset> </html>
框架的基本结构
框架的基本结构主要分为框架和框架集两个部分。 它是利用<frame>标记与<frameset>标记来定 义 。 其 中 <frame> 标 记 用 于 定 义 框 架 ， 而 <frameset>标记则用于定义框架集。
框架的基本结构
<html> <head> <title>框架的基本结构 框架的基本结构</title> 框架的基本结构 </head> <frameset …> <frame …> </frame …> </frameset> </html>
调整子窗口的尺寸
在前面的学习中， 在前面的学习中，我们学习了如何运用 <frameset>标记的 标记的rows和cols属性来水平或 标记的 和 属性来水平或 垂直分割窗口。但设置后， 垂直分割窗口。但设置后，各窗口框架的大小并 非固定无法更改，当我们想更改窗口框架大小时， 非固定无法更改，当我们想更改窗口框架大小时， 可以将鼠标指针移到要更改的框架上， 可以将鼠标指针移到要更改的框架上，待指针呈 现双箭头符号时，再用鼠标进行拖拽， 现双箭头符号时，再用鼠标进行拖拽，就可调整 窗口的大小。 窗口的大小。 当然我们不希望用户能随意地改变子窗口的大小， 当然我们不希望用户能随意地改变子窗口的大小， 那么这时我们可以在<frame>标记中，添加 标记中， 那么这时我们可以在 标记中 noresize属性，语法如下： 属性， 属性 语法如下： <frame noresize src="url">
7.2框架的设置
常见的对窗口的分割包括：水平分割、垂直分割 常见的对窗口的分割包括：水平分割、 和嵌套分割。具体采用哪种分割方式， 和嵌套分割。具体采用哪种分割方式，取决于实 际需要，可用<frameset>标记中的 标记中的rows（水 际需要，可用 标记中的 （ 平分割）或cols（垂直分割）属性来进行分割。 平分割） （垂直分割）属性来进行分割。
设置子窗口的边距
网页的边距可以通过“ 来设定， 网页的边距可以通过“margin”来设定，那么框 来设定 架和网页一样也可设置边距， 架和网页一样也可设置边距，可以利用 <frame>标记中的 标记中的marginwidth属性来设置 标记中的 属性来设置 框架左右边缘的宽度； 框架左右边缘的宽度；marginheight属性可以 属性可以 设置框架上下边缘的宽度。 设置框架上下边缘的宽度。 基本语法： 基本语法：
框架的边框
框架的隐藏
frameborder属性用于控制窗口框架的周围是 属性用于控制窗口框架的周围是 否显示框架，此属性可使用在<frameset>标记 否显示框架，此属性可使用在 标记 标记中， 与<frame>标记中，如果使用在 标记中 如果使用在<frameset> 标记内时，可控制窗口框架的所有子窗口， 标记内时，可控制窗口框架的所有子窗口，如果 用在<frame>标记中，则只能控制该标记所代 标记中， 用在 标记中 表的子窗口。 表的子窗口。 基本语法： 基本语法：
–
<frame src="html文件的位置"> src属性的设置方法和前面介绍的<img>标记的src属性 的用法是一样的，下面的<frame>标记，将设置子窗口 显示名称为frame.html的网页。 <frame src="frame.html">。
语法说明：
–
–
指定子窗口显示网页
<!--程序 程序7-6--> 程序 <html> <head> <title>指定子窗口显示网页 指定子窗口显示网页</title> 指定子窗口显示网页 </head> <frameset cols="30%,40%,*"> <frame src=left.html> <frame src=center.html> <frame src=right.html> </frameset> </html>
<!--程序 程序7-1--> 程序 <html> <head> <title>采用整数设置窗口的水平分割 采用整数设置窗口的水平分割</title> 采用整数设置窗口的水平分割 </head> <frameset rows="80,120,*"> <frame> <frame> <frame> </frameset> </html>
指定子窗口显示网页
定义子窗口名称
name属性用来指定窗口的名称，当完成子窗口 属性用来指定窗口的名称， 属性用来指定窗口的名称 的名称定义后， 的名称定义后，可指定超链接的链接目标显示到 网页的某个子窗口。 网页的某个子窗口。 基本语法： 基本语法：
–
<frame name="子窗口名称">
<!--程序 程序7-7--> 程序 <html> <head> <title>指定子窗口的名称 指定子窗口的名称</title> 指定子窗口的名称 </head> <frameset cols="30%,40%,*"> <frame src=left.html name=left> <frame src=center.html name=center> <frame src=right.html name=right> </frameset> </html>
基本的注意事项 有用的提示： 有用的提示： 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生， 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。 标签中加入： 。 为不支持框架的浏览器添加 <noframes> 标签。 标签。 重要提示： 标签同时使用！ 重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！ 不过， 标签， 标签内。（在下面的第一个实例中， 。（在下面的第一个实例中 不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中， 可以查看它是如何实现的。） 可以查看它是如何实现的。） 如何使用 <noframes> 标签 本例演示：如何使用 <noframes> 标签。 本例演示： 标签。 <html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的浏览器无法处理框架！</body> 您的浏览器无法处理框架！ 您的浏览器无法处理框架 </noframes> </frameset> </html>
窗口的嵌套分割
在实际应用中，“厂”字型框架使用极为广泛。 在实际应用中， 字型框架使用极为广泛。 “厂”字型的网页就是窗口中包含水平和垂直分 如图所示，实现“ 割，如图所示，实现“厂”字型框架需要对窗口 进行嵌套分割。 进行嵌套分割。
窗口的嵌套分割
<!--程序 程序7-3--> 程序 <html> <head> <title>窗口的嵌套分割 窗口的嵌套分割</title> 窗口的嵌套分割 </head> <frameset rows="30%,*"> <frame> <frameset cols="20%,*"> <frame> <frame> </frameset> </frameset> </html>
–
<frame scrolling="yes或no或auto"> yes表示为显示滚动条，no表示不显示滚动条，auto为 自动设置。
语法说明： 语法说明：
–
<!--程序 程序7-8--> 程序 <html> <head> <title>控制框架滚动条 控制框架滚动条</title> 控制框架滚动条 </head> <frameset rows="20%,70%,*"> <frame scrolling=yes> <frame scrolling=no> <frame scrolling=auto> </frameset> </html>
WEB编百度文库基础
Company name
使用框架创建多页面布局
主要内容
• 建立水平或垂直的框架分割窗口 • 用嵌套框架分割窗口 • 对滚动条进行控制 • 在空白窗口显示网页 • 在框架或浮动框架上进行链接
7.1框架简介
框架技术可以将浏览器分割成多个小窗口，并且在 每个小窗口中，可以显示不同的网页，这样我们就 可以很方便的在浏览器中浏览不同的网页效果。 当浏览器分割成多个窗口后，各窗口就会扮演不同 的角色，实现不同的功能。举例来说，有些论坛就 是把浏览器分割成两个窗口，一个窗口主要来显示 帖子的标题，而另一个窗口会显示具体的内容。这 样的设计显然比起一个窗口的网页在浏览时方便得 多，而且用户也可以任意的切换题目。。
框架的边框
标记中， 在<frameset>标记中，可运用 标记中 可运用border属性控 属性控 制分割窗口框架的边框。 制分割窗口框架的边框。 基本语法： 基本语法：
–
<frameset border="n"> n为整数，代表此窗口框架的宽度，单位为像素(px)。
语法说明： 语法说明：
–
框架的边框
窗口的水平分割
语法说明
–
– – – – –
rows属性的值代表各子窗口的高度，第一个子窗口高为 高度1，第二个子窗口高为高度2，依此类推，而最后一 个*，则代表最后一个子窗口的高度，值为其他子窗口 高度分配后所剩余的高度。 设置高度数值的方式有两种： 采用整数设置，单位为像素（px），语法如下： <frameset rows="100，200，*"> 用百分比设置，语法如下： <frameset rows="20％，50％，*">
窗口的水平分割
rows属性可定义一个水平分割的窗口框架。 属性可定义一个水平分割的窗口框架。 属性可定义一个水平分割的窗口框架 <frameset rows="高度 ，高度 高度1，高度2,…,* "> 高度 <frame src="url"> <frame src="url"> … </frameset>
– –
<frameset frameborder="0"或"1">语法说明： "0"表示不显示边框，"1"表示显示边框，默认值为1。
7.3子窗口的设置
指定子窗口显示网页 定义子窗口名称 控制子窗口滚动条 调整子窗口的尺寸 设置子窗口的边距
指定子窗口显示网页
src属性是用来指定要导入到某个子窗口的 属性是用来指定要导入到某个子窗口的HTML 属性是用来指定要导入到某个子窗口的 文件的位置，语法如下： 文件的位置，语法如下： 基本语法：
–
<frame src="url" marginwidth="value" marginheight="value"> 在HTML文件中，利用框架<frame>标记中的marginwidth 和marginheight属性可以设置相应子框架的左右和上下 边缘的空白。
语法说明： 语法说明：
–
<!--程序 程序7-9 --> 程序 <html> <head><title>设置框架边距 设置框架边距 </title></head> <frameset cols="30%,*"> <frame src=left.html marginheight=50 marginwidth=50> <frame src=right.html> </frameset> </html>
控制子窗口滚动条
scrolling属性用于控制窗口框架中是否显示滚动 属性用于控制窗口框架中是否显示滚动 使用此属性，可以避免HTML文件因内容过 条，使用此属性，可以避免 文件因内容过 多而无法完全显示。此属性用于<frame>标记 多而无法完全显示。此属性用于 标记 中。 基本语法： 基本语法：
窗口的垂直分割
cols属性可定义一个垂直分割的窗口框架。 基本语法： <frameset cols="宽度 ，宽度 宽度1，宽度2,…,* "> 宽度 <frame src="url"> <frame src="url"> … </frameset>
一个垂直分割的例子
<!--程序 程序7-1--> 程序 <html> <head> <title>采用整数设置窗口的水平分割 采用整数设置窗口的水平分割</title> 采用整数设置窗口的水平分割 </head> <frameset rows="80,120,*"> <frame> <frame> <frame> </frameset> </html>
框架的基本结构
框架的基本结构主要分为框架和框架集两个部分。 它是利用<frame>标记与<frameset>标记来定 义 。 其 中 <frame> 标 记 用 于 定 义 框 架 ， 而 <frameset>标记则用于定义框架集。
框架的基本结构
<html> <head> <title>框架的基本结构 框架的基本结构</title> 框架的基本结构 </head> <frameset …> <frame …> </frame …> </frameset> </html>
调整子窗口的尺寸
在前面的学习中， 在前面的学习中，我们学习了如何运用 <frameset>标记的 标记的rows和cols属性来水平或 标记的 和 属性来水平或 垂直分割窗口。但设置后， 垂直分割窗口。但设置后，各窗口框架的大小并 非固定无法更改，当我们想更改窗口框架大小时， 非固定无法更改，当我们想更改窗口框架大小时， 可以将鼠标指针移到要更改的框架上， 可以将鼠标指针移到要更改的框架上，待指针呈 现双箭头符号时，再用鼠标进行拖拽， 现双箭头符号时，再用鼠标进行拖拽，就可调整 窗口的大小。 窗口的大小。 当然我们不希望用户能随意地改变子窗口的大小， 当然我们不希望用户能随意地改变子窗口的大小， 那么这时我们可以在<frame>标记中，添加 标记中， 那么这时我们可以在 标记中 noresize属性，语法如下： 属性， 属性 语法如下： <frame noresize src="url">
7.2框架的设置
常见的对窗口的分割包括：水平分割、垂直分割 常见的对窗口的分割包括：水平分割、 和嵌套分割。具体采用哪种分割方式， 和嵌套分割。具体采用哪种分割方式，取决于实 际需要，可用<frameset>标记中的 标记中的rows（水 际需要，可用 标记中的 （ 平分割）或cols（垂直分割）属性来进行分割。 平分割） （垂直分割）属性来进行分割。
设置子窗口的边距
网页的边距可以通过“ 来设定， 网页的边距可以通过“margin”来设定，那么框 来设定 架和网页一样也可设置边距， 架和网页一样也可设置边距，可以利用 <frame>标记中的 标记中的marginwidth属性来设置 标记中的 属性来设置 框架左右边缘的宽度； 框架左右边缘的宽度；marginheight属性可以 属性可以 设置框架上下边缘的宽度。 设置框架上下边缘的宽度。 基本语法： 基本语法：