Web Page w/ MFW > Optimize the Document - Lesson 06

Your document is almost ready for the web. The only thing you need to do before exporting it is to optimize it. Before you export any document from Fireworks, you should always optimize it. Optimizing ensures that your graphics will be exported with the best possible balance of compression and quality.

When different kinds of graphics are in the same document, it’s a good idea to choose an appropriate file format and compression setting for each. The Global web page is composed of a variety of elements: bitmaps, vector objects, and text.

1. If the Optimize panel is minimized or isn’t visible, click its expander arrow or choose Window > Optimize. Fireworks chooses GIF as the default export file format and Websnap Adaptive as the default color palette. Most of the graphics on the Global Rental Cars web page will be fine using these settings. The Vintage bitmap image, however, contains a photograph and a gradient. Because of its complex color variations, it is best exported in another format.
2. Click the 2-Up preview button in the Document window. The 2-Up button allows you to view the results of your optimization settings and compare them with the original. By now you’ve probably noticed the white slice overlay each time you use one of the Preview views. The overlay allows you to focus on just the area you want to optimize.
3. Click the slice for the Vintage image in the preview on the right. The slice overlay disappears so you can view the image beneath the slice. At the bottom of the preview, the export file format for the selected slice is displayed, as well as the estimated export file size, and the amount of time the graphic will take to download from the web.
   
   Tip:
   Use the Hand tool in the View section of the Tools panel to view more of the image if it’s not entirely visible.
   
4. Hide the slices for a moment by clicking the Hide Slices and Hotspots button in the Web section of the Tools panel. This allows you to compare the preview with the original and see the difference between the two graphics. The preview on the right has bands in the gradient.
5. Turn slices back on again, and click the Vintage image with the Pointer tool.
6. In the Optimize panel, choose JPEG – Smaller File from the Settings pop-up menu. The gradient bands are now gone, and the file size has decreased significantly. That’s because photographs and images with complex color variations are better optimized and compressed as JPEGs than as GIFs. Now that the file size has been decreased, the image has become fuzzy.
7. To improve the appearance of the bitmap, drag the Quality slider in the Optimize panel to 77 and set the Smoothing option to 0. The bitmap is much clearer, but the file size has also increased. However, it is still an improvement over the file size when the image was optimized as a GIF.
8. Click the Original button to return to normal view.

Web Page w/ MFW > Create N Edit a Pop-Up Menu - Lesson 05

A pop-up menu is a menu that appears when you move the pointer over a trigger image in a browser. It contains a list of items that link to other web pages. Here you’ll create and edit a pop-up menu that lists Global’s airport locations.

Create Pop-Up Menu List Items

First you’ll create the pop-up menu list items using the Pop-up Menu Editor.

1. Select the slice covering the Worldwide Airports graphic.
2. Choose Modify - Pop-up Menu - Add Pop-up Menu. The Pop-up Menu Editor opens.
3. Double-click the text box in the upper left corner (Windows only).
4. Type North America in the text box and press Enter. The next text box is highlighted, ready for you to create another entry.
5. Type Europe and press Enter.
6. Create three more entries for Africa, Middle East, and Asia/Pacific.
7. Double-click the Link text box for the North America entry.
8. Enter a working URL of your choice and press Enter. For the purposes of this tutorial, any URL will do. Be sure it’s an actual URL so that you’ll be able to test your links later.
9. Enter URLs for the remaining entries. Note: There is always one extra line at the bottom of the entry list in the Pop-up Menu Editor. It’s there so you can easily add new entries without having to click the Add Menu button.
10. Click Done to close the Pop-up Menu Editor. In the workspace, an outline of your pop-up menu appears attached to the slice.
11. To test your pop-up menu, choose File > Preview in Browser > Preview in [your preferred browser] to preview the document in a browser.
    
    Note:
    Pop-up menus must be previewed in a browser; they aren’t visible using the Preview tab in Fireworks. When the document opens in your browser, move the pointer over the Worldwide Airports graphic. The pop-up menu you created appears. Click each entry to test the links.

Customize the pop-up menu Next you’ll return to the Pop-up Menu Editor to modify the appearance of the pop-up menu:

