SlideShare a Scribd company logo

Layers Frames

•Download as PPT, PDF•
•
Digital Insights - Digital Marketing Agency
Digital Insights - Digital Marketing Agency

The document discusses layers and frames in web page design. Layers allow dividing a webpage into rectangular regions using <div> tags. Key layer properties include position, size, visibility, and stacking order. Frames similarly divide a browser window into regions using <frameset> and <frame> tags. Frames optimize layout and allow different content in each region. Target frames receive linked content from other frames.

Related slideshows

uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
 
1 of 34
 
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= http://www.neu.edu target=“myTarget”> NU programs </a><br/> <a href= http://www.mit.edu 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

More Related Content

Layers Frames

  • 1.  
  • 2. Layer positioning Properties of layers Using layers Nesting layers Layers and tables Formatting via layers
  • 3. 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
  • 4. 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
  • 5. 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)
  • 6. 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
  • 7. Clip the (absolutely positioned) layer so that only some of it is visible. L R B Layer Clip: rect(T, R, B, L) T
  • 8. Appearance of layer content depends on the order of stacking Webpage Layer 1 (z-index = 1) Layer 2 (z-index = 2)
  • 9. 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
  • 10. 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
  • 11. Normal Layer 1 Layer 2 will sit below Layer 1 Layer 2 Layer 3
  • 12. Relative Layer 1 Layer 2 will sit below Layer 1 Layer 2 Layer 3
  • 13. Absolute Layer 1 Layer 2 will sit below Layer 1 Layer 2 Layer 3
  • 14. < 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
  • 15. 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>
  • 16. < 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
  • 17. 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
  • 18.  
  • 19. Frame layout and design Frame sets and nesting Using frames Target frames and windows
  • 20. 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
  • 21. 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
  • 22. Useful tips: Keep the frameset simple Keep the frame’s content short Keep the frames organised – use a driver frame
  • 23. 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
  • 24.  
  • 25. 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
  • 26.  
  • 27. 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
  • 28. 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
  • 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 >
  • 30. < frameset cols= &quot;*, *&quot;> < frameset rows= &quot;*, *&quot;> < frame src= &quot;....&quot;/> <frame src= &quot;....&quot;/> </frameset> < frame src= &quot;....&quot;/> </frameset>
  • 31. 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
  • 32.  
  • 33. 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= http://www.neu.edu target=“myTarget”> NU programs </a><br/> <a href= http://www.mit.edu target=“myTarget”>MIT programs </a><br/> NU programs MIT programs Click any link in the above frame
  • 34. 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