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 2 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 Positioning Elements The CSS positioning properties give you control over the way element boxes are laid out.
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.
Chapter 6 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.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
Working with Behaviors in DW Marion Setton. You may be familiar with divs and how to construct them generally using Dreamweaver CS5, but you can also.
Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.
CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes Describe & Apply the CSS Box Model Configure Float with CSS Designate Positioning.
CSCE 102 – Chapter 6 (Web Design and Layout) CSCE General Applications Programming Benito Mendoza Benito Mendoza 1 By Benito Mendoza.
HIGH LEVEL OVERVIEW: CSS CSS SYNTAX CONSISTS OF A SET OF RULES THAT HAVE 3 PARTS: A SELECTOR, A PROPERTY, AND A VALUE. IT’S NOT NECESSARY TO REMEMBER THIS.
Introducing Cascading Style Sheets. Cascading Style Sheet Basics Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles.
© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
© 2010 Delmar, Cengage Learning Chapter 11 Creating and Using Templates.
Chapter 3 – Web Design Tables & Page Layout Mr. Ursone.
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
Copenhagen, 6 December 2004 Modern CSS Principles Miruna Bădescu Finsiel Romania.
Introducing Cascading Style Sheets Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS.
Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.
© Ms. Masihi. The Dreamweaver Welcome Screen first opens when you start Dreamweaver. This screen gives you quick access to previously opened files,
Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Creating a rotating image banner Activity 7 Procedure Creating AP Elements 1.Start Dreamweaver and select the ‘Hong Kong Scenery’ web site. 2. Create a.
Dreamweaver 8 Concepts and Techniques Project 6 Layers, Image Maps, and Navigation Bars.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
Cascading Style Sheets. CSS CSS stands for Cascading Style Sheet. Typical CSS file is a text file with an extention.css and contains a series of commands.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Copyright © 2003 Pearson Education, Inc. Slide 3-1 Created by Cheryl M. Hughes The Web Wizards Guide to XML by Cheryl M. Hughes.
Copyright © Terry Felke-Morris CSS Flow & Positioning 1 Copyright © Terry Felke-Morris.
MTA EXAM HTML5 Application Development Fundamentals.
Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.
© 2016 SlidePlayer.com Inc. All rights reserved.