HTML Frames - Frames Examples
Understanding frames ...
HTML frames provide a method of displaying several different HTML pages, all at the same time and all in the same browser window. The adjacent graphic shows how three different frames could be created and this example is designed to display a site header page, a site menu page and content pages. You would have to create a minimum of four HTML pages to implement this design and these would be the three pages discussed here plus a special 'Frameset' page, similar to the one that we will discuss further down the page.
If you run your mouse cursor over our example graphic you will see that we have used an image map to highlight each of the areas with a red border as the mouse cursor moves over them. If you left-click on the area you are interested in a child window will popup displaying example HTML Markup for the page you are interested in (please see notes below).
Create a temporary folder and then copy/paste the Markup from each popup window into your text editor. Save each page in the temporary folder, using the filename specified in the Markup. Finally, use Windows Explorer (not Internet Explorer) to navigate to the temporary folder and then double-click on the 'frameset-page.html' file. If your system is working correctly and you have done everything in accordance with the instructions then a browser window should open displaying the three visible pages from the demo Frameset. It is all a little bit basic but it does give you the opportunity to compare the underlying page Markup with the results displayed in the browser window.
In addition to this we have also created an example website that implements the same design as the adjacent graphic except that it has been expanded to include a working menu system and five different content pages. It is well worth studying this example website because you can see how frames work in real-time and because each of the five content pages contain explanations about different aspects of implementing HTML frames effectively.
- If your browser settings have been set to disallow the web page to 'Change Images' then you will not see the different areas of the example graphic highlighted with a red border, when you run your mouse over the graphic.
- If popup windows are blocked or disabled in your browser then the result could be unpredictable. The demo page script should revert to replacing the current page in the existing browser window but the display is unlikely be as the author intended.
Frames in context ...
Framesets and frames have been with us for a long time and are a part of the HTML 3.2 Specification. They should not be confused with 'inline frames' which are a different type of frame that is embedded into a web page and is part of the HTML 4 Specification. As with most HTML Markup, Framesets can behave differently in different browsers and because of this you should always test your work in several browsers (e.g. Microsoft, Mozilla, Opera. etc.) to ensure maximum cross-browser compatibility. Testing Framesets is important because if a Frameset does not work in a particular browser or browser version then a user may not be able to view any of the pages on the site. Also, testing your pages for conformance to W3C standards is important and because of this we have included appropriate SGML DOCTYPE directives at the top of each example page.
Link Directly To This Page ...
help support free information on the Internet ...
Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.
the link displayed ...
select/copy the link Markup ...
