利用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內嵌框架集。