Fireworks combines bitmap editing with vector graphics creation. The bitmap tools work pretty much the same as those in Photoshop with some changes in the way the tools and properties are arranged - as long as you know what to look for most things can be found. The vector tools are different to those in Photoshop and may take some time to master.
Rulers - View/Rulers
Guides - drag from rulers. To position precisely double click guide and enter pixel value.
Lock guides - View/Guides/Lock or Edit. Usually leave snap to guides on.
Shape tool - wide range of shapes available. Combine them to make designs. Use properties such as colour and texture to create backgrounds for designs and web pages. Add Filters to further enhance elements of a design e.g. Bevel or Emboss to make an item stand out from a background. Click on the + button to add a filter and then use the Filter properties button to edit the effect.
Rectangles can have rounded corners - draw rectangle and then change the Rectangle Roundness property. Or use the Rounded Rectangle shape in the polygon tool.
Fill style - use the Fill category popup in the Properties box - gradients
Scale tool - to edit elements of a vector drawing e.g. spiral
Use the Assets panel and the Styles tab to change the appearance of shapes.
Edit/Clone - performs Edit/Paste
Group items to process them together e.g. move them - Modify/Group.
Modify/Canvas/Trim Canvas - automatically trims the canvas to the smallest possible size while including all elements.
Layers. A new document has two layers by default, Layer 1 and the Web Layer. The Web Layer is where slices and hotspots are stored.
Adding new vector objects, including text, creates a layer for each one.
Align objects e.g. a square within a square - Modify/Align or open the Align panel.
Text - click and type or drag out a text box before typing. Switch to pointer tool to move and format text.
Curve text to a path - select curve and text and then Text/Attach to Path
Could add buttons to a new layer or to a new document and then import them into primary document. Importing may be better so can import same set of buttons into a number of pages.
Edit/Insert/New Button - opens button editor. Note five tabs for states - Up, Over, Down, Over While Down, Active Area. Add text. Select Over tab and change button. Click Copy Up Graphic button to make a copy of the original. Select Down tab to make button in down state - click Copy Over Graphic to use previous design. Click Done to finish.
To add a glow or other filter effect navigate to the button editor by double-clicking a button or through the properties icon in the Library panel. Choose the Over or Down panels to add the glow as the mouse passes over the button or clicks on it. Select the button and locate the filter list in the Properties panel - a tiny triangle opens the list. Note that a glow increase the size of the buttons considerably so they will have to be separated so the glow from one button does not interfere with the others. To avoid this and keep the buttons together use Inner Glow only or one of the other effects that affects only the interior of the button.
Choose View/Slice Guides and Show Slices and Hotspots on Tools panel.
Choose Preview in document toolbar to see button in action. Click Original to return to editing mode.
Choose Window/Library to see symbols - button you created is in Library. Drag button to page as many times as required (cannot do this in button editor). Use Align panel to arrange buttons as you wish e.g. horizontal to make a menu bar. Use property inspector to change features of each button.
To edit button open Library, double click the name in the list and make changes in the Symbol Properties box. Alternatively, click the edit button (one of three small icons at bottom of pane).
Add names to buttons. Add links to buttons. Add Alt text as the alternative for visually impaired (screen reader will read the text to identify its function).
When the buttons are in the desired position click the Fit Canvas button to trim down to the actual buttons only (Modify/Canvas/Trim Canvas).
Save the buttons file so it can be imported into a larger page. To import, first add a new layer to the larger page and call it 'buttons'. Make sure the buttons layer is under the background object that it will be placed on. Choose File/Import, choose the buttons file and move it into place.
To shape the buttons try the following: Draw a rounded rectangle over the buttons, transparent fill, leave the buttons unselected. Select the background of the buttons as well as the new rectangle then choose Modify/Combine Paths/Punch. This creates a hole shaped like the rounded rectangle. Drag the buttons layer under the background layer so the rounded rectangle makes a stencil over the buttons.
To make a graphic into a button select the elements of the button and choose Modify/Symbol/Convert to Symbol (F8). Edit this button as before. Images can be made into buttons. Use Filters to change the appearance of the Over and Down states e.g. Invert. Trim and save each collection of buttons for use on a larger page.
These can be made in a web page editor like Dreamweaver but Fireworks does a good job too. Use an image with items that you want to use as hotspots to link to other pages or use a banner that you designed earlier. A banner might have logos and pieces of text that can be made into hotspots.
The Web area of the toolbar includes a hotspot tool with three sub-sections, rectangle, circle and polygon. Use these tools to draw out hotspots on the image. For each hotspot use the Properties box to add a name, a link, alternative text and a target (optional).
The hotspots will appear in the Web Layer at the top of the layers stack. Click the Expand button to see each hotspot.
Buttons and hotspots can be exported into HTML to create a version of your design as a web page. The page may be sliced into smaller sections using the slice tool. Fireworks will optimise the file format for each slice so an area of simple colour will be saved as a GIF while a photograph will be saved as a JPG file, resulting in faster loading. Slices can be added by selecting objects and then Edit/Insert/Hotspot or Rectangular Slice or Polygon Slice. Notice how complex the red lines can become, they will be converted into a HTML table.
Apply the slice tool to lists of text e.g. the days of the week or months of the year. To do multiple slices the same size switch to the pointer tool and hold down the Alt key while dragging a slice.
A slice or hotspot can have a popup or fly-out menu attached. To do this select your slice or hotspot and then choose Modify/Popup menu. Add a popup menu and work your way through the dialogue box to create the menu items. This is quick and effective way of creating links to many pages and keeping them in a compact format. Use this technique if you have lots of pages on your site to which you want to create separate links or if you want to add lots of links to external sites.
This is where a button or hotspot has a rollover effect on another part of the page, for example a list of car models where each one activates a different image in a panel. This technique uses Frames. Frames are places to save the states of rollovers. The button editor automatically adds frames for the Over and Down states of a button. For disjointed rollovers you need to manage the frames yourself. The base area of a page is frame 1 so additional frames will start at frame 2.
You will need to have a list of items such as the names of cars or months. There should be a slice for each word in the list and a slice for the image elsewhere on the page. The slice for the image should be big enough for all the images otherwise it will crop them. Click on the Options button in the Frames menu and choose Add Frames from the popup. Add the number of frames you will require. There will be a base frame that displays by default and a new frame for each word in your list.
Click on each frame in turn and add an image to the same location, preferably each the same size. To place each image in the same place drag guides to one of the corners where the images will be placed.
Select the slice for the first word, locate the behaviour handle in the middle and drag from the handle to the image in frame 2 - a link is made. Click on frame 3 in the list and select the second word in the list. Drag from the behaviour handle on the word slice to the image and choose Frame 3 from the drop-down list in the dialogue box. Repeat the pattern for all the words and frames.
Save and click preview.
Choose Window/Frames/Add Frames. Add as many frames as you need to correspond with your list e.g. 6 for 6 cars. Click Hide Slices and Hotspots on the Tools panel and then select frame 2 and frame 3 on the Frames panel.
When your work is ready to be included in a web page (or is a complete web page in itself) you can export it to web format, GIF or JPEG. If you export to GIF or JPEG any hotspots or rollovers will not work, to get them working you will need File/Export (see below).
Choose File/Export Wizard and choose The web as the destination. The preview provides an analysis of your page and allows you to choose between GIF and JPEG format. There are a number of things you can change to get the optimum file size for your project e.g. the colour palette. You would mainly choose the smaller file size. Click Export when you have decided.
Preview your work by choosing File/Preview in Browser.
To export your work as HTML choose File/Export. Make sure you have a folder to export to. Choose Export Slices from the Slices popup. Select Put Images in Subfolder - this will keep your HTML files separate from your images. Choose Options to define the HTML options. Choose Dreamweaver HTML and .htm as the extension. Click OK to close the Options box and then the Export button to finish. You can now check the results in the browser - find it in My Computer and double click the HTML file.