1 / 21

Understanding Frames vs. Tables in Web Design

This lecture covers the concept of frames in web design, explaining how they allow for dynamic page layouts, particularly for navigation elements. You'll learn how to create a FRAMESET HTML document, which establishes the layout, and how to fill these frames with content. The implications of frames, including structure and attributes like SRC, NAME, and MARGINWIDTH, are discussed. Additionally, the lecture touches on the disadvantages of using frames, such as bookmarking limitations and compatibility issues with older browsers, providing alternatives for browsers that do not support frames.

cameron-nicholson
Télécharger la présentation

Understanding Frames vs. Tables in Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture on: Frames

  2. FRAMES VERSUS TABLES Frames allow part of the page, usually a navigation bar, to stay put

  3. The Requirements to Create Frames A FRAMESET html document to create the overall layout HTML documents to fill the areas implied in the frameset document

  4. Implication of frame structure A document rendered by FRAMESET displays several web pages at once FRAMESET replaces the BODY tag in your html file

  5. An Annotated Example <HTML> <HEAD> You aren’t putting any text above the frame </HEAD> <FRAMESET>  This sets up your structure <FRAME SRC=“topdoc.html”>in this frame the FIRST time the page is loaded <FRAME SRC=“bottomdoc.html”Ditto </FRAMESET> note thatFrameset is a container element </HTML>…by default, the screen will split equally between your documents

  6. FRAMESET Attributes ROWS= COLUMNS= BORDER= BORDERCOLOR=

  7. ROWS AND COLUMNS Use ROWS= COLUMNS= if you don’t want screen split evenly - pixels or percentages - * -- lets HTML compute what’s left

  8. BORDERS BORDER= (between pages on screen) in pixels defaults to 5 BORDERCOLOR (of frames) defaults to gray on most browsers

  9. FRAME Attributes SRC= NAME= MARGINWIDTH= MARGINHEIGHT=

  10. SRC SRC= where to get the html page to fill this frame If you don’t put SRC, the frame will be created but left blank

  11. NAME Goes within the FRAME element NAME=“framename” By naming your frames, you make it possible to open links in them from any document anyplace on the screen

  12. A more complex FRAMESET Example <FRAMESET COLS=“20% ,80%”> splits page vertically <FRAMESET ROWS=“15%,* >splits the 20% horizontally <FRAME SRC=“logo.gif”>  logo in the top 15% <FRAME SRC=“nav.gif” name=“menu”> nav in the bottom 85% ; also names the frame so I can open links in it from elsewhere <FRAMESET ROWS=“*” the 80% is all one row <FRAME SRC=“pagebody.html name=“main”>  this fills the right side </FRAMESET>

  13. TARGET used with Frames Links within documents open in the current window To override this, use TARGET An example: Among my hobbies are <A HREF=“porkers.html” TARGET=“main”> pigs </A>, <AHREF=“peeps.html” TARGET=“main”> chickens </A>……

  14. TARGET Reserves 4 Words _BLANK loads the page into a new browser window _SELF loads the page into the current window. _PARENT loads the page into the frame next up from the frame the link is in _TOP loads the page into the full browser window.

  15. Hint If you misspell the target the browser will create a new window for your link INSTEAD OF loading it in the current page

  16. Minor FRAME Elements MARGINWIDTH= MARGINHEIGHT= SCROLLING=

  17. Padding within Frames MARGINWIDTH= pads frames side to side MARGINHEIGHT= pads frames top to bottom Both expressed in pixels

  18. The Scroll Bar SCROLLING=“auto” is the default; creates a scrollbar if page is longer than frame SCROLLING=“yes” creates a bar all the time SCROLLING=“no” suppresses the bar

  19. Two Disadvantages of Frames • The bookmark is fixed to the controlling FRAMESET document so you can’t bookmark the contents of the frames. • Not every browser is frames-capable

  20. The Frames-Incapable 1. Browsers older than Explorer 3.0 Navigator 2.0 2. Screen resolutions of less than 640 by 480 pixels

  21. Provide an Alternative for those Browsers Before FRAMESET, code <NOFRAMES> <BODY> What you want them to see instead…. </BODY> </NOFRAMES>

More Related