Outline

Offered by Networked Information Services

Instructor: Ron Yeany: ryeany@bu.edu
Prerequisites: Dreamweaver: Managing A Site (or equivalent knowledge).

2 hours (50 minutes lecture, 60 minutes hands-on exercises, 10-minute break)

Hands-on exercise: Preparing the classroom environment (10 minutes)

1. Define a connection to your practice site.
2. Download practice files from your site.

Cascading Style Sheets (CSS) (30 minutes)

1. Using Cascading Style Sheets (CSS).
2. Redefining HTML tags.
3. Creating custom styles.
4. Using CSS selectors.
5. Attaching a central CSS stylesheet.
6. Editing CSS styles.
7. CSS and browser compatibility.

Break (10 minutes)

Hands-on exercise: Working with CSS Styles (35 minutes)

1. Redefine HTML heading tags using CSS. (NOTE: When creating your first style on a site, you also have to create the stylesheet name. After a style has been created, you re-use the same stylesheet to store them all).
2. Redefine your paragraph tag using CSS.
3. Attach your central CSS stylesheet to several documents on your site.
4. Create a custom CSS style
5. Apply your custom style to text in a document.
6. Open another document and apply your custom style there as well.
7. Return to your CSS editing panel and edit your custom style.
8. Note what happens in your other documents when the style is edited.
9. Use a CSS selector to change how your link text appears.
10. Compare link text in Internet Explorer and Netscape.

Behaviors (20 minutes)

1. Simple Mouseover Behaviors:
   Inserting images that change state on mouseovers.
2. Other Behaviors:
   Explore Dreamweaver's built-in menu of Javascript behaviors, including opening a link in a new, customized window.
3. Extending Dreamweaver:
   Using Dreamweaver's Extensions Manager to download third-party behaviors and other extensions.

Hands-on exercise: Inserting images with simple rollover behaviors (15 minutes)

1. Open your level 3 template for editing.
2. Delete a static image link and replace with an image link with an associated mouseover behavior.
3. Replace the other 3 images in your navigation menu with mouseover images and links.
4. Save your template and allow Dreamweaver to do the updating.