Dreamweaver MX 2004 phần 5 ppsx

In this dialog box, choose a frame or window from the Open In list, and then enter a URL in the URL field.. dialog box Select the Jump menu, open the Behaviors panel, and double-click J

You can download additional Dreamweaver behaviors from the Dreamweaver exchange at www.macromedia.com/cfusion/exchange/index.cfm You can also access the

Dreamweaver exchange by clicking on Dreamweaver Exchange on the Start page, or

selecting Get More Behaviors… from the Actions menu

If you are an experienced JavaScript user, you can write your own JavaScript code to create a custom action and add it to the Behaviors panel For more details, choose Help ➔

Extending Dreamweaver and also see Chapter 32, “Customizing and Extending

Dreamweaver.”

Behaviors in Fireworks are similar to Behaviors in Dreamweaver They are used to attach behaviors to interactive image elements, such as rollovers and image maps Fireworks also has a Behaviors panel that can be used to attach a behavior to a slice or hotspot in a Fire­

works file If a Fireworks rollover file is exported to Dreamweaver, the file can be edited in Dreamweaver’s Behaviors panel

Events and Browsers

Events are the key to creating interactivity with behaviors If you know which events are

accessible to scripting, you can make more choices about adding interactivity to your

pages The menu of events available for a particular action is determined by the choice of

target browser Newer browsers include more events The target browser(s) is specified by

choosing the Show Events For option in the Actions menu The target browser determines

which events display in the Events menu for the chosen action The Show Events For sub­

menu includes the following target browser choices:

3.0 and Later Browsers IE 5.5 4.0 and Later Browsers IE 6.0

Table 12.1 shows all the events available in the Events menu The actual choices dis­

played in the Events menu vary, depending on the selected action and the target browser

In addition to the events shown in the following table (Table 12.1), many more events are available Internet Explorer 6 supports more events than any other browser at the

present time A list of events that can be used with Internet Explorer 6 can be viewed

at http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/

reference/events.asp#om40_event

onBeforeDeactivate

onBeforePrint onBeforeUpdate

onBlur onBounce

onChange onClick onContextMenu onDblClick onDeactivate

onDrag onDragEnd onDragEnter onDragLeave onDragOver onDrop onError

onFinish onFocus onFocusIn onFocusOut onHelp onKeyDown onKeyPress onKeyUp onLoad onLoseCapture

onMouseDown onMouseMove

A specified element loses focus 1

A specified element gains focus.

The user presses and releases any key.

The state of the specified element changes.

The Built-In Behaviors

Behaviors are named for the 22 actions that are included in Dreamweaver These built-in

behaviors are detailed in the following pages

Figure 12.2

Calling a JavaScript

Call JavaScript

dia-The Call JavaScript behavior lets you attach custom JavaScript code to an event This log box

JavaScript can be original code or code from a JavaScript

If you enter the name of a function, you need to include the function code in a script block (<script> </script>) in the head or body section of the page

Use your favorite search engine to find the many free online sources for JavaScript code Two

