You're going to do another web page in order to become comfortable using tables, anchors, and thumbnails. I thought it would be fun if you used jokes and cartoons to make your page. Click here to see an example.
1. Find at least five jokes and at least one funny drawing or cartoon.
Copy and paste the jokes into a word processing document along with the URL (web address). Save a large version of your cartoon AND a small version of your cartoon to the desktop (name them something like largecartoon.jpg and smallcartoon.jpg so you don't get confused). Paste the URL for the cartoon into your word processing document, too.
You can either save the large version of your cartoon and then shrink it with Photoshop and save it under a different name (Image-->Resize-->Image Size, and make it about 150 pixels wide), or, if you're lazy, skip the Photoshop and save both the big version AND the thumbnail from Yahoo Images.
Remember: this is a FAMILY SHOW. Rated PG jokes and cartoons only, okay? If our principal or your grandmother wouldn't approve, you can't use them.
I would search for "jokes" on Google and start reading. A lot of joke sites are blocked, but there are still many that aren't. Be patient.
2. Create a new blank web page in Dreamweaver.
Click here if you've forgotten how to do that, then come back here.
If you haven't already, put your old web page files in a folder so that your desktop is ready for this new page.
Save this new page as "index.html" on your desktop before you continue.
3. Type a title.
Hold down the shift key and press return a couple of times to leave some space at the top of the screen, then write your title centered at the top in very large text. I called my page "Mr. Foster's Jokes."
4. Make a table with two columns.
Hold down the shift key and press return a couple of times.
From the menu at the top of the screen, click on Insert-->Table.
Make it look like the image below.
In case you're interested, setting the border thickness to zero makes the table invisible when viewed in a browser.
5. Click in the left cell of the table.
6. On the toolbar at the bottom of your screen, change the vertical alignment to "top."
Don't have a toolbar at the bottom of your screen? If not, click Window-->Workspace Layout-->Default.
7. Type the names of your jokes in the left column.
8. Drag the center of the cell to the left to make room on the right side.
Typing the titles to the jokes made the left cell really big, and my right cell really narrow. I clicked in the space between the cells, held the mouse button down, and dragged the center to the left so that I had more room on the right to type my jokes (in the image below, I clicked where the red dot was, and dragged in the direction of the arrow).
9. Click in the right cell of your table.
10. Change the vertical text alignment to "top" just as you did in Step 6 above.
11. Type a welcome message in big letters like, "To see the jokes, click on the list to the left or scroll down."
12. Type your jokes.
Hold down the shift key and press return a few times to put some space between the jokes.
After you type the joke, write where the joke came from (the URL).
After you write where the joke came from, write something like "Click here to return to the top."
13. Add cartoons.
Type something like "click on the image to enlarge."
Insert the SMALL VERSION of your image ( Insert-->Image, then choose the small one). You do have two versions of all of your cartoons on your desktop--a small version and a large version--don't you? You won't get credit unless you have two versions and you use the small one on the page...
After you insert the small version of your cartoon, type where you got it from and "click here to return to the top" just like you did for the jokes.
14. Compare my sample page to yours to make sure you're not missing anything.
While you're at it, you can spend a few minutes making it look pretty (aligning the text, etc.)
15. Make your cartoons enlarge when you click on them.
Click on your small picture.
Click on the folder to the right of the "link" field at the bottom of your screen:
Find the big version of your cartoon and click Open. That's it--it's linked.
The next thing we're going to do is to put anchors on various parts of the page so that we can jump there by clicking on a link.
16. Put an anchor at the top of your screen and name it top.
Click at the very top of your web page.
Click Insert-->Named Anchor.
Type top in the window that appears, and click OK:
An anchor symbol will appear where your cursor was:
Anchors are only visible when you're editing the page--you won't see them when you're looking at the page in a browser. If you click on that anchor, the bar at the bottom of your window will change to show you that it's named top.
17. Put anchors above every joke (just like you did above).
Click on the line above your first joke.
Click Insert-->Named Anchor.
Name it joke1 or something else descriptive (all lower case, no spaces) and click OK.
Repeat this for all of your other jokes or cartoons (name the anchors joke2, joke3, etc.)
Now that we have all of our anchors set up properly, we can make links to jump to those anchors.
18. Make a link from the title of your first joke (on the upper-left) to the anchor above your first joke.
Highlight your first joke title on the upper-left part of your screen.
In the link box at the bottom of the screen, type the number sign followed by the name of the anchor above the first joke with no spaces in between (in my example, you will type #joke1) and press return.
19. Make links to all of the other jokes in the same way (except type #joke2 for the second one, etc.)
20. Make links that go from the end of each joke to the anchor at the top:
Highlight the text below each joke that says "Click here to return to the top." (if you didn't type something like that after each joke, type it now).
In the link box at the bottom of the screen, type #top and press return.
Repeat for all of the other "Click here to return to the top" lines after every joke. If you're lazy, you can also highlight the one you just did, click Edit-->Copy, then click Edit-->Paste after every joke.
21. Save your page and try it out.
Save your page on your desktop.
Click File-->Preview in Browser to try it out.
