Please register and sign-in to use bookmarks.
Subscription or course purchase needed
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:
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.
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.
It's easy to watch this course from your Android device, iPad, or iPhone (4 or later). Access videos straight from your browser, or, for Android devices or iPads, use this course in one of our free apps.
Project files are included with this course so you can practice what you learn and work right along with the videos.
This course features video2brain’s interactive interface. As you navigate the course, rolling over a chapter or video brings up text describing that item.
Full-Screen mode provides a hi-def, immersive experience. And Watch-and-Work mode puts the video into a resizable window that you can shrink so you can watch the lessons on one side of your screen while you’re following along and applying what you’ve learned on the other.
This course comes in crisp 1280 x 720 high definition video.
Available in the downloadable version of our courses, this feature makes it easy to create a custom bookmark in any lesson to mark where you left off or to make note of something you want to refer back to later. You can even add a name or short note to remind yourself what the bookmark is for.
All rights reserved.
video2brain and the video2brain logo are trademarks registered to video2brain.
Please register and sign-in to use bookmarks.