Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Using Behaviors to Add Interactivity

Ready to really spice up your pages? Dreamweaver's behaviors are just the thing. Behaviors are prewritten functions that are packaged into simple, easy-to-use commands. They do cool stuff like open pop-up menus, windows, and messages, and can even check your visitors' browsers and plug-ins. If you haven't worked with behaviors yet, you're in for a treat!

Dreamweaver's behaviors are prewritten functions that have been packaged into simple, easy-to-use commands, and they pack a wallop of interactivity for your pages.

Like most Dreamweaver commands, behaviors are available through a series of dialog boxes. In other words, you can set up your behaviors with a handful of mouse clicks without knowing a thing about how to create them.

You do, however, need to know a few things about behaviors before you get started. First, they're always attached to an object on your pagea graphic, a piece of text, or even to the page itself. Second, each behavior has two parts: an event and an action. Remember the classic scene in Indiana Jones: The Temple of Doom when Indy, in the temple, swaps a bag of sand for the golden idol? The removal of the idol from the pedestal was the triggering event that fired off the action, in this case the booby trap of arrows and spears that flew from the walls. Behaviors work the same way in Dreamweaver. The trigger is usually some sort of involvement on the user's partperhaps clicking a link or moving the cursor over a specified area. The action might be the appearance of a pop-up window or the showing or hiding of page content. So think of behaviors as if you're setting a booby trap: When the event is triggered, the trap is sprung.

Geek's Delight

Dreamweaver's behaviors are written in JavaScript, a scripting language used within i98 code. JavaScript is used to add interactivity to web pagesrollovers, pop-up windows, and much more. JavaScript is completely different from Java (which is a programming language as opposed to a scripting language).

Attaching Behaviors

I hope you're stoked and ready to start using behaviors on your web pages. As already mentioned, you attach a behavior to an object on your pageto a graphic or some text or to the page itself. You create the behavior and add it to your page in Dreamweaver's Behaviors panel. The panel also lists any events and actions that have been applied to the selected object and allows you to make changes to them, too.

Each of the 27 behaviors that are available in the Behaviors panel has its own unique dialog box where you can set the parameters for the effect and make any adjustments down the road. Because there are so many behaviorseach functioning uniquelywe won't be exploring all of them here. However, the sidebar "Meet 27 New FriendsA Rundown of Dreamweaver Behaviors" describes each behavior so you'll know what each one does. Here, we'll walk through the setup for one of the most popular behaviors, Swap Image, so you can see how behaviors work in Dreamweaver.

Inserting Java AppletsNot Techy at All!

Have you ever heard of Java applets? An applet is a tiny program that runs in your web page and that offers your visitors some kind of interactive content. For example, you might want a stock ticker on your web site, a quote of the day, or news headlines. These sorts of constantly updating, interactive objects are handled by applets.

Now don't confuse Java applets with JavaScriptthey're totally different. Java is a stand-alone programming language, whereas JavaScript is a scripting language used within th89 code of your web pages.

But here's the good news: You don't need to know Java to use Java applets. You can insert Java applets on your page, just like you insert graphics, movies, or audio. Because the applet is a self-contained program, all you need to do is insert it, and you're away.

Where can you get Java applets? Search the Internetthere are countless numbers of them available for free online. Try starting with [javaboutique.com] or [javafile.com].

Once you've found an applet that you want to use, download it and save it in your site's local folder. Now you're ready to insert the applet on your page.

Here's how to insert a Java applet:

On your web page in Dreamweaver, place your cursor where you want to insert a Java applet.

Choose Insert > Media > Applet.

In the Select File dialog box that appears, navigate to your applet (always saved as a CLASS file), select it, and then click OK (Windows) or Choose (Mac).

Dreamweaver inserts the applet as a 32x32-pixel Java icon on your page.

Most applets that you download come with setup instructions. You'll need to read those files to see what size it is, and what other Property Inspector options you need to for the applet to function properly.

When you publish your page, make sure to upload the applet's CLASS file, as well as any additional files that the applet requires, such as graphic files.

Chapter 9it achieves the same effect as Swap Image. But Swap Image adds a bit of a twist: You can control the rollover effect for a group of images all at once.

Noteworthy

Browser compatibility has long been an issue with JavaScript functions, and therefore with Dreamweaver behaviors. But fortunately, Dreamweaver looks after browser compatibility issues for you, as you'll see in the exercise here.

Here's how to add a behavior to your page:

Choose Insert > Image to insert a graphic on your page. In the Select Image Source dialog box that appears, navigate to and select a graphic to use; then click OK.

In the top-left corner of the Property Inspector, enter a unique name for your graphic.

The name will allow the behavior to locate and affect the graphic on your page independent of any other images on your page. Names cannot use special characters or spaces and must begin with a letter. Keep in mind, too, that names are case-sensitive.

Repeat steps 1 and 2 to add a few more graphics to your page.

Once each graphic has its own unique name, you're ready to begin applying behaviors to them.

Select the graphic that you want to attach the behavior to.

Choose Window > Behaviors to open the Behaviors panel.

