university of sunderland cdm105 session 6 dreamweaver and multimedia fireworks mx 2004 creating...

University of Sunderland CDM105 Session 6

Dreamweaver and Dreamweaver and MultimediaMultimedia

Fireworks MX 2004

Creating Menus and Button images


MultimediaMultimedia

The same issues (i.e. formats, different browsers) still apply as those discussed earlier in the course !

Sound and movie files are imported via the plugin object from the Special panel within the object panel


Java Java AppletsApplets

Parameters required by theapplet are set by clicking theParameters button. This results in a dialog box appearing whichpermits parameters to be set

Java Applets are imported via

the Applet object from the

Special panel within the

object panel


Macromedia Macromedia MultimediaMultimedia

- FlashVector based files sometimes called Flash Shockwave

-Director / Authorware Shockwaves

- Dreamweaver has some built-in Flash functions/objects

Flash ButtonsFlash Text


Flash TextFlash Text• Inserts a small Flash movie which

contains user defined text (plus size, font, colour etc.)

Pro: The font used is not required to be installed on the end viewers computer

Con: User must have have the Flash player installed on their computer/browser plus many pieces of Flash text are pointless after you have learnt Flash itself ! Note: the movie is saved external to the page

just like over Web multimedia


Flash ButtonsFlash Buttons

• Like Flash text but more ‘complex’

• Same pros and cons as Flash Text

Add your text and pick a button + colour etc.Then add the link


The Assets PanelThe Assets Panel

• Management of all the Digital Media assets that make up the web site– Images– Colours– URLs– Flash / Shockwave (Director) Movies– Digital Video/Movies– Scripts– Templates


Fireworks MX 2004Fireworks MX 2004

• An image editor made by Macromedia but closely integrated into Dreamweaver.

• Permits easy creation of Web graphics

• Like Dreamweaver it has a complex interface but once learnt the package is very powerful


Firework ToolsPanels Interfacestyle used again likeDreamweaver

Fireworks Interface

Document Window


The Document The Document WindowWindow

Original: the actualimage saved asPNG by Fireworks

Preview + 2-Up +4-Up used to test differentcompression algorithms

Aim: is to select theimage format that resultsin good quality outputand a smaller imagefile size


The Optimize PanelThe Optimize PanelUse this panel to select an image format (e.g. GIF or JPG)

and then use File Export to save the image

The image type


Buttons,Buttons,slicing and effectsslicing and effects

• Fireworks makes it easy to create button images and the required HTML (which can then be imported into Dreamweaver).

• Fireworks enables you to slice an image into smaller pieces and add interactivity to them.

• Plus Fireworks has many excellent effects that can be easily applied (and removed if you don’t like the result)


Example 1:Example 1: Creating a button in Fireworks

Step 1: Create a new image File->NewStep 2: Select Edit -> Insert -> New Button


Step 3: Draw an oval (ellipse) on the ‘Up’tab image

Step 4: Change the fillcolour/pattern using Properties panel



Step 5: Create a button effect using the effects properties.For example Try the Inner Glow effect



Step 6: Add text to the button using the text tool


Click the cursor onthe button image to enter text


Step 7: Click on the ‘Over’ Taband click the Copy Up Graphic button to create a copy of the Up button image



Step 8: Select the Over image by clicking the mouse while the mouse pointer is over the image (a light blue outline should appear).Then apply an effect of your choice to the over state !Try Glow first …. and then experiment

Click on the tick to remove an effect or select it and click on the “-”icon. Clicking on the ‘i’ permits you to modifyeffect parameters.



Step 9: Click on the ‘Active Area’tab image

Note: You can create Down and Over states but this doubles the total download time for the button.Also, the JavaScript needed in the HTML fails to work in older Browsers.

You can set the URLfor the button using theProperties panel but thisis best done in Dreamweaver

The red lines show how the image will be sliced up and theactive area of the button



Step 10: Click the Done button.The button is now copied onto image.

The blue linesshow the selected slice



Step 11: To export just the selected slice (i.e. the buttonimages for the rollover) and the required HTML

i) First ensure you have selected the button slice and then

ii) select File -> Export



Step 12: Select a directory/folder to save the HTML and the graphic files.

Step 13: Input a file name

Step 14: Ensure you have chosen selected slice only. Also make sure the other options are not selected.



Step 15: Start Dreamweaver MX 2004.

Step 16: Select the Insert -> Image Objects -> Fireworks HTML

Step 17: Browse to the location of the HTML file created by Fireworks



The button loads in the Dreamweaver page

Step 18: Preview the page in a web browser



Layers and Web MenusLayers and Web Menus

Example 2: Creating a Web menu using more than one button and demonstrating the use of layers

Step 1: We will use the button created in the first examplebut we will resize it.Select the slice (click on it) then select modify -> transform -> scale

Note: You can move the button after resizing using drop and drag


Step 2: Copy and paste and the first button a couple of times.Note: the pasted objects will appear on top of the originalobject so you have to move them (drop and drag.)

Example 2:Example 2: Layers and menus


Step 3: Click on each button in turn and modify the button text using the Properties panel



Add new layer

Step 4: Add a new ‘layer’ to the image using the layers panel



Step 5: Name the new layer ‘background’ by double clicking on the name of layer

Step 6: Move the background layer to bottom of the list.This way anything on this layer will be drawn first.Ensure the layer is selected (i.e. Pencil icon)



Step 7: Draw a background object and experiment will fills and blurs.



Step 8: Now export to the menu to Dreamweaverby using the Fireworks export to Dreamweaver method.



Step 9: Now load the example in Dreamweaverusing the method as in example 1Insert -> Image Objects -> Fireworks HTML

You can now select the buttonsin Dreamweaver and give themURLs to load when clicked



Machine Based TutorialMachine Based Tutorial

• The tutorial session requires you to learn how to use Fireworks to create images to build rollover buttons and graphical menu systems.

• Complete the online exercises.• Ensure you have read hours (11 to 18) of the

key text book (Bruce, B - Sams Teach Yourself Dreamweaver MX 2004 in 24 hours) before the next session.

university of sunderland cdm105 session 6 dreamweaver and multimedia fireworks mx 2004 creating...

Documents