Summary

You've been using Dreamweaver for a while now, so its time to show that you know what you're doing. What better way to prove that you know how to do things than by writing a tutorial telling someone (who has never used Dreamweaver before) how to use Dreamweaver?


You'll construct a multipage (2 pages) tutorial that covers:

  1. Creating/editing a Dreamweaver Page
  2. Uploading a Dreamweaver page (intended for Pitt students)


Both pages will share the same look.


Getting Started

Use discretion in how much detail you write. I'd rather you get done with the lab and have grazed the surface of all the requirements rather than do one section really, really well.


Both pages will share the same look through an external CSS file.


To get started:

  1. Load up Dreamweaver
  2. Create a new site as we've done before, so that Dreamweaver knows how to upload your files to the Pitt web server. Remember that the host name is unixs.cis.pitt.edu. You'll want to create a directory using Filezilla to store your files (public/html/tutorial/ is a good directory name).
  3. Create a new XHTML HTML webpage. Save as [yourinitials]_creating.html
  4. Create another new XHTML HTML webpage. Save as [yourinitials]_uploading.html
  5. Create a new CSS file (Click: File, New, Basic Page, CSS). Save as [yourinitials]_look.css
  6. You'll notice that Dreamweaver has some tabs. One for each file that you have opened. Click on the creating.html tab and under the "Design" drop down thing, click the "Attach Style Sheet" button. Click browse and pick your look.css file. Be sure the "Add as Link" radio button is selected.
  7. Repeat step #6 for your uploading.html file.
  8. You are now free to add content. Both pages should share the same look and will both be uploaded to the same directory, along with their CSS file.

Adding Content

Now, just go in and add some content to both pages. Time is limited, so you probably won't be able to type out a full tutorial, but you can cover how to do a few common tasks in Dreamweaver.


Some ideas for the creating tutorial page include:

  • A broad overview / summary of what Dreamweaver is and what it can do for you
  • Creating a new HTML page
  • Adding a link
  • Having the page use an external CSS file
  • Having the page use an internal CSS file (using the <style> tag)
  • Adding an image
  • Adding a table
  • Changing the properties of a specific piece of text (e.g., changing a single word to have a blue font color)
  • Changing how a certain tag is displayed (e.g., make all paragraphs centered)
  • Adding a table
  • ???


You should aim to have at least 4 sections in the creation page. If you're not sure how to do one of the possible sections, then that should be the section that you write a tutorial for (so that you learn how to do it).


Some ideas for the uploading tutorial page include:

  • How to use the Manage Sites button and new site wizard to allow Dreamweaver to upload the page(s) to the web
  • How to use Filezilla to create a directory to store the page in
  • How to manually upload some files if Dreamweaver does not do so (in the last lab, some people's external CSS files were not being uploaded and some people's images were not being uploaded automatically). You could tell someone how to manually do it with Filezilla.


You should aim to have at least 2 sections in the uploading page.


Each page should follow this kind of format:

 [level 1 header: Page Title Here]
 [A summary of the page]
 [level 2 header: How to do ____ ]
 [Describe how to do ___ using a few words or paragraphs]
 [level 2 header: How to do ____ ]
 [Describe how to do ___ using a few words or paragraphs]
 ...
 The [next/previous] page of the tutorial can be found at [link to previous/next tutorial page].

Changing the Look

Now, give the pages a custom look. Some ideas include:

  • Changing both pages' background color
  • Changing h1 properties (size, color, alignment, background image)
  • Changing h2 properties (size, color, alignment, background image)
  • Change the global font
  • Change how links look
  • Change the page's background image (recommended site: http://www.backgroundsarchive.com/ for free tileable background images)
  • Put all of the content in a centered div (whose width is fixed). Give the web page a different background color than the div's background.
  • There are many other possibilities that we've done. Be creative. There's no hard limit on how many changes you should make, but make as many as time permits until you're happy with the look of your page.

Submission

Time permitting, make sure that you can view your pages online at your own web space.

As in past labs, call me over if time permits so I can look at your submission. Whether or not there is time, definitely submit your lab to the course submission directory (Lab07) folder. Since you've put your initials in all of your files (both .html files and the .css file) there should be no collisions between 2 people's files.