Chapter 4
Open header.htm
Center your cursor on the page.
Insert picture. This is the banner you want to be at the top of all your pages.
It would be a good idea for the background image to be the same here as on the navigation page. (Remember, we must maintain continuity of color and style.) This is when the “Get background information” checkbox comes in handy.
Close header.htm
Open index.htm
First we will adjust the size of our frames. The image below is what your frames page will look like when first opened.
Click image to view larger version.
Notice how the header frame cuts off the banner, and the navigation frame is really wider than it needs to be?
Put your cursor on the frame border and move it around until it turns into a double arrow. Left click and drag the border to make the frame the correct size.
Click image to view larger version.
Click Preview, you will notice the scroll bar is gone, and the page is looking good!
Now, let’s fine tune our frames properties.
With index.htm open
Right Click in any frame. Choose Frame Properties.
Click image to view larger version.
The name and initial page should not need to be bothered.
Frame size:
- For the main frame: Leave this set at 1 and Relative. This will allow for different browser resolutions.
- For navigation frame: Set the width between 93 and 100 pixels. (Choose pixels in drop down box.)
- 93 to 100 pixels is appropriate for the text links we have on this site. It may not be right for your page names. Try to keep page names as short as possible, yet allowing for adequate description.
- For header frame: The banner we’re using is 468 x 68, so I have chosen to allow 100 pixels for the frame height. This frame should not have the width as an option. It is, by default “relative”. Which means its width is dependant on the browser window.
Margins
- For main frame: The default is Width 12 and Height 16. These set the distance from the edges of the frames borders that you want to start your content.
- For navigation frame: Since I have left the table borders visible (set at 1), I have chosen to set the margins for this frame at 0. This permits the greatest compaction of the overall page. Yet, allows for ease of reading. If the table borders had been set to 0, making its edges invisible, I may have wanted to leave more margins to avoid the possibility of having the navigation text too close to the main frame next.
- For the header frame: Play around with this one a little. For this particular banner, margins of 12 and 12 allows it to be centered vertically in the frame. Width is not of importance this time, because the banner easily centered with lots of room on either side.
Options
- For the main frame: Check the dialog box “Resizable in Browser.” Remember, always give your visitor as much control over your pages as possible. In the scroll bar drop down menu you should choose if needed.
- For navigation frame: Check the dialog box “Resizable in Browser.” Remember, always give your visitor as much control over your pages as possible. In the scroll bar drop down menu you should choose never. You may need to choose if needed for a larger site.
- For header frame: Check the dialog box “Resizable in Browser.” Remember, always give your visitor as much control over your pages as possible. The scroll bar drop down menu you should set to never. If it is not, choose it now.
Also in the Options Area of the dialog box you will notice a Frames Page button. You only need to click on it once while setting your frame properties.
Click image to view larger version.
I have unchecked the Show Borders check box, this allows the frames to appear seamless. (This sets frame spacing to 0.) Play around with it a little if you prefer a different look.
We now have a page that shows no seams between the frames, with a scroll bar only on the right side of the browser window.