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内嵌框架集。

__EOF__

本文作者：cnhkzyy
本文链接：https://www.cnblogs.com/my_captain/p/7674163.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！