Q. How can I get my page to center horizontally regardless of screen resolution?

A. By using frames to compensate for the differences in screen dimensions. The "Letterbox Frameset" makes this task much easier. You can also do this manually with some help from Dreamweaver.

Using Frames To Align Page Content- Method One

Author: Bryan Ashcraft
Author's Site: ParagonVisuals.com
Reference ID: 15625

Question 1: What are Frames and Framesets?

A frameset is a collection of frames. This can be as small as 2 frames, or as large as, well...., as large as you care to make it (just remember the content of each page must be loaded and will contribute to the total page weight).

Now a frame is a section of a page that contains another pages content. Let me see if I can explain that better. Look at it as a TV with Picture-in-Picture. The main screen is your frameset. Inside this frameset there are a minimum of 2 frames, each showing its own content. Did that help? Have you figured out that a frameset will require at least three pages?

i.e., Say you want your navigation to be visible at all times. You could do this with a frameset (page1) that contained a left frame and a right frame. The contents of your left frame would be a navigation page (page2) and the right frame would hold your content page (page3). See its not as confusing as you thought. Just remember that a frameset is a page unto itself and its contents must be provided from other pages.

If you would like a more detailed explanation of frames and how to use them, see Trent Pastrana's tutorial on Using Frames.

Question 2: How do I use them to align my content?

To try and make this as universal as possible, I decided to provide you with two methods that will accomplish the same goal.

Method 1: Using the "Letterbox Frameset" extension from Project VII. This is probably the easiest method. If you plan to use layers to hold your content, this is the only way to center your content horizontally with frames.

Method 2: Manually creating the frameset with Dreamweaver's included objects. This method will use objects that come with DW and a little hand coding. Relax, its only a couple of lines and very easy to do. Click Here For The Manual Method.

Using The "Letterbox Frameset" Extension

First I like to create my content pages. For this tutorial we will be using the following:

border.htm- This page will contain what we want to use to surround the actual content on our site.
content.htm- This page, just as it sounds, will contain our sites content.
index.htm- This is the frameset page.

Creating The Frameset

Now that we have our border and content pages created, we are ready to create the frameset to house them.

First, with our frameset page open, select "Frames" from the "Object" palette's drop down.

Then, select the "Letterbox Frameset" object to insert our frameset.

Your "Frames" palette Should look like this: Notice that you actually have two framesets. One nested inside the other.

And your page should look like this: This gives us a total of 5 frames.

Setting The Properties Of Our Frameset

Next we want to select each frame and tell it what its source should be. To do this simply click inside each section in the "Frames" palette and use the "Property Inspector" to set its source.

	Set the 4 outer frames sources to border.htm Set the source of "mainFrame" to content.htm
*Warning* If your content page will need to be scrolled, be sure to change the "Scroll" value to auto or yes. This applies to the "mainframe" only.

All that is left to do is set dimensions of our "mainframe" and we're done!

To do this we need to know how big our content.htm page is from top to bottom and left to right. Or, at least how much of the page we want to show. I have used the "Paragon Visuals" logo for my page's contents. The measurements are width= 392 and height= 420.

OK. Let's finish this thing! To set our dimensions we need to select each **frameset** from the "Frames" palette Then using the "Property Inspector" we will set the dimensions.

1. Select the outer frameset from the "Frames" palette
* You should have a thick black border surrounding everything in the "Frames" palette if this is done correctly.*
2. Select the middle row in the "Property Inspector".
* It should look something like what you see below.*

3. Change the "Row" value to 420.
*The height of our image/content.*
4. Select the nested frameset from the "Frames" palette
*You should have a thick black border surrounding the middle three frames.*
5. Select the middle *column* in the "Property Inspector".
6. Change the "Column" value to 392.
*The width of our image/content.*

Tip* To select the nested frameset, click on the thick outer border that surrounds the three middle sections in the "Frames" palette.

That's all there is to it!

The Examples

See the finished product!

Download the files!

Related Tutorials

Using Frames To Align Page Content- Method One: Using the "Letterbox Frameset" Extension
by Bryan Ashcraft
URL: http://www.dwfaq.com/Tutorials/Frames/align_wframes1.asp

Creating and Managing Framesets in Dreamweaver
by Trent Pastrana
URL: http://www.dwfaq.com/Tutorials/Frames/framesets1.asp

Available Extension(s)

The following extension(s) can be found at the Macromedia Exchange by searching the word Frames.

"Letterbox Frameset" by Project VII
URL: http://dynamic.macromedia.com/bin/MM/exchange/extension_detail.jsp?extOid=16372