Mastering the Internet, XHTML, and JavaScript

1
Mastering the Internet, XHTML, and JavaScript

• Chapter 13
• Layers

2
Outline

• Goals and Objectives
• Chapter Headlines
• Introduction
• Layer Positioning
• Properties
• Using Layers
• Nesting Layers
• Layers and Tables
• Formatting via Layers
• Summary

3
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

4
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

5
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

6
Layer Positioning

• 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

7
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 layers
  size

8
Properties
9
Using Layers

• The important tags are
• ltdivgt - defines cascading style sheets (CSS)
  layers
• Attributes id, position, left, top, width,
  height, z-index, border, background-color,
  background-image, visibility, overflow, clip
• ltspangt - another tag to create layers
• Exampleltdiv idmylayer stylepositionabsolu
  te width300px height175px z-index1
  visibilityvisible overflowvisible
  cliprect(50 30 70 10)gtAll layer propertieslt/divgt

10
Using Layers

• Example 13.1 Using layers
• Create a web page that uses layers of different
  colors

11
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
• ltdivgt
• ltdivgt
• ltdivgt
• lt/divgt
• lt/divgt
• lt/divgt

12
Nesting Layers

• Example 13.3 Use Nested Layers
• Design a table layout using nested layers

13
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

14
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

15
Formatting via Layers

• Example 13.4 Formatting with layers
• Develop a web page using layers for formatting

16
Summary

• Tables organize and format page content
• Layers are positioned using 2D coordinate system
• Layers have many properties for their
  specifications
• The ltdivgt 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