1 / 18

Chapter 10

Chapter 10. Positioning Objects with AP Div Tags. Chapter 10 Lessons. Introduction Insert an AP div Set the position and size of an AP element Add content to an AP element Set AP div properties. Introduction. Introduction.

baxter
Download Presentation

Chapter 10

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 10 Positioning Objects with AP Div Tags

  2. Chapter 10 Lessons Introduction • Insert an AP div • Set the position and size of an AP element • Add content to an AP element • Set AP div properties

  3. Introduction Introduction • CSS page layout blocks allows you to use containers formatted with CSS styles to place content on web pages • Images • Text • Flash movies • Any other page elements • Div Tags: HTML tags used to set the appearance and position of CSS containers • AP Div Tags: Absolute Positioned Div tag with a fixed position • Dreamweaver creates a ID type style when created

  4. Introduction Using AP Div Tags • Let you control the appearance of elements on your web page • Allow you to stack your information in a vertical pile, allowing for just one piece of information to be visible at a time • Are treated as their own documents, so you can easily change their contents • Add behaviors to your Div tags with JavaScript • Client-side script – the commands from the program are executed on the user’s computer • Server-side script – executed on the web server

  5. Introduction Using AP Div Tags – Behaviors • Behaviors are preset pieces of JavaScript code that can be attached to page elements, such as an AP Div tag. • A behavior instructs the page element to respond in a specific way when an event occurs, such as when the mouse pointer is positioned over the element. • Behaviors are attached to page elements usingActionScript • Flash scripting language used to add interactivity to movies, control objects, exchange data, and create complex animation.

  6. Lesson 1: Insert an AP Div Understanding AP Elements • Div tags that are absolutely positioned, or assigned a fixed position on a web page • AP div tags can be used to • Create special effects on a Web page • Stack elements on top of each other • Create dynamic pages • Lay out a Web page • To insert an AP element: • Insert Panel Layout Category Draw AP Div button Drag to draw rectangular shape anywhere on your page • Insert menu  Layout Objects  AP Div command • To change settings • Preferences dialog box for all AP elements • Property inspector for a specific AP Element

  7. Lesson 1: Insert an AP Div Using Guides • As you work with AP divs, it is often helpful to use guides to help them place and align the divs in consistent locations • A guide is a horizontal or vertical line that is used to position page content. • Guides do not appear in the browser. • You can add as many guides as you need to your web pages. • A ScreenTip appears, telling you the exact position of the guide. • You can use a guide to emulate a fold line • The fold line indicates where a paper is folded in half

  8. Lesson 1: Insert an AP Div Inserting an AP Element Using the Draw AP Div Button Draw AP Div button AP Div icon Horizontal Guide AP Div border CSS-P Element Property Inspector

  9. Lesson 1: Insert an AP Div Using HTML Tags to Create AP Elements • Dreamweaver uses the <div> tag to create an AP element • Initially, the default value for the first AP Div Tag on a page appears as <div id=“apDiv1”> • Additional AP Div Tag will be assigned the next number in sequence • Can be renamed either in the Property Inspector or the AP Element Panel • Styles for AP Div tags reside in the head content as part of the embedded CSS code

  10. Lesson 1: Insert an AP Div Understanding AP Elements Content • An AP element is like a separate document within a Web page. It can contain the same types of elements as a page • background colors • images • links • tables • text • You can set the contents of an AP element to work directly with a specified Dreamweaver behavior to make the page interact with a viewer in a certain way

  11. Lesson 1: Insert an AP Div Formatting AP Divs • Control the appearance of a selected AP element by making changes to: • Clip: identifies the portion of a layer’s content that is visible when displayed in a Web browser • By default, the clipping region matches the outside border of the AP element • Can be applied only to an AP element that has an Overflow attribute set to a value other than visible • Vis: lets you control whether the selected layer is visible • Options: default, visible, hidden, inherit • Overflow: specifies how to treat excess content that does not fit inside a layer • Options: visible, hide the content, specify that scroll bars appear, let current AP element automatically deal the extra content

  12. Lesson 1: Insert an AP Div Property Inspector Showing Properties of Selected AP Element CSS-P Element ID text box Vertical Stacking Properties (Z-Index) Overflow property Visible property Position (L/T) properties Dimension (W/H) properties Background Color/Image

  13. Lesson 2: Set the Position and Size of an AP Element Understanding Absolute Positioning • You can position AP elements precisely using absolute positioning • An AP element is positioned absolutely by specifying the distance between the upper-left corner of the layer and the upper-left corner of the page or layer in which it is contained • Treated as if they are separate documents contained within a page • Does not interrupt the flow of content on the page or parent AP element in which they are contained • Can hide contents on the page they are placed on top of • No impact on the location of other AP elements • Can overlap elements to create dynamic effects

  14. Lesson 2: Set the Position and Size of an AP Element Setting Positioning Attributes • Control the placement of AP elements by setting attributes from Property inspector • AP elements hold their position on a page • Five primary attributes (properties) • Position: absolute by default • Left: distance between left edge of element and page or parent AP element • Top: distance between top of element and page or parent AP element • Width and Height: dimensions of AP element, usually in pixels or % • Z-Index: used to specify vertical stacking of layers • Cannot be less than 0 • Higher number, higher on stack

  15. Lesson 3: Add Content to an AP Element Understanding AP Element Content • An AP element can contain the same types of elements that a page based on table layouts: • Background colors • Images • Links • Tables • Text • Overflow settings will determine how AP elements will enlarge to accommodate more content than the preset image size will allow • You can insert images or set them as background • Background images will override background color • Background color will display while image is loading • Use CSS styles to format your text on an AP element • All other AP div properties such as text indent, padding, margins, and background color can be added with styles

  16. Lesson 4: Set AP Div Properties Controlling AP Elements • Use the AP Elements panel to: • Control visibility, name, and Z-index order • See how AP Elements are nested • Change nesting status • Access the AP Elements Panel using the Windows Panel

  17. Lesson 4: Set AP Div Properties Controlling AP Elements – cont. • Nested AP elements are those whose HTML code is included within another AP element’s code. • A Nested AP element does not affect the way it appears to the page viewer; it establishes a relationship of how it appears in relation to its parent AP element • To change the Nesting status of an AP element, drag it to a new location in the AP Elements panel • Nested AP elements can share common styles, with the child AP element inheriting the styles from the parent AP element Z-Index Values Nested AP Element AP Element Visibility AP Elements

  18. Lesson 4: Set AP Div Properties Setting AP Divs Relative to Containers • When you insert an AP div on a web page, its position is relative to the top left corner of the browser window. • A problem arises when the page is viewed in different browser window sizes • To prevent this shifting, you can make the AP divs’ positions relative to a parent container, such as a CSS div tag, rather than relative to the page in the browser window • Steps: • Set the Positioning property of the div tag you wish to use as the parent container to relative (.content) • Cut and paste the code for the AP divs after the beginning tag for the parent container • AP divs are then placed on the page relative to the top left corner of the parent container and will remain in a fixed position no matter how wide or narrow the browser window

More Related