Frames in XHTML Please use speaker notes for additional information!

10
Frames in XHTML Please use speaker notes for additional information!

Transcript of Frames in XHTML Please use speaker notes for additional information!

Page 1: Frames in XHTML Please use speaker notes for additional information!

Frames in XHTML

Please use speaker notes for additional information!

Page 2: Frames in XHTML Please use speaker notes for additional information!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Header Page</title></head><frameset rows="50%,*"><frame src="hdrtx.html" name="hdrtop" /><frame src="hdrbx.html" name="hdrbottom" /></frameset></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>This is the top...</title></head><body><h1>TOP OF SCREEN!!!</h1><p>This is the top header information!<br /><img src="image.gif" alt="image" /></p></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>This is the bottom...</title></head><body><h1>BOTTOM OF SCREEN!!!</h1><p>This is the bottom header information!<br /><img src="image.gif" alt="image" /></p></body></html>

The frameset is divided into rows. The first row will take up 50% of the page and the second row will use * which means the rest of the page.

Page 3: Frames in XHTML Please use speaker notes for additional information!

This is hdrtx.html inside the top frame in the page indextbx.html.

This is hdrbx.html inside the bottom frame in the page indextbx.html.

Page 4: Frames in XHTML Please use speaker notes for additional information!

When you click on source you see the source for the main page with the frameset.

To see the source of the page in the frame, right click in the frame and view source.

Page 5: Frames in XHTML Please use speaker notes for additional information!
Page 6: Frames in XHTML Please use speaker notes for additional information!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html><head><title>Header Page</title></head><frameset cols="50%,*"><frame src="hdrlx.html" name="hdrleft" /><frame src="hdrrx.html" name="hdrright" /></frameset></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><title>This is the right...</title></head><body><h1>RIGHT SIDE OF SCREEN!!!</h1><p>This is the right header information!<br /><img src="image.gif" alt="image" /></p></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>This is the left...</title></head><body><h1>LEFT SIDE OF SCREEN!!!</h1><p>This is the left header information!<br /><img src="image.gif" alt="image" /></p></body></html>

The framset is divided into columns with the first column using 50% of the page and the last column using the rest. * means whatever is left.

Page 7: Frames in XHTML Please use speaker notes for additional information!
Page 8: Frames in XHTML Please use speaker notes for additional information!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html><head><title>Header Page</title></head><frameset cols="50%,*" rows="50%,*"> <frame src="hdrtx.html" name="hdrtop" /> <frame src="hdrrx.html" name="hdrright" /> <frame src="hdrlx.html" name="hdrleft" /> <frame src="hdrbx.html" name="hdrbottom" /></frameset></html>

Note that I indented <frame for readability.

This will produce the configuration shown on the next slide. The output is broken into columns and then rows.

Page 9: Frames in XHTML Please use speaker notes for additional information!
Page 10: Frames in XHTML Please use speaker notes for additional information!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html><head><title>Header Page</title></head><frameset rows="25%,50%,*"> <frame src="hdrtx.html" name="hdrtop" /> <frameset cols="50%,*"> <frame src="hdrlx.html" name="hdrleft" /> <frame src="hdrrx.html" name="hdrright" /> </frameset> <frame src="hdrbx.html" name="hdrbottom" /></frameset></html>

Three rows have been designated.

The first row contains one page. It is 25% of the page.

There is a frameset within the second row divided into two columns. Each column contains a page.

After the frameset that forms the second row is closed, the next row is a frame that contains one page. It is also 25% although the designation was *.