1 / 33

Dreamweaver and Multimedia

Learn how to create menus and button images using Dreamweaver and Fireworks MX 2004. Import multimedia files, utilize Java applets, and explore the powerful features of Fireworks for creating interactive web graphics.

elwoodj
Download Presentation

Dreamweaver and Multimedia

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Dreamweaver and Multimedia Fireworks MX 2004 Creating Menus and Button images

  2. Multimedia Sound and movie files are imported via the plugin object from the Special panel within the object panel The same issues (i.e. formats, different browsers) still apply as those discussed earlier in the course !

  3. Java Applets Java Applets are imported via the Applet object from the Special panel within the object panel Parameters required by the applet are set by clicking the Parameters button. This results in a dialog box appearing which permits parameters to be set

  4. Macromedia Multimedia • - Flash • Vector based files • sometimes called Flash Shockwave • -Director / Authorware Shockwaves • - Dreamweaver has some built-in Flash functions/objects • Flash Buttons • Flash Text

  5. Flash 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

  6. Flash 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

  7. The 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

  8. Fireworks 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

  9. Fireworks Interface Document Window Panels Interface style used again like Dreamweaver Firework Tools

  10. The Document Window Original: the actual image saved as PNG by Fireworks Preview + 2-Up +4-Up used to test different compression algorithms Aim: is to select the image format that results in good quality output and a smaller image file size

  11. The Optimize Panel Use this panel to select an image format (e.g. GIF or JPG) and then use File Export to save the image The image type

  12. Buttons,slicing 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)

  13. Example 1:Creating a button in Fireworks Step 1: Create a new image File->New Step 2: Select Edit -> Insert -> New Button

  14. Example 1:Creating a button in Fireworks Step 3: Draw an oval (ellipse) on the ‘Up’tab image Step 4: Change the fill colour/pattern using Properties panel

  15. Example 1:Creating a button in Fireworks Step 5: Create a button effect using the effects properties. For example Try the Inner Glow effect

  16. Example 1:Creating a button in Fireworks Step 6: Add text to the button using the text tool Click the cursor on the button image to enter text

  17. Example 1:Creating a button in Fireworks Step 7: Click on the ‘Over’ Tab and click the Copy Up Graphic button to create a copy of the Up button image

  18. Example 1:Creating a button in Fireworks 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 modify effect parameters.

  19. Example 1:Creating a button in Fireworks Step 9: Click on the ‘Active Area’tab image The red lines show how the image will be sliced up and the active area of the button You can set the URL for the button using the Properties panel but this is best done in Dreamweaver 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.

  20. Example 1:Creating a button in Fireworks Step 10: Click the Done button. The button is now copied onto image. The blue lines show the selected slice

  21. Example 1:Creating a button in Fireworks Step 11: To export just the selected slice (i.e. the button images for the rollover) and the required HTML i) First ensure you have selected the button slice and then ii)select File -> Export

  22. Example 1:Creating a button in Fireworks 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.

  23. Example 1:Creating a button in Fireworks 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

  24. Example 1:Creating a button in Fireworks The button loads in the Dreamweaver page Step 18: Preview the page in a web browser

  25. Layers 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 example but 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

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

  27. Example 2:Layers and menus Step 3: Click on each button in turn and modify the button text using the Properties panel

  28. Example 2:Layers and menus Step 4: Add a new ‘layer’ to the image using the layers panel Add new layer

  29. Example 2:Layers and menus 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)

  30. Example 2:Layers and menus Step 7: Draw a background object and experiment will fills and blurs.

  31. Example 2:Layers and menus Step 8: Now export to the menu to Dreamweaver by using the Fireworks export to Dreamweaver method.

  32. Example 2:Layers and menus Step 9: Now load the example in Dreamweaver using the method as in example 1 Insert -> Image Objects -> Fireworks HTML You can now select the buttons in Dreamweaver and give them URLs to load when clicked

  33. Machine 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.

More Related