Among the really great features included in ImageReady was a Rollovers panel, which really speeded up the process of creating rollover buttons for web pages and was quite missed. However you can get quite a long way using Layer Comps and Styles along with the Slice Tool… Check out da Vid!

Never Believe Dreamweaver’s Design View

For newcomers and old hands alike Dreamweaver’s Design View feature often confuses and confounds by failing to render an accurate preview of a web page.

How Firefox renders a particular navigation bar.

How Dreamweaver's Design View renders the same code. What navigation bar?

There’s actually quite a good reason for this and that is that Design View can’t be a web browser is because it has to be an editor.

You can’t follow links, run javascript etc in it as you could in a web browser but you CAN edit text, insert pictures and edit Ajax widgets. Editing is what Design View can be very helpful with.

What Design View is plain unable to do is give you an accurate preview of how your page will look when viewed in a browser. That’s why the Preview in Browser… command is there and don’t you forget it.

The trouble is that anytime someone uses the Design View to make an edit they run the risk of falling for an insidious trap…

Because Design View looks quite a bit like the way your web page might in your favourite browser there’s a tendency to, however much you consciously may know better, to start thinking of Design View as What Your Page Looks Like. This is WRONG. Wrong but everybody who uses Design view forgets it at sometime or other and begins to believe… and in believing begins to forget these Dreamweaver Truths:

If your page is working in Dreamweaver’s Design View but not in a your target browser this is because there is Something Wrong in Your Code. You almost certainly won’t be able to fix it via the Design View. Go to Source. Do not pass Go.
If your page is not working in Dreamweaver’s Design View but is working in your target browser this is not a problem. It’s easy to waste time trying to fix rendering bugs that are only displaying in Dreamweaver. Forget it. It doesn’t matter. Who’s going to view your pages using Dreamweaver. You. That’s all. If your pages are working in your target browsers be happy.

What to believe about Dreamweaver’s Live View feature

From Adobe Dreamweaver CS4, Adobe have added a Live View feature that embeds Webkit into Dreamweaver for more accurate previewing of your pages. Should you trust Live View as a preview?

Well folks you can only trust it as a preview of browsers that use Webkit, which is Safari and Chrome and a few others… Meanwhile keep on testing in various flavours of IE and Mozilla…

Here’s a vid where I explain how to use it.

Adobe Dreamweaver – Easy Mistakes To Make… Part 1… is a Graphics Training Source mini-series that draws on Andrew’s Vast Reservoir o’ Training Experience to help you – yes you, avoid the Most Calamitous Dreamweaver Mistakes…

It’s only natural – you want to get going on your super interweb startup site so you fire up Dreamweaver and create a new document ready to get  creative. Shame it feels so normal because it’s totally the Wrong thing to do and a fast route to nowhere. Why is that you ask, oh but let me tell you…

Web sites are collections of documents where every page and resource is a separate file sitting on a web server somewhere. Single pages rarely exist in isolation – they contain links to other pages, images are collected and displayed, video files are found and at the more technical end of it javascripts and Cascading Style Sheets all work together to determine a page ends up looking and working.

To get your pages to do just about anything those pages have to be able to communicate with other files. In an ideal world Dreamweaver manages those lines of communication and helps to create an infrastructure of directories and files that work together to create an functioning web site.

But it doesn’t just do that automatically, you have to tell Dreamweaver where the Root Folder for your site is BEFORE you start work (the Root folder is the folder where you keep the files that make up your site btw).

If you start off a Dreamweaver project by doing what comes naturally in other programs, i.e swing by the File Menu, choose New and get creating you’ll probably end up making a page that can’t be usefully uploaded to a server. You’ll also not be able to make use of some of Dreamweaver’s most useful features like the link management and it’s template system.

So when you start to work in Dreamweaver the first thing you should be doing is Defining a New Site. It’s very straight forward.

Create a folder where you want to store your web site (or locate the folder that already contains the site you’re working on).

In Dreamweaver go to the Site Menu and choose New Site.

New Site will bring up a dialogue with two options at the top – Advanced and Basic – choose Advanced and then, from the Categories list to the left of the dialogue box make sure the Local option is chosen. In the Local area of the dialogue box is a text field that says Site Name – fill that in with the name of your site. Under the Site Name is another text field that says Local Root Folder next to it. At the very end of it is a small folder icon. Click on the folder icon and show Dreamweaver the folder where your site is/will be located. Then click the ok button.

You need to do this before you start work on the site – otherwise, at the best, you won’t get the most out of Dreamweaver and at the worst you may not be able to upload your site without a lot additional fixing work…

Here’s a vid (double clicking it will take you to the full size version…)

A Selfless Superstar called Benjamin has posted this brain frazzling list of IE6 related bugs ‘n’ fixes. Check it out at Virtuosi Media. You’ll read it and weep.

10 million years ago when the DTPosaurs worked on huge, slow computers with tiny, tiny little screens, there wasn’t a lot of anything to go round, not enough RAM, not disk space, not enough colours.

That’s why when the web came along it was important for designers to recognise that not everyone’s monitor could display the same colours. At that time the fanciest graphics cards where maybe putting out 16bit colours (that’s 65536 different colours) but your average punter would of probably owned a 8bit card (that’s only 256 colours folks!)

To make things more confusing both the Mac’s system palette and Window’s system palette were different from each other…(A system palette is the collection of colours that an operating system uses to create it’s icons, menus, windows, etc). Both systems used an 8bit Palette but the colours they used weren’t exactly the same as each other – in fact the Windows and Mac system palettes only shared 216 colours with each other. This meant that sometimes colours in images changed as they moved between one platform and the other.

To avoid this web designers started to refer to the ‘Web Safe’ colours, which is the subset of 216 colours that worked predictably on both the Mac and Windows OS. Over time this became a recognised concept and software houses started to build support into applications that would help designers choose only from the Web Safe set.

More time passed and the 3D games revolution forced the technology in graphics cards further and further forward until there came a time when you’d be very hard pressed to even buy a new 16bit graphics card let alone a 8bit one. The major OS’s use whatever colours they want from massive 24bit+ palette. The world changed.

Yet still the idea of Web Safe colours persists in software packages that should know better.

So, web designers, when you’re in Photoshop and you’re using the Colour Picker – ignore the checkbox that says ‘Only Web Colours’ – all is does is cut down your choices.

Also,when picking colours in Dreamweaver using the Dreamweaver Colour Picker – remember that you’re not limited to the colours on the main area of the colour picker. If you want to select colours not included in the ‘web safe’ category  look for the small circle icon just towards the top right of the colour picker.

Last. It turns out that the ‘web safe’ colours were never safe in the first place. Check it out.

Feel free to post comments…