Dreamweaver: Chapter 2

Chapter 2: Links and Images

Goals for this Lesson

• Create new HTML pages
• How to insert an image
• Understand image properties
• Insert absolute links
• Insert relative links
• Create image links

Objective

• Insert links to create a website that can link webpages together.
• Insert images into a webpage.

Instructions

1. Open Dreamweaver and be sure to work within your Web Design and Interactive Media website from Chapter 1 Exercise. The Web Design folder on the desktop should be the Local Site Folder.
2. Open the index.html file.
3. Download the files needed for the exercise here.
4. Insert the weblogo.png file in the header above the heading.
5. In the properties panel change the width to 400px (make sure the height is locked so it stays proportional)
6. Add the Alternative Text to say: Web Design Logo
7. Link the image to the index.html file.
8. In the nav bar create links that will make the navigation useable. Link the word Home to the already created index.html page. Link the word About to a not yet created about.html page and link the word Contact to a not yet created contact.html page. (You will create these pages next)
9. Save the index.html file.
10. Create a new html file and title it About
11. Save the newly created html file as: about.html
12. Copy everything within the body tag from the index.html file into the newly created about.html file.
13. Change the h1 tag in the header to say: About the Program
14. Delete everything in the main and create a new section (in the main) that uses the paragraph text provided from the files you downloaded. Make sure the paragraph is wrapped in a p
15. Insert the image students.jpg above the paragraph text but still within the section tag.
16. In the properties panel change the width to 500px (make sure the height is locked so it stays proportional)
17. Add the Alternative Text to the image to say: Web Students
18. Save the about.html file.
19. Create a new html file and title it Contact
20. Save the newly created html file as: contact.html
21. Copy everything within the body tag from the about.html file into the newly created html file
22. Change the h1 tag in the header to say: Contact Us
23. Delete everything within the section (in the main). Paste the text provided from the files you downloaded.
24. Wrap the words: For More Information Contact: in a h3
25. Wrap the Address, Phone Number, and Email in one p
26. Break the Address, Phone Number, and Email onto their own separate lines by using the break tag. (see example image)
27. Insert a telephone link so the phone number is a clickable link to the phone number.
28. Insert an email link so the email is a clickable link to the email address.
29. Save the contact.html file.
30. Preview your newly created website in the browser to make sure the website navigates page to page and that all links work.
31. Submit the root folder that you named: Web Design into the shared drive.