Taking Your Talent to the Web

339

tomer feedback onsite in real time. Initially that seems beyond the reach of the print designer-cum-web designer, but a few hours with a book on PHP will change all that. The client gets his interactivity; the designer gets a higher fee. Hopefully the consumer is also better served.

You might think all this is “too technical” for you. If you don’t believe you will ever be able to wrap your head around server-side stuff, let us now introduce you to Server Side Includes (SSI), the technology we mentioned earlier in this chapter.

TAKE A WALK ON THE SERVER SIDE

As a working web designer, you might find yourself cutting and pasting the same menu bar into page after HTML page. For instance, you might have cut and pasted something like this into all 500 pages of your site:

<!--Begin menu -->

<table border=”0” cellpadding=”0” cellspacing=”0”> <tr valign=”top”>

<td width=”20%” valign=”top” align=”left” bgcolor=”#cccc00” height=”25”> <a href=”/main.html”

onmouseover=”window.status=’Current issue. You\’re soaking in it.’; return true;” onmouseout=”window.status=’’; return true;”>

<img name=”main” src=”/menu3/main_o.gif” valign=”top” align=”left” height=”25” border=”0” alt=”Current issue.”></a></td>

</tr>

<tr>

<td valign=”top” align=”left” bgcolor=”#cccc00” height=”25”> <a href=”/stories/”

onmouseover=”window.status=’Past issues.’; changeImages(‘stories’, ‘/menu3/stories_o.gif’); return true;”

onmouseout=”window.status=’’; changeImages(‘stories’, ‘/menu3/stories.gif’); return true;”>

<img name=”stories” src=”/menu3/stories.gif” valign=”top” align=”left” height=”25” border=”0” alt=”Past issues.”></a></td>

</tr>

<tr>

<td valign=”top” align=”left” bgcolor=”#cccc00” height=”25”> <a href=”/news.html”

onmouseover=”window.status=’Site news.’; changeImages(‘news’, ‘/menu3/news_o.gif’); return true;”

onmouseout=”window.status=’’; changeImages(‘news’, ‘/menu3/news.gif’); return true;”>

340 HOW: Beyond Text/Pictures: Take a Walk on the Server Side

<img name=”news” src=”/menu3/news.gif” valign=”top” align=”left” height=”25” border=”0” alt=”Site news.”></a></td>

</tr>

<tr>

<td valign=”top” align=”left” bgcolor=”#cccc00” height=”25”> <a href=”/join.html”

onmouseover=”window.status=’Our mailing list.’; changeImages(‘list’, ‘/menu3/list_o.gif’); return true;”

onmouseout=”window.status=’’; changeImages(‘list’, ‘/menu3/list.gif’); return true;”>

<img name=”list” src=”/menu3/list.gif” valign=”top” align=”left” height=”25” border=”0” alt=”Our mailing list.”></a></td>

</tr>

</table>

<!-- End menu -->

Ugly, isn’t it? What if you could replace that entire chunk of repugnance with one comely line of code? Namely:

<!-- #include virtual=”/includes/menu.inc” -->

You can do it!

To do it, let’s assume that the menu mess was part of a page called index.html.

First, cut the menu mess out of index.html, paste it into a blank document, and save that document as menu.inc. The .inc stands for “include,” though technically speaking, includes can have any file extension—even .html. Your systems administrator will tell you if includes require a particular or unusual file extension.

Now in index.html, where the menu mess used to be, type that one line:

<!-- #include virtual=”/includes/menu.inc” -->

What do these tags mean? <!-- is a null tag containing a comment; <!-- #include --> is an include; virtual means that what follows in quotes is a URL pointing to the file you wish to include; and --> closes the comment and the include.

Next, you’ll save menu.inc in an “includes” directory on your web server. You don’t have to save it in such a directory, but it makes sense, just as it makes sense to save GIFs in a “gifs” directory, QuickTime movies in a “quick-

Taking Your Talent to the Web

341

time” or “movies” directory, and so on. As described in Chapter 7, this makes it easier to find pieces and write appropriate file references during the site’s creation and subsequent maintenance. If for some reason you prefer to save your SSI files in a directory called “rosebud,” the reference would read:

<!-- #include virtual=”/rosebud/menu.inc” -->

Now simply use that line of code in every HTML document where you formerly had to cut and paste a heap of menu bar markup. Then upload your HTML pages to the web server.

Some folks use a different file extension, such as .shtml or .shtm, if their HTML file contains an include, and some servers require this. But if you can stick to the .html file extension, you’ll avoid confusion and heartache down the road.

Why confusion and heartache? We knew you were going to ask. For one thing, imagine that your static .html pages have been bookmarked by visitors and search engines. You then start changing your file extensions. All of a sudden, your internal and external links are broken, your visitors are confused, and the search engines that ranked you so highly are pointing to nonexistent pages.

Are You Being Served?

You’ve replaced redundant markup with neat, clean includes. What’s the next step? There probably isn’t one. Most web servers natively support SSIs. If it doesn’t work right away, you might need to contact the company hosting your site (or the network administrator if your company hosts its own sites) and ask that the configuration file be changed to permit SSIs. Unless the hosting company hires trained monkeys as tech support, complying with your request will take two minutes.

Of course, if you are sane, you will have made this phone call before changing all your HTML pages. Or you will have created a test HTML page, uploaded it, and confirmed with your own eyes and mouse cursor that it works.

342 HOW: Beyond Text/Pictures: Take a Walk on the Server Side

More than one SSI can be put to use on each page. You can replace the

“header,” the “footer,” or just about any piece of the puzzle. Using SSI, you can replace all or nearly all of the dull, repetitive junk that holds web pages together.

In turn, you can begin viewing HTML pages as content containers rather than tortuous masterpieces of visually oriented markup—because content containers are exactly what they are and were always intended to be. This might not be the true separation of style from content, but it will do until the real thing comes along.

SSI can do many things besides what we’ve outlined here. It can insert appropriate text, HTML, or CSS based on the user’s browser. It can indicate when the page was last updated (<!--#echo var=”LAST_MODIFIED” -->), give the current date and time, and do other funky tricks.

And, as we’ve said, SSI is the low end. Imagine the possibilities if you begin to work with more advanced server-side technologies.

Advantages of SSI

If a site changes—or perhaps we should say when a site changes (for instance, when a new section must be added to the menu bar)—the power of SSI is revealed. What was true for CSS is just as true for SSI: It is easier to edit a single document (menu.inc) than it is to change hundreds or thousands.

Hopefully, your client is not about to wantonly add new sections to the menu or demand changes to the appearance of the menu after the site is nearly built. In a perfect world, you have followed the suggestions in Chapter 7, and the client has signed off (and paid part of your fee) at each stage of completion. Therefore, the client has a vested interest in following through with the plan he committed to and paid for and has no vested interest in pulling last-minute changes to prove that he is the dominant monkey in this rainforest.

But clients are clients, and change happens. SSI is a simple way of protecting yourself from hours of tedious replacement tasks.