Library

Course: Fireworks CS6 Web Workflow

Fireworks CS6 Web Workflow

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
About this Course

In this hands-on workshop Candyce Mairs shows you how to use Fireworks CS6 to turn a graphic design into a fully operational web page. Beginning with the basics of the Fireworks interface and designing for the Web, Candyce walks you step by step through the transition process, from slicing and optimizing images to wireframing, turning designs into HTML and CSS, and previewing pages. You’ll also learn how to use drop shadows, gradients, rounded edges, and pop-up menus to add that extra flair to your designs. Turning your web designs into web pages has never been easier!

Basic knowledge
  • Adobe Fireworks CS4 or higher in order to do the exercises within the lectures
  • Adobe Fireworks is not required if you do not wish to do the exercises within the lectures
What you will learn
  • Understand how to work in Fireworks
  • Be Familiar with the CSS Export Feature within Fireworks
  • Completely convert a Fireworks web page design into an HTML and CSS web page
  • Extend the capabilities of Fireworks beyond the basic program using extensions.
  • Know the importance of properly slicing your design to create the web page
  • Be familiar with the basics of HTML and CSS on a web page
Curriculum
Number of Lecture: 42
Total Duration: 04:19:10
Introduction
  • Exploring the Fireworks Web Workflow Project  
  • Getting to Know the Fireworks Interface  
  • Fireworks CS6 New Features  
Working with Web Pages
  • Why Do I Need an HTML Editor?  
  • What Does CSS Do?  
  • Defining a Local Site in Dreamweaver  
  • Becoming Familiar with the Dreamweaver Interface  
Planning the Page Layout
  • What Is a Wireframe?  
  • Web Typography  
It All Begins with Slicing
  • What Is Slicing?  
  • Learning About the Slice Tool  
  • Slicing Techniques  
Optimizing Images
  • What Is Optimization?  
  • Using Image Formats for the Web  
  • Exploring Image Optimization  
  • Exporting an Optimized Image  
Preparing for Export
  • Preparing a PNG File for Export  
  • Working with the Common Library  
  • Adding Slices to the Design  
  • Optimizing Design Slices  
  • Setting Up the Navigation Bar  
The Export Process
  • Exporting the PNG File  
  • Correcting Export Issues  
  • Fixing the Final Code  
  • Fine-Tuning the Layout  
  • Adding Drop Shadows with CSS  
  • Adding Background Gradients with CSS  
  • Working with Curved Corners  
  • Browser Support for CSS3 Properties  
Working with the Pages Panel
  • Exploring the Pages Panel  
  • Creating a Master Page  
  • Creating Pages from a Master Page  
  • Exporting Individual Pages from a PNG File  
Adding a Pop-Up Menu
  • What Is a Pop-Up Menu?  
  • Creating a Pop-Up Menu  
  • Adding Additional Pop-Up Menus  
Exporting Pop-Up Menus
  • Exporting Pop-Up Menus  
  • Exporting as HTML and Images  
  • Copying the Code (Part 1)  
  • Copying the Code (Part 2)  
  • Correcting the Image Location  
  • Adjusting and Previewing the Final File  
Reviews (0)