Banner

Oversigt over modellerne

Overskrift 1
Her er indsat en nyhedsboks, hvor du kan fortælle lidt om indholdet af siden, eventuelle nyheder eller lignende.

Overskrift 2
Sådanne kasser kan du lave så mange af, du har lyst til.

Layout med 3 kolonner

Med flere end 10-12 websider på en website melder der sig et behov for at signalere, at siten er opdelt i forskellige sektioner, jf. eksemplerne med solsystemet. Der er mange måder at gøre det på. Den, der er anvendt her, anbefales ret bredt. Hvis du kan abstrahere fra dette eksempel, kan du f.eks. forestille dig, at en person på en site om solsystemets planeter klikker på hovedmenuens menupunkt "Mars". Dette resultaterer så i, at hovedmenuen forbliver den samme (med link til alle planeterne), men med ordet "Mars" fremhævet, indlæsningen af en artikel om Mars i indholdsdelen, og indlæsningen af en undermenu, der indeholder links til websiderne med fakta om Mars' atmosfære, topologi, baneforhold, er der liv på Mars osv.

Nu ser tabelkoden således ud:

<table width="100%" align="center" 
cellspacing="0" cellpadding="5" border="0">
    <tr><td colspan="3">
    
        <table width="100%" cellspacing="0" 
          cellpadding="10">
          <tr><td class="white">
          [ Banner ]
          </td></tr>
        </table>
    
    </td>
    </tr>
    <tr valign="top">
    <td width="150" align="right">
    
        <table width="100%" cellpadding="10" cellspacing="0">
          <tr><td class="yellow" align="right">
          [ Menuoverskrift ]
          </td></tr>
          <tr><td align="right" class="white">
          [ Menu ]
          </td></tr>
        </table>
        <br>
        <table width="100%" cellpadding="10" cellspacing="0">
          <tr><td class="yellow" align="right">
          [ Overskrift 1 ]</td></tr>
          <tr><td align="right" class="white">
          [ Nyhedsboks 1 ]
          </td></tr>
        </table>
        <br>
          <table width="100%" cellpadding="10" cellspacing="0">
          <tr><td class="yellow" align="right">
          [ Overskrift 2 ]</td></tr>
          <tr><td align="right" class="white">
          [ Nyhedsboks 2 ]
          </td></tr>
        </table>
    </td>
    <td>
        <table width="100%" cellspacing="0" cellpadding="10">
        <tr><td class="white">
        [ Indhold ]
        </td></tr>
        </table>
    </td>
    <td width="150">
        <table width="100%" cellpadding="10" cellspacing="0">
        <tr><td class="yellow" align="left">
        [ Undermenu ]</td></tr>
        <tr><td align="left" class="white">
        [ Links ]
        </td></tr>
        </table>
        </td>
    </tr>
    <tr><td> </td>
    <td colspan="2"> 
    
    <table width="100%" cellpadding="10">
      <tr><td class="white">
      [ Footer ]
      </td></tr>
    </table>
    
    </td></tr>
</table>

Foruden den class .white vi havde brug for i eksempel 2, har vi her også brug for en class .yellow til at lave den gule fremhævning af overskriften i kasserne, samt lidt manipulation med linket i den øverste kasse:

  .white {background-color:white;
  border:1px solid black;
  }
  .yellow {background-color:#f90;
  border:1px solid black;
  border-bottom:0;
  }
 .yellow a {color:#036;}
 
I denne sektion:
Links til forskellige websider i én af hovedmenuens sektioner.
 
Jørgen Farum Jensen
www.webdesign101.dk - e-mail webmaster-at-webdesign101.dk