At the end of each unit of Using Dreamweaver are some exercises related to the concepts and skills covered in the unit. For your convenience, copies of the exercises for all the units also appear on this page after these instructions (see below).

The exercises allow you to create a practice Web site, using html files and images that you can download.

Before you do the exercises, you should first take a look at the example practice site. Then you need to set up your own practice site.

1. Take a look at the example site

To see an example of what the practice Web site looks like when all the exercises are completed, go to http://www.hsl.unc.edu/services/tutorials/DWclass/Example/Welcome.htm. (Your completed version may look somewhat different depending on some formatting decisions you make.)

2. Set up your practice site

To download and use the practice html files:

1. Create a folder on your desktop for your practice. Give it a name. (We suggest calling it "mysite," and will refer to it by that name.)

2. Link to the each of the following practice files (the "P" in each name is to remind you it is a practice file).
   
   Note: When you click on any of the following links, a new window opens over this one. To return to this page, you can click the close box ( ) in the upper-right corner of the new window.

   Pwelcome.htm

   Pui.htm

   Pconcept.htm

   Pselect.htm

   These are html files to which you will apply formatting and add images and links.

3. Choose File > Save As... to save each practice html file to the mysite folder on your desktop.

4. Create a folder within "mysite" and name the folder "images."

5. Link to the following file:

   Pimages.htm

   The Pimages file contains images. Right-click on each image and save it in the images folder (within "mysite" on your desktop). Do not change the names of the image files.

Once you have completed the above steps, you will be ready to do the exercises.

Have fun!

Exercises

The Using Dreamweaver exercises are organized by unit (Setting up a Web Site, Basic Techniques, Formatting Text, Working with Tables, and Templates & Libraries).

If you don't know how to do an exercise, refer to the unit for an explanation.

Note: If you click one of the headings below, the Web page for that unit will open in a new window. To return to this page, click the close box ( ) in the upper-right corner of the new window.

Setting up a Web Site

1. Complete the steps described in the instructions for the exercises (see "Instructions" above), including:

• create a folder on your desktop for your practice site ("mysite")

• download html files to the folder

• create an images folder and download image files into it.

2. Become familiar with going back and forth between displaying and hiding the site files window.

3. Create a new Web site within the Dreamweaver site files window. To do this, navigate to "mysite" on your desktop, and make it the root folder. Give your site a name such as "Mysite."

When you create the site and it appears in your site window, it should include all the practice html files as well as a folder called "images" that contains your practice images.

Your "mysite" site files window should look something like this:

4. Practice working within the Dreamweaver site files window. Create a new folder in your site called "testfolder," and a new html file called "Test." Try renaming the test folder and file. Notice that you can do these things within Dreamweaver and that if you leave Dreamweaver the changes you make are reflected in Microsoft Windows. Delete the test files and folders you created.

Basic Techniques

1. Create a launcher that includes the Properties palette (Hint: open the preferences).

2. Open the Web page called Pwelcome.htm. Change the Properties so that the background is a different color.

3. Add some keywords to Pwelcome.htm so that Web search engines will find it.

4. Add the image "title.gif" to the top of the page. Add the same image to the tops of Pui.htm, Pconcept.htm, and Pselect.htm.

5. Insert images into Pui.htm and Pconcept.htm.
(Note: see the notes inside asterisks on the these pages to see where to insert images)

6. Add links from Pwelcome.htm to the other pages in your site.

7. Highlight part of your page, then take a look at the html for the page. Notice how Dreamweaver highlights the html code for you.

8. Insert  "top of page" rollover images at the bottom of pages Pui.htm, Pconcept.htm, and Pselect.htm. Use top.gif as the original image and topov.gif as the rollover image. Link it to the top of the page (hint: you need to put an anchor at the top of your page).

9. Insert a the "next.gif" image at the bottom of the page. Link it to UI.htm. Then add "previous.gif" and "next.gif" at the end of the other pages, and add the appropriate links.

10. Preview your page in Netscape.

Formatting Text

Paragraph and text formatting:

In Pselect.htm, experiment with changing paragraph formats, font size, font color, and paragraph alignment on the pages of your practice site. (Don't save the changes you make.)

After you have done some experimenting, choose File > Revert to undo the changes. You need to do this because in Dreamweaver, manual formatting overrides formatting with html styles or CSS styles, which are in the next exercises.

Styles Exercises:

Use Pselect.htm or whichever page you prefer to practice with html styles and CSS styles.

HTML Styles

1. Create an HTML style that you combines level 3 heading with blue italics. Call it threeblue. Make it so you can apply it only to entire paragraphs.

2. Then make a style called threeRed that you combines level 3 heading with red italics. But in this case, make it so you can apply it to any range of text.

3. Create an HTML style that changes any text you select to green Arial but doesn't change other font characteristics (size or bold, italics, etc.).

4. Delete one of the styles you created. What happens?

CSS Styles

1. Use CSS styles to redefine an HTML tag.

2. Use CSS styles to create a custom class.

3. Create an external style sheet. Define some styles for it. Then link your Web pages to it.

Working with Tables

In Pui.htm, find the heading for "Some Important Tools." Put the information in a table. Add thumbnails of the tools to the table by inserting the images zoom.gif, hand.gif, marquee.gif, lasso.gif, wand.gif, and move.gif.

Note: Take a look at the finished table in the example to get an idea of what you are trying to do.

Here are some other exercises you can do to practice working with tables:

Templates & Libraries

Templates

1. Save Pselect.htm under another name. Make sure the title.gif is at the top of the page, but delete everything else. Then choose Save As Template to save it as a template. Define the title as locked but make everything also editable.

2. Create a new html file and attach it to the template you created.

3. Modify the template and see how it affects the attached file.

4. Detach the template from the file.

Libraries

1. Add the image DWhdr.gif to the top Pwelcome.htm.

2. In the Assets panel, click on the library icon.

2. Add your Top of Page rollover image to the library. Give it a name.

3. Insert the library item you just created into appropriate places in your pages. (You previously put a top of page rollover at the bottom of each page, so now you could try inserting it in between the sections within pages.)

4. Preview your work in your browser. Trying clicking on the rollover graphic.