Q. How can I get my page to center horizontally regardless of screen
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'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
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
Using The "Letterbox Frameset" Extension
First I like to create my content pages. For this tutorial we will be using
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
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=
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
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
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"
That's all there is to it!
See the finished
Download the files!
Using Frames To Align Page Content-
Method One: Using the "Letterbox Frameset" Extension
by Bryan Ashcraft
Creating and Managing Framesets in Dreamweaver
by Trent Pastrana
The following extension(s) can be found at the Macromedia
Exchange by searching the word Frames.
"Letterbox Frameset" by Project