Online Journalism 2: Features and Personal Web Sites

Colour Lovers and Modern Life

As you start developing your ideas for your web sites, you'll need to think a little bit about colour. One good source of advice is Colour Lovers - which looks at the different palettes of colours used by different web sites and magazines. It's good for identifying different colours that work together and combinations that are currently 'trendy'.

I found Colour Lovers via the excellent Modern Life, which is also a great source of design advice. Stuart Brown, the guy behind the site, is very clued up but also amusingly sarcastic about current web design trends. He has a great guide to currently popular Web 2.0 typefaces and a useful 'web typography cheat sheet'. He also written some good basic advice on developing effective web designs and some excellent posts about popular Web 2.0 colours and the way he uses colour on his site. His guide to writing good headlines online is very witty but also very useful. Have a look round the site and see what else you can find.

A Dreamweaver introduction

Today's session will be, for the most part, an introduction to Dreamweaver. I think the best way to get started is to try the program out and get a quick idea of how it works. I'll do a quick intro to the basic Dreamweaver interface, then we'll use a tutorial from one 'Dreamweaver 8 - The Missing Manual' by David Sawyer Macfarland, published by O'Reilly. There are lots of basic Dreamweaver manuals - this is one of the better ones. I've got a copy for the Mac room. There are also copies in the library.

We're going to use the intro tutorial from this because you can download some basic assets which you can then use to create a simple page.

To get started, you need to download the files from David Sawyer Macfarland's site. Click here to download them. You'll then need to double click on the file to decompress it - though if you're using Safari, apparently it will do that automatically.

Once you've decompressed the files, you should be left with a file called DW Tutorial1. That contains all the things you need to build the page. For the moment, leave the file on the Desktop.

We'll go through the tutorial step by step in class. It's fairly basic stuff, but it lets you see how to put text and images on the page. You can see how to add styles to text and also how to add links. The aim of the tutorial is to create something like his finished version.

Some things to focus on in this tutorial:

• Site Definition is absolutely crucial. It may seem trivial. But you need to make clear for Dreamweaver where the key assets for the site you're building are - you need to define the site's root folder. You also need to be organised and keep everything relating to the site in that folder. If you don't, Dreamweaver will not be able to find everything it needs to display your page properly and it will appear on screen with gaps and broken image symbols.
• Previewing in the browser. You can only do this once you've saved your pages. You need to get into the habit of previewing your pages in different browsers. One of the biggest problems when designing web pages is making sure they look the same in different browsers. Layers - a tool you use to create layouts - can cause problems here. We'll look at that in later lessons. But get used to previewing in various browsers.

The page you create in this tutorial is very simple - there's no page grid, no navigation aids, no real structure. To add those things we need to start working with more complex tools, like tables and layers and rollover effects. If there's time today, we'll have a quick go at creating a very quick site with layers and Dreamweaver's navigation bar tool.