Web Design Chapter 5 Vocabulary Flashcards

It is a container that holds other types of content, such as images, text, and even other AP elements (nested elements). Anything you can put in an HTML document, you also can put into an AP element. The AP elements can be stacked on top of one another, placed side by side, or overlapped. They easily can be moved, dragged, or resized. Web site developers use AP elements for page layout much as they use tables. An AP element, however, provides more flexibility than a table because it can be placed in an exact spot anywhere on the page with pixel-perfect precision. It remains in this position (relative to the top and left margins of the page) regardless of how the Web page visitor resizes the browser window or views the text size. A disadvantage of using AP elements is that older browsers do not support them. Navigator 4.0 in particular has a difficult time with AP elements and often displays them incorrectly. Dreamweaver provides two options for creating AP elements: the Draw AP Div button located on the Layout tab on the Insert bar, and the Layout Objects submenu available through the Insert menu.

AP elements are positioned using a standard x-, y-, and z-coordinate system, similar to what you would use to create a graph on graph paper. Instead of having the point of origin in the lower-left corner, however, the x- and y-coordinates correspond to the AP element’s top and left positions within the page. Absolute positioning is a component of dynamic HTML.

Determines an AP element’s stacking order when more than one element is added to a page. Determines the stacking order of the element. In a browser, higher-numbered elements appear in front of lower-numbered ones. The z-index values can be positive or negative. The stacking order can be changed through the AP Elements panel.

Assigns a unique name to identify the element in the AP Elements panel and in JavaScript code. Element names must start with a letter and can contain only standard alphanumeric characters.

Specifies the position of the element’s top-left corner relative to the top-left corner of the page, or the top-left corner of the parent element if the element is nested.

Specifies the width and height of the element in Design view. In Design view, if the content of the element exceeds the specified size, the bottom edge of the element stretches to accommodate the content. When the element appears in a browser, however, the bottom edge does not stretch unless the Overflow property is set to visible. The default unit for position and size is pixels (px). Other units include pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), and % (percentage of the parent element’s corresponding value). The abbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters.

Specifies whether the element is visible initially or not.

Does not specify a visibility property. When no visibility is specified, most browsers default to inherit.

Uses the visibility property of the element’s parent.

Displays the element contents, regardless of the parent’s value.

Hides the element contents, regardless of the parent’s value. Note that hidden elements created with ilayer (a tag unique to Netscape Navigator) still take up the same space as if they were visible.

Specifies a background image for the element.

Specifies a background color for the element. Leave this option blank to specify a transparent background.

Lets you apply CSS rules to the selected object.

Works only with the <div> and <span> tags and controls how elements appear in a browser when the content exceeds the element’s specified size. The following options are available:

• visible indicates that the extra content appears in the element.
• hidden specifies that the extra content is not displayed in the browser.
• scroll specifies that the browser should add scroll bars to the element whether or not they are needed.

• auto causes the browser to display scroll bars for the element only when the element’s contents exceed its boundaries.

Defines the visible area of an element. Specify left, top, right, and bottom coordinates to define a rectangle in the coordinate space of the element (counting from the top-left corner of the element). The element is clipped so that only the specified rectangle is visible.

The 0 point, or the location on the page where the horizontal and vertical lines meet and read 0.

What the 0 point is represented by. Is located in the Document window when the page is displayed in Design view and the rulers are displayed. Generally, this location is the upper-left corner of the Document window.

Appears when you insert an AP element. It appears in the Document window. This small yellow icon indicates that an AP element is on the page. To show the code marker, the Anchor points for AP elements check box must be selected through the Invisible Elements category in the Preferences dialog box. When the Invisible Elements option is turned on, the markers may cause the elements on the page in the Document window to appear to shift position. These markers, however, are not displayed in the browser. When you view the page in your browser, the AP elements and other objects are displayed in the correct positions. The code marker is similar in appearance to the invisible element marker that displayed when you inserted images into a Web page in Chapter 2.

Part of the CSS panel group, is helpful in managing the elements in your document. Use the AP Elements panel to prevent overlaps, to change the visibility of elements, to nest or stack elements, and to select one or more elements. All of the AP elements on a Web page are listed in the panel. The AP Elements panel contains three columns: Visibility, Name, and Z-Index.

Indicates that an element is hidden

Indicates that the element is visible.

Used to group elements. This process also is referred to as creating a parent-child relation.

A nested element is similar in concept to a nested table or a nested frame. Having a nested element, however, does not necessarily mean that one element resides within another element. Rather, it means that the HTML code for one element is written inside the code for another element. The nested element can be displayed anywhere on the page. It does not even have to touch the parent element. To create a nested element, draw the element inside an existing element while holding down the ctrl key. To unnest a nested element, drag the element marker to a different location in the Document window, or, in the AP Elements panel, drag the nested element to an empty spot.

