Embed Size (px)
Citation preview
Website Design - Review
Layout using tables
Table exmaple <table border="1">
<tr>
<td rowspan=“2>
<img src=“cake.gif” alt=“cake” height=“100” width=“100” /></td>
<td>James</td>
</tr>
<tr>
<td>11/08</td>
</tr>
</table>
Using a Table toFormat a Web Page
<table border="0" width="80%"> <tr> <td colspan="3">
<h1>This is the banner area</h1></td>
</tr> <tr> <td width="20%" valign="top">
Place Navigation here</td> <td width="10"> </td> <td>Page content goes here</td> </tr></table>
3
Additional Table Layouts
4
Try create these examples
Website with Layout – Using Tables<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<table><tr></tr><tr>
<td></td><td></td>
</tr><tr></tr>
</table>
Website with Layout – Using Tables<html>
<head><title>WebPage in Layout</title>
</head><body>
</body></html>
Website with Layout – Using Tables
<body>
<table width="1000" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;" height:100px; valign="middle">
<img src="logo.png" width="100" height="100" alt="Logo Here" style="float: left;" />
<h1> (Write your heading here) </h1>
</td>
</tr>
</table>
</body>
Website with Layout – Using Tables
<tr valign="top"><td style="background-color:#FFD700; width:100px;text-align:top;"><b>Main Menu</b><br><a href="page1.html"> Page with image </a><br><a href="page2.html"> Information </a><br><a href="page3.html"> Others </a></td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">Content goes here<br>This is our BODY of this webpage we can use to write the information we want. Or to show other information like images.<br><hr>this is example for a link to go to <a href="http://www.youtube.com"> Youtube </a></td>
</tr>
Website with Layout – Using Tables
<td style="background-color:#FFD700; width:100px;text-align:top;">
<b>Main Menu</b>
<br>
<a href="page1.html"> Page with image </a>
<br>
<a href="page2.html"> Information </a>
<br>
<a href="page3.html"> Others </a>
</td>
Website with Layout – Using Tables
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here<br>
This is our BODY of this webpage we can use to write the information we want. Or to show other information like images.<br>
<hr>
this is example for a link to go to
<a href="http://www.youtube.com"> Youtube </a>
</td>
Website with Layout – Using Tables
<tr>
<td colspan="2" style="backgroundcolor:#FFA500;text-align:center;">
This Webpage is made by YourName. (2013)
</td>
</tr>
