Dreamweaver Exercise Two

1. Create a dw2 folder inside of your folder that contains only your work for this class. You can do this either outside of DW or inside Dreamweaver.
2. In DW, create a new page - In this page, create an absolute link to the NVCC Home Page - make sure the link includes the http://
3. In Design View, create a relative link to the dw1 folder you created for the previous exercise. (this folder should also be inside the folder that contains only your work for this class). Switch to Code View or Split View and examine the link. Notice that because you haven't yet created a location for the page you are linking from (by saving the page), DW creates a temporary reference that references drives on your computer or your flash drive.
4. Save your file as practice.html and see how the link changes -- Although this probably worked in this instance, looking at student's homework, it apparently doesn't always work and you end up with references to your hard drive or flash drive which won't work once the file is uploaded to the server, so always save your file before creating any relative reference (link to file, image reference, external stylesheet reference, Flash movie reference, etc.)
5. Download an image from the web, saving the image somewhere outside of your existing site definition.
6. Insert the image into your web page -- notice that DW will indicate it will copy it into your site. In the Files menu, you can see where it puts the copy.
7. In the Files menu, delete the image from your site. Then alter your site definition to include a default folder for images, e.g. "images".
8. Repeat step 6 - notice that with a default image folder in the site definition, images that Dreamweaver copies into your site are put into this folder. Notice also that just by pointing and clicking on the image file, DW will construct the appropriate relative reference to the image.
9. Modify>Page Properties - practically all of the properties under Appearance (HTML) are deprecated, so we will use the CSS ones instead. Specify the following:
• For background color, choose a background color equal to the green used at the far right of the NVCC Home Page (where the links Current Students, etc. appear) -- use the color piicker for this, holding it down so that it exists outside of DW
• For text color, specify an all white text color
• For unvisited and visited links, choose text colors that will be easily visible against the dark green background
10. Before the image, hit Enter to insert a paragraph and move your picture down.
11. At the top of the page, create a h1 heading - Dreamweaver Exercise Two
12. Create an unordered list with 3 list items of things you are learning in this exercise (feel free to list more)
13. Add a 4th element to this list including a special character
14. Create an email link to wpegram@nvcc.edu (i.e. <a href="mailto:wpegram@nvcc.edu">Bill email</a>) You can do this in Design View or Code View
15. Preview your page in the browser - File>Preview in Browser. Make sure that your page has enough content so that you have to scroll down to see the entire page. If it doesn't, just add any content to your page so that it does.
16. At the top of your page, insert a Named Anchor (e.g. top) and at the bottom of the page, create a link to this named anchor (e.g. <a href="#top">Link to top of page</a>). You can do this in Design view or Code View.
17. Upload the dw2 and images folders to your student website. Go to the student list at www.billpegram.com and check your pages, and then submit the URL of the dw2 folder against this assignment in Blackboard.

Revised: February 20, 2012. Comments to William Pegram, wpegram@nvcc.edu