CIS 3630 - Test 2c.txt

Card Set Information

Author:
fairlady
ID:
14867
Filename:
CIS 3630 - Test 2c.txt
Updated:
2010-04-17 09:59:11
Tags:
Chapter only
Folders:

Description:
Chapter 6 only
Show Answers:

Home > Flashcards > Print Preview

The flashcards below were created by user fairlady on FreezingBlue Flashcards. What would you like to do?


  1. Object
    • 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
  2. Behavior / action
    • 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
  3. Behaviors task pane
    • 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)
  4. 15 Expression Web behaviors
    • 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
  5. Event
    • 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
  6. List of 12 common events
    • 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
  7. Navigation bar / nav bar
    • 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
  8. Interactive button
    • 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
  9. Rollover effect
    The change in the appearance of a button (or any image) when the mouse pointer passes over it
  10. Creating an Interactive Button
    • 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
  11. Colors for 3 button states
    • 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
  12. Editing an Interactive Button
    • 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
  13. Copying an Interactive Button
    • 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
  14. 3 Link states
    • 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
  15. Creating a Jump Menu
    • 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
  16. Jump Menu
    • 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
  17. How interactive should you be?
    • 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.
  18. Swap Image behavior
    • 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
  19. 3 Images for the buttons
    • 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
  20. Creating a Swap Image
    • 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
  21. Opening a new Browser Window
    • 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.
  22. Image map
    • 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
  23. Hotspot
    An area on the image that, when clicked, will display the target page or Web site
  24. Creating a hotspot (1)
    • 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.
  25. Creating a hotspot (2)
    • 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
  26. Understanding relative and absolute file addressing
    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.
  27. Vertex
    Corner point of a polygon
  28. Highlight Hotspots button
    • 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
  29. Modifying a hotspot
    • 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
  30. Hovered font color
    The font color when the pointer passes over a link or a swap image
  31. Link state
    One of the XHTML pseudo-selectors, such as link, hover, and active
  32. Original font color
    The color of a link before it has been linked
  33. Pressed font color
    The color of a link when the user clicks the link
  34. Lossless vs. lossy comprehension
    • 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

What would you like to do?

Home > Flashcards > Print Preview