Create a Website With Frames

<body> <a href="http://www.create-a-website-with-frames.com/introduction-to-frames.html">Create a Website With Frames</a> <a href="http://www.create-a-website-with-frames.com/content-definition.html">What are frames?</a> <a href="http://www.create-a-website-with-frames.com/content-frameset.html">The Frameset</a> <a href="http://www.create-a-website-with-frames.com/content-source.html">Frames Source Pages</a> <a href="http://www.create-a-website-with-frames.com/content-scrolling.html">Frames Scrolling and Stuff</a> <a href="http://www.create-a-website-with-frames.com/content-noframes.html">Noframes</a> <a href="http://www.create-a-website-with-frames.com/content-redirection.html">Frames Redirection</a> <a href="http://www.create-a-website-with-frames.com/content-kit.html">The Frames Kit</a> <a href="http://www.create-a-website-with-frames.com/content-resources.html">Other Frames Resources</a> <a href="http://www.create-a-website-with-frames.com/content-contact.html">Contact Questions on How to Create a Website With Frames</a> <a href="http://www.create-a-website-with-frames.com/">Create a Website With Frames</a> <a href="http://www.create-a-website-with-frames.com/definition.html">What are frames?</a> <a href="http://www.create-a-website-with-frames.com/frameset.html">Frameset Tag</a> <a href="http://www.create-a-website-with-frames.com/kit.html">Frames Kit</a> <a href="http://www.create-a-website-with-frames.com/noframes.html">Noframes Tag</a> <a href="http://www.create-a-website-with-frames.com/redirection.html">Frames and Redirection</a> <a href="http://www.create-a-website-with-frames.com/resources.html">Other Frames Resources</a> <a href="http://www.create-a-website-with-frames.com/scrolling.html">Frames Scrolling and other Attributes</a> <a href="http://www.create-a-website-with-frames.com/source.html">Frames and Source Pages</a> <a href="http://www.create-a-website-with-frames.com/contact.html">Contact Questions on How to Create a Website With Frames</a> <h1>Create a Website with Frames</h1> <p>Websites that use frames are usually built by the <strong>'lone wolves'</strong> of the internet.</p> <p>They are supposedly frowned upon by the experts, though I'm not really sure who those experts are.</p> <p><img src="images/p0325579.jpg" width="300" height="200" align="right" border="0" alt="Create a website with frames">Maybe they are the people of the W3C. I've never seen one, but I've seen their work.</p> <p>Visit their site some time and you'll find manuals and docs filled with a lot of <strong>gobble d' gook</strong> that only they can understand.</p> <p>The W3C with all of their good intentions has never been able to convince browser developers to adhere to standards. They probably never will. Maybe they don't understand <strong>gobble d' gook</strong> either.</p> <p>So, learn to live with the inconsistencies in browser performance.</p> <p>Look at this site with an IE browser. Then look at it with a Mozilla browser and you'll see slight differences. <strong>Live with it!</strong></p> <p>If you want to create a website using frames, you must resign yourself to the extra work that is involved to do it properly.</p> <p>If you want your web pages to be found on the search engines, then be prepared to follow my instructions.</p> <p>If this is your first website, you should spend some time learning to build static HTML pages before you attempt this tutorial. You probably won't understand anything that is presented if you don't have a knowledge of HTML.</p> <p>I'm not a designer. I'm not an artist. Some of you are. Those who possess those gifts will be able to take the simple code that I give them and turn it into a masterpiece. Others like myself without the gifts will be able to create a serviceable website.</p> <p>I recommend that you read through this entire tutorial before you start working on your frames website. Do not type a line of code until you understand <strong>redirection</strong> and its purpose.</p> <h1>The Frameset</h1> <p>The basic code for a web page built with frames is shown below. Beside it is the code for a basic HTML page.</p><br> <div align="center"> <table summary="2 basic frames layouts" width="400" cellpadding="5" cellspacing="0" style="border: solid #afafaf 1px"> <tr><th style="border-right: solid #afafaf 1px;border-bottom: solid #afafaf 1px">Frames Page</th><th style="border-bottom: solid #afafaf 1px">HTML Page</th></tr> <tr valign="top"> <td align="left" style="border-right: solid #afafaf 1px"><p><code><html><br> <head></head><br> <frameset><br> <br> </frameset><br> </html> </code></p></td> <td align="left"><p><code><html><br> <head></head><br> <body><br> <br> </body><br> </html> </code></p></td> </tr></table> </div> <br> <p>Notice that when building web pages with frames the <strong>body tag</strong> is replaced with the <b>frameset tag</b>.</p> <p>For W3C compliance you should also replace the HTML doctype tag with a frameset doctype similar to the one shown below:<br> <code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"></code> <p>This doctype should only be used on frameset pages. Content source pages for the website will retain the normal HTML doctype tag.</p> <h2>Defining a Frameset</h2> <p>You need to specify the number of frames, their orientation and the size of each frame window. <h3>Orientation</h3> <p>The orientation of your frameset can be either horizontal, specified with the <b>rows</b> attribute or vertical, specified with the <b>cols</b> attribute.</p> <div align="center"> <table summary="2 layouts" width="550" cellpadding="5" cellspacing="0" style="border: solid #afafaf 1px"> <tr><th>Two Equal Rows</th><th>Two Equal Columns</th></tr> <tr valign="top"> <td align="left"> <p><code><html><br> <head></head><br> <frameset rows="50/, 50/"><br> <br> </frameset><br> </html> </code></p> <p style="text-align: center"><img src="images/2-rows.gif" width="117" height="65" alt="2 rows" border="0"></p> </td> <td align="left"> <p><code><html><br> <head></head><br> <frameset cols="50/, 50/"><br> <br> </frameset><br> </html> </code></p> <p style="text-align: center"><img src="images/2-cols.gif" width="117" height="65" alt="2 cols" border="0"></p> </td> </tr></table> </div> <h3>Number and Size</h3> <p>The number and size of the individual windows within your frameset are specified as shown in the code examples above. Each of the examples is divided into 2 equal size windows specified by <b> 50/</b> which is an abbreviated form of <b>50%</b>. <p>If you wanted 3 cols or rows of equal size the code would be <b>33/, 33/, 34/</b>. When using percentages, the total should add up to 100. <p>You can also specify absolute settings or specific dimensions in pixels. <p>A typical frameset with a 3 cols orientation, with absolute measurements might be defined as: <b>150, 400, 150</b> (700 pixel fixed width). If these setting were used with a rows orientation, you would have a frames page with a fixed height of 700 pixels. <p>If you wanted a fluid design, where the frameset adjusts to the size of the browser window you can use a wildcard (asterick ) as shown. <b>150, *, 150</b> <p>Note: When defining <b>rows</b> the measurements are for <b>height</b>. When defining <b>cols</b> the measurements are for <b>width</b>.</p> <h2>Defining frames within frames</h2> <p>Let's call the first 2 code examples shown above, the main frameset. Your next step is to define the individual frame windows within your main frameset. <p>Individual frame windows are defined with either a second <b>frameset</b> tag for multiple windows or the <b>frame</b> tag for a single frame window. <p>The website that you are reading was originally built using a 3 row orientation. (I've redesigned it since then) <p> The top row which contains the website header is a single frame window. The second row is a multiple frameset divided into 3 columns or windows. The bottom row is the single frame footer ( It's empty and only 10 pixels high). The basic code is shown below:<br> <code><html><br> <head></head><br> <b><frameset rows="70, *, 10"></b><br> <br> <frame> */ top row single frame*/<br><br> <span style="color: #ff0000"><frameset cols="170, *, 180"></span> */ second row - 3 columns */<br> <frame> */ left column - 170 pixels wide*/<br> <frame> */ middle column - remaining browser width*/<br> <frame> */ right column - 180 pixels wide*/<br> <span style="color: #ff0000"></frameset></span><br><br> <frame> */3rd row - single frame footer*/<br> <b></frameset></b><br> </html> </code> <p>Study the code shown above until you understand the concept of nesting framesets and defining frame windows within the framesets. Note that each individual frame window will eventually be defined by a <b>frame</b> tag. <p>For an exercise, copy the code into NotePad or your HTML editor. Remove the comments and save the page as test-frames.html. Experiment with changing the sizes and orientation of the defined windows. <p>When you understand the concepts presented here, you are ready to move on to the next lesson on <b>Source Pages</b>.</p> <h1>Frames and Redirection</h1> <p><img src="images/p0325580.jpg" width="200" height="300" align="left" border="0" alt="Frames and redirection">The source pages that are targeted into the frames of your website are just plain Ole HTML pages.</p> <p>If these web pages are rich in content they will be indexed by Google and other search engines.</p> <p>If someone clicks on the link to one of your source pages , all they would see is a plain Ole HTML page with no frames wrapper.</p> <p>That's why we need <strong>redirection</strong>.</p> <p>When a user clicks on the link to your page we want to redirect it to the frameset and have it appear in the content window.</p> <h2>The Code</h2> <p>We'll need 3 blocks of javascript to make our redirection scheme foolproof.</p> <br clear="all"> <h3>Main Frameset Page</h3> <p>Place this block of code in the head section of the main frameset page. You should name this page <strong>index.html</strong></p> <p>The code:<br> <code> <script language="javascript" type="text/javascript"><br> var fname="content"; //CONTENT AREA FRAME **NAME**<br> <br> window.onload=function(){<br> var d=document.location.search;<br> if(d!='')top.frames[fname].document.location.href=d.substring(d.lastIndexOf('?')+1,d.length);<br> }<br> </script></code></p><br> <p>Make sure that the text between the quotes in this line is the name you've given to your main content window:<br> <strong>var fname="content";</strong> </p> <h3>Utility Pages</h3> <p>Let's call pages like the header.html, footer.html and links.html pages utility pages.</p> <p>If someone clicked a link or accessed these page directly, what would they see?</p> <p>In the first case they'd see a page with the heading of our website. In the next 2 they'd see the footer of our site and then just the links.</p> <p>We don't want people to access these pages directly but someone could.</p> <p>We'll place a block of javascript in the head section of these pages that will redirect them to the main frameset and the default page will appear in the content window.</p> <p>The code:<br> <code> <script language="javascript" type="text/javascript"><br> if(self.location==top.location)self.location="index.html";<br> </script></code></p> <p>Paste this block of code in the head section of all your utility pages.</p> <h3>Content Pages</h3> <p>We could use the same block of javascript for our content pages and then just let people search for the page they actually accessed.</p> <p>A better solution would be to send them to the main frameset and have the page they accessed appear in the main content window.</p> <p>Let's change the last block of code ever so slightly and paste it into the head section of our content pages.</p> <p>The code:<br> <code> <script language="javascript" type="text/javascript"><br> if(self.location==top.location)self.location="index.html?nextpage.html";<br> </script></code></p> <p>Now if someone accessed this content page it would redirect to the main frameset and nextpage.html would appear in the content window.</p> <p>Paste this block of code in the head section of all your content pages and change nextpage.html to the name of the content page.</p> <p>If you don't get anything else from this website, <strong>Learn about redirecting directly accessed pages!</strong></p> <h1>Source Pages</h1> <p><img src="images/p0401228.jpg" width="300" height="200" align="right" border="0" alt="Source pages">When you create a website with frames it is made up of two types of pages.</p> <p>There are <b>frameset pages</b> that control the structural appearance of the website and there are <b>source pages</b> that are directed into the frame windows of the frameset pages.</p> <p>Source pages are just plain ole HTML pages. They can contain anything from video presentations to just plain old information and pictures.</p> <p>As you learned in the previous lesson, every frame window will eventually be defined by a <b>frame</b> tag. You can assign a source page to the frame using 2 methods.</p> <h3>Src Attribute</h3> <p>You can use the <b>src=</b> attribute which is added directly to the desired frame tag. This method is used where the information or content inside of the window will remain the same. Some examples would be the header frame of the page, the navigational frame and as this website uses, the footer frame window.</p> <p>Using this website as an example, the header window, the links window and the footer window all contain source pages by those names. Those pages are assigned to those windows using the <b>src=</b> attribute.<br> Here's what the code looks like:<br> <code><frame src="header.html"> */ Header window*/<br> <frame src="links.html"> */Links window*/<br> <frame src="footer.html"> */footer window*/</code></p> <h3>Target Attribute</h3> <p>The second way to direct a source page into a desired frame window is by using a link with a <strong>target attribute</strong>. In order to do this the destination window <strong>must have a name</strong>.</p> <p>The name of a frame window is defined using a <b>name attribute</b> within the frame tag. Using this website as an example, the middle frame window in the second row is our target window. It is named simply , <b>middle-frame</b>. the code to name the frame is shown here:<br> <code><frame name="middle-frame"></code></p> <p>The links in the left window use the target attribute to send the designated pages into the middle frame window. the code is shown here:<br> <code><a href="source-page.html" target="middle-frame">Source Page</a></code></p> <p>As you can see the code is just a plain ordinary link with a target attribute added.</p> <p>Now because you don't want an empty window when the website opens you can also use the src attribute to specify a default page for the frame.</p> <p>In the code shown below the default page is introduction.html, but when someone clicks on a link in the left window the targeted source page will replace it.<br> <code><frame name="middle-frame" src="introduction.html"></code></p> <h1>Frame Tags</h1> <p><code><frameset></frameset></code><br> Used to set orientation, number of rows or columns and size of each. <br> Attributes:<br> <b>rows</b><br> Horizontal orientation<br><br> <b>cols</b><br> Vertical orientation<br><br> Set values in percentage using forward slash<br> ( Ex. 50/ , 30/, 20/ )<br> Set values in pixels<br>( Ex. 150, 400, 150 )<br> Use wildcards<br>( Ex. 150, 1*, 150 )</p> <br> <p><code><frame></code><br>Used to define a single frame window.<br> Attributes:<br> <b>name</b><br> Used to assign a name to frame window for targeting.<br> <b>src</b><br> Used to assign a default document to the frame window.<br> <b>scrolling</b><br> Turn window scrolling on and off<br> Values:<br> on, off, auto (Default: auto )<br> <b>marginwidth</b><br> Create space left or right within frame window. Set in pixels.<br> <b>marginheight</b><br> Create space top or bottom of frame window. Set in pixels.<br> <b>frameborder</b><br> Adds or removes border around frame windows. For browser consistency use with the <b>frameset tag</b><span style="color: #ff0000">This Practice is Not W3C compliant</span><br> Values:<br> yes, no, 1, 0<br> ( default: yes or 1 )<br> <span style="color: #ff0000"><b>framespacing</b><br> DEPRECATED</span><br> Use this when you use the frameborder attribute with the frameset tag and set it to zero. Set framespacing to zero and it will close the gaps between frames on the IE browser. <span style="color: #ff0000">This attribute has been deprecated by the W3C.</span><br> <b>noresize</b><br> For IE browser only. Stops users from stretching and collapsing frame windows.</p> <br> <p><code><noframes></noframes></code><br> The W3C standard places this tag inside of the main closing frameset tag. I place all of the code from the source page between the tags. Most recommend only the body section of the source page.</p> </body>