The element containing the code for the other elements. The primary advantage of nested elements is that the parent element controls the behavior of its child elements. If the parent element is moved on the screen, the nested elements move with it. Additionally, if you hide the parent element, you also hide any nested elements. In the AP Elements panel, nested elements are indented below the parent element.

Elements that float on top of each other. In the HTML source code, the stacking order, or z-index, of the elements is determined by the order in which they are created. The first element you draw is 1, the second is 2, and so on. The element with the highest number appears on top or in front of elements with lower numbers. Stacking elements provides opportunities for techniques such as hiding and displaying elements or parts of elements, creating draggable elements, and creating animation.

An image that has one or more hotspots placed on top of it.

A designated area on an image map that the user clicks to cause an action to occur. You can create a hotspot on an image map to link to different parts of the same Web page, to link to other Web pages within the Web site or outside the Web site, or to display content within a hidden AP element.

Create a rectangular-shaped hotspot.

Define an oval or circular hotspot area.

Define an irregularly shaped hotspot.

Close the polygon shape.

The way in which it is stored and interpreted depends on the type of map. Map data is the description in the HTML code of the mapped regions or hotspots within the image.

A Web server interprets the code or map data for it.

The code for it is stored as part of the Web page HTML code. The Web browser, therefore, interprets the code for client-side maps. When a visitor to a Web page clicks a hotspot in a client-side image map, the browser processes the HTML code without interacting with the Web server. The code for client-side maps is processed faster because it does not have to be sent to a server.

Allow you to label and create a client-side image map.

A combination of an event and an action. Behaviors are attached to a specific element on the Web page. The element can be a table, an image, a link, or even a hotspot on an image map. Some of the actions you can attach to hotspots (or other elements) include Show Pop-Up Menu, Play Sound, Drag AP Element, Swap Image, and Show-Hide AP Elements. When a behavior is initiated, Dreamweaver uses JavaScript to write the code. JavaScript is a scripting language written as a text file. After a behavior is attached to a page element, and when the event specified occurs for that element, the browser calls the action (the JavaScript code) that is associated with that event. A scripting language, such as JavaScript, provides flexibility, interaction, and power to any Web site.

Used to set up an interactive process in which the user can drag or rearrange elements of the design.

Used to make visible or to hide an element and the element’s content.

Initiates whatever action is associated with the event when the mouse is moved out of an object.

Initiates whatever action is associated with the event when the mouse is moved over the object.

Initiates whatever action is associated with the event when the object is clicked.

Initiates whatever action is associated with the event when the object is double-clicked.

Lets you align elements to their left, right, top, or bottom edges. The Arrange command also provides an option to make the width or height of selected elements the same. When you are using the Arrange command, the element you select last controls the alignment selection. For instance, if you first select northern_map, then central_map, and finally southern_map, the alignment placement is determined by southern_map. Likewise, if you select the option to make the width or height of selected elements the same, the last element selected is the one whose values are used as the values for the other elements. To align two or more elements, you first must select the elements. To select multiple elements in the AP Elements panel, you select one element, hold down the shift key, and then click the other elements you want to align. A second method for selecting multiple elements is to click the border of one element, hold down the shift key, and then click the border of any other elements. When multiple elements are selected, the handles of the last selected element are highlighted in black. The resize handles of the other elements are highlighted in white. AP elements do not have to be stacked or overlapped to be aligned. The three elements you need to align, however, are stacked one on top of the other. Thus, the best method for selecting the three elements is through the AP Elements panel.

To allow you to undo one step or multiple steps at one time.

Click Insert on the Application bar to display the Insert menu and then point to Date. Click Date to display the Insert Date dialog box, which includes a list of date formats. Click the Update automatically on save check box to have Dreamweaver display the current date when the page is saved.

Provide some placement control, but not absolute precision.

Can be positioned anywhere on the page. They remain in the same position relative to the top and left margins of the window regardless of how a user resizes the browser window. Elements can be stacked on top of one another, placed side by side, or overlapped.

Add images that are hidden from view and then display when a user clicks a button or hotspot
Create pop-up menus
Position objects side by side
Drag and drop objects
Create animations
Provide feedback to right and wrong answers

Older browsers do not support elements—specifically prior to IE 4.0 and Netscape 4.0.

Move the mouse pointer to the upper-left corner where the vertical and horizontal lines intersect and then click and drag the cross hairs to the desired location.

You first must select the elements.

You select one element, hold down the SHIFT key, and then click the other elements you want to align.

Adobe Dreamweaver provides the following options for selecting elements:

• Click the name of the desired element in the AP Elements panel.
• Click an element’s selection handle. If the selection handle is not visible, click anywhere inside the element to make the handle visible.
• Click an element’s border.
• Press CTRL+SHIFT. If multiple elements are selected, this deselects all other elements and selects only the one that you clicked.
• Click the element-code marker that represents the element’s location in the HTML code.