Designing with semantics in mind

By writing semantic markup, you're on your way to using web standards. Semantic markup means using XHTML elements for their implied meaning, such as <h1> for the first, most important heading in the document.

Once the semantic markup is done, you need to separate presentation from structure by using CSS to style these elements. It is also important to validate both the markup and CSS to ensure they comply with their standards. Although there are other standards to consider, for the purpose of this article, these will be considered to be the two most important ones.

Prior to designing in Fireworks CS4, layouts for websites were created with little regard for the semantic structure of the elements themselves. Sure, you'd visually create different sized headings, for example, but the actual elements to be used were usually decided upon after the design was completed, and during the process of building of the XHTML and CSS.

While this is an adequate workflow when the same designer designs and builds the web page, when another designer/developer resource is tasked with building the XHTML, their perception of the structure of the document could be very different than intended—resulting in a less semantic result.

With the updated CSS Export feature, you now have two methods of planning and realizing the semantic structure of a design within a Fireworks CS4 document, which not only helps you plan your design more effectively, but allows for anyone else to take over the project as well.

The two methods, tagging text and HTML component symbols, are discussed below, along with their pros and cons.

Using text objects and tagging

I'm sure every Fireworks designer regularly uses the Text tool to mock up text in their designs. For this reason, I realized that standard text objects offered an excellent opportunity to help define the semantic structure of the content.

I've enhanced the CSS Export feature to allow for the tagging of text objects to identify the corresponding XHTML tag on output, just by following a simple naming convention.

The elements that can be created from a text object are: <a>, <blockquote>, <div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <label>, <p>, and <span>. Specifying a tag other than these, or not specifying one at all, will produce a <p>.

To specify that a text object should use a specific tag, simply name it beginning with the tag name, like so: <h1>title .

Let's try it now:

1. Close Fireworks CS4 if it is already open.
2. Downloaded and install the CSS Export Script and HTML Components available from the introduction of the article.
3. Open Fireworks CS4.
4. Create a new 500 × 500 document, with a white background.
5. Select the Text tool, click anywhere on the canvas and type Hello world.
6. Change the font and color to Arial – Bold – 20px.
7. Choose File > Export to export the document as tagging.htm using CSS and Images.
8. Locate the exported location and open both the tagging.htm and tagging.css files in Dreamweaver CS4.
9. Preview tagging.htm in Design view, Live view, or your primary browser. Notice how it looks remarkably similar to the Fireworks document.

10. View the source of tagging.htm (see Figure 1).

    

    Figure 1. Export process creating a valid XHTML document, including three divs and a paragraph

Because you did not tag the text object in Fireworks, it has exported the content in a paragraph. Notice that it has given the paragraph a class of lastNode and has wrapped it in a div with a class of Txt_Hello.

By viewing the related CSS file, you can see that the lastNode class applies to paragraphs within an element that has an ID of "main" and resets their margin-bottom to 0.

The class of Txt_Hello on the div is based on the name of the text object in Fireworks, and positions it where it needs to go, setting its font and color properties so that any paragraphs within that div are appropriately styled too.

This way, a user can add multiple paragraphs, both from within Fireworks or an external editor or CMS, and the paragraphs will always be styled correctly. Just remember that the final paragraph of any text block must have the lastNode class applied.

So, let's try it now:

1. Go back to Fireworks and edit the "Hello world" text object.
2. Put the cursor at the end and press Enter twice to create a blank line.
3. Type this: A second paragraph?

4. Re-export the document and view the results in Dreamweaver (see Figure 2).

   

   Figure 2. Two exported paragraphs, one for each line of text

With the version of the CSS Export that ships with Fireworks CS4, only one paragraph would ever be created, with breaks (<br />) creating the space between. The class of Txt_Hello would also be applied to the paragraph and the div would not be created, meaning that new content could not be added without causing validation errors.

As you can see, this updated version of the script is already helping to create better standards-compliant pages.

Now try tagging:

1. Return to Fireworks CS4.
2. Select the "Hello world" text object.
3. Either in the Property Inspector or Layers panel, rename it to <h1>title

4. Re-export the document and view the results in Dreamweaver CS4 (see Figure 3).

   

   Figure 3. Changed markup to represent the tagging in Fireworks

As you can see, Fireworks respected that you wished for the "Hello world" to be an <h1>. This time it created the space between the lines using breaks—paragraphs obviously cannot exist within headings—and gave the <h1> a class of h1_title to style it. A div didn't need to be created, as only inline elements could ever reside within an <h1> element.

As I mentioned earlier, you can now tag text objects to create twelve different XHTML elements.

It is important to remember that if you create an anchor <a> this way, the styles created for it will apply globally for that element. You will not be able to specify different styles for the :link, :visited, :hover, :focus, or :active pseudo-classes. Styling these pseudo-classes requires you to edit the exported CSS file manually.

There are three other important considerations when you use a text object:

• CSS Export positions the text according to its bounding box, not its actual position on the canvas. It is therefore important in your design to position and resize the text box so that the bounding box sits exactly where you want the text to export. This can result in a slightly unaligned design in Fireworks, however.
• Fixed-width (area-text) outputs a width in the style sheet, while fluid (point-text) does not. You will need to consider which is the most suitable for each instance.
• Multi-formatted text exports only the relevant styles of the original, base formatting.

