This preview shows page 1. Sign up to view the full content.
Chapter 13 Layers Goals and Objectives Chapter Headlines Introduction Layer Positioning Properties Using Layers Nesting Layers Layers and Tables Formatting via Layers Summary Outline Chapter 13 - Layers 2 Goals and Objectives Goals Understand layers, their creation and control, their use in formatting web pages and controlling content location in pages, and their relationship to tables Objectives Positioning and coordinate systems Creation Properties Management Rendering Nesting Layers and tables Formatting via Layers
Chapter 13 - Layers 3 Chapter Headlines 13.1 Introduction Make web pages stand out via using layers 13.2 Layer positioning Learn how to control layer location 13.3 Properties Learn layer properties for better control 13.4 Using Layers XHTML makes using layers easy 13.5 Nesting layers Find out what you can do with layers 13.6 Layers and Tables Layers are easier to use than tables 13.7 Formatting via Layers Have control of the layout of your web page
Chapter 13 - Layers 4 Introduction Web page layout must be attractive Layer holds XHTML content and can be placed using pixel coordinates Layers organize and format page content Each layer has its own content and position Chapter 13 - Layers 5 Layers are stacked on top of each other Initial layers get covered by new layers Appearance of layer content depends on the order of stacking A 2D coordinate system is used to position layers The coordinates are measured in pixels Layer Positioning Chapter 13 - Layers 6 Properties The important properties are: ID specifies layer name Location measured relative to top left corner Size specifies width and the height Visibility specifies whether a layer is hidden or visible Background color a color can be assigned to a layer Depth represents its order of stacking Clip limits a layers' displayable area Overflow what to do if content exceeds layer's size Chapter 13 - Layers 7 Properties Chapter 13 - Layers 8 Using Layers The important tags are: <div> - defines cascading style sheets (CSS) layers Attributes: id, position, left, top, width, height, z-index, border, background-color, background-image, visibility, overflow, clip <span> - another tag to create layers Example:
<div id="mylayer" style="position:absolute; width:300px; height:175px; z-index:1; visibility:visible; overflow:visible; clip:rect(50 30 70 10)">All layer properties</div>
Chapter 13 - Layers 9 Using Layers Example 13.1: Using layers Create a web page that uses layers of different colors Chapter 13 - Layers 10 Nesting Layers A nested layer is a layer inside another layer Nesting layers allows better format and control of web page layout Nested layer inherits the visibility of its parent layer Nesting layers is not as complicated as table nesting Nested layer moves with the parent layer Example: 3-level nesting <div> <div> <div> </div> </div> </div>
Chapter 13 - Layers 11 Nesting Layers Example 13.3: Use Nested Layers Design a table layout using nested layers Chapter 13 - Layers 12 Layers and Tables Layers are simple to use and less restrictive Layer nesting is simpler than Table nesting Tables use 5 tags for hierarchical structure whereas Layer just uses 1 tag for everything Layers provide better control over formatting and layout Chapter 13 - Layers 13 Formatting via Layers Formatting via layers is based on the idea of nesting them Each layer can be viewed as an independent region that can hold any XHTML content The web page is divided into regions according to its layout Each region is then substituted by a layer Chapter 13 - Layers 14 Formatting via Layers Example 13.4: Formatting with layers Develop a web page using layers for formatting Chapter 13 - Layers 15 Summary Tables organize and format page content Layers are positioned using 2D coordinate system Layers have many properties for their specifications The <div> tag is the most important tag to create layers Layers can be nested for better control Layers are easier to use than tables Web page layout is formatted using layers Chapter 13 - Layers 16 ...
View Full Document
- Spring '11