Introducing HTML frames
Creating frame pages
Knowing when not to use frames
Setting targets and links
Changing the properties of frames
Using HTML frames to create a Web site is a little like putting pink plastic flamingos on your front lawn — some people love them, some people hate them.
Thus making the most of frames requires appreciating not only the best way to create frames but also the best ways to use them and why so many Web designers have vowed never to use them. Many experienced Web designers say you should never use frames because they can confuse visitors as they navigate around a site and because frames hide the actual URL of each page (only the main address of the main frame page is displayed in a browser, even when a visitor clicks a link that opens another page in the frameset).
These are valid reasons to avoid using frames, but I still think it's important to include instructions for creating frames in this book. Afterall, even if all you want to do is redesign a site that was created with frames, you still need at least a basic understanding of how frames work just to deconstruct the existing site before you re-create it in a new layout option, such as the much-preferred CSS approach covered in Chapter 6.
Overall, I try to take a non-judgmental approach to frames — I don't recommend frames, but I can think of a few instances when frames come in handy, such as when you want to bring in content from another Web site and still maintain your own navigation and logo. Of course, you should do this only with permission from the other site (see the sidebar later in this chapter, "Resist using frames when linking to other Web sites").
Frames are used, for example, by a number of universities and other large institutions to rein in the many different designs created by different departments while still providing some consistent navigation and branding. Frames aren't the only way to solve the problem of many Web designers working on one site, but they are a common approach to this common problem.
For all these reasons, this chapter covers how to build HTML framesets in Dreamweaver and also discusses when frames are most useful and when you may be better off avoiding them. Frames add a wide range of design possibilities, but they can also be frustrating to viewers. As you go through this chapter, consider not only how to create frames but also whether they are really the best solution for your Web site project.
Frames enable you to display multiple HTML pages in one browser window and control the content of each framed area individually. Web pages that use frames are split into separate sections — or individual frames. All the frames together make up a frameset. Behind the scenes, each frame of the frameset is a separate HTML file, which makes a page with frames a little complicated to create, even with Dreamweaver.
If you choose to create your frame files in a text editor, you have to juggle multiple pages, working on one frame at a time, and you can see what you create only when you preview your work in a browser. The visual editor in Dreamweaver makes creating frames a lot easier because you can view all the HTML files that make up the frameset at the same time and can edit them while they appear in the way in which they will appear in a browser.
Web developers commonly use frames to create a design with two or more sections within one browser window. Each section consists of a different HTML page, and you can place links in one section that, when selected, display information in another page in a different section of the frameset within the same browser window.
As a navigational feature, frames enable you to keep some information constant while changing other information in the same browser window. For example, you can keep a list of links visible in one frame and display the information each link brings up in another frame, as the site shown in Figure 8-1 does.
You can create as many frames as you want within a browser window. Unfortunately, some people overuse them and create designs that are so complex and broken up that they're neither aesthetically appealing nor easily navigable. Putting too many frames on one page can also make a site hard to read because the individual windows are too small. This has led many Web surfers to passionately hate frames. And some sites that rushed to implement frames when they were first introduced have since either abandoned frames or minimized their use.
Here's a list of guidelines when using frames:
Don't use frames just for the sake of using frames. If you have a compelling reason to use frames, create an elegant and easy-to-follow frameset. But don't do it just because Dreamweaver makes creating them relatively easy.
Limit the use of frames and keep files small. Remember that each frame you create represents another HTML file. Thus, a frameset with three frames requires a browser to fetch and display four Web pages (each page file plus a fourth that holds them all together). Displaying them all in one browser may dramatically increase download time.
Turn off frame borders. Browsers that support frames also support the capability to turn off the border that divides frames in a frameset. If you turn off the borders, your pages look cleaner. Frame borders, as shown in Figure 8-1, are thick and an ugly gray, and they can break up a nice design. You can change the color in the Property inspector, but I still recommend that you use them only when you feel that they're absolutely necessary. I show you how to turn off frame borders in the "Changing Frame Properties" section toward the end of this chapter.
Don't use frames when you can use CSS instead. By far the preferred way to create a page layout today is to use CSS, covered in Chapters 5 and 6. If your goal is to create a layout for photos, like the one featured in this chapter, consider also using the Swap Image behavior covered in Chapter 10.
Don't place frames within frames. The windows get too darned small to be useful for much of anything, and the screen looks horribly complicated. You can also run into problems when your framed site links to another site displayed in your frameset. The "Resist using frames when linking to other Web sites" sidebar provides many more reasons to limit using frames inside of frames.
Put in alternate
<noframes>content. The number of users surfing the Web with browsers that don't support frames becomes smaller every day. Still, showing them something other than a blank page is a good idea. I usually put in a line that says, "This site uses frames and requires a frames-capable browser to view."<noframes>content can also be read by search engines, which may otherwise fail to catalog the content within framed pages.
Frames are a bit complicated, but Dreamweaver helps make the whole process of creating them somewhat easier. When you create a Web page with frames in Dreamweaver, remember that each frame area is a separate HTML file, and Dreamweaver saves each frame area as a separate page. You also want to keep track of which file displays in which of the frames so that you can aim links properly.
Figure 8-2 shows a simple frameset example with three frames, each containing a different HTML page and different text (Page 1, Page 2, and Page 3) so that I can clearly refer to them in the following numbered steps.
In addition to the files that appear in each frame, create a separate HTML file to generate the frameset. This page doesn't have a <body> tag, but it describes the frames and tells the browser how and where to display them. This gets a little complicated but don't worry: Dreamweaver creates the frameset HTML file for you. I just want to give you a general understanding of all the files that you're creating so that the following steps make more sense.
To help you understand how this works, look at the example in Figure 8-2. In this document, you see three frames, each displaying a different HTML page. The fourth HTML file that makes up the frame page contains the other frames but doesn't show up in the browser. This file is the frameset file, and it describes where and how each frame is displayed. For example, whether they're on the left, right, top, or bottom of the page and how large they are. The frameset file also contains other information, such as the name of each frame, which is used to specify which frame a link opens into, or targets. You find out more about linking frames in the "Setting Targets and Links in Frames" section, later in this chapter.
Figure 8-2. This three-frame frameset is comprised of four different HTML files: index.html, left.html, main.html, and top.html.
When you create a frameset page in Dreamweaver, you create multiple pages — the frameset file and each of the files that will be displayed initially within the frameset. When you edit the content of any of the frames in a frameset, you're editing not the frameset file but the files that populate the framed regions within the frameset.
If you're not using a program like Dreamweaver, you have to edit each of the files in a frameset separately, but Dreamweaver makes designing with frames easier by letting you edit the content of each frame in the context of the frameset as it will be displayed in a browser. If you can grasp this concept, you've come a long way toward understanding how frames work and how to use Dreamweaver to create and edit them. If it hasn't sunk in yet, read on. After you start creating and editing framesets, all these concepts should make a lot more sense.
You can create frames in three ways in Dreamweaver:
The simplest method is to use a predesigned frameset from Dreamweaver's Samples collection. See the next section, "Creating a frameset from a sample."
The second method is to create a page and then choose a predefined frameset from the Layout Insert panel, covered in the upcoming section "Creating a frameset using the Layout Insert panel."
The third method, which can also be used to alter a frameset created by either of the first two methods, is to split a single HTML file into two or more sections, which then become separate pages within a frameset. To split a page into two frames, choose Modify
Note
When you split a page that isn't yet part of a frameset, Dreamweaver automatically generates an untitled page with the <frameset> tag and then additional untitled pages appear in each of the frames within the frameset. When that happens, you're suddenly managing more than just one page. This concept is important to understand because you have to save and name each of these pages as a separate file, even though Dreamweaver makes it appear as though you're working on only one page that's broken into sections.
Tip
In general, I recommend that you save new HTML files before inserting anything into them. However, the opposite is true when you work with frame files in Dreamweaver. Wait until after you create all the frames in your frameset and then save them one at a time; otherwise, tracking your files can get even more complicated and confusing. I explain more in the "Saving files in a frameset" section, later in this chapter.
To create a simple frameset in Dreamweaver, such as the one shown in Figure 8-2, follow these steps:
Choose File
New.The New Document dialog box opens, as shown in Figure 8-3.
In the Sample Folder list, select Frameset.
The predefined framesets are displayed in a list under the Sample Page category.
In the Sample Page list, select a Frameset design.
When you click to select the name of a predefined frameset, a preview is displayed in the far right of the dialog box, as shown in Figure 8-3.
Click the Create button.
The frameset is created automatically and opens in Dreamweaver's workspace. If you have Accessibility alerts turned on in Dreamweaver's Preferences, you're prompted with an alert and an Accessibility dialog box, where you can enter Accessibility attributes for the frameset.
Click and drag any of the bars dividing the frames to adjust the size of the frame area.
To edit each section of the frameset, click inside the frame that you want to work on and edit it as you would any other HTML page.
Warning
You can type text, insert images, create tables, and add any other features just as you do for any other page.
For instructions on saving all the files in a frameset, continue with the instructions in the section "Saving files in a frameset," later in this chapter.
To create a framed page with the Frames icon on the Layout Insert panel, follow these steps:
Choose File
NewBlank Page.In the Page Type list, select HTML and then in the Layout list, select <none>.
Click the Create button to create a new blank page.
A blank HTML page is created and opens in the main Dreamweaver workspace.
From the Layout Insert panel, click the Frames icon; in the drop-down list, select the design that most closely approximates the type of frameset you want to build (refer to Figure 8-4).
The selected frameset is created automatically and opens in the Dreamweaver workspace, replacing the blank HTML page created in Step 3.
Viewing frame borders
If you don't see the borders of your frames displayed in Dreamweaver's workspace, as you see in Figures 8-1, 8-2, and 8-4, you may need to change the View settings in Dreamweaver. To make frame borders visible, click to place your cursor in one of the frames within your frameset and choose View
Don't worry if it isn't exactly the design you want; you can alter it later.
Modify the frameset as needed.
You can resize the frames by clicking and dragging the borders.
You can also split frames by choosing Modify
To save your files, continue with the instructions in the next section, "Saving files in a frameset."
No matter what approach you take to create a frameset, you can choose from any of these three options to save any or all your frame documents. No matter which option you choose to save your pages, make sure you save them within the main root folder of your Web site. (See Chapter 2 for more on using Dreamweaver's site definition features to establish a main root folder for your site.)
Similarly, after you save and name your documents the first time, you have the following options for saving a frame or the whole frameset again after you edit them:
Save the whole shebang: If you haven't yet saved the frameset, choosing File
Save just one frame: To save an individual frame displayed in a frameset without saving all the other frames, place your cursor in the frame you want to save and choose File
Save only the page that defines the frameset: First, make sure the entire frameset is selected (you can do this by clicking in the upper-left corner of the workspace) and then choose File
Tip
When you create a frameset, no matter which approach you take to create the frameset, it's good practice to wait to save your pages until after you've created all your frames. Saving all your frames at once can make it easier to name them in a way that will help you keep track of them later. Remember, a frameset consists of at least two HTML files, even though it appears as if you're working on only one file in the Dreamweaver workspace. (That said, I still recommend you save the files before you start adding content to your pages, to make sure you don't lose your work if your system or the program crashes.)
To save all the files in a frameset at once, follow these steps:
Choose File
Save All.The Save As dialog box appears, asking you to name the file and designate a folder to save it in. This is the first of several Save As dialog boxes you see (how many depends on how many pages your frameset contains).
Enter a name for the first file in the frameset.
Dreamweaver suggests a name, but you can choose your own.
Tip
The first file you're prompted to save when you use the Save All option, is the frameset file (the file that holds all the other frames in place). You can tell this by looking at the Dreamweaver Document window behind the Save As dialog box: The entire document has a thick dotted highlight around it, representing the frameset.
Browse your hard drive to locate the desired folder for the HTML files and then click the Save button.
The first frameset file is saved, and a new Save As dialog box appears for the next one. After you save all the frames, the Save As dialog box disappears.
Tip
Carefully naming the files as you save them helps identify which area they represent. Notice that when you're prompted to save each file, Dreamweaver indicates the frame area by highlighting it with a dark, on-screen border behind the dialog box. I like names like
frame1.htmlandframe2.html, orleftframe.html,rightframe.htmlbecause such names can help you distinguish between the files later.
One of the best features of frames is that you can change the contents of each frame separately within the Web browser. This feature opens a wide range of design possibilities that improves navigation for your site. One common way to use a frameset is to create a frame that displays a list of links to various pages of your site and then opens those links into another frame on the same page. This technique makes it possible to keep a list of links constantly visible and makes navigation a lot simpler and more intuitive.
Setting links from a file in one frame so that the pages they link to open in another frame is like linking from one page to another, and that's essentially what you're doing. What makes linking within a frameset distinctive is that, in addition to indicating which page you want to open with the link, you have to specify which frame section it targets (opens into).
But before you can set those links, you need to do a few things: First, you need to create some other pages that you can link to (if you haven't done so already). Create new pages as you would create any other pages in Dreamweaver, using any of the templates or sample page options, and then save each of the pages individually. If your pages already exist, you're more than halfway there; it's just a matter of linking to those pages.
The other thing you have to do before you can set links is to name each frame so that you can specify where the linked file loads. If you don't, the page just replaces the frameset altogether when someone clicks the link, and this defeats the purpose of using frames in the first place.
Naming a frame is different from naming the file that the frame represents. You find out how to name the files in the previous section, "Saving files in a frameset." The frame name is like a nickname that allows you to distinguish your frames from one another on a page and refer to them individually — this becomes important when you set links and want to target a link to open in a particular area of the frameset. The filename is the name of the HTML file for the frame. The frame name is the nickname you refer to when you want to set links.
You can see the names of your frames in the Frames panel, as shown on the right in Figure 8-5. If you've used one of Dreamweaver's predefined framesets, the frames are named something like topFrame and mainframe. If you're happy with the names that Dreamweaver automatically assigned to your frames, you can skip the following steps. If you created frames by splitting a document, the frames don't have a name and you must complete the following steps before you can target your frames.
To name a frame in a frameset or change the name of a frame, follow these steps:
Open an existing frameset or create a new one.
See the "Creating a frameset in Dreamweaver" section, earlier in this chapter, if you don't know how to create a frameset.
Choose Window
Frames.The Frames panel opens to the right of the work area (see Figure 8-5). The Frames panel is a miniature representation of the frames on your page that enables you to select different frames by clicking the corresponding frame area within the panel.
Click to place your cursor in the area of the Frames panel that corresponds to the frame you want to name.
In Figure 8-5, I selected the top frame. You can click to select any of the frames in the panel. The Property inspector displays the properties for that particular frame. You can make any changes to the frame's properties by altering the properties in the Property inspector after selecting the frame. You can also select the entire frameset by clicking the border around all the frames in the Frames panel. The Frames panel allows you to select only one frame or frameset at a time.
In the Frame Name text box on the left side of the Property inspector, type a name for the frame.
Dreamweaver assigns names automatically when you save the files in a frameset. In the example shown in Figure 8-5, Dreamweaver assigned the names
topFrame,mainFrame, andleftFrame. You can leave these names as is or change them to anything else in the Property inspector (just don't use spaces or special characters in the names).In the example, I changed
topFrametobannerFrame. Name your frames in a way that makes sense to you and helps you remember what they are so you can better target them.Choose File
Save Frameset to save the frameset page.The frameset is the file you don't see in the display area that describes the other frames and contains information, such as frame names.
Remember, you can save any individual frame by placing your cursor in the frame and choosing File
Now that you identified or changed the names of your frames, you're ready to start setting links that target frames. Don't close these files yet — you want to use them to follow the steps in the next section to set links.
Tip
I like to save my work on a regular basis so that I never lose more than a few minutes of work if my system crashes or the power goes out. Be aware, however, that when you work with frames, you need to save all your pages to save your work.
Setting links in a frameset requires some preliminary work. If you jumped to this section without creating a frameset or naming your frames, you may want to refer to the sections earlier in this chapter. If you already have a frameset, have named the frames, and just want to find out how to set links, this section is where you want to be.
Setting links in a frameset is like setting any other links between pages, except you need to specify the target frame — the frame where the linked page will appear when a user clicks the link. For example, if you want a link in the left frame to control what's in the main frame, specify the main frame as the target in the link. If you don't specify a target, the link opens in the same frame the link is in. Because the most common reason to use frames is to keep navigation links in one frame and open their corresponding pages in another, you probably want to target a frame when you set a link.
If this seems confusing, don't fret. After you try the following steps, it should become clear how targets work in framesets:
Open an existing frameset or create a new frameset.
In Figure 8-6, you see that I'm using the Pink Flamingo Web site, which I created to use as an example in this chapter.
Highlight the text or click to select the image you want to serve as the link.
In my example, I selected the second thumbnail image in the left column. Note that the process of targeting a link works the same whether you're creating a link with text or an image.
In the Property inspector, enter any URL in the Link text box or use the Browse button to select the page you want to link to.
In my example, I used the Browse button to set a link to the file
stalkers.html(this page includes a larger version of the thumbnail picture that I've selected).In the Target drop-down list in the Property inspector, choose the name of the frame that you want the link to open into.
In my example, I selected the frame
mainframeas the target. Choose the name that corresponds to the frame where you want your linked page to open. Notice that Dreamweaver conveniently lists all the frames you named in your document in the Target drop-down list, which I have open in Figure 8-6.The result is shown in Figure 8-7. When the frameset appears in a browser and a user clicks the second thumbnail of the photo that features more than a dozen flamingos in the left frame, the
stalkers.htmlpage with a larger version of that photo appears in the main frame area.
Note
You can't test your links until you preview your work in a browser, and you have to save all your framed pages to ensure that your preview will work properly. To save all the pages in a frameset, choose File
You have many options when you target links in a frameset. As shown in the preceding section, "Setting links to a target frame," you can specify that a linked page opens in another frame within your frameset. In addition, you can set linked pages to open in the same frame as the page with the link, to open a completely new page with no frames, and even to open a second browser window and display the page without affecting the original framed design. Table 8-1 provides a list of target options and what they mean. You can find all these options in the Target drop-down list in the Property inspector.
Note
The Target drop-down list in the Property inspector is activated only when you select a linked image or section of text — a link must be in the Link field of the Property inspector before you can set a target.
Table 8-1. Understanding Target Options
Target Name | What It Does |
|---|---|
_blank | Opens the linked document into a new browser window or tab. |
_parent | Opens the linked document into the parent file of the page that has the link. (The parent is the file, frame, or frameset that contains the frame with the link.) |
_self | Opens the linked document in the same frame as the original link, replacing the current content of the frame. This is the default option and usually doesn't need to be specified. |
_top | Opens the linked document into the outermost frameset, replacing the entire contents of the browser window. |
When you get more sophisticated with frames, you may want to further refine your frames by changing properties, which enables you to turn off frame borders, change the frame or border colors, limit scrolling, and so on. To access these options in Dreamweaver, choose Window
Figure 8-8. The selected frames or framesets and their properties are visible in the Property inspector.
The best thing you can do with a frame border is to turn it off. You can turn off the borders for your site by choosing No from the Borders drop-down list in the Property inspector for either the frameset or for any of the individual frames in the frameset. Your other options include Yes, which forces the borders to be visible, and Default, which usually means Yes. In the case of individual frames, however, the Default option inherits the settings from the parent frameset.
You can make global border settings by using the Property inspector and applying the settings to the frameset. To select the frameset so that its properties are visible in the inspector (refer to Figure 8-8), click the border that encloses the frameset in the Frames panel.
If you choose to keep your borders visible, you may want to customize the color by clicking the Border Color square in the Property inspector and then choosing a color from the color palette.
If you select a specific border, the Property inspector also enables you to specify the border width. Simply enter a value in pixels in the Border Width text field to change the width of the selected border.
Note
Frame border colors aren't well-supported by all browsers and may not display as you intend. Most designers simply turn off frame borders, but if you do keep them, make sure your design still looks okay if the borders are thick and grey, which is the default. Many browsers, including recent ones, don't display a different border color.
The easiest way to change the size of a frame is to select the border and drag it until the frame is the size you want. When you select the border, the Property inspector displays the size of the frame, enabling you to change the size in pixels or as a percentage of the display area by entering a number in the Row or Column text boxes. If you specify 0 width for your frame borders, you may not see them on the page in order to drag and resize them. If this is the case, you can view the borders by choosing View
Scrolling options control whether a viewer can scroll up and down or left and right in a frame area. As shown in Figure 8-9, the scrolling options for frames are Yes, No, Auto, and Default. As a general rule, I recommend leaving the Scroll option set to Auto because a visitor's browser can then turn on scrolling if necessary. That is, if the viewer's display area is too small to see all the content of the frame, the frame becomes scrollable. If the content fits within the visible boundaries, the scroll arrows don't appear.
If you set this option to Yes, the scroll arrows are visible whether they're needed or not. If you set it to No, they won't be visible, even if that means your viewer can't see all the content of the frame — a sometimes dangerous proposition because then there's no easy way to scroll. Default leaves it up to the browser. In most browsers, the Default option results in the same display as the Auto option, but Default yields unpredictable results. As a general rule, using Auto is best.
Also note the No Resize option in Figure 8-9. If you select this option, a visitor to your site can't change the size of the frames. If you leave this option deselected, your user can select the border and drag it to make the frame area smaller or larger, just as you can when you develop your frames in Dreamweaver. Generally, I like to give viewers control, but I sometimes select the No Resize option if I want to ensure that my viewers can't alter the design in their browser.
The Margin Width and Margin Height options enable you to specify the amount of margin space around a frame. Normally in a browser window, a small margin is visible between the edge of the window and any content, such as images or text. That's why you can't normally place an image on your page flush against the edge of the browser. With frames, though, you can actually control the size of the margin or even eliminate the margin.
I generally recommend that you set the margin to at least two pixels and make the margin larger if you want to create more space around your content. If you want to get rid of the margin, set it to 0 and any images or text in the frame appears flush against the edge of the frame or the browser window if the frame touches the edge of the browser. If the frame touches another frame, you can use this technique to create the impression of seamless images across frames.