Dreamweaver-Day 02: Hotspots & Page Linking

So far we have setup our Dreamweaver sites, and learned about the different Property Menus available for different objects.

Now we’re going to continue building our practice sites further

If you haven’t already, open Dreamweaver, and find your yourname_practicesite.htmldocument that we made last time.DON’T OPEN IT YET

You can easily open your files from the file panel inside of Dreamweaver

You should have a yourname_practicesite.html document that we started last timeDON’T OPEN IT YET

Your practicesite.html should be located in you practicesite folder, which should be located in you My Websites folder

When organizing your site, it is a good idea to name your homepage “index”

Most webhosting sites & programs will be expecting you to have your homepage titled “index”

But wait! Our home page is called “practicesite”. We’ll have to change that…

1. Find your practicesite.html in the File Panel

2. MAKE SURE HAVE THE .html file NOT the folder

3. Right-click on it4. Then go to EDIT5. Then select RENAME6. Then rename your file

index.html7. Don’t forget the .html or

else your file will not register as an HTML file

Now once you have successfully renamed it to index.html double click on it to open it in Dreamweaver.

You should have something that looks very similar to this. The only thing that should be different is the background color

Now let’s minimize Dreamweaver for a second, but don’t close it

Go to my website…you will need to make sure you have the text pad.png image saved into your images folder

Now you should have the text pad.png file in your images folder in the file panel. If not click the refresh button. If that doesn’t work, something isn’t right.

Now click and drag your text pad.png file into your bottom right cell

Whoa! Looks like our layout get a lil’ rearranged.

No worries, we can easily re-aligned everything.

To move the navbar image to the top of the cell, you need to set the cell’sVertical Alignment

First, select the cell (the easiest way might be to click the Navbar image and then click the <td> tag. This will select the cell the Navbar is in)

Once you selected the cell, set the vertical alignment to Top. Now your Navbar image should be aligned to the top of the cell.

Go ahead and preview your site. If it asks you to save, click yes.

It should look a lot like this

Hmmm…This looks like a great template for all our pages in this site. I wish there was an easy way to use this for all our pages without having to build it every single time…

1. Find your index.html in the File Panel

2. Right-click on it3. Then go to EDIT4. Then select DUPLICATE5. This should create a new

HTML file calledCopy of index.html

1. Rename this file products.html

Now you have 2 pages in your website… index & products

Now go ahead and make a sale, downloads, events, and a contact page

WARNING: When working on your pages be careful not to get them mixed up because now they all look the same.

You should have these files in you practice site folder

Now would be a good time to save. Choose Save All to save all your pages you just created.

Now lets make your Navbar work!

Make sure you are still working in your index page, and lets get to work

Click on your Navbar image and in the properties menu select Rectangular Hotspot Tool

Then click and drag a box over the word home on your Navbar image

This window will pop up telling you to include Alternate Text with your Hotspot

Click Ok

These are the properties for your hotspot

First, let type in some Alternate text in the Alt field.

This Hotspot is over the word Home, so let’s type that into the Alt field

Now let’s link this hotspot to our home page (index.html)

You can type index.html into the link box, or you can point to the file you want to link to using the whip

Click the whip icon and drag it to the file you want to link to.

You can also click the manila folder icon and choose the file from there

Now create hotspots for each page on your Navbar, and link them to their page files

Be careful not to overlap your hotspots, this may confuse your website.

When you’re done, your Navbar should look very similar to this…

Now go work on the Navbars on your other pages, and create hotspots for them. Be sure to Save All your work once you’re finished.