We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byLiberty Clarkston
Modified over 3 years ago
© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags
© 2009 Delmar Cengage Learning Chapter 9 Lessons 1.Insert an AP div 2.Set the position and size of an AP element 3.Add content to an AP element 4.Use the AP Elements panel
© 2009 Delmar Cengage Learning Understanding AP Elements 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
© 2009 Delmar Cengage Learning Fig. 1: Using AP Elements to Create a Single Image
© 2009 Delmar Cengage Learning Fig. 2: Inserting an AP Element Using the Draw AP Div Button AP Div icon AP Div border Draw AP Div button
© 2009 Delmar Cengage Learning Using HTML Tags to Create AP Elements Dreamweaver uses the tag to create an AP element Initially, the default value for the first AP Div Tag on a page appears as Each additional AP Div Tag will be assigned the next number in sequence
© 2009 Delmar Cengage Learning 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
© 2009 Delmar Cengage Learning Using Advanced Formatting Clip: identifies the portion of a layers content that is visible when displayed in a Web browser Vis: lets you control whether the selected layer is visible Overflow: specifies how to treat excess content that does not fit inside a layer
© 2009 Delmar Cengage Learning Fig. 4: Property Inspector Showing Properties of Selected AP Element Selected AP element #content style Properties for #content style CSS-P Element ID text box Overflow property Position and dimension properties Visible property
© 2009 Delmar Cengage Learning 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
© 2009 Delmar Cengage Learning Fig. 5: Scrolling a Page Containing an AP Element
© 2009 Delmar Cengage Learning Setting Positioning Attributes Five primary attributes (properties) –Position: absolute by default –Left: distance to left edge of page –Top: distance to top of page –Width and Height: in pixels or % –Z-Index: used to specify vertical stacking of layers Cannot be less than 0
© 2009 Delmar Cengage Learning Fig. 6: AP Element Moved Down and to the Right L = 520px T = 260px AP element moves according to new L and T properties The width and height of your AP element may vary at this point
© 2009 Delmar Cengage Learning Fig. 8: New Background AP Element on Top of Contest AP Element New AP element name = background Z-Index = 1
© 2009 Delmar Cengage Learning Fig. 9: Contest AP Element Moved on Top of Background AP Element Z-Index value Contest AP element positioned on top of background AP element with Z-index value changed to 2
© 2009 Delmar Cengage Learning Understanding AP Element Content An AP element can contain elements such as background colors, images, links, tables, and text You can insert images or set them as background Use CSS styles to format your text on an AP element
© 2009 Delmar Cengage Learning Fig. 10: AP Element with Background Color and Inserted Image
© 2009 Delmar Cengage Learning Fig. 11: AP Element with Image Inserted as Background Image
© 2009 Delmar Cengage Learning Fig. 12: White Background Color Applied to AP Element Type #FFF in the Bg color text box
© 2009 Delmar Cengage Learning Fig. 13: Image Added to AP Element
© 2009 Delmar Cengage Learning Fig. 14: AP Element Displays Scroll Bars Scroll bar
© 2009 Delmar Cengage Learning Fig. 15: AP Element Containing a Background Image Image serves as AP element background Bg image = contestants.bak.jpg
© 2009 Delmar Cengage Learning Fig. 16: Editing #contest Style Font family = Arial, Helvetica, sans-serif Font-size = small Font-weight = bold Color = #006 Block category Type category
© 2009 Delmar Cengage Learning 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 Open using the Window menu
© 2009 Delmar Cengage Learning Controlling AP Elements Nested AP elements are those whose HTML code is included within another AP elements 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
© 2009 Delmar Cengage Learning Fig. 18: AP Elements Panel Nested AP elements are indented under their parent AP element
© 2009 Delmar Cengage Learning Fig. 19: Using AP Elements Panel to Change an AP Element Name AP element names Z-Index values
© 2009 Delmar Cengage Learning Fig. 20: Using AP Elements Panel to Hide Contest AP Element Closed eye icon indicates that the AP element is hidden Contest AP element is hidden
© 2009 Delmar Cengage Learning Fig. 21: Using AP Elements Panel to Make Contest AP Element Visible Eye icon indicates AP element is visible AP element is visible again
© 2009 Delmar Cengage Learning Fig. 22: Nested AP Element Shown with Parent AP Element Properties
© 2011 Delmar, Cengage Learning Chapter 10 Positioning Objects with AP Divs.
© 2010 Delmar, Cengage Learning Chapter 5 Positioning Objects with CSS and Tables.
Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.
Week 10 Creating Positioned Layouts
Ch. 6 Web Page Design – Absolute Positioning, Image Maps, and Navigation Bars Mr. Ursone.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 1 Creating Dynamic Pages.
Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.
Tutorial 4 Using CSS for Page Layout. Objectives Session 4.1 – Explore CSS layout – Compare types of floating layouts – Examine code for CSS layouts –
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.
Adobe Dreamweaver CS3 Revealed CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE.
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
© 2010 Delmar, Cengage Learning Chapter 3 Working with Text and Images.
Advanced CSS - Page Layout. Advanced CSS Compound Selectors: Is a Dreamweaver term, not a CSS term. Describes more advanced types of selectors such.
Positioning Objects with CSS and Tables
CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW Use of Tables Creating Tables Try It – 1 Creating.
Organizing Content by Using Dreamweaver CS5 Domain 5.
© 2017 SlidePlayer.com Inc. All rights reserved.