Tutorial HTML - Layouts
Scris: 18 Feb 2011 00:15
Un layout nu are prea multe optiuni. Pe de alta parte un table este foarte folositor. Intr-un tabel poate fi introdus cam orice element, chiar si un alt tabel.
Copiaza acest cod in notepad si salveazal ca un document .html.
HTML - layout standard
Un layout standard consta intr-un banner in zona de sus a paginii un meniu in partea din stanga iar zona de continut in partea de dreapta-mijloc. Acesta este cel mai clasic layout pentru un website, iar dupa parerea mea un model foarte
Vizualizare
Aceasta este o abordare de baza. Dupa cum vei observa daca vei folosi aceste layout-uri in paginile tale, va daveni foarte complex pe masura ce vei adauga continut. Cu toate acestea este important sa specifici inaltimea (height) si latimea (width). Cu cat vei fi mai specific in stabilirea acestor atribute cat si a altora cu atat mai putine bug-uri vei avea.
Studiaza putin acest cod, organizeazal in asa masura incat sa il poti intelege. Copiazal intr-un document nou pentru a-l vizualiza.
Cod: Selectaţi tot
<table>
<tr><td> <table>
<tr><td>Tables inside tables!</td></tr>
</table> </td></tr></table>HTML - layout standard
Un layout standard consta intr-un banner in zona de sus a paginii un meniu in partea din stanga iar zona de continut in partea de dreapta-mijloc. Acesta este cel mai clasic layout pentru un website, iar dupa parerea mea un model foarte
Cod: Selectaţi tot
<table>
<tr><td>
<table>
<tr><td>Place a banner here</td></tr>
</table>
</td></tr> <tr><td>
<table> <tr><td>Links!</td></tr>
<tr><td>Links!</td></tr> <tr><td>Links!</td></tr>
</table>
</td><td> <table> <tr><td>Content goes here</td></tr>
</table>
</td></tr></table>Cod: Selectaţi tot
******* Locul Banner-ului *******
|
|
|
|
|
Links! |
Links! | Continutul aici
Links! |
|
|
|
|
********************************************Cod: Selectaţi tot
<table> <tr><td>
<table>
<tr><td>Banner goes here</td></tr>
</table>
</td></tr> <tr><td>
<table>
<tr><td>Links!</td> <td>Links!</td> <td>Links!</td></tr>
</table>
</td></tr> <tr><td>
<table> <tr><td>Content goes here</td></tr>
</table> </td></tr></table>