Category: HTML

Why colleges should stop teaching Fireworks as a primary web design tool

Here’s a recurring scenario in my life. Someone who took some college classes to learn to make web sites has decided to try to implement CSS and to make their sites accessible. The classes taught them to make web sites by using Fireworks to slice an image and to export the resulting table-based HTML to Dreamweaver. Now this person, who–I admit–does beautiful graphics in Fireworks, comes to me or to some discussion list I participate in and asks for help in making their Fireworks generated HTML work with CSS or fulfill some accessibility need. This question is like asking how to get a tricycle to go from zero to 60 in under 6 seconds—it demonstrates a gap in the basic knowledge of what is involved.

Some college has given this poor person a difficult handicap to overcome. That handicap is the belief that what they are doing is a best practice that will adapt to every requirement. Yes, Fireworks can generate HTML. No, learning to generate HTML with Fireworks is not the best way to learn to make web sites.

In terms of best practice, students should be learning how to structure an HTML document intelligently so that it can be presented with CSS based enhancements (including, perhaps, lovely images created in Fireworks). An intelligently structured HTML document can adapt to every requirement: CSS/accessibility for screen, print, handheld, etc.

A sliced image exported from Fireworks as a table full of empty cells, spacer gifs, images and almost no text is not the web design solution that some college classes lead students to believe it is. Classes should teach HTML, CSS, and then how to apply that knowledge with a tool like Dreamweaver.

Fireworks does have its place: to create graphics. It should be taught as a graphics design tool, not as a web design tool. Students who use Fireworks to create exportable HTML should know how to adapt it in Dreamweaver to make it meet their other requirements.

There are many options available to an instructor who wants to teach students to think in terms of building structure with HTML that will support CSS and accessibility. My own book is written in these terms, and other books I have reviewed here such as Web Standards Solutions by Dan Cederholm are as well.

Tip: What is a Wrapper Div?

One of the listservs I read regularly recently had the question posted, “What is a wrapper?” This question is sometimes phrased, “What is a container?” An answer provided by Paul Novitski was so clear that I thought it might be a useful tip here. With Paul’s permission, here is his response to the question.

A wrapper is an element, commonly a div, that encloses one or more other
elements in the HTML markup, e.g.:

<div id="wrap">
<h1>Headline</h1>
<p>Paragraph</p>
<p>Paragraph</p>
</div>

The purposes of wrappers are several, including:

  • to group elements semantically, for instance to separate page heading
    from body text from sidebar from footer.
  • to group elements cosmetically, such as with a surrounding border or a
    common background image or color.
  • to group elements in layout, such as to keep them all in the same column
    when columns are floated next to one another.
  • to enable special positioning, as when a wrapper is given relative
    positioning in order to contain child elements with absolute positioning.
  • to make it more convenient to specify elements in CSS and JavaScript by
    referring to their parent, without having to id or class each child
    element, as in:
    div#wrap h1 {...}
    div#wrap p {...}
    var aKids = document.getElementById("wrap")
    .childNodes;
    (Note: the var above should all be on one line)

Some special effects require several nested wrappers, such as when a box is
given rounded corners. UPDATED: This is no longer true since the border-radius property has become supported in most browsers. A border for any element can be given rounded corners using border-radius.

Thinking beyond the visual

Digital Web Magazine – Web Design for All the Senses by Dirk Knemeyer is an interesting article about stimulating the 5 senses in web design. He says, “the real reason the Web and other digital networks and interactions are such a hollow, flat experience is we are not being innovative and creative enough. Happily, this is something that we can easily take control of and change.”

I find this interesting because I recently had an epiphany of my own to the effect that web design is both engaging and interesting because it allows the creator to exercise both the left and right brain simultaneously. You have the analytical experience of writing HTML, CSS, JavaScript, etc., to stimulate one side of the brain. And you have the visual experience of planning a color scheme, a layout, graphics, etc., to stimulate the other side. This bit of insight came to me after I signed up to take a Photography and Journaling class, which promised to involve my whole brain with both art and words.

One of my past career paths was to write several books about cooperative learning and multiple intelligences as they apply to the writing process. The Write! books were published by Kagan Cooperative Learning, run by cooperative learning/multiple intelligences guru Spencer Kagan. I’m making quite a leap from the five senses to multiple intelligences here, but stay with me. I’m wondering if there is a way to move from the experiencing of a web page with more than one sense into the teaching of the skill and art of making a web page by using more than one or two of the identified intelligences.

To refresh your memory, the multiple intelligences are Linguistic intelligence, Logical-mathematical intelligence, Spatial intelligence, Bodily-Kinesthetic intelligence, Musical intelligence, Interpersonal intelligence, Intrapersonal intelligence, and Naturalist intelligence.

I haven’t heard of anyone trying to teach web design in a way that brings all the various intelligences into play. Drop me a line if you know someone who has, or if you have some ideas about how it could be done.

Tip: Eliminate unwanted whitespace in Internet Explorer list rendering

Sometimes Internet Explorer adds unwanted whitespace and separates list items in unwanted ways. The way to fix this is to remove all the whitespace from the list items in the code. There are two options for how to do this.

The first way is to “break” the closing list item tag like this:
<ul>
<li>list text</li
><li>list text</li
><li>list text</li
></ul>

The second method is to run all the list items together in one string like this:
<ul>
<li>list text</li><li>list text</li><li>list text</li>
</ul>

Additional note: there is information about the cause and cure for this problem at the CSS Creator Forum that doesn’t involve writing mangled HTML code.

Are you teaching your students to avoid these sins?

Molly Holzschlag has an article on InformIT, Seven Deadly Markup Sins that is a great reality check for instructors to use to make sure that students know how to make their tools do what needs to be done for standards-based markup.

If you don’t know how to modify the default HTML document that Dreamweaver creates see this tip Modify Dreamweaver’s default HTML New Document. It is about an older version of Dreamweaver but still applies to Dreamweaver MX 2004.

Hey, Adobe and Macromedia, listen up!

People who have learned to lay out Web pages graphically using Fireworks or Image Ready can export HTML containing sliced images poured into a tables-based layout. For years, students have been taught how to wrangle Fireworks and Image Ready into creating good rollovers, layouts, and optimized images in order to create beautiful and functional Web pages.

Some of those students are now wanting ways to use their knowledge of Fireworks and Image Ready graphical layouts to generate HTML using CSS-based layouts. How about it, Adobe and Macromedia? Can you give a demanding public updated tools that generate HTML and/or CSS fit for a world in which CSS is becoming the standard for layout?