Let's consider these observations by way of an example of a website breadcrumb, consisting of six point-text objects, four tagged with <span> and two with <a>. Notice how in Fireworks the bounding boxes are actually spaced six pixels apart to create the same space upon export, but the text in Fireworks actually appears as nine pixels apart (see Figure 4).

Figure 4. Comparing how six point-text objects appear in Fireworks and the browser

As well as supporting the tracking (letter-spacing), leading (line-height), (text-)alignment, (font-)weight, and (font-)style options, this enhanced version of the CSS Export also translates both the space preceding paragraph and the space following the paragraph as a relevant margin-bottom value in ems on paragraphs.

Using HTML component symbols

Introduced in Fireworks CS3, rich symbols are editable design and interface components that you can use and reuse for website designs, interface prototypes, or any other graphic design composition. They have been enhanced in Fireworks CS4 to allow for creating relevant XHTML markup and CSS on export.

It was the original intention of the Fireworks team to use HTML components to produce the required markup for all elements when using the CSS Export feature. With the introduction of tagging, however, I believe there will now be a reduced need for them, as they are less efficient to use—and, as the old adage goes, "time is money." Nevertheless, they definitely still have their place as part of your workflow, which is why I have taken the time to recreate new HTML component symbols, which are now included as part of the enhanced CSS Export.

Note: If you have already used the existing HTML components, your designs will more than likely error on export until the document's library is updated with the new components.

The HTML component symbols can be found in the Common Library panel (Window > Common Library) within the HTML folder. The following symbols are included: Link, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6, TextField, TextArea, ComboBox, CheckBox, RadioButton, and Button.

All of the form elements exist in both Windows Vista and Mac OS × default theme varieties. If you wish, you can easily create other OS themed varieties too. To learn more, read Aaron Beall's article, Using rich symbols in Fireworks, and Sarthak Singhal's article, Enhancing rich symbols in Fireworks CS3.

As with the rich symbols from CS3, the HTML components' properties are changed through the Symbol Properties panel while the symbol is selected on the canvas.

Using the Heading symbols

The Heading 1 through Heading 6 components have the following editable properties:

• Text
• Color
• Font (Family) – various standard choices
• (Font) Size
• (Font) Style
• (Font) Weight
• Line height

Although this list doesn't seem particularly limited when compared to what tagging a text object as a heading would allow, there are some notable differences:

• The symbols cannot be given a desired width, instead always sizing themselves to their Text content
• They cannot have multiple lines of text
• Changes in the symbols' Line height values are not represented in Fireworks
• Only one symbol's properties can be changed at a time

In addition to this, the Common Library panel unfortunately retains some of its quirks from CS3, and now the Symbol Properties panel in CS4 suffers from some irritating (and known) bugs too:

• Content cannot be copied and pasted within the fields using shortcut keys—which instead actually copies and pastes the symbol itself. To access these functions you must right-click in the field.
• The panel does not always update correctly, often showing old properties even when one has just been changed.

As well as the reusable, swappable, and edit-once, update-many benefits of using symbols, another of their benefits is that they limit the font (family) choices available to a select list of the most common fonts found on users' computers. However, in their defense, using text objects will present a necessary warning if a nonstandard font is used.

If you are uncertain as to which fonts are safe to use on the web, I suggest reading Code Style's Most Common Fonts for Windows, Mac and Linux Font Survey Results which is updated regularly.

So, as you may have gathered, I don't necessarily recommend using the Heading HTML components. However, the remaining link and form element symbols can become very important in your workflow.

Using the Link symbol

The Link symbol has the following editable properties:

• Text
• Font (Family) – various standard choices
• (Font) Size
• Href
• Link color
• Link (font) weight
• Link (text) decoration

Also editable are the same color, weight, and decoration properties for the :visited, :hover, and :active pseudo-classes.

The Link symbol suffers from the same issues as the Heading ones, as I mentioned, but they are less of an issue in this instance.

Try using the Link symbol so you can become acquainted with it:

1. Create a new document.
2. Open the Common Library.
3. Expand the HTML folder, and click and drag Link on to the canvas.
4. Open the Symbol Properties panel.
5. Change as many of the properties as you wish.
6. Export the document as symbol.htm using CSS and Images.
7. Locate the file and preview it in your primary browser.

You can see that the link was exported to look exactly as it was in Fireworks and maintained all of the color, decoration, and weight properties for the pseudo-classes :link, :visited, :hover, and :active.

If you open the accompanying CSS file in Dreamweaver, you will see that all of the relevant rules have been created similar to what appears in Figure 5. The order in which the CSS rules are produced for anchors is extremely important to ensure that the correct formatting is applied at all times, regardless of its state. The anchor's ID #Link has been generated from the object's name in Fireworks.

Figure 5. Example of CSS rules produced from exporting the Link HTML component

Using the List Item symbol

When I was approached to help make Fireworks produce more semantically correct markup, I made it a top priority that it could create unordered lists. This is why the new symbol is the cream of the crop.

