WORKING WITH FRAMES IN DREAMWEAVER

FRAMES - Good or Evil?

There is a lot to be said on both sides of this philosophical debate. Since good always wins out in the end let's start with...

EVIL: Frames make it difficult to bookmark favourites (because of the multiple pages on display); Frames make it hard to print the correct page; it is more complex for developers to build a frames site; multiple HTML pages can take longer to load than a single page; search engines may miss out on content when indexing a site with Frames; advertising banners stay put.

GOOD: The navigation stays put - the user does not have to scroll back up to buttons; Frames can make a site easier to update for novice designers - the graphics are separate from content; Frames are often used where content is dynamically created from a database eg: Active Server Pages (ASP); more flexible content delivery; unified look and feel to a site.

This is not to say that Frames are either all good or all bad - as with most things in life, there are shades of grey - it is important to make an informed decision. I do think however, that it is more than just a coincidence that Santa and Satan are spelled almost identically...

OVERVIEW - We are first going to create a layout using frames - we want to end up with a Frameset with three frames - One BANNER frame across the top, one NAVIGATION frame down the left and one CONTENT frame - the main part of the layout. In FIREWORKS we will make a banner then create a small set of buttons and use the Fireworks HTML as the basis of the NAVIGATION frame.

1 - CREATE A BANNER - In Fireworks, create a new image 600 X 70 Pixels. Create a banner using the text tools and an effect or two that we picked up last week. The content is up to you.

Note the colour of your background - in F/W go to MODIFY > CANVAS COLOUR > CUSTOM and set a colour - remember - if you use a DARK BACKGROUND then use LIGHT COLOURED TEXT and Vice versa. Keep it simple for today. When you are done, then OPTIMISE your image using the tools in the "Optimise" palette.

Export your banner as "banner.gif" - we DO NOT NEED HTML at this point - remember to set up a "Root Folder" which will contain all the HTML files as well as an "images" folder - save the banner into the images folder.

2 - CREATE FOUR BUTTONS - If you kept your rollover button exercise from last week this may be the time to pull it out - if not then we will have a little time to recreate a simple set of buttons in F/W. For the purpose of this exercise, the buttons do not have to be rollovers - just a set of graphics or even one large graphic representing four buttons - we could use an image map to link it. Alternatively, we can just create text links to demonstrate principles.

Set up a NEW DOCUMENT in F/W according to last week's instructions - 150Wide X 200High - it would be useful to use the same Background Colour as the Banner image. Create four buttons - use the SLICE tool to define the buttons, Optimise the graphics and then EXPORT WITH HTML.

TO DREAMWEAVER - We will set up a FRAMESET with THREE FRAMES - each of the frames will need to contain a complete and separate HTML page. We will be creating the banner page once we have created the FRAMESET, However for the purpose of this exercise it will be easier to create the rest of the content first and then insert it.

3 - CREATE CONTENT PAGES - In Dreamweaver - Remember! You must ALWAYS set up a NEW SITE first - this WILL SAVE YOU A LOT OF HASSLE in about half an hours time - see past Dreamweaver exercises for details.

• Create a new document and SAVE AS "content1.htm". Simply type in a heading that describes it as PAGE ONE and perhaps put some junk text in it. SAVE.
• Change the text of the heading to say PAGE TWO and then SAVE AS "content2.htm"
• Change the text of the heading to say PAGE THREE and then SAVE AS "content3.htm"
• Change the text of the heading to say PAGE FOUR and then SAVE AS "content4.htm" then CLOSE the document.

4 - FRAMESET - Create a NEW DOCUMENT - go to MODIFY > FRAMESET > SPLIT FRAME DOWN. You can also choose INSERT > FRAMES > TOP - same effect. This will divide the HTML page into a top and bottom Frame - you can change the size of the frame by dragging the FRAME BORDER. We still need to spit the bottom frame into two vertically to place the navigation at the left of the pages.

Choose WINDOW > FRAMES to view the FRAMES tab menu - this will help to select the correct Frame area when needed.

Select the bottom frame and choose MODIFY > FRAME > SPLIT FRAME LEFT . Use the Frame Borders to resize the Frame windows. Click on the Border and use the PROPERTY INSPECTOR to set the BORDER WIDTH TO "0". It helps if you now name you frame areas - name then "top", "nav" (that's the left one) and "main" using the property inspector.

Go to FILE > SAVE FRAMESET AS and name your Frameset "frames.htm".

5 - BANNER PAGE - Click into the TOP Frame window and insert your banner image from step one. Make it CENTRE ALIGNED and set the PAGE BACKGROUND COLOUR using MODIFY > PAGE PROPERTIES. Try to resize the height of the top frame to be the same or marginally taller than the image - set all page borders to zero using MODIFY > PAGE PROPERTIES. With the cursor still active inside this page go to >SAVE AS and name your file "banner.htm".

6 - NAVIGATION - Use the FRAMES TAB to choose the left frame - if you can't see the Tab then go WINDOW > FRAMES to display. Click on the NAV frame. Note that the PROPERTY INSPECTOR now gives you options for borders and Scrolling. Select the SRC or SOURCE function to find and insert your "buttons.htm" file from before.

7 - CONTENT - Finally select the "main" frame and select "content1.htm" to be the content of that Frame. The page should be looking like it is a real web page or something. Go to FILE > SAVE ALL.

8 - LINKING BUTTONS - Choose your first button and set the LINK to "content1.htm". you now have to consider the TARGET of the link - i.e.: which part of this Frameset will the content load into. If you do not specify it will replace the whole Frameset.

Go to the TARGET DROPDOWN MENU in the Properties Inspector and choose "MAIN" - this ensures it loads in the correct frame.

Choose your second button and LINK to "content2.htm" choosing the MAIN frame as the TARGET.

Choose your third button and LINK to "content3.htm" choosing the MAIN frame as the TARGET.

Choose your fourth button and LINK to "content4.htm" choosing the MAIN frame as the TARGET.

Go to FILE > SAVE ALL - Preview in browser and Presto! - a talking pig.

If there is time we will follow up with a look at LAYERS IN DREAMWEAVER.