Fireworks Web Page mockups. Set up canvas/page size Fireworks is very well-suited to designing graphics and web pages for the screen. To create a web.

Slides:



Advertisements
Similar presentations
Chapter 3 Creating a Business Letter with a Letterhead and Table
Advertisements

Macromedia Fireworks MX 2004 – Design Professional Importing, Selecting, and Modifying Graphics.
Microsoft Word 2010 Lesson 1: Introduction to Word.
Word Processing Word Processing
Word Processing First Steps
XP Tutorial 4 New Perspectives on Microsoft Windows XP 1 Microsoft Windows XP Personalizing Your Windows Environment Tutorial 4.
Office 2003 Advanced Concepts and Techniques M i c r o s o f t Word Project 6 Creating a Professional Newsletter.
Office 2003 Post-Advanced Concepts and Techniques M i c r o s o f t Word Project 7 Creating an Online Form.
Chapter 1 Creating a Flyer
CIS 205—Web Design & Development Fireworks Chapter 3.
Microsoft Excel 2010 Chapter 7
Microsoft PowerPoint ® 2003 Carl B. Struck Presentation Graphics n Educational, business, sales and other presentations (slide shows) n Combination of.
Creating, Formatting, and Editing a Word Document with a Picture
Chapter 2 Enhancing a Presentation with Pictures, Shapes, and WordArt
 Insert a picture from a file  Move and delete images  Use the Picture Tools tab  Add styles, effects, and captions to images  Resize photos  Use.
XP Tutorial 7 New Perspectives on Microsoft Windows XP 1 Microsoft Windows XP Working with Graphics Tutorial 7.
Website Design CLA – Transportation. Defining a Site Select: Site – New - Site Click Next.
Introduction to PowerPoint 2003 Learning And Research Technical Unit (LARTU)
Microsoft Word 2010 Chapter 1 Creating, Formatting, and Editing a Word Document with Pictures.
Creating Integrated Web-based Projects using Microsoft Word.
Microsoft Word 2010 Chapter 1 Creating, Formatting, and Editing a Word Document with Pictures.
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 4 1 Microsoft Office FrontPage 2003 Tutorial 4 – Using Shared Borders and Themes.
DREAMWEAVER Adding photos and other tips!. Making photo gallery  Gather ALL the photos you need into your images folder. (remember to copy the URL so.
| | Tel: | | Computer Training & Personal Development PowerPoint 2002 Foundation.
© 2010 Delmar, Cengage Learning Chapter 3: Working with Symbols and Interactivity.
CIS 205—Web Design & Development Fireworks Chapter 1.
> 1 Diagrams in Word Faculty of Health Alan Grace.
Chapter 7 Creating a Newsletter with a Pull-Quote and Graphics
Getting to Know InDesign
Learning With Computers I (Level Green) ©2012 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly.
Laboratory Exercise # 9 – Inserting Graphics to Documents Office Productivity Tools 1 Laboratory Exercise # 9 Inserting Graphics to Documents Objectives:
Chapter 9 Fireworks: Part I The Web Warrior Guide to Web Design Technologies.
MS Word Lesson Nine Formatting Objects Mrs. Brown.
Introduction to Microsoft publisher
Microsoft Publisher 2010 Chapter 1 Creating a Flyer.
PowerPoint Basics Tutorial 4: Interactivity & Media PowerPoint can communicate with the outside world by linking to different applications, managing different.
Chapter 4 Working with Frames. Align and distribute objects on a page Stack and layer objects Work with graphics frames Work with text frames Chapter.
Illustrator I I450 Technology Seminar. Bitmap vs. Vector Photoshop = Bitmap Illustrator = Vector Bitmap images are resolution dependent Vector images.
Copyright 2007, Paradigm Publishing Inc. EXCEL 2007 Chapter 8 BACKNEXTEND 8-1 LINKS TO OBJECTIVES Save a Workbook as a Web Page Save a Workbook as a Web.
1 Using layers NOTES. 2 Open Adobe Photoshop Elements. Select a size of A4. Create 5 new layers by selecting layer > new. Do this action five times. Click.
CIS 205—Web Design & Development Fireworks Chapter 2.
Lesson: 2 Common Features and Commands After completing this lesson, you will be able to: Identify the main components of the user interface. Identify.
Adobe InDesign Tri Fold Brochure. Create a Tri Fold Document InDesign > File > New Document The gutter is the space placed between columns to add breath.
© 2011 Delmar, Cengage Learning Chapter 4 Working with Frames.
Tuesday, 05 January 2016 PowerPoint Tips 2 Click your level below smart smarter smartest Press escape on the keyboard to close this presentation.
Introduction to Microsoft Word Introduction to toolbars and buttons.
Know your computer Make a Folder Copy from Word to Composer Format the Font Change the Alignment Format the Background Format the Colors Insert a Picture.
Inserting Hyperlinks  Purpose : Enables viewers to click the link and move directly to a slide  Directions : Make one link on slide one to move to each.
MICROSOFT WORD PRESENTATION. Word Processing  Software that is designed for the entry, editing, and printing of documents.  Windows Version = Microsoft.
Chapter 11 Collaboration Features for Workbooks Microsoft Excel 2013.
Enhancing a Presentation with Pictures, Shapes, and WordArt
Opening a File 1.Open Word 2.Click the Microsoft Office button(Very top left hand corner). A menu appears 3.Click Open. The Open dialog box appears 4.Use.
PowerPoint Practice Exercise 1.Save this file on your H drive in Word folder as Practice. 2.Edit each slide according to the instructions provided in the.
PowerPoint Chapter 1 Creating and Editing a Presentation with Clip Art Discovering Computers & Microsoft Office 2010.
Design around your audience:  Keep layouts clean and simple for all audiences. Be consistent.  For professionals, try using a sophisticated template.
1 Word Processing Intermediate Using Microsoft Office 2000.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Creating a Navigation Bar.
Microsoft PowerPoint 2010 Chapter 3 Reusing a Presentation and Adding Media.
Chapter 11 Enhancing an Online Form and Using Macros Microsoft Word 2013.
Windows Tutorial 3 Personalizing Your Windows Environment
Creating Web Pages and Graphics
International Computer Driving Licence Syllabus version 5.0
Creating, Formatting, and Editing a Word Document with Pictures
Chapter 1 Editing a Photo
Shelly Cashman: Microsoft Word 2016
European Computer Driving Licence
The Power Of PowerPoint.
Welcome To Microsoft Word 2016
Presentation transcript:

Fireworks Web Page mockups

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.

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

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

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:

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

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

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

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

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

Add a drop shadow Use the filters in the Properties

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