Designer Today - Graphic Design Magazine
Designer Today is the premiere graphic design magazine and tutorial resource for designers

Web Design Tutorials


 


Nested Frames Introduction - Web Design Tutorial

 

Vikki Olds

September 1, 2001

1 Nested Framesets are the easiest of Framesets to create. For this tutorial we will create a simple 3-frame nested frameset. You will need four HTML files for this tutorial. Create the four files shown below and save them with the file names as noted below.


name the above file default.htm


name the above file top.htm


name the above file left.htm


name the above file main.htm


2 If you followed the instructions as shown above you should have a frameset page when opened in a browser that looks similar to below.

3 Now, I know you're looking at that thinking, "I don't like those borders/lines around those frames." There is a way to get rid of those. The only page you have to change is the "default.htm" to get rid of them as shown below in code and what it will look like in a browser.

4 There are times when you don't want any space for the borders or gutters of the page. Unfortunately IE and Netscape handle these differently and you will have a small pixel difference but it will be close.

Use the code below and on each of the three frameset pages add the following to the body tag:

marginheight="0" marginwidth="0" topmargin="0" leftmargin="0"

You need all of that to be compatible with IE and Netscape.

Below see a browser screenshot to show how the margins have been affected.

5 In this particular frameset I want to have my links in the left frame and I want the links to load pages in the main content frame. In order to do this we must "target" the link. So, in our left frameset I would create my links similar to below:

6 If you look at the hyperlinks above you will see target="frmain". If you look above further you will see that we named our main content frame frmain. Now, when a surfer clicks one of those links located in the left frame, the corresponding page will be loaded in the main content frame.

 

7 Drawbacks of nested framesets are that you cannot load two different pages with one link. For instance, let's say you want the navigation page in the left frame to change as well as the main content frame. With nested framesets this is not possible. Check out the tutorial on traditional framesets to see how to make changes to two pages at once possible.

 

8 Some Frameset Attributes:
  • COLS (number of columns in the frameset)
  • ROWS (number of rows in the frameset)
  • BORDER (size in pixels)
  • FRAMEBORDER (can be Yes/No or 0/1)
  • FRAMESPACING (size of space in pixels)
  • BORDERCOLOR (color name or hex color)

Some Frame Attributes:

  • FRAMEBORDER ( can be 0 or 1 )
  • MARGINHEIGTH (size in pixels)
  • MARGINWIDTH (size in pixels)
  • NAME (name of frame)
  • NORESIZE (cannot be resized)
  • SCROLLING (can be Auto/Yes/No)
  • SRC (url of page to load in frame)

We add the NOFRAMES tag for backward compatibility for browsers that do not support frames. You can code in a full normal html page there with links for those browsers so that they will still be able to navigate your site or you can create a no frame site with a link to it between the NOFRAMES and /NOFRAMES tags.

 

 

Copyright 2001, Vikki Olds, All Rights Reserved



Be the first to bookmark or share this

 

 

 



Web Design Tutorial Section

In this section you will find excellent web design tutorials and training, as well as web design tips, tricks, techniques and effects. Our writers work hard to provide free web design training for you! Our tutorials cover several different html editors and many styles and types of web design and programming. Visit the Designer Today resource directory for more web design and web graphics tutorial resources. You can also find more Web Design Tutorials at Tutorials Today.










Fun Meme

Designer Community Forum

Monthly Newsletter


Search and register domains at 123 Domain Names UK, Domain Name Registration UK
and the
UK Domain Name Registration Centre

Designer Today - The Graphic Design Magazine for 2D and 3D graphic designers Hundreds of graphic design
and graphic design software tutorials, product reviews and design articles for the graphic designer


Graphic Design Articles | Graphic Design Newsletter | Graphic Design Training  
Photoshop Tutorials | Illustrator Tutorials | After Effects Tutorials


Also be sure to visit
Fun Meme Jokes and Humor | Favorite {fvrit} Blog |
Poser World | The Poser Gazette
Favorite Media |
Stock 3D wiki | Statesboro Magazine | Five Million Dots | Small Business Consumer

Privacy Policy | Website Copyright and Terms & Agreement | Contact | Information | Site Map | Advertise | Submissions

DesignerToday.com runs on a Content Management System by GMP Services
Copyright © 1998-2008, GMP Services, Inc. -
Media Publishers of Statesboro Georgia, All Rights Reserved