Next:
Web Page Design Problems
Up:
Lecture 8
Previous:
XML and CSS
Web Page Design
Common design for a web page:
Page design can be achieved by a table (high level, easily changed)
<table border="0" cellpadding="2" cellspacing="2">
<tr><td rowspan="3">Navigation</td><td>Header</td></tr>
<tr><td>Content</td></tr>
<tr><td>Footer</td></tr>
</table>
Table formatter can layout table to suit resolution of display.
Style directives can constrain width and height of cells.
Page design can also be achieved by divs (lower level, faster)
<div style="position: absolute; left: 0px; top: 0px">Navigation</div>
<div style="position: absolute; left: 90px; top: 0px">Header</div>
<div style="position: absolute; left: 90px; top: 120px">Content</div>
<div style="position: absolute; left: 90px; top: 560px">Footer</div>
However, changes require coordinates & pixel lengths be recomputed.
Page design can also be achieved by frames (less desirable)
<frameset cols="20%, 80%">
<frame src="navigation.html">
<frameset rows="15%, 70%, 15%">
<frame src="header.html">
<frame src="content.html">
<frame src="footer.html">
</frameset>
</frameset>
Frames create navigation problems and conflate structure with layout.
