• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 10. Creating Frames > Resizing Frames in a Frameset

Resizing Frames in a Frameset

You can use the Property inspector to specify the size of your frames, or you can simply drag the borders in the document window to perform the same task. In addition to specifying a size in the Property inspector, you can also determine how browsers will allocate space to frames when there is not enough room to display all frames at full size.

1.
In the document window, position the pointer over the horizontal border between the top and bottom frames. When the pointer changes to a double arrow, click the border once to select the first frameset.

The frame borders in the document window will become dotted. The Tag Selector will display <frameset>, and the Frames panel will show the outermost frameset border selected.

The Property inspector shows the Frameset properties. The Property inspector will change depending on whether you have selected a frameset or a frame. In order to change the size of the frames, you will need to make sure you have selected the frameset.

NOTE

Click the expander arrow on the Property inspector to view all Frameset properties if they are not already visible.

2.
Drag the border between the top and bottom frames until the top frame is 50 pixels high.

Use the Row Value in the Property inspector to check the height, or type 50 in the Row Value text field to get the exact height. Make sure Pixels is selected from the Unit drop-down menu.

3.
With the outer frameset still selected, click the bottom row in the RowCol Selection area on the Property inspector to select the bottom frame of the frameset. Next to the Row Value text field, verify that Relative is selected from the Unit drop-down menu.

This will allow the bottom row to expand or contract depending on how large the user's browser is and how much space is left after the top row has been allocated the 50 pixels that were assigned to it. By default, Dreamweaver will automatically place a 1 in the Row Value text field. If you view the HTML code for the frameset size you will see frameset rows="50,*". The 1 in the Row Value text field, in conjunction with the Relative unit chosen from the menu, is the same as the asterisk (*) in the code; it represents a size that is relative or proportional to the other rows in the frameset.

4.
In the Frames panel, click the nested frameset, represented by the thick inner border around the two columns in the bottom row, to select it. In the visual representation of the frame on the Property inspector, click the left column in the RowCol Selection area to select the left frame.

The left column in the Property inspector darkens to indicate it has been selected. Use these tabs to select the columns or rows in a frameset.

5.
In the Column Value text field of the Property inspector, type 150 and press Return (Macintosh) or Enter (Windows). Verify that Pixels is selected from the Unit drop-down menu.

The left frame's width is adjusted to 150 pixels.

NOTE

When you are deciding how to resize the frame, keep these unit options in mind:

Pixels: This option sets the absolute size of the selected column or row to the number of pixels that you enter. It is the best option for any frame that needs to have a set size. If other columns or rows are defined by a different Unit option, those other columns or rows are allocated space only after rows or columns specified in pixels are their full size.

Percent: This option specifies a percentage that the current column or row should take up in its frameset. Columns or rows specified with units set to Percent are allocated space after columns or rows with units set to Pixels and before columns or rows with units set to Relative.

Relative: This option specifies that the current column or row will be allocated space using the current proportions relative to the other columns and rows. Columns or rows with units set to Relative are allocated space after columns or rows with units set to Pixels and Percent, but they take up all remaining space. If you set the bottom or the right frame to relative, the frame size changes to fill the remaining width or height of the browser window.

6.
In the Property inspector, click the tab above the right column to select the right frame of the nested frameset. Next to the Column Value text field, verify that Relative is selected from the Unit drop-down menu.

This will allow the right column to expand or contract depending on how large the user's browser is and how much space remains after the left column has been allocated the 150 pixels assigned to it.

7.
Save the frameset by choosing File > Save Frameset.

If this command is not available, first select the outer frameset by clicking the border between the top and bottom frames.

NOTE

If you have the frameset selected, Command+S (Macintosh) or Control+S (Windows) saves the frameset only.

Leave the locations.html file open to use in the next exercise.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint