Download - Lecture on:
![Page 1: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/1.jpg)
Lecture on:
Frames
![Page 2: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/2.jpg)
FRAMES VERSUS TABLES
Frames allow part of the page, usually a navigation bar, to stay put
![Page 3: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/3.jpg)
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
![Page 4: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/4.jpg)
Implication of frame structure
A document rendered by FRAMESET displays several web pages at once
FRAMESET replaces the BODY tag in your html file
![Page 5: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/5.jpg)
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 that Frameset is a container element
</HTML>…by default, the screen will split equally between your documents
![Page 6: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/6.jpg)
FRAMESET Attributes
ROWS=
COLUMNS=
BORDER= BORDERCOLOR=
![Page 7: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/7.jpg)
ROWS AND COLUMNS
Use ROWS= COLUMNS=if you don’t want screen split evenly
- pixels or percentages
- * -- lets HTML compute what’s left
![Page 8: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/8.jpg)
BORDERS
BORDER= (between pages on screen)
in pixels defaults to 5 BORDERCOLOR (of frames) defaults to gray on most browsers
![Page 9: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/9.jpg)
FRAME Attributes
SRC=
NAME=
MARGINWIDTH=MARGINHEIGHT=
![Page 10: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/10.jpg)
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
![Page 11: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/11.jpg)
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
![Page 12: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/12.jpg)
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>
![Page 13: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/13.jpg)
TARGET used with FramesLinks 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>……
![Page 14: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/14.jpg)
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.
![Page 15: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/15.jpg)
Hint
If you misspell the target the browser will create a new window for your link
INSTEAD OF loading it in the current page
![Page 16: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/16.jpg)
Minor FRAME Elements
MARGINWIDTH=
MARGINHEIGHT=
SCROLLING=
![Page 17: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/17.jpg)
Padding within Frames
MARGINWIDTH= pads frames side to side
MARGINHEIGHT= pads frames top to bottom
Both expressed in pixels
![Page 18: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/18.jpg)
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
![Page 19: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/19.jpg)
Two Disadvantages of Frames
1. The bookmark is fixed to the controlling FRAMESET document so you can’t bookmark the contents of the frames.
2. Not every browser is frames-capable
![Page 20: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/20.jpg)
The Frames-Incapable
1. Browsers older than Explorer 3.0 Navigator 2.0
2. Screen resolutions of less than 640 by 480 pixels
![Page 21: Lecture on:](https://reader031.vdocument.in/reader031/viewer/2022032414/5681341f550346895d9b0a06/html5/thumbnails/21.jpg)
Provide an Alternative for those Browsers
Before FRAMESET, code <NOFRAMES> <BODY> What you want them to see
instead…. </BODY> </NOFRAMES>