In This Issue...

• Introduction
• IE7: The 'IEagle' has Landed
• Gettin' Gritty with Fireworks
• What's New on SitePoint!
• Hot Forum Topics
• New Blog Entries

Build Your Own Standards Compliant Website Using Dreamweaver 8

From the author that brought you "The CSS Anthology" comes "Build Your Own Standards Compliant Websites Using Dreamweaver 8".

"Learn everything you need to create standards compliant, accessible, cross-browser compatible Websites with Dreamweaver 8"

• Use Dreamweaver's Unified CSS Panel
• Mark-up Webpages using XHTML strict code
• Master super-efficient workflow techniques
• Make your site super-accessible

Download the sample chapters now!

Introduction

Welcome to Design View #18.

It's loose! Internet Explorer 7 has escaped from the compound and is gallivanting in the wild. No longer can we safely write it off like an overdue dental check-up -- potentially painful, difficult, and, hey, this is a really busy time for us, ok?

In this edition of the Design View, we look at the release and what you can do to get it running as a test browser on your system (as opposed to committing to it as your default IE).

We also look at a method for shaking some of the starch out of Fireworks' collar: applying aged effects to your artwork.

Enjoy.

Alex Walker
Editor
SitePoint Design View

IE7: The 'IEagle' has Landed

The speculation, the dreaming, the chest beating and the handwringing is over -- well, at least it's much reduced. We finally have a publicly available beta for Internet Explorer 7 (beta 1 was available to a limited test community).

So far, our general experience has been neither disastrous nor entirely painless. We needed to make some changes to the sitepoint.com CSS, but mainly at the higher end of the structural scale -- meaning that a few relatively small edits made big corrections across the site.

We are aware of an issue with some extra width causing some horizontal scrolling. However, this has been common across many other sites we've viewed with this beta, so, for now, we're treating this as a browser bug that will be fixed. Time will tell. If you're interested in the nitty-gritty of the changes we needed to make, Kevin has covered them in detail in the Tech Times.

So, let's say you're curious and you'd like to take IE7 for a spin, but you're not ready to let it oust IE6 as your IE of choice -- can this be done?

I'm no expert on the interplay of Microsoft components, but I did manage to get it going, and I'm happy to run you through the process I used to get it running on my XP system.

1. Download and save the beta EXE but don't run it. It's a self-extracting, self-installing ZIP file; we want to do this manually.
2. Create a new folder called 'IE7'.
3. Right-click on the EXE and scroll down to 'Extract to...' for Winzip. If you don't use Winzip, this process should work in your decompression software of choice.
4. Extract everything to your 'IE7' folder, making sure you keep the folder structure intact by keeping 'Use folder names' checked.
5. Open your 'IE7' folder, right-click inside the folder and scroll to 'New/Text Document.
6. Rename that file to 'iexplore.exe.local'. Make sure you're changing the file's format, not just renaming your text document to 'iexplore.exe.local.txt'.
7. That's it. Run 'iexplore.exe' in that folder -- do not run 'iesetup.exe', which will initiate the full install.

Note that Microsoft says it won't provide support for this kind of setup, so if you think you may want help, this option probably isn't for you.

While we're on the subject of running parallel versions of Internet Explorer, there's one more thing to consider.

Last year we talked about using 'conditional comments' as a way of keeping your IE hacks well-ordered, standards-compliant and future-proof. What many people didn't realise (myself included) was that if you were running standalone versions of IE4, IE5 and IE5.5 (like these ones) on the same system, you couldn't test your conditional locally -- all versions of IE identified themselves as being the same application, even though they used differing rendering components.

Luckily, this issue was spotted and solved almost exactly 12 months ago by Manfred Staudinger at Position Is Everything. It requires little more than a few small registry edits and the creation of another empty local file (like the one above). PIE also provides a very handy 'Conditional Comments Test Page' to allow you to verify that your system is recognising them.

I have to admit I had little interest in conditional comments at the time this article was published and completely missed it -- I suspect others did, too.

But as we move into the age of IE7, this information has suddenly become more relevant than ever before.

******UPDATE: *******

If you experienced any problems with your IE6 installation I've posted an easy fix (coutesy of Jon Galloway) as a blog post.

*************

Read the blog entry:

DHTML & CSS Blog: Stylish Scripting by Kevin Yank IE7 Beta 2 Released (25 comments)

DHTML Utopia: Modern Web Design Using JavaScript & DOM

by Stuart Langridge

"As the Web becomes a major (if not the major) application development platform, there's a greater need to give Websites the flexibility and power that client-side applications can provide."

Create usable, slick, and interactive Websites using modern, cross-browser compatible DHTML & AJAX.

Download free chapters from DHTML Utopia Now!

Gettin' Gritty with Fireworks

Way back in 2004, sometime SitePoint contributor Cameron Moll wrote a wonderful series of articles on using a combination of Photoshop tools, custom brushes and third-party filters to rough things up a bit.

Now, I love Fireworks, but with its 'laser-cut' bevels and shadows, it's almost too clean. Let's take a look one method you might use to give your Fireworks artwork a more 'lived-in' look.

I'll start with a logo that's well-suited to an 'aged' treatment (left).

a) Choose a texture: First, we need to get our hands on an organic texture to work with. There are dozens of excellent sites that offer downloadable texture resources online, or you may well want to simply use your own photography as a source. I'm going to use a woodgrain texture that I generated from scratch using a free texture engine from Spiral Graphics -- Wood Workshop. Although the result isn't quite as convincing as a photo, I think having control over every aspect of the wood makes it worthwhile.

I'm not going to do a full tutorial on using Wood Workshop, but if you do download it, you'll find that generating a basic texture is pretty easy.

1. Select a base wood.
2. Decide whether you want your wood uncut, in boards or in parquetry.
3. Click the 'Rings' checkbox to adjust the density, knots and structure of the wood.
4. Click the 'Weathered Effects' checkbox to apply scratches, gouges, streaks and/or rot at your discretion.
5. When you're happy with your texture, set the resolution to 512x512 (or a size significantly bigger than your logo) and render it out.

To achieve the effect we want, we need plenty of contrast, so your raw texture should hopefully look something like this.

b) Jump into Fireworks: Open your new texture in Fireworks and copy it to a layer above your logo.

c) Filter your texture: At the moment, our texture has too much information, so we'll need to filter most of it out. I want to use only the shadows, so I start by applying the 'Invert' Filter (Filters/Adjust Color/Invert). With Fireworks, remember always to use the live filters in the Properties panel, rather than the permanent filters located in the Filters menu.

d) Adjust your levels: Next, apply the 'Levels' filter (Filters/Adjust Color/Levels) and adjust the sliders so that almost everything turns black (see screenshot right). Only small amounts of light woodgrain pattern should remain.

e) Lose the color: We have no need for the color component of our texture, so apply the Hue/Saturation filter (Filters/Adjust Color/Hue/Saturation) and slide the saturation slider to the far left. Your texture should be black and white now.

f) Channel switching: Channels are the most intuitive way to blend these kinds of effects with your artwork. Select your texture and switch its channel to 'Lighten'.

g) Voila! Your weather-beaten logo is ready.

Remember that the order in which you apply your filters makes a big difference to the result. If you get a weird result, check that your filters are in the same order as mine.

Also, keep in mind that if the result isn't quite feisty enough for your liking, it's very easy to 'layer up' this effect. Simply make a copy of your original texture and reposition it to build up some extra grunge. Even better, throw in an entirely different texture and see the effect of them mixing.

Of course, it goes without saying that woodgrain is just one any number of textures you could apply using this method.

Hope you have some fun with it.

That's all for this issue -- thanks for reading! I'll see you in a few weeks.

Alex Walker
design@sitepoint.com
Editor, The SitePoint Design View

Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the SitePoint Design View!