1. In Fireworks, double-click the pop-up menu outline. The Pop-up Menu Editor opens with your entries displayed.
2. Click the Next button. The Appearance tab appears. This is where you can change the colors and fonts used in pop-up menus.
3. Choose HTML as the cell type and Vertical Menu as the alignment.
4. Choose Verdana, Arial, Helvetica, sans-serif as the font and 12 as the font size.
5. In the Up State section, set the text color to black, if black is not already selected. Then click the Cell Color box. If CCCCCC is not already displayed in the text box at the top of the color pop-up window, enter CCCCCC and press Enter. These color values are the default colors selected in the Pop-up Menu Editor if you’ve never created a pop-up menu before. After you change these colors, they will be used every time you create a pop-up menu, until you choose other colors.
6. In the Over State section, set the text color to White if it’s not already selected, and click the Cell Color box. Click the eyedropper pointer on the blue rectangle on the canvas that surrounds the Worldwide Airports graphic, as shown below.
7. Click the Next button. The Advanced tab appears. The Advanced tab allows you to change various cell and border properties. Here you’ll increase the cell width, making the pop-up menu appear wider.
8. Choose Pixels from the Cell Width pop-up menu. This activates the Cell Width box.
9. Enter 137 as the cell width.
10. Choose Automatic from the Cell Height pop-up menu, and click the Next button. The Position tab appears. This is where you can specify the position on the screen where the pop-up menu will appear. Coordinates of 0,0 mean that the upper left corner of the pop-up menu will align with the upper left corner of the slice that triggers it. There are also several preset positions you can choose from.
11. Enter 3 in the X and Y Menu Position boxes, then click Done. Note: You can also reposition a pop-up menu by dragging its outline in the workspace.
12. Preview your pop-up menu changes in a browser. Move the pointer over the Worldwide Airports graphic. The pop-up menu is positioned differently and appears wider. Roll over each entry in the menu to see your color changes.
    
    

Edit The Pop-Up Menu

Next you’ll use the Pop-up Menu Editor again to add another entry to the pop-up menu. You’ll also change the order of entries and add a submenu.

1. In Fireworks, double-click the pop-up menu outline.
2. Click the Europe entry to select it.
3. Click the Add Menu button above the entry list. A blank line is inserted.
4. Double-click the Text field of the new entry and enter Latin/South America. Click anywhere outside the Text field to apply the entry.
5. Drag the Latin/South America entry up one line and release the mouse button. As you drag, a black line indicates where the entry will be dropped if you release the mouse button at that point. The entry is dropped where you specified.
6. Select the North America entry and click the Add Menu button.
7. Double-click the Text field of the new entry and enter United States. Then click anywhere outside the entry fields. Be careful not to select another entry, however.
8. Select the United States entry if it’s not already selected, and click the Indent Menu button. The entry is indented beneath the North America entry.
9. Click the Add Menu button again, and create a new entry for Canada. You’ve just created a submenu that will appear when you roll over the North America entry in a browser.
10. Assign URLs to all the new entries. Optionally, you can delete the link for North America, because users will be choosing items from its submenu.
11. Click Done to close the Pop-up Menu Editor, and then preview the pop-up menu changes in a browser.

Web Page w/ MFW > Create N Edit Button to Make a Navigation Bar - Lesson 04

Buttons are web objects that link to other web pages. Their appearance typically changes depending on the user’s mouse movement or other action, such as clicking, as a visual cue indicating interactivity. For example, a button displays a different rollover effect when the pointer moves over it than when it has been clicked. A navigation bar—also known as a nav bar—is a series of buttons that appears on one or more pages of a website. Typically, all the buttons within a nav bar look the same, except for their text. Here you’ll create a nav bar for the Global website.


Create a button symbol

The initial graphic and text for one button has already been created for you. You’ll convert this graphic into a button symbol.

1. In MFW, select the button graphic (labeled BUTTON TEXT) in the upper left corner of the document.
2. Choose Modify - Symbol - Convert to Symbol. The Symbol Properties dialog box opens.
3. Type My Button in the Name text box, choose Button as the symbol type, and click OK.A slice appears on top of the button graphic, and a shortcut icon appears at the left of the slice. This indicates that the selection in the workspace is an instance of the symbol you just created. Symbols are like master copies of your graphics. When you change a symbol, all of the instances of that symbol in your document change automatically. Symbols reside in the library.
4. If the Library panel is minimized or isn’t visible, click the Assets panel group’s expander arrow and click the Library tab, or choose Window - Library. Your symbol is listed in the Library panel.
   
   

Create Button States

Next you’ll create various states for the button symbol.
Button states are the different ways a button appears when rolled over or clicked in a web browser.

