In this workshop you’ll learn how to use Fireworks CS6 to turn a graphic design into a fully operational web page. The contents of this course include:
Introduction
In this chapter you’ll be introduced to the graphic design that will be converted into HTML and CSS during this course. We'll also explore the Fireworks interface and look at some of the new features available in Fireworks CS6 that can assist with web page design and creation.
Working with Web Pages
This chapter is an introduction to working with web pages and Dreamweaver, the HTML editor used in this course. You’ll learn why we need to work in an HTML editor and what role CSS plays in the look of a web page. We’ll also explore the Dreamweaver interface and the key concept of defining a local site.
Planning the Page Layout
This chapter looks at a couple of important concerns related to planning your page layout. You’ll see how a wireframe can give you a better idea of how Fireworks will convert the graphic design into a web page. Font usage on the web is also addressed.
It All Begins with Slicing
The first step in setting up a Fireworks file for export is slicing. This chapter explains why slicing is necessary and looks at several ways of doing it. We will discuss the difference between these methods and when you should use one over the other. We’ll also take a look at the Web layer in the Layers palette and how to work with it.
Optimizing Images
The process of optimization is an important one for any image that will be added to a web page. In this chapter you'll learn about the different image formats available for the Web and how to optimize them to produce the best possible image. We’ll also explore how to export an image to a PNG file once you have the optimization settings you want.
Masking in Fireworks
Masking is a great way of changing how an image appears without affecting the original image. In this chapter you will learn how to easily create vector and bitmap masks using a variety of methods. You will also discover how strokes and gradient files can provide you with amazing results.
Preparing for Export
Once a graphic design has been finalized, sliced, and optimized, there are some additional steps that you should take to ensure that the export process goes smoothly. In this chapter we’ll look at preparing a PNG file for export, adding slices to the design, optimizing design slices, and more.
The Export Process
You need to understand the Fireworks export process if you want to convert your web page graphics into HTML and CSS. This chapter will take you through the export process and discuss possible issues that can occur and how to correct them.
Working with the Pages Panel
The Pages panel in Fireworks allows you to create multiple web pages for export within a single PNG file. In this chapter you’ll see how to use the Pages panel to create a master page, which can then be used to create additional pages. We'll also look at how to export individual pages from the Pages panel.
Adding a Pop-Up Menu
Pop-up menus are a popular way to display multiple items in an efficient space in order to help the user navigate a website. Fireworks can produce pop-up menus, and this chapter will explain how.
Exporting Pop-Up Menus
Pop-up menus in Fireworks are not designed to be exported unless you are exporting your file into HTML table structure. Despite this limitation, it is still possible to add pop-up menus created with Fireworks to CSS positioned page layouts. In this chapter you’ll see how to let Fireworks create the necessary code and how to add that code to your web pages to create fully functioning pop-up menus.
The lessons are wrapped in a feature-rich interface that lets you jump to any topic and bookmark individual sections for later review. Full-Screen mode provides a hi-def, immersive experience, and Watch-and-Work mode shrinks the video into a small window so you can play the videos alongside your application. Also included are exercise files that give you an easy way to try out the techniques you learn.
Android
Apple iPad
