Framesets and Frame Documents - HTML

Frames are a bit complex to implement, as they require a separate document to define the frame layout as well as individual documents to actually occupy the frames. This section takes you through the pieces of the defining document, the frameset, and shows you how to create a frame-based layout.

Creating a frameset
A frameset is created like any other HTML document except that its content is limited to frame-related tags. The following skeletal document is an example of a frameset document:

Frames allow one region to scroll while others remain static.

Frames allow one region to scroll while others remain static.

...</head><frameset attributes><frame attributes></frame><frame attributes></frame> ...</frameset></html>

Note the following about this code:

  • The document uses the frameset DTD. The frameset DTD is essentially the same as the transitional DTD except for the addition of the frame-specific tags (and replacement of the <body> tag, covered shortly).
  • There is no <body> element. Instead, the <frameset> tag provides the next level container under <html>.
  • The <frame> tags, nestled inside the <frameset> tag, define the content for the frames and various properties of the frame itself.
  • Other than the <frameset> and <head> sections, there is no other content in the document.

The basics of the <frameset> and <frame> tags are covered in the next two sections.

The <frameset> tag
The <frameset> tag defines the layout of the frames in the document. It does so by specifying whether the frames should be laid out in columns or rows and what each column’s width should be.
The <frameset> tag has the following format:

<framesetcols |rows = “column_or_row_size(s)”>

The column or row sizes can be specified as percentages of the user agent window, pixels, or an asterisk (*), which allows the user agent to assign the size. In the last case, the user agent will typically split the remaining space across the columns or rows that specify * as their width. In any case, the resulting frameset will occupy the entire user agent window. The number of entries of the cols or rows attribute also define how many frames will be used—each entry needs a corresponding <frame> tag within the <frameset>.

For example, consider these definitions:

Note: In the last <frameset> example, the second row is defined at 200px. However, if the user agent’s window is larger than 300 pixels high (the total of the rows defined), the second row will be expanded to fill the space.

The <frame> tag
While the <frameset> tag is responsible for defining the layout of the entire page (in terms of number of frames and their size), the <frame> tag is responsible for defining properties of each frame.

The <frame> tag has the following, minimal syntax:

The name attribute gives the frame a unique name that can be referenced by URLs, scripts, and so on to control the frame’s contents. The src attribute is used to specify the URL of the content that the frame should display. Using only these two attributes results in a frame with minimal margins, no borders, and automatic scroll bars. More information on controlling these attributes of the frame is covered in the next few sections.

Frame margins, borders, and scroll bars

The <frame> tag supports the additional attributes.
Frame margins, borders, and scroll bars

As mentioned in Table, the longdesc attribute is not fully supported by most user agents. Use it if you need to specify a long description, but don’t count on its functionality. The margin attributes, marginheight and marginwidth, are self-explanatory, controlling the inside margin of the frame. They should be used to provide enough white space around the frame’s content to help make the content clear.

Tip:When using images in a frame, consider setting the margins to zero so the graphic fills the frame entirely without superfluous white space.The frameborder attribute controls whether the bounding border of the frame is visible or not.

Figure shows a frameset without borders, and shows the same frameset with borders.

Without borders, the frame divisions are hard to distinguish, which may lend well to a seamless page design.

Without borders, the frame divisions are hard to distinguish, which may lend well to a seamless page design.

Frame borders can help your users understand the layout of your document and where the frame borders are so they can better manipulate them.

Frame borders can help your users understand the layout of your document and where the frame borders are so they can better manipulate them

The scrolling attribute controls whether the frame will display scroll bars or not. The default setting, auto, allows the user agent to decide—if the frame contains too much content to be displayed, the user agent will add scroll bars. If the content fits within the frame, the user agent will not display scroll bars. Use the scrolling attribute accordingly—if you want scrollbars all the time, or don’t want scrollbars no matter how the frame’s content displays.

Permitting or prohibiting user modifications
The <frame> tag also has a noresize attribute that, when set, will not allow a user to modify the size of the frame. The default is to allow the user to resize the frame. To resize a frame, the user positions the pointer over the frame division and drags the border. the left frame being enlarged—as a consequence, the right frame shrinks to compensate.

To resize a frame, the user positions the pointer over the frame border until a double arrow cursor appears.

To resize a frame, the user positions the pointer over the frame border until a double arrow cursor appears


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics