CIS 3630 - Test 2c.txt

• In a computer term, any item that can be individually selected and acted upon
• Ex.: an object can be an image that appears in a Web browser

Expression Web behaviors generate JavaScript code without you having to write the code

• What you want the object to perform, such as one image being swapped for another
• Action: Another way to refer to a JavaScript behavior
• Behavior: The action you want an object to perform

• Similar to CSS Properties task pane in that it has 2 columns:
• 1. Event: lets you see the event that triggers the behavior (in the left column)
• 2. Action/behavior: lets you see the action that corresponds to the event (in the right column)

• 1. Call Script: Inserts JavaScript without having to switch to Code view
• 2. Change Property/Change Property Restore: Changes the characteristics of an object
• 3. Check Browser: Checks to see if the visitor has a particular browser installed
• 4. Check Plug-in: Checks to see if the visitor has the necessary plug-in
• 5. Go to URL: Associates a form object with a link
• 6. Jump Menu/Jump Menu Go: Creates a list of links within a list box
• 7. Open Browser Window: Opens a new browser window in the same or different window
• 8. Play Sound: Plays a background sound
• 9. Popup Message: Displays a pop-up message
• 10. Preload Images: Loads images before the page itself loads
• 11. Set Text: Creates a marquee (a scrolling message in the lower-left corner of the Status Bar)
• 12. Swap Image/Swap Image Restore: Replaces one image with another when the mouse hovers over an image

• If you work with JavaScript, you will appreciate the following behaviors in particular: Call Script, Change Property, Change Property Restore, Check Browser, Check Plug-in, and Go to URL
• If you have content that should be viewed only in a particular browser or particular browser version, then the Check Browser and Go to URL will be of interest to you
• If you make extensive use of multimedia on your Web pages and need to check whether the visitor has a particular plug-in installed (such as Flash or Shockwave), then the Check Plug-in and Go to URL behaviors will be of great interest to you

• Triggers an action to take place
• Ex.: a mouse click, moving the mouse pointer, or the depression or release of a key on the keyboard
• When you create the behavior, Expression Web also chooses the event that triggers the behavior

• 1. Onclick: An object is clicked
• 2. Ondblclick: An object is double-clicked
• 3. Onmousedown: The user's left mouse button is down
• 4. Onmouseup: The user's left mouse button is released
• 5. Onmouseout: The user's mouse pointer rolls out of an object
• 6. Onfocus: An object is highlighted
• 7. Onblur: An object loses its highlighted state
• 8. Onload: The page loads
• 9. Onunload: The browser is closed or a different page is loaded
• 10. Onselect: Text is selected
• 11. Onresize: A window or frame is resized

• A list of links in a table or grid-like order
• Ex.: it is very common to have a list of links running horizontally below the logo or banner image at the top of the page
• A series of links grouped horizontally or vertically
• If you want the nav bar and the logo below it to be the same width, align the nav bar with the horizontal ruler bar to determine the pixel width of the nav bar

• Changes its appearance when the pointer hovers over the image or if the user clicks the image
• This change in the appearance of a button (or any image) when the pointer passes over it is called a rollover effect
• A button that executes a behavior, such as a swap image

The change in the appearance of a button (or any image) when the mouse pointer passes over it

• Open the target page (the page to which you want to link)
• Open the referring page (the page that will have the interactive button)
• Click Insert on the menu bar, and then click Interactive Button
• In the Interactive Button's dialog box, click the Button tab (if necessary) and click the button type
• In the Text text box, type the button text
• In the Link text box, type the URL of the target page of the button link
• Optionally, click the Font or Image tabs to make further changes to the button's appearance

• Keep the button text to one or two short words
• Interactive buttons are created by using a programming language called JavaScript; browser must be JavaScript enabled for the interactive behaviors to be displayed correctly

• 1. Original font color: the button color before any actions; the choice is the a:link pseudo-selector
• 2. Hovered font color: the button color when the pointer hovers over the buttons; the choice is the a:hover pseudo-selector
• 3. Pressed font color: the button color when the user clicks the button; the choice is the a:active pseudo-selector

