Setting up a standard website in Dreamweaver MX with frames pages

Set up your site in Dreamweaver as follows:

Open Macromedia Dreamweaver and move to the right hand side of the screen to select "Define a Ste"

In the dialog box, type the name of the website which in this case is net.FM

Then click next, when the dialog box changes, select "No, I do not want to use a server technology.

Click next again, in the space to select a location for the website, do as shown below, substitue the H:\ for the location of your home folder

e.g. V:\OCR\Module 21\net.FM Website\

Click next, complete the next dialog box as shown below, again, substitue H:| for your home folder location:

e.g. V:\OCR\Module 21\net.FM Website\

The next dialog box should be completed as shown below:

Click next, and one final box will pop up as shown below:

The files box should now look like this:

To make up Frames pages, you need to understand what how frames work.

The page can be divided up in to spaces called frames, these are saved as a frameset under one name like: index.htm

For example, you may want to divide the page up into two areas like this website,

There may be a thin frame on the left hand side of the page for links buttons, and a a large panel covering the rest of the page for the content.

You may wish to have three frames:

The frames can be individually altered, and links can be placed on one frame that will put a target page into one of the other frames.

In the example below, hover your mouse over the links buttons on the left frame to see the effect.

So, how do we make a frames page.

With your site setup, click on file and select new, a panel will appear with basic page highlighted in the left panel.

Select Framesets and choose the appropriate option in the middle panel named, Framesets.

In this example, I have chosen "Fixed Left".

The main screen will now appear showing the two frames as selected

At the bottom of the page, you will see two tabs, "Untitled-1" and UntitledFrameset-2", right click on the second one and select "Save Frameset As"

Change the Filename to Index.htm and click on SAVE.

The main page will then display again, we need to save the frames now, click once in the LEFT Frame,

and the Tab at the foot of the frames wil change to something like "UntitledFrame-2"

Right click the name, and choose "Save Frame As", a panel will pop up, in the Filename, Type "Left Frame.htm" and SAVE

Click in the larger frame, and the tab at the foot of the page will change to something like "Untitled-2", again, right click the tab and choose "Save Frame As"

Repeat the procedure for the first frame but this time, name the frame "Main Panel.htm"

You can begin to create links in the left frame, and make new pages up that will appear in the "Main Frame"

In the example below, I have changed the background colour of the left frame to black and innserted two buttons.

The main frame on the left remains white.

Extra pages can now be made up and link buttons can be hyperlinked to them.

To make a link button work properly, the link must be made and then the "Target Frame" must be set, to do this, follow the instructions below.

I have added in two extra pages for the website called "Story 1.htm" and "Story 2.htm"

I will make the button titled, Task 1, link to the page called "Story 1.htm"

First of all, select the button titled "Task 1" and look at the "Property Bar (Inspector) at the foot of the page.

In the link box, type the location of the target page, in this case the page is in the site root, so the link will be : " Story 1.htm "

The Target Frame is the Main Panel but it is called "mainFrame" by Dreamweaver.

This means that when the button "Task 1" is clicked on the website, it will open the page called "Story 1.htm" in the main frame on the right.

Save your work, and press F12 to preview the pages, it would be a good idea to put some text or images on the pages, "Story 1 and Story 2.

This procedure is repeated for any other links that are required.