Interactive Llama

I have not tested Dreamweaver CS3, but prior versions of the program do a mediocre job of displaying CSS correctly. For instance, div tags do not always display correctly without inline style tags–which we all know is such a coding faux pas. This has led to a departure from using a WYSIWYG editor and to using the browser to construct webpages. Below are the best aids I have found in debugging and editing webpages in the browser Mozilla FireFox. (more…)

With the prevalence of DHTML, much less AJAX, I have begun to use separate Cascading Style Sheets for development and publishing. Since styles override each other, the easiest way to accomplish this is to add a second style sheet link after the publishing CSS link and comment it out when one wants to test the page.

“dev.css” contains “display: block;” within all classes that in the publishing CSS contain “display: none;” much like that below:

.profile_box { display: none;} (index.css)

.profile_box { display: block; } (dev.css)

To the designer, it’s a pain only using Arial and Times New Roman for headlines (well, the MacHead designers are probably using Helvetica and Times, but I regress. . .) , so one uses images. The problem is that images are static unless you have an image generation script package installed on your web server to create images on-the-fly.

So what’s one to do?

A friend of mine actually sent me a link to Mike Davidson’s site on sIFR 2.0 (Scalable Inman Flash Replacement) two years ago. I had forgotten about it until my creative director wanted a headline in a pixel font in a database driven site.

The concept

sIFR can replace short amounts of text with text rendered in the typeface you choose–whether or not your users have the font installed on their computer. A flash movie is created on the client side and uses JavaScript to pass text to it from the HTML (that’s correct, no coding the text twice). That means with a few lines of Javascript, you can use any fancy font you want for headlines and pullout quotes.

–Stephen M. James
www.smjdesign.com

This is the best tool I’ve seen for analyzing and disecting a pre-existing website (or to debug the one you just created). This extension allows one to outline table cells, view anchors, DIV tags, disable CSS, resize the browser window, validate your code with the W3C, inspect the DOM, and all inside your browser! Download Firefox. Then download the Web Developer Extension.

Screen shot of Display Element Information
Screen shot of Outline Table Cells

–Stephen M. James
www.smjdesign.com