1. Double-click the button instance you created. Tip: Alternatively, you can double-click the preview of the button in the Library panel or the symbol icon beside it in the Library panel’s symbol list. The Button Editor opens with the button graphic displayed in the work area.
2. Click the tabs at the top of the Button Editor. The first four tabs represent the button states. The last tab, Active Area, represents the hot area on the button, or where a user must click or roll over to activate the button states. The active area is also the swap area for the button, or the area that changes with each button state. Currently there are no states for the button symbol other than the Up state, the state of the button before it is rolled over or clicked.
3. Click the Over tab at the top of the Button Editor, then click the Copy Up Graphic button. The button graphic is copied from the Up tab. The Over state of a button is its appearance when the pointer rolls over it. To give users visual feedback, you’ll change the color of the rectangle behind the text.
4. Select the rectangle. Be sure to select the rectangle and not the text; if you are unsure which one you are selecting, check the Layers panel to see which one is selected.
5. Click the Fill Color box in the Property inspector and choose black as the color. The rectangle is now black.
6. Click the Down tab at the top of the Button Editor, and click the Copy Over Graphic button. The button graphic is copied from the Over tab. The Down state of a button is its appearance after a user clicks it. This time you won’t change the color of the rectangle; you’ll leave it as it is.
7. Click Done in the Button Editor to apply your changes to the button symbol. 8 Click the Preview button in the Document window and test the button’s states. Turn slices off if necessary. When you are finished, click the Original button and turn slices back on.

Create Multiple Button Instances

Next you’ll create more instances of the button symbol.

1. Select the button in the workspace if it isn’t already selected.
2. Choose Edit - Clone. A new instance of the button appears on top of the original button.
3. Hold down Shift while pressing the Right Arrow key repeatedly to move the new instance to the right. This moves the instance in 10-pixel increments. If necessary, use the arrow keys alone to move the selection one pixel at a time. Position the instance to the immediate right of the original instance, but not overlapping, as shown in the illustration below.
4. Clone two more instances of the button, and position each to the right of the previous instance. Tip: As a shortcut, press Alt (Windows) or Option (Macintosh) while dragging the selected instance with the pointer to make a copy of it. After positioning the new instance to the immediate right of the previous instance, choose Edit - Repeat Duplicate to automatically create and place another copy of the instance.

Change Button Instantce Text

Now that you’ve created all the buttons for your nav bar, you need to give each button unique text. You can easily change the text on a button instance using the Property inspector.

1. Select the button instance at the far left. Properties for the button instance appear in the Property inspector. With the exception of the Export Settings pop-up menu, these properties apply to the selected instance only. Making changes here will not affect the original button symbol in the library.
2. In the Property inspector, replace the text in the Text box with the word HOME in uppercase letters. Then press Enter. The text on the button changes to reflect your entry.
3. For the remaining three buttons, change the button text to VEHICLES, RATES, and CONTACT US, respectively.
   

Assign URLS to The Buttons

Next you’ll assign a unique URL, or link, to each button instance. A URL, or Uniform Resource Locator, is the address or location of a page on the web. You can easily assign URLs to buttons using the Property inspector.

1. Select the button instance labeled Home.
2. Enter index.htm in the Link text box of the Property inspector. When clicked in a web browser, the Home button will jump to a page called index.htm. You’ll discover later in the tutorial why you linked the Home button to this page.
3. Select the Vehicles button instance and enter your favorite URL in the Link text box of the Property inspector. For the purposes of this tutorial, any working URL will do. If you were creating a real website, you would enter the URL that you wanted the Vehicles button to jump to. Note: Be sure to enter the URL of an actual website, so that you can test your button links later.
4. Assign a URL to each of the remaining button instances. Once again, any working URL will do.
5. Choose File - Preview in Browser - Preview in [your preferred browser]. To test button links, you must preview the document in a browser. Note: If your browser is not listed, you must first select a browser by choosing File - Preview in Browser - Set Primary Browser. When the document opens in your browser, test the buttons you created. Except for the Home button, which links to a file you haven’t created yet, each button should jump to the link you specified in Fireworks.
   

Edit The Button Sumbols

Next you will modify the original button symbol. The changes you make will be automatically applied to all the button instances in your nav bar. You may be wondering what the original button symbol looks like now that you’ve changed text on several of its instances.

1. Double-click any of the button instances in the workspace. The Button Editor opens with the original button symbol and text displayed in the workspace. The original button symbol is still intact and displays the original text. When you changed the text of each button in the workspace, you only edited each button instance. If you make any changes here to the rectangle or to text appearance, you will be editing the original symbol, so those changes will be reflected in all the instances in the workspace.
2. Click the Over tab.14
3. Select the black rectangle.
4. Click the Fill Color box in the Property inspector and enter FF6633 as the color value. Press Enter to apply the color change. The rectangle is now orange.
5. Click Done in the Button Editor to apply the change to the button symbol.
6. Click the Preview button in the Document window and test the buttons. Each button’s Over state is now orange. You changed only the button symbol, but the change was applied to all the button instances in your nav bar.
7. Click the Original button, and double-click any button instance in the workspace. This time you’ll change the text in the button symbol.
8. Select the button text in the Button Editor, and in the Property inspector choose Arial as the font. Do this for each button state.
9. Double-click the text block in the Button Editor, and delete the word BUTTON.
10. Click anywhere in the workspace away from the text block to deselect it.
11. Click Yes in the message box that asks whether you want to change the text in the other button states. Examine the various button states in the Button Editor. The text changes in one state are reflected across all the button states. Compare this to when you changed the font; you had to change it in each state. That’s because you can apply different graphical and text attributes to each state of a button. This is useful if you want the text color to change when a user rolls over a button, for example.
12. Click Done to exit the Button Editor. The font on each button instance changes to reflect the new font selection, but the text remains the same. Button instances reflect only the changes you make to a button symbol’s graphical appearance, including its text attributes, but not changes you make to the text itself. Button symbols make it possible for you to change the graphical appearance of all button instances in a nav bar quickly, while preserving each instance’s unique text.

