http://sitepointstatic.com SitePoint Design View
SitePoint Design
View10th February, 2006 
Issue 18 

Newsletter Archives | Advertising | Contact us  
The Useful, the Usable and the Unbelieveable in Design for the Web 

In This Issue...

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!



Alex WalkerWelcome 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.


Alex Walker
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 CSS, but mainly at the higher end of the structural scale -- meaning that a few relatively small edits made big corrections across the site.

IE7: Horizontal scrolling is a common rendering

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:

Kevin Yank DHTML & CSS Blog: Stylish Scripting
by Kevin Yank

IE7 Beta 2 Released (25 comments)


DHTML Utopia: Modern Web Design Using JavaScript & DOM

Photo of
Stuart Langridgeby 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.

Jack's Toys LogoI'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.

Wood Workshop

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.

WoodgrainTo 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.

Fireworks screenshotd) 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'.

Jack's Toys Logo - Finalg) 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
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!

Send this to a friend
 What's New on SitePoint!

6 Killer Tips for More Web Design Clients

Brendon Sinclair
By Brendon Sinclair

The new year is the perfect time to sow the seeds of business growth. First step: attract new clients. In this grassroots guide, Brendon shares the tips that generate the most leads for his own business, and explains how they can help your burgeoning client list flourish this year.

Dreamweaver 8 Reviewed

John Wilker
By John Wilker

Still skeptically holding off from upgrading to DW8? John's review highlights the pros (and outlines the cons) of this recent release to help you make the decision to take the plunge.

What's Your Link Reputation?

By Gord Collins

Forget Pagerank: as Gord explains, this measure no longer allows us to accurately or consistently predict how a page will perform in the search results. Here, he unravels the concept of Link Reputation, explaining why it's important and what it means for your site's ranking.

Fire Up your own Linux Server

Langridge and Tony Steidler-Dennison
By Stuart Langridge and Tony Steidler-Dennison

2006 is the Year of the Penguin! So if you've been toying with the idea of running your own server, now's the time. This comprehensive guide shows you how to get started - from installing Linux, to using the command line, setting automatic tasks to run, and securing the beast!

 Hot Forum Topics
 New Blog Entries

Selling Web Design Services Blog:
Down To Business

Web Tech Blog:
Technically Speaking

Website Revenue Strategies Blog:
On the Money

Design Blog:
Pixel Perfect

Stylish Scripting

Search Engine Marketing Blog:
Key Words - Search Engine theory

Manage Your Subscription Here.

!You are currently subscribed as to the HTML edition of the Design View.

CHANGE your email address here

UNSUBSCRIBE from the Design View here.

SUBSCRIBE to the Design View here.

SWAP to the 'Text-Only' version of the Design View here.

SitePoint Pty. Ltd.
424 Smith St
Collingwood, VIC 3066

Thanks for reading!

 © SitePoint 1998-2006. All Rights Reserved.

Back to the archives

Newsletter signup

Design, coding, community or marketing? Select the right newsletters right for your needs...