Layers Frames
Upcoming SlideShare
Loading in...5

Layers Frames






Total Views
Views on SlideShare
Embed Views



1 Embed 2 2



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Layers Frames Layers Frames Presentation Transcript

    • Layer positioning
    • Properties of layers
    • Using layers
    • Nesting layers
    • Layers and tables
    • Formatting via layers
    • 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
    • Div Layers provide better control over formatting and layout
    • XHTML provides the <div> and the <span> tags to create layers (document sections)
      • <layer> and <ilayer> are obsolete
    • <div> - defines cascading style sheets (CSS) block layers
    • <span> - another tag to create layers in-line
    • A layer is a rectangular container (region) that holds XHTML content and can be positioned anywhere on a web page
    • Layer is placed using pixel coordinates, or at a percentage of its containing layer’s dimensions (e.g. 20% of the width in from the left edge)
    • Layers organize and format page content
    • Initial layers get covered by new layers (z-index)
    • The important properties are:
      • ID – specifies layer name
      • Positioning – what is layer positioned relative to?
      • Location (left,top) – measured relative to top left corner
      • Size (height,width) – specifies width and height
      • Visibility – specifies whether a layer is hidden or visible
      • Background color/image – a colour/image can be assigned to a layer
      • Z-index – represents its order of stacking
      • Clip –limits a layers’ displayable area
      • Overflow –what to do if content exceeds layer’s size
    • Clip the (absolutely positioned) layer so that only some of it is visible.
    L R B Layer Clip: rect(T, R, B, L) T
    • Appearance of layer content depends on the order of stacking
    Webpage Layer 1 (z-index = 1) Layer 2 (z-index = 2)
    • Positioning is achieved using relative or absolute attributes
    • Positioning is referenced from the parent layer or browser window
    • Relative – relative to where the layer should be
    • Absolute – removes the layer from the reference frame
    • Reference frame is from the top left corner
    (0,0) (x 2 ,y 2 ) (x 1 ,y 1 ) Webpage Layer 1 Layer 2 +X +Y
  • Normal Layer 1 Layer 2 will sit below Layer 1 Layer 2 Layer 3
  • Relative Layer 1 Layer 2 will sit below Layer 1 Layer 2 Layer 3
  • Absolute Layer 1 Layer 2 will sit below Layer 1 Layer 2 Layer 3
    • < div id= &quot;Layer 1&quot; style= &quot;position: absolute ; width:300 px ; height:75 px ; left:54 px ; top:15 px ; background-color:green&quot;><b>T his is layer 1 </b></div> < div id= &quot;Layer 2&quot; style= &quot;position: absolute ; width:200 px ; height:65 px ; left:54 px ; top:60 px ; background-color:orange; border:1 px ”> This is layer 2 </div>
    (0,0) * **Note all format details are in “style attribute” This is a layer 1 This is a layer 2
    • A nested layer is a layer inside another layer
    • Nesting layers allows better format and control of web page layout
    • A nested layer inherits the visibility of its parent layer
    • Nesting layers is not as complicated as table nesting
    • Example: 3-level nesting
    • <div>
    • <div>
    • <div>
    • Content goes here.
    • </div>
    • </div>
    • </div>
    • < div id= &quot;Layer 1&quot; style= &quot;position: absolute ; width:300 px ; height:75 px ; left:54 px ; top:15 px ; background-color:green&quot;>
    • <b>T his is layer 1 </b>
    • < div id= &quot;Layer 2&quot; style= &quot;position: relative ; width:200 px ; height:65 px ; left:54 px ; top:60 px ; background-color:orange; border:1 px ”>
    • This is layer 2
    • </div>
    • </div>
    (0,0) * This is a layer 1 This is a layer 2
    • Formatting via layers is based on the idea of nesting layers
    • 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
    • Frame layout and design
    • Frame sets and nesting
    • Using frames
    • Target frames and windows
    • Web pages that do not use tables, layers or frames tend to be left-side heavy
    • Frames divide a browser window into regions, with each region having its own web page
    • When a surfer clicks on a link, from a set of links, the browser displays the corresponding HTML file in a new web page, which may not have the same links, for further navigation – frames solve this
    • A frame is a rectangle that has a width and height, a location in a browser window, and content
    • A collection of frames is referred to as a frame set. It controls the layout of its frames
    • A frameset and a frame are created using the <frameset> and <frame> tags (+ <noframes> )
    • The <frameset> tag replaces <body> tag
    • Useful tips:
      • Keep the frameset simple
      • Keep the frame’s content short
      • Keep the frames organised – use a driver frame
    • A frame set width is defined by number of columns, cols
    • A frame set height is defined by number of rows, rows
    • Units of rows and cols can be pixels or percentage of browser window
    • XHTML does not have a limit on the depth of frame nesting
    • However, one or two levels of nesting is all that is needed in practice
    • There are 4 XHTML tags that can be used:
      • <frameset> - Encloses all other frame tags
        • Attributes : rows, cols : rows, cols
      • <frame> - Creates a frame in a frame set
        • Attributes : name, src, noresize, scrolling, frameborder, marginwidth, marginheight, longdesc
      • <iframe> - Creates an inline frame
        • Attributes : name, src, width, height, align, scrolling, frameborder, longdesc, marginwidth, marginheight
      • <noframes> - specifies alternative content for a browser
        • Attributes : NO ATTRIBUTES
    • The <iframes> tag creates inline frames
    • An inline frame is a frame that is embedded inside the content of a Web page
    • No frame sets are required to create inline frames
    • Unlike the <frame> tag, the <iframe> tag is used inside the <body> tag
  • < frameset rows= &quot;*, *&quot; cols= &quot;50%, *&quot;> <frame src= &quot;....&quot; name= &quot;myFrame1&quot; frameborder= &quot;0&quot;/> <frame src= &quot;....&quot; name= &quot;myFrame2&quot; frameborder= &quot;0&quot;/> <frame src= &quot;....&quot; scrolling= &quot;no&quot;/> <frame src= &quot;....&quot; noresize marginwidth= &quot;0&quot; marginheight= &quot;0&quot;/> < /frameset >
    • < frameset cols= &quot;*, *&quot;> < frameset rows= &quot;*, *&quot;> < frame src= &quot;....&quot;/> <frame src= &quot;....&quot;/> </frameset>
    • < frame src= &quot;....&quot;/> </frameset>
    • Frames optimize web page layout and facilitate navigation
    • Contents of some frames may never change and that of others may change frequently
    • Frames offer convenience to web surfers
    • Target frames receive content from other frames
    • Target frames must be given names when they are created i.e. use name attribute of the <frame> tag
    • The source frame can then refer to a target frame source by its name i.e. use target name attribute
    • Example.html
    • < frameset cols= “*, 200&quot;> < frame src= “toc.html&quot;/> <frame src= “initialContent.html name=“myTarget”/>
    • </frameset>
    initialContent.html <i> Click any link in the above frame…. </i> toc.html <a href= target=“myTarget”> NU programs </a><br/> <a href= target=“myTarget”>MIT programs </a><br/> NU programs MIT programs Click any link in the above frame
    • Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference , Hungry Minds Inc,U.S.
    • Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS , New Riders.
    • Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript