front 1 AP element | back 1 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. |
front 2 Absolute positioning | back 2 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. |
front 3 z-index | back 3 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. |
front 4 CSS-P Element | back 4 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. |
front 5 L and T | back 5 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. |
front 6 W and H | back 6 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. |
front 7 VIS | back 7 Specifies whether the element is visible initially or not. |
front 8 Default | back 8 Does not specify a visibility property. When no visibility is specified, most browsers default to inherit. |
front 9 Inherit | back 9 Uses the visibility property of the element’s parent. |
front 10 Visible | back 10 Displays the element contents, regardless of the parent’s value. |
front 11 Hidden | back 11 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. |
front 12 BG image | back 12 Specifies a background image for the element. |
front 13 BG color | back 13 Specifies a background color for the element. Leave this option blank to specify a transparent background. |
front 14 Class | back 14 Lets you apply CSS rules to the selected object. |
front 15 Overflow | back 15 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:
|
front 16 Clip | back 16 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. |
front 17 Ruler origin | back 17 The 0 point, or the location on the page where the horizontal and vertical lines meet and read 0. |
front 18 Ruler-origin icon | back 18 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. |
front 19 Code marker | back 19 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. |
front 20 AP Elements panel | back 20 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. |
front 21 Closed-eye icon | back 21 Indicates that an element is hidden |
front 22 Open-eye icon | back 22 Indicates that the element is visible. |
front 23 Nesting | back 23 Used to group elements. This process also is referred to as creating a parent-child relation. |
front 24 Child element | back 24 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. |
front 25 Parent element | back 25 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. |
front 26 Stacking order | back 26 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. |
front 27 image map | back 27 An image that has one or more hotspots placed on top of it. |
front 28 hotspot | back 28 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. |
front 29 Rectangular hotspot tool | back 29 Create a rectangular-shaped hotspot. |
front 30 Circle hotspot tool | back 30 Define an oval or circular hotspot area. |
front 31 Polygon hotspot tool | back 31 Define an irregularly shaped hotspot. |
front 32 Pointer hotspot tool | back 32 Close the polygon shape. |
front 33 map data | back 33 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. |
front 34 server-side maps | back 34 A Web server interprets the code or map data for it. |
front 35 client-side maps | back 35 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. |
front 36 map name and hotpot tools | back 36 Allow you to label and create a client-side image map. |
front 37 Behavior | back 37 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. |
front 38 Drag AP Element | back 38 Used to set up an interactive process in which the user can drag or rearrange elements of the design. |
front 39 Show-Hide elements | back 39 Used to make visible or to hide an element and the element’s content. |
front 40 onMouseOut | back 40 Initiates whatever action is associated with the event when the mouse is moved out of an object. |
front 41 onMouseOver | back 41 Initiates whatever action is associated with the event when the mouse is moved over the object. |
front 42 onClick | back 42 Initiates whatever action is associated with the event when the object is clicked. |
front 43 onDblClick | back 43 Initiates whatever action is associated with the event when the object is double-clicked. |
front 44 Arrange command | back 44 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. |
front 45 Purpose of the History Panel | back 45 To allow you to undo one step or multiple steps at one time. |
front 46 How to add a Date Object | back 46 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. |
front 47 Tables | back 47 Provide some placement control, but not absolute precision. |
front 48 Elements | back 48 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. |
front 49 DHTML effects | back 49 Add images that are hidden from view and then display when a user
clicks a button or hotspot |
front 50 A disadvantage of using elements is that | back 50 Older browsers do not support elements—specifically prior to IE 4.0 and Netscape 4.0. |
front 51 To move the 0 point (of the ruler), | back 51 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. |
front 52 To align two or more elements, | back 52 You first must select the elements. |
front 53 To select multiple elements, in the AP Elements panel, | back 53 You select one element, hold down the SHIFT key, and then click the other elements you want to align. |
front 54 Selecting stacked elements | back 54 Adobe Dreamweaver provides the following options for selecting elements:
|