Week 3

General notes:

• I find it best to not have too many pages open for editing at any one time.  Have one page, or two pages at the most open for editing.
• It is important to save any page that you have open for editing periodically.  This is for two reasons.  First, Dreamweaver likes to crash when you have made a lot of changes to a page, and have not yet saved them (when else!)  Second, the preview of the page (and the entire web) in a web browser is only accurate if all pages are saved.
• You can tell if a page has been changed if there is an asterisk next to the page name.
• Learn the shortcuts for commonly used operations such as ctrl-s for save, ctrl-z for undo, and shift-f7 for spell check.

Get an alternative browser and install it.
A good alternative that is popular is Firefox.
Google Chrome is also gaining popularity.
Apple users use Safari and should be downloaded by Windows users to verify pages look as intended.

Downloading of files for in class exercises:

• Internet Explorer has a simplistic FTP client built into the browser.
• To download entire folders from the class FTP server, there is a configuration setting that needs to be set in Internet Explorer.  Open Internet Explorer.  Tools > Internet Options... > Advanced > Enable folder view for FTP sites must be CHECKED.

Image Maps

Example of image maps used in web sites

• U.S. Geological Survey uses an image map for the states.
• Wikipedia article on image maps.
• Wikipedia image map with state names.
• Cryptozoology student website - Actually on further inspection, this is not an image map, but rather an image that has been sliced and put in a table.

Get your files for in class use from here (278 KB zipped).

Example of finished image map.

Note:  To get the pop up tool tip when rolling over a section of the image map, you must manually insert the title attribute into the image map area segments.

An advantage to using image maps is that you have maximum flexibility regarding the look of your graphic.  Also all browsers support image maps without any special plug ins.

There is a bug in Dreamweaver with making image maps.  If the image is aligned in some fashion, such a left aligned so that text flows to the right, the polygon image map selection area does not work.   Temporarily remove the aligning on the image.  Make your image map.  Then set your alignment.

Flash Text (Now deprecated - Dreamweaver CS4 removed this functionality)

You will discover that when previewing a page with flash text, the links will not work.  The finished page must be published to a server for the flash text links to work.

Get your files for in class use from here (13 KB zipped).

Example of finished flash text .

Flash Buttons

Here too, you will discover that when previewing a page with flash buttons, the links will not work.  The finished page must be published to a server for the flash button links to work.

You will find that Dreamweaver make generic names for all your flash objects.  It is good housekeeping to rename all your flash objects to something relevant.

A word of caution:  All flash objects must be in the same folder as the html document that calls them.  Not doing this will cause the link in the flash object to not work properly.

A drawback with using flash text or flash buttons is that the end user most have the Macromedia flash plug in installed in order for flash objects to work.

Tip:  to make flash buttons and text to have a transparent background replace
<param name="BGCOLOR" value=""> with the following line
<param name="WMODE" value="transparent">

Lab 3

This lab is to test your knowledge of being able to do basic page creation and to create some basic links.

Create a sub folder on your web server named "lab3".  Within "lab3" you will create a mini site.  You may take your previous lab2 that you did and copy it into the lab3 folder so that you already have a site to start from.

This site must contain as a minimum:

• Sub directories.
• Pages must be titled. (title tags in the head).
• A method of navigating through the site with an image map.
• The image map must be on every page..
• Pop up tip using title attribute in image map area segment. (Look at source of example).

Look at this revised lab3a as an example of a finished lab.

Use your imagination and creative skills. You may use advanced features if you desire.

Assignment is due one week from when it was assigned.  50% penalty if late.