Make a Homepage in Dreamweaver

In a previous Blog post, we made a design for a website Homepage using Adobe CS3 Fireworks. This design is shown in the picture above.

We have also created a Background Image for our Homepage in Fireworks that looks like this:



If you do not have Adobe Fireworks, you could easily make this same type of background image in Adobe Photoshop, or any of several other image processing programs.

The next step is to make our design into a functional webpage using Adobe CS3 Dreamweaver.

We want to be able to mouse over each of the images.

Each image will have an alternate Rollover Image (that is pink in color).

When we click a rolled over active image, it will take us to one of these sub pages: Home, Contact Us, Our Pictures, Games, Music, Our Blog, About Us.

To create rollover images, we first need to have made a set of images to serve as links. These images could be pictures, clipart, or button images. We can make these ourselves, or use Google Images** to find images on the net we can use.

(**If we were making a commerical site, we would probably not be able to use images from Google found randomly on the net, because it would violate copyright laws. However, since we are using some internet images only for our own educational purposes in this exercise, we are probably unlikely to get besieged by copyright lawyers in most countries.)

For each of the images we find, we need to resize them down to be around 90pixels by 90pixels in size to fit neatly within our homepage. We also need to create a separate rollover version of each image that is somehow different
to the original image; eg. different color, or text added to it, or blurred, or a different picture, etc.

For our homepage we created the following set of images:



We need to start off in Dreamweaver by setting up for the display of our 1024x768 Background image called "PWHomepage1.jpg".

This can be done by setting up the following code in the Homepage HTML:



We can get some starting HTML to put the above code into by doing
"Create New > HTML" from the front start panel in Dreamweaver.

But if we have Adobe Fireworks, then we can use the Export HTML and Images function to have Fireworks create this initial starting HTML for us.

Once we have the background image setup, we then have to add all of the Rollover link images onto our page.

Placing the Image onto our Homepage, and then converting it to a Rollover link image is a fairly simple three step process in Dreamweaver.

• First we insert a “Div” container onto the page that is the exact same size as the rollover Image.

• We then move this Div box to the required position using the mouse.

• We then insert the Image into its Div box, and set it up to be a Rollover link.

Because we have not built our other web pages yet, we will make all of our Rollover images link to an “Under Construction” page that we built using Fireworks.

Here is our finished Home Page :

http://www.passyworld.com/

The following PDF document provides step by step instructions on how to build a Homepage using Dreamweaver CS3.

If you would like to have your own full size copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.

Alternatively, you can view or save the full size PDF by clicking the link below:

Click here to open or save the “How to do a Homepage” PDF

Throughout this month we will be building the sub pages for our revamped
"Passy World" website.

We will feature some blog posts about how to do this.


DON'T FORGET TO DO OUR ONE CLICK SURVEY AT THE TOP RIGHT HAND CORNER OF THIS WEB PAGE. JUST CLICK ONE OPTION IN, AND THEN CLICK THE "VOTE" BUTTON.

Enjoy,
Big Passy Wasabi