| Please Note: This lecture was originally designed with DW3 in mind, so may have some differences from your current version. However, all the information is still valid and useful! HTML frames and framesetsRemember my very first lecture on HTML? I stated that every web page had four common tags that must always appear. They were the <HTML>, <HEAD>, <TITLE> and <BODY> tags. As with most things, however, there is an exception to this rule. When you are creating Frames, the <frameset> tag takes the place of the <BODY> tag. What are Frames and Framesets? Consider this: a Frame is an HTML page inside another HTML page. The other HTML page that is holding all the Frames is called the Frameset. You can have several Frames on a single Frameset page. Think of the Frameset as the holder of all your Frames - or the HTML page that shows the layout of the Frames within. The Frameset is one HTML page that holds together several other HTML pages called Frames. One good use of this is creating your index.html page with two Frames. The left side Frame could hold the navigation toolbar for the sections of your Web site. The right side Frame would bring up the set of Web pages associated with the links on the left side, as your viewer clicks on them. The left side Frame always stays the same; the right side Frame changes depending on what is selected from the left side Frame. Holding all this information - the left side Frame and the dynamic right side Frame - is the Frameset. To have accomplished this, you actually built three web pages: the left side Frame, the right side Frame, and the Frameset. Frames are controversial. Some people love them and some people hate them. I am fond of saying how I hate Frames, but the truth be told, that is probably a holdover from hand-coding HTML pages. With Dreamweaver 3, creating and modifying Frames and Framesets is incredibly easy. So why the controversy? The good part about using frames is the ease one can change an element such as a toolbar on one page instead of several. And that one page is already loaded so that if your viewer browses through the links on the left side frame, only the right side frame has to reload new web information. Finally, you can do some really visually interesting effects by loading different backgrounds in each Frame. And the downside? Well, Frames can be confusing if you have not implemented them correctly. If you do not have a clear idea of how you want your viewer to navigate through your site, and how you will use the Frames to achieve this, you can create lost viewers in your Web site - and if they quit your site in frustration, they probably won't come back! Another frustration with Frames the viewer has is with printing. You can't print an entire Frameset, since that would be like printing three HTML pages at once. So if you have content that the viewer may want to print for future reference, don't use Frames. In the same vein, because you may have ten individual HTML pages, bookmarking can be a problem. Only the Frameset can be bookmarked. Content that a viewer sees on one of the other HTML pages cannot be bookmarked. You would have to be sure to provide links to each of the individual pages on the Frameset, as a workaround. Finally, even though you can do some visually interesting backgrounds using Frames, the Frameset itself will always be a boxy division of rectangles - sort of like always creating your site in a fixed table. But clever use of the Frames properties box will help you hide this particular drawback. Eliminating borders and knowing how to affect scrollbars can help in your overall design. Creating Framesets and FramesWhen you create Framesets and Frames, you begin with a new blank document. Like most things in Dreamweaver, there are several ways to divide your Web page into Frames and make your frameset. The first method uses the menus. By choosing Modify > Frameset and then selecting from the submenu either left, right, up, or down, you will split the frame either vertically or horizontally. You can also create a Frameset visually, by dragging the border to create Frames. To create a frameset visually, using the mouse:
Notice that Dreamweaver displays a black, dotted line along all the frame borders and within every frame. You can easily reposition any frameset border by clicking and dragging it. If you just want to move the border, make sure you don't press the Alt or Option key. The Alt/Option key actually creates additional frames - a good thing to know if you want to split your Frameset into further sections. The Frameset Property Inspector provides information on sizing your frames, too. When you are done creating your basic frame structure, you can select View > Frame Borders again to toggle off the borders and preview a more accurate picture of your Web page. Fast framesets with the Frame objects paletteThe exercise above shows you a clear-cut method for dragging out your frameset and setting up the various frames. However, an even easier way to create Frames and Framesets is to use your objects palette. Although you can create quite complex framesets nested within framesets, most sites use fairly simple, basic patterns in their frame-based Web design. Dreamweaver 3 gives you eight of the most commonly used frameset configurations in the Frame objects palette. Generally they are organized from the simplest frameset to the most complex. Notice how different sections are blue. The blue indicates which frame the current page will appear when the frameset is constructed. This is very important. If, for example, you start with a Web page in which you have already begun constructing your main content page, and then decided to turn the page into a frameset with a separate navigation strip frame on the bottom of the page, you would choose the Bottom Frames object. The content page you were working on would then appear on the top half of your screen, and a blank page will appear at the bottom, where you will later insert the navigation Web page. For this reason, it's best to apply a Frame object to an existing page only if it is intended as the primary content frame. Else, it's best to start with a blank document and select the Frame object. You can then use File > Open in Frame command to load any existing pages into the individual frames. The eight different framesets available from the Frames panel are:
For all Frame objects, the existing page is moved to a frame where the scrolling option is set at Default, and the size is relative to the rest of the frameset. The existing page can be scrolled and expands to fill the content. For almost all of the Frame objects, Dreamweaver creates one or more frames with a set size. By default, the set width or height is 80 pixels. You can easily resize the frame by dragging the frame border or by using the Frameset Property Inspector. The only frameset that does not have at least one set frame is the Split object, which divides the four frames equally. Altering frames and framesetsAs when you are working with other HTML elements, such as text, tables or images, the Property Inspector changes when working with Frames and Framesets. The Frameset Property Inspector allows you to easily make changes and manage elements common to frames and framesets, such as changing the border or more precisely control sizing changes. If you want to resize the frames in a frameset, you can either drag the border or you can use the Frameset Property Inspector to specify a value. The Frameset Property Inspector contains a Row/Column selector to display the structure of the selected frameset. For each frameset, you select the tab along the top or left side of the Row/Column selector to choose the column or row you want to modify. When you want to specify the size of a frame, you must first select a frame. This is different than just positioning the cursor in the frame. There are two ways to properly select a frame: using the Frames Inspector or using the mouse. The Frames Inspector shows an accurate representation of all the frames in your Web page. Open the Frames Inspector by choosing Window > Frames. The Frames Inspector displays names, if assigned, in the individual frames, and (no name) if not. If you have nested framesets, they will appear with a heavier border. To select a frame, click directly on its represented image in the Frames Inspector. If you are working with multiple framesets, use the Tag Selector together with the Frames Inspector to identify the correct nested frameset. To select a frame with the mouse, press Alt or Option-shift and click in the desired frame. Once the frame is selected, you can move from one frame to another by pressing Alt or Command, and then using the arrow keys. If you want to alter the borders, you also can use the Frameset Property Inspector. By default, Dreamweaver sets up your framesets so all the frames have gray borders that are 6 pixels wide. You can alter the border color, change the width, or eliminate the borders altogether. There are also border controls for individual frames, explained a little later. Individual frame options override those for the entire frameset, just like individual cell options can override options set for an entire table. Use the frameset border controls when you want to make a global change to the borders, such as turning them off. Opening links in specific framesOne of the major uses of frames is for navigational control. One frame acts as the navigation center, with links to various Web pages in your site. If you create a frameset like at the beginning of this lecture, with a navigational bar to the left that always remains in place, you can have the targeted information from each link appear in the frame on the right. This keeps the navigation links always visible and accessible. When you assign a link to appear in a particular frame, you are said to be assigning a target for that link. Targets are assigned through the Text and Image Property Inspectors. If you have done the lab in Chapter 12 already, you have learned the importance of naming your frames. The frame's name is used to make the content inserted from a hyperlink appear in that particular frame. Frame names must follow specific guidelines. You must use one word with no spaces, you may not use punctuation marks or special characters, and you may not use certain frame names: _blank, _parent, _self, and _top. You can load an existing Web page into any frame. The lab exercise in Chapter 12 discusses how to name your sections yourself, to make it easier to know which frame you want your content to appear in. However, there are four special names HTML reserves for the parts of a frameset that are used in targeting. These four special names are the ones listed above: _blank, _parent, _self, and _top. Therefore, you can target particular frames with named targets (pg. 330) or you can select one of the reserved target names from the drop-down list of Target options:
To target a link to a section of your frameset, do the following:
Inserting frameless contentNot all browser's support frames. Netscape began supporting frames in Navigator v.2.0; Microsoft didn't start until IE v.3.0. A few of these earlier versions are still in use, particularly among AOL users. HTML has a built-in mechanism for working with browsers that are not frame-enabled: the <noframes></noframes> tag pair. When you begin to construct any frameset, Dreamweaver automatically inserts a <noframes> area just below the closing </frameset> tag. If a browser is not frames-capable, it ignores the frameset and frame information and renders what is found in the <noframes> section. What should you put into the <noframes> section? If you want to reach the greatest possible audience, you would typically insert links to a nonframe version of the site. Of greater consideration, however, is the search engine indexing systems (called spiders.) If you want the spider to find the rest of your site, not just the index.html page, you need to have a link to each page in the noframes content. Dreamweaver offers an easy method for adding and modifying the <noframes> content. Choose Modify > Frameset > Edit NoFrames Content to open the NoFrames Content window. This looks like a regular Dreamweaver Document window, except for the "NoFrames Content" in the title bar. In this window, you have access to all the same objects and palettes that you normally do. When you have finished editing your <noframe> content, choose Modify > Frameset > Edit NoFrames Content again to deselect the option and return to the frameset.
SummaryA framed Web page consists of a separate HTML document for each frame, plus one additional file that describes the frame structure, called the frameset. A frameset is a series of columns and rows, like in a table, that can be sized absolutely (pixels) or by percentage of the browser window. You can select individual frames through the Frame Inspector or by Alt-clicking (Option-Shift-clicking) within any frame. Once the frame is selected, the Frame Property Inspector can be displayed. You can make your links appear in a specific frame by assigning targets to the links. A good example of this was the use of a navigation bar in one frame, and the requested link to appear in another frame. Finally, you should include information and/or links for browsers that are not frame-capable. |
