An Introduction to Dreamweaver

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 an idea of how it works. I'll do a quick intro to the basic Dreamweaver interface, then we'll go through 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. Download it to the desktop.

Once you've decompressed the files, you should be left with a file called DW Tutorial1. There may already be a copy of that file on the desktop from the time Group B did this tutorial. If so, the file you download may be given a different number. It 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.