Layers Frames


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Layers Frames

  1. 2. <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>
  2. 3. <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>
  3. 4. <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><li><span> - another tag to create layers in-line </li></ul>
  4. 5. <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, or at a percentage of its containing layer’s dimensions (e.g. 20% of the width in from the left edge) </li></ul><ul><li>Layers organize and format page content </li></ul><ul><li>Initial layers get covered by new layers (z-index) </li></ul>
  5. 6. <ul><li>The important properties are: </li></ul><ul><ul><li>ID – specifies layer name </li></ul></ul><ul><ul><li>Positioning – what is layer positioned relative to? </li></ul></ul><ul><ul><li>Location (left,top) – measured relative to top left corner </li></ul></ul><ul><ul><li>Size (height,width) – 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/image – a colour/image can be assigned to a layer </li></ul></ul><ul><ul><li>Z-index – 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. 7. <ul><li>Clip the (absolutely positioned) layer so that only some of it is visible. </li></ul>L R B Layer Clip: rect(T, R, B, L) T
  7. 8. <ul><li>Appearance of layer content depends on the order of stacking </li></ul>Webpage Layer 1 (z-index = 1) Layer 2 (z-index = 2)
  8. 9. <ul><li>Positioning is achieved using relative or absolute attributes </li></ul><ul><li>Positioning is referenced from the parent layer or browser window </li></ul><ul><li>Relative – relative to where the layer should be </li></ul><ul><li>Absolute – removes the layer from the reference frame </li></ul>
  9. 10. <ul><li>Reference frame is from the top left corner </li></ul>(0,0) (x 2 ,y 2 ) (x 1 ,y 1 ) Webpage Layer 1 Layer 2 +X +Y
  10. 11. Normal Layer 1 Layer 2 will sit below Layer 1 Layer 2 Layer 3
  11. 12. Relative Layer 1 Layer 2 will sit below Layer 1 Layer 2 Layer 3
  12. 13. Absolute Layer 1 Layer 2 will sit below Layer 1 Layer 2 Layer 3
  13. 14. <ul><li>< 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> </li></ul>(0,0) * **Note all format details are in “style attribute” This is a layer 1 This is a layer 2
  14. 15. <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><li><div> </li></ul><ul><li><div> </li></ul><ul><li> Content goes here. </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul>
  15. 16. <ul><li>< 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;> </li></ul><ul><li><b>T his is layer 1 </b> </li></ul><ul><li>< 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 ”> </li></ul><ul><li>This is layer 2 </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul>(0,0) * This is a layer 1 This is a layer 2
  16. 17. <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>
  17. 19. <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>
  18. 20. <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>
  19. 21. <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>
  20. 22. <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>
  21. 23. <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>
  22. 25. <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>
  23. 27. <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>
  24. 28. <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>
  25. 29. < 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 >
  26. 30. <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>
  27. 31. <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>
  28. 33. <ul><li>Example.html </li></ul><ul><li>< frameset cols= “*, 200&quot;> < frame src= “toc.html&quot;/> <frame src= “initialContent.html name=“myTarget”/> </li></ul><ul><li></frameset> </li></ul>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
  29. 34. <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>