Download presentation
Presentation is loading. Please wait.
1
HTML Layout and Sub Meun
2
Website layout coding tutorial from PSD into XHTML and CSS
3
Website Layout
4
Make 2 files. Layout.html and aboutme.html And upload your server. (stuhtml/####/)
5
Layout.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>WEB PAGE TITLE GOES HERE</title> </head> <body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;"> <table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"> <tr> <!-- ============ HEADER SECTION ============== --> <td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr> <!-- ============ NAVIGATION BAR SECTION ============== --> <tr><td colspan="3" valign="middle" height="30" bgcolor="#a9ae9f"><a href="layout.html">Home</a></td></tr> <!-- ============ LEFT COLUMN (MENU) ============== --> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="aboutme.html">About Me</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td> <!-- ============ MIDDLE COLUMN (CONTENT) ============== --> <td width="55%" valign="top" bgcolor="#d2d8c7"> <h2>Page heading</h2> A three column layout with header, navigation bar and footer sections. The first, second and fourth table rows create the header, navigation bar and footer respectively and contain a single table cell each. All these table cells use colspan="3" attribute-value pair. <br> <br> The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).<br> <td width="25%" valign="top" bgcolor="#999f8e"> </td> </tr> <!-- ============ FOOTER SECTION ============== --> <tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr> </table> </body>
6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head> <title>WEB PAGE TITLE GOES HERE</title> </head> <body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;"> <table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"> <tr> <!-- ============ HEADER SECTION ============== --> <td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr> <!-- ============ NAVIGATION BAR SECTION ============== --> <tr><td colspan="3" valign="middle" height="30" bgcolor="#a9ae9f"><a href="layout.html">Home</a></td></tr>
7
<tr> <!-- ============ LEFT COLUMN (MENU) ============== --> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="aboutme.html">About Me</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td> <!-- ============ MIDDLE COLUMN (CONTENT) ============== --> <td width="55%" valign="top" bgcolor="#d2d8c7">
8
<h2>Page heading</h2>
A three column layout with header, navigation bar and footer sections. The first, second and fourth table rows create the header, navigation bar and footer respectively and contain a single table cell each. All these table cells use colspan="3" attribute-value pair. <br> <br> The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).<br> </td> <td width="25%" valign="top" bgcolor="#999f8e"> </td> </tr> <!-- ============ FOOTER SECTION ============== --> <tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr> </table> </body> <html>
10
aboutme.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>WEB PAGE TITLE GOES HERE</title> </head> <body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;"> <table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"> <tr> <!-- ============ HEADER SECTION ============== --> <td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr> <!-- ============ NAVIGATION BAR SECTION ============== --> <tr><td colspan="3" valign="middle" height="30" bgcolor="#a9ae9f"><a href="layout.html">Home</a></td></tr> <!-- ============ LEFT COLUMN (MENU) ============== --> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="aboutme.html">About Me</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td> <!-- ============ MIDDLE COLUMN (CONTENT) ============== --> <td width="55%" valign="top" bgcolor="#d2d8c7"> <h2>Page heading</h2> A three column layout with header, navigation bar and footer sections. The first, second and fourth table rows create the header, navigation bar and footer respectively and contain a single table cell each. All these table cells use colspan="3" attribute-value pair. <br> <br> The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).<br> <td width="25%" valign="top" bgcolor="#999f8e"> </td> </tr> <!-- ============ FOOTER SECTION ============== --> <tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr> </table> </body>
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head> <title>WEB PAGE TITLE GOES HERE</title> </head> <body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;"> <table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"> <tr> <!-- ============ HEADER SECTION ============== --> <td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr> <!-- ============ NAVIGATION BAR SECTION ============== --> <tr><td colspan="3" valign="middle" height="30" bgcolor="#a9ae9f"><a href="layout.html">Home</a></td></tr>
12
<tr> <!-- ============ LEFT COLUMN (MENU) ============== --> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="aboutme.html">About Me</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td> <!-- ============ MIDDLE COLUMN (CONTENT) ============== --> <td width="55%" valign="top" bgcolor="#d2d8c7">
13
<h2>Page heading</h2>
A three column layout with header, navigation bar and footer sections. The first, second and fourth table rows create the header, navigation bar and footer respectively and contain a single table cell each. All these table cells use colspan="3" attribute-value pair. <br> <br> The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).<br> </td> <td width="25%" valign="top" bgcolor="#999f8e"> </td> </tr> <!-- ============ FOOTER SECTION ============== --> <tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr> </table> </body> <html>
14
Add more menu Image button menu
15
<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="20%" valign="top" bgcolor="#999f8e"> <a href="aboutme.html">About Me</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td> <!-- ============ LEFT COLUMN (MENU) ============== --> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="aboutme.html">About Me</a><br> <a href="resume.html"><img src=" width="100px" height="50px“></a> <br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td>
16
You can change any menu, Before make a html file
Similar presentations
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](/24/7400148/big_thumb.jpg ">> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.>")
