Dreamweaver

Dreamweaver Preloading
If you are creating a complicated Website with a lot of images on it, you could end up creating a site that is very slow, and this can put people off using it, as they get fed up with waiting for stuff. One way around this is to ensure that the images preload and this Masterclass tutorial will show you how to do this in Dreamweaver.

Part 1: Adding a layer
Open Dreamweaver up and go to the Index page of your site, this is the map of your site. For our site we decided to add a roll-over button, which had two graphics as you rolled over it. To add a new graphic we decided to add another layer, which is the best way to do that.

Go to the 'Insert' menu and select 'Layer' Using the grab handles use to size the layer From the 'Insert' menu select 'Roll Over Image'

A dialogue appears, this box is where you add the two graphics and what they connect to.

Click in 'Original Image' Click on the 'Browse' button Select the file where the image is stored Click on the image and then press the 'Select' button Now click in the 'Roll Over Image' Click on the 'Browse' button Select the file where the image is stored Click on the image and then press the 'Select' button Now click in the URL panel Go to your Internet browser and select the page you are linking to Copy the URL Return to Dreamweaver and paste in the URL

Part 2: Timeline
When you are adding images to Website, do reduce them in the graphics package first, otherwise they will take up too much memory space. Once you have saved the image use the 'F12 button to check the roll-over in your browser.

To make images pre-load you need to use a timeline, which is a similar idiom to the timelines in Flash. To add this we created a new page for our Website.

Go to the Index page in Dreamweaver Right mouse click on the Index page and select 'Link to new file' Name the new file in the dialogue box that appears and don't forget to add '.htm' Go into your new page and go to the 'Insert' menu Select 'Insert New Layer' Click inside the layer and go to the 'Insert' menu and select 'Image' Select the image Click 'Yes' when it asks whether you want to copy to the route folder Go to the 'Window' menu and select 'Timeline'

The timeline will appear in a separate dialogue box, the 'B' on the left hand side is the behaviour of the image. Using this timeline we will set one image to be downloading whilst we are looking at another.

Part 3: Behaviour
To make an image preload it has to have behaviour, this is what tells it what do and when.

Click on the image Go to the 'Window' menu and select 'Properties' When the dialogue appears name the image Return to the 'Timeline' dialogue box and click in the behaviour line Go to the 'Window' menu and select 'Behaviour' When the dialogue box appears click on the '+' From the menu select 'Preload Images' Click on the 'Browse' button in the dialogue box Select the image and click 'Yes' to copying it to the Route Folder Go back to the timeline and click in the behaviour line, but further along, say at 20 seconds Click on the '+' in the 'Behaviour box again Select 'Swap Image' from the list Click on 'Autoplay' Press F12 to preview the Website in action.