RACC WEB 115 Class #5 Lecture

Quiz?

Review selected Assignment #1 (resume.htm) files.

• "spreading out" content across the page using a table with multiple columns
• varied font size and/or style for increased variety (but still maintaining consistency within the page)
• using nested tables with background colors to create the illusion of a border color

Discuss Project #1. Does everyone know how to copy graphics from other web sites? How many people can use a digital camera or a scanner?

Ch. 3 Lecture

Creating image maps

• Use the Rectangle, Circle, & Polygon Hotspot Tools to create a simple navigation bar
• You can Hide or Show image hotspots as you edit a graphic
• Use the Property Inspector with a hotspot selected to make hyperlinks.
• Be sure to add <alt> text to all images, especially for the sake of web page accessibility
• (if time) convert paths into hotspots
• Export an image map by carefully keeping track of its associated HTML source code & the assorted images.
• Use Dreamweaver's "Insert Fireworks HTML" menu command to insert an image map into a web page
• (if time) Do tutorial on pp. 91+ with the foodtrain.png

Slicing images

• Slicing a graphic in Fireworks basically amounts to cutting it up into several graphics that are then held together by an HTML table
• Since each slice can have its own hyperlink, this technique is used to create professional-looking navigation bars
• Slice a graphic along guides that you create by dragging from the rulers
• Slice a graphic using the Slice Tool
• Be careful to keep track of each slice (with appropriate names) and the corresponding HTML table when exporting sliced images

Creating buttons and rollovers

• It is wise to use symbols as buttons for increased consistency throughout your web pages and web sites. A Fireworks symbol is stored in the document's Library.
• Use the Edit/Insert/New Button menu command to bring up the Button Editor which allows you to create a button with up and over states.
• Carefully export a button keeping track of its corresponding HTML along with its various images (up and over states).
• You can also create the up and over state images for a button without using button symbols in Fireworks. Simply create an up state graphic and then duplicate that frame. In the second frame (the over state), change some aspect of the graphic. Then export each frame separately using the File/Export or File/Export Preview menu command. Be careful to name these two gif images appropriately. Then, use the Insert/Interactive Images/Rollover Image menu command in Dreamweaver to actually add the rollover to a web page. Follow this guide for using this method to create rollovers.

(if time) Using Libraries & Styles

• Look in C:\Program Files\Macromedia\Fireworks MX\Configuration\Libraries for the Animations.png, Bullets.png, Buttons.png, & Themes.png libraries.
• Store a "style" in the Styles window in order to reuse it on other Fireworks images that you create for consistency and to save time.

(if time) Creating animated gifs

• Discuss frames and how they are different from layers
• Examine the frames panel
• Create and export a simple animated gif by creating 2 or 3 frames by hand
• Create an animated gif by using the Modify/Symbol/Tween Instances menu command between two symbol instance.
• Create a 400 x 60 pixel banner as an animated gif by using the Modify/Symbol/Tween Instances menu command between two symbol instances
• Follow this guide for creating animated gif's in Fireworks MX.

Homework Assignment:

• Finish reading Ch. 3
• Do as many of the Ch. 3 tutorials within the chapter as you can. If Dreamweaver MX confuses you, please email or call Mr. Minich or email the class mailing list (web115@topica.com).
• Finish Assignment #2 which is due Thur Jan. 23.