• Create a new document (File > New).
• Set up your workspace as follows:
  • Make frame borders visible by choosing View > Frame Borders.
  • Close all of the floating palettes and inspectors in Dreamweaver except the Object palette (Window > Objects), the Property inspector (Window > Properties), the Frame inspector (Window > Frames), and the HTML Source inspector (Window > HTML Source).
  • Arrange the workspace so you can see the Document window, Object palette, Property inspector, HTML Source inspector, and Frame inspector all at once.

  

• To create the main frameset, which consists of two columns, in the Object palette in the Frames panel, select the Insert Left Frame icon at the top left of the Frames panel:

You now have two frames and three documents: the main frameset file plus a new, untitled document in each of the two frames. A border appears around the entire document in the Frame inspector when a frameset is selected. Notice that the Frame inspector shows two areas, identified as leftFrame and mainFrame.

Take a look at the frameset Property inspector:

In the HTML Source inspector, notice that the frameset HTML consists of the opening and closing FRAMESET tags and any FRAME tags in between.

• In the HTML Source inspector, change the page title from Untitled Document to the name of your document. Type the page title between the TITLE tags located near the beginning of the source code in the HTML Source inspector. Click in the Dreamweaver document to see the page title update.
• Click in the left area of the Frame inspector, and then look at the frame Property inspector. Also notice that the first FRAME tag in the HTML Source inspector is highlighted.

If you click in the right area of the Frame inspector, the second FRAME tag is highlighted.

A nested frameset is a frameset within the main frameset that consists of two rows. To create a nested frameset:

In the Object palette in the Frames panel, select the Insert Top Frame icon or

Choose Modify > Frameset > Split Frame Down.

The right frame splits into two separate frames, creating a second frameset within the main frameset.

Notice that the nested frameset also contains a border outline. There are now three frames, two framesets, and four documents in your window.

• Save the frameset (File > Save Frameset).

Setting Frame Sizes (Relative and Exact Size)

Before you begin filling your frames with content, it's a good idea to add some more details about the frames to your frameset file. The sizes of the frames aren't quite what you want yet; to resize them, you'll either need to drag the frame borders around or enter values into the Property inspector. The former method is great for roughing out frame positions, but the latter method offers the opportunity to set a precise, fixed size for a frame or to designate the size as relative to the browser window

You set frame properties by selecting the frame and entering values in the frame Property inspector. You set frame sizes, however, by selecting the frameset and entering values into the frameset Property inspector. This is because size information is stored in the FRAMESET tag as you can see in the HTML Source inspector.

To set the size of each of the frames:

• Select the main frameset by clicking the outermost frame border in either the Frame inspector or the Document window.
• If you don't see the frame sizing controls, click the expander arrow at the bottom right corner of the Property inspector.
• In the Property inspector, in the RowCol Selection box click the left frame of this frameset image to set the frame's options.
• In the Value field type 150, and then in the Units pop-up menu select Pixels to set the column's width.

• In the Property inspector, in the RowCol Selection box click the right frame, and then select Relative from the Units pop-up menu. Dreamweaver automatically fills in a value based on the current size of the Document window.
• In the Frame inspector, select the nested frameset (the thick border around the two right frames).
• In the Property inspector, in the RowCol Selection box select the top frame. Enter 45 for the Value and select Pixels from the Units pop-up menu.
• In the RowCol Selection box select the bottom frame. Select Relative from the Units pop-up menu. In the HTML Source inspector, you'll see this number with an asterisk (*) next to it. The asterisk indicates that the value should change according to the size of the Document window or browser window.

Setting Frame Borders

You may have noticed that the completed frameset did not have borders. Borders are not necessary because the background color in each frame makes the boundaries between frames clear. Border properties, like frame sizes, are set in the frameset Property inspector. Border settings for the main frameset also affect all nested framesets.

To Remove Frame Borders:

• In the Frame inspector, select the outermost frameset.
• In the Property inspector, Select No from the Borders pop-up menu. The three-dimensional borders disappear, leaving only thick gray lines.
• Still in the Property inspector, set Border Width to 0. The thick gray lines shrink to about 2 pixels wide. These lines represent the frame boundaries and are visible only when View > Frame Borders is on. They are similar to the dashed table cell boundaries that are still visible when a table border is set to 0.