Web Page w/ MFW > Create a Drag N Drop Roll Over - Lesson -03

Now that you’ve sliced your document, you’re ready to add interactivity. You’ll use two of the slices you inserted in the previous step to create a drag-and-drop rollover. There are two kinds of drag-and-drop rollovers: simple rollovers and disjoint rollovers. A simple rollover displays a different image when the pointer moves over it in a web browser. A disjoint rollover causes another image to change in a different part of the screen when the pointer moves over it. You’ll create a disjoint rollover here.

1. Select the slice covering the Vintage image. The round icon in the center of the slice is called a behavior handle. It allows you to add behaviors, or interactivity, to a slice. If you are familiar with behaviors in Macromedia Dreamweaver, you’ll recognize many of the same behaviors in Fireworks. Behaviors can also be applied using the Behaviors panel. But for simple interactivity like rollovers, it’s faster and easier to apply a behavior using the slice’s behavior handle.
2. Drag the behavior handle onto the Great Weekend Rates slice, and release the mouse button. A blue behavior line extends from the behavior handle to the corner of the slice, and the Swap Image dialog box appears.
3. Ensure that Frame 2 is selected in the Swap Image From pop-up menu, and click OK. When the pointer moves over the Vintage slice in a browser, an image in Frame 2 replaces the Great Weekend Rates graphic. The Vintage image is considered the trigger for the rollover effect, and the image that replaces the Great Weekend Rates graphic is considered the swap image.
4. If the Frames panel is minimized or isn’t visible, click the expander arrow for the Frames and History panel group and click the Frames tab, or choose Window > Frames. The Frames panel lists the frames available in the current document. Currently there is only one frame in the document. The Frames panel is typically used for animation. In the case of rollovers, it is used to hold swap images.
5. Click the New/Duplicate Frame button at the bottom of the panel. A new frame, named Frame 2, is created in the Frames panel. The workspace is now empty except for the slices you inserted. No objects are listed in the Layers panel, except the contents of the Web Layer. That’s because layers in Fireworks are not shared across all frames by default, with the exception of the Web Layer, which is always shared. Objects on the Web Layer appear in every frame of the document, so any changes you make to web objects, such as slices, affect all frames.
6. Choose File > Import and browse to the Tutorial2/Assets folder. Select the file named rates.gif and click Open.
7. Place the insertion pointer over the slice where the Great Weekend Rates graphic was located in Frame 1. Align the pointer as best you can with the upper left corner of the slice.
8. Click to insert the graphic. The Vintage Classic Rates graphic appears.
9. Click the Preview button at the top of the Document window, and hide the slices in the document by clicking the Hide Slices and Hotspots button in the Web section of the Tools panel. Move the pointer over the Vintage image. The Great Weekend Rates image changes when the pointer rolls over the Vintage image.
   
   Tip:
   If the image seems to jump a bit or the transition between graphics doesn’t look smooth, adjust the position of the swap image in Frame 2 while in Original view. For precise positioning, turn on Onion Skinning in the Frames panel or verify that the x and y coordinates of the Vintage Classic Rates image are the same as those of the Great Weekend Rates image in the Property inspector. When you are finished, return to Frame 1 and turn off Onion Skinning if necessary. For more about these options, refer to the index of Using Fireworks or search Fireworks Help.
   
10. When you are finished, click the Original button at the top of the Document window to return to normal view, and turn slices back on by clicking the Show Slices and Hotspots button in the Tools panel.

You have successfully created a disjoint rollover. Simple rollovers are created in a similar manner: when dragging a slice’s behavior handle as you did in step 2, you simply drag it back onto the same slice.

Generally, web designers add a rollover effect to an image to provide users with a visual cue that the graphic is clickable. If the Global website was an actual site on the Internet, you’d probably want the Vintage and Rates images to link to other pages that provide more information. For the purposes of this tutorial, you’ll leave the disjoint rollover as it is. You’ll get plenty of practice attaching links to other web objects in the following section.