Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this


  1. 1. Layers & Frames
  2. 2. Layers <ul><li>Layer positioning </li></ul><ul><li>Properties of layers </li></ul><ul><li>Using layers </li></ul><ul><li>Nesting layers </li></ul><ul><li>Layers and tables </li></ul><ul><li>Formatting via layers </li></ul>
  3. 3. Layer Positioning <ul><li>A layer is a rectangular container (region) that holds XHTML content and can be positioned anywhere on a web page </li></ul><ul><li>Layer is placed using pixel coordinates </li></ul><ul><li>Layers organize and format page content </li></ul><ul><li>Initial layers get covered by new layers </li></ul>
  4. 4. Layer Positioning <ul><li>Appearance of layer content depends on the order of stacking </li></ul>
  5. 5. Properties of Layers <ul><li>The important properties are: </li></ul><ul><ul><li>ID – specifies layer name </li></ul></ul><ul><ul><li>Location – measured relative to top left corner </li></ul></ul><ul><ul><li>Size – specifies width and height </li></ul></ul><ul><ul><li>Visibility – specifies whether a layer is hidden or visible </li></ul></ul><ul><ul><li>Background color – a colour can be assigned to a layer </li></ul></ul><ul><ul><li>Depth – represents its order of stacking </li></ul></ul><ul><ul><li>Clip –limits a layers’ displayable area </li></ul></ul><ul><ul><li>Overflow –what to do if content exceeds layer’s size </li></ul></ul>
  6. 6. Properties of Layers
  7. 7. Using Layers <ul><li>XHTML provides the <div> and the <span> tags to create layers (document sections) </li></ul><ul><ul><li><layer> and <ilayer> are obsolete </li></ul></ul><ul><li><div> - defines cascading style sheets (CSS) block layers </li></ul><ul><ul><li>Attributes : id, position, left, top, width, height, z-index, border, background-color, background-image, visibility, overflow, clip </li></ul></ul><ul><li><span> - another tag to create layers in-line </li></ul>
  8. 8. Using Layers (div) <ul><li><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> </li></ul>**Note all format details are in “style attribute”
  9. 9. Nesting Layers <ul><li>A nested layer is a layer inside another layer </li></ul><ul><li>Nesting layers allows better format and control of web page layout </li></ul><ul><li>A nested layer inherits the visibility of its parent layer </li></ul><ul><li>Nesting layers is not as complicated as table nesting </li></ul><ul><li>Example: 3-level nesting </li></ul><ul><li><div> </li></ul><ul><ul><li><div> </li></ul></ul><ul><ul><ul><li><div> </li></ul></ul></ul><ul><li></div> </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul>
  10. 10. Nesting Layers <ul><li>< 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> </li></ul><ul><li></div> </div> </div> </li></ul>Cell 1 Cell 21 Cell 22
  11. 11. Div Layers & Tables <ul><li>Layers are simple to use and less restrictive </li></ul><ul><li>Layer nesting is simpler than table nesting </li></ul><ul><li>Tables use 5 tags for hierarchical structure whereas Layer just uses 1 tag for everything </li></ul><ul><li>Div Layers provide better control over formatting and layout </li></ul>
  12. 12. Formatting Via Layers <ul><li>Formatting via layers is based on the idea of nesting layers </li></ul><ul><li>Each layer can be viewed as an independent region that can hold any XHTML content </li></ul><ul><li>The web page is divided into regions according to its layout </li></ul><ul><li>Each region is then substituted by a layer </li></ul>
  13. 13. Formatting Via Layers
  14. 14. Frames <ul><li>Frame layout and design </li></ul><ul><li>Frame sets and nesting </li></ul><ul><li>Using frames </li></ul><ul><li>Target frames and windows </li></ul>
  15. 15. Frames <ul><li>Web pages that do not use tables, layers or frames tend to be left-side heavy </li></ul><ul><li>Frames divide a browser window into regions, with each region having its own web page </li></ul><ul><li>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 </li></ul>
  16. 16. Frame Layout & Design <ul><li>A frame is a rectangle that has a width and height, a location in a browser window, and content </li></ul><ul><li>A collection of frames is referred to as a frame set. It controls the layout of its frames </li></ul><ul><li>A frameset and a frame are created using the <frameset> and <frame> tags (+ <noframes> ) </li></ul><ul><li>The <frameset> tag replaces <body> tag </li></ul>
  17. 17. Frame Layout & Design <ul><li>Useful tips: </li></ul><ul><ul><li>Keep the frameset simple </li></ul></ul><ul><ul><li>Keep the frame’s content short </li></ul></ul><ul><ul><li>Keep the frames organised – use a driver frame </li></ul></ul>
  18. 18. Frame Sets & Nesting <ul><li>A frame set width is defined by number of columns, cols </li></ul><ul><li>A frame set height is defined by number of rows, rows </li></ul><ul><li>Units of rows and cols can be pixels or percentage of browser window </li></ul>
  19. 19. Frame Sets & Nesting
  20. 20. Frame Sets & Nesting
  21. 21. Frame Sets & Nesting <ul><li>XHTML does not have a limit on the depth of frame nesting </li></ul><ul><li>However, one or two levels of nesting is all that is needed in practice </li></ul>
  22. 22. Using Frames <ul><li>There are 4 XHTML tags that can be used: </li></ul><ul><ul><li><frameset> - Encloses all other frame tags </li></ul></ul><ul><ul><ul><li>Attributes : rows, cols : rows, cols </li></ul></ul></ul><ul><ul><li><frame> - Creates a frame in a frame set </li></ul></ul><ul><ul><ul><li>Attributes : name, src, noresize, scrolling, frameborder, marginwidth, marginheight, longdesc </li></ul></ul></ul><ul><ul><li><iframe> - Creates an inline frame </li></ul></ul><ul><ul><ul><li>Attributes : name, src, width, height, align, scrolling, frameborder, longdesc, marginwidth, marginheight </li></ul></ul></ul><ul><ul><li><noframes> - specifies alternative content for a browser </li></ul></ul><ul><ul><ul><li>Attributes : NO ATTRIBUTES </li></ul></ul></ul>
  23. 23. Using Frames <ul><li>The <iframes> tag creates inline frames </li></ul><ul><li>An inline frame is a frame that is embedded inside the content of a Web page </li></ul><ul><li>No frame sets are required to create inline frames </li></ul><ul><li>Unlike the <frame> tag, the <iframe> tag is used inside the <body> tag </li></ul>
  24. 24. 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 >
  25. 25. Using Nested Frames <ul><li>< frameset cols= &quot;*, *&quot;> < frameset rows= &quot;*, *&quot;> < frame src= &quot;....&quot;/> <frame src= &quot;....&quot;/> </frameset> </li></ul><ul><li> < frame src= &quot;....&quot;/> </frameset> </li></ul>
  26. 26. Target Frames & Windows <ul><li>Frames optimize web page layout and facilitate navigation </li></ul><ul><li>Contents of some frames may never change and that of others may change frequently </li></ul><ul><li>Frames offer convenience to web surfers </li></ul><ul><li>Target frames receive content from other frames </li></ul><ul><li>Target frames must be given names when they are created i.e. use name attribute of the <frame> tag </li></ul><ul><li>The source frame can then refer to a target frame source by its name i.e. use target name attribute </li></ul>
  27. 27. Target Frames & Windows
  28. 28. Target Frames & Windows <ul><li>< frameset cols= “160, *&quot;> < frame src= “toc.html&quot;/> <frame src= “initialContent.html“ name=“myTarget”/> </li></ul><ul><li></frameset> </li></ul><ul><li><h2> Click any link in the left frame…. </h2> </li></ul><ul><li><a href= target=“myTarget”>NU programs</a><br/> </li></ul><ul><li><a href= target=“myTarget”>MIT programs</a><br/> </li></ul>Example.html initialContent.html toc.html
  29. 29. Reference <ul><li>Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference , Hungry Minds Inc,U.S. </li></ul><ul><li>Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS , New Riders. </li></ul><ul><li>Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript </li></ul>