of our favorites are Dynamic Drive (www.dynamicdrive.com) and The JavaScript Source (http://javascript.internet.com/toc.html)

Change Property

The Change Property behavior dynamically changes the value of a property of 11 HTML elements including div, form, img, layer, span, select, textarea, and additional form ele­ments such as check boxes, password fields, radio buttons, or text fields Only certain properties of these 11 elements can be changed, depending on the specific element and the target browser

Once you have selected a page element and added a Change Property action, the Change Property dialog box appears From this dialog box, follow these steps to add a dynamic change to the value of a property

1 Choose an object from the Type Of Object menu

2 Choose the name of the object from the Named Object menu

3 Choose the property you want to change from Property ➔ Select, or click the Enter radio button and type the property’s name If you choose Select, you also need to choose a target browser and browser version If you want to target more than one browser, you need to apply more than one Change Property action The choice of tar­get browser is important Different browsers support different properties for some HTML elements

Figure 12.3 shows the Change Property action for a form object The action property is selected, and IE 4 is chosen as the target browser The New Value for this property is

myscript.pl Figure 12.3

Change Property

dialog box

Knowledge of HTML and JavaScript is required to use the Call JavaScript and Change Prop­

erty behaviors You can obtain more information about HTML and JavaScript through Dreamweaver’s Reference panel (Window ➔ Reference, or Shift-F1)

Check Browser

The Check Browser behavior directs the user to a specific page depending on the user’s

browser and version This behavior can be attached to a body element or can be used with

3 Choose an action from the second menu (otherwise) This tells the browser what to

do if it is not Netscape Navigator 4.0 or later

4 Repeat steps 2 and 3 for Internet Explorer

absolute path, such as

.macromedia.com/support/dreamweaver/ Figure 12.4 shows the Check Browser dialog box

Dreamweaver MX 2004 includes a Check Browser Support icon on the Document tool­

bar You can choose a list of Target Browsers, and Dreamweaver will automatically check for

browser compatibility problems every time you save the document You can add a Check

Browser behavior to the page if there are browser compatibility problems with any of the

features you’ve added, and send the user to the appropriate page For more information on

Check Browser Support, see Chapter 3, “Setting Up Your Workspace and Your Site.”

• Windows Media Player

Plug-ins can’t be detected by using JavaScript in Internet Explorer If you select a Flash or Shockwave plug-in in the Check Plugin dialog box, VBScript code will be added to your page

in order to detect those plug-ins in Internet Explorer in Windows No plug-ins can be detected in Internet Explorer on a Mac

2 Alternatively, enter the exact name of a plug-in in Plugin ➔ Enter On a PC, the exact plug-in names can be found in Netscape Navigator in the Help menu (Help ➔ About Plugins) On a Mac, choose About Plugins from the Apple menu

3 Enter a URL in the If Found, Go To URL text box If you want users to stay on the page if they have the plug-in, leave this text box blank

4 Enter a URL in the Otherwise, Go To URL text box

If detection is not possible, the user is sent to the URL specified in Otherwise, Go To URL Because the user might have the plug-in even though it is not detected, you might want the user to be directed to the address specified in If Found, Go To URL In this case, check the box labeled “Always go to first URL if detection is not possible.”

Check Plugin

dialog box

Control Shockwave Or Flash

The Control Shockwave Or Flash behavior directs a Shockwave or Flash animation to

play, stop, rewind, or go to a specific frame in the animation

To attach a behavior to a Shockwave or Flash movie, follow these steps

1 Insert a Shockwave or Flash movie on the page (Insert ➔ Media ➔ Shockwave, or Insert ➔

Media ➔ Flash)

To use this behavior, the media file extension must be dcr or dir for Shockwave files, or swf or spl for Flash files

2 Open the Property inspector (Window ➔ Properties)

3 Enter a name for the movie in the blank text field in the upper-left corner of the

Property inspector The movie must have a name in order to use the Control wave Or Flash behavior

4 Open the Behaviors panel and add Control Shockwave Or Flash The Control

Shock-wave Or Flash dialog box is displayed

5 Choose a movie from the Movie menu

6 Choose one of the four available actions:

The Drag Layer behavior allows the user to drag a

layer This behavior can be used to create movable ele­

2 Open the Property inspector (Window ➔ Properties) and note the name for the layer

in the text field in the upper-left corner A default name is assigned by Dreamweaver, such as Layer1, but this name should be changed in the Property inspector

3 Select the body element

The event that triggers the Drag Layer action must occur before the user can drag a layer, so it’s generally easiest to attach this action to the body element (using an onLoad event)

4 Open the Behaviors panel and choose Drag Layer The Drag Layer dialog box is dis­played By default, the Basic tab is shown in front

5 Choose a layer from the Layer menu

6 Choose Constrained or Unconstrained from the Movement menu

7 For constrained movement, enter pixel values in the Up, Down, Left, and Right fields The pixel values are relative to the starting position of the layer

For vertical movement only, enter 0 in the Left and Right fields For horizontal movement only, enter 0 in the Up and Down fields

10 Enter a pixel value in the Snap If Within field to specify how close the user must get to

Figure 12.7

Drag Layer dialog

box, Basic tab

Take a look at the Advanced tab of the Drag Layer dialog box Use the options on this tab to create a drag handle or specify the layer’s position relative to other layers

You can also use the Advanced tab to specify code that should be executed under dif­

ferent conditions Enter JavaScript code in the Call JavaScript field to repeatedly execute

the code while the layer is being dragged, or add JavaScript code in the When Dropped:

Call JavaScript field to execute the code when the layer is dropped You can also check the

Only If Snapped box to specify that the code should be executed only if the layer has been

dragged to the drop target

Knowledge of JavaScript is required to use the advanced features of the Drag Layer behavior

Figure 12.8 shows the Advanced tab in the Drag Layer dialog box

Figure 12.8

Drag Layer dialog box, Advanced tab

Go To URL

The Go To URL behavior opens a new page in the current window or in a specified frame

When a Go To URL action is added, the Go To URL dialog box is displayed In this dialog box, choose a frame or window from the Open In list, and then enter a URL in the

URL field Figure 12.9 shows the Go To URL dialog box Click OK to close the dialog box

Jump Menu

Jump menus are created from the Insert menu (Insert ➔ Form ➔ Jump Menu) It is not

necessary to use the Behaviors panel to attach the Jump Menu behavior to an object Figure 12.9

Go To URL

However, the Behaviors panel can be used to edit an existing Jump menu dialog box

Select the Jump menu, open the Behaviors panel, and double-click Jump Menu in the Actions col­

umn The Insert Jump Menu dialog box is dis­

played with the current settings for the menu

(Figure 12.10) Edit these settings as desired, and

click OK

Figure 12.10

For further information on jump menus, see Chapter 13, “Designing Navigation Objects.”

Jump Menu Go

The Jump Menu Go behavior associates a Go button with an already existing Jump menu

A Go button is not always necessary butis useful when Jump menus are used in frames When a Jump menu is inserted (Insert ➔ Form ➔ Jump Menu), an Insert Jump Menu dialog box is displayed (see Figure 12.10) At the bottom of the dialog box, check the option Insert Go Button After Menu to insert a Go button next to the Jump menu You can use a different image for the Go button instead of the default image Select the

object that you want to be the Go button Open the Behaviors panel, and add Jump Menu Go The Jump Menu Go dialog box displays (Figure 12.11) Choose a menu for the Go button to activate from the Choose Jump Menu drop-down list

Open Browser Window

The Open Browser Window behavior opens a pop-up browser window You can choose the properties of this window, including its size, toolbars, and name If you don’t specify any properties, the pop-up window will have the size and properties of the window it was launched from

Figure 12.11

The Jump Menu Go

dialog box

When an Open Browser Window action is added, the Open Browser Window dialog box is displayed In this dialog box, follow these steps to add a pop-up window:

1 Enter a URL in the URL To Display text box, or click the Browse button to navigate to

a file to display—for example, a new window that displays a larger graphic

3 Specify the attributes of the new window These include the following:

• Navigation Toolbar (includes Back, Forward, Home, and Reload buttons)

• Location Toolbar (shows the URL of the page being displayed)

• Status Bar

• Menu Bar (includes File, Edit, View, Go, and Help menus)

• Scrollbars as Needed

• Resize Handles (allow the user to resize the window)

4 Enter a name for the new window in the Window Name text field This enables you to

specify this window in JavaScript code, and allows you to use this window as a target

in a link

Figure 12.12 shows the Open Browser Window dialog box

Be sure it’s really necessary to open another window Many users, especially inexperienced users and users with visual disabilities, find it disorienting and confusing when a new window opens, and this can be compounded when they go to use the browser’s Back button and dis­

cover that either it’s not there or it’s grayed out! Users who have installed pop-up-blocking software might not see the new window at all Give users the option of opening a new win- dow—for example, with a button to click—rather than having it open automatically

Figure 12.12

Open Browser

The Play Sound behavior plays a sound when a speci­

fied event occurs—for example, an audio clip that

plays when the page is loaded Automatically playing

sounds without giving the visitor an option is not rec­

ommended, however Combine a Play Sound behav­

ior with a button or link that lets users decide if they

want audio input from your page

Figure 12.13

The Custom

Print Gallery offers

viewing and listen­

ing options for

its visitors

The Custom Print Gallery (www.santafehealingart.com/customprintgallery.html) on the Santa Fe Healing Art site, shown in Figure 12.13, gives the viewer several options Not only can visitors choose whether to listen to music while viewing the gallery, they can also select from three different types of music

Audio files may require audio plug-ins or specific types of media players For more info­ rmation on web audio and other multimedia files, see Chapter 10, “Adding Graphics and Multimedia.”

When a Play Sound action is added, the Play Sound dialog box is displayed In this dia­log box, enter a path and filename or click the Browse button to navigate to a sound file Figure 12.14 shows the Play Sound dialog box

Figure 12.14

The Play Sound

dialog box

Popup Message

The Popup Message behavior creates a JavaScript alert box that displays the message you

specify Alert boxes are used to present information to the user You can display a text

message, or you can display other information by including JavaScript functions, vari­

ables, or expressions in the text To use JavaScript code in the text, enclose it in curly

dialog box

When a Popup Message action is added, the Popup Message dialog box is displayed (Figure 12.15) In the Mes­

sage text area, enter a text message (and/or JavaScript

code if you are experienced with JavaScript) Users have

to click OK (Figure 12.16) to make the box go away

before they can resume viewing and loading the page

Preload Images

The Preload Images behavior is used to load images that might not automatically down­

load when the page is first loaded; for example, when the user is using a Rollover link, a

second image appears when the user moves the mouse over the first image If the image is

preloaded, it is displayed immediately because there is no delay waiting for the rollover

image file to download

If you are using the Swap Image behavior, there is no need to add the Preload Images ior—just check the Preload Images option in the Swap Image dialog box

behav-When a Preload Images action is added, the Preload Images dialog box is displayed

Follow these steps to preload images into the browser cache so there’s no delay to down- Figure 12.16

1 Enter the path and filename of the image you want to preload in the Image Source a response from the user File text box at the bottom of the dialog box, or click the

Browse button to navigate to an image file

2 Click the plus (+) button at the top of the dialog box to

add this image to the Preload Images list

3 Repeat steps 1 and 2 to add additional image files

4 Select an image from the Preload Images list and click the minus (–) button at the top

of the dialog box to remove an image from the list

For more information on creating rollovers and preloading images, see Chapter 13, “Design­ ing Navigation Objects.”

Figure 12.17 shows the Preload Images dialog box

Set Nav Bar Image

The Set Nav Bar Image behavior is used to edit the properties of navigation bar images; forFigure 12.17

example, you can change the display and/or actions associated with images in a navigation

Preload Images

dialog box bar You can set different images for each state of the navigation button (Up, Over, Down,

Over While Down) as well as add more complex actions, such as changing the state of more than one image at a

time when a user moves the mouse over an image (multi­ ple rollovers)

A navigation bar can be created by using the Insert menu (Insert ➔ Image Objects ➔ Navigation Bar)

For more details on image states and navigation bars, see Chapter 13

To edit an existing navigation bar image, follow these steps:

1 Select an image in the navigation bar

2 Open the Behaviors panel, and double-click the Set Nav Bar Image action in the Actions column By default, the Basic tab of the Set Nav Bar Image dialog box displays

3 In the Set Nav Bar Image dialog box, the Element Name text field displays the name

of the selected image This name is the same one that is displayed in the Property inspector under Image (size of file), or it can also be set by using a name attribute in the img element

4 Edit the options in this dialog box These include the following:

• Up Image (path and filename): displays when the page loads

• Over Image (path and filename): displays when the cursor moves over the image

• Down Image (path and filename): displays after the image is clicked

• When Clicked Go To URL (URL or frame name): sets link for image

You don’t have to select different images for every state Often, you use two images: one for the Up state and one for all the other states

5 Choose additional options by clicking the check boxes listed under Options:

• Preload Images

• Show “Down Image” Initially: lets the users know their location in the site by dis­

Ready to try it out? Create a navigation bar in the Hands On Tutorial in Chapter 13

You can use the Advanced tab to create multiple rollovers—more than one image is changed by a single event The event can be a click or a mouseover

Set Nav Bar Image dialog box, Basic tab

Follow these steps:

1 In the When Element (element name) Is Displaying menu, choose an image state:

• Over Image or Over While Down Image This option changes the display of a second image when the user moves the mouse over the first image

• Down Image This option changes the display of a second image when the first image is clicked

2 Select a second image from the Also Set Image list

3 Enter the path and filename of the image (or click the Browse button to navigate to an image file) to display when the event in step 1 occurs

Figure 12.19 shows the Advanced tab in the Set Nav Bar dialog box

Set Text Of Frame

The Set Text Of Frame behavior changes the text display in a selected frame to new con­tent and formatting that you specify The content can include HTML code as well as JavaScript functions, properties, variables, or expressions To include JavaScript, enclose it

in curly braces {}; for example, here is how you would display the current year:

The year is {myYear()}

In this case, we’ve added our hand-coded (all four lines!) myYear function in a script block

in the head section of the page so that it can be called from this statement Here’s the code:

To add a Set Text Of Frame action, follow these steps:

1 Create a frameset (Insert ➔ HTML ➔ Frames ➔ Frameset or click the frm icon in the

HTML Insert bar)

For more information about framesets and frames, see Chapter 7, “Interactivity with sets and Frames.”

Frame-2 Select an object

3 Open the Behaviors panel and click the plus (+) button to open the Actions menu

4 Choose Set Text ➔ Set Text Of Frame The Set Text Of Frame dialog box appears

5 Choose the target frame from the Frame menu

contained in the body

where it can be changed However, this only updates the source code in the body head

Figure 12.20 shows the Set Text Of Frame dialog box When the user clicks the text in the original frame, the new text (You clicked me!) displays

Set Text Of Layer

enclose it in curly braces {}

Set Text Of Frame

1 Create a layer (Insert ➔ Layout Objects ➔

Figure 12.21

Set Text Of Layer

dialog box

Figure 12.22

Set Text Of Status

Bar dialog box

3 Click the plus (+) button and select Set Text ➔

4 Choose the target layer from the Layer menu

Set Text Of Status Bar

The Set Text Of Status Bar behavior displays a message in the status bar at the bottom of the browser window With the Set Text Of Status Bar behavior, you can associate this mes­sage with an event, such as displaying a status bar message when the user moves the mouse over an image The status bar message can be text, or you can include JavaScript functions, properties, variables, or expressions To include JavaScript code, enclose it in curly braces

{}; for example, here is how you would display the URL of the current page:

You are at {window.location}

When a Set Text Of Status Bar action is added, the Set Text Of Status Bar dialog box displays In this dialog box, you can enter a text message and/or JavaScript code

Figure 12.22 shows the Set Text Of Status Bar dialog box

Set Text Of Text Field

The Set Text Of Text Field behavior replaces the content of a selected text field in a form with new content The new content can be text, or you can include JavaScript functions, properties, variables, or expressions To include JavaScript code, enclose it in curly braces {}

To add a Set Text Of Text Field action, follow these steps

1 Insert a form (Insert ➔ Form ➔ Form or click the Form icon in the Forms Insert bar)

2 Create a text field (Insert ➔ Form ➔ Text Field or select Text Field after clicking the

Form icon in the Forms Insert bar) The Tag Editor window displays

3 Enter a name for the text field in the Input-General window of the Tag Editor

(Figure 12.23) You can edit the name at any time in the Property inspector

4 Open the Behaviors panel and click the plus (+) button to add an action

5 Choose Set Text ➔ Set Text Of Text Field from the Actions menu The Set Text Of

Text Field dialog box displays

6 Select the target field from the Text Field menu

7 Enter text and/or JavaScript code in the New Text text area

The Input-General window of the Tag Editor

Figure 12.24

Set Text Of Text Field dialog box

Show-Hide Layers

The Show-Hide Layers behavior shows or hides one or more layers on a page This behav­ior can be used to change the layer display as a user interacts with a page For example, when a user moves the mouse over an image, another layer becomes visible, and this layer presents information about the image

To add a Show-Hide Layers action, follow these steps:

1 Insert a layer (Insert ➔ Layout Objects ➔ Layer or use the Draw Layer icon in the Lay­out Insert bar and draw a layer by dragging the crosshairs in the Design window)

2 Open the Property inspector (Window ➔ Properties) and note the name for the layer

in the text field in the upper-left corner A default name is assigned by Dreamweaver, such as Layer1, but this name can be changed in the Property inspector if you choose

3 Deselect the layer by clicking the Document window, and open the Behaviors panel

5 Select the target layer from the Named Layers list

Swap Image and Swap Image Restore

The Swap Image behavior replaces one image with another This behavior is used to create rollovers The replacement image must have the same height and width as the original image, or the display of the replacement image may appear distorted

For more information on creating rollovers, see Chapter 13

Figure 12.25

Show-Hide Layers

dialog box

To add a Swap Image action, follow these steps

1 Insert an image (Insert ➔ Image or click the Image icon in the Common Insert bar and

Select Image)

2 Open the Property inspector (Window ➔ Properties) and enter a name for the image

in the text field in the upper-left corner of the window The Swap Image behavior can

be used without naming the images; however, Dreamweaver automatically assigns default names to images (for example, Image 1, Image 2, and so on) if no image names have been assigned before the Swap Image action is added It is much easier to identify an image if it has a name that means something to you

3 Repeat steps 1 and 2 to add additional images

4 Select an image and open the Behaviors panel

6 Select the image you want to swap from the Images list

8 Repeat steps 6 and 7 to change additional images

9 Click in the Preload Images box to preload the additional images when the page is

loaded

Figure 12.26 shows the Swap Image dialog box

To add the Swap Image Restore behavior, click the Restore Images onMouseOut check box in the Swap Image dialog box This behavior restores the original image when the user

moves the mouse off the image

Dreamweaver MX 2004 does not include timelines or timeline behaviors (Go to Timeline Frame, Play Timeline, and Stop Timeline)

Figure 12.26

Swap Image dialog box

Validate Form

The Validate Form behavior checks the content of specified text fields in a form to make sure that the user has entered a value in required fields and that the user has entered the correct type of information for the field

The Validate Form action can be used with an onSubmit event to check for entries in all required text fields when the user clicks the Submit button, or it can be used with an

onBlur or onChange event to validate individual fields as the user fills out the form

To add a Validate Form action, follow these steps

1 Insert a form (Insert ➔ Form or click the Form icon in the Forms Insert bar)

2 Insert a text field (Insert ➔ Form ➔ Text Field or click the Text Field icon in the Forms Insert bar) Repeat this step to add additional text fields to the form

3 To validate individual fields, select the text field and open the Behaviors panel To val­idate multiple fields when the user clicks the Submit button, select the form element and open the Behaviors panel

4 Click the plus (+) button and choose Validate Form from the Actions menu

5 If you are validating an individual field, select that field in the Named Fields list If you are validating multiple fields, select any field in the Named Fields list

6 Check the Value Required check box if the field must contain an entry

7 Choose one of the following Accept options:

Anything This option checks to make sure that a field contains an entry, but no par­ticular type of entry is necessary

Email Address This option checks to see whether a field contains @

Number This option checks to see whether a field contains only numerals

Number From This option checks to see whether a field contains a number within a specified range

8 If you are validating multiple fields at once, repeat steps 5, 6, and 7 for each field you

If you select the form element before adding a Validate Form action, the onSubmit event

Validate Form

dialog box is automatically selected If you select an individual text field before adding a Validate

Form action, check that the event is onBlur or

onChange The onBlur event occurs whether or not a user has changed anything in the text field, but the onChange event occurs only if the user changes the contents of the text field

Figure 12.27 shows the Validate Form dialog box

Show Pop-Up Menu

The Show Pop-Up Menu behavior allows you to add or edit a Dreamweaver MX pop-up

menu or edit a Fireworks MX pop-up menu inserted in a Dreamweaver MX document

To edit the images in a Fireworks pop-up menu, use the Edit button in the Property inspec­

tor You can edit the text in the menu in the Show Pop-Up Menu dialog box

You can use the Show Pop-Up Menu dialog box to add a horizontal or vertical pop-up menu, and to edit the color, text, or position of the menu

To add or edit a pop-up menu, follow these steps:

open the Behaviors panel (Window ➔

Contents This option is used to specify the name, structure (outdent or indent), Figure 12.28

Show Pop-Up Menu

Appearance This option is used to spec­

ify the appearance of the up and over states and to choose a font for the menu item text

Advanced This option is used to specify the properties of the menu cells, including cell width, cell height, cell padding, cell spacing, text indent, menu delay, and bor­

der properties

Position This option is used to specify the position of the pop-up menu relative to the triggering image or link

Figure 12.28 shows the Show Pop-Up Menu dialog box

Hands On: Adding a Style Switcher to Your Page

JavaScript can be used to add a style switcher to a page that allows users to choose the style sheet they want to apply to your page In this tutorial, almost all of the files you’ll need are included on the CD: the JavaScript (switch.js) is provided as an external file, and you can use Dreamweaver’s built-in CSS samples to create a variety of external CSS files

Selecting Style Sheets

Begin by selecting the style sheets you want to use You can use your own style sheets, or use the samples provided in Dreamweaver

1 To view the Dreamweaver CSS Samples, choose File ➔ New ➔ CSS Style Sheets

2 In the dialog box that displays, choose three or more CSS sample pages

choice, using a .css

The three sample CSS pages in the Ch12 folder on the CD are named bg.css, bgp.css, and red.css

Creating a New Document

Now you’re ready to make a new document

1 Create a new HTML document in Dreamweaver (File ➔ New or choose Create New ➔

HTML from the Start page)

2 Add any content you choose, but for the greatest effects, look at the CSS pages you’re going to apply to see what elements have associated styles and include some of those elements

We chose three CSS color pages as our samples, and our page content is displayed in headers (h1, h2, h3, h4) because each of these elements had associated styles

Adding Links to the Style Sheets

In the head section of your page, add links to the style sheets We are using three different kinds of style sheet links:

• Persistent: a persistent style sheet is always enabled

• Alternate: an alternate style sheet can be enabled by the user by selecting it in a link

or menu

For more details on the three different kinds of style sheet links, see “Alternative Style,”

by Paul Sowden, at www.alistapart.com/stories/alternate/

In our sample file, gb.css is the persistent style sheet, bgp.css is the preferred style sheet, and red.css is the alternate style sheet The links for the different types are slightly

different, so let’s review each one:

1 The persistent link:

<link rel=”stylesheet” type=”text/css” media=”screen” href=”gb.css”>

This link element does not include a title attribute

2 The preferred link:

<link rel=”stylesheet” type=”text/css” media=”screen”

t title=”preferred” href=”bgp.css”>

This link element includes a title attribute You’ll need to use the value of the title attribute later in the page, so make a note of it

3 The alternate link:

<link r rel=”alternate e s stylesheet” type=”text/css”

media=”screen” title=”alternate” href=”red.css”>

This link element uses the value alternate stylesheet for the rel attribute, and also includes a title attribute

Linking to an External JavaScript File

The JavaScript for the style switcher is all included in an external JavaScript file named

switch.js To link to this file, add a script element in the head section of the page:

<script type=”text/javascript” language=”JavaScript”

src=”switch.js”></script>

At this point, the head section of your page should look something like this:

You’re almost there Just one more thing to include!

Adding a Menu for Choosing the Style

In the body of the page, add a menu using the select element In this menu, you will use the value of the title attributes in the style sheet links

The select element includes an onChange event and a block of JavaScript code, written

by Mike Golding at www.mikezilla.com/exp0020/exp0020.html His article on style switch­ing includes a detailed discussion of the code and some additional methods for creating a style switcher

For our sample page, the code follows:

Note that the value in the option element is the same as the value of the title attribute

in the associated link element You can include as many option elements and style sheets

as you want

Preview Your File

Now it’s time to take a peek at what you’ve done

1 Save the HTML file and preview the file in a browser to see if your style switcher works properly You’ll notice that the default style displays when the page is loaded in Internet Explorer 6, but not when it’s loaded in Netscape 6 and 7 The preferred and alternate styles, however, are displayed in both browsers

2 If your file is not working properly, or if you would like to view the completed sample file, open the switch.html file from the Chapter 12 folder of the accompanying CD

That’s All, Folks!

We’ve covered the essentials of behaviors, but as you have seen, behaviors work closely with many other Dreamweaver features To further advance your skills and knowledge in creating interactive and dynamic web pages using Dreamweaver, see the next chapter, where you’ll learn how to create navigation objects such as buttons, navigation bars, rollovers, and jump menus

C H A P T E R 1 3

The most important part of a web page is the content, but the navigation, which lets users access the information they are looking for, is crucial to the user’s experience There are many types of visually interesting, interactive, and effective navigation aids that you can add to your pages to help the user move through your site

In this chapter, you will learn to create a variety of navigation objects, including rollovers, buttons, navigation bars, pop-up menus, and jump menus You’ll also learn to use symbols, instances, and Library items

These are the topics you’ll delve into in this chapter:

■ Creating rollover effects

■ Learning to use symbols, instances, and libraries

■ Using buttons

■ Making a navigation bar

■ Creating pop-up menus

■ Adding a jump menu

Gathering Your Graphic Assets

Remember that Dreamweaver is not a graphics program and that you’ll need to prepare your images first in the graphics software program of your choice (for detailed instructions, see the Bonus Chapter on the book’s CD) As long as you have the images prepared (includ­ing whatever variations you want to display when a graphic link is hovered over, active, or clicked), you can assemble your rollovers and navigation bars directly in Dreamweaver

If you use Fireworks or Flash to create your graphics, you can export them directly to Dreamweaver, including any HTML that’s been created along with the graphics If you have already created your entire interactive image in Fireworks (whether it be a simple rollover, a navigation bar, or something more complex), you can insert it into your docu­ment in Dreamweaver with Insert ➔ Image Objects ➔ Fireworks HTML Then you just browse to the Fireworks file and click OK If you use Photoshop or any other graphics software, just save your image files in the images folder in your site directory so that you can access them easily when working with Dreamweaver sites

Creating Rollovers

Rollovers have a continuing appeal for both the novice and experienced Web user What is

it that makes a rollover effect so enticing? Maybe it’s that we like movement on the Web Not too much movement, of course No, just a subtle color change or a new icon that pops up—enough of a change to show us that we are involved in the navigation of this particular site and that our actions on that web page have an effect

So what exactly is a rollover? A rollover, also called a mouseover, is when a user moves the mouse pointer over an object, and that object changes It can be something as simple

as a picture changing to a different picture It gets its name from an event (onMouseOver, technically speaking) that is associated with a behavior or action For example, if the user moves the mouse over an image, a dynamic effect can be added that displays a different graphic in the same spot, somewhere else on the page, or both!

Image States

Understanding image states is essential to creating dynamic image effects Before you start creating rollovers, buttons, and navigation bars, let’s review the basics of image states Each image state represents a mouse event:

Up The default image that displays when the page first loads

Over The image that displays when the user moves the mouse over the image

Down The image that displays when the user clicks the image The Down state image is often used to signify that the image represents the current web page when buttons are used as navigational objects

Over While Down The image that displays when the user moves the mouse over the image

after it’s been clicked

While this does not include every possible image state and mouse event, these four are the most common image states you will use for navigation objects You don’t have to

include a different image for each of these four states Very often, you’ll only use an Up

state and an Over state when creating simple rollover effects, for example

Making a Rollover

A simple rollover is really just two different graphics with a little bit of scripting that tells

the browser to swap one image for the other

You can also create multiple rollovers (change the state of more than one image at a time when the user mouses over an image) in both Dreamweaver and Fireworks You can

create disjoint, or remote, rollovers in Fireworks A disjoint rollover occurs when you

move the mouse over an image and a second image is displayed in a different location on

the page

Dreamweaver

To make a simple rollover, follow these steps:

1 Position the insertion point where you want the image to appear

Image icon and then click on the arrow and select Rollover Image (or select Insert Image Objects ➔

3 On the Insert Rollover Image dialog box that appears, type a name for the rollover

(see Figure 13.1) The rollover action won’t occur without a name to use in scripting

Figure 13.1

The Insert Rollover Image dialog box makes it simple to drop a rollover onto your page

4 Browse to the original image (the one that should be displayed by default)

5 Then browse to the rollover image (the one that should be displayed when the action takes place—hovering, clicking, and so on)

6 Type alternate text for nongraphical browsers

7 Browse to the destination for the rollover, assuming that you’re using the interactive image as a link

8 Click OK Dreamweaver inserts the rollover

Dreamweaver won’t display the rollover action for you You’ll need to preview your page in a browser (by pressing F12) to see the image in action

By default, Dreamweaver makes rollovers that respond to the mouse when it is over the image If you want to make a rollover that responds to another action, such as clicking, use the Behaviors feature to add an action called Swap Image (see Chapter 12, “Incorpo­rating JavaScript Behaviors,” for more on working with behaviors)

The Chapter 13 folder on the accompanying CD includes a folder called Nav Practice This is

a group of four images (up, over, down, and over_down) for practicing dynamic effects

To make multiple rollovers in Dreamweaver, you need to use the Set Nav Bar Image behavior, as detailed in Chapter 12 This means that the involved images need to be part of the same navigation bar

Fireworks

Fireworks uses slices, hotspots, and buttons to create interactivity Fireworks includes a

“drag-and-drop” method to create simple interactivity and a Behaviors panel for more complex interactivity If you export a Fireworks rollover to Dreamweaver, you can edit it

in Dreamweaver’s Behaviors panel

Buttons are covered later in this chapter For more details on hotspots and image maps, see Chapter 8, “Making and Maintaining Hyperlinks.” For additional information on using slices, see the Bonus Chapter on this book’s CD

To make a simple two-state (Up and Over) rollover, follow these steps:

1 Select, draw, or import the image you want as the trigger image or the Up state—the image that visitors see when they enter your site

2 Place the image or button where you want it, right-click to access the contextual

menu (Ctrl-click on a Mac), and choose Insert Slice

3 In the Frames panel, add one more frame by clicking the New/Duplicate Frame icon

You don’t need another slice for a new frame; you only need one slice for the target object, and it is in the Web layer for every frame automatically

4 Select Frame 2, open or draw the second image (the same size as the first), and place it

over the first image in your document

Here is an easy way to get an image to be the same size and in the correct location in Frame 2

First, return to the Layers panel, and select the object (not the slice) Then, choose Edit ➔ Clone, then Edit ➔ Copy, and Select Frame 2 Finally, choose Edit ➔

5 On the canvas (or the Web layer in the Layers panel), select the slice you added

Figure 13.2

8 The Swap Image dialog box displays From the Swap The Simple Rollover

behavior added to the Behaviors panel

Image From menu, choose the frame you created in step 3

In Figure 13.2 you can see that the onMouseOver Simple Rollover behavior has been added in the Behaviors panel Fig­

ure 13.3 shows the selected slice with the behavior handle in

the center and a line to the Frame beneath indicating a simple

To add a disjoint rollover:

1 Select, draw, or import the image you want as the

trigger image or the Up state

Figure 13.3

Selected slice with behavior handle and simple rollover

2 Place the image or button where you want it, right-click to access the contextual menu (Ctrl-click on a Mac), and choose Insert Slice

3 In the Frames panel, add one more frame by clicking the New/Duplicate Frame icon

4 Select Frame 2, open or draw the second image, and place it anywhere on the docu­ment other than over the first image

5 Select the second image and choose Edit ➔ Insert ➔ Slice

6 Select Frame 1 in the Frames panel

7 Select the slice that contains the first image, and place the pointer over the behavior handle

8 Drag the behavior handle to the slice you created in step 5

9 The Swap Image dialog box displays From the Swap Image From menu, choose the frame you created in step 3

You can apply more than one rollover to a selected slice by dragging the behavior Figure 13.4 dle Drag the handle to the upper-left of the selected slice to create a simple rollover, or

han-This slice includes

drag the handle to a different slice to create a disjoint rollover Figure 13.4 shows a slice

disjoint rollover

Creating Navigation Buttons

Dreamweaver allows you to make simple two-state (Up and Over) buttons by creating Flash buttons, as described in Chapter 11, “Getting into Flash.” If you want to create but­tons with more than two states, use Fireworks or Flash to create the buttons, and export them to Dreamweaver Fireworks and Flash use symbols, instances, and libraries to design effective navigation buttons

Symbols

Utilizing the same piece of artwork or the same object multiple times helps cut your pro­duction time and a page’s download time For example, web designers may use a small

image for a background image on a page and let that image repeat, or tile, to fill the whole

page Fireworks and Flash use symbols to allow you to use the same object multiple times The symbols that you generate are stored in libraries and instances are present in the document

You can convert any object into a symbol For example, if you have designed a custom button, you can make it a symbol, which can then be used over and over again In addi­tion to adding new symbols, you can convert any button or object that has already been produced to a symbol

There are three types of symbols in Fireworks and Flash

Graphic symbols These are any object or image that you’d like to use multiple times Graphic

symbols are static, meaning they have no behaviors, such as rollovers, attached to them

Button symbols These usually contain multiple frames, which contain the different states

of a button

Animation symbols (Fireworks only) These contain all the frames and timing of your ani­

mation A completed animation, including its links, is contained in the symbol

Movie clip symbols (Flash only) These contain reuseable animations Movie clip instances

can be placed inside the Timeline of a button symbol to create an animated button

Creating Symbols in Fireworks

To make any existing object or an animation into a symbol, follow these steps:

1 Draw any object you’d like, or open an existing object you’ve made

2 Select the Pointer tool and select an object, choose Modify ➔ Symbol ➔

4 Click OK when you are finished

Symbols are also editable As soon as you make a symbol, it is automatically stored in the Library panel (in the Assets panel group) and an instance is placed on the canvas

When you double-click the instance, a dialog box will open Which dialog box opens will depend on the type of symbol you are editing: a Graphic symbol will open the Symbol

Properties dialog box, a Button symbol will open the Button editor, and an Animation

symbol will open the Animate dialog box When you edit the master symbol the changes

will be made globally to all instances of that symbol

Creating Symbols in Flash

To make any existing object into a symbol, follow these steps: Figure 13.5

The Symbol

Proper-1 Select an element on the stage

2 Select Modify ➔

4 Click OK when you are finished

Flash automatically adds the symbol to the Library panel, and an instance is placed

on the stage You can edit the symbol by double-clicking an instance on the stage or by double-clicking the symbol’s icon in the Library panel

Using Instances and Libraries

Symbols are stored in the library Once you have a symbol, you can drag additional instances from the library onto your canvas (Fireworks) or stage (Flash)—but when you

do, you should be aware that it’s not the actual symbol you see, it’s an instance of the sym­

bol, a copy

An instance maintains a link to the parent symbol If you edit the parent symbol, all of the instances are also changed You can, however, edit certain properties of instances without affecting any other instances or the symbol itself In Fireworks, you can use the transform tools and alter the opacity on individual instances, and you can add effects to an instance, which can be edited instance by instance In Flash, you can modify the color, scale, rotation, alpha transparency, brightness, tint, height, width, and location of an indi­vidual instance without affecting any others

You can export and import symbols from one document to another, and in Flash you can share symbols between documents as shared library assets

Making Buttons

In both Fireworks and Flash, buttons are the most common type of symbol used for navi­gation Because buttons can have multiple states, you can use them to create dynamic nav­igation effects and offer additional clues to the user about where they are in your site

Fireworks

In Fireworks, you can make a button directly in the Button edi­tor or you can convert an existing button into a Button symbol and edit it in the Button editor A Button symbol encapsulates

up to four different button states (Up, Over, Down, Over While Down) Instead of spending a lot of time reproducing similar buttons, you simply have to place an instance of a symbol onto your canvas and edit the text and link

You can use this editor to help streamline your workflow because you can apply up to four different states for the same button as well as add links and a slice All the JavaScript code for the different rollovers gets exported with the button Fig­ure 13.6 shows the Button editor

Figure 13.6

The Button editor

dialog box

To use the Button editor, follow these steps:

1 Choose Edit ➔ Insert ➔

enter the name Green Button

Size: 130 × 25

Fill: Gradient ➔ Linear, # 66FF00 (green)

the gradient, and # 003366 (blue)

Fill Texture: Parchment, 50%

Stroke: Pencil 2, dark gray

Effects: Inner Bevel, Frame 2, Width 4

3 Center the button by using the Align panel (Window ➔

Figure 13.7 shows the button in the Up state

Home

6 Click the Over tab and click the Copy Up Graphic button to put a copy of the Up

state in the Over state’s editing box

Button editor

10 Then choose Bevel and Emboss ➔ Inset Emboss and

accept the default settings