Adobe Dreamweaver CS3 Unleashed- P12

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

56
lượt xem 11
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe Dreamweaver CS3 Unleashed- P12: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why so many windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowing developers complete control when building websites and applications....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Adobe Dreamweaver CS3 Unleashed- P12

Toggle effect— Select this check box if you want the effect to be reversible, growing and shrinking with successive clicks. Highlight You can use the Highlight behavior with form objects, links, images, div, and other tags to create a highlighting effect for the particular element. To use this behavior, follow these steps: 1. Place your cursor next to the Grow/Shrink button created in the previous section. Insert a new Button form object by clicking the Button icon from the Forms category of the Insert bar. 2. When the Add Form Tag dialog appears, click No. 3. With the Button form object selected, change its name to btnHighlight (so that we can identify it later), change the Action to None so that the button doesn't try to submit or reset the nonexistent form when it's clicked. You can also change the Label to read anything you'd like. I'll change mine to read Highlight. 4. With the new button selected, choose the Highlight behavior from the Effects submenu, available by choosing the Add (+) button in the Behaviors panel. The Highlight dialog will appear as in Figure 10.12. Figure 10.12. The Highlight behavior can be used to create a custom-color highlight for an element. [View full size image] 5. Although we'll eventually cover the functionality outlined within this dialog, for now, choose the input "btnHighlight" option from the Target Element menu, select a red color from both the End Color and Color After Effect menus, enable the Toggle effect check box, and click OK. 6. If the selected event isn't onClick, change it to onClick now. Save your work and preview the page in the browser by choosing F12 (Option+F12). When the page appears, click the button. As you'll see, the image highlights red. Click the button again. You'll notice that the image highlight fades away.
In the previous steps, we selected options from the Target Element menu. As you can see from Figure 10.12, other options exist within the dialog: Target Element— From this menu, select the object's ID that you want to apply the effect to. Effect duration— Enter a numeric value within this text box to define the time it takes for the effect to occur, in milliseconds. Start Color— Select the color you want the highlight to start with. End Color— Select the color you want the highlight to end with. This color lasts only as long as the duration you define in the Effect duration text box. Color After Effect— Select the color for the object after the highlight has finished. Toggle effect— Select this check box if you want the effect to be reversible, cycling through the highlight colors with successive clicks. Shake You can use the Shake behavior with form objects, links, images, div, and other tags to force the element to shake from side to side. To use this behavior, follow these steps: 1. Place your cursor next to the Highlight button created in the previous section. Insert a new Button form object by clicking the Button icon from the Forms category of the Insert bar. 2. When the Add Form Tag dialog appears, click No. 3. With the Button form object selected, change the Action to None so that the button doesn't try to submit or reset the nonexistent form when it's clicked. You can also change the Label to read anything you'd like. I'll change mine to read Shake. 4. With the new button selected, choose the Shake behavior from the Effects submenu, available by choosing the Add (+) button in the Behaviors panel. The Shake dialog will appear (see Figure 10.13). Figure 10.13. The Shake behavior can be used to force an element to shake from side to side. 5. Choose the div "apDiv1" option from the Target Element menu and click OK.
6. If the selected event isn't onClick, change it to onClick now. Save your work and preview the page in the browser by choosing F12 (Option+F12). When the page appears, click the button. As you'll see, the vetwork.gif image contained within our AP Div shakes from side to side. Slide You can use the Slide behavior with any form object, link, image, Div, and so on to force an object to disappear as if it were sliding away. Alternatively, you can use this behavior to force an object to reappear as if it were sliding into view. To use this behavior, follow these steps: 1. Place your cursor next to the Shake button created in the previous section and insert a new Button form object by clicking the Button icon from the Forms category of the Insert bar. 2. When the Add Form Tag dialog appears, click No. 3. With the Button form object selected, change the Action to None so that the button doesn't try to submit or reset the nonexistent form when it's clicked. You can also change the Label to read anything you'd like. I'll change mine to read Slide. 4. With the new button selected, choose the Slide behavior from the Effects submenu, available by choosing the Add (+) button in the Behaviors panel. The Slide dialog will appear as it does in Figure 10.14. Figure 10.14. The Slide behavior allows you to attach functionality to a form object, link, image, div, and so on that forces the element to disappear and reappear as if it were sliding away/into view. 5. Although we'll eventually cover the functionality outlined within this dialog, for now, choose the div "apDiv1" (the AP Div that we created earlier which contains the vnetwork.gif image) option from the Target Element menu, make sure the Slide up option is selected from the Effect menu, enable the Toggle effect check box, and click OK. 6. If the selected event isn't onClick, change it to onClick now.
Save your work and preview the page in the browser by choosing F12 (Option+F12). When the page appears, click the button. As you'll see, the AP div that contains our vnetwork.gif image slides away until it disappears. Now click it again. You'll notice that the image slides back into view. In the previous steps, we selected options from the Target Element and Effect menus to select both the element that we wanted to target with the effect and the effect itself. As you can see from Figure 10.14, other options exist within the dialog: Target Element— From this menu, select the object's ID that you want to apply the effect to. Effect duration— Enter a numeric value within this text box to define the time it takes for the effect to occur, in milliseconds. Effect— Select the effect you want to apply from this menu. Options include Slide up or Slide down. Slide up from— Enter a numeric value in this text box to define the sliding starting point as a percentage or as a pixel number. Slide up to— Enter a numeric value in this text box to define the sliding end point as a percentage or as a positive pixel amount. Toggle effect— Select this check box if you want the effect to be reversible, sliding up and down with successive clicks. Squish You can use the Squish behavior with form objects, links, images, div, and other tags to force the element to disappear and reappear using an effect that makes the object appear to be squished. To use this behavior, follow these steps: 1. Place your cursor next to the Slide button created in the previous section. Insert a new Button form object by clicking the Button icon from the Forms category of the Insert bar. 2. When the Add Form Tag dialog appears, click No. 3. With the Button form object selected, change the Action to None so that the button doesn't try to submit or reset the nonexistent form when it's clicked. You can also change the Label to read anything you'd like. I'll change mine to read Squish. 4. With the new button selected, choose the Squish behavior from the Effects submenu, available by choosing the Add (+) button in the Behaviors panel. The Squish dialog will appear (see Figure 10.15). Figure 10.15. The Squish behavior can be used to force an element to appear and reappear as if it were being squished.
5. Choose the div "apDiv1" option from the Target Element menu and click OK. 6. If the selected event isn't onClick, change it to onClick now. Save your work and preview the page in the browser by choosing F12 (Option+F12). When the page appears, click the button. As you'll see, the vetwork.gif image contained within our AP Div disappears as if it were being squished. Click the button again to force the image to reappear. Go to URL Possibly the easiest behavior to use aside from the Popup Message behavior is the Go to URL behavior. You can use this behavior to quickly associate a link with a form object (such as a Button). Because form objects (like the button) don't support the href attribute (the attribute used when linking text and images), you must create links using JavaScript instead. This JavaScript is automated using the Go to URL behavior. Tip The Go To URL behavior can also be used in conjunction with a standard link on an object to load two different pages into two different frames at the same time. To attach this behavior to a Button object, follow these steps: 1. With your cursor in the same page we've been working with, insert a new Button form object by clicking the Button icon from the Forms category of the Insert bar. 2. When the Add Form Tag dialog appears, click No. 3. With the Button form object selected, change the Action to None so that the button doesn't try to submit or reset the nonexistent form when it's clicked. You can also change the Label to read anything you'd like. I'll change mine to read Visit Vecta Corp. 4. With the Button object selected, choose the Go to URL behavior from the Add (+) menu in the Behaviors panel. The Go to URL dialog appears. 5. Initially, the dialog allows you to choose which window to open the link in. Because we're not working with frames, the only option in this list box is Main window. Unless you're working with frames, this option is fine. You also can specify the path of the URL to link the Button form object to within the URL text box. I'll enter the full path to the Vecta Corp website, which is http://www.vectacorp.com. When you've finished, your dialog might resemble mine (see Figure 10.16).
Figure 10.16. Enter the path to the Vecta Corp website in the URL text box. [View full size image] 6. Click OK. 7. If the selected event isn't onClick, change it to onClick now. When you've finished, save your work and test the page in the browser by choosing F12 (Option+F12). When the page loads, click the Visit Vecta Corp button. You should immediately be redirected to the website. Jump Menu and Jump Menu Go In the previous chapter, we used the Jump Menu object located in the Forms category of the Insert bar to build a drop-down menu-based navigation system. Remember that we clicked the icon in the Insert bar to launch the Jump Menu dialog, which allowed us to dynamically add items to a list. When we finished adding items, we clicked OK, and the finished product ended up looking something like Figure 10.17 (also available by opening jumpmenu.html located in the project folder). Figure 10.17. The Jump Menu form object allowed us to build a drop-down menu-based navigation system. [View full size image]
The problem with the Jump Menu form object is that you can't simply reselect the icon within the Insert bar to relaunch the Jump Menu dialog if you needed to make edits to an existing Jump Menu. Fortunately, the Jump Menu dialog is just a front for the Jump Menu and Jump Menu Go behaviors. Notice that selecting the Drop Down Menu or Button form objects displays the Jump Menu and Jump Menu Go behaviors in the Behaviors panel. Even better, if you double-click the action in the Behavior list or right-click (Control+click) the action and select Edit Behavior from the context menu, the Jump Menu dialog reopens—complete with the original menu items you entered (see Figure 10.18). Figure 10.18. Double-click the action in the Behavior list to reopen the original Jump Menu dialog, complete with the menu items you originally entered. [View full size image]
This isn't the behavior's only use. You can use the Jump Menu and Jump Menu Go behaviors to build a Jump Menu complete with a Go button from scratch. To do this, follow these steps: 1. If you haven't done so already, open the jumpmenu.html page. 2. Place your cursor just after the existing Go button and press Enter. 3. Insert a new Drop Down Menu form object by clicking the List/Menu icon located in the Forms category of the Insert bar. When the Add Form Tag dialog appears, select Yes. Name the drop-down menu JumpMenu. 4. Now insert a new Button form object next to the Drop Down Menu by clicking the Button icon in the Forms category of the Insert bar. Give the new Button the text label Go and change the Action to None to prevent the form from trying to submit or reset. 5. With the Drop Down Menu selected, choose the Jump Menu behavior from the Add (+) menu in the Behaviors panel. The Jump Menu dialog appears. 6. Customize the Jump Menu by adding menu items to the list as you did in the previous chapter. When you're finished, click OK. 7. Now select the Go button and choose the Jump Menu Go behavior from the Add (+) menu in the Behaviors panel. The Jump Menu Go dialog appears similar to Figure 10.19. Figure 10.19. The Jump Menu Go dialog allows you to select a Drop Down Menu control to associate the Go button with. [View full size image] 8. As you can see, the dialog allows you to select an existing Drop Down Menu located within a form. Because we named our Drop Down Menu JumpMenu, select it from the list and click OK. Save your work and test the page within the browser by choosing F12 (Option+F12). Selecting an item from the list should automatically redirect you to the appropriate page. However, the first item in the list is already selected; selecting it doesn't force the menu to jump to the appropriate page. Because this is the case, click the Go button. Note It may seem odd that the initially selected item in the menu doesn't jump when selected. If you select the menu within the Document window and look at its event in the Behaviors panel, you'll notice that it uses the onChange event. The drawback to this event is that it doesn't recognize the action of selecting an already selected item as a change in the menu. For this reason, the Go button is an integral part of the functionality of the Jump Menu. Selecting the Go button at any time, even with an initially selected item, forces the Jump Menu to respond.
Open Browser Window Our next stop is the infamous pop-up window. Otherwise known as the Open Browser Window behavior, you can use this functionality as a way to open internal and external websites in a separate preconfigured window with specific width and height dimensions, among other functionalities. We've all seen them, right? The small secret cameras or travel advertisements that appear when you visit your favorite website are examples of this behavior. Although I would certainly discourage you from using this behavior for purposes such as these, there are, in fact, many less obtrusive uses for this behavior. To demonstrate the use of the Open Browser Window behavior, follow these steps: 1. Reopen the behaviors.html page if it's not already open. 2. Place your cursor just after the previous Visit Vecta Corp button and press Enter. 3. Insert a new Button form object by clicking the Button icon located in the Forms category of the Insert bar. When the Add Form Tag dialog appears, click No. Give the new Button the text label Open Vecta Corp and change the Action to None to prevent the form from trying to Submit or Reset a nonexistent form. 4. With the Button selected, choose the Open Browser Window behavior from the Add (+) menu in the Behaviors panel. The Open Browser Window dialog appears, as it does in Figure 10.20. Figure 10.20. Use the Open Browser Window dialog to customize properties for the pop-up window. [View full size image] 5. The open browser Window dialog allows you to customize numerous properties, including the URL to display, the width and height of the window to open the URL in, and a simple name to assign to the pop-up window. You can also customize various attributes including whether scrollbars should be added, whether to allow the user to resize the browser window after it's been opened, and so on. For our purposes, enter the URL http://www.vectacorp.com in the URL to Display text box and assign the dimensions 400 for width and 400 for height. When you've finished, click OK. As expected, the onClick event is assigned to the Button form object. Of course, if we really wanted to annoy our users, we could change that event to onLoad. That alteration would cause the Open Browser
Window action to execute when the page is loaded as opposed to when the user physically clicks the button. In an effort to maintain retention rates among our users, we'll keep the onClick event so that our users have to click for themselves to see the pop-up window. To preview the finished product, save your work and preview the page in the browser by selecting F12 (Option+F12). As you can see from Figure 10.21, clicking the button opens the Vecta Corp website in a small 400x400 window. Figure 10.21. The Vecta Corp website appears within a small browser window. [View full size image] Notice that the pop-up window is fairly plain and doesn't allow for much interaction in terms of scrolling to see all the website content or even resizing the window to make it bigger. If you want this functionality for your pop-up windows, the Open Browser Window dialog allows you to customize various attributes, including setting check boxes for scrollbars and resize handles. In fact, the Open Browser Window dialog supports the following functionality (accessible by double-clicking the behavior in the Behaviors panel): URL to display— In this text box, enter the URL of the site you'd like to display within the pop-up window. Window width and height— Enter the width and height (in pixels) at which you want the pop-up window to initially display in these text boxes. Attributes— Use these check boxes to set whether you want to display the navigation toolbar, a location toolbar, a status bar, a menu bar, enable scrollbars, or even provide resize handles. For our example, let's check the Scrollbars as Needed option and the Resize Handles option.
Window name— Enter a value in this text box to uniquely name the browser window. This value is optional because Dreamweaver will assign your window a unique name if none is provided. Save your work and preview the page in the browser by choosing F12 (Option+F12). This time, when the pop-up window opens, you are free to resize and scroll through the pop-up window as needed. Preload Images Typically added to image rollovers (covered later in this chapter) or when the page loads for the first time, the Preload Images Behavior can be used as a way of forcing the browser to load certain elements first, before other elements on the page are rendered. This behavior is beneficial when working with image rollovers because they require two images to function correctly. As you'll see, when the page loads, a user sees the first image. As soon as the user's cursor rolls over the image, an event (typically the onMouseOver event) kicks in and calls necessary JavaScript code that changes the image to a second, usually different- colored image. On slower connections, the second image might appear as a broken image for a split second while it is loading. To avoid showing a broken image icon (even for a short time), use the Preload Images behavior. This behavior forces the browser to load all images that are viewable on the page and to preload any images that might not be viewable on the page but must be queued for use in an effect such as a rollover. This behavior is automatically added for you when working with rollovers in Dreamweaver. As a matter of completeness, Adobe chooses to continue making this behavior available. Set Nav Bar Image Recall that in Chapter 2, "Building a Web Page," we used the Navigation Bar dialog, available by selecting Insert, Image Objects, Navigation Bar, to build a fully functional navigation bar complete with images that changed color when the user's cursor rolled over them. Remember that the dialog allowed us to add navigation bar elements; give the navigation bar element a unique name; add up, over, and down image states; set alternate text; give the element a link; set the layout of the navigation bar (in terms of using tables for structure); and even set whether the images should preload (covered in the previous section). After we configured the dialog, the navigation bar—also available by opening the navbar.html file—looks similar to Figure 10.22. Figure 10.22. The navigation bar was built using the Navigation Bar dialog. [View full size image]
The beauty of the Navigation Bar dialog is that it allowed us to work with the navigation bar as a whole, rather than adding individual rollover images five different times as we would have had to do with the Rollover Image option, also available in the Image Object submenu within the Insert bar and covered in Chapter 2. Tip You can still work with the navigation bar as a whole by reselecting the Navigation Bar option in the Image Objects submenu. Although you're not able to build another navigation bar on the same page, selecting this option when you have an existing navigation bar reopens the Navigation Bar dialog with your configured values prepopulated. But what if we wanted to work with individual navigation bar elements within the context of the whole navigation bar? Even better, does a behavior exist for changing a second image on the page to something else while I roll over an element within my navigation bar? The answer is yes! This is where the Set Nav Bar Image behavior comes in. The Set Nav Bar Image behavior, aside from allowing you to work with individual navigation bar elements independently of the others, also allows you to set the image state of a second image anywhere on the page dynamically when you roll over an image in the navigation bar. A perfect example of when you'd want to use this type of functionality is when you're working with a navigation bar of employee names. In the example that we'll build, we'll have images that represent the executive team of our fictitious Vecta Corp company. Initially, we'll display Ferris's headshot because he's the founder; but as a user rolls over names in the navigation bar, we'll use the Set Nav Bar Image behavior to dynamically change the headshot of Ferris to the headshot of the person whose name you've rolled over. To do this, follow these steps: 1. Create a new page by choosing File, New. The New Document dialog appears. Choose Blank Page, HTML, , and click Create. The new page will appear. Immediately save the page as navbar.html within the root of your project (same location as behaviors.html). 2. With your cursor on the page, navigate to the Rollovers folder, located within the Images folder for your defined site in the Files panel, and drag out the four images titled xferris_up.gif, xagnes_up.gif, xherbert_up.gif, and xpat_up.fig. Give each image a unique name in the Name field in the Property inspector. Also, make sure to add line breaks between the images so that the finished version resembles a vertically structured navigation bar similar to Figure 10.23. Figure 10.23. Add the four nav bar images to the page, creating line breaks between them. [View full size image]
3. Add a few more line breaks and drag the head_ferristhefounder.gif image into the page. This image is located in the Images folder of the project. Name the image ferrisheadshot in the Name text box in the Properties Inspector. 4. Select one of the navigation bar images, such as Agnes's (xagnes_up.gif), and select the Set Nav Bar Image behavior from the Add Behavior list in the Behaviors panel. The Set Nav Bar Image dialog appears similar to Figure 10.24. Figure 10.24. Attach the Set Nav Bar Image behavior to an image in your nav bar. [View full size image]
5. The Set Nav Bar Image dialog is split into two tabs. The Basic tab contains the same customizable properties that the Navigation Bar dialog does. Because you should already be familiar with the options, I won't take the time to explain them again. The only property that we need to set here is the Over image. Select the Browse button and browse to and select the image xagnes_over.gif, which is contained within the Rollovers folder. 6. Switch to the Advanced tab. This is where you can dynamically set the image that should appear in place of the existing headshot when a user rolls over the specific nav bar image. Because we're attaching this behavior to Agnes's nav bar image, select the ferrisheadshot option from the Also Set Image list box. 7. Browse to Agnes's headshot (head_agnestheaccountant.gif) in the To Image File text box. The image is located in the Images folder of the project. 8. Click OK. To test the functionality, save your work and preview your page in the browser by choosing F12 (Option+F12). As you'll notice, rolling over Agnes's nav bar image changes Ferris's headshot to Agnes's. Rolling out of her nav bar image causes the headshot to return back to normal (to Ferris's headshot). To finish off this page, return to Dreamweaver and repeat steps 4–8 for the other three images within the navigation bar. Set Text You can use the Set Text group of behaviors to dynamically set text values within a frame, an AP Element, the browser's status bar, and a text field. To give you an idea as to how this behavior works, follow these steps:
1. Reopen or switch back to the behaviors.html page that you've been working with and place your cursor just after the Open Vecta Corp button. Press Enter. 2. Insert a new Button form object by selecting the Button icon located in the Forms category of the Insert bar. Give the new Button the text label Set Text of Status Bar and change the Action to None to prevent the form from attempting to submit or reset a nonexistent form. 3. With the Button selected, choose the Set Text of Status Bar behavior from the Set Text submenu of Behaviors available by clicking the Add (+) button in the Behaviors panel. The Set Text of Status Bar dialog appears. 4. In this dialog, enter the message that should appear in the status bar when the user clicks the button. For this example, enter the text Hello World and click OK. 5. Ensure that the onClick event is associated with the Button. Save your work and test the page in the browser by choosing F12 (Option+F12). When the page appears, click the Set Text of Status Bar button. Immediately the text in the status bar changes to read Hello World. Show-Hide Elements Similar to the functionality outlined by the Show Pop-Up Menu behavior (covered later in the chapter), the Show-Hide AP Elements behavior can be used to show or hide the contents in an AP Div when an element on the page is selected, unselected, rolled over, rolled out, and so on. To use this behavior, follow these steps: 1. Place your cursor just to the right of the Set Text of Status Bar button and press Enter. 2. Insert two new Button form objects by selecting the Button icon located in the Forms category of the Insert bar twice. When the Insert Form Tag dialog appears, click No. Change the Action for both buttons to None. 3. Change one button's text Label to read Show and the other button's text label to read Hide. 4. Select the Show button and choose the Show-Hide Elements behavior from the Add (+) menu in the Behaviors panel. The Show-Hide Layers dialog appears. 5. As you can see from the dialog, the Elements list box displays elements, including AP Divs on the page. Select the div "apDiv1" option (the AP Div that contains the vnetwork.gif image) and click the Show button. Click OK. 6. Repeat steps 4 and 6 for the Hide button. Save your work and test the page in the browser by choosing F12 (Option+F12). You'll notice that you can click the Show and Hide buttons to either show or hide the AP Div on the page. Swap Image and Swap Image Restore Similar to the Rollover Image option available from the Image Objects submenu in the Insert menu, the Swap Image behavior allows you to quickly construct a rollover for a specific image. Whereas the Rollover Image dialog provides an intuitive interface for quickly creating a rollover image, the Swap Image behavior provides the flexibility to manipulate more advanced features (such as the ability to swap multiple images from one triggering action) associated with rollover images. Working with the Swap Image behavior is just as easy as working with the Rollover Image dialog, but requires a few more steps. To work with the Swap Image behavior, follow these steps:
1. Place your cursor just after the previous Show and Hide buttons and click Enter. 2. Find the image home_up.gif which is located within the Images\Rollovers folder and drag it into the page. 3. With the image selected, uniquely identify it by typing the name home into the Image Name text box located in the Property inspector. 4. Select the Swap Image behavior from the Add (+) menu in the Behaviors panel. The Swap Image dialog appears similar to Figure 10.25. Figure 10.25. The Swap Image Behavior dialog allows you to create a rollover for an image. [View full size image] As you can see from Figure 10.25, the following functionality is revealed within the dialog: Images— Use this list box to select the image you want to create a rollover for. As you can see, our newly dragged in image home appears within the list. It's important to note that the Swap Image behavior is attached to a single object, in our case the Home button. Setting the source to multiple images within this dialog would cause other images to swap states when I rolled over the Home image. If this is not the desired effect, attach a separate Swap Image behavior to each and every element that will have a rollover effect. Set source to— Browse to the file you want to use as the rollover. For our example, we'll browse to the home_over.gif image located in the Rollovers folder. Preload images— A few sections ago, we discussed the Preload Images behavior. In that discussion, I mentioned that preloading images, especially when working with rollover images, is important. Preloading images prevents a user with a slow connection from seeing a broken image while the secondary image is trying to load when the mouse rolls over an image. I recommend leaving this option checked at all times. Restore images onMouseOut— Unchecking this box causes the image to remain in its rollover state. Checking this box ensures that the rollover image returns to its original state when the user's mouse rolls back out of the image.
5. After you've added the Set Source to path, click OK. 6. Before you test the functionality, make sure that the Behaviors panel lists the onMouseOver event for the Swap Image behavior and the onMouseOut event for the Swap Image Restore behavior. If they're not properly associated, do that now by choosing the correct event. Save your work and test the page in the browser by choosing F12 (Option+F12). As you'll see, rolling over the image causes the secondary image to appear. Timeline As you'll see in Chapter 16, "Working with the Timeline," you can use behaviors outlined within the Timeline submenu in the Behaviors list to add interactivity between elements on the page and animation in a timeline. Behaviors in this submenu include functionality for playing a timeline, stopping a timeline, or going directly to a frame within a timeline. Validate Form One of the last behaviors included in Dreamweaver's Behaviors panel is the Validate Form behavior. You can use this behavior as a way of validating or requiring inputs within form objects. For instance, in our contactus.html page, we outlined various text field form objects. Because these form objects are responsible for collecting vital information about a customer, we'll want to make sure that the user enters values into these fields before submitting the form. Furthermore, we'll want to make sure that the inquiring customer enters a correctly formatted email. This and more is possible with the Validate Form behavior. Using the Validate Form behavior is as simple as selecting the form to which you want to attach the behavior, selecting the behavior, and configuring the fields to be validated in the dialog. To do this, follow these steps: 1. Open the contactus.html page. 2. Select the form. You can tell the form has been selected when all objects within the form are highlighted. You can also tell that the form is highlighted when the Property inspector becomes a Forms Property inspector. 3. With the form selected, choose the Validate Form behavior available by clicking the Add (+) button in the Behaviors panel. The Validate Form Behavior dialog appears, as shown in Figure 10.26. Figure 10.26. The Validate Form Behavior dialog allows you to set fields whose content will be verified. [View full size image]
As you can see from the dialog, the following functionality is revealed: Fields— Select a named text field from this list box to set its validation rules. The naming convention in this list box is such that the type of form object is listed (input) followed by its name in parentheses ("name", "companyname", "address", and so on). Value: Required— Selecting a form object from the Fields list and then checking this box guarantees that the specific form object will be required by the browser. If a user fails to add at least one character value before submitting the form, an error message appears, and the form is not submitted. Accept: Anything— Selecting a form object from the Fields list and then selecting this option button instructs the browser to accept anything within the form object, even if it's left empty. If the Required check box is also selected, any value will be accepted in the form object and the form object must not be left empty. Accept: Number— Selecting a form object from the Fields list and then selecting this option button instructs the browser to accept any numeric value in the form object. However, the form object can be left empty. If the Required check box is also selected, a numeric value must be entered into the form object. Accept: Email address— Selecting a form object from the Fields list and then selecting this option button instructs the browser to accept any value within the form object that appears to resemble an email address. However, the form object can be left empty. The formula for determining a valid email address is at least one character, an @ symbol, at least one more character, a . (period) symbol, followed by at least one more character. If the Required check box is selected, a value must be entered into the form object that resembles an email address. Accept: Number from— Selecting a form object from the Fields list and then selecting this option button instructs the browser to accept any numeric value within the form object that falls between a range of values specified within the first and second text boxes. However, the form object can be left empty. If the Required check box is selected, a numeric value must be entered into the form object that falls between a range of values specified within the first and second text boxes. 4. For our demonstration, set all the form objects as required. However, make sure that the zip field accepts only a number. When you've finished, click OK. 5. Make sure that the event associated with the behavior is onSubmit. If it's not, select that event now.
Save your work and test the page in the browser by choosing F12 (Option+F12). As you can see from Figure 10.27, an alert message is displayed when you try to submit the form without entering values within the required text fields. Figure 10.27. An alert message is displayed when you try to submit the form without entering values into fields that are set as required. [View full size image] Deprecated Behaviors In Dreamweaver CS3, five behaviors that have existed in previous versions of Dreamweaver are marked as deprecated in this current version. These behaviors are Check Browser Control Shockwave or Flash Play Sound Show Pop-Up Menu Hide Pop-Up Menu Although using these behaviors is still possible, don't expect support from Adobe should your website not work correctly as a result of using these behaviors. Additionally, the deprecated status of these behaviors
should tip you off to the fact that inclusion of these behaviors in future versions of Dreamweaver isn't likely. Check Browser It's considered common practice in web development to create pages suited for the variety of browsers currently available. The reason for this is simple: Users who visit your website using Internet Explorer 7.0 will have a much richer experience than those visiting your website using Netscape 4. To accommodate both users, you might decide to create two different websites—one that includes limited functionality and is mostly text based, and another much richer design that could potentially include CSS, JavaScript, and perhaps Flash animations. The dilemma is that you'll need some mechanism for detecting the type of browser the user is using to visit your site and then react to that discovery by displaying the appropriate content. The Check Browser behavior does just this. To demonstrate this behavior, follow these instructions: 1. Place your cursor next to the Home image and click Enter. Immediately add a Button form object by selecting the Button icon from within the Forms category in the Insert bar. 2. When the Add Form Tag dialog appears, click No. 3. With the Button form object selected, change the Action to None so that the button doesn't try to submit or reset a nonexistent form when it's clicked. You can also change the Label to read anything you'd like. I'll change mine to say Check Browser. 4. With the Button object selected, choose the Check Browser behavior from the Add (+) menu in the Behaviors panel. Remember, the Check Browser behavior is contained within the ~Deprecated submenu of behaviors. The Check Browser dialog appears. 5. The dialog allows you to check for Netscape versions before or after 4.0 and for Internet Explorer versions before or after 4.0; you can react accordingly by specifying the URL of the web page you want to use if the browser is 4.0 or later and an alternative URL if the browser is earlier than version 4.0. A third drop-down menu specifies which URL to redirect to if it's any browser other than Netscape or Internet Explorer 4.0. To test the functionality, let's add the path behaviors.html to the URL text box and altpage.html to the Alt URL text box. When you've finished, the results will look similar to Figure 10.28. Figure 10.28. Customize the Check Browser dialog so that it goes to behaviors.html if the browser version is Netscape or Internet Explorer version 4.0 or later. [View full size image]