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 byLuciano Leatherbury
Modified over 2 years ago
© 2011 Delmar, Cengage Learning Chapter 10 Positioning Objects with AP Divs
© 2011 Delmar Cengage Learning 1.Insert an AP div 2.Set the position and size of an AP element 3.Add content to an AP element 4.Set AP element properties Chapter 10 Lessons
© 2011 Delmar Cengage Learning With CSS layout blocks, you use containers formatted with CSS styles to place content on web pages. You can set the appearance and position of these containers using HTML tags known as div tags. Positioning Objects with AP Divs
© 2011 Delmar Cengage Learning Positioning Objects with AP Divs Tools You’ll Use
© 2011 Delmar Cengage Learning AP elements are page elements that are absolutely positioned or assigned a fixed position on a web page. You should use guides when placing and aligning divs so their locations are consistent. Insert an AP Div
© 2011 Delmar Cengage Learning A fold line indicates where the paper is folded in half. Dreamweaver uses the tag to create an AP div. An AP div is like a separate HTML document within a web page. Insert an AP Div
© 2011 Delmar Cengage Learning If you add more information than the div can display, you will need to tell Dreamweaver how to handle the overflow. The Clip property identifies the portion of an AP div’s content that is visible in a web browser. Insert an AP Div
© 2011 Delmar Cengage Learning The Vis property lets you control whether the selected AP div is visible. Inherit means that the visibility of the AP div is automatically inherited from its parent AP div or page. The overflow property specifies how you treat excess content that does not fit inside an AP div. Insert an AP Div
© 2011 Delmar Cengage Learning Using AP divs for placing interactive content Insert an AP Div
© 2011 Delmar Cengage Learning Absolute positioning means that the AP element will be locked in a fixed position on the page regardless of the size of the browser window. You can control the placement of AP elements by setting their attributes in the Property inspector. Set the Position and Size of an AP Element
© 2011 Delmar Cengage Learning The Left property (L) specifies the distance between the left edge of an AP element and the left edge of the page that contains it. The Top property (T) specifies the distance between the top edge of your AP element and the top edge of the page. Set the Position and Size of an AP Element
© 2011 Delmar Cengage Learning The Width (W) and the Height (H) properties specify the dimensions of the AP element, usually in pixels. The Z-index property specifies the vertical stacking order of AP elements. Set the Position and Size of an AP Element
© 2011 Delmar Cengage Learning AP div with width and height adjusted H=176pxW=250px AP div is resized, but stays in same position Set the Position and Size of an AP Element
© 2011 Delmar Cengage Learning If you add more content than the preset image size, the AP element will expand to display the content on your page in Dreamweaver. You should use CSS to format your text on an AP element. Add Content to an AP Element
© 2011 Delmar Cengage Learning Inserting a background image for an AP div Add Content to an AP Element Image serves as AP div backgroundBg image= two_children_on_beach.jpg
© 2011 Delmar Cengage Learning Use the AP Elements panel to control the visibility, name, and Z-index order of all the AP elements on a web page. Nested AP elements are those whose HTML code is included within another AP element’s code. Set AP Element Properties
© 2011 Delmar Cengage Learning You can use the AP Elements panel to: –Change a series of AP element names –Control AP element visibility while testing a site –Control the visible stacking order Set AP Element Properties
© 2011 Delmar Cengage Learning When you insert an AP on a web page, its position is relative to the top left corner of the browser window. Problems may arise if the page is viewed in different browser window sizes. Set AP Element Properties
© 2011 Delmar Cengage Learning Set AP Element Properties AP elements in browser windowAP elements in wider browser window
© 2011 Delmar Cengage Learning If you don’t want AP elements to shift, depending on the browser window size, you can: –Set the Positioning property of the div tag you wish to use as the parent container –Cut and paste the code for the AP elements after the beginning tag for the parent container Set AP Element Properties
© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.
Chapter 6 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.
Tutorial 4 Using CSS for Page Layout. Objectives Session 4.1 – Explore CSS layout – Compare types of floating layouts – Examine code for CSS layouts –
Week 10 Creating Positioned Layouts Positioning Elements The CSS positioning properties give you control over the way element boxes are laid out.
© 2010 Delmar, Cengage Learning Chapter 5 Positioning Objects with CSS and Tables.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 1 Creating Dynamic Pages.
Advanced CSS - Page Layout. Advanced CSS Compound Selectors: Is a Dreamweaver term, not a CSS term. Describes more advanced types of selectors such.
Ch. 6 Web Page Design – Absolute Positioning, Image Maps, and Navigation Bars Mr. Ursone.
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.
Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.
Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Today’s objectives Announcements Positioning Measurement units.
Layout with Styles Castro Chapter 11. Tables vs. CSS You can produce “liquid layouts” (layouts that stretch as the browser is resized) using tables or.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
CSCE 102 – Chapter 6 (Web Design and Layout) CSCE General Applications Programming Benito Mendoza Benito Mendoza 1 By Benito Mendoza.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.
Chapter 3 – Web Design Tables & Page Layout Mr. Ursone.
Cascading Style Sheets Positioning Controls Visibility.
CHAPTER 11 Tables. How Are Tables Used Data Display Very tidy and very useful Better Text Alignment Putting text in tables allows you to format indents.
Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.
TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.3.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Organizing Content by Using Dreamweaver CS5 Domain 5.
1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.
Part 5 Introduction to CSS. CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line.
Copyright © Terry Felke-Morris CSS Flow & Positioning 1 Copyright © Terry Felke-Morris.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
Using CSS for Page Layout. Types of HTML Elements Block-Level Element –Creates blocks of content e.g. div, h1..h6, p, ul, ol, li, table, form –They start.
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.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
Positioning and Printing Creating Special Effects with CSS.
Lesson 8 – Unit H CONTROLLING PAGE LAYOUT. The Box Model Box model: used by CSS to represent characteristics of every Web page element ◦Treats element.
Mimi Opkins. One of the major benefits of using CSS is that you’re not forced to lay your sites out in tables. The layout possibilities of CSS give.
Adobe Dreamweaver CS5 Chapter 3 Tables and Page Layout.
1 Web Site Design Overview of the Internet Cookie Setton.
Adobe Dreamweaver CS3 Revealed CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE.
DREAMWEAVER ‘ANATOMY’ EXPLAINED. Solar System Task.
THE BOX MODEL Putting layouts together with CSS. The Box Model How would you describe a box? Container? Tags or elements are “containers” puts.
© Ms. Masihi. The Dreamweaver Welcome Screen first opens when you start Dreamweaver. This screen gives you quick access to previously opened files,
Tutorial 6 Creating Fixed-Width Layouts. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create a two-column layout Use id selectors to.
Dreamweaver CS3 Concepts and Techniques Chapter 6 Layers, Image Maps, and Navigation Bars.
Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with.
© 2017 SlidePlayer.com Inc. All rights reserved.