All Freelance Work : Website Construction for Absolute Beginners

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

We finished part 4 with a, pretty much, complete website.
But there's one more thing to take into account when you design a website:

Yes indeed. You MUST remember that not everyone has ADSL / Cable modems. A lot of people out there are stuck with 56k modems and will NOT like your site if its going to take a while to load. I'm sure you've done it yourself: went to a site, its taking a while to load up... what do you do? You go elsewhere. And thats BAD... your losing visitors just because of long loading times...

These programs allow you to apply JPEG or GIF compression to your images. This will reduce the filesize BUT... there's always a but... your image quality will suffer. By that i mean that your image will either: lose some of its colours but stay relatively sharp (if you make it a GIF)
or:
will keep its colours but begin to look blocky (if you make it a JPEG).

Ok, since ImageReady is now part of Photoshop i'll be using ImageReady but the principles of what i'm discussing can still easily be applied to Fireworks.

Load up Photoshop and go to File / New and make the image 500 wide by 70 high and have a white background:

Now click the Photoshop Move button

and position your text anywhere on the banner. Click the Text icon again and enter more text:

Again you choose font and colour and position it beside the Adobe Photoshop text:

Let me list their good and bad points...
(GIF's and JPEG's are basically opposites)

GIF
GOOD POINTS	BAD POINTS
is good for images which have little colour (eg: b&w or plain text)	not so good for images with lots of colours (eg: photographs)
doesn't distort or degrade the image quality as much as JPEG's	the use of dithering sometimes looks awful
they can be animated. JPEG's can not be animated.

JPEG
GOOD POINTS	BAD POINTS
filesizes can go from huge to tiny through JPEG compression	High compression distorts the images.
easily the best choice for photographic images...	They can't be animated, unlike GIF's

So use the above as a guide when you need to decide on which file format to use.

As i said in my intro: most people dont have ADSL so you need to decide on who is going to be your base user. Will it be people with a 28.8k modem? Or the 56k people?

On the left side of the window click the Status Bar option and you'll see what i have above. This is the Dreamweaver Preferences winow. We dont want to change much but see that option labelled Connection Speed? Change the drop down menu to say 28.8. This means that all our pages and images will be timed against the average speed of a 28.8k modem. I know most people use 56k modems but we'll go to extremes... And click OK.

You can see a left and a right banner here.
The LEFT banner is the file UNcompressed.
The RIGHT banner is the file compressed with the settings shown to the right
(in my case:)

These above settings are for the JPEG setting.
(we'll look at GIF images in a moment)
JPEG images can have upto 24bit colour. This means thousands of colours per image.
But compressing them makes them go quite blocky and loose colour brightness.
Settings menu: These are presets for JPEG and GIF.
JPEG menu: this allows you to change the file type from JPEG to GIF and so on
Medium menu: Again, this is a compression preset. Low, Medium, High...
Optimized option: best not to mess with it. Leave it ticked.
Quality menu: This is the option that will increase or decrease the quality and compression of your image.
Blur menu: Sometimes putting a blur on the image means you can keep the compression high and the quality wont look so bad since you've given it a bit of a blur.
Matte menu: this is for image transparency.

Ok, if you change the JPEG menu option to say GIF you'll see something like this:

These above settings are for the GIF setting.
The most important thing to remember about GIF images is that they reduce the colour palette.
The most colours you can have with a GIF is 256.
Settings menu: These are presets for JPEG and GIF.
GIF menu: this allows you to change the file type from JPEG to GIF and so on
Selective menu: Basically this is you telling ImageReady how it should decide on what colours to use.
Diffusion option: With reduced colours dithering is sometimes a good option. This uses dots to try and fool the eye into seeing more colour than is actually there.
Transparency menu & option: The option lets you turn tansparency on or off and the menu lets you choose a transparency type.
Interlaced option: This is good for large images. It will display a very rough blocky graphic while the rest of the image is loading.
Lossy menu: this is the level of compression for the GIF image.
Colours menu: this lets you choose how many colours should be in your image.
Dither menu: allows you to change the amount of dithering (ie: pretend colours)
Matte menu: Lets you choose which colour is to be the transparent colour.
Amount menu: this is for transparency dithering.
Web Snap menu: This will try and make the images chosen colours close to those of the web browsers palette of colours.
Colour table tab: This is the palette of colours for your image.

Ok, time for a play around with the settings to let you see the differences. Oh... one last thing... keep your eye on the bottom of each window panel:

This shows you the filesize.
In the above example (if you look carefully) you'll see the left pane says 103K (the original, and uncompressed, filesize).
And the right pane says 4.207k then below that 2sec @ 28.8k.
(...remember when you set the Connection Speed to 28.8k? This is it showing up now). VERY useful info. To the right of the right pane is the current settings. So the original is 103k and if i was to save now as a 32 colour gif my new filesize would be 4.2k!
Thats a dramatic drop. Simple maths: 4.2k takes 2sec to load on a 28.8k modem. Think how long it'd take to load up the 103k on a 28.8 modem! Eek!

You've got your banner still open in Photoshop yeah? And you've clicked the Save for Web menu option hm?

Right: first off, put your settings at JPEG Medium.
And put the quality at 95% (either left click and type in 95 or left click and drag the slider up to 95)

Lookin' good huh? Not bad... but look at the filesize: 30k and 12sec @ 28.8k.

Giving it an eyeball, the red has dulled just slightly and theres a very slight blur over the banner. But look at the filesize: 10k. 5sec @ 28.8k! For very little decrease in quality we've more than halved the download time! Great! But lets go a bit further: down the quality to 10%.

Hmm... this looks, not terrible, but not very good either, I personally wouldn't use that on a site but many would. On the positive side we have halved the loading time again though. Its now only 4.5k and 2secs @ 28.8k.

Wow! See the difference? And look at the filesize! 4k, 2sec @ 28.8k. Same filesize as the 10% quality JPEG but this is FAR superior!

Why is it superior? Because GIF's love images with very few colours. And our banner only really has three colours. But lets experiment. Could we possibly take the filesize down any lower?

Click on colors and make it 8. Since essentially we only used white, red and blue we dont need many more colours.
(although without going into it the image does use more than three colours, it uses in between colours to smooth out any jagged edges). Well.. theres no time difference really but the filesize is now 2k!

Click Save, give the banner a name and try inserting it on a blank page. Save off the page and view the page in your browser.
Just to let you see that the file does work and will load up fast...

Another thing that can up the loading time on a page is...
...well... the page itself!

Y'see, although everything looks neat and nice on your Dreamweaver page, in the background Dreamweaver is constantly adding and changing the HTML that makes up the final page. Remember when we looked at the HTML in part1? Infact, while your reading this: Right click on the page thats in your browser now and choose View Source.

See all that gibberish? Well thats the same kinda gibberish that Dreamweaver is making for you.

Sometimes Dreamweaver is constantly adding and removing so much HTML code that it ends up leaving unused code in there.

Unused code that takes up precious loading time!
But for its small fault, Dreamweaver also has a solution:

This option will quickly run through your pages HTML code and remove anything that seems useless. Very rarely do i change these options so just click OK and Dreamweaver will tell you what, if anything, its had to remove.

Since we can see our image and its loading time, can we not see the loading time of the entire page?

the 1020 x 680 is the screen resolution your working in and for.
But lets say you were in 1020 x 680 resolution but the site your working on needed to be for 800 x 600 resolution screens.
Change your own screen resolution? Nah, click the little down arrow beside the 680 and you can make the Dreamweaver window resize to 800 x 600 on your 1020 rez screen! More importantly is the 111k / 31 sec box beside it. That is the file size of the page and the loading time of it.

Always keep an eye on this little box.
You want the loading time to be as short as possible.
So if you have plenty of text on your screen: have a read through it and see if there's anything you can omit/change to lessen the loading time.

We're almost done for Part 5 but before i go, i'll just briefly touch upon insertion.

The eight icons you see above are used to insert objects just as though they were images.

: Flash.

: Shockwave.

: Generator.

: Fireworks.

: Applet.

: Active X.

: Plugin.

: Server-Side.

The items above that are in bold are the ones you'll probably use the most. (you'll only use the Fireworks one if you have Macromedia Fireworks installed on your computer. Fireworks is just like ImageReady) You may also use Shockwave depending on the type of site your building.

Generator, Active X, Plugin's and Server-side stuff are things you'll rarely use unless your making real professional websites.

To use these funtions you just place the cursor where you want the object to go, click the necessary button and select the file.
Dreamweaver will do (most) of the hard work for you....

*sigh* we've reach the end of Part 5 and the end is nigh! In Part 6:

The big finale!
Actually getting your site on the internet!
Its great to make a site, but its not much good sitting on your hard drive! Its got to go on a server somewhere so that people can see it!

So in Part 6 we'll talk about:
getting some free web space and:
using Dreamweaver to upload your site to your free space
But hold on... how will people know where my site is??!!
Because we'll also discuss how you get your site included in the Search Engines...

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