• Alternatively, to edit a button, you can right-click the button and then click Button Properties from the shortcut menu
• The Font tab in the Interactive Button's dialog box allows you to choose the font, font size, color, and horizontal and vertical alignment
• To create more buttons, you do not have to repeat the steps to create the first button; you can merely copy the button as many times as you need it
• Keep the button text to one or two short words
• Buttons should have a uniform appearance. Although you can change the size of a button, make sure all the buttons are the same size or nearly the same size

• Double-click the interactive button. Alternatively, right-click the interactive button and click Button Properties from the shortcut menu. Make the following choices in the Interactive Buttons dialog box
• Use the Button tab to change the button style, text, or target link
• Use the Font tab to change the font, font style, point size, link color, hover link color, active link color, and horizontal or vertical alignment for the button text
• Use the Image tab to change the button width or the height, and to choose whether you want a hover state or pressed state button image

• Buttons should have a uniform appearance. Although you can change the size of a button, make sure all the buttons are the same size or nearly the same size
• Font size should remain relatively small

• Right click the button you want to copy and then click Copy from the shortcut menu
• Position the insertion point where you want to paste the button
• Right-click the mouse, and then click Paste from the shortcut menu

Before you click Paste to paste a copy of the button, you can press the Spacebar one or more times to create some space between buttons

• Button images represent the 3 link states - link, hover and active - which are the different manners in which the link may appear to the user
• Each state is represented by a separate image
• Interactive buttons are created by using a programming language called JavaScript; browser must be JavaScript enabled for the interactive behaviors to be displayed correctly

• Click Task Panes on the menu bar, and then click Behaviors
• In the Behaviors task pane, click the Insert button, and then click Jump Menu
• In the Jump Menu dialog box, Click Add
• Type a name for the first item in the Choice text box then click the OK button in the Add Choice dialog box
• Type a URL in the Value text box

• Creates a drop-down list box on a Web page
• A drop-down list box is ideal for conserving screen space when there is a lengthy list of choices
• A Windows control that displays several choices in a drop-down menu

• Expression Web has a number of behaviors that you should consider avoiding:
• 1. Popup Message: used to create and display a Windows alert box; the user must click the OK button to clear the message from the screen. Most people find pop-up messages intrusive and annoying. If users have to click an extra OK button with each visit to your home page, they will think twice about visiting.
• 2. Set Text behavior: used to create a marquee, a scrolling message in the lower-left corner of the Status Bar. Marquees were popular late in the last century. At one point, Windows Explorer even supported its own proprietary [marquee] tag. Today, marquees are considered distracting and amateurish.
• 3. Play Sound: must be used with great discretion. Most people, particularly in an office setting, do not want to disturb others working in close proximity to them. If you visit a Web site that plays music or some other audio effect, it can be annoying to your coworkers. Even if you are surfing at home, the Web site's background music can grow tiresome over time. Do not use the Play Sound behavior unless there is a compelling reason to do so.

• The behavior in which one image is replaced by another when the pointer passes over the first image
• In creating the images for the button bar earlier, you were actually creating the code for a swap image

• 1. Image of the button
• 2. Image of the button when the pointer hovers over the button
• 3. Image of the button when the user clicks the button

• If you display Code view, you will see that these images also are the JavaScript events onmouseover and onmousedown
• The button images are swapped depending on what event has occurred; perhaps the user has clicked an image, passed the pointer over an image, and so forth
• The two images used for the swap images should have the same width and height

• In the Behaviors task pane, click the Insert button
• Click Swap Image from the shortcut menu
• Click the name of the image to be acted on
• Click the Browse button
• Locate the image to swap with the original image; double-click the image

The two images used for the swap images should have the same width and height

• In the Behaviors task pane, click the Insert button
• Click Open Browser Window from the shortcut menu
• In the Open Browser Window dialog box, click the Go to URL text box, and then type the URL of the browser window to be opened
• Alternatively, click the Browse button to open the Edit Hyperlink dialog box. Click the Browse the Web button and navigate to the URL. If necessary, copy the URL in the Address text box of the browser and paste the URL into the Address text box in the Edit Hyperlink dialog box.
• Optionally, in the Open Browser Window dialog box, make choices for the window width or height. Click the check boxes to select the attributes you want the browser window to have

