CpSc 217 - Structured and Dynamic Web Programming

The notes found on these pages all reference the textbook given above. Unless otherwise stated, the citation of the information on these web pages is that text.

framesets are now old.
iframe has replaced them.

Frames allow you to split the page into pieces

<frameset rows="25%,50%,25%" frameBorder="yes" borderColor=black>
   <noframes>Sorry, your browser does not support frames<noframes>

  <frameset cols="75%,25%" frameBorder="no" frameSpacing=10 >
     <frame src="topleft.html" name="TopLeft" scrolling=no>
	 <frame src="topright.html" name="TopRight" scrolling=no>
  </frameset>
  <frameset cols="50%,50%" frameBorder="yes" bordercolor="blue" >
     <frame src="midleft.html" name="Midleft" scrolling=auto>
     <frame src="midright.html" name="Midright" scrolling=auto>  
  </frameset>
  <frameset cols="25%,75%" frameBorder="no" >   
     <frame src="botleft.html" name="BottomLeft" scrolling=yes>
     <frame src="botright.html" name="BottomRight" scrolling=yes>
  </frameset>
</frameset>

• Split the screen into rectangle pieces by defining rows and columns
• the frameset tag permits you to set rows or columns
• The frame tag defines what you want placed in the frame
• Nest the framesets if you want cols inside of rows
• Look at this example
  it uses a "master" frame set up and also html pages to display in each frame.
• Try IFrames "begun"
  W3Schools list of attributes for iFrames
• frameset
  • rows
  • cols
  • frameBorder
  • borderColor
• frame
  • src
• put a body tag in ????

The Pages within the frames

• Note that the frame "children" all have body tags
• Modify the background colors of the children
  Note that the pages must be saved in order for changes to be seen

You can refer to one frame from within another frame and modify that frame's properties:

• name
• parent
• self
• top
• Properties sample
• A more meaningful example
• Same, but using iframe

Try creating a page on your own:

• Create a page with four iFrames named: frame1, frame2, frame3, and frame4
• Initially, all 4 frames should be empty
  • You can place the frames anywhere you'd like.
  • Try some with borders and without
  • Use different border colors
  • Use different values for scroll bars
• Create the 4 frames
  • Create 4 pages with text, images as you desire
  • Make sure each of the 4 pages is unique
• Write code to randomly swap iframes every 3 seconds

You can also use windows to "re-write" pages

• This example opens a new window, but won't permit the user to open a second, unless the first is opened
• Can you find way(s) to circumvent this limitation>
• A simpler example to do the same thing
• Can you find way(s) to circumvent this limitation?
  
• This example displays window properties