html5 frameset5内嵌框架集
利用html5 frameset内嵌框架简单做一个网页，网页的布局大体如下：
我们可以将其分为四个部分：
第一部分：top图片栏
第二部分：left链接栏
第三部分：right内容栏
第四部分：网页整体
网页的要求是水平框架的分割比例是30%:70%，垂直框架的分割比例是20%:80%。
我们的思路是先写好单个的模块，包括：
| 模块 | html文件名 |
| top图片栏 | top.html |
| left链接栏 | left.html |
| 翻译服务的链接内容 | page1.html |
| 网站建设的链接内容 | page2.html |
| 服务流程的链接内容 | page3.html |
| 整体 | index.html |
一、top图片栏
<!DOCTYPE HTML>
<html>
<head>
<title>top</title>
<body>
<img src="u=1536784405,2510066979&fm=27&gp=0.jpg" alt="iotek" />
</body>
</head>
</html>
二、left链接栏
<!DOCTYPE HTML>
<html>
<head>
<title>left</title>
</head>
<body bgcolor="yellow">
<!-- 链接必须指定在右侧中打开 -->
<h3><a href="page1.html" target="rightFrame">翻译服务</a></h3>
<h3><a href="page2.html" target="rightFrame">网站建设</a></h3>
<h3><a href="page3.html" target="rightFrame">服务流程</a></h3>
</body>
</html>
三、翻译服务的链接内容
<!DOCTYPE HTML>
<html>
<head>
<title>page1</title>
</head>
<body>
<h4>为您提供精准的翻译服务</h4>
<p>您是否要将某些文档翻译成标准的英语版本？您是否担心译文会不符合西方语系的语言习惯？您是否遇到语言障碍而放缓向境外拓展业务的步伐？您是否受到时而需要处理外文资料的困扰？</p>
<p>让我们来帮您解决这些问题。我们这里提供的服务<a href="https://baike.baidu.com/item/%E5%BF%AB%E6%8D%B7/8405825?fr=aladdin" target="_self">快捷</a>、高效、准确，而且<a href="https://baike.baidu.com/item/%E4%BB%98%E8%B4%B9/3828383?fr=aladdin" target="_self">付费</a>方便。您无需走出家门，就可和我们一起走完服务的全过程，甚至包括付费。</p>
<p>我们有来自中国和新加坡的翻译专家，他们具有得天独厚的语言基础和深厚的文化背景，他们合作的结晶一定是非常贴切而精美的译文作品。我们会分配以您的目标语种为 母语 的翻译员为您翻译，同时他们也 精通 您的源语语种。</p>
<p>您若有此需求或任何疑问，请浏览我们的网站，也可随时同我们联系，您会得到耐心的解答。我们的联系方式是：<a href="demo@demo.com" target="_blank">demo@demo.com</a>。</p>
</body>
</html>
四、网站建设的链接内容
<!DOCTYPE HTML>
<html>
<head>
<title>page2</title>
</head>
<h4>网站建设</h4>
<p>一幅美观而高效的页面、一个强而有力的标志是其所有者的形象，也是他向外展示自己而给人留下深刻印象的第一个机会。它所具有的美应该能抓住浏览者的眼睛，它所包含的内容应该能锁住他们的心。</p>
<p>这需要一支熟练而具有市场观念的团队来实现。这就是您选择 “World-Trans” 的原因，让我们来帮您实现上述目的。我们的团队会把他们丰富的经验、知识及才干注入到您的网站中。</p>
<p>当然，如果您需要，由于我们得天独厚的业务专长，我们也可以将您的网站无缝地制作成英文版/中文版。</p>
<p>敬请垂询：<a href="demo@demo.com" target=_blank">demo@demo.com</a></p>
</body>
</html>
五、服务流程的链接内容
<!DOCTYPE html>
<html>
<head>
<title>page2</title>
</head>
<body>
<h4>服务流程</h4>
<p>首先烦请您将需求用<a href="http://www.iotek.com.cn/" target="_blank">Email</a>的方式发给我们，我们承诺绝不泄露其内容。</p>
<p>请将您的需求上传至：<a href="demo@demo.com" target="_blank">demo@demo.com</a></p>
<p>我们会回复您服务的价格，同时会给您一个业务号。</p>
<p>您若接受，便可在我们列出的<a href="https://baike.baidu.com/item/%E4%BB%98%E6%AC%BE%E6%96%B9%E5%BC%8F/9180222?fr=aladdin" target="_self">付费方式</a>中任选一种付费，之后发E-mail <a href="https://baike.baidu.com/item/%E9%80%9A%E7%9F%A5/5957034?fr=aladdin" target="_self">通知我们</a>，请一并告知我们分配给您的业务号和银行转账的业务号。款一到，我们立即通知您翻译工作已在进行中，并同您保持联络。</p>
</body>
</html>
六、整体：利用frameset框架
<!DOCTYPE HTML>
<html>
<head>
<title>海同科技信息技术有限公司</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="chenhao" />
<meta name="website" content="http://www.iotek.com.cn/" />
<meta name="description" content="海同科技是一家集猎头、IT培训和软件外包的综合性公司" />
<meta name="keyword" content="猎头，IT培训，外包" />
</head>
<frameset rows="30%, *">
<frame src="top.html" name="topFrame" />
<frameset cols="20%, *">
<frame src="left.html" name="leftFrame" noresize="noresize" />
<frame src="page1.html" name="rightFrame" />
</frameset>
<noframes>
<body>
此浏览器不支持框架！
</body>
</noframes>
</frameset>
</html>
七、注意
1. left链接栏中的链接target需要自定义为右侧框架的名称。即“rightFrame”，否则链接将在left链接栏内打开。
2. 我们在<frame src...>中设置noresize="noresize"，否则框架分割比例是可以手动移动的。
3. 如果浏览器过旧，不支持frameset框架集，那么我们可以在<frameset>中使用<noframes>标签，在<noframes>标签下使用<body>标签，在<body>标签中给出提示。这是<frameset>中唯一可以使用<body>标签的地方。
4. 本文中所有url均为杜撰，而非真实的url。
5. 本文参考视频fameset内嵌框架集。
html5 frameset5内嵌框架集的更多相关文章
- html5-5 HTML5表单元素和内嵌框架
html5-5 HTML5表单元素和内嵌框架 一.总结 一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...
- 浅谈html5网页内嵌视频
更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...
- html内嵌框架
html内嵌框架 <iframe>标签会创建包含另外一个html文件的内联框架(即行内框架),src属性来定义另一个html文件的引用地址,frameborder属性定义边框,scroll ...
- form表单以及内嵌框架标签
今关于今天所学习的东西又复杂又简单,上午学习了form表单,也是挺简单的:搭配table表格使用也是非常熟练. 下午讲了讲给网页内嵌框架标签以及在内嵌框架标签中添加其他的网页:还有在内嵌框架标签中添加 ...
- 框架和内嵌框架--->frameset 和 iframe 的文档对象
框架和内嵌框架分别用 HTMLFrameElemnt 和 HTMLIFrameElement 表示,它们在 DOM2 中有一个新属性----->contentDocument,是一个指针,表示框 ...
- html的<a>标签，表单，内嵌框架
一. <a>标签 0. 用图片当链接,就是把图片当成链接文字即可 <a href="http://www.baidu.com/" title="跳 ...
- Selenium入门7 内嵌框架iframe
如果网页内嵌iframe,那么iframe里的元素是无法直接定位的,需要使用switch_to.frame进入frame操作: 之后需要再操作页面上非嵌入在iframe里的元素,需要使用switch_ ...
- 【转】浅谈html5网页内嵌视频
转自 http://www.pchou.info/web/2014/01/30/52ea01e13a7f1.html
- HTML基础篇之内嵌框架和表单
内嵌框架: <iframe src="http://www.baidu.com" name="d"></iframe> 网页会显示一个这 ...
随机推荐
- 洛谷 P1462 通往奥格瑞玛的道路
洛谷 题意:要求在限定油耗内,求最小花费的最大值. 求最小值最大很容易想到二分答案.所以我们往二分的方向去想. 我们二分一个费用,然后要保证到终点时满足限定油耗,所以跑最短路. 不过松弛条件要改一下: ...
- win7安装laravel
使用Packagist 镜像 建立一个composer.json文件,内容如下: { "name": "laravel/laravel", "desc ...
- centos6.9下php7安装zip扩展
cd /usr/local/src wget http://pecl.php.net/get/zip-1.13.5.tgz tar -zxvf zip-1.13.5.tgz cd zip-1.13.5 ...
- make编译二
GNU 的 make 很强大, 它可以自动推导文件以及文件依赖关系后面的命令,于是我们就没必要去在每一个[.o]文件后都写上类似的命令,因为,我们的 make 会自动识别,并自己推导命令 只要 mak ...
- app开发多少钱一个
经常听网友问app开发要多少钱,这个问题太宽泛了,需要根据具体的需求才好定价,也就是要先做好需求分析(前面我们写了一个app开发需求文档模板),不同的功能不同的价位,就像我们买电脑,cpu多少钱.主板 ...
- 脉冲神经网络及有监督学习算法Tempotron
接下来一段时间开启脉冲神经网络模型的探索之旅.脉冲神经网络有更强的生物学基础,尽可能地模拟生物神经元之间的连接和通信方式.其潜在能力较强,值得踏进一步探索. 构建脉冲神经网络模型,至少需要考虑三点:1 ...
- 使用git工具上传项目到github步骤
这里记录一下上传项目到github的步骤.使用的工具是Git bash. 1.登陆github,没有账户就注册一个,新建一个Repository(仓库). 2.绑定用户. 因为Git是分布式版本控制系 ...
- Python之模块和包(Day21)
一.Python模块 Python模块(module),是一个Python文件,以.py结尾,包含了Python对象定义和Python语句. 模块让你能够有逻辑的组织你的Python代码段 把相关的代 ...
- 【转】Python爬虫(1)_基本原理
一 爬虫是什么 #如果我们把互联网比作一张大的蜘蛛网,数据便是存放于蜘蛛网的各个节点,而爬虫就是一只小蜘蛛,沿着网络抓取自己的猎物/数据 #爬虫指的是:向网站发起请求,获取资源后分析并提取有用数据的程 ...
- Python基础（6）_函数
一 为何要有函数? 不加区分地将所有功能的代码垒到一起,问题是: 代码可读性差 代码冗余 代码可扩展差 如何解决? 函数即工具,事先准备工具的过程是定义函数,拿来就用指的就是函数调用 结论:函数使用必 ...