Notes from Teach Yourself Macromedia Fireworks MX in 24 Hours
Creating Web Pages with a Graphics Program
There is a very interesting approach to web design in which you generate entire web pages in a graphics program such as Fireworks or Photoshop and never use an HTML editor like Dreamweaver or handcode HTML. The page is constructed as a graphic image in Fireworks and then you have two choices. The graphic image is then converted into an imagemap in Fireworks and Fireworks generates the HTML for the page including the imagemap. Alternatively, the image is sliced into smaller images using Fireworks and then Fireworks generates the HTML for a table which assembles the smaller images so that the page in the browser will look exactly like the original image. The page will either consist of a single graphic (usually an imagemap) or several graphics in a table
In this approach, if you want text on a page, it is created as an image. Examples of web sites that were constructed this way include Annandale Assistant Professor Nazanin Saidi's site on architectural massing models and Loudoun's Robin Sinckler's site on English punctation and parts of speech There are several advantages of such an approach:
- If one is comfortable with graphics programs like Photoshop or Fireworks, you can do your web pages with this graphics program without having to learn an HTML editor
- precise control over appearance of the page
- don't need to worry about which fonts are on the user's machine
However, there are several disadvantages:
- file sizes are larger so pages load more slowly (but note how fast Saidi's site loads!)
- accessibility - content in the image should be repeated in the alt or longdesc attributes of the img tag
- content in the image won't appear in search engines unless they index material in alt or longdesc tags
- most changes to the page take longer
Below I discuss the tools used in such an approach; however, tools such as image slicing and imagemaps have other applications as well so they are worth learning for other reasons.
Chapter 14 - Slicing Layouts
There are several situations where slicing may make sense:
- An alternative to imagemaps, particularly where rollovers are being used - If one does a rollover with an imagemap, normally one part of the image will appear to change, with the rest of the image remaining the same. To accomplish this with an imagemap, the image that is loaded for the rollover will typically be as large in dimensions as the original image. Instead, if one creates a slice so that the part that is changing is a separate image, then the image that is loaded for the rollover will typically be as large as the slice, and thus the file size required will be smaller than for the rollover image under the imagemap scenario.
- Selective optimization - In Fireworks, you can specify different settings for each slice in the Optimize Panel. Typically one specifies higher quality (JPG) or more colors (gif) for the portions of the image which are more important. Note that Fireworks permits selective optimization with masks; slicing is thus not the only way to achieve this result. .
- Gradual loading of an image - If an image will take awhile to load, slicing it into parts will result in some parts loading more quickly than the entire image. This is particularly useful with navigation bars.
Slice Tool (K) - Located in the web section of the Tools panel, underneath the Vector tools. To create a slice, click the Slice tool and then click drag to crate a rectangular slice. A transparent green box will appear. The Web Layer automatically becomes the active layer; the slice is an object and it can only appear on the Web Layer. To change the dimension of a slice, click any of the handles at the corner with the Pointer tool and drag. Slices must not overlap because this will cause problems when exporting to HTML tables. It's useful to name slices (in the Property Inspector) and you can also specify alt text for the various images you create from slicing.
Chapter 15 - Creating Interactive Graphics
When creating slices in Fireworks, one can turn the slices into image links simply by typing or pasting the URL in the link field in the Property Inspector for the slice. Alternatively, you can select Window>URL to bring up the URL panel and enter the URL there and click the + sign to add the URL to the library. Once added to the library, it will appear in the drop down list in the link field of the Property Inspector.
URLs can also be imported from an existing HTML file into the URL panel list. Click the URL panel Options menu, and select the Import URLs command and select the HTML file with links. One can also use Add Used URLs to import from an existing PNG that has links in it.
Imagemaps
Imagemaps can be created with the Rectangle Hotspot Tool (J), Circle Hotspot Tool (J), and the Polygon Hotspot Tool (J) are found in the top left portion of the web section of the Tools panel. All this is doing is generating the HTML; it isn't changing the image at all.
Adding Behaviors to Slices and Hotspots
Select slice or hotspot with Pointer tool. Window>Behaviors and click - Plus sign. Alternatively, without doing Window>Behaviors you can click the behavior handle in the middle of the slice. You can do Add Simple Rollover (swaps the selected slice on Frame 1 with the image on Frame 2), Add Swap Image Behavior (permits a rollover with another frame or with another image), Add Status Bar Message, Add Nav Bar (same as Swap Image Behavior except that one can add 3rd and 4th image swap states), and Add Pop-up Menu (which displays a customizable menu of links during a mouseover).
Creating Interactive Button Symbols
The advantage that symbols have over objects is that when you edit objects within a symbol, all the copies, or instances, of that symbol in the document also change. You can include one symbol in another (nesting) and this updating of instances occurs here as well. A button is a symbol that has a frame corresponding to each possible button state -- thus it is very similar to a slice with a Nav Bar behavior attached. Symbols are like a document with the document, each symbol has its own frame, layer, and Canvas setting. You can double click the icon to the left of the name of the symbol in the assets panel to bring up the button editor. You can also set the active area of a button (which area will respond to a mouseover. Using Effects is one way to get easy rollover effects.
Exporting and Importing Symbols - Library Panel Options menu - Export Symbols and Import Symbols commands. Good way to reuse graphics in multiple files.
Chapter 16 - Exporting HTML Code into Fireworks
Controlling Format of HTML Generated by Fireworks
File>HTML Setup allows you to control the format of HTML code produced by Fireworks. General tab permits you to specify the HTML style, the extension, and whether HTML comments and lowercase file names are used. The Table tab lets you choose among nested tables (no spacers), a single table (no spacers), or 1 pixel transparent gif. For the contents of an empty cell, you can choose among None, a spacer image, or a non-breaking space. These two tabs are the defaults for all your Fireworks documents; in the Document tab, you can set naming conventions for the slices and a default alt description.
File>Reconstitute Table -- If you are given an existing web page with graphics and want to make changes to the graphics without having to look at the source code, you select File>Reconstitute Table and browse for .html file. Slices will be created in a new document which you can then save as a PNG file. You will then see the image slices assembled and you can make changes. When you are done, you can use the File>Update HTML command to update any changes you have made in Fireworks back into the HTML file and images.
Creating Pop-up Menus in Fireworks
Fireworks can create a pop-up menu that appears when the user mouses over a hotspot or slice. Select the hotspot or slice, and then either click the behaviors handle in the center or select Window>Behaviors and then click on the Plus sign. Either way will bring up the Pop-up Menu Editor which has 4 tabs:
- Content (specify what text appears, the URL and target if one were to click on the link in the menu; indenting to create submenus when the heading item is moused over);
- Appearance (vertical or horizontal menu; HTML cell with solid color background or Image cell, with image background; font; text and background colors for up and over state;
- Advanced and Position for further control of menus.
The Pop-Up Menu Editor is identical to the corresponding editor in Dreamweaver.
Revised: October 10, 2003. Comments to William Pegram, wpegram@erols.com