1. Technology

How To Create a Frames Page in Homesite

By

Adobe Homesite+

Adobe Homesite+

Image courtesy Adobe

Frames are a popular way to make navigation easier to maintain on a Web site. Homesite makes it easy to build a framed Web page.

Difficulty: Average
Time Required: 5 minutes

Here's How:

  1. Open Homesite and select "New" from the "File" menu.
  2. Double click on the "Frames wizard".
  3. Create the framed page you would like by removing and adding rows and columns. You can also change the height and width of the frames.
  4. Click on each frame to give them a name and a "Source URL". The source URL can be an existing file or a new file name.
  5. Change any attributes of the frames that you would like.
  6. Click "Finish".
  7. Position your cursor just before the tag.
  8. In the "Frames" menubar, click on "no".
  9. Create a area that indicates that this is a framed site. It is a good idea to include a link to your main page in the noframes area.</li><li>For each frame named in step 4, make sure that the frame exists, by either creating the Web page or editing it.</li><li>Click on "F12" to preview the framed page.</li></ol><h3>Tips:</h3><ol><li>Always include a <a href="http://webdesign.about.com/od/frames/a/aa091406.htm"><noframes></a> area. This is the section of the page that <a href="http://webdesign.about.com/cs/promotion/a/aaframesseo.htm">search engines will see</a>, and it should have information so that they can view it.</li><li>While it's not required, it's a good idea to add in the <a href="http://webdesign.about.com/od/htmltags/p/bltags_html.htm"><html></a> and </html> tags at the beginning and end of the document.</li><li>Frames require that you create additional HTML pages. Learn more about creating HTML frames in my <a href="http://webdesign.about.com/od/beginningframes/a/aa010598.htm">Introduction to HTML Frames</a> article.</li></ol><h3>What You Need</h3><ul><li>Homesite</li></ul><!--/gc--> </div> <div id="coda"> <div id="resources"> <div class="lkbx"><h5>Suggested Reading</h5><ul><li><a href="http://webdesign.about.com/od/homesitehowtos/ht/hthsgraphic.htm" zT="18/1Pp">How to Add an Image with Homesite</a></li><li><a href="http://webdesign.about.com/od/homesitehowtos/ht/hthshyperlink.htm" zT="18/1Pp">How to Add a Link in Homesite</a></li><li><a href="http://webdesign.about.com/od/homesitehowtos/ht/hthssnippet.htm" zT="18/1Pp">How to Create a Homesite Code Snippet</a></li></ul></div><div class="lkbx"><h5>Suggested Reading</h5><ul><li><a href="http://webdesign.about.com/od/homesitehowtos/ht/hthscodesweeper.htm" zT="18/1Pp">How to Use the Homesite CodeSweeper</a></li><li><a href="http://webdesign.about.com/od/homesitehowtos/" zT="18/1Pp">Homesite How Tos</a></li></ul></div> <div id="rel"><div class="h5">Related Articles</div><ul><li><a href="http://webdesign.about.com/od/frontpagehowtos/ht/htfpframes.htm" zT="18/1YL/Zn">How to Create a Framed HTML Page in FrontPage</a></li><li><a href="http://webdesign.about.com/od/golivehowtos/ht/htglframes.htm" zT="18/1YL/Zn">Create a Framed Page in GoLive</a></li><li><a href="http://historymedren.about.com/library/blframed.htm" zT="18/1YL/Zn">About Frames- Medieval History</a></li><li><a href="http://webdesign.about.com/od/frames/ht/htfrmincludehtm.htm" zT="18/1YL/Zn">How to Include HTML in Many Documents Using Frames</a></li><li><a href="http://webdesign.about.com/cs/dreamweaver/ht/htdwframes.htm" zT="18/1YL/Zn">Create a Framed Page in Dreamweaver</a></li></ul></div> </div> </div> </div> <div id="aba"> <script type="text/javascript">zSB(3,2)</script><script>if(z336>0){w('<div id="adB"><p>Advertisement</p>');adunit('','','about.com',ch,gs,300,250,'1','bb',3);w('</div>')}</script><script>if(z155>0){w('<div id="adP"><p>Advertisement</p>');adunit('','','about.com',ch,gs,336,155,'1','ps',4);w('</div>')}</script> <script>if(zp[7].d){zp[7].R=6;Dsp(zp[7],'ip')}</script> <script>if(zp[7].d){ zBIbldr=0; if(z336>0){w('<div id="adB"><p>Advertisement</p>'); adunit('','','about.com',ch,gs,300,251,'1','bibb',6);w('</div>');} } else { zBIbldr=1;}</script> </div> <script>if(zSbL<1)zSbL=3;zSB(2,2);zSbL=0</script> </div> <div class="tr" style="margin-top:8px;position:relative"> <script>zobt1=zobt;zobt='Ads:';zob(false,true);zobt=zobt1</script> </div> <div id="abf"> <div id="browse" class="pane clear"> <div class="h3">Explore Web Design / HTML</div> <div id="bc1"> <div class="h4">Must Reads</div> <ul><li><a href="/od/beforeyoustartawebsite/p/build_website.htm" zT="18/1fG/1">How to Build a Website</a></li><li><a href="/od/htmleditors/a/aa121304.htm" zT="18/1fG/2">HTML Editors and Web Page Editors</a></li><li><a href="/od/beginningcss/a/aa021607.htm" zT="18/1fG/3">What is CSS?</a></li><li><a href="/od/intermediatetutorials/qt/tiphtmltab.htm" zT="18/1fG/4">Tabs in HTML</a></li><li><a href="/od/beginningtutorials/a/aa041700b.htm" zT="18/1fG/5">How to Add a Mailto Link</a></li></ul> <div class="h4">Most Popular</div> <ul><li><a href="http://webdesign.about.com/od/macintoshhtmleditors/tp/free-macintosh-editors.htm" zT="18/yV/O3">Are You Using one of the Top Free HTML Editors...</a></li><li><a href="http://webdesign.about.com/od/windowshtmleditors/tp/free-windows-editors.htm" zT="18/yV/O3">Web Editors Should be Free - Find the Best for...</a></li><li><a href="http://webdesign.about.com/od/beforeyoustartawebsite/p/build_website.htm" zT="18/yV/O3">How to Build a Website in 7 Simple Steps</a></li><li><a href="http://webdesign.about.com/od/beginningcss/a/aa012207.htm" zT="18/yV/O3">Centering with CSS is as Easy As 1, 2, 3</a></li><li><a href="http://webdesign.about.com/library/bl_htmlcodes.htm" zT="18/yV/O3">HTML Codes - Special Characters - ASCII Table</a></li> </ul> </div> <div id="bc2"> <!-- FILE UNUSED --> <div class="h4">By Category</div> <ul id="bcl"><li><a href="/od/beforeyoustartawebsite/" zT='18/1hZ/1'>Before You Start a Website</a></li><li><a href="/od/webdesign/" zT='18/1hZ/2'>Web Design</a></li><li><a href="/od/editors/" zT='18/1hZ/3'>HTML Editors and Software</a></li><li><a href="/od/htmlxhtmltutorials/" zT='18/1hZ/4'>HTML and XHTML</a></li><li><a href="/od/css/" zT='18/1hZ/5'>CSS</a></li><li><a href="/od/javascript/" zT='18/1hZ/6'>Javascript and Ajax</a></li><li><a href="/od/xml/" zT='18/1hZ/7'>XML</a></li><li><a href="/od/testing/" zT='18/1hZ/8'>Testing Your Web Pages</a></li><li><a href="/od/servers/" zT='18/1hZ/9'>Web Server Management</a></li><li><a href="/od/webprogramming/" zT='18/1hZ/10'>Web Programming</a></li><li><a href="/od/strategy/" zT='18/1hZ/11'>Web Strategy</a></li><li><a href="/od/webmarketing/" zT='18/1hZ/12'>Web Marketing</a></li><li><a href="/od/jobs/" zT='18/1hZ/13'>Jobs in Web Design / HTML / Web Development - Professional Web Careers</a></li><li><a href="/od/webdesignhtmlatoz/" zT='18/1hZ/14'>About.com: Web Design / HTML A to Z</a></li><li><a href="/od/Blog/" zT='18/1hZ/15'>Blog</a></li> </ul> </div> </div> <script>splitList(gEI('bcl'));</script> <script>zau(256,'341px','230px','fp','http://z.about.com/6/ip/284/29.htm?s=webdesign','','');</script> <script type="text/javascript">if(zBIbldr==1) { w('<div style="width: 100%; text-align: center;"><div id="adL">'); if(z728>0){adunit('','',uy,ch,gs,728,91,'1','lb',6);} w('</div></div>');}</script><div class="ma mar"><div class="lg"><a href="http://www.about.com/" zT="18/1Yb/Zv"><img src="http://0.tqn.com/f/lg/a154f.png" alt="About.com"></a></div><div class="h2"><a href="/" zT="18/1Yc/Zx" title="Web Design / HTML">Web Design / HTML</a></div></div><ol class="ct"><li class="h"><a href="http://www.about.com/" zT="18/1Yd/Zz">About.com</a></li><li><a href="http://www.about.com/compute/" zT="18/1Yd/Zz">Technology</a></li><li><a href="/" zT="18/1Yd/Zz">Web Design / HTML</a></li><li><a href="http://webdesign.about.com/od/editors/" zT="18/1Yd/Zz">HTML Editors and Software</a></li><li><a href="http://webdesign.about.com/od/htmleditors/" zT="18/1Yd/Zz">HTML Editors - Web Page Authoring Tools</a></li><li><a href="http://webdesign.about.com/od/windowshtmleditors/" zT="18/1Yd/Zz">Windows HTML Editors</a></li><li><a href="http://webdesign.about.com/od/homesite/" zT="18/1Yd/Zz">Homesite</a></li><li><a href="http://webdesign.about.com/od/homesitehowtos/" zT="18/1Yd/Zz">Homesite How Tos</a></li><li>Create a Frames Page in Homesite</li></ol></div></div><div id="abi" class="hl"><div id="lftr"><ul id="si"><li class="f"><a href="http://www.advertiseonabout.com/" zT="18/1YX/Zr" rel="nofollow">Advertise on About.com</a></li><li><a href="http://press.about.com/our-story/" zT="18/1YX/Zr" rel="nofollow">Our Story</a></li><li><a href="http://press.about.com/" zT="18/1YX/Zr" rel="nofollow">News</a></li><li><a href="http://spiderbites.about.com/sitemap.htm" zT="18/1YX/Zr">SiteMap</a></li><li><a href="http://azlist.about.com/a.htm" zT="18/1]]">All Topics</a></li><li><a href="http://www.about.com/gi/pages/printrequests.html" zT="18/1YX/Zr" rel="nofollow">Reprints</a></li><li><a href="http://www.about.com/gi/pages/hc.htm" zT="18/1YX/Zr" rel="nofollow">Help</a></li></ul><ul id="li"><li class="f"><a href="http://experts.about.com/" zT="18/1YX/Zr" rel="nofollow">Write for About</a></li><li><a href="http://jobs.about.com/" zT="18/1YX/Zr" rel="nofollow">Careers at About</a></li><li><a href="http://www.about.com/gi/pages/uagree.htm" zT="18/1YX/Zr" rel="nofollow">User Agreement</a></li><li><a href="http://www.about.com/gi/pages/ethics.htm" zT="18/1YX/Zr" rel="nofollow">Ethics Policy</a></li><li><a href="http://www.about.com/gi/pages/patent.htm" zT="18/1YX/Zr" rel="nofollow">Patent Info.</a></li><li><a href="http://www.about.com/gi/pages/mprivacy.htm" zT="18/1YX/Zr" rel="nofollow">Privacy Policy</a></li></ul><ul style="clear:left;float:left;position:relative;z-index:5;"><li class="f"><a href="http://www.about.com/gi/pages/mprivacy.htm#adchoices" zT="18/1YX/Zr" rel="nofollow">Your Ad Choices and Cookie Policy</a></li></ul></div><div id="di"><p>&copy;2014 About.com. All rights reserved.</p></div></div><script>check_modal();zCi();validateForms();splitLists();</script> </div> <script>if(this.zKW&&gEI('sv'))gEI('sv').value=zE(zE(zKW,1),1).replace(new RegExp('\\+','g'),' '); if(!this.zOfs&&gEI('oF')){if(document.getElementsByClassName('tr')[0]){clone=gEI('oF').cloneNode(true);clone.id="labels";document.getElementsByClassName('tr')[0].appendChild(clone)}}; zPxA[zPxC]=new Image();zPxA[zPxC++].src="http://b.scorecardresearch.com/p?c1=2&c2=6036459&c7=http%3a%2f%2fwebdesign%2eabout%2ecom%2fod%2fhomesitehowtos%2fht%2fhthsframes%2ehtm&c8=How%20To%20Create%20a%20Frames%20Page%20in%20Homesite&c9=&cv=2.0&cj=1";adclose()</script> <noscript><img src="http://b.scorecardresearch.com/p?c1=2&c2=6036459&c7=http%3a%2f%2fwebdesign%2eabout%2ecom%2fod%2fhomesitehowtos%2fht%2fhthsframes%2ehtm&c8=How%20To%20Create%20a%20Frames%20Page%20in%20Homesite&c9=&cv=2.0&cj=1" class="hide"/></noscript> <style type="text/css"> .pinterest-share { float: right; padding-left: 5px; padding-bottom: 5px; } .imgw .pinterest-share { margin-top: 0 !important; margin-bottom: 0 !important; } </style> <script> (function () { var uclick = ''; var callback = function () { var m = new Date(), n = m.getTime() - zDL.getTime(); zPxA[zPxC] = new Image(); zPxA[zPxC++].src = 'http://clk.about.com/?zi=' + uclick + '&zTi=1&sdn=' + gs + '&cdn=' + ch + '&tm=' + Math.round(n/1000) + '&tt=' + zTt + '&bt' + zBT + '&bts=' + zBTr + '&zu=' + escape(location.href); window.dataLayer.push({ 'event': 'analyticsSocial', 'socialNetwork': 'Pinterest', 'socialAction': 'Share', 'socialTarget': location.href }); window.dataLayer.push({ 'event': 'analyticsEvent', 'eventCategory': 'Uclick', 'eventAction': uclick, 'eventLabel': 'Share|Pinterest' }); }; function getElementsByClassName(k,g){var b=[];if(g.getElementsByClassName){b=Array.prototype.slice.call(g.getElementsByClassName(k))}else{var f=new RegExp("(^| )"+k+"( |$)");var e=g.getElementsByTagName("*");for(var d=0,c=e.length;d<c;d++){if(f.test(e[d].className)){b.push(e[d])}}}return b} function gEI(b,c,e){e=document;e=e.getElementById?e.getElementById(b):e.all?e.all[b]:e.layers[b];!e&&c&&(e=eval("document."+(c?c+".":"")+b));return e} function addEventSimple(c,a,b){if(c.addEventListener){c.addEventListener(a,b,false)}else{if(c.attachEvent){c.attachEvent("on"+a,b)}}} addEventSimple(window, 'load', function() { var buttons = getElementsByClassName('pinterest-share', gEI('abc')) || null, link, i, length; if (buttons && buttons.length) { for (i = 0, length = buttons.length; i < length; i++) { link = buttons[i].getElementsByTagName('a')[0] || null; if (link) { addEventSimple(link, 'click', function (e) { callback(); if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } }, false); } } } }, false); }()); </script> <!-- start atlas toolbar --> <script> var toolbarManager = toolbarManager || (function () { var user = window.zc( 4, "ARMu" ) || null, site = user ? (user.split( "@" )[ 0 ] ) : null, logOut; logOut = function () { var toolbar = document.getElementById('expert-toolbar'); window.zc( 5, "ARMu", "", 0, ""); window.zc( 5, "ARMr", "", 0, ""); window.zc( 5, "ARMs", "", 0, ""); toolbar.parentNode.removeChild(toolbar); document.getElementsByTagName('body')[0].style.paddingTop = "0"; }; if (!site || site != window.gs) { return false; } window.w('<style type="text/css">body{padding-top: 44px;}#expert-toolbar {position: fixed;top: 0;left: 0;width: 100%;z-index: 9999999;}</style>'); window.w('<link rel="stylesheet" type="text/css" href="/z/tls/tb/css/toolbar.css" /><script src="http://code.angularjs.org/1.2.10/angular.min.js"><\/script><script type="text/javascript" src="/z/tls/tb/abt-cms-toolbar.min.js"><\/script><div id="expert-toolbar" ng-app="AtlasToolbarApp"><atlas-toolbar on-close-click="\'toolbarManager.logOut\'"></atlas-toolbar></div>'); return { logOut: logOut } }()); </script> <div style="clear:both"></div> <!-- end atlas toolbar --> </body></html>