In the top-left corner of the Behaviors panel, click the Show Set Events button.

The Behaviors panel has two view modes, Show Set Events and Show All Events, which are controlled by the two buttons at the top left of the panel. When you're getting started with behaviors, you'll find it easiest to work in Show Set Events mode.

Click the Add Behavior button (the Plus button) at the top of the panel.

As you can see, there are many actions available in Dreamweaver.

However before setting an action, you'll specify the target browser for your behaviors. As mentioned earlier, Dreamweaver handles browser compatibility for you, freeing you to focus on page design.

In the menu that appears, choose Show Events For; then select your target browser from the submenu.

Selecting an earlier browser version ensures that your page will be widely compatible, but only a few actions will be possible. Choosing a newer target browser makes more behaviors available, but your page may not function properly in older browsers. Because Netscape and Internet Explorer interpret JavaScript slightly differently, you can specify only one or the other, not both at the same time.

Even though Dreamweaver allows you to choose a target browser for your behaviors, you still should test your effects in multiple browsersand if possible, on both Windows and Mac computers.

You have to set your browser compatibility only once; then you're ready to go. If you wish, you can leave the browser setting alone and use Dreamweaver's default (HTML 4.01).

Now you're ready to apply your behavior.

Click the Add Behavior button in the Behaviors panel again and choose Swap Image.

Some choices in this menu will appear dimmed depending on the target browser you chose. The page object that you're attaching the behavior to (in this case, an image) also limits the actions available.

10.

In the Swap Image dialog box that appears, from the Images list, choose the graphic that you want the behavior to affect.

The Images list shows all the graphics that are currently on your page, which helps you tell the difference between your graphics as you're applying the Swap Image behavior. Just make sure that the graphic you selected in step 4 is selected in the list.

11.

Click the Browse button beside the Set Source to field; then navigate to the image that you want to swap in when the rollover effect is triggered.

[View full size image]

Noteworthy

Just like when you use Dreamweaver's Rollover Image command, make sure that the rollover image you choose has the same dimensions as the original graphic. Otherwise, the rollover image will appear distorted when it's swapped in.

12.

Make sure that Preload Images and Restore Images OnMouseOut are both checked; then click OK.

Preloading your rollover images ensures that the rollover image will be loaded into your visitor's browser cache, so that there won't be a delay when the behavior is triggered.

Restore Images OnMouseOut swaps out the rollover image for the original image when the visitor moves the cursor away from the graphic; this option adds a second action to your image: Swap Image Restore.

When you click OK, both Swap Image and Swap Image Restore appear in the right column of the Behaviors panel. In the left column of the Behaviors panel, the default event for each action is displayed. The default event is determined by both the object that you attached the behavior to and the target browser that you're using.

Imminent Doom

When some behaviors are usedfor example, Set Nav Bar ImageDreamweaver inserts a null link, which appears as "javascript:;" in the Property Inspector's Link field. Null links are used when a hyperlink is required for the behavior to work, but when the user isn't actually taken to a new destination. If you remove the null link, Dreamweaver warns you that the behavior will also be removed from the object. If this is not what you want, choose Edit > Undo; otherwise, you'll have to rebuild your behavior manually.

13.

To add the Swap Image behavior to another graphic on your page, select it; then repeat steps 9 to 12.

Now that your behavior is complete, you're ready to test it. Unfortunately, you can't preview the effects of behaviors in Dreamweaver. To see them in action, you need to save your page and preview it in your web browser.

Note that a single object on your page can have multiple behaviors applied to it. For example, you can set up an effect so that when a visitor moves the cursor over a graphic, Swap Image is triggered, and then when the visitor clicks, a pop-up window appears.

You can add as many behaviors as you want. In fact, you can even set up your page so that two or more actions share the same triggering event. For instance, you can set up your behavior so that when a visitor moves the cursor over a graphic, the Swap Image behavior and a pop-up window are triggered at the same time. When actions share the same events, the order in which they're triggered is determined by the order in which the actions appear in the Behaviors panel. Actions at the top of the panel are triggered before the actions that come later. You can rearrange the sequence of your behaviors by clicking the Move Event Value Up and Move Event Value Down buttons at the top of the panel.

As you preview your behavior, you may find that you want to tweak it. Or perhaps the behavior isn't triggering at all. In either case, you'll have to head back to Dreamweaver and edit your behavior. In the next section, you'll see how to do just that.

Meet 27 New Friendsa Rundown of Dreamweaver Behaviors

Yup, there's a ton of these bad boys in Dreamweaver27 in all. Let me do some brief introductions so you can get to know who's who.

Call Javascript: Allows you to type your own custom JavaScript code for execution in your site visitor's web browser. You'll need to understand JavaScript to use this one.

Change Property: Dynamically changes the properties of images, forms, layers, and more. For example, you can make the background color of a layer change when the visitor's cursor moves over it.

Check Browser: Detects the type of browser the visitor is using and redirects the visitor to a specific URL. This behavior is useful if you've built two versions of your site that are optimized for two different browsers.

Check Plugin: Checks the visitor's browser to see if appropriate media plug-ins required to view your site are installed. You can display URLs depending on whether the plug-ins are installed.

Control Shockwave or Flash: Lets you play, stop, rewind, or jump to a specific frame in a Shockwave or Flash movie when you attach this behavior to a piece of text or a graphic on your pageallowing you to control the movie's playback from anywhere on the page.

Drag Layer: Allows the visitor to drag layers (and their contents) around the screen. With this behavior, you can create games, customizable interfaces, and much more.

Go to URL: Sets a link to trigger using a variety of events, including when the visitor moves the cursor over an object or when a page loads (normally, a hyperlink must be clicked to open its destination). More than one destination can be set with Go to URLuseful within a frameset where you want to control the contents of two or more frames from a single link.

Hide Pop-Up Menu: Used with Show Pop-Up Menu, discussed below.

Jump Menu: Allows you to edit form-based jump menus, also known as pull-down menus.

Jump Menu Go: Adds a Go button beside a jump menu.

Open Browser Window: Creates a pop-up window. You can control what appears in the window, as well as the properties for the window, such as its size and whether it includes scrollbars and a navigation bar.

Play Sound: Triggers audio on your web page when any of a variety of events occurs.

Popup Message: Creates a pop-up window that contains whatever message you want. This behavior can be useful to relay important information about your site to your visitors (although they may get confused and think that the warning is coming from their computer system, not your site).

Preload Images: Ensures that all required images have been downloaded for the user when you're using other behaviors to control the display of images in your web page (for example, in the case of rollovers). This behavior prevents disruptions as visitors are using your site.

Set Nav Bar Image: Controls the display of a selected button in a navigation bar as well as the display of the other buttons.

Set Text of Frame: Dynamically replaces the content of a frame with new code that you specify in the behavior's dialog box. Any vali88 code will work. Whenever the action is triggered, the frame's content is replaced with the code you set.

Set Text of Layer: Works just like Set Text of Frame, but dynamically replaces the contents of a layer with new code that you specify.

Set Text of Status Bar: Sets a scrolling message on the status bar of the visitor's web browser. Often, however, experienced web surfers rely on the status bar to display hyperlink destinations before they decide to click them.

Set Text of Text Field: Similar to Set Text of Frame and Set Text of Layer, except only text (and no104 code) can be used. This behavior can be used to show an example of how a particular text field must be filled outfor example, a date field that should appear as mm/dd/yy.

Show Pop-Up Menu: Creates pop-up menus on your page. When Show Pop-Up Menu is used, the Hide Pop-Up Menu behavior is automatically inserted.

Show-Hide Layers: Allows you to control the visibility of layersand therefore their contentson your page. You can use this behavior to add a pop-up navigation system and messages that appear and disappear, for instance.

Swap Image: Allows you to create an image rollover that affects a selected image or other images on your page. The Swap Image Restore behavior is automatically inserted whenever Swap Image is used.

Swap Image Restore: Returns a rollover graphic to its original display.

Go to Timeline Frame: Jumps to a specific frame within the timeline animation.

Play Timeline: Plays a timeline that has been inserted on the current page.

Stop Timeline: Stops a timeline animation that is currently playing on your page.

Validate Form: Ensures that the visitor has filled in a web-based form correctly before it's submitted.

If you want to go beyond the 27 preset behaviors in Dreamweaver, you can search out more on the web. Start by visiting the Dreamweaver Exchange web site ([www.macromedia.com/cfusion/exchange/]). Choose Get More Behaviors at the bottom of the Add Behavior menu in the Behaviors panel. Your web browser will launch, and you'll be taken directly to Dreamweaver Exchange, where you can search for behaviors by type, learn about what's available, and download the necessary installation files.

Editing an Attached Behavior

You can edit your behaviors at any time in Dreamweaver. For example, you may want to change some of the parameters that you set in the behavior's dialog box. Or maybe you want to use a different rollover image, or tweak the size of a pop-up window. Or you may want to change the event that triggers a behavior's action. No problem at all.

You can edit your behaviors at any time in Dreamweaver.

Editing behaviors is downright easy! Here, a new rollover image is being set in the Swap Image dialog box. Use the Action menu or double-click your behavior's Event to get the party started!

[View full size image]

Here's how to edit a behavior:

Select a page object that has the behavior attached to it that you want to change.

The Behaviors panel will display the event and action that are attached to the object.

If you want the behavior to be triggered by a different event, click in the left column of the Behaviors panel. In the pull-down menu that appears, select a new event to trigger the action.

Remember that the events available in the pull-down menu are determined by the target browser that you're using. If the event you're looking for doesn't appear, try changing the target browser to a more recent version.

If you want to make a change to your action's parameters, double-click the action in the right column of the Behaviors panel. In the action's dialog box that appears, make any changes to the parameters that you previously set; then click OK.

If you want to remove the behavior entirely, select it in the Behaviors panel and click the Remove Event button at the top of the panel.

Ten Ton Dreamweaver [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی