dreamweaver-day 02: hotspots & page linking
TRANSCRIPT
![Page 1: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/1.jpg)
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
![Page 2: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/2.jpg)
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
![Page 3: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/3.jpg)
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…
![Page 4: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/4.jpg)
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
![Page 5: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/5.jpg)
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
![Page 6: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/6.jpg)
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
![Page 7: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/7.jpg)
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.
![Page 8: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/8.jpg)
Now click and drag your text pad.png file into your bottom right cell
![Page 9: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/9.jpg)
Whoa! Looks like our layout get a lil’ rearranged.
No worries, we can easily re-aligned everything.
![Page 10: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/10.jpg)
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.
![Page 11: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/11.jpg)
Go ahead and preview your site. If it asks you to save, click yes.
It should look a lot like this
![Page 12: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/12.jpg)
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…
![Page 13: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/13.jpg)
![Page 14: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/14.jpg)
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
![Page 15: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/15.jpg)
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.
![Page 16: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/16.jpg)
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.
![Page 17: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/17.jpg)
Now lets make your Navbar work!
Make sure you are still working in your index page, and lets get to work
![Page 18: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/18.jpg)
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
![Page 19: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/19.jpg)
This window will pop up telling you to include Alternate Text with your Hotspot
Click Ok
These are the properties for your hotspot
![Page 20: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/20.jpg)
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
![Page 21: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/21.jpg)
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
![Page 22: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/22.jpg)
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.
![Page 23: Dreamweaver-Day 02: Hotspots & Page Linking](https://reader036.vdocuments.site/reader036/viewer/2022081404/559728561a28ab52528b456f/html5/thumbnails/23.jpg)
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.