Dreamweaver MX 2004 Bible phần 5 ppt

Here’s the browser compatibility chart for the Show Pop-up Menu behavior: Go to URL Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01 Macintosh Fails without error Fails without

Trang 2

Using Behaviors

Behaviors are truly the power tools of Dreamweaver WithDreamweaver behaviors, any Web designer can make layersappear and disappear, execute any number of rollovers, or control

a Shockwave movie — all without knowing even a snippet ofJavaScript In the hands of an accomplished JavaScript programmer,Dreamweaver behaviors can be customized or created from scratch

to automate the most difficult Web effect

Creating behaviors is one of the more challenging Dreamweaverfeatures to master; you tackle it in Chapter 34 Implementing thesegems, however, is a piece of cake This chapter examines the con-cepts behind behaviors and the reality of using them It details theuse of all the behaviors included with Dreamweaver, as well as somefrom notable third-party sources This chapter also contains tips

on managing your ever-increasing library of behaviors

Here’s a guarantee for you: After you get the hang of usingDreamweaver behaviors, your Web pages will never be the same

Understanding Behaviors, Events, and Actions

A behavior, in Macromedia parlance, is the combination of an event

and an action In the electronic age, one pushes a button (the event),and something (the action) occurs — such as changing the channel

on the TV with your remote In Dreamweaver, events can be thing as interactive as a user’s click of a link or as automatic as the

some-loading of a Web page Behaviors are said to be attached to a specific

element on your page, whether it’s a text link, an image, or even the

<body>tag

Dreamweaver has simplified the process of working with behaviors

by including default events in every object on the Web page Instead

of having to think about both how you want to do something and what you want to do, you only have to focus on the what — the action.

To understand the concept of behaviors and how they are structured,examine the four essential steps for adding a behavior to yourWeb page:

1 Pick a tag All behaviors are connected to a specific HTML

element (tag) You can attach a behavior to everything fromthe <body>, to an <a> tag, to the <textarea> of a form, and

so on If a certain behavior is unavailable, it’s because thenecessary element isn’t present on the page

12C H A P T E R

In This Chapter

Behavior basicsAdding a behavior’sevent and actionLooking at the standardbehaviors

Trang 3

2 Choose your target browser Different browsers — and the various browser versions —

support different events Dreamweaver enables you to choose either a specific browser,such as Internet Explorer 6, or a browser range, such as version 4 and higher browsers

3 Select an action Dreamweaver enables only those actions available to the specific

ele-ments on your page You can’t, for instance, choose the Show-Hide Layer action untilyou insert one or more layers Behaviors guide you to the workable options

4 Enter the parameters Behaviors get their power from their flexibility Each action

comes with its own dialog box that contains parameters you can use to customize theJavaScript code output Depending on the action, you can choose source files, setattributes, and enable/disable features The parameter dialog box can even dynami-cally update to reflect your current Web page

Dreamweaver MX 2004 comes with 24 cross-browser–compatible actions, and bothMacromedia and third-party developers have made many additional actions available, witheven more in the works Behaviors greatly extend the range of possibilities for the modernWeb designer — with no requirement to learn JavaScript programming All you need to knowabout attaching behaviors is presented in the following section

Dreamweaver supports two main types of behaviors: client-side and server-side Client-sidebehaviors, consisting of JavaScript and HTML, are the focus of this chapter Server-sidebehaviors are covered in Chapter 35

Attaching a Behavior

When you see the code generated by Dreamweaver, you understand why setting up a

behav-ior is also referred to as attaching a behavbehav-ior As previously noted, Dreamweaver needs a

specific HTML tag to assign the behavior (Step 1) The anchor tag <a> is often used because,

in JavaScript, links can respond to several different events, including onClick Here’s anexample:

You’re not restricted to one event per tag or even one action per event Multiple events can

be associated with a tag to handle various user actions For example, you may have an imagethat does all the following things:

✦ Highlights when the user’s pointer moves over the image

✦ Reveals a hidden layer in another area of the page when the user clicks the mouse ton on the image

but-✦ Makes a sound when the user releases the mouse button on the image

✦ Starts a Flash movie when the user’s pointer moves away from the imageLikewise, a single event can trigger several actions Updating multiple frames through a singlelink used to be difficult — but no more Dreamweaver makes it easy by enabling you to attachseveral Go to URL actions to the same event, onClick In addition, you are not restricted toattaching multiple instances of the same action to a single event For example, in a site thatuses a lot of multimedia, you can tie all the following actions to a single onClick event:

Cross-Reference

Trang 4

✦ Begin playing an audio file (with the Play Sound action)

✦ Move a layer across the screen (with the Play Timeline action)

✦ Display a second graphic in place of the first (with the Swap Image action)

✦ Show the copyright information for the audio piece in the status bar (with the Set Text

of Status Bar action)You can even determine the order of execution for the actions connected to a single event

With Dreamweaver behaviors, hours of complex JavaScript coding are reduced to a handful

of mouse clicks and a minimum of data entry All behavior assigning and modification arehandled through the Behaviors panel

Using the Behaviors panel

The Behaviors panel provides two columns (see Figure 12-1) that neatly sum up the iors concept in general: events and actions After you attach a behavior, the triggering event(onClick, onMouseOver, and so on) is shown on the left, and its associated action — whatexactly is triggered — is on the right A down arrow between the event and action, whenclicked, displays other available events for the current browser model Double-click theaction to open its parameter dialog box, where you can modify the action’s attributes

behav-Figure 12-1: You can handle everything about a behavior through the

Behaviors panel

Add (+) DownRemove (-) Up

Events column Actions column

Parameter dialog boxfor Swap Image behavior

Trang 5

As usual in Dreamweaver, you have your choice of methods for opening the Behaviors panel:

✦ Choose Window ➪ Behaviors

✦ Select the Behaviors tab from the Tag Inspector panel, if visible

✦ Use the keyboard shortcut Shift+F3 (an on/off toggle)

The Behaviors panel can be closed by toggling it off with Shift+F3 or hidden along with allthe other panels by pressing F4

After you have attached a behavior to a tag and closed the associated action’s parameterdialog box, Dreamweaver writes the necessary HTML and JavaScript code into your docu-ment Because it contains functions that must be callable from anywhere in the document,the bulk of the JavaScript code is placed in the <head> section of the page; the code thatlinks selected tags to these functions is written in the <body> section A few actions, includ-ing Play Sound, place HTML code at the bottom of the <body> However, most of the code —there can be a lot of code to handle all the cross-browser contingencies — is placed between

Adding a behavior

The procedure for adding (or attaching) a behavior is simple As noted earlier, you can assignonly certain events to particular tags, and these options are further limited by the type ofbrowser used

Even in the latest browsers, key events such as onMouseDown, onMouseOver, andonMouseOutwork only with anchor tags To circumvent this limitation, Dreamweaver canenclose an element, such as <img>, with an anchor tag that links to nowhere —src=”javascript:;” Events that use the anchor tag in this fashion appear in parenthe-ses in the drop-down list of events

