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.

Layers&Frames

668 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Layers&Frames

  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= http://www.neu.edu target=“myTarget”>NU programs</a><br/> </li></ul><ul><li><a href= http://www.mit.edu 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>

×