Web AuthoringWeb AuthoringLesson 28Lesson 28

Flash, CSS.Flash, CSS.

O Power

ChecklistChecklist

If you have not set up your football site in If you have not set up your football site in Dreamweaver, do it before this lesson.Dreamweaver, do it before this lesson.

If you have not drawn a sketch of the final design If you have not drawn a sketch of the final design (with or without your changes) do it before this (with or without your changes) do it before this lesson.lesson.

If you have not done lessons 23, 24, 25, 26, 27 do If you have not done lessons 23, 24, 25, 26, 27 do not attempt to do this lesson.not attempt to do this lesson.

In this lesson:In this lesson:1. Preparation of navbar library item and images.1. Preparation of navbar library item and images.2. Preparation of images for rolling banner.2. Preparation of images for rolling banner.

Navbar

Rolling Banner

Making Rollover Images for navbarMaking Rollover Images for navbar

This Process has been outlined in This Process has been outlined in previous lessons… (18 & 21 A)previous lessons… (18 & 21 A)

I will outline it here again but if you want to I will outline it here again but if you want to try it without my instructions you can.try it without my instructions you can.

1. Open Fireworks…new file….canvas colour black…height 30px…width 100 px…

2. Select text button

3. Type ‘Football’ onto the canvas.

4. Select black arrow..highlight word (you will see a blue box around the text….

5. With the text still highlighted, using the black arrow (NOT the text tool!!!) select desired font face, colour and size….(I chose Eras Demi font size 21, colour white)

6. With the black arrow selected you can move the text around to a central postion…use the grid to help you.

Grid?

View…Grid….Show Grid….

The Grid can be edited….smaller numbers will give you more exact measurements!

7. Use the crop tool to get the sizes exact….

8. Left click on the top left corner and drag you should see a black box expanding as you do this.

9. Watch your dimensions in the bottom left…maintain the same height on all the buttons otherwise the navbar will look uneven

9.When you are happy with the image click return…save it as foot1 in your images folder….

10. Change Canvas colour

I selected #99ff00….

Cilck on the black arrow …select the text (it should be white text on green background)…you will see a blue box surrounding the text….select text colour…

I selected #cc0033….save as foot 2….

You will need to repeat that process for each of the 5 remaining navbar buttons….

It’s important to start the text in the same place on each button…use the grid!

It’s important to use the crop button accurately!

Open a new library page in dreamweaver…gice it the title ‘navbar’ and save it as ‘navbar’ in the ‘library’ folder.

Insert a Navigation Bar….

Insert Horizontally… use tables

Click Browse next to Up image to find ‘foot1’ Click Browse next to Over image to find ‘foot2’

Add element by clicking +…

Each time Click Browse next to Up image to find ‘image1’ and Click Browse next to Over image to find ‘image2’

Save and close the library item.

We’re going to prepare 3 ‘ball’ images for the rolling banner…

Go online and find them….we’re going to resize them and make their backgrounds transparent….

Open your first ball image in fireworks…resize it to 100x100 It can be made smaller in Flash later if necessary – don’t make it smaller now because it’s better to start big and scale down. For now 100x100 is big enough

Resize 1….

Resize 2….

Press ctrl + to increase the display size of the image (don’t worry, you’re not changing the actual size of the image: that’s just so you can see it better)

We want to make the area around the ball transparent…one method is to use the eraser button (see lesson 21 A)…

We’re going to cut the circle out and paste into a new documet with a transparent background

The crop button only works as a square so….select the ellipse tool.

Note: this next part is a tricky operation so resist the temptation to smash the computer against the wall (unless you’ve got loads of cash)

READ this 3 times before you begin:

With the Draw Ellipse tool selected, Left Click and drag (holding down the shift button – gives you a perfect circle) from the bottom right to the top left.

Release the MOUSE BUTTON FIRST then release the shift key.

You need to get the circle more or less exactly over the ball….. Keep trying…deep breaths and ‘ctrl z’ will help.

When you’ve got a circle you’re happy with click modify…convert path to marquee (editable area)…copy and paste it into a new fireworks document with a transparent background.

Save the image in your ‘images’ folder and repeat for two other balls….

100x100px

The rest of the banner (the individually scrolling letters of the words ‘More Balls’) will be made in Flash.

Coming soon!

Next lesson…2nd navbar