Lab 6: Dreamweaver

This lab will have you use Dreamweaver to create a web site. You'll then upload it online so that you or others may view it¹⁾.

Some of the steps given are purposefully vague. There are often several ways to accomplish a task, so poke around in Dreamweaver and explore.

Feel free to use your choice of design view, code view, or split view except when noted otherwise.

1. Create a new multiple column layout. To do this, click File, New, and then under HTML, pick a layout that you like. It must have at least 2 columns, and it must have a header and footer. Be sure to make the HTML file XHTML strict. Set the layout CSS option to be "Add to Head."
2. Don't worry about the "lorem ipsum" text that's everywhere. For this lab, we're not concerned with the words on the page.
3. Save the file on a newly created folder on your desktop.
4. In the footer: add the date, so that it is automatically updated whenever you save the file.
5. In the main content section: add a horizontal rule.
6. In design view: Make the hr smaller (e.g., 100px). Do this by clicking on the hr, and adjusting its properties (look at the lower portion of the screen).
7. Notice how that changes the HTML, which is bad! We want to put all style related code in the CSS. Instead, right click somewhere and go to "CSS Styles" then "New". Redefine how ALL hr tags will look. Maybe give them a fixed width, give them a few pixels of height, and set their color.
8. Insert another horizontal rule somewhere, to verify that you're automatically changing how all hr elements will look.
9. In the footer: Look in the insert pane on the right. Make sure that the "Common" category is selected. Insert an email link so that people can click a link in order to contact whoever is in charge of the site. Use a made up email address.
10. In the body: create a subsection (using an h2 element) and then a paragraph (feel free to type blah blah blah).
11. In the body: Put a few links to various websites. Use the insert pane to make this easier.
12. In the body, using design view: Use the insert pane (this time set to the "text" category) to insert an unordered list. Insert a few items and then press shift-tab to end the creation of the list.
13. In the body: Use the insert pane to insert a table.
14. Under the "table" option on the "Modify" menu, just fiddle around. Add and remove cells, increase row and/or column span and insert rows/columns.
15. Click in one of the table cells, and notice how the property pane has table specific options such as alignment.
16. In design view: click on the text in one of the item lists. On the properties pane, make sure CSS is clicked on. On "Targeted Rule" click <New CSS Rule> then click "Edit Rule". Using the pop up box, change how the list item is displayed.
17. Go through the document, and change the overall look. Change:
    1. the background colors of the various parts of your page
    2. the fonts used, font colors, styles (if you'd like)
    3. the borders used (add or remove borders)

1. On the menu, click "Site", "New Site". For the site name, enter whatever you'd like. For the HTTP address of your site, enter http://www.pitt.edu/~[pittusername]/lab6/
2. Click next.
3. Select, "No I do not want to use a server technology" and click next.
4. Select, "Edit local copies on my machine and then upload to the server when ready"
5. Where it asks, where on your computer do you store your files, be sure to select the folder containing your lab 6 HTML file.
6. Select that you'd like to use FTP, click next
7. for the hostname, type in unixs.cis.pitt.edu, for the folder type in "public/html/"
8. type in your Pitt username and password
9. select "Use secure FTP (SFTP)"
10. click "Test Connection" to make sure you're able to connect (call me over if the test fails)
11. click next and select "No I don't want to enable checking in and out"
12. Finish the wizard.
13. In the lower right hand corner, you should see a little pane for managing your web sites.
14. Click on the button to "Put" the files onto the server.
15. Congratulations, you should be able to view your files online! Simply go to: http://www.pitt.edu/~pittusername/filenameofyourlab6.html

It is absolutely vital that you make sure I come around, look at your work, and check your name off in order to give you credit for lab 6. Unlike past labs, you will not be submitting it to a specific directory. Therefore, I won't be able to verify later whether you were really did the lab in class, or whether you did not.