Chapter 6 Working with Frames
Agenda Create Frames Customize Frame Borders Control Frame Margins Add Alternative Text Prevent Frame Resizing Hide or Display Frame Scroll Bars Target a Link Create a Nested Frameset Create an Inline Frame
Create Frames You can use frames to divide the Web browser window into panes. This allows you to display different pages in the browser window at the same time. For example, you might use one frame to display a navigational page that lists links to different pages on your Web site and show the result of a clicked link in another frame. You can use the <FRAMESET> and <FRAME> tags to define the frame structure. The <FRAMESET> tag creates a frameset, dividing the window into sections, while the <FRAME> tag specifies which page goes into which frame.
Create Frames(Continued) Create and save a new HTML document, including only the basic <HTML>, <HEAD>, and <TITLE> tags. Below the </HEAD> tag, type <FRAMESET and a space. Define the frameset to include two or more rows or columns and specify a size in pixels for the rows or columns. To create frames in rows, type ROWS=”?,?”>, replacing ? with the height of each row in your frameset. To create frames in columns, type COLS=”?,?”>, replacing ? with the width of each column in your frameset. You can also set a row or column size as a percentage by typing the value followed by a percentage sign, such as 30%.
Create Frames(Continued) Type <FRAME NAME=”?”, replacing ? with a name for the frame. Type a space and SRC=”?”>, replacing ? with the name and location of the Web page you want to appear in the frame. Repeat the previous steps for each frame. Type </FRAMESET>. The Web browser displays the frames. In this example, two row frames appear in the browser window. You can use a nested frameset to combine rows and columns in a frameset.
Frameset attributes Optional Attributes Attribute Value Description cols pixels % * Specifies the number and size of columns in a frameset rows Specifies the number and size of rows in a frameset Standard Attributes Attribute Value Description class classname Specifies a classname for an element id Specifies a unique id for an element style style_definition Specifies an inline style for an element title text Specifies extra information about an element
Frame Attributes Optional Attributes Attribute Value Description frameborder 0 1 Specifies whether or not to display a border around a frame longdesc URL Specifies a page that contains a long description of the content of a frame marginheight pixels Specifies the top and bottom margins of a frame marginwidth Specifies the left and right margins of a frame name text Specifies the name of a frame noresize Specifies that a frame is not resizable scrolling yes no auto Specifies whether or not to display scrollbars in a frame src Specifies the URL of the document to show in a frame
Frame Attributes Attribute Value Description class classname Standard Attributes Attribute Value Description class classname Specifies a classname for an element id Specifies a unique id for an element style style_definition Specifies an inline style for an element title text Specifies extra information about an element
Example <frameset cols="33%,34%,33%" bordercolor="black" border="5"> <frame src="pw1.html"> <frameset rows="33%,34%,33%" border="5"> <frame src="pw2.html"> <frame src="pw3.html"> <frame src="pw4.html"> </frameset> <frame src="pw5.html">
CHANGE THE FRAME BORDERS You can change the thickness of your frame borders using the BORDER attribute. By default, Web browsers display the borders around your frames at a thickness of 6 pixels. You can set your frame borders to another size as well as control the color of the borders. Within the <FRAMESET> tag, type BORDER=”?”, replacing ? with a thickness value in pixels. The Web browser displays the frames with the designated border thickness.
CHANGE THE BORDER COLOR Within the <FRAMESET> tag, type BORDERCOLOR=”?”, replacing ? with a color value. The Web browser displays the frames with the designated color.
Control Frame Margins You can control the amount of space that appears between a frame border and the contents of the frame. Using the MARGINWIDTH and MARGINHEIGHT attributes, you can set margins for the top, bottom, left, and right sides of your frames. Margin space is measured in pixels. Within the <FRAME> tag, type MARGINWIDTH=”?”, replacing ? with the amount of space you want to set for the left and right margins. Type a space and MARGINHEIGHT=”?”, replacing ? with the amount of space you want to set for the top and bottom margins.
Add Alternative Text You can use the <NOFRAMES> tag to insert alternative text for users whose browsers do not support frames. In some cases, the user may have decided to turn off frame display. Alternative text can alert them to the content they are missing. Directly above the </FRAMESET> tag, add a line and type <NOFRAMES>. Type any alternative text you want to appear. Type </NOFRAMES>. If the user’s browser does not support frames, or the frame display is turned off, a page appears with the alternative text.
Prevent Frame Resizing By default, users can resize the frames in your Web page, allowing them to view more information in a frame. You can control your page layout by restricting frame resizing. This can be useful if you need the frame dimensions to remain fixed so that the content is viewed correctly. Type NORESIZE inside the <FRAME> tag of the frame you want to control. You do not assign a value to the NORESIZE attribute. You can repeat the previous step for any other frames for which you want to prevent resizing.
Hide or Display Frame Scroll Bars Web browsers automatically display scroll bars if a frame’s content exceeds the size of the frame. You can use the SCROLLING attribute to control when scroll bars appear. A yes value displays scroll bars, while a no value hides the scroll bars. Click inside the <FRAME> tag of the frame you want to control. Type SCROLLING=”?”, replacing ? with yes to display scroll bars or no to hide scroll bars. You can repeat the previous steps to control the scroll bars in other frames.
Target a Link You can make links on your pages open content in specific frames. To target links to particular frames, you must identify each frame with a unique name and then reference that name with the <A> tag’s TARGET attribute. You can also open a page into the entire browser window by using a TARGET value of “_top”. This breaks the user out of the current frameset. Open the HTML file where the link should appear. Type <A HREF=”?”, replacing ? with the target page. Type a space and TARGET=”?”>, replacing ? with the frame name. Type the link text. Type </A>.
OPEN ON TOP OF A FRAMESET Open the HTML file where the link should appear. Type <A HREF=”?”, replacing ? with the target page. Type a space and TARGET=”_top”>. Type the link text. Type </A>.
Create a Nested Frameset You can nest a frameset within another frameset, creating a combined frameset. For example, you might place a two-frame frameset within the largest frame of your main frameset. In the frameset document, add a line where you want to insert a nested frameset. Type <FRAMESET ROWS=”?,?”> to insert rows, or type <FRAMESET COLS=”?,?”> to insert columns, replacing ? with the row or column values for your frames. Add the frame tags to define the frame names and source pages. Type </FRAMESET> to complete the nested frameset.
Create an Inline Frame You can create a floating frame, also called an inline frame, that appears within the content of a Web page. Inline frames do not require a frameset. Type <IFRAME SRC=”?” where want to insert an inline frame, replacing ? with the name and location of the page you want to appear within the inline frame. Type a space and NAME=”?”, replacing ? with the name of the inline frame. Type a space and WIDTH=”?” HEIGHT=”?”>, replacing ? With width and height values. Type </IFRAME>.
Lab 6 Create Frames Customize Frame Borders Control Frame Margins Add Alternative Text Prevent Frame Resizing Hide or Display Frame Scroll Bars Target a Link Create a Nested Frameset Create an Inline Frame