|The Useful, the Usable and the Unbelieveable in Design for the Web|
In This Issue...
Build Your Own Standards Compliant Website Using Dreamweaver 8From 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"
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.
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.
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.
Read the blog entry:
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.
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.
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
d) Adjust your
levels: Next, apply the 'Levels' filter (
e) Lose the color: We have no need for the color
component of our texture, so apply the Hue/Saturation filter
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.
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!
Download free chapters from every SitePoint Book!
Build Your Own Standards Compliant Website With
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.
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.
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.
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!
Selling Web Design Services Blog:
DHTML & CSS Blog:
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.
Thanks for reading!
© SitePoint 1998-2006. All Rights Reserved.
Design, coding, community or marketing? Select the right newsletters right for your needs...