In this series of videos, we are going to look at a workflow paradigm which takes advantage of some of the new tools in Fireworks CS3. Primarily focusing on Pages, Master Pages, Hierarchical layers and Shared layers, we'll see how a design can go from concept to working prototype for client approval.

The first in our series dealt with pages, shared layers and hierarchical layers and my logic for using this method. This is a method I might use in the early comping stages; a point where we've gotten past rough sketches on paper and want/need to engage the client further.

The second part of the series added a Master Page Feature, Shared Web Layers and hot spots for interactivity, Rich Symbols and 9-slice enabled graphic symbols. Certain design decisions were made and we had received approval for most of the common elements that would appear on each page (header, footer, navigation). We ended part two by creating a working prototype that the client can test live on a staging server.

Please join me in this tutorial, where I will show you how to create the Checkers pieces to go along with the Checkers Board we made in Part 1, using Illustrator tools and techniques.



The Creating a Checkers Board & Checkers Using Illustrator Series:
Creating a Checkers Board in Adobe Illustrator Using the Rectangle Grid Tool - Part 1
Creating Checkers Pieces in Adobe Illustrator Using Illustrator Tools and Techniques - Part 2 ...

The Tokyo JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file.

The Tokyo JumpStart provides the easiest of solutions for changing the amount of columns on a page - you simply need to add a class to the body tag and the CSS takes care of everything else for you!

Want a JumpStart where you need to modify only two graphics AND you can choose a two or three column version that you turn on with the flick of one class? Then welcome to CMX JumpStart Tokyo!

Tokyo is a centered, two-column or three-column, 770 pixel fixed-width layout that has many appealing design features. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The right column of the three-column version has a series of pods that can be used for "teaser text" with thumbnail images. ...

In the previous tutorial ? Part 14 ? we discussed the document flow. We discovered that to create a CSS layout it would be necessary to remove some elements from the document flow to allow them to sit by side.

We investigated two different ways that allowed us to move such elements from the document flow, they were floating and absolute positioning. In this tutorial, we will explore the absolute value of the positioning property and discover exactly how the value works and why it shouldn't be used for laying out your web page structure.

The CSS For Absolute Beginners Series:
CSS For Absolute Beginners - Part 1: Syntax and Type Selectors
CSS For Absolute Beginners - Part 2: Linking Style Sheets
CSS For Absolute Beginners - Part 3: Making CC & DT Style Sheets Work for You
CSS For Absolute Beginners - Part 4: Type, Class & ID Selectors

In Part Six of this series, we used Dreamweaver to manipulate the various divisions of the page and position them into a header with two columns underneath. This time around we'll complete the design in Dreamweaver by formatting the maincontent div text and turning the sidebar links into clickable buttons. In the process, I hope to introduce you to additional features that will improve your productivity.

This tutorial includes starter exercise files as well as a completed layout that you can use as a basis of comparison while you work through the steps.

The Dreamweaver for GoLive Users Series:
Dreamweaver for GoLive Users: Part 1
Dreamweaver for GoLive Users: Part 2
Dreamweaver for GoLive Users: Part 3
Dreamweaver for GoLive Users: Part 4
Dreamweaver for GoLive Users: Part 5

By writing semantic, valid XHTML, the code that you create for your website will work not only cross browser, but cross device. The web page that works in your Firefox Browser on your Windows XP computer can work in a cell phone's browser, on TV via a PlayStation, and even in a braille reader. To write semantic code, you need to understand what every element means. In this series, we will cover all the HTML

This series will include:

• Part 1: The required elements to create a document:
• Part 2: Elements that go inside the document head
• Part 3: block level elements
• Part 4: Lists
• Part 5: Tables: Block level elements that aren't display: block
• Part 6: Common inline elements
• Part 7: Less common inline elements
• Part 8: Form Elements

There are several elements that we can use to create a valid XHTML document that is sematically correct. To code correctly, it is important to know all the elements, and especially to know when and how to use them. In part one of the Semantic XHTML series, we discuss the five elements that are required.

...

Spry is a JavaScript-based framework that provides AJAX-powered dynamic web content. There are other Javascript libraries available to accomplish similar results (such a JSON, jQuery, etc.). The Spry library is produced by Adobe Labs, and, as of this writing, is in 1.6.1 release. (SPRY at Adobe Labs.) Although SPRY can be used with other server technologies, such as PHP, ASP.net, etc., Spry seems to employ techniques that are especially intuitive to the ColdFusion developer.

The Spry parts of this tutorial series (Parts I & II) just scratched the surface of working with Spry. However, they should have given you the basic concepts in a simplified manner, allowing you to go much deeper on your own. When you download Spry you get not only the necessary library, but many examples, as well as Spry widgets to accomplish many interesting effects. These can be invaluable in learning to use Spry.

In Parts I & II, we constructed a simple Picture Gallery with clickable thumbnails that then revealed full-size pics (and some with further detail). The Spry techniques used XML and its source was a static, hand-coded XML file.

In this tutorial you will learn about the longhand and shorthand syntax for applying borders to elements. You will learn how you can write efficient rules and see how longhand syntax can in the right circumstances further reduce file size and improve file management and download times.

The CSS For Absolute Beginners Series:
CSS For Absolute Beginners - Part 1: Syntax and Type Selectors
CSS For Absolute Beginners - Part 2: Linking Style Sheets
CSS For Absolute Beginners - Part 3: Making CC & DT Style Sheets Work for You
CSS For Absolute Beginners - Part 4: Type, Class & ID Selectors
CSS For Absolute Beginners - Part 5: Pseudo-Classes and Elements
CSS For Absolute Beginners - Part 6: Grouping Selectors

There are times when a little tip or trick in Photoshop comes in handy when there just isn't any other way to do it. In this quickie tutorial I'll demonstrate three ways to perk up your craftiness in Photoshop.

First I'll show you a way to see the feathering on a selected area before you apply the feathering and then a way of isolating and adjusting specific over exposed areas of an image by using a special Channel selection method. ...