The <frameset> and <frame> tags allows you to divide a window into multiple sections, with each section displaying a different HTML page. Because many designers have used framesets indiscriminately, frames have become the subject of great debate among Web surfers. In addition, when you provide links to other people's pages and force those pages into your frames, you degrade and possibly destroy the design structure intended by the page's author. Doing so is considered rude and poor design practice. The decision to use frames depends on your site design strategy including your target audience, navigational structure and other design decisions. Frameset tags replace the body tag. For backward compatibility and to display a message to users whose browser does not support frames, include <noframes>Insert substitute text here to inform the user their browser does not support frames</noframes>.
5.05 Plan Frame Layout
Before writing frameset code, it's necessary to plan what pages you want to initially appear in each frame when the frameset is loaded and how each of the frames will change based on your navigation structure. Specifically, you need to decide the folowing:
- How many frames do you need?
- How should the frames be positioned on the screen and what size should they be?
- Which frames will remain static and which ones will change, and how do they change?
- Should you allow users to resize frames and should the frames scroll if necessary?
5.06 Create Frame Layout
The basic syntax for creating a frameset is:
<html>
<head>
<title>Page Title</title>
</head><frameset>
Frame definitions
</frameset>
<noframes>No frames content here</noframes>
</html>
Click here to view a sample frameset
Syntax:
<frameset rows="100,*">
<frame name="menu" src="menu.html">
<frame name="body" src="body.html"><noframes>Substitute content goes here</noframes>
</frameset>
Create frames in rows
- Download the lesson files.
- Create a new HTML document.
- Create a frameset with two rows with the one on the top 100 pixels high and the one on the bottom taking up the rest if the window. Name the top frame navbar which displays navbar.html and the bottom frame main which displays main.html.
- Insert <noframes> tag.
- Save the file as lab05a.html.
- View the file in the browser.
Click here to view the frameset
<frameset cols="150,*"><frame name="menu" src="menu.html">
<frame name="body" src="body.html"></frameset>
<noframes>Substitute content goes here</noframes>
- Edit the lab05a.html document.
- Change the frameset to two columns with the one on the left 150 pixels wide and the one on the right taking up the rest if the window. Name the left frame navbar1 which displays navbar1.html and the right frame main which displays main.html.
- Save the file as lab05b.html.
- View the file in the browser.
Click here to view the frameset
<frameset rows="*,*" cols="*,*" ><frame name="topLeft" src="frame1.html" >
<frame name="topRight" src="frame2.html" >
<frame name="bottomLeft" src="frame3.html" >
<frame name="bottomRight" src="frame4.html"></frameset>
<noframes>Substitute content goes here</noframes>
- Edit the lab05b.html document.
- Change the frameset to two rows 15%, *; and two cols 150, *. Name the top left frame topleft which displays blank.html. Name the top right frame topright which displays heading.html. Keep the navbar1 and main frames the same as before.
- Save the file as lab05c.html.
- Create the two additional documents (blank.html and heading.html) that appear in in the top row.
- View the file in the browser.