freelance jobs

Hi there, and welcome to part one of a six part guide that will teach all you beginners how to construct a website using Macromedia Dreamweaver.

Dreamweaver is a program used to construct websites, no HTML code is typed by you, the user. (HTML is the gibberish you get if you goto a web page and use the 'view source' option in your web browser). It's made by a company called Macromedia. With Dreamweaver what you see is what you get. Sometimes referred to as WYSIWYG (pronounced Whizz-I-Wig). By that i mean what you see on screen is what your page will look like in your web browser. Typing HTML code uses a lot of time and guesswork. Dreamweaver reduces that guesswork to almost zero and means you can have fun making your website.

The tools you'll need are:

Macromedia Dreamweaver.
Adobe Photoshop.
Adobe ImageReady.

Dreamweaver will be used to make the web pages and the finished site.
Photoshop is an image manipulation program, this will be used by us to design some nice graphics for the pages.
ImageReady is used to compress your images. This means that your images will load faster.

This guide is in six parts:

Part 1 : Easing you into it with just a few pages linked together, some text, tables and a few images.

Part 2 : We dive into 'frames', discuss 'targets', background images, thumbnails and a basic introduction to Adobe Photoshop.

Part 3 : Here we'll use three frames, cover 'roll overs', clickable images and how to make roll over images in Photoshop.

Part 4 : Keeping our three frames i'll introduce 'Layers'. How to change the text in Layers and how to show or hide Layers. Also we'll use some basic Dreamweaver behaviours like displaying text on the browser status bar.

Part 5 : We'll discuss image optimisation with ImageReady. Also we'll look at download times and inserting Flash movies.

Part 6 : How to get your finished web site onto the internet for all to see.

Yes... i know your scared and looking at the page with a blank look.
After just this first part you'll see just how easy it is and feel much more relaxed. After part two you'll understand the basics of website design and you'll actually be able to make a full web site!

Ok, so... you want a web site but on what? Well thats entirely up to you but for this 6 part guide i'm going to base it on a family album. Some of you will find that the web is excellent for showing your family album to your relatives on the other side of the world. Luckily for you i'll spare you my own family photos and use photos taken from random sources on the web.

