Images in Dreamweaver and Fireworks

1
Images in Dreamweaver and Fireworks

• Web Page Design
• Chapter 5

2
Graphic File Formats

• GIF limited to 256 colors, can be compressed
  without losing quality
• JPEG supports millions of colors, quality is
  affected when compressed
• PNG created in Fireworks, does not appear
  pixilated, not supported by older browsers

3
Graphic Hyperlinks

• Graphics can be converted to hyperlinks in the
  same way as text, by clicking on the folder next
  to the Link box or by pointing to a file.
• Alternative text should be added to the Alt box
  in case the user has images turned off.

4
Image Maps

• An image map contains hotspots, which are areas
  of the image that contain links.
• To make an image an image map, give it a name in
  the Map box in the Properties Panel. Then draw
  hotspots over the areas you want to be links by
  using the hotspot tools.
• Hotspots can be circles, rectangles, or polygons.
• Select each hotspot and choose where you want
  each one to link to.
• Dont forget to add alt text!

5
Rollover Images

• A rollover image is an image that changes to
  another image when the mouse pointer moves over
  it.
• To create a rollover image, go to Insert, Image
  Objects, Rollover Image.
• Give the image a name, and select the original
  image and rollover image. You should also give
  it alt text, and you may want to make it a link
  as well.

6
Animation in Dreamweaver

• Layers can be animated in Dreamweaver using the
  Timelines Panel. To open this panel, go to
  Window, Timelines.
• Drag the layer into the first frame of the first
  row of the timeline. To create multiple
  animations, drag other layers into different
  rows.
• Click on the last frame of the animation bar, and
  place the layer in the position where you want it
  to be at the end of the animation.
• To preview your animation, hold down the play
  button on the Timelines panel.

7
Adding Keyframes

• If you want to make your animation path curvy,
  you need to add keyframes to the timeline.
• Right-click the frame in your animation bar where
  you want the curve to occur. Select Add
  Keyframe.
• With keyframe selected, position the layer where
  you want it to be. You will see the path change.

8
Animation Settings

• To extend the animation, drag the end keyframe
  marker to a different frame.
• Changing the FPS (frames per second setting) will
  change the speed of the animation.
• You must check Autoplay to make the animation
  automatically play when the page is loaded.
• You can select Loop to make the animation run as
  long as the page is open.
• You can change the height, width, z-index, and
  visibility of a layer by changing these settings
  in the final frame (Or at any key frames along
  the way).

9
Popup Messages

• To add a popup message, you need to open the
  Behaviors Panel by going to Window, Behaviors.
• To add a popup when the page loads, make sure you
  are in an unformatted part of your page. Place
  the cursor inside the body tag in the code view.
  Then click on the sign in the panel to see
  available actions.
• Click on Popup Message, and type in your message.
• To make a popup appear when you click something,
  you need to select that object and add a popup
  message.

10

• Exercise one

11
Sound in Dreamweaver

• You need an unprotected sound file (usually and
  .mp3 file) NO DRM
• Go to INSERT-MEDIA-PLUGIN
• Select the controls you wish to use
• Adjust the size of the controls

12
Creating a Fireworks File

• Click on File, New. Choose the height and width
  of your canvas and a canvas color in the dialog
  box. To modify the canvas later, go to Modify,
  Canvas.
• Fireworks files are automatically saved in the
  PNG format. You can draw either bitmap
  (.gif,.jpg,.bmp) graphics or vector graphics.
• Bitmaps are made of points (pixels), whereas
  vector images are composed of lines connected by
  points.

13
Predefined Styles

• Go to Window - Assets (select Styles Tab)
• There is a predefined styles tab that can be used
  to adjust the look of text/shapes/etc
• ----------------------------------------
• Go to Window - Assets (select Shapes Tab)
• There are premade shapes that can be dragged onto
  the canvas to enhance your creation!

14
Filters

• Adjusting/Adding filters can enhance the
  appearance of text/shapes/etc.
• The filters are located in the properties panel
  for the selected item!

15
Commands - Creative

• Experiment with the following
• Add Picture Frame
• Add Shadow
• Convert To Grayscale
• Convert To Sepia Tone
• Fade Image
• Twist and Fade

16
Animation in Fireworks(Automatic)

• To animate an object in Fireworks, select it and
  go to Modify, Animation, Animate Selection.
• Specify the animation settings, such as number of
  frames, direction and distance of movement,
  opacity, and rotation.
• You must choose Animated GIF under the Optimize
  panel.
• You can set the looping options in the bottom
  left-hand corner of the Frames panel.

17
Modifying the Animation

• You can choose how long you want each frame to
  last by adjusting how many hundredths of a second
  each frame last.
• Modify the length and direction of the animation
  by dragging the points on the animation path.
  You can also go to the Property Inspector to
  change settings.

18
Animation (Frame by Frame)

