HTML Frames Templates

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="html frames templates, free, frames, forms"> <meta name="Description" content="Download these free HTML frames templates so you can quickly make your own frames-based website."> <link rel="canonical" href="https://www.quackit.com/html/templates/frames/"> <title>HTML Frames Templates</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">HTML Frames Templates</h1> <div class="ad ad-top">  <div data-fuse="23059883638"></div> </div> <p>You can use these HTML frames templates as a basis for your own frames-based website. All you need to do is download the template/s, then add your content. You can also modify as you like.</p> <div class="ad">  <div data-fuse="23059883644"></div> </div> <h2>HTML5 Compliant Frames</h2> <p>The following templates are HTML5 compliant and use CSS to achieve a frames-based layout, without using the (non-HTML5 compliant) <a href="/html/html_4/tags/html_frameset_tag.cfm"><code><frameset></code></a> and <a href="/html/html_4/tags/html_frame_tag.cfm"><code><frame></code></a> tags. If you really must use those tags, see below.</p> <p>All source code is on a single page for your convenience. However, if you choose to deploy a template across many pages, it's recommended that you move any style sheets (i.e. anything between the <a href="/html/tags/html_style_tag.cfm"><code><style></code></a> tags) to an <a href="/css/external_style_sheets.cfm">external style sheet</a>.</p> <div class="template-list"> <div class="template-item"> <h3>2 Columns, Left Menu</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/frames_2_column_left_menu.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/frames_2_column_left_menu.png" alt="2 column frames layout — left menu template"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/frames_2_column_left_menu.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/frames_2_column_left_menu.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>2 Columns, Right Menu</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/frames_2_column_right_menu.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/frames_2_column_right_menu.png" alt="2 column frames layout — right menu template"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/frames_2_column_right_menu.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/frames_2_column_right_menu.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>2 Rows, A</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_a.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/2_rows_a.png" alt="2 Rows, 2 columns, A"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/2_rows_a.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_a.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>2 Rows, B</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_b.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/2_rows_b.png" alt="2 Rows, 2 columns, A"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/2_rows_b.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_b.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>2 Rows, 2 Columns, A</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_a.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/2_rows_2_columns_a.png" alt="2 Rows, 2 columns, A"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/2_rows_2_columns_a.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_a.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>2 Rows, 2 Columns, B</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_b.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/2_rows_2_columns_b.png" alt="2 Rows, 2 columns, B"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/2_rows_2_columns_b.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_b.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>2 Rows, 2 Columns, C</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_c.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/2_rows_2_columns_c.png" alt="2 Rows, 2 columns, C"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/2_rows_2_columns_c.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_c.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>2 Rows, 2 Columns, D</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_d.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/2_rows_2_columns_d.png" alt="2 Rows, 2 columns, D"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/2_rows_2_columns_d.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_d.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>2 Rows, 2 Columns, E</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_e.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/2_rows_2_columns_e.png" alt="2 Rows, 2 columns, E"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/2_rows_2_columns_e.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_e.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>2 Rows, 2 Columns, F</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_f.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/2_rows_2_columns_f.png" alt="2 Rows, 2 columns, F"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/2_rows_2_columns_f.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_f.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>2 Rows, 2 Columns, G</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_g.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/2_rows_2_columns_g.png" alt="2 Rows, 2 columns, G"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/2_rows_2_columns_g.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_g.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>2 Rows, 2 Columns, H</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_h.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/2_rows_2_columns_h.png" alt="2 Rows, 2 columns, H"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/2_rows_2_columns_h.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/2_rows_2_columns_h.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>3 Rows, 2 Columns, A</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/3_rows_2_columns_a.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/3_rows_2_columns_a.png" alt="3 Rows, 2 columns, A"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/3_rows_2_columns_a.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/3_rows_2_columns_a.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>3 Rows, 2 Columns, B</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/3_rows_2_columns_b.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/3_rows_2_columns_b.png" alt="3 Rows, 2 columns, B"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/3_rows_2_columns_b.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/3_rows_2_columns_b.cfm" target="_blank">Preview</a></p> </div> <div class="template-item"> <h3>3 Rows, 3 Columns</h3> <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/3_rows_3_columns_a.cfm" target="_blank"><img src="/pix/html/templates/frames_templates/3_rows_3_columns_a.png" alt="3 Rows, 3 columns"> </a> <p><a target="template_download" href="/html/templates/download/view_source.cfm?template=../frames/css_frames/3_rows_3_columns_a.cfm">View Source</a> | <a href="/html/templates/download/preview.cfm?template=../frames/css_frames/3_rows_3_columns_a.cfm" target="_blank">Preview</a></p> </div> </div> <h2>Using the <a href="/html/html_4/tags/html_frameset_tag.cfm"><code><frameset></code></a> Element</h2> <p>Prior to HTML5, frames were achieved using the <a href="/html/html_4/tags/html_frameset_tag.cfm"><code><frameset></code></a> and <a href="/html/html_4/tags/html_frame_tag.cfm"><code><frame></code></a> tags. This method involves having a different HTML file for each frame, plus one to bring them all together. Therefore, if you have two frames, you will need three files. </p> <p>Each template has been zipped for your convenience. Each .zip file contains all files for the template. Once downloaded, you need to unzip the files into your local directory.</p> <p>You can also <a target="template_download" href="/html/templates/frames/frames_example_all.zip">download all templates in a single .zip file</a>.</p> <div class="tip"> <p>These tags are obsolete from HTML5, so unless you have a specific reason to use them, you're better off using the CSS-based frames listed above.</p> </div> <div class="template-list"> <div class="template-item"> <b>Example 1</b> (2 Columns): <img src="/pix/html/templates/frames_templates/frames_2_column_left_menu.png" alt="2 column frames layout — left menu template"> <p><a href="/html/templates/frames/frames_example_1.html" target="_blank">View Example</a><br /> <a target="template_download" href="/html/templates/frames/frames_example_1.zip">Download Template (.zip File)</a><br />OR<br /> <a href="JavaScript:window.open('/html/examples/frames/frames_example_1_code.cfm');">Copy/Paste the Code</a> </p> </div> <div class="template-item"> <b>Example 2</b> (2 Rows): <img src="/pix/html/templates/frames_templates/2_rows_a.png" alt="2 Rows, 2 columns, A"> <p><a href="/html/templates/frames/frames_example_2.html" target="_blank">View Example</a><br /> <a target="template_download" href="/html/templates/frames/frames_example_2.zip">Download Template (.zip File)</a><br />OR<br /> <a href="JavaScript:window.open('/html/examples/frames/frames_example_2_code.cfm');">Copy/Paste the Code</a> </p> </div> <div class="template-item"> <b>Example 3</b> (2 Columns, 2 Rows - A): <img src="/pix/html/templates/frames_templates/2_rows_2_columns_a.png" alt="2 Rows, 2 columns, A"> <p><a href="/html/templates/frames/frames_example_3.html" target="_blank">View Example</a><br /> <a target="template_download" href="/html/templates/frames/frames_example_3.zip">Download Template (.zip File)</a><br />OR<br /> <a href="JavaScript:window.open('/html/examples/frames/frames_example_3_code.cfm');">Copy/Paste the Code</a> </p> </div> <div class="template-item"> <b>Example 4</b> (2 Columns, 2 Rows - B): <img src="/pix/html/templates/frames_templates/2_rows_2_columns_b.png" alt="2 Rows, 2 columns, B"> <p><a href="/html/templates/frames/frames_example_4.html" target="_blank">View Example</a><br /> <a target="template_download" href="/html/templates/frames/frames_example_4.zip">Download Template (.zip File)</a><br />OR<br /> <a href="JavaScript:window.open('/html/examples/frames/frames_example_4_code.cfm');">Copy/Paste the Code</a> </p> </div> <div class="template-item"> <b>Example 5</b> (2 Columns, 3 Rows): <img src="/pix/html/templates/frames_templates/3_rows_2_columns_a.png" alt="3 Rows, 2 columns, A"> <p><a href="/html/templates/frames/frames_example_5.html" target="_blank">View Example</a><br /> <a target="template_download" href="/html/templates/frames/frames_example_5.zip">Download Template (.zip File)</a><br />OR<br /> <a href="JavaScript:window.open('/html/examples/frames/frames_example_5_code.cfm');">Copy/Paste the Code</a> </p> </div> <div class="template-item"> <b>Example 6</b> (3 Columns, 3 Rows): <img src="/pix/html/templates/frames_templates/3_rows_3_columns_a.png" alt="3 Rows, 3 columns"> <p><a href="/html/templates/frames/frames_example_6.html" target="_blank">View Example</a><br /> <a target="template_download" href="/html/templates/frames/frames_example_6.zip">Download Template (.zip File)</a><br />OR<br /> <a href="JavaScript:window.open('/html/examples/frames/frames_example_6_code.cfm');">Copy/Paste the Code</a> </p> </div> </div> </article> <div class="sidebar"> <div class="relatedLinks"> <h4>Related</h4> <ul> <li><a href="/html/tutorial/html_frames.cfm" title="From the HTML tutorial">Frames Tutorial</a></li> <li><a href="/html/disadvantages_of_html_frames.cfm" title="">Disadvantages of Frames</a></li> <li><a href="/html/tags/html_frameset_tag.cfm" title="">About the 'frameset' tag</a></li> <li><a href="/html/tags/html_iframe_tag.cfm" title="">Inline Frames ('iframe')</a></li> <li><a href="/html/tags/html_noframes_tag.cfm" title="Always use this tag for browsers that can't display frames">About the 'noframes' tag</a></li> </ul> </div> <nav> <ul> <li> <h3><a href="/html/templates/">HTML Templates</a></h3> <ul> <li><a href="/html/templates/css_flexbox_templates.cfm">Flexbox Templates</a></li> <li><a href="/html/templates/css_grid_templates.cfm">CSS Grid Templates</a></li> <li><a href="/html/templates/bootstrap_templates.cfm">Bootstrap Templates</a></li> <li><a href="/html/templates/layout_templates.cfm">Layout Templates</a></li> <li><a href="/html/templates/simple_website_templates.cfm">Simple Templates</a></li> <li><a href="/html/templates/business_website_templates.cfm">Business Templates</a></li> <li><a href="/html/templates/corporate_website_templates.cfm">Corporate Templates</a></li> <li><a href="/html/templates/portal_website_templates.cfm">Portal Templates</a></li> <li><a href="/html/templates/frames/">Frames Templates</a></li> </ul> </li> <li> <h3><a href="/html/">HTML Reference</a></h3> <ul> <li><a href="/html/tags/" title="Alphabetical list of all HTML tags">HTML Tags</a></li> <li><a href="/html/codes/" title="">HTML Codes</a></li> <li><a href="/html/templates/" title="">HTML Templates</a></li> <li><a href="/html/html_editors/">HTML Editors</a></li> <li><a href="/html/tutorial/" title="">HTML Tutorial</a></li> <li><a href="/create-a-website/" title="">Create a Website</a></li> <li><a href="/character_sets/">Character Set Reference</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059883641"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059511718"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

HTML Frames Templates