If you want to modify an Open Browser Window behavior, click the image. In the Behaviors task pane, double-click Open Browser in the Actions column.

• An image that is divided into sections, so that the same image serves as the location for several links
• A region of an image that serves as a link

An area on the image that, when clicked, will display the target page or Web site

• In the Behaviors task pane, click the Insert button
• Click Open Browser Window from the shortcut menu
• In the Open Browser Window dialog box, click the Go to URL text box, and then type the URL of the browser window to be opened
• Alternatively, click the Browse button to open the Edit Hyperlink dialog box. Click the Browse the Web button and navigate to the URL. If necessary, copy the URL in the Address text box of the browser and paste the URL into the Address text box in the Edit Hyperlink dialog box.
• Optionally, in the Open Browser Window dialog box, make choices for the window width or height. Click the check boxes to select the attributes you want the browser window to have

If you want to modify an Open Browser Window behavior, click the image. In the Behaviors task pane, double-click Open Browser in the Actions column.

• In Design view, drag the image that will be the source of the image map to the desired place in the Editing window; insert alternate text for the image, and then click the OK button
• Click View on the menu bar, point to Toolbars, and click Pictures to display the Pictures toolbar
• Click the image
• On the Picture toolbar, click either the Rectangular Hotspot button, the Circular Hotspot button, or the Polygonal Hotspot button
• On the image map:
• * To draw a rectangle, click the upper-left corner and drag the pointer to create the hotspot
• * To draw a circle, click the center of the circle and drag the pointer down to expand the circle to create the hotspot
• * To draw a polygon (any shapes other than rectangles or circles), click to create each vertex of the polygon shape; to complete the shape, click the first vertex you created or double-click the mouse
• In the Insert Hyperlink dialog box, locate the file to which you want to link; click the filename

• When you create hotspots in Expression Web, a square is a rectangle, an oval is a circle, and a triangle is a polygon
• It's okay if the hotspots overlap a little
• The image map used for hotspot is created using the XHTML [map] tag

It is common to develop a Web site at your desktop computer or laptop computer at home or work. At some point, however, the pages you develop for your Web site will have to be published (uploaded) to a file server so that the pages can be viewed on the Web. Expression Web uses relative file addressing, in which a file is linked in relation to another file at the same Web site and stored in the same folder on the same computer or on the same file server. An absolute file address specifies the entire directory path to a linked file. If you are developing a Web site on your desktop or laptop computer, don't use an absolute address to point to a location on your computer for your links. If you do, the links won't work once the page has been moved to the server, because the path that leads to those files or images will no longer be correct. It's okay to specify an absolute address if you are familiar with the directory structure of the server, but you don't want to specify a path that refers to a folder on your desktop computer. If the link is to a file on a different file server or at a different Web site, the link must contain an absolute file address, like so: http://www.ford.com/index.html.

Corner point of a polygon

• Is a toggle; you click the button to show the hotspots, and you click the button again to restore the image
• Alternatively, you can click anywhere outside the image map to restore the image
• You can't modify the shape or change the hotspot when you highlight the hotspots

• If necessary, display the Pictures toolbar
• In Design view, click anywhere on the image map, and then do one or more the following:
• * To move a hotspot, click within it and drag the hotspot to a different location on the image map
• * To resize a rectangle or circle hotspot, click within the hotspot and drag a sizing handle
• * To resize a polygon hotspot, click a vertex; when the pointer turns into the move pointer (a four-headed arrow), click and drag the vertex to change the polygon shape
• * To modify the hyperlink of a hotspot, double-click the hotspot; in the Edit Hyperlink dialog box, set the Address box to the hyperlink you want
• * To delete a hotspot, click the hotspot and press the Delete key
• To highlight hotspots:
• * In Design view, click anywhere in the image map
• * On the Pictures toolbar, click the Highlight Hotspots button; click it again or click outside the image map to return to normal view

The font color when the pointer passes over a link or a swap image

One of the XHTML pseudo-selectors, such as link, hover, and active

The color of a link before it has been linked

The color of a link when the user clicks the link

• Lossless: can be put back the way it was
• Lossy: cannot be put back, flatter than original, lack of depthness, throw information out and never put it back the way it was but still be good enough, such as MP3, images/photos