Creating a frame
When web developers start creating websites, they need a way to create a simple layout which doesn’t create constant maintenance issues and flexible enough to create, delete or modify existing pages. When starting, web developers tend to either use a table or frame for this purpose. Using a table or frame provides a basic layout which is capable of the following:
- Left pane
- Consistent navigation
- Right pane
- Content, such as text, tables, lists, links, pictures
Frames can provide these basic layout options with a few caveats:
- If you don’t have a solid understanding of HTML, you might them difficult to grasp at first
- No support for version 4 browsers
- Search engines have difficulty indexing your pages
In this article, we’ll create a simple two column frameset. If you would like to follow creating a frameset’s step-by-step development or try your hand at creating you will find the project file link helpful.
Working with framesets
It’s recommended not to work with the frameset in Dreamweaver. The reason is because when you load a frameset into Dreamweaver it will render the frameset the same way as a browser. This makes editing a frameset in Dreamweaver difficult and confusing. It’s recommended to work with a frameset in a text editor such as Notepad or PS Pad.
How framesets work
For this article’s purpose, our frameset will need two files. One will be our left panel, which is used for navigation. The other panel, right panel, will be used for content. We will need one additional file which will pull our two panels into a frameset. In the project files download, you will find a file named frame.html with the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <frameset></frameset> </html>
First, our DOCTYPE has changed to accommodate for a frameset. Next, when the browser reads this file, it sees we have a frameset tag. Inside the frameset tag, we place a reference to our files, in our case, left and right panel which will be pulled inside our frameset. Thus, when this file loads, it will render both left and right panel as one frameset, page or layout.
Create left and right panel
In the same directory that you stored frame.html, create two new HTML files and name them:
- Left panel
- left_side.html
- Right panel
- main_content.html
Nesting frames inside our frameset
Remember, inside our frameset tag, we nest our two panels which will be pulled and rendered as one page. Add the following code to the frameset page (frame.html):
<frameset cols="180, *"> <frame src="left_frame.html" name="left"> <frame src="right_frame.html" name="right"> </frameset>
Let’s examine the code in greater detail:
- First, inside the opening frameset tag, we specify how our panels are rendered, possible values are:
- Columns
- Rows
- Next, we specify how many pixels each panel will have in the browser
- Since our left panel is referenced first, it’s assigned 180 pixels
- Since our right panel is referenced second, it’s assigned the remaining space in the browser
- The asterisk (*) is shorthand syntax with frames which allocates the remaining space
- Inside the frameset, we reference the left panel first:
- Src
- Informs the browser where our file is located
- Src
- Name
- Assigns our left panel a name of left, which is used to navigation purposes
We reference our right panel using the same techniques.
We'll continue by adding content to the left and right panel in the next article.