`
zendj
  • 浏览: 116457 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

通过 frameset 标签创建网页框架

阅读更多

   网页的框架可以生成独立变化和滚动的窗口,从而能将一张网页分割为若干个子窗口,每一个窗口可分别载入不同的 html 文件,而且每个窗口又可以相互沟通。讲到这里,大家是不是已经迫不及待的想要掌握这个技巧了?现在让我们一起从基本语法开始学起吧!
一、 基本结构
html使用<Frameset>、<Frame>和<noFrames>标签来定义框架。下面我们就来了解一下这三个标签的作用和相应的属性。
1、 <Frameset> 标签
该标签是框架设计标签,属于双标签,首尾标签之间的内容就是使用到框架的 html 主体部分,以该标签代替的 <body> 标签,也就是说在使用了 <frameset> 标签的框架html文档中再不能出现<body>标签,否则会导致浏览器忽略所有的框架定义而只显示<body>和</body>之间的内容了。
<Frameset> 标签作用是将页面分割为若干个子窗口,子窗口的数目取决于嵌套在该标签中 <Frame> 标签的数目。 <Frameset>标签有两个属性,分别是 rows(使子窗口垂直排列并决定子窗口的高度) 和 cols(使子窗口水平排列并决定子窗口的宽度),请看下面的实例:
<Frameset rows="值1,值2,……值n">
<Frameset cols="值1,值2,……值n">
实例解析:
(1) 各参数之间以逗号分割,依次表示各个子窗口的高度(宽度)。这两个属性的参数值可以是数字、百分数或符号“*”;
(2) 数字: 表示子窗口高度或宽度所占的像素点数;
(3) 百分数: 表示子窗口高度或宽度占整个浏览器窗口高度或宽度的百分比;
(4) 符号“*”(星号): 当符号*只出现一次。即其他子窗口的大小都有明确的定义时,表示该子窗口的大小将根据浏览器窗口的大小而自动调整。当符号*出现一次以上时,表示按比例分割浏览器窗口的剩余空间。例如: <Frameset cols="40%,2*,*"> 表示将浏览器窗口分割为3列,第一个子窗口在第一列,窗口宽度为整个浏览器窗口宽度的40%;第二个子窗口在第二列,占浏览器窗口剩余空间的2/3,即其宽度为整个浏览器窗口宽度的40%,第三个子窗口占剩余空间的1/3,宽度为整个浏览器窗口宽度的20%。
2、 <frame> 标签: html用该标签来标识子窗口,是嵌套在框架设置标签<Frameset>标签中来使用的单标签。在<Frameset>中定义了多少个子窗口就要有多少个该标签与之匹配,依次定义每个窗口的性质。该标签共有7个属性,除src属性是不可缺省的外,其他属性都是可选的,请看下面的实例:
<frameset cols="*,*">
<frame src="a.htm" name="abc" frameborder="1" bordercolor="#FFCC08" sclling="auto" maginwidth="3" marginwidth="3">
<frame src="b.htm" name="def" frameborder="1" bordercolor="#FFCC08" sclling="auto" maginwidth="3" marginwidth="3">
</frameset>
实例解析:
(1) 上例是利用 cols="*,*" 这一属性把页面平均分成了左右两个子窗口;
(2) src 属性: 用以定义子窗口文件的文件名;
(3) name属性: 用于定义子窗口的名称;
(4) frameborder 属性: 该属性的参数值为1或0。当参数值为1时,表示该子窗口有边框,为0时没有边框,其缺省值为1;
(5) bordercolor属性: 用以设置子窗口的边框颜色,如果在一个以上的<frame>标签中定义了子窗口的边框颜色,则以第一次指定的颜色为标准,在指定边框颜色时,可以使用颜色的RBG代码或直接使用与该颜色想对应的英文单词,bordercolor属性的参数值可以是16种颜色中的任意一种;
(6) sclling属性: 属性的参数值为yes,no或auto之一,参数值为yes时表示该子窗口始终有滚动条,为no时是始终没有滚动条,为auto时表示当文档的内容超出窗口范围时,浏览器自动为该子窗口添加滚动条,该属性的缺省值为auto;
(7) maginwidth和maginheight属性: 这两个属性是用来指定显示内容与窗口边界之间的空白距离大小的,其中maginwidth属性用于确定显示内容与左右边界之间的距离;maginheight用来确定显示内容与上下边界之间的距离,这两个属性的参数值都是数字,分别表示左右边距所占的像素点数。

3 <noframes>标签,使用该标签可以在用户浏览器不支持框架显示时告之用户一些相关信息,以免浏览者对空白窗口画面感觉莫名其妙。<noframes>标签是双标签,首尾标签之间的内容就是告之浏览者的信息,虽然常用的两中浏览器IE和NC都是支持框架显示的。但为了加强文档的适用性,我们最好还是养成使用这个标签的习惯。
4、 框架页面的基本格式
我们已经很全面的了解了框架窗口中所必需的条件,那么现在可以建立一个基本的框架页面了,请看下面的例子:
<html>
<head>
<title>我建立的第一个多窗口页面</title>
</head>
<Frameset Cols="*,*,*"> 把页面平均分成三个水平排列的窗口。
<Frame src="1.htm">
<frame src="2.htm">
<frame src="3.htm">
</Frameset>
<noframes>您的浏览器是不支持框架结构的。</noframes>
</html>
其中,<frameset>标签是可以嵌套使用的,也就是说,可以将其中某一个或几个子窗口划分为若干个更小的窗口。例如:
<html>
<Frameset cols="30%,90,*">
<frame src="1.htm"name=cont>
<frameset rows="*,*">
<frame src="x.gif">
<frame src="y.gif">
</frameset>
<frame src="2.html">
</frameset>
</frameset>
<noframes>您使用的浏览器不支持框架。</noframes>
</html>
二、 各子窗口的交叉链接
为了方便用户进行搜索和浏览,我们经常用到一系列链接组成的索引目录显示在一个子窗口中,而将链接所指向的内容放在另一个子窗口中。显示链接的子窗口通常被称为“源窗口”,显示目标文档的窗口则称之为“目标窗口”。在进行交叉连接时,我们必须先用<frame>标签的name属性定义目标窗口的名称,然后再修改显示在源窗口中的文档。在所有的<a>标签中添加语句target="目标窗口名称"来指定目标文档的显示位置,具体实现方法请看下面的例子:
<html>
<head>
<title>目标窗口测试页</title>
</head>
<frameset cols="*,*">
<frame src="1.htm" marginheight="60">
<frame src="aa.jpg" name="abcd" marginheight="60">
</frameset>
<noframes>您的浏览器不支持框架结构</noframes>
</html>
实例解析:
(1) 上例中我们把页面平均分成了左右两个子窗口,其中左边的子窗口内显示出 1.htm 中的内容,同时我们把 1.htm做为主窗口;
(2) 右边的窗口是目标窗口,在调用其他页面在这里显示之前首先使之显示一幅名为 aa.jpg 的图片,注意我们把这个窗口名设置为 “abcd”,这个窗口名非常重要,此后我们将在 1.htm 中的各链接中均要用到。
下面我们再来看一下 1.htm 这个主窗口中的链接是如何处理的:
<html>
<body>
<center>
<p><a href="田园风光.jpg" target="abcd">田园风光</a><p>
<a href="qiu.jpg" target="abcd">金色秋天</a><p>
<a href="good.htm" target="abcd">开心一刻</a><p>
<a href="pig.gif" target="abcd">夕阳无限</a><p>
</body>
</html>
实例解析:
上例中设置了四个链接,其中有一个网页和三张图片都将在点击相应的链接后显示在目标窗口中,在这里最需要注意的就是 target="abcd" 这个属性,它决定了文件将在窗口名为 "abcd"的窗口中显示。那么如果让这四个链接分别在四个窗口中显示出来的话是不是也很容易了呢?

分享到:
评论

相关推荐

    grpcio-1.47.0-cp310-cp310-linux_armv7l.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    小程序项目源码-美容预约小程序.zip

    小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序小程序项目源码-美容预约小程序v

    MobaXterm 工具

    MobaXterm 工具

    grpcio-1.48.0-cp37-cp37m-linux_armv7l.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    扁平风格PPT可修改ppt下载(11).zip

    扁平风格PPT可修改ppt下载(11).zip

    基于MATLAB实现的msk信号调制解调过程,包括发送端及接收端信号谱分析过程+使用说明文档.rar

    CSDN IT狂飙上传的代码均可运行,功能ok的情况下才上传的,直接替换数据即可使用,小白也能轻松上手 【资源说明】 基于MATLAB实现的msk信号调制解调过程,包括发送端及接收端信号谱分析过程+使用说明文档.rar 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2020b;若运行有误,根据提示GPT修改;若不会,私信博主(问题描述要详细); 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可后台私信博主; 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计: 故障诊断分析: 雷达通信:雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计:SOC估计 目标定位:WSN定位、滤波跟踪、目标定位 生物电信号:肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统:DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载,沟通交流,互相学习,共同进步!

    有色金属行业周报有色金属稳增长目标明确工业及贵金属价格普涨-19页.pdf.zip

    有色金属行业周报有色金属稳增长目标明确工业及贵金属价格普涨-19页.pdf

    Java_Tinker是Android的热修复解决方案库,它支持索引库和资源更新,无需重新安装apk.zip

    Java_Tinker是Android的热修复解决方案库,它支持索引库和资源更新,无需重新安装apk

    基于Python的联邦学习驾驶员状态分类设计源码

    联邦学习驾驶员状态分类设计源码:该项目基于Python开发,包含20个文件,主要使用Python语言。该项目利用VGG19、efficientnet和Resnet50等深度学习模型对驾驶员状态数据集进行分类。近期工作中,项目加入了联邦学习的方法,引入了Shapley值和激励机制,以提高模型的准确性和鲁棒性。

    番薯社区app源码分享

    比较上次: 1. 更换了图文混编显示,使用 setspan+glide 图片加载实现 2. 增加了全局主题选择 (用户自定义颜色只能实现部分对方) 3. 增加了历史记录和历史访问记录 4. 新添选择 帖子列表 样式 (简约风, 卡片风, 交流风, 西北风) 5. 除了查看帖子外,新增了 APP 界面风,用于介绍某一文件或某一 APP。 反正就逐渐向社区迈进,远离记录日常笔记 APP 越来越远了 文件后缀是.tsp 懂的拿着玩玩吧

    下雨天适合吃火锅的文案.docx

    下雨天适合吃火锅的文案.docx

    基于Swift的EasyDropDownMenu筛选排序菜单设计源码

    EasyDropDownMenu筛选排序菜单设计源码:该项目基于Swift开发,包含60个文件,主要使用Swift语言。该设计源码实现了类似美团、糯米、大众点评的筛选排序菜单,适用于iOS应用中的筛选和排序功能,以提供用户更直观、便捷的交互体验。

    520表白代码,你值得拥有

    表白代码是一种利用编程技术,通过特定的代码语言和结构来传达爱意的方式。这些代码可以通过多种方式实现,例如使用微信、网页、弹窗提示、控制台输出、图形绘制等,并且可以根据不同的场景和效果选择合适的表白方式。 以下是一些表白代码的示例和介绍: 微信表白代码:这是一种利用微信平台,通过发送包含特定代码的消息来传达爱意的方式。例如,可以使用一些有趣的代码,如“我想要两颗西柚”(实际上是“1 want to see you”,意为“我想要见你”)或者“Mg+ZnSO4==MgSO4+Zn”(意为“你的镁夺走了我的锌”,暗指“你的美丽夺走了我的心”)。 网页表白代码:通过创建一个包含特定动画、文字或图像的网页,来传达爱意。这种表白方式可以在网页上添加背景音乐、动画效果、表单提交等功能,使得表白更加生动和有趣。 弹窗提示表白代码:在打开某个网页或程序时,弹出一个包含表白信息的提示框。这种表白方式可以在用户不经意间触发,带来惊喜和感动。 控制台输出表白代码:在编程环境(如Python、JavaScript等)的控制台中输出一段表白的话语或图案。

    HTML+CSS制作的个人博客网页.zip

    如标题所述,内有详细说明

    基于MATLAB实现的杨氏双缝,光的干涉实验,基于滑动块改变参数+GUI界面+使用说明文档.zip

    CSDN IT狂飙上传的代码均可运行,功能ok的情况下才上传的,直接替换数据即可使用,小白也能轻松上手 【资源说明】 基于MATLAB实现的杨氏双缝,光的干涉实验,基于滑动块改变参数+GUI界面+使用说明文档.zip 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2020b;若运行有误,根据提示GPT修改;若不会,私信博主(问题描述要详细); 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可后台私信博主; 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计: 故障诊断分析: 雷达通信:雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计:SOC估计 目标定位:WSN定位、滤波跟踪、目标定位 生物电信号:肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统:DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载,沟通交流,互相学习,共同进步!

    grpcio-1.45.0-cp310-cp310-linux_armv7l.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    grpcio-1.47.0-cp39-cp39-linux_armv7l.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    水泥混凝土用粗集料针片状颗粒含量试验记录表.docx

    水泥混凝土用粗集料针片状颗粒含量试验记录表.docx

    dotnet-core-uninstall-1.7.521001 github上下载下来,从github下载不下来时,可以使用这

    dotnet-core-uninstall-1.7.521001 github上下载下来,从github下载不下来时,可以使用这个,微软官方提供的.NET 卸载工具 C:\Windows\system32>dotnet-core-uninstall remove --all --sdk The following items will be removed: To avoid breaking Visual Studio or other problems, read https://aka.ms/dotnet-core-uninstall-docs. Do you want to continue? [y/n] n 我用着效果不好,没卸载掉dontnet

    Java_橙汁的算法.zip

    Java_橙汁的算法

Global site tag (gtag.js) - Google Analytics