120 likes | 469 Views
Frames. How to Create Frames in HTML Dr. Sanders. Why Frames?. Frames allow you to have more than a single window on the screen at the same time. You can keep a menu on the screen and bring up different information. Able to create Web sites that change dynamically with student input.
E N D
Frames How to Create Frames in HTML Dr. Sanders
Why Frames? • Frames allow you to have more than a single window on the screen at the same time. • You can keep a menu on the screen and bring up different information. • Able to create Web sites that change dynamically with student input. • Requires JavaScript
Frames • Frame are trickier than tables, and you cannot use Composer to create frames. Other tools such as PageMill and DreamWeaver make it easy to create frames. • A single page with frames has at least three HTML files: • Frameset file • Frame 1 and Frame 2 files
Frameset • The frameset file is an invisible one that places the frames where you want on a page. Here’s the code for a simple set. <FRAMESET COLS=“15%,85%”> <FRAME SRC= “PageA.html”> <FRAME SRC= “PageB.html”> </FRAMESET>
Frame Arrangement Frame 2 Frame 1
Wombats Frame Order Links in the frames will replace the current frame with the linked frame unless specified otherwise. Frame 1 Wombats Frameset Frame 2
Replaced Frame Frame 2 Wombats
Nested Frames • Arranging both columns and rows require a nested frameset: <FRAMESET ROWS="45%,*"> <FRAMESET COLS="*,15%"> <FRAME SRC="pageA.html"> <FRAME SRC="pageB.html"> </FRAMESET> <FRAMESET COLS="15%,*"> <FRAME SRC="pageC.html"> <FRAME SRC="pageD.html"> </FRAMESET> </FRAMESET>
Nested Frames 85% for first column 15% for second column 45% for top row 15% for first column 85% for second column
Parameters • frameborder = “no” [Default=yes] • border=“0” [Default=“1” may have higher number”] • bordercolor=“white” • noresize [No values] • scrolling= “no” [auto, yes options] • marginwidth =“50” [value in pixels] • marginheight =“50” [value in pixels]
Parameter examples <FRAMESET ROWS=“115,270” border=“0” framespacing=“0” bordercolor=“white” frameborder=“no”> <FRAME SRC=“title.html” Name=“top” scrolling=“no” noresize bordercolor=“#FFFFFF”>