Home
| Work & Business
| Websites & Web Pages
| Create a Web Page
| How to Create Web Page Frames
How to Create Web Page Frames
by Lysis
-
Overview
Frames are an HTML technique used to lay out a Web page design. Frames can be placed on the right or left side of the page, and at the top or bottom. This technique can be used to place a header navigation bar, a footer bar and a side navigation area for readers to browse a website more easily. Frames are placed in a Web page by using HTML. An HTML file can be created using a simple text editor, but more advanced editors like Microsoft FrontPage color code the content. This allows you to quickly find the frames code in the page when you need to edit the code.
-
-
Step 1
Open FrontPage. In the "File" menu, select "New." In the list of selections, choose "Page." A dialog box opens and asks what kind of file to create. Choose "Blank Page." FrontPage automatically creates a file with a basic template for an HTML Web page.
-
Step 2
Click the "HTML" tab at the bottom of the FrontPage window. Find the "<body>" and "</body>" tags in the newly created page. Any code that creates a layout or content on the page is placed between these tags. This includes the frames code.
-
Step 3
Insert the frameset tag, which indicates whether you want vertical or horizontal frames. The tag includes a property setting that specifies the layout for the frames. Below is an example of a frameset tag specifying horizontal frame rows:
<frameset rows="25%,75%"></frameset>
This code specifies a frame taking up the top 25 percent of the page and a second frame taking up the bottom 75 percent of the page.
-
Step 4
Populate the frames by adding code. Now that the layout is set, you need to point each frame to the corresponding web page that will appear there. For instance, if you have a top frame presenting a navigation window, the frame needs to have its "src" (for "source") parameter set to the location of the file containing the navigation window content. Below is an example of setting frame code:
<frameset rows="25%,75%">
<frame src="my_top_frame_page.htm">
<frame src="my_bottom_frame_page.htm">
</frameset>
The order of the "<frame>" tags listed must match the order set in the "<frameset>" tag. These tags identify the HTML pages corresponding with each frame, which are loaded along with the main Web page.
-
Step 5
Save the new file when you're finished. At the bottom of the FrontPage console, click on the "Preview" tab. This gives you a preview of the Web page, showing what it will look like when you upload it to your Web host.
- 3
- Text editor or HTML editor, such as Microsoft FrontPage
- Text editor or HTML editor, such as Microsoft FrontPage
