web interactivity

Biography Assignment 1A:
the HTML Skeleton and the Content

1. On the Desktop of your Mac, create a folder called "bio." Inside it create two folders, one called "images" and one called "pages". This is where all your html pages (with one exception) and images will be stored.

2. Create a new page in Dreamweaver. In Design view, type the word "INDEX." Save this file in your bio folder with the name "index.html." DO NOT PUT IT IN THE PAGES FOLDER! This is the one exception mentioned above. All remaining html pages will go in the pages folder. The bio folder will end up looking like this example.

3. Create a new page in Dreamweaver. In Design view, type the word "BIOGRAPHY." Save this file in your pages folder with the name "biography.html."

4. Create a new page in Dreamweaver. In Design view, type the word "LOCATION." Save this file in your pages folder with the name "location.html."

5. Create a new page in Dreamweaver. In Design view, type the word "RESUME." Save this file in your pages folder with the name "resume.html."

6. Open the index page you created in step 2. Use the return key to start a new paragraph. Type in these words: "Biography | Location | Resume" just as they appear here.

7. Double-click on the word "Biography" to highlight it. In the Properties window, just to the right of the "Link" text-entry box, click on the folder icon in the upper right corner. In the dialog box that appears, navigate to the bio folder and select "index.html" then click on "Choose".

8. Repeat the process with the words "Location" and "Resume". Make each word a link to the matching "location.html" and "resume.html" page.

9. Open the "biography.html" page and use the return key to start a new paragraph. This time type in these words: "Index | Biography | Location | Resume" just as they appear here. Create links just like you did in step 7, only this time add a link to the index page.

10. Select this entire row of links and copy it. Open the "location.html" and "resume.html" pages and paste the links into each page. Now your site navigation is complete.

11. At this point all go back each page and put in more content. Don't worry about how things look; we'll work on that next week.

 

Tips

• On the biography page, write something about your life: your past, your hopes and dreams, your family, your interests, whatever you feel comfortable sharing. Make sure to add at least one picture of yourself.

• On the location page, write about the part of town where you live, where you were born, or where you used to live. Try to find some pages on the web about your town, and put in links to those pages. Include pictures that will add to your description.

Finally, put in a link to the location you are describing from Google maps. Find the location you want to show on the map, then click the link button near the top right corner to get more information about how to link to your map.

• On the resume page, put in information about the schools you have attended and the jobs you've had. If you can think of any pictures or links that would make the story more complete, add them or bring them in to add next week.