LESSON 3: ADDING IMAGE MAPS, ANIMATION, AND FORMS

CREATING AN IMAGE MAP

OBJECTIVES

By the end of this part of the lesson you will:

• understand how image maps can enhance a design and make a site more interactive• know how to create an image map easily with Dreamweaver

CONTEXT

An image map is simply an image with multiple “hotspots” or links. It works on a grid principle, with

coordinates telling the browser that a defined section of the image should link to a particular URL.

Dreamweaver makes it easy to graphically create and edit client-side image maps by providing an

Image Map Editor.

EXERCISES

Create an Image Map

1 . Open the document coftable.htm, and select the image of the books at the top of the page.2 . In the Property inspector you will find a M a p button. Click on it to open the Image Map Editor d i a l o g

box (Figure 3-1). 3 . Enter “Map1” as the map name at the top of the window so your image map changes will be saved

as you work. 4 . Note the four tools at the left side of the Image Map Editor. The arrow at the top is a selection tool

you can use to move hot spots around the page or to resize them. The other three options aredrawing tools you can use to define hot spots with different shapes.Select the rectangle tool, and click and drag to create a rectangular shape covering the outline of thebook Varoom. The mapped area will then be highlighted.

1 5DREAMWEAVER CURRICULUM

Figure 3-1The ImageMap Editor

DREAMWEAVER CURRICULUM

5. To create the link, click on the Folder icon next to the Link text field, and browse to find varoom.htmin the “catalog” folder. Double-click to select it. In the Alt text field enter the word “varoom.”

6 . Select the Polygon tool—the bottom one in the row. This tool enables you to create odd-shaped hotspots. Click on one corner of the “The Arica Conundrum” book cover, then move your cursor to thenext corner and click. Continue until you have clicked all the way around the book. Double-click tocomplete the action.Don’t worry about the shape overlapping the varoom rectangle. The one on top takes precedence.

7 . Repeat step 4 to link the new hot spot to the file called arica.htm. Enter “arica conundrum” in theAlt text field.

8 . Repeat the same process with the book cover “Heal Your Cat, Heal Your Life.”9. Click OK to close the dialog box.1 0 . Select File > Preview in Browser and choose a browser to view the page. Test the links to see how

the hot spots work. Note that there is now a border around the image. If you want to remove itreturn to the Property inspector and enter “0” in the B o r d e r text box.

1 1 . Be sure to save your changes.

ADDING MULTIMEDIA FILES

OBJECTIVES

In this part of the lesson you will learn:

• how to use Dreamweaver to add sophisticated multimedia effects to Web sites

CONTEXT

Web builders now have a rich variety of multimedia options—from animated interactivity to streaming

sound. You can use Macromedia Director or Flash, for example, to create interactive Shockwave

movies, and Aftershock to enhance functionality. Dreamweaver makes it easy to add these files to your

Web pages and make sure they work well in as many browsers as possible.

Keep in mind that many multimedia files require a plug-in, which extends the capabilities of your browser.

You will need to have the proper plug-in installed, when you test your work in a browser, or you won’t be

able to see the effect. You can get the Shockwave plug-ins from www.macromedia.com.

EXERCISES

In this exercise we’ll learn the basics of embedding and configuring multimedia files, using a Flash

animation as an example.

To insert a Flash File into your Web Page

1 . Choose File > Open and browse in the “bookstore” folder to the “catalog” folder and then openc a t a l o g . h t m .

2 . Set the Page Properties (Modify > Page Properties) any way you want and click OK. 3 . In the Document window, highlight the line of text at the top of the page (beginning “Here is the

complete...”) and use the Property inspector to italicize it. Save the page.

1 6

4 . Now position your cursor in front of the words“Everyday Epiphanies,” then open the Objectpalette (Figure 3-2), and click on the I n s e r tFlash Movie icon (Figure 3-3).

5 . When the Insert Flash Movie dialog box opens,Use the Browse button to locate the filecrazybird.swf in the “bookstore” folder. The.swf stands for Shockwave Flash. Everymultimedia file type has its own extension.Double-click the file to select it, then click OK.

6 . A small icon now appears on the Web page,representing the Flash movie.

7 . Click on the movie. The Property inspectornow displays the options for Flash attributes(Figure 3-3).

8 . Enter “300” in the Width field (indicated by W)and “250” in the Height field (indicated by H).Note how the size of the gray box representingthe movie expands.Height and width are the only required attributesfor most multimedia file types. Flash is unique inits capability to resize itself without losingquality, which means you can set the height andwidth of the movie to anything you want.

9 . In the tag field Dreamweaver uses both O b j e c tand E m b e d tags. (Object is the tag defined byMicrosoft for ActiveX controls; Embed is the tagdefined by Netscape for plug-ins.) To learnmore about other attributes, refer to theDreamweaver online Help files.

1 0 . Insert a paragraph break before the words“Everyday Epiphanies,” save the page, andchoose File > Preview in Browser. Select abrowser that has the Flash plug-in installed.The top of your page should look like theimage seen in Figure 3-4 with a little yellowbird flitting around your screen.

Make a Link to the Page

Now open or switch to coftable.htm andscroll down until you see the words “Ourcatalog...”. Highlight “catalog” and usethe property inspector to link it tocatalog.htm (which is inside the folder“catalog”). Now highlight the word“Lovedogs” and make a link to the sameplace. Do the same with “Spacebopping”and “Purp L. Elephant.” Preview the page,test the links, then save it.

1 7DREAMWEAVER CURRICULUM

Figure 3-2The Objects palette features shortcuts forlinking a variety of multimedia file types,including Flash movies.

Figure 3-3The Propertyinspector changes todisplay the attributesfor the multimediafile type selected.Here you see theoptions for a Flash movie.

Figure 3-4The Crazy Bird Flash movie

displayed in Netscape Navigator

BUILDING FORMS

OBJECTIVES

In this part of the lesson you will learn:

• how to create various forms and what you can do with them• how to use CGI scripts and “mailto:” to collect information from forms

CONTEXT

Dreamweaver can create a variety of forms you can use to capture information of all kinds from the

visitors to your site. You can conduct a survey, collect customer contact information, or put a guest

book on your Web site with fields for visitors’ names, addresses, interests, comments, and questions

they might want to ask. When the visitor has filled out the form they click on the S u b m i t button to send

it to you.

You’ll need to provide a mechanism for the visitor’s computer to send you the information they have

entered into the form. Most often this is done using a CGI script, a program that will process the

submission of the information and then send it to you via email, or post it dynamically to a page on your

Web site.

CGI or Common Gateway Interface scripts are programs, usually written in a programming language

such as Perl, Java, C, or C++. CGI scripts are the engines behind many HTML forms and other dynamic

features on a Web site.

To create a CGI script you’ll have to know how to program or hire a programmer to do it for you.

You can also find and modify existing scripts. But to keep it simple, we’re going to use a less

sophisticated but much simpler method of sending information from a form back to your server using

a simple m a i l t o : t a g .

DREAMWEAVER CURRICULUM1 8

Figure 3-5The text reponse you receive from a mailto: is not very userfriendly and must be interpreted.

The mailto: tag does not work in all browsers, and the results are not as user friendly as aCGI script. You will receive a text file as an email attachment which you can open in anytext editor to interpret the results (Figure 3-5). One way to process it is to import the textinto a spreadsheet program like Excel as an ASCII delimited dataset. For an example of aCGI form visit http://www.best.com/~mbrown/cast74g/lessons/lesson3

EXERCISES

Creating an HTML Form

Dreamweaver’s Object palette has a series of insert buttons for a variety of different forms. Let’s look atsome of them.

1 . With coftable.htm open, scroll to the bottom of the page, click your cursor after the secondhorizontal rule, and insert a paragraph break.

2 . If the Object palette is not already open, choose Windows > Objects from the menu bar to open it.3 . Now use the scroll arrow at the top of the palette to access the F o r m s group. Hold your mouse over

each of the the six buttons on the Object palette long enough to see it’s name appear.

4. Click on the top button in the group to insert a blank form space.

A blank form in Dreamweaver is represented by a rectangle outlined by a dotted red line.(Figure 3-6). Selecting this rectangle reveals the Form properties in the Property inspector.

5 . Enter the name “survey” in the text box under the word “Form.” This name is used by scriptinglanguages such as JavaScript or VBScript to control the form.

6 . In the text area next to the word “Action” put the directory name and name of the script used tocontrol the form. We’ll keep it simple by using a client side “Mailto.” Just enter your email addressthus: “mailto:you@yourweb.com.” Set the method to “Post.”

7 . Now, click to insert your cursor within the form area on the page, and type the following questionsseparated by a return:What is your name?What is your email address?What is your favorite book?Which is your favorite food?

8. Click to place your cursor after the first question and click on the button for Insert Text field, whichis the second button from the top on the Object palette. (You can also use Insert > Form Object >Text Field on the menu bar.)A small bounded rectangle appears immediately after the question. In the Property inspector type“Name” into the T e x t F i e l d box and set Char Width (character width) to “50.” The text boximmediately expands. Naming the field has no obvious effect, but it will be used by the CGI script orMailto: to identify the contents of the field when data is submitted.

1 9DREAMWEAVER CURRICULUM

