1. Fireworks Web Page mockups

2. Set up canvas/page size Fireworks is very well-suited to designing graphics and web pages for the screen. To create a web page, set the screen size to fit a standard size screen, with minimal scrolling, e.g.

3. Change canvas size Deselect everything Click on “Canvas Size” in the Properties window Or Click Modify > Canvas > Canvas Size

4. Insert more pages into the document Locate the Pages panel (Window > Pages or press F5 on the keyboard) Click the new page icon in the bottom right of the Pages pane To duplicate a page drag the page icon on top of the new page icon

5. Insert and resize pictures Edit > Paste (or CTRL+V) Or click File > Import, select the image file, then click and drag a rectangle on the page To resize, use the selection tools:

6. Adding text Click the Text tool (or press T) and click on the page. Change the properties using the Properties window. Try out different sizes, letter spacing, fonts, colours. Add an effect, e.g. a drop shadow using the Effects/Filters menu

7. Viewing your page Press F12 to preview your page in a web browser To zoom in, click the Zoom tool or press Z on the keyboard (make sure the Text tool (T) is not active whilst doing this) Click on the page or draw a rectangle with the Zoom tool to zoom to a selection To zoom out hold the ALT key down as you click with the Zoom tool To pan click the Hand tool (H) and drag the screen, or (quicker) hold the Spacebar down and drag

8. Vector draw tools Some of the tools have many others underneath. E.g. the Vector tools. Vectors are exact shapes which are rendered from exact points, lines, curves and fills. They can be resized as many times as necessary (they always remain sharp) Use the Freeform tools to distort shapes. Draw shape, right click > Ungroup, then use the freeform tools

9. Draw an arrow Use the line tool to draw a line Change the settings of the line in the Properties window if you wish Click Commands > Creative > Add arrowheads

10. Put border around a picture Copy a picture Draw a shape, e.g. a rectangle Click Edit > Paste inside Use the spot at the centre to move the image inside the shape. Use the selection tools to adjust

11. Add a drop shadow Use the filters in the Properties

12. Keyboard shortcuts V = pointer tool T = text tool Spacebar = pan (make sure text tool not selected) Z = zoom in (hold down ALT to zoom out) H = hand (pan) tool TAB = toggle tool bars and windows on and off F12 = web page preview in browser Click Edit > Keyboard shortcuts to see listed all shortcuts