Making Frames the Easy Way
Take the drudgery out of coding frames with PageMill 2.0
By Bob Schmitt
June 15, 1997
Coding frames in HTML can often be a frustrating and time-consuming effort. However, now there are many WYSIWYG authoring programs available which make the task of creating frames much easier. WYSIWYG, or What-You-See-Is-What-You-Get, programs let you see how your Web page will look as you build it, without having to load it in a browser to view it. In this auditorial we'll be looking at one such program, PageMill 2.0 from Adobe.
There are two ways to create frames in PageMill: automatically, with the Split Page menu commands or manually, by dragging new frames from the edges of the document.
Splitting a page into multiple frames using menu commands.
To split the page using menu commands, select Split Horizontally or Split Vertically from the Edit menu as shown above. These commands simply split the page right down the middle. But, they give you no control over the size or placement of your frames. The way to get control of your frames is by dragging new frames from the edges of the page. Just hold down the option key on the Mac, or the control key on Windows, and position the mouse over the frame edge that surrounds the page. The cursor will change to a single arrow. Now you can simply drag the new frame and position it where you want it. Repeat this procedure for as many frames as you need.
Splitting a page manually.
Using this method, you can easily pull out as many frames as you want and quickly move them and resize them at will.
Once you've split the page in one direction, you'll notice that you can't split both frames in the other direction with this method. For example if you have two vertical frames, option dragging a horizontal frame just splits one of the frames. To create a horizontal frame that spans both vertical frames, hold down the Command and Option keys before dragging the new frame out. In Windows hold down the Control and Shift keys.
Removing Frames
If you want to get rid of a frame, position the cursor over the inside edge of the frame. Once the cursor changes to a double arrow, drag the edge of the frame over the opposite edge of the frame or the edge of the page. A dialog box will pop up asking if you want to remove the frame. Click OK to remove the frame.
To remove a frame, drag it off the edge of the document.
When first starting out, getting the frame positioned just right can be a somewhat tricky and frustrating maneuver, but once you've learned the proper positioning at the edge of the frame, it becomes a snap to quickly remove unwanted frames.
Resizing Frames with the Inspector palette
It's an easy matter to resize frames manually, but what if you need a little more control over the width and height of your frames? That's where PageMill's Inspector palette comes in. If the Inspector palette is not already open, select Show Inspector from the Window menu on Macintosh or the View menu on Windows. The frame attributes section of the Inspector palette is available by clicking the top left button-tab.
In the document window, select the frame you want to alter by clicking it once to highlight it. You can now enter a new height (if the frame is a horizontal split) or width (if the frame is a vertical split) in the Inspector palette.
Typically a frame's height and width are measured as a percentage of the page. You can also specify an exact pixel dimension for your frame by selecting Pixels from the pop-up menu next to the height/width box.
The third option under the pop-up menu — Relative — will come in handy if you use an absolute pixel dimension for one or more of your frames. With this option you can divide the remaining area of the Web page among the other frames in a relative manner.
For example, if you have two horizontal frames and you want the top frame set to a fixed height of 60 pixels, and you want the remaining frame to adjust to the height of the user's browser, you can use the Relative option with a value of 1.
Setting the bottom frame to "Relative".
Here's another example of how the Relative option works. Imagine you
have three horizontal frames. Like the example before, you've set the top
frame to an absolute pixel height of 60, and you want the bottom two frames
to adjust to the height of the user's browser. But in this case, you want
the middle frame to have twice as much space as the bottom frame. You can
accomplish this by setting the middle frame to Relative with a value of
2 and the bottom frame to Relative with a value of 1. This is equivalent
to the HTML: <FRAMESET ROWS="60,2*,*">.
Using relative settings across multiple frames.
Targeting frames
With the Inspector palette you can also give each frame a unique name. This is essential when you want to target an active link to a specific frame.
First create the link by highlighting the words or graphic that you want to link, and entering the URL in the Link To box at the bottom of the page. Next, select a target frame from the target popup menu to the right of the Link To box, as seen below.
Using the target popup menu to target a specific frame.
More Options
The remaining options on the Inspector palette allow you to control the look and layout of each frame. Changing the values of the Margin Width and Height boxes allows you to control the left/right and top/bottom margins for each frame. You can also turn scrollbars on or off by selecting yes or no under the Inspector palette's scrollbars popup menu. The Auto option causes scrollbars to appear only if a portion of the content is not visible. The final option on the Inspector palette is Viewer Resizable. This option lets the user resize the frame by dragging its edge.
Adding content to your frames
Now that you've created your set of frames, you can simply create your content right in the frame as you would any HTML page. PageMill treats each frame as a separate HTML document which can be edited within the framed document or opened separately and edited. These individual documents are tied together with another HTML document which contains the FRAMESET information. To add an existing HTML document into a frame, simply highlight the frame and select Insert Page from the File menu. Additionally, you can create other HTML documents in PageMill that can be linked to a specific frame using the target method discussed earlier.
Add HTML pages to frames using the "Insert Page" command.
Finally, to save your framed document, choose Save Everything from the File menu. This command will allow you to name and save an HTML document containing the FRAMESET for your frames and individual HTML documents for each of the frames on your page.
Conclusion
By now you should have a sense for how PageMill can take the drudgery out of creating frame documents. Unfortunately not all frame attributes are supported by the latest release of PageMill, so if you're looking to do tricky effects with frames you will still have to hand-edit the HTML. Some of the tags not supported by PageMill are: FRAMEBORDER which controls whether or not the frames have 3D-like borders, BORDER and FRAMESPACING which control the thickness of the frame border, and BORDERCOLOR which lets you change the color of the frame borders. Be sure to do any hand-editing of your HTML with a text editor, as PageMill will automatically delete frame attributes it doesn't understand.
Despite these shortcomings, PageMill can make creating frames much easier — and even enjoyable.
Copyright © 2012 Robert Schmitt. All rights reserved.