Although it's called the List Item symbol, believe it or not, you will use it mostly to create links. Confused? Let me explain. Every website has some form of navigation, and if you think about it semantically, what is navigation if not a list of links? It's a perfect fit.

The List Item symbol has the following editable properties:

• Text
• Color
• Font (Family)
• Font (Size)
• Font (Weight)
• Node type – normal, first, last or both
• Is link? – true or false
• All the usual Link symbol properties

The "Node type" and "Is link?" properties are the most two important properties of this symbol. "Node type" determines how each list item will be represented in the markup, while "Is link?" dictates whether the symbol will also output an anchor, and allows you to style it appropriately, similarly to the the Link symbol.

The effects of the "Node type" property are as follows:

• Normal – creates this markup on export <li>Text</li>
• First – creates this markup: <ul><li>Text</li>
• Last – creates this markup: <li>Text</li></ul>
• Both – creates this markup: <ul><li>Text</li></ul>

So by combining various List Item symbols, and setting their Node type correctly, you can export a full unordered list with children list items.

Let's explain their usage with an example:

1. Create a new document.
2. Open the Common Library.
3. Expand the HTML folder, and click and drag List item on to the left of the canvas.
4. Open the Symbol Properties panel.
5. Change the Text property to read as Link 1
6. Clone the symbol by selecting Edit > Clone.
7. Nudge the duplicate to the right by 50px.
8. Change its Text property to Link 2
9. Clone and nudge the symbol once more, setting this one's Text to Link 3
10.  Clone and nudge the symbol once again.
11. Set the Text Property to List item.
12. Set its "Node type" to last.
13. Set its "Is link?" property to false.
14. Select the Link 1 symbol and set its "Node type" to first.
15. Export the document using CSS and Images as ul.htm.

16. Open ul.htm in Dreamweaver and review the source in Code view (see Figure 6).

    

    Figure 6. Markup produced from the List Item symbols in Fireworks

The CSS Export process extrapolates the structure of the document by interpreting where the columns and rows of objects exist. Because of the float-clearing mechanism used for that, attempting to create an unordered list, arranged vertically, will result in invalid markup being produced (see Figure 7).

Figure 7. Invalid clearing <div> tags output between list items when arranging them vertically in the document

If you wish to have a vertical navigation, simply remove the float-clearing divs and assign the class of clearFloat to each of the <li> tags (see Figure 8). Attempting to visually divide the List Items in Fireworks with an object, such as a rectangle, line or text, for example, will also produce invalid markup in both horizontal and vertical lists.

Figure 8. Proper code for creating a vertical navigation

Upon export, you will be manually required to move these dividers to within the <li> tags, and change their styles slightly if necessary to produce the desired output.

Using the form element symbols

The <form> elements have been overhauled the most in this enhanced version. Although both Windows and Mac versions of each element existed before, the Mac ones held the short straw with regard to actually being useful—or working at all!

Both sets of elements have now been updated to show a larger range of editable properties and to export correct and valid markup and styles. The HTML TextArea element has also been included.

The editable properties for form element symbols are as follows:

• Text or Label
• Color
• Font (Family) – various standard choices
• (Font) Size
• (Font) Style
• (Font) Weight
• Type – various choices for Button and TextField only
• State – various choices for all except TextArea

For Buttons, the Type property allows you to display and export buttons of type Submit, Reset, or Button. For TextFields, you can choose to export standard Text or Password inputs.

The State property varies among the symbol, but generally allows you to represent the element when it is hovered over, selected, or disabled—with disabled elements exporting as disabled.

When exporting a document that contains form elements, there are some considerations to maintain valid and standards-compliant markup:

1. When an HTML form element symbol is used and the document is exported, a single <form> element wraps the entire contents. While this is fine for most situations, and is normal for anybody who develops in .NET, you need to manually modify the document's form structure when multiple, clearly separate forms exist—such as when a search and message posting exist in the same document.
2. No <fieldset> or <legend> elements are ever exported. As it is not possible to define a logical collection of <form> elements within Fireworks, you will need to manually add them after the export process and unstyle them, where appropriate, to make them essentially invisible.
   
   You may wonder why you should perform this extra step. Well, not all of your users will be browsing with a standard desktop browser like Internet Explorer or Firefox. This means you must make your markup as semantically correct and accessible as possible.
3. Only radio buttons and check boxes export a relevant <label> element. If you require a visible <label> in your design for other form elements, tag a text object as one. You will still need to associate the label to the relevant form control by adding a "for" attribute with a value of the form control's ID.
   
   If you do not require visible <label> tags, omit them from your design but remember to add them in the markup and then hide them through CSS after the export process.

There are a few other things worth mentioning when using form elements:

• No height values will ever be output on a form element, except for the TextArea symbol, regardless of their size within Fireworks. Applying heights produces differing, unwanted results across browsers. If you wish to produce a larger height on a text input for example, use padding instead. Doing so will maintain the vertical alignment of the text.
• Because of the differing values of default padding on form elements across multiple browsers, the widths of exported elements may actually vary from those in the original design.

Page 2 of 4

Previous Page

Next Page