Home » Software Training » Fireworks: Web Workflow » Exporting as HTML and Images

Connecting...

This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Fireworks: Web Workflow
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
Since this lesson is not free, only the preview will appear on your website.

  • Discussion

  • Study Guides

  • Table of Contents

Please login to ask a question and view discussion.

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Exporting as HTML and Images

  • What I am going to do is export this png file as html & images
  • When I do that the coding needed for the popup menus is created
  • I can use that coding in my css based html file
  • I will copy & paste the coding from this export into my css version of this design
  • That will allow me to have the page layout in CSS, and still be able to add the popup menu code
  • Let’s walk through the export process using the HTML & Images option and look at our final output
    Candyce Mairs

    Candyce Mairs

    Exporting as HTML and Images

    Slide Duration:

    Table of Contents

    Section 1: Becoming Familiar with Fireworks
    Exploring the Fireworks: Web Workflow Project

    2m

    Getting to Know the Fireworks Interface

    5m 26s

    Fireworks CS6 New Features

    5m 20s

    Section 2: Working with Web Pages
    Why Do I Need an HTML Editor?

    7m 1s

    What Does CSS Do?

    2m 49s

    Defining a Local Site in Dreamweaver

    5m 56s

    Becoming Familiar With the Dreamweaver Interface

    7m 54s

    Section 3: Planning the Page Layout
    What is a Wireframe?

    6m

    Web Typography

    4m 46s

    Section 4: It all begins with Slicing
    What is Slicing?

    5m 4s

    Learning About The Slice Tool

    5m 52s

    Slicing Techniques

    6m 1s

    Section 5: Optimizing Images
    What is Optimization?

    7m

    Using Image Formats for the Web

    6m 10s

    Exploring How to Optimize an Image

    8m 49s

    Exporting an Optimized Image

    3m 59s

    Section 6: Preparing for Export
    Preparing a PNG File for Export

    8m 28s

    Working with the Common Library

    13m 13s

    Adding Slices to the Design

    5m 54s

    Optimizing Design Slices

    8m 36s

    Setting up the Navigation Bar

    4m 59s

    Section 7: The Export Process
    Exporting the PNG File

    6m 2s

    Correcting the Export Issues

    8m 6s

    Fixing Final Code

    7m 58s

    Fine Tuning the Layout

    6m 54s

    Adding Drop Shadows using CSS

    8m 32s

    Adding Background Gradients using CSS

    7m 56s

    Working with Curved Corners

    5m

    Browser Support for CSS3 Properties

    4m 7s

    Section 8: Working with the Pages Panel
    Exploring the Pages Panel

    4m 24s

    Creating a Master Page

    5m 31s

    Creating Pages from a Master Page

    7m 13s

    Exporting Individual Pages from a PNG File

    5m 2s

    Section 9: Adding a Popup Menu
    What is a Popup Menu?

    3m 24s

    Creating a Popup Menu

    8m 22s

    Adding Additional Popup Menus

    5m 19s

    Section 10: Exporting Popup Menus
    Exporting Popup Menus

    4m 29s

    Exporting as HTML and Images

    6m 12s

    Copying the Coding Part 1

    6m 59s

    Copying the Coding Part 2

    6m 47s

    Correcting the Image Location

    2m 8s

    Adjusting and Previewing Our Final File

    7m 11s

    Educator®

    Please sign in to participate in this lecture discussion.

    Resetting Your Password?
    or
    Still having trouble? Contact us
    OR

    Start Learning Now

    Our free lessons will get you started (Adobe Flash® required).
     Get immediate access to our entire library.

    Membership Overview

    • Available 24/7. Unlimited Access to Our Entire Library.
    • Search and jump to exactly what you want to learn.
    • *Ask questions and get answers from the community and our teachers!
    • Practice questions with step-by-step solutions.
    • Download lecture slides for taking notes.
    • Track your course viewing progress.
    • Accessible anytime, anywhere with our Android and iOS apps.