Setting Frame Properties

Next you will specify properties and a name for each frame in the frameset. Since each frame will play a different role in the frameset, each will have different properties.

• In the Document window, select the left frame by pressing Alt (Windows) or Shift+Option (Macintosh) and clicking inside the frame. You can also select the frame by clicking it in the Frame inspector.
• In the Property inspector, change the text in the FrameName field to navigation It's good practice to give each frame in your site a unique name. This prevents confusion, and it can even help you determine if a frameset is loaded. (Using JavaScript, you could check for the existence of parent.navigation , for example, to see if your frameset was in the browser window. This is a useful technique for preventing framesets from opening within other framesets.) Also, avoid spaces and hyphens in frame names. While they will not break straight HTML, spaces and hyphens are not allowed in JavaScript objects or properties.
• Set Margin Width to 5 and Margin Height to 10. This moves the contents of the frame 5 pixels away from the left and right frame boundaries, and 10 pixels away from the top and bottom frame boundaries.
• From the Scroll pop-up menu, select Auto.

This makes scroll bars appear if the content exceeds the available screen space. Generally, vertical scroll bars are fine in navigation and main content frames, but you should design your content so that horizontal scroll bars never appear. (It's very difficult for users to read text if they have to scroll in two directions.) To avoid horizontal scroll bars, make sure that the content will wrap naturally or that it will fit in the frame without wrapping even when vertical scroll bars appear. (This could mean that an image in a 150-pixel-wide frame might have to be 120 pixels or narrower.)

Setting the Properties of the Top Frame:

• In the Document window, press Alt and click in the top frame.
• In the Property inspector, type this name for the frame:header.
• Set Margin Height to 10.
• From the Scroll pop-up menu, select No. Since this frame will contain only the name of the site, scroll bars should never appear.

Setting the Properties of the Bottom Right Frame:

• In the Document window, press Alt and click in the bottom right frame.
• In the Property inspector, type this name for the frame: main.
• Set Margin Width to 20 and Margin Height to 10.
• From the Scroll pop-up menu, select Auto. The Frame inspector now displays the names of the frames.

• Save the frameset (File > Save Frameset).

Opening an Existing Document Inside a Frame

The easiest way to populate a frame is to open an existing document inside it. To do this with the your
Cafe site, you'll create and save the document that goes in the header frame.

• Create an HTML page with just a Title across the top. You can create the title in Fireworks and then place it at the top or the page, or you can just select a heading size with the Title "Obnoxious Cafe."
• Choose File > Save As from the browser menu.
• Save the document as header.html in the frames folder you created earlier. You might want to save all the documents that appear in your default frameset with the prefix 00_ so that they appear together at the top of the file list in the Site window. This way, whenever you want to edit just the navigation, you don't have to scan your file list trying to remember what you named the file in any particular frame.
• If you have already created your header page, go to the next step.

To Open the Header File in the Header Frame:

• In the Document window, click inside the header frame.
• Choose File > Open in Frame.
• In the dialog box that appears, find your header.html and open it.
• Before going any further, save all the documents in the frameset by choosing File > Save All. Dreamweaver will prompt you to save any untitled documents one at a time, indicating that the document that is being saved with a dashed outline in the Document window. Save the file in the main frame as main.html and the file in the navigation frame as navigation.html.

Create the Content for Navigation.html:

• In the Document window, click inside the navigation frame.
• Right-click and choose Page Properties from the context menu.
• In the Background Color box, type #99CCFF.
• Set Text Color to #000000, Link Color to #000099, and Visited Links to #000066.
• Type a title for the page (such as Obnoxious Cafe Navigation) and click OK.
• Type the following items into the frame, pressing Enter the names of the pages you want to load in the main page.
• Choose File > Save.

To Create the Content for Main.html:

• In the Document window, click inside the main frame.
• Right-click and choose Page Properties from the context menu.
• In the Background Color box, type #FFFFFF.
• Set Text Color to #000000, Link Color to #000099, and Visited Links to #000066.
• Type a title for the page and click OK.
• Insert an image of your choosing.