Figure 3-6When you selectthe red line thatrepresents a form,the Propertyinspector featuresattributes forprocessing theform with aCGI script.

DREAMWEAVER CURRICULUM

9 . Enter “None of your business” in the Init Valfield. The Init Val field is an initial value that willdisplay in a text field unless a viewer choosesto delete or overwrite it. In most cases this willbe left blank.

1 0 . Insert another text field after the secondquestion. Name it “email” and give it aChar Width of “40.”

1 1 . Insert another text field after the third question.Call it “book” and make Char Width “40.”

1 2 . Place your cursor after the fourth question, butthis time choose the 6th button from the top,Insert List/Menu. (Or use the menu bar toselect Form Object > List/Menu. )

1 3 . Type the name “Food” into the List/Menu field,set the Type radio button to Menu, and click theList Value b u t t o n .

The List Values dialog box appears.

1 4 . In both the Item label and Values columns, type “pumpkin.”

1 5 . Click the + symbol to add a new line, and type “carrot” in both columns.

Following the same process enter “artichoke,” “apple,” and “eggplant” (Figure 3-7).

1 6 . Enter a paragraph break by placing your cursor just after the last text field and pressing Enter (PC)or Return (Mac).

1 7 . Click on the third button from the top in the Object palette, Insert Button (or chooseForm Objects > Insert Button from the menu bar).

1 8 . Repeat the operation so you have two identical buttons next to each other.

1 9 . Now let’s change the first button to make it reset the form. Select the first button. In the Propertyinspector, check the radio button that says “Reset form.” Note that the label and button namechange as well.

2 0 . Preview and test your form by filling in your name, changing the text in the second text field, andpicking a food from the pull down menu you just created.

Adding Radio Buttons

Radio buttons allow viewers to select from multiple choices. Only one button in a group is active at onetime. We’re going to add some radio buttons to our form.

1 . After the email address field, type the question “Where are you from?”Click your cursor in the form right after the question.

2 . Click the Insert Radio Button icon on the Forms panel of the Object palette, or choose Insert >Form Object > Radio Button.

2 0

Figure 3-7The Initial List Values dialog box makes it easy tocreate pull-down lists for forms.

3 . Repeat this step three timesso there are four buttons. Tothe right of the first one type“East,” to the right of each ofthe others, “West,” “North,”and “South.”

4 . Click to select one of theradio buttons and reveal theRadio Button properties in theProperty inspector seen inFigure 3-8.

All radio buttons in a groupshould have the same name.Let’s just go with the defaultname for the text area underRadio Button.

6 . Now do the same with the otherbuttons. Each should have adifferent Checked Value name so the CGI script can distinguish them. We’ll give each button’sChecked Value the same name as the button itself so it will be easy to keep track: “East,” “West,”“North,” and “South.”

Adding Checkboxes

Checkboxes enable viewers to make multiple choices, so they are good for choices that include suchinstructions as “Choose all that apply.“

1 . Click to insert your cursor after the new radio buttons and hit Enter (PC) or Return (Mac) to insert aparagraph break.

2 . Choose the Insert Checkbox icon on the Objects palette, or Insert > Form Object > Checkboxfrom the menu bar. After the checkbox type “Check if you want be on our email list.”

3 . Insert another checkbox and type “Check if you want us to share your name with other companies.”

4 . In the Property inspector for each checkbox (Figure 3-9) enter a name in the field under Checkbox.You can use the same or distinct names for checkboxes.

5 . Next to Checked Value give the two boxes the names “email” and “share.”

6. Preview your work then save it.

2 1DREAMWEAVER CURRICULUM

Figure 3-8The Radio Button options in the Property inspector

Figure 3-9The Checkbox options in the Property inspector

DREAMWEAVER CURRICULUM

MORE EXERCISES TO SHARPEN YOUR SKILLS

Image Maps

• Open another image and experiment with using different drawing tools to create hot spots andset links.

Multimedia

• Experiment with the other options associated with Flash movies in the Property inspector.• Experiment with the options in the Object palette. In addition to icons for inserting Images,

Horizontal Rules, and Flash Movies (which you’ve already seen) and for Tables (which you’lllook at in the next section), you’ll see icons for other multimedia effects including Java applets,ActiveX controls, plug-ins, and Director movies. If you have examples of any of the these filetypes, try inserting them into your page and configuring them as you did the Flash movie. If youare not familiar with any of them do some online research to learn more and downloadexamples. For Java applets go to www.gamelan.com; for ActiveX, www.microsoft.com; and forDirector, www.macromedia.com.

Forms

• Experiment with other form field options.• Create more radio buttons, checkboxes, lists, and text fields.• Try to find a CGI script online that you can test. Upload your form to a server where you can

work with it to make sure the submission process functions appropriately.

2 2