• Animation can also be created by drawing
  different objects (or objects with slight
  changes) in many different frames.
• Go to Edit Insert Frame
• You must choose Animated GIF under the Optimize
  panel.

19
Exporting Fireworks Image Files
Optimize Select the appropriate optimization
(JPEG unless you are doing an animation, then its
animated gif) Fit Canvas To eliminate excess
unused space Canvas Color Match it to
background of the web page this image will be
used in Save as a .png So that we can edit it
later (NEVER use the .png format when inserting
into Dreamweaver) See next slide for exporting
options!
20
Exporting Fireworks Files

• Exporting a Fireworks File
• File name should MATCH the name of the .png file
• The EXPORT section should say Images Only
  unless you exporting something with slices (the
  green things), then it should say HTML and
  Images and Export Slices

This box should be checked! When exporting HTML
and IMAGES
21
Assignment

• Fireworks Practice (Basic Skills)

22
Rollovers and Buttons

• Creating rollover images and buttons in Fireworks
  requires inserting slices.
• A slice is an area in which interactivity can be
  assigned.
• When you save rollovers and buttons, they should
  be saved in PNG format (so that you may later
  edit them).
• To use these in Dreamweaver, you must go to File,
  Export so that all of the images and html code
  that goes with them are saved.
• DO NOT USE SPACES IN THE NAMES WHEN YOU SAVE AND
  EXPORT ROLLOVERS AND BUTTONS!
• Make sure that the Save as type has HTML and
  Images selected when you export rollovers and
  buttons. Also make sure you are exporting the
  slices and it is good practice to place the
  images in a subfolder for organizational
  purposes.
• To insert rollovers and buttons in Dreamweaver,
  you must go to Insert, Image Objects, Fireworks
  HTML.

23
Creating Rollovers

• Draw or import the graphic that you want to be
  the starting image.
• Go to Window, Frames to open the Frames Panel.
  Then click on the New Frame button at the bottom
  of the panel.
• Draw the rollover image in the second frame.
• Right click on the graphic in Frame 1 and select
  Insert Slice.
• Drag the behavior handle in the center of the
  image to the top-left corner.
• Choose Frame 2 as the swap image.

24
Creating Disjointed Rollovers

• To create a rollover where the rollover image
  appears in a different location than the original
  image, you need to select the Slice Tool from the
  Web section in the Tools panel. Then, draw a
  slice around the location where you want the
  rollover to appear.
• Draw the rollover image(s) in the other frame(s).
• Right-click on the original image, choose Insert
  Slice.
• Drag the behavior handle to the slice you drew
  with the slice tool, and choose which frame you
  want to swap with.

25
Creating Buttons

• Draw your button (DO NOT ADD ANY TEXT YET!), and
  select Modify, Symbol, Convert to Symbol. Choose
  button as the symbol type, and name your button.
• Double-Click the button to open the Button
  Editor. This is where you can change how your
  button looks in the Up, Over, Down, and Over
  While Down states.
• Copy and paste to create several buttons. In the
  properties panel, set the Link and Alt properties
  for each button.

26
Inserting Buttons/Rollovers

• To Insert a button or rollover into
  Dreamweaverinsert - image objects -
  fireworks HTML
• (select the HTML file of what you are inserting
  (the one with the internet explorer icon next to
  it)

27
Editing Pictures

• File - import (inserts pictures)Considered
  Bitmaps (so bitmap tools work on them)
• Use the Marquee or Lasso Tools to crop a picture
  (right click after enclosing the area to be kept)
• Be sure to feather the edge (properties) when
  combining part of one pic with another (it blends
  them better)
• EXAMPLE placing someones head onto
  anothers body

28

• Exercise 2

29
Creating Pop-Up Menus

• Select your button. Go to Modify, Pop-Up Menu,
  Add Pop-Up Menu.
• Type the Text and Link for each menu that you
  want to add.
• Open the Appearance and/or Advanced tab to change
  how your menu will look.
• Open the Position tab to set the menu position in
  relation to your button.
• SEE NOTES IN CHAPTER 6 SECTION OF WEBSITE FOR
  MORE DETAILS!

30
Picture Slide Show

• You will need a folder with more than one picture
  in it (this is typically used when you have many
  pictures!)
• Go to Commands - Create Slideshow
• Follow the prompts

31
Spry (Dreamweaver CS3)

• FOUR THINGS TO ADD EXTRA FLARE TO YOUR SITE!
• (All can be found under the layout tab OR going
  toINSERT - Spry
• -------------------------------------------------
  ------------------
• SEE SPRY SUPPLEMENT ON THE MAIN WEB PAGE FOR
  ADDITIONAL NOTES
• -------------------------------------------------
  ------------------
• Collapsible panels
• Menu bar (similar to drop down menus in
  fireworks!)
• Tabbed panels
• Accordion panels

32
Spry Assignment

• Do Spry Assignment(see website)