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 are drawing 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 the book Varoom. The mapped area will then be highlighted. Figure 3-1 The Image Map Editor 1 5
5. To create the link, click on the Folder icon next to the Link text field, and browse to find varoom.htm in 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 hot spots. Click on one corner of the The Arica Conundrum book cover, then move your cursor to the next corner and click. Continue until you have clicked all the way around the book. Double-click to complete 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 the Alt 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 it return 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 open c 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 Object palette (Figure 3-2), and click on the I n s e r t Flash Movie icon (Figure 3-3). 5. When the Insert Flash Movie dialog box opens, Use the Browse button to locate the file crazybird.swf in the bookstore folder. The.swf stands for Shockwave Flash. Every multimedia 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 inspector now 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 representing the movie expands. Height and width are the only required attributes for most multimedia file types. Flash is unique in its capability to resize itself without losing quality, which means you can set the height and width of the movie to anything you want. 9. In the tag field Dreamweaver uses both O b j e c t and E m b e d tags. (Object is the tag defined by Microsoft for ActiveX controls; Embed is the tag defined by Netscape for plug-ins.) To learn more about other attributes, refer to the Dreamweaver online Help files. 1 0. Insert a paragraph break before the words Everyday Epiphanies, save the page, and choose File > Preview in Browser. Select a browser that has the Flash plug-in installed. The top of your page should look like the image seen in Figure 3-4 with a little yellow bird flitting around your screen. Figure 3-2 The Objects palette features shortcuts for linking a variety of multimedia file types, including Flash movies. Figure 3-3 The Property inspector changes to display the attributes for the multimedia file type selected. Here you see the options for a Flash movie. Make a Link to the Page Now open or switch to coftable.htm and scroll down until you see the words Our catalog.... Highlight catalog and use the property inspector to link it to catalog.htm (which is inside the folder catalog ). Now highlight the word Lovedogs and make a link to the same place. Do the same with Spacebopping and Purp L. Elephant. Preview the page, test the links, then save it. Figure 3-4 The Crazy Bird Flash movie displayed in Netscape Navigator 1 7
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. The mailto: tag does not work in all browsers, and the results are not as user friendly as a CGI script. You will receive a text file as an email attachment which you can open in any text editor to interpret the results (Figure 3-5). One way to process it is to import the text into a spreadsheet program like Excel as an ASCII delimited dataset. For an example of a CGI form visit http://www.best.com/~mbrown/cast74g/lessons/lesson3 Figure 3-5 The text reponse you receive from a mailto: is not very user friendly and must be interpreted. 1 8
EXERCISES Creating an HTML Form Dreamweaver s Object palette has a series of insert buttons for a variety of different forms. Let s look at some of them. 1. With coftable.htm open, scroll to the bottom of the page, click your cursor after the second horizontal 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. Figure 3-6 When you select the red line that represents a form, the Property inspector features attributes for processing the form with a CGI script. 5. Enter the name survey in the text box under the word Form. This name is used by scripting languages 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 to control the form. We ll keep it simple by using a client side Mailto. Just enter your email address thus: 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 questions separated 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, which is 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 box immediately expands. Naming the field has no obvious effect, but it will be used by the CGI script or Mailto: to identify the contents of the field when data is submitted. 1 9
Figure 3-7 The Initial List Values dialog box makes it easy to create pull-down lists for forms. 9. Enter None of your business in the Init Val field. The Init Val field is an initial value that will display in a text field unless a viewer chooses to delete or overwrite it. In most cases this will be left blank. 1 0. Insert another text field after the second question. Name it email and give it a Char 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, but this time choose the 6th button from the top, Insert List/Menu. (Or use the menu bar to select Form Object > List/Menu. ) 1 3. Type the name Food into the List/Menu field, set the Type radio button to Menu, and click the List 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 choose Form 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 Property inspector, check the radio button that says Reset form. Note that the label and button name change as well. 2 0. Preview and test your form by filling in your name, changing the text in the second text field, and picking 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 one time. 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
3. Repeat this step three times so there are four buttons. To the right of the first one type East, to the right of each of the others, West, North, and South. 4. Click to select one of the radio buttons and reveal the Radio Button properties in the Property inspector seen in Figure 3-8. All radio buttons in a group should have the same name. Let s just go with the default name for the text area under Radio Button. Figure 3-8 The Radio Button options in the Property inspector 6. Now do the same with the other buttons. Each should have a different Checked Value name so the CGI script can distinguish them. We ll give each button s Checked 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 such instructions 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 a paragraph break. 2. Choose the Insert Checkbox icon on the Objects palette, or Insert > Form Object > Checkbox from 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. Figure 3-9 The Checkbox options in the Property inspector 2 1
MORE EXERCISES TO SHARPEN YOUR SKILLS Image Maps Multimedia Open another image and experiment with using different drawing tools to create hot spots and set links. 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 ll look 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 file types, try inserting them into your page and configuring them as you did the Flash movie. If you are not familiar with any of them do some online research to learn more and download examples. For Java applets go to www.gamelan.com; for ActiveX, www.microsoft.com; and for Director, 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