No... seriously... you don't want to see me with curly hair and drooling.
(Although the only thing thats changed is that I don't have curly hair, I still have the drooling problem though).

Right, load up Dreamweaver and you'll be presented with a lovely big blank screen:

If you don't have a Properties Toolbar or an Objects Toolbar:
goto the Window menu,
click Objects and click Properties.
This should make the toolbars appear

Lets quickly run through some buttons you should know.
First the Properties Toolbar:

1. This is the Format menu, you can set Format Properties for some text. We wont use this much at all.

2. Font menu. To change the look of the text you simply select some text, click the

icon and choose which font you want. Simple as that!

3. This is where you put your link information. You select some text and using the icon you tell it which file the chosen text should link to. Easy.

4. Size. Again you click the

icon and choose which size you want your selected text to be.

5. Colour. Click the

icon and this lets you assign a colour to your selected text.

6. These buttons let you format your text. You'll use these quite a bit no doubt:

- Bold. This will turn your text from 'this' into 'this'.

- Italic. Will turn your text from 'this' to 'this'.

- Left align. Will align your text to the left of the screen.

This line is aligned to the left.

- Middle align. Will align your text to the middle of the screen.

This text is aligned to the middle of the screen.

- Right align. Will align your text to the right side of the screen.

This text is aligned to the right side of the screen.

7. Shows nothing for now but when you click some buttons this gives you extra options.

NOTE: Feel free to mix and match these options. Have your text Bold and Italic if you like. Like this.

The only other things you need to know (for now)
are on the Objects Toolbar:

- This button lets you insert an image at a chosen point on your page. An image can be in many different formats but the most popular two formats are .jpg and .gif files.

- This button lets you insert a table at a chosen point on your page. An example table is shown below:

Tables have rows, columns and a width.
This table is three rows deep by four columns wide and takes up a width of 50% (thats 50% of the page). Tables are extremely useful for formatting text. You'll use tables a LOT!.

Goto the menu and click Site
Now choose New Site.

In this window we need to fill in a Site Name (so fill in something like Family Album) and give it a Local Root Folder.
In other words: where will the very first page of your site be?
Click the

button and navigate to a folder on your hard drive where you'd like to save your pages too.
If need be, make a new folder.

Now Dreamweaver will ask you if you want to create a cache.

tick the 'Don't ask again' box and click Create.
This means that Dreamweaver will keep a track of all your pages and links.

Nothing for you to worry about... honestly...

Now Dreamweaver presents you with a Site Files window. A list of the files that will make up your site. Close the Site Files window. We don't need this for now.

Ok, lets get a page made up.
Grab yourself some images from the internet or use some that are on your hard drive. We just want some images to do a mock-up page for now...
NOTE: make sure your chosen images are in the site directory as chosen above.

Load up Dreamweaver and goto the File menu (very top left) and from the menu choose New. This will give you a brand new, blank page.

Your little flashing cursor is where you are on the page right now.
At the moment top left. Lets type some text.
Type this (don't worry about the colour, its just to make it stand out):

Dear Mum, Here are some pictures of our neighbours. Nice people.

Hmm... Doesn't quite look right. The 'Here are...' sentence needs to be on the next line down. Ok, use the arrow keys to move the cursor to BEFORE the 'H' of 'Here'. Now press the Enter key. Mmmm... it looks ok for now but if we do that again with 'Nice people.' it'll look weird. We just need it to go down one line this time. Move the cursor to BEFORE the 'N' of 'Nice' but this time hold down SHIFT and tap Enter...

Ahhh! MUCH better!

Ok. Now... how about a picture of those nice neighbours hm?

Put your cursor at the end of the 'Nice people.' line and press Enter.
Now click the

button on the Objects toolbar.
This will insert an image where your cursor is sitting at the moment...

Just tell this nice window where the picture of the neighbours are, click Select and it'll go away.

So... goto the menu and choose File and then New.
On this new page insert an image.
(Remember... its the

icon).

Now... lets Save that new page:
NOTE: make sure you save your page in the site directory.
Otherwise your page wont load properly.

Goto the File menu,
choose Save As..
and in the File Request window give your page a name.
Type in page2 and click Save.

Lets return to the first page and link to that second page.
We're getting adventurous now!

Excited?
You should be!

Ok, with the cursor to the right of the image press Enter. Now type in: Click here to see our other neighbours. and press Enter.

Now were going to select that text and link it:
Put your mouse pointer to the LEFT of the 'Click here...' text.
HOLD DOWN the LEFT mouse button and drag to the RIGHT so that the text becomes hilighted in black. Once you have all the 'Click here...' text selected let go of the mouse button (otherwise your finger will get cramp and you'll sue me)

Now... remember the Properties Toolbar?
Ok, click that folder icon

and in the file request window select your page2.htm file.
(Thats your page with the other neighbours on it. Remember?).

Agh! The text has gone blue and underlined! Have I broken it ?!!
Nope... you've just made your first link!
Congratulations!

Lets save page1 and test it:
Got the File menu and choose Save As... and name it page1.
And click Save.

Fantastic!
Load up your browser and choose File, then Open and load up page1.htm

Voila! Its very basic but it is essentially a web site!
Go on... test your 'Click here...' text.
When you click your 'Click here...' text your browser should show you page2.htm

If your browser shows you a box with an X in it then your page cant find your images.
Did you save the pages into the same directory that you put the images in???

Before we close up part 1 lets add a table and center things to make it look nice.

Make your table four rows, one column and 70 percent wide with zero border
(dont bother with the cell padding or spacing for now. The zero border means that the table won't be seen in the final page. If you want to see the table in your browser put in a value of 1).

Now that you have a table and that its selected (as shown by the big black border round it) you'll notice that your Properties Toolbar has different options. Dont worry. From the Align menu at the top right of the Properties Toolbox choose center. One table, centered on the screen.
Easy peasy.

Now... click on the picture, hold down the left button and drag the image to the third row down.

Select the 'Dear Mum' text and drag it to the first row.
Select the 'Here are...' text and drag it to the second row down.
And finally select the 'Click here...' text and drag it to the last row.

Hmm... now we need to center all that text.
Means selecting them one by one again though huh?
Nope. Left click (anywhere in the top row), hold the mouse button down and drag down to the last row. Now click the

button and...Voila! It aligns everything thats within those selected rows! Excellent! Oh, and while your at it, and the rows are selected, why not chose a nice font?

Click the

beside the 'Default Font' and choose a nice font.
Maybe even give it a Bold look? Its entirely up to you...
What about clicking the

icon and giving it a new colour?

You've learned quite a bit there. Have a mess around with what you've learned so far and in the next part we'll use frames (essentially two or more pages on one screen), thumbnails (a small fast loading preview image that links to the longer loading larger image) and some nice buttons. Oh, and i'll show you how to create the buttons in Photoshop too!

Just as a quick exercise:
Load up your page1 in Dreamweaver again.
Goto the menu and click Window,
Choose HTML Source.

You see all that gibberish in the HTML window?
Thats the HTML equivalent of what you see on your Dreamweaver screen.
If you were to write your pages in pure HTML code thats what you'd have to type in. BY HAND to get your page1!

Thank goodness for Dreamweaver!

Hi there, i'm Ronnie Tucker and I live and work in Glasgow, Scotland (UK).
I am entirely self taught in art and i've been using 3dsMax for over 7 years now. (Infact I was using when it was called 3ds4! Years before it was called 'Max'!) I've had images published in the UK art magazine Computer Arts (issue 9), and helped produce a computer animated short for a large car firm in the United States. I use a large variety of software: 3dsMax, Photoshop, Premier, Poser4 and various plugins, but I still use pencil and paper whenever i can.

My friend and I are also looking to animate our characters Worm & Lump for TV. If you can help us out in any way, please email me.

I work freelance and am always available for work.
Feel free to email me regarding work or articles...


	SignUp / Login		Find a Job! Take a Course Health Insurance Articles ManageJobs About Us Contact Us