• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



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

    • Layers & Frames
    • Layers
      • Layer positioning
      • Properties of layers
      • Using layers
      • Nesting layers
      • Layers and tables
      • Formatting via layers
    • Layer Positioning
      • 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
      • Layers organize and format page content
      • Initial layers get covered by new layers
    • Layer Positioning
      • Appearance of layer content depends on the order of stacking
    • Properties of Layers
      • The important properties are:
        • ID – specifies layer name
        • Location – measured relative to top left corner
        • Size – specifies width and height
        • Visibility – specifies whether a layer is hidden or visible
        • Background color – a colour 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
    • Properties of Layers
    • Using Layers
      • 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
        • Attributes : id, position, left, top, width, height, z-index, border, background-color, background-image, visibility, overflow, clip
      • <span> - another tag to create layers in-line
    • Using Layers (div)
      • <h2><center> Using 2 Layers </center></h2> < div id= &quot;Layer 1&quot; style= &quot;position: absolute ; width:300 px ; height:175 px ; left:54 px ; top:45 px ; background-color:#33FFFF; layer-background-color :#33FFFF; border:1 px &quot;><b>T his is layer 1 </b></div> < div id= &quot;Layer 2&quot; style= &quot;position: absolute ; width:200 px ; height:165 px ; left:54 px ; top:100 px ; background-color:red; layer-background-color:red; border:1 px &quot;><b> this is layer 2 </b></div>
      **Note all format details are in “style attribute”
    • Nesting Layers
      • 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>
      • </div>
      • </div>
      • </div>
    • Nesting Layers
      • < div id= &quot;parent layer&quot; style= &quot;position: absolute ; width:400 px ; height:200 px ; left:50 px ; top:60 px ; background-color:#33FFFF; layer-background-color: #33FFFF; border: 1 px ; visibility: visible &quot;><b></b> <div id= &quot;layer 1&quot; style= &quot;position: absolute ; width:100 px ; height:100 px ; left:0 px ; top:0 px ; background-color:#FFFF66; layer-background-color: #FFFF66; border: 1 px ; visibility: visible &quot;><b> Cell 1 </b> </div> <div> <div id= &quot;layer 2&quot; style= &quot;position: absolute ; width:100 px ; height:100 px ; left:100 px ; top:0 px ; background-color:#00CC99; layer-background-color: #00CC99; border: 1 px ; visibility: visible &quot;><b> Cell 21 </b> </div> <div id= &quot;layer 3&quot; style= &quot;position: absolute ; width:100 px ; height:100 px ; left:200 px ; top:0 px ; background-color:#FFFF66; layer-background-color: #FFFF66; border: 1 px ; visibility: visible &quot;><b> Cell 22 </b>
      • </div> </div> </div>
      Cell 1 Cell 21 Cell 22
    • Div Layers & 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
      • Div Layers provide better control over formatting and layout
    • Formatting Via Layers
      • 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
    • Formatting Via Layers
    • Frames
      • Frame layout and design
      • Frame sets and nesting
      • Using frames
      • Target frames and windows
    • Frames
      • 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
    • Frame Layout & Design
      • 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
    • Frame Layout & Design
      • Useful tips:
        • Keep the frameset simple
        • Keep the frame’s content short
        • Keep the frames organised – use a driver frame
    • Frame Sets & Nesting
      • 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
    • Frame Sets & Nesting
    • Frame Sets & Nesting
    • Frame Sets & Nesting
      • 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
    • Using Frames
      • 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
    • Using Frames
      • 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
    • Using Frames < 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 >
    • Using Nested Frames
      • < frameset cols= &quot;*, *&quot;> < frameset rows= &quot;*, *&quot;> < frame src= &quot;....&quot;/> <frame src= &quot;....&quot;/> </frameset>
      • < frame src= &quot;....&quot;/> </frameset>
    • Target Frames & Windows
      • 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
    • Target Frames & Windows
    • Target Frames & Windows
      • < frameset cols= “160, *&quot;> < frame src= “toc.html&quot;/> <frame src= “initialContent.html“ name=“myTarget”/>
      • </frameset>
      • <h2> Click any link in the left frame…. </h2>
      • <a href= http://www.neu.edu target=“myTarget”>NU programs</a><br/>
      • <a href= http://www.mit.edu target=“myTarget”>MIT programs</a><br/>
      Example.html initialContent.html toc.html
    • Reference
      • 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