To add a behavior to an element in your Web page, follow these steps:

1 Select an object (element) in the Document window.

If you want to assign a behavior to the entire page, select the <body> tag from the TagSelector (below the Document window)

2 Open the Behaviors panel by choosing Window ➪ Behaviors or by pressing Shift+F3.

3 Click the Add (+) button to reveal the available options, as shown in Figure 12-2 Select

one from the drop-down list

4 Enter the desired values in the action’s parameter dialog box.

5 Click OK to close the dialog box when you’re finished Dreamweaver adds a line to the

Behaviors panel displaying the attached event and its associated action

In our On/Off rollover image example, Dreamweaver adds two lines to the Behaviors panel,Swap Image and Swap Image Restore, because the Restore Images onMouseOut option wasselected in the Swap Image parameter dialog box

Note

Tip Note Tip

Trang 6

Figure 12-2: The Add (+) drop-down list

changes according to what’s on the currentpage and which tag is selected

A trigger — whether it’s an image or a text link — may have multiple behaviors attached to it

One graphical navigation element can, for instance, perform a Swap Image when the user’smouse moves over it, a Swap Image Restore when the mouse moves away, and, when clicked,show another Web page in an additional, smaller window with the Open Browser Windowbehavior

Dreamweaver includes a Get More Behaviors menu option at the bottom of the Add (+)drop-down list To use this feature, connect to the Internet and then select Get MoreBehaviors in Dreamweaver You are whisked away to the Dreamweaver Exchange, a servicefrom Macromedia with a huge selection of extensions of all flavors, including behaviors

The entries look like this:

The default event for each tag is marked with an asterisk; in the previous example, onBlur isthe default event After you’ve selected an action and completed its parameter dialog box, thedefault event appears in the Events column of the Behaviors panel alongside the action in theActions column

Tip

Trang 7

If you find yourself changing a particular tag’s default event over and over again to someother event, you might want to modify the appropriate Event file to pick your alternative asthe default To do this, open the relevant browser file found in the Dreamweaver MX 2004\Configuration\Behaviors\Events folder, switch to Code view, and move the asterisk to a dif-ferent event for that particular tag Resave the file and restart Dreamweaver to try out yournew default behavior.

If you don’t want to select the default event in a certain instance, you can easily chooseanother Choose a different event by selecting the down arrow next to the displayed event

in the Behaviors panel and then clicking the event you want in the drop-down list (seeFigure 12-3)

Figure 12-3: You can change the event by

selecting the Events arrow button

The browser model selected determines which events are available By default, 4.0 and LaterBrowsers is chosen To change browser models, select Show Events For from the Events listand then select one of the following:

✦ 3.0 and Later Browsers ✦ IE 5.5

✦ 4.0 and Later Browsers ✦ IE 6.0

Tip

Trang 8

The Dreamweaver MX 2004\Configuration\Behaviors\Events folder contains HTML filescorresponding to these 10 browser models offered in the Show Events For submenu Youcan open these files in Dreamweaver, but Macromedia asks that you not edit them — with

one exception Each file contains the list of tags that have supported event handlers (the

JavaScript term for events) in that browser The older the browser, the fewer event handlersare included — unfortunately, this also means that if you want to reach the broadest Internetaudience, your event options are limited In the broadest category, 3.0 and Later Browsers,only 13 different tags can receive any sort of event handler This is one of the reasons why,for example, Internet Explorer 3 can’t handle rollovers: The browser doesn’t understandwhat an onMouseOut event is, and so the image can’t revert to its original state

Listing 12-1 shows the event-handler definitions for the 3.0 and Later Browsers category:

Listing 12-1: The Event File for 3.0 and Later Browsers

By contrast, the Event file for Internet Explorer 6.0 shows support for every tag under theHTML sun — 94 in all — with almost every tag able to handle any type of event

Although any HTML tag could potentially be used to attach a behavior, the most commonlyused by far are the <body> tag (for entire-page events such as onLoad), the <img> tag(used as a button), and the link tag, <a>

To find the default event for a tag, simply select the tag in a document, use Add Actions

to attach any valid actions to it, and see what event appears alongside the action in theBehaviors panel To find the default event for a tag as used by a particular browser, specifythe browser in the Show Events For submenu of the Add (+) drop-down list, and thenproceed as described previously

Trang 9

The following sections describe each of the standard actions: what the action does, whatrequirements must be met for it to be activated, what options are available, and most impor-tant of all, how to use the action Each action is written to work with all browser versions 4and above; however, some actions do not work as designed in the older browsers Thecharts, included with every action, show the action’s compatibility with older browsers.(The information in these charts is adapted from the Dreamweaver Help pages and is usedwith permission.)

Call JavaScript

With Call JavaScript, you can execute any JavaScript function — standard or custom — with asingle mouse click or other event As your JavaScript-savvy grows, you’ll find yourself usingthis behavior again and again

Call JavaScript is straightforward to use; simply type in the JavaScript code or the name ofthe function you want to trigger into the dialog box If, for example, you want to get someinput from a visitor, you can use JavaScript’s built-in prompt() method like this:

result = prompt(‘Whom shall I say is calling?’,’’)When this code is triggered, a small dialog box appears with your query (here, ‘Whom shall

I say is calling?’) and a blank space for an input string The second argument inthe prompt() method enables you to include a default answer — to leave it blank, just use

Triggering Custom Functions

Although the standard behaviors can accomplish a great deal — and extensions available fromthe Macromedia Exchange can do even more — sometimes a developer needs to trigger a customfunction Dreamweaver provides a way to link an event to a function quickly, right in theBehaviors panel The action column of the Behaviors panel not only displays behaviors applied inthe usual manner, but it is also editable In other words, you can enter your own function calldirectly into the Behaviors panel, and Dreamweaver writes the code into the tag

Here’s how it works Suppose you want to trigger a custom JavaScript function calledshowTotal()whenever the user clicks a special graphic:

1 Select the image, and in the Link field of the Property inspector, enter javascript:;.

2 In the Behaviors panel, click the Event column and choose an event from the drop-down

list In this case, you select onClick

3 Enter the custom function call and any arguments in the Action column The function

might be entered like this: showTotal(‘checkout’,’USD’), where the two arguments are

presented in a comma-separated list, using single quotes

4 Press Tab to confirm the code entry.

If you check the <a> surrounding the image, you find that Dreamweaver has now added the lowing to the tag: onClick=”showTotal(‘checkout’,’USD’)”

fol-The function call or arguments can include dynamic components; a lightning bolt symbol thatopens the Dynamic Data dialog is available from the Action column Moreover, you can combineyour custom function call with other standard behaviors To remove the code, select the customentry and click Remove (–), just as you would for a regular behavior

Trang 10

an empty string (two single quotes with nothing in between), as shown in the precedingcode snippet.

You can use either single or double quotes in your Call JavaScript behavior; Dreamweaverautomatically adjusts for whichever you choose I find it easier to use single quotes becauseDreamweaver translates double quotes into character entities; that is, “ becomes "

Naturally, you can use Call JavaScript to handle more complex chores as well To call a cific custom function that is already in the <head> section of your page, just enter its name —along with any necessary arguments — in the Call JavaScript dialog box, shown in Figure 12-4

spe-Figure 12-4: Trigger any JavaScript function by attaching

a Call JavaScript behavior to an image or text

To use the Call JavaScript behavior, follow these steps:

1 Select the object to trigger the action.

2 From the Behaviors panel, click the Add (+) button and then select Call JavaScript.

3 In the Call JavaScript dialog box, enter your code in the JavaScript text box.

4 Click OK when you’re finished.

The following charts detail action behaviors for both newer and older browsers The phrase

“Fails without error” means that the action won’t work in the older browser, but neither does

it generate an error message for the user to see When the table indicates “error,” it means

that the action won’t work and does generate a visible error message.

Here’s the browser compatibility chart for the Call JavaScript behavior:

Call JavaScript Netscape 3.0 Internet Explorer 3.0x Internet Explorer 3.01

Macintosh Okay Fails without error

Trang 11

Figure 12-5: The Change Property dialog box enables you

to alter attributes of certain tags dynamically

It’s important that you name the objects you want to alter so that Dreamweaver can properlyidentify them Remember to use unique names that begin with a letter and contain nospaces or special characters

This behavior is especially useful for changing the properties of forms and form elements Besure to name the form if you want to use Change Property in this manner To use the ChangeProperty action, follow these steps:

2 From the Behaviors panel, click the Add (+) button and then select Change Property.

3 In the Change Property dialog box, choose the type of object whose property you

want to change — FORM, DIV, INPUT/TEXT, and so on — from the Type of Object down list

drop-4 In the Named Object drop-down list, select the name of the object whose property you

want to change

Caution

Trang 12

5 Click the Select radio button Select the target browser in the small list box on the far

right and then choose the property to change If you don’t find the property in thedrop-down list box, you can type it yourself in the Enter text box

Many properties in the various browsers are read-only and cannot be dynamically altered

Those properties listed in the option list are always dynamic

6 In the New Value text box, type the property’s new value to be inserted when the event

is fired

Here’s the browser compatibility chart for the Change Property behavior:

Change Property Netscape 3.0 Internet Explorer 3.0x Internet Explorer 3.01

Check Browser

Some Web sites are increasingly split into multilevel versions of themselves to gracefully dle the variety of browsers in operation The Check Browser action acts as a type of browser

han-router capable of sending browsers to appropriate URLs or just letting them stay on the

cur-rent page The Check Browser action is generally assigned to the <body> tag and uses theonLoadevent If the Check Browser behavior is used in this fashion, it’s a good idea to keepthe basic page accessible to all browsers, even those with JavaScript disabled

The Check Browser parameter dialog box (see Figure 12-6) is quite flexible and enables you

to specify decimal version numbers for the two main browsers For instance, you may want

to let all users of Navigator 4.04 or later stay on the current page and send everyone else to

an alternative URL The URLs can be either relative, such as dreamweaver/index.htm,

or absolute, such as http://www.idest.com/dreamweaver/index.htm

Figure 12-6: The Check Browser action is a great tool for

segregating old and new browsers

Note

Trang 13

To use the Check Browser action, follow these steps:

2 From the Behaviors panel, click the Add (+) button and then select Check Browser.

3 Use the Check Browser parameter fields to specify the Netscape Navigator and Internet

Explorer versions and whether you want the browser to stay on the current page, go toanother URL, or proceed to a third alternative URL

With both major browsers, you can specify the URL that the lower version numbers shouldvisit

4 Set the same options for all other browsers, such as Opera.

5 Enter the URL and alternative URL options in their respective text boxes; or click the

Browse button to locate the files

Here’s the browser compatibility chart for the Check Browser behavior:

Check Browser Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Check Plugin

If certain pages on your Web site require the use of one or more plug-ins, you can use theCheck Plugin action to see if a visitor has the necessary plugin installed After Check Pluginhas examined this, it can route users with the appropriate plugin to one URL and users with-out it to another URL You can look for only one plugin at a time, but you can use multipleinstances of the Check Plugin action, if needed

By default, the parameter dialog box for Check Plugin (see Figure 12-7) offers five plugins:Flash, Shockwave, LiveAudio, QuickTime, and Windows Media Player You can check for anyother plugin by entering its name in the Enter text box Use the name exactly as it appears inbold (without the version number) in Netscape’s About Plug-ins area; for example:

QuickTime Plug-inor Shockwave Flash

Figure 12-7: Running a media-intensive site? Use the Check Plugin action

to divert visitors without plugins to alternative pages

Note

Trang 14

One very unfortunate hitch: Internet Explorer is pretty much crippled with respect to browser plugin detection In Windows, Internet Explorer can only detect Flash and Shockwaveplugins And on Macintosh platforms, Internet Explorer cannot detect any plugins at all Thebest way to handle both browsers is to use both ActiveX controls and plugins.

cross-If you use a particular plugin regularly, you may also want to modify the Check Plugin.js filefound in your Actions folder Add your new plugin to the PLUGIN_NAMES array (this holds

“nice” plugin names as they appear in the parameter dialog box) and PLUGIN_VALUES array(this holds “internal” plugin names, as they appear in Netscape’s About Plug-ins) in theinitGlobals()function

Another method for determining whether a plugin or other player is available is to use theCheck MIME action included on the CD-ROM that accompanies this book This action works

in the same way as the Check Plug-in action, except you enter the MIME type

To use the Check Plugin action, follow these steps:

2 From the Behaviors panel, click the Add (+) button and then select Check Browser.

3 Select a plugin from the drop-down list or, alternatively, type another plugin name in

the Enter text box

The names presented in the drop-down list are abbreviated — more recognizable names —and not the formal names inserted into the code For example, when you select Shockwave,Shockwave for Directoris actually input into the code On the other hand, any pluginname you enter manually into the Enter field is inserted verbatim

4 If you want to send users who are confirmed to have the plugin to a different page,

enter that URL (absolute or relative) in the If Found, Go To URL text box or use theBrowse button to locate the file If you want these users to stay on the current page,leave the text box empty

5 In the Otherwise, Go To URL text box, enter the URL for users who do not have the

required plugin

6 Should the plugin detection fail — which, as explained above, will happen regularly for

Internet Explorer, whether or not the plugin is actually present — you can keep the user

on the initial page To do so, enable the Always Go to First URL if Detection Is NotPossible option Otherwise, if the detection fails for any reason, users are sent to theURL listed in the Otherwise field

Here’s the browser compatibility chart for the Check Plugin behavior:

Check Browser Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Note

On the CD-ROM Tip

Trang 15

Control Shockwave or Flash

The Control Shockwave or Flash action enables you to command your Shockwave and Flashmovies through external controls With Control Shockwave or Flash, you can build your owninterface for your Shockwave or Flash movie This action can be used in conjunction with theautostart=trueattribute (entered through the Property inspector’s parameter dialog boxfor the Shockwave or Flash file) to enable a replaying of the movie

You must have a Shockwave or Flash movie inserted in your Web page for the ControlShockwave or Flash action to be available The parameter dialog box for this action (seeFigure 12-8) lists by name all the Shockwave or Flash movies that are found in either an

to attach a second Control Shockwave or Flash action to the same event to play the file

Figure 12-8: Build your own interface and then control

a Shockwave and Flash movie externally with the Control Shockwave or Flash action

Be sure to name your Shockwave or Flash movie Otherwise, the Control Shockwave or Flashaction lists both unnamed <embed> and unnamed <object> for each file, and you cannotwrite to both tags as you can with a named movie

To use the Control Shockwave or Flash action, follow these steps:

2 From the Behaviors panel, click the Add (+) button and then select Control Shockwave

or Flash

3 In the Control Shockwave or Flash dialog box, select a movie from the Movie

drop-down list

4 Select a control by clicking its button:

• Play: Begins playing the movie at the current frame location.

• Stop: Stops playing the movie.

• Rewind: Returns the movie to its first frame.

• Go to Frame: Displays a specific frame in the movie If you choose this option,

you must enter a frame number in the text box

5 Select OK when you’re finished.

Tip

Trang 16

Here’s the browser compatibility chart for the Control Shockwave or Flash behavior:

Control Shockwave Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

or Flash

Drag Layer

The Drag Layer action provides some spectacular — and interactive — effects with little effort

on the part of the designer Drag Layer enables your Web page visitors to move layers — andall that they contain — around the screen with the drag-and-drop technique With the DragLayer action, you can easily set up the following capabilities for the user:

✦ Enabling layers to be dragged anywhere on the screen

✦ Restricting the dragging to a particular direction or combination of directions — a zontal sliding layer can be restricted to left and right movement, for instance

hori-✦ Limiting the drag handle to a portion of the layer such as the upper bar or enabling thewhole layer to be used

✦ Providing an alternative clipping method by enabling only a portion of the layer to bedragged

✦ Enabling changing of the layers’ stacking order while dragging or on mouse release

✦ Setting a snap-to target area on your Web page for layers that the user releases within adefined radius

✦ Programming a JavaScript command to be executed when the snap-to target is hit orevery time the layer is released

Layers are one of the more powerful features of Dreamweaver To get the most out of thelayer-oriented behaviors, familiarize yourself with layers by examining Chapter 11

One or more layers must reside in your Web page before the Drag Layer action becomesavailable for selection from the Add (+) drop-down list You must attach the action to the

<body>— you can, however, attach separate Drag Layer behaviors to different layers to getdifferent layer-dragging effects

Drag Layer’s parameter dialog box (see Figure 12-9) includes a Get Current Position buttonthat puts the left and top coordinates of the selected layer into the Drop Target Left/Topboxes If you plan on using targeting, make sure to place your layer at the target location

before attaching the behavior.

Cross-Reference

Trang 17

Figure 12-9: With the Drag Layer action, you can set up your layers

to be repositioned by the user

To use the Drag Layer action, follow these steps:

1 Make sure that you have one or more layers on your page; then select the <body> tag.

2 From the Behaviors panel, click the Add (+) button and select Drag Layer.

3 If the Basic tab of the parameter dialog box is not selected, select it now.

4 In the Layer drop-down list, select the layer you want to make draggable.

5 To limit the movement of the layer, change the Movement option from Unconstrained

to Constrained Text boxes for Up, Down, Left, and Right appear Enter pixel values inthe text boxes to control the range of motion:

• To constrain movement vertically, enter positive numbers in the Up and Downtext boxes and zeros in the Left and Right text boxes

• To constrain movement horizontally, enter positive numbers in the Left and Righttext boxes and zeros in the Up and Down text boxes

• To enable movement in a rectangular region, enter positive values in all four textboxes

6 To establish a location for a target for the dragged layer, enter coordinates in the Drop

Target: Left and Top text boxes Select the Get Current Position button to fill these textboxes with the layer’s current location

7 To set a snap-to area around the target coordinates where the layer falls if released in

the target location, enter a pixel value in the Snap If Within text box

8 For additional options, select the Advanced tab of the parameter dialog box.

9 If you want the whole layer to act as a drag handle, select Entire Layer from the Drag

Handle drop-down list If, instead, you want to limit the area to be used as a drag handle,select Area Within Layer from the Drag Handle drop-down list L(eft), T(op), W(idth),and H(eight) text boxes appear In the appropriate boxes, enter the left and top coordi-nates of the drag handle in pixels, as well as the dimensions for the width and height

10 To control the positioning of the dragged layer, set the following While Dragging options:

• To keep the layer in its current depth (that is, to avoid bringing it to the frontwhen it is dragged), deselect the checkbox for While Dragging: Bring Layer tothe Front

• To change the stacking order of the layer when it is released, select the checkboxand then pick either Leave on Top or Restore z-index from the drop-down list

Trang 18

11 To execute a JavaScript command while the layer is being dragged, enter the command

or function in the Call JavaScript text box

12 To execute a JavaScript command when the layer is dropped on the target, enter

the code in the When Dropped: Call JavaScript text box If you want the JavaScript toexecute only when the layer is snapped to its target, select the Only If Snapped option

This option requires that a value be entered in the Snap If Within text box in theBasic tab

If you — or someone on your team — has the requisite JavaScript programming skills, you cangather information output from the Drag Layer behavior to enhance your pages

Dreamweaver declares three variables for each draggable layer: MM_UPDOWN (the y nate), MM_LEFTRIGHT (the x coordinate), and MM_SNAPPED (true, if the layer has reached

coordi-the specified target) Before you can get any of coordi-these properties, you must get an object

ref-erence for the proper layer Another function, MM_findObj(layername), handles this

chore

Here’s the browser compatibility chart for the Drag Layer behavior:

Drag Layer Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Macintosh Fails without error Fails without error

Figure 12-10: You can update two or more frames at the

same time with the Go to URL action

Note

Trang 19

To use the Go to URL action, follow these steps:

2 From the Behaviors panel, click the Add (+) button and then select Go to URL.

3 From the Go To URL dialog box, select the target for your link from the list in the Open

In window

4 Enter the path of the file to open in the URL text box or click the Browse button to

locate a file An asterisk appears next to the frame name to indicate that a URL hasbeen chosen

5 To select another target to load a different URL, repeat Steps 3 and 4.

Here’s the browser compatibility chart for the Go to URL behavior:

Go to URL Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Show Pop-Up Menu and Hide Pop-Up Menu

New to the built-in Dreamweaver MX 2004 behavior set is the powerful Show Pop-Up Menu/Hide Pop-Up Menu duo With the greatest of ease, you can use these behaviors to create aDHTML-style pop-up menu A user mouses over a navigational link and, lo and behold, downpops a lovely menu with a set of context-sensitive sublinks When the user mouses away, thepop-up menu disappears

To use the Show Pop-Up Menu and Hide Pop-Up Menu actions to create a pop-up menu, form these steps:

per-1 Select the object to trigger the action.

2 From the Behaviors panel, click the Add (+) button and then select Show Pop-Up Menu.

3 The Show Pop-Up Menu dialog box that appears comprises four tabs: Contents,

Appearance, Advanced, and Position, as shown in Figure 12-11

4 Use the Contents tab to set the name (Text field), structure (Outdent/Indent Item and

Move Item Up/Down buttons), URL (Link field), and target (_blank, _parent, _top, _or_self) of the items to appear in the pop-up menu

5 Use the Appearance tab to set the orientation of the pop-up menu (Vertical or

Horizontal) You can also use it to set various properties of the font used for the menuitems and for their Up State and Over State colors

6 Use the Advanced tab to set various properties of the menu cells, including size,

spac-ing, color, text indent, border width, and delay before the menu appears after the ger object is moused over

trig-7 Use the Position tab to set where the menu appears relative to the trigger object.

Trang 20

Figure 12-11: You can easily create a sophisticated DHTML-style pop-up menu using the

Show Pop-Up Menu behavior

8 Click OK when you’re finished After you’ve successfully attached a Show Pop-Up Menu

action to an object, Dreamweaver automatically attaches a Hide Pop-Up Menu item to it

Here’s the browser compatibility chart for the Show Pop-up Menu behavior:

Go to URL Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Jump Menu and Jump Menu Go

Although most behaviors insert original code to activate an element of the Web page, severalbehaviors are included to edit code inserted by a Dreamweaver object The Jump Menu andJump Menu Go behaviors both require a previously inserted Jump Menu object before theybecome active The Jump Menu behavior is used to edit an existing Jump Menu object,whereas the Jump Menu Go behavior adds a graphic image as a Go button

To find out more about the Jump Menu object, see Chapter 14

Cross-Reference

Trang 21

To use the Jump Menu behavior to edit an existing Jump Menu object, follow these steps:

1 Select the Jump Menu object previously inserted into the page.

2 In the Behaviors panel, double-click the listed Jump Menu behavior.

3 Make your modifications in the Jump Menu dialog box, as shown in Figure 12-12 You

can alter the existing menu item names or their associated URLs, add new menu items,

or reorder the list through the Jump Menu dialog box

Figure 12-12: Use the Jump Menu behavior to modify a

previously inserted Jump Menu object

To add a button to activate the Jump Menu object, follow these steps:

1 Select the image or form button you’d like to make into a Go button A Jump Menu

object must be on the current page for the Jump Menu Go behavior to be available

2 From the Behaviors panel, select Jump Menu Go from the Add (+) drop-down list The

Jump Menu Go dialog box, shown in Figure 12-13, is displayed

Figure 12-13: Add a graphic or standard button as a

Go button with the Jump Menu Go behavior

3 Select the name of the Jump Menu object you want to activate from the option list.

Trang 22

Here’s the browser compatibility chart for both Jump Menu behaviors:

Jump Menu and Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01 Jump Menu Go

Open Browser Window

Want to display your latest design in a borderless, nonresizable browser window that’sexactly the size of your image? With the Open Browser Window action, you can open a newbrowser window and specify its exact size and attributes You can even set it up to receiveJavaScript events

You can also open a new browser window with a regular link by specifying target=”_blank”,but you can’t control any of the window’s attributes with this method You do get this controlwith the parameter dialog box of the Open Browser Window action (see Figure 12-14) Thisdialog enables you to set the window width and height and select whether to display theNavigation Toolbar, Location Toolbar, Status Bar, Menu Bar, Scrollbars as Needed, and/orResize Handles You can also name your new window, a necessary step for advancedJavaScript control

Figure 12-14: Use the Open Browser Window action to

program a pop-up advertisement or remote control

You have to explicitly select any of the attributes that you want to appear in your new dow Your new browser window contains only the attributes you’ve checked, plus basic win-dow elements such as a title bar and a Close button

win-To use the Open Browser Window action, follow these steps:

2 From the Behaviors panel, click the Add (+) button and then select Open Browser

Window

3 In the URL to Display text box, enter the address of the Web page you want to display

in the new window You can also click the Browse button to locate the file

4 To specify the window’s size, enter the width and height values in the appropriate text

boxes You must enter both a width and height measurement, or the new browser

win-dow opens to its default size

Trang 23

5 Check the appropriate Attributes checkboxes to show the desired window features.

6 If you plan on using JavaScript to address or control the window, type a unique name in

the Window Name text box This name cannot contain spaces or special characters.Dreamweaver alerts you if the name you’ve entered is unacceptable

Here’s the browser compatibility chart for the Open Browser Window behavior:

Open Browser Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01 Window

Play Sound

The Play Sound action is used to add external controls to an audio file that normally uses theNetscape LiveAudio plugin or the Windows Media Player Supported audio file types includeWAV, MID, AU, and AIFF files The Play Sound action — which is generally used to add invisiblebackground music to a page — inserts an <embed> tag with the following attributes:

Figure 12-15: Give your Web page background music and

control it with the Play Sound action

Dreamweaver can detect if a visitor’s browser has the Windows Media Player installed and, if

so, it issues the appropriate commands

Note

Trang 24

To use the Play Sound action, follow these steps:

2 From the Behaviors panel, click the Add (+) button and then select Play Sound.

3 To play a sound, enter the path to the audio file in the Play Sound text box or click the

Browse button to locate the file

Here’s the browser compatibility chart for the Play Sound behavior:

Play Sound Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Popup Message

You can send a quick message to your users with the Popup Message behavior When gered, this action opens a JavaScript alert box that displays your specified message Youenter your message in the Message text box on the action’s parameter dialog box (seeFigure 12-16)

trig-Figure 12-16: Send a message to your users with the

Popup Message action

To use the Popup Message action, follow these steps:

2 From the Behaviors panel, click the Add (+) button and then select Popup Message.

3 Enter your text in the Message text box.

You can include JavaScript functions or references in your text messages by surrounding theJavaScript with curly braces For example, you can incorporate today’s date in a message likethis:

Welcome to our site on {new Date()}!

Tip

Trang 25

You could also pull data from a form into your alert-box message, as in this example:

Thanks for filling out our survey,{document.surveyForm.firstname.value}

If you need to display a curly brace in a message, you must precede it with a backslash acter, as in \{ or \}

char-Here’s the browser compatibility chart for the Popup Message behavior:

Popup Message Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Preload Images

Designs commonly require a particular image or several images to be displayed immediatelywhen called by an action or a timeline Because of the nature of HTML, all graphics are sepa-rate files that are normally downloaded when needed To get the snappy response requiredfor certain designs, graphics need to be preloaded or cached so that they are available ThePreload Images action performs this important service You designate the images you want tocache for later use through the Preload Images parameter dialog box (see Figure 12-17)

Figure 12-17: Media-rich Web sites respond much faster when

images have been cached with the Preload Images action

You don’t need to use the Preload Images action if you’re creating rollovers Both theRollover object and the Swap Image action enable you to preload images from their dialogboxes

To use the Preload Images action, follow these steps:

2 From the Behaviors panel, click the Add (+) button and then select Preload Images.

3 In the Preload Images parameter dialog box, enter the path to the image file in the

Image Source File text box, or click the Browse button to locate the file

4 To add another file, click the Add (+) button and repeat Step 2.

Note

Trang 26

After you’ve specified your first file to be preloaded, be sure to click the Add (+) button foreach successive file you want to add to the list Otherwise, the highlighted file is replaced bythe next entry.

5 To remove a file from the Preload Images list, select it and then click the Remove (–)

button

Here’s the browser compatibility chart for the Preload Images behavior:

Preload Images Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Set Nav Bar Image

The Set Nav Bar Image action, like the Jump Menu actions, enables you to edit an existingDreamweaver object, the Navigation Bar object This object, inserted from the Common panel

of the Insert bar, consists of a series of user-specified images acting as a group of navigationalbuttons The Set Nav Bar Image action enables you to modify the current Navigation Barobject by adding, reordering, or deleting images as buttons, as well as by setting up advancedrollover techniques In fact, you can think of the Set Nav Bar Image action as a super-duperSwap Image behavior

To refresh your memory about the capabilities of the Navigation Bar object, see Chapter 9

The main aspect that sets a navigation bar apart from any other similar series of rolloverimages is that the navigation bar elements relate to one another When you select one element

of a navigation bar, by default, all the other elements are swapped to their up state The SetNav Bar Image action enables you to modify that default behavior to a rollover in anotherarea or any other image swap desired You can also use Set Nav Bar Image to include anotherimage button in the navigation bar

To modify an existing Navigation Bar object, follow these steps:

1 Choose any image in the Navigation Bar object.

2 From the Behaviors panel, double-click any of the Set Nav Bar Image actions displayed

for the image The same Set Nav Bar Image dialog box (see Figure 12-18) opens less of whether you select an action associated with the onClick, onMouseOver, oronMouseOutevent

regard-3 Make any desired edits — changing the Up, Over, Down, or Over While Down state

images or their respective URLs or targets — from the Basic column of the dialog box

4 To change any other images that interact with the current image, select the

Advanced tab

Cross-Reference

Caution

Trang 27

Figure 12-18: Modify an existing Navigation Bar object through the Set Nav

Bar Image action

5 From the drop-down list in the Advanced category, choose the state for which you want

to trigger changes:

• Over Image or Over While Down Image

• Down Image

6 Select the image you wish to change from the Also Set Image list Dreamweaver lists all

the named images on the current page, not just those in the navigation bar

7 Select the path of the new image to be displayed in the To Image File text field An

asterisk appears after the current image in the list box, signifying that a swap image hasbeen chosen

8 If you choose Over Image or Over While Down Image as the triggering event, an

optional field, If Down, To Image File enables you to specify another graphic to swap forthe image of the down-state image

9 To alter other images with the same triggering event, repeat Steps 6 through 8.

Only one Navigation Bar object can exist on a page

Here’s the browser compatibility chart for the Set Nav Bar Image behavior:

Set Nav Bar Image Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Note

Trang 28

Set Text of Frame

Dreamweaver has grouped together four similar behaviors under the Set Text heading Thefirst of these, Set Text of Frame, enables you to do much more than change a word or two —you can dynamically rewrite the entire code for any frame You can even incorporateJavaScript functions or interactive information into the new frame content

The Set Text of Frame action replaces all the contents of the <body> tag of a frame

Dreamweaver supplies a handy Get Current HTML button that enables you to easily keepeverything you want to retain and change only a heading or other element Naturally, youmust be within a frameset to use this behavior, and the frames must be named correctly —that is, uniquely without special characters or spaces

To change the content of a frame dynamically, follow these steps:

1 Select the triggering object.

2 From the Behaviors panel, click the Add (+) button and then choose Set Text ➪ Set Text

of Frame The Set Text of Frame dialog box opens, as shown in Figure 12-19

Figure 12-19: The Set Text of Frame behavior enables you

to interactively update the contents of any frame in the current frameset

3 Choose the frame you want to alter from the Frame drop-down list.

4 Enter the code for the changing frame in the New HTML text area Keep in mind that

you’re changing not just a word or phrase, but all the HTML contained in the <body>

section of the frame

With all four Set Text behaviors, you can include JavaScript code by enclosing it in curlybraces: { .}

5 If you want to keep the majority of the code, click the Get Current HTML button and

change only those portions necessary

6 To maintain the frames <body> attributes, such as the background and text colors,

select the Preserve Background Color option If this option is not selected, the framesbackground and text colors are replaced by the default values (a white background andblack text)

Tip

Trang 29

Here’s the browser compatibility chart for the Set Text of Frame behavior:

Set Text of Frame Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Set Text of Layer

The Set Text of Layer behavior is similar to the previously described Set Text of Frame ior in that it replaces the entire HTML contents of the target The major difference, of course,

behav-is that with one behavior, you’re replacing the code of a layer; with the other behavior, you’rereplacing the code of the frame’s <body>

Unlike Set Text of Frame, Set Text of Layer provides no button for getting the current HTML.Here’s a workaround Before invoking the behavior, select and copy all the elements insidethe layer Because Dreamweaver copies tags, as well as text, in the Document window, youcan just paste the clipboard into the New HTML text area Be careful not to select the layertag, <div>, or the layer’s contents — if you do, you are pasting a layer in a layer

To set the text of a layer dynamically, follow these steps:

1 Make sure that the layer you want to change has been created and named properly.

of Layer from the option list The Set Text of Layer dialog box opens, as shown in Figure12-20

Figure 12-20: Replace all the HTML in a layer with the

Set Text of Layer behavior

4 Select the layer to modify from the Layer drop-down list.

5 Enter the replacement code in the New HTML text area.

Tip

Trang 30

Here’s the browser compatibility chart for the Set Text of Layer behavior:

Set Text of Layer Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Set Text of Status Bar

Use the Set Text of Status Bar action to display a text message in the browser’s status barbased on a user’s action, such as moving the pointer over an image The message stays dis-played in the status bar until another message replaces it System messages, such as URLs,tend to be temporary and visible only when the user’s mouse is over a link

The only limit to the length of the message is the size of the browser’s status bar; you shouldtest your message in various browsers to make sure that it is completely visible

To display a message only when a user’s pointer is over an image or link, use one Set Text ofStatus Bar action, attached to an onMouseOver event, with your desired status-bar message

Use another Set Text of Status Bar action, attached to an onMouseOut event, that has a nullstring (“ “) as the text

You enter all text in Message text box of the Set Text of Status Bar parameter dialog box (seeFigure 12-21)

Figure 12-21: Use the Set Text of Status Bar action to

guide your users with instructions in the browser window’s status bar

To use the Set Text of Status Bar action, follow these steps:

2 From the Behaviors panel, click the Add (+) button and then select Set Text of

Status Bar

3 Enter your text in the Message text box.

Tip

Trang 31

Here’s the browser compatibility chart for the Set Text of Status Bar behavior:

Set Text of Status Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01 Bar

Set Text of Text Field

The final Set Text behavior enables you to update any text or text area field, dynamically Atext field must be present on the page for the behavior to be available To change the dis-played text of a text or text area field, follow these steps:

of Text Field from the Add Action list The Set Text of Text Field dialog box is displayed,

as shown in Figure 12-22

Figure 12-22: Dynamically update text/text area form

elements with the Set Text of Text Field behavior

2 Select the desired text field from the drop-down list.

3 Enter the new text and/or JavaScript in the New Text area.

Here’s the browser compatibility chart for the Set Text of Text Field behavior:

Set Text of Text Field Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Show-Hide Layers

One of the key features of Dynamic HTML layers is their capability to appear and disappear

on command The Show-Hide Layers action gives you easy control over the visibility attribute

Trang 32

for all layers in the current Web page In addition to explicitly showing or hiding layers, thisaction can also restore layers to the default visibility setting.

The Show-Hide Layers action typically reveals one layer while concealing another; however,you are not restricted to hiding or showing just one layer at a time The action’s parameterdialog box (see Figure 12-23) shows you a list of all the layers in the current Web page fromwhich you can choose as many as you want to show or hide

Figure 12-23: The Show-Hide Layers action can make any

number of hidden layers visible, hide any number of visiblelayers, or both

To use the Show-Hide Layers action, follow these steps:

2 From the Behaviors panel, click the Add (+) button and then select Show-Hide Layer.

The Show-Hide Layers parameter dialog box displays a list of the available layers in thecurrent Web page

3 To show a hidden layer, select the layer from the Named Layers list and then click the

Show button

4 To hide a shown layer, select its name from the list, and click the Hide button.

5 To restore a layer’s default visibility value, select the layer and then click the Default

button

Here’s the browser compatibility chart for the Show-Hide Layers behavior:

Show-Hide Layers Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Swap Image and Swap Image Restore

Button rollovers are one of the most commonly used techniques in Web design today In atypical button rollover, a user’s pointer moves over one image, and the graphic appears tochange in some way, seeming to glow or change color Actually, the onMouseOver event trig-gers the almost instantaneous swapping of one image for another Dreamweaver automatesthis difficult coding task with the Swap Image action and its companion, the Swap ImageRestore action

Trang 33

In recognition of how rollovers most commonly work in the real world, Dreamweaver makes itpossible to combine Swap Image and Swap Image Restore in one easy operation — as well as

to preload all the images Moreover, you can use a link in one frame to trigger a rollover inanother frame without having to tweak the code as you did in earlier Dreamweaver versions.When the dialog box for the Swap Image action opens (see Figure 12-24), it automaticallyloads a list of all the image names it finds in the current Web page You select the image youwant to change — which could be the same image to which you are attaching the behavior —and specify the image file you want to replace with the rolled-over image You can swap morethan one image with each Swap Image action For example, if you want an entire submenu tochange when a user rolls over a particular option, you can use a single Swap Image action toswitch all the submenu button images

Figure 12-24: The Swap Image action is used primarily for

handling button rollovers

If you choose not to enable the Restore Images onMouseOut option, which changes the imageback to the original, you attach the Swap Image Restore action to another event The SwapImage Restore action can be used only after a Swap Image action No parameter dialog boxexists for the Swap Image Restore action — just a dialog box confirming your selection

If the in image has different dimensions than the image it replaces, the

swapped-in image is resized to the height and width of the first image

To use the Swap Image action, follow these steps:

2 From the Behaviors panel, click the Add (+) button and then select Swap Image.

3 In the Swap Image parameter dialog box, choose an available image from the

Images list

4 In the Set Source To text box, enter the path to the image that you want to swap You

can also click the Browse button to locate the file An asterisk appears at the end ofthe selected image name to indicate an alternative image has been selected

5 To swap additional images using the same event, repeat Steps 3 and 4.

6 To preload all images involved in the Swap Image action when the page loads, make

sure the Preload Images option is checked

Caution

Trang 34

7 To cause the selected images to revert to their original source when the user mouses

away from the selected object, make sure that the Restore Images onMouseOut option

is selected

Here’s the browser compatibility chart for the Swap Image and Swap Image Restorebehaviors:

Swap Image and Swap Image Restore Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Validate Form can be used to check either single or multiple text fields in a form If you attach

a Validate Form action to a single text box, you alert the user to any errors as he is filling outthis field To check multiple form fields, the Validate Form action must be attached to theform’s <form> tag

The Validate Form dialog box (see Figure 12-25) enables you to designate any text field asrequired, and you can evaluate its contents You can require the input of a text field to be anumber, an e-mail address (for instance, jdoe@anywhere.com), or a number within a range

The number range you specify can include positive whole numbers, negative numbers, ordecimals

Figure 12-25: The Validate Form action checks your form’s

entries client-side, without CGI programming

Trang 35

To use the Validate Form action, follow these steps:

1 Select the form object to trigger the action: a single text field or the <form> tag (use the

Tag Selector) for multiple text fields

2 From the Behaviors panel, click the Add (+) button and then select Validate Form.

3 If you are validating an entire form, select a text field from the Named Fields list If you

are validating a single field, the selected form object is chosen for you and appears inthe Named Fields list

4 To make the field required, select the Value: Required checkbox.

5 To set the kind of input expected, select one of the following Accept options:

• Anything: Accepts any input.

• Number: Enables any sort of numeric input You cannot mix text and numbers,

however, as in a telephone number such as (212) 555-1212

• Email Address: Looks for an e-mail address with the @ sign (Note that this is not

a foolproof e-mail address check, because it validates illegal addresses such ashuman@somewhere, @somewhere.com, human@somewhere.overtherainbow, and

so on.)

• Number from: Enables you to enter two numbers, one in each text box, to define

the number range

Here’s the browser compatibility chart for the Validate Form behavior:

Validate Form Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01

Installing, Managing, and Modifying Behaviors

The standard behaviors that come with Dreamweaver are indeed impressive, but they’rereally just the beginning Because existing behaviors can be modified and new ones createdfrom scratch, you can continue to add behaviors as you need them

To install a new Dreamweaver behavior:

1 Locate the behavior, which must be packaged as an MXP extension file; for example:

alignLayer.mxp, cleanupPage.mxp, and so on

The CD-ROM that comes with this book contains several useful MXP behavior extension files

In addition, you can find a large selection of MXP extension files on the DreamweaverExchange site, which you can reach by choosing Help ➪ Dreamweaver Exchange

On the CD-ROM

Trang 36

2 To install the extension in Dreamweaver, either double-click the MXP extension file,

or choose Help ➪ Manage Extensions to open the Extension Manager (as shown inFigure 12-26), and choose File ➪ Install Extension to select the file Note that someextensions remain inaccessible until you’ve quit and restarted Dreamweaver; in mostcases, you will be prompted to do so

Depending on your browser, you might be given the choice of installing a DreamweaverExchange extension file directly from the Exchange site or to save it first to disk and install itfrom there If you choose to install the extension file directly from the Exchange site, theExtension Manager handles the installation automatically If you choose to save the exten-sion file to disk, a good place to save it is the Downloaded Extensions folder within yourDreamweaver MX 2004 folder

Figure 12-26: You use the Extension Manager to install

and remove MXP extension files from Dreamweaver

Altering the parameters of a behavior

You can alter any of the attributes for your inserted behaviors at any time To modify abehavior you have already attached, follow these steps:

1 Open the Behaviors panel.

2 Select the object in the Document window or the tag in the Tag Selector to which your

behavior is attached

3 Double-click the action that you want to alter The appropriate dialog box opens, with

the previously selected parameters

4 Make any modifications to the existing settings for the action.

5 Click OK when you are finished.

Sequencing behaviors

When you have more than one action attached to a particular event, the order of the actions

is often important For example, you should generally implement the Go to Timeline Frame

Note

Trang 37

action ahead of the Play Timeline action to make sure the timeline is playing from the correctframe To specify the sequence in which Dreamweaver triggers the actions, reposition them

as necessary in the Actions column To do this, simply select an action and then use the upand down arrow buttons (refer to Figure 12-1) to reposition it in the list

Deleting behaviors

To remove a behavior from a list of behaviors attached to a particular event, simply highlightthe behavior and click the Remove (–) button

Summary

Dreamweaver behaviors can greatly extend the Web designer’s palette of possibilities — even

if the Web designer is an accomplished JavaScript programmer Behaviors simplify and mate the process of incorporating common and not so common JavaScript functions Theversatility of the behavior format enables anyone proficient in JavaScript to create customactions that can be attached to any event When considering behaviors, keep the followingpoints in mind:

auto-✦ Behaviors are combinations of events and actions

✦ Behaviors are written in HTML and JavaScript and are completely customizable fromwithin Dreamweaver

✦ Different browsers support different events Dreamweaver enables you to select a cific browser or a browser range, such as all 4.0 browsers, on which to base your eventchoice

spe-✦ Dreamweaver includes 24 standard actions Some actions are not available unless aparticular object is included on the current page

In the next chapter, you learn how to work with tables and structured data

Trang 38

Dreamweaver’s implementation of tables reflects this trend in Webpage design Drag-and-drop table sizing, easy organization of rowsand columns, and instant table reformatting all help get the job done

in the shortest time possible Table editing features enable you toselect and modify anything in a table — from a single cell to multiplecolumns Moreover, using Dreamweaver’s commands, you can sortstatic table data in a variety of ways or completely reformat it

This chapter covers everything you need to know to get startedcreating HTML tables in Dreamweaver You can also dynamicallyadd data to tables from an external data source using server-sideprocessing Using dynamic data is covered in Chapter 19

Dreamweaver includes a feature that takes table layout to the nextlevel of ease of use and power With the Layout mode, designers candraw out individual cells with a stroke of the mouse, and Dreamweaverautomatically creates a borderless, content-ready table You can evenadd nested tables to maintain design integrity Although you still need

to know the basics of table functionality to get the most out of thistool, Layout mode offers you a technique for visually structuringyour Web page

Although Dynamic HTML gives Web designers another route to cise layout control, many Web designers use a combination of tools

pre-to get desired effects and maintain wide browser compatibility Inother words, HTML tables are going to be around for a long time

HTML Table Fundamentals

A table is basically a grid that expands as you add text or images

Tables consist of three main components: rows, columns, and cells

Rows extend across a table from left to right, and columns extend up and down A cell is the area within the intersection of a row and a col-

umn; it’s where you enter your information Cells expand to fit ever they hold If you have enabled the table border, your browsershows the outline of the table and all its cells

Trang 39

In HTML, the structure and all the data of a table are contained between the table tag pair,

<table>and </table> The <table> tag can take numerous attributes, determining a table’swidth (which can be given in absolute measurement or as a percentage of the screen) as well

as the border, alignment on the page, and background color You can also control the size ofthe spacing between cells and the amount of padding within cells

You can insert a <table> .</table> pair directly in your code by choosing Insert ➪Table Objects ➪ Table or by clicking the Table Tag button in the Tables category of the Insertbar You must do this in Code view, where you can see the exact location of your cursorbefore inserting the tag pair

HTML uses a strict hierarchy when describing a table You can see this clearly in Listing 13-1,which shows the HTML generated from a simple table in Dreamweaver

Listing 13-1: Code for an HTML Table

Rows

After the opening <table> tag comes the first row tag <tr> </tr> pair Within the rent row, you can specify attributes for horizontal alignment or vertical alignment In addi-tion, browsers recognize row color as an added option

cur-If you are working directly in Code view, you can insert a <tr> .</tr> pair by choosingInsert ➪ Table Objects ➪ TR or by clicking the Table Row button in the Tables category of theInsert bar See “Inserting rows and columns,” later in this chapter, for methods of insertingrows in Design view

Note Note

Trang 40

Cells are marked in HTML with the <td> .</td> tag pair No specific code exists for a umn; rather, the number of columns is determined by the maximum number of cells within asingle table row For example, in Listing 13-1, notice the three sets of <td> tags between each

col-<tr>pair This means the table has three columns

A cell can span more than one row or column — in these cases, you see a rowspan=value orcolspan=valueattribute in the <td> tag, as illustrated in Listing 13-2 This code is also for atable with three rows and three columns, but the second cell in the first row spans twocolumns

Listing 13-2: HTML Table with Column Spanning

In Code view, you can insert a <td> .</td> pair to define a single table cell by choosingInsert ➪ Table Objects ➪ TD or by clicking the Table Data button in the Tables category of theInsert bar

Column and row headings

HTML uses a special type of cell called a table header for column and row headings.

Information in these cells is marked with a <th> tag and is generally rendered in boldface,centered within the cell

To insert a <th> .</th> pair for a table heading cell, choose Insert ➪ Table Objects ➪ TH

or click the Table Heading button in the Tables category of the Insert bar See the section

“Setting cell, column, and row properties,” later in this chapter, for another way to designatetable header cells

Định dạng
Số trang	123
Dung lượng	4,17 MB