software.visicommedia.com - Home - Products - AceHTML Pro

Your current settings may prevent you from accessing all the features of this site (err. 1). Please see our site requirements.

Home/ Products/ AceHTML Pro/ Support/

Download

Free trial version
Updates

Order
Upgrade

Feedback

We are eager to hear from you. Send us your comments and suggestions >

Complementary product

AceFTP 3 Pro
Discover the power of this advanced FTP client solution designed in such a way that both novices and professionals will be astonished by its ease of use. AceFTP 3 Pro is about total control, security, efficiency, and simplicity.

Learn more

Banners

Share your satisfaction with AceHTML software by telling your visitors.

Place a banner on your Web page.

Partner Sites

- Web Templates
- Turnkey Websites
- Royalty Free Stock Photos

Tutorial: Frame up your Web pages


	Introduction

Sometimes, mostly for navigation purposes, you need to split up your Web page into different portions on the screen. We call those independant zones "frames".

That allows you to keep a menu in a portion of the screen... and display the contents pages in another portion.

Each frame content is an independant HTML page. That means that if you want to create a 2-frame page... you'll need at least 2 separate HTML documents (one for each frame).... and a frame-definition page in which you will define the frames to be used.


	Step One – Preparation

The first thing you should decide on is the names you'll give to your frames. Each frame needs to be named in order for contents to be displayed in the correct frame (and not have contents displayed in your small menu frame).

For this example, we'll simply name our frames "menu" and "contents". The menu frame will be a small narrow column on the left of the page with our site navigation menu... while the contents frame will fill the rest of the screen and display contents of your Web site. It will look like this:

The visitors will click on a link from the menu frame and the chosen page will be displayed in the contents frame.

Then you have to make your contents pages. These are normal HTML pages, as you would do for pages without frames. No special coding is needed for them.

But one page that will have special needs, it's the menu page.


	Step Two – Menu page

You begin by doing your menu page exactly as you would do normally for a regular page. But we'll add a little something...

Normally, when you click on a link, the new page opens in the same window and frame. In the context of a menu frame, we don't want that... we want the destination page to open in the contents frame, even if we click on the link from the menu frame.

There are two ways to do that... the most common is to choose the a destination frame/window when you define an external link (to get something like <A HREF="page2.html" TARGET="contenu">page 2</A>). But if you have many links, that would take you a long time to modify all your link definitions.

There's a much better way to do it... simply add the following tag right after the <BODY> of your page: <BASE TARGET="contenu">

This will assume the target frame to display the destination page you chose will be the frame named "contents", unless you specify otherwise in the link itself.


	Step Three – Frames definition

Now, you have at least one contents page and the menu page done and ready to be used.

It's time to create the frames and insert those pages within the frames.

Create a new HTML document and save it in the same directory as your menu and contents HTML pages. with the name "index.html". Then go in the TABLES, FRAMES and LISTS menu tab... then click on the 5th button to create a new frame definition.

You will get a large window with a blue background. This blue backgrouns represents the whole Web page area as seen in your browser. On the left upper part, you'll see various buttons to create frames. We'll use the first button up there to split frame vertically... You'll see the blue area divided in two parts... each part is a frame.

frames

We'll start by the left part... make sure it's blue by clicking on that area... then access its properties (by clicking the 3rd button on the left or by using the contextual menu of your mouse). First choose the contents of that frame using the file navigation menu in the "File name" field. This will be the initial contents of the frame, until changed. Then in "Frame name" field, enter the frame name. In this case, it's "menu" (case is important). It should look like this on the left.

We won't modify the scrolling (automatic = only showing scrolling bar if needed, yes = show it all the time, no = never show it), nor the margins of the frame.

Then go in the Other Properties tab on top of this properties window.... and enter a width of value 200, making the left frame of a width of 200 pixels (the right frame will occupy the rest of the space). Click on OK.

You'll be returned to the frames creation wizard window. Click on the right part to select the right frame and access its properties the same way you did above for the left frame.

This time, select the name of the first contents page (to be displayed in the right frame). Name the frame "contents" and leave all the default options there. Click OK to return to the frames creation wizard. You're now done with the creation of your frames... so you can click OK to exit this wizard.

Save your file again and you're done!

You should see the following code inserted in your HTML document:

<frameset cols="200,*">
<frame name="menu" src="menu.html">
<frame name="contenu" src="contenu1.html">
<noframes>
<BODY>

</BODY>
</noframes>
</frameset>

Your frames definition page is complete now. You can view your framed page by viewing this index.html

You can play around to remove the borders or reduce the margins... to get the look and feel you want... but you are now mastering the basic principles to do a framed page.

Have any comments? Please give us your feedback.