Lav et site-map - vis strukturen på dit site

Indlæs andet indhold på denne side:

Siden er opdateret 21. 5. 2006

Site map i tabel

Først viser jeg en smule af det færdige resultat i den første mulighed og derunder fortæller jeg, hvordan det er sat sammen. Derunder igen viser jeg de to andre mulighed på samme måde.

For at tydeliggøre tabellen, har jeg vist cellerne med border. I den færdige version skal border ikke være synlig.

Forside
Layout HTML Grafik
Start med Mind Map En helt ny side Filformat og -version
Sidernes layout Elementer i HTML Størrelser, klip/klistre

Det hele ligger i en tabel, hvori der i nogle celler er vist nogle sider med links til samme og i andre celler er anbragt forskellige små grafikfiler, der udgør de røde streger, som viser sammenhængen mellem siderne og kategorierne.

De anvendte grafikfiler er disse:

                Alle billederne er 16px høje og 17px brede. De to sidste indgår ikke i det herover viste eksempel, men de indgår i mit eget site-map.

Det første billede - den vandrette streg - er lagt ind som baggrund i celler, hvor jeg ønsker en vandret gennemgående streg. Derved bliver billedet gentaget i hele cellens bredde, uden i sig selv at påvirke bredden på cellen.

Alle øvrige billeder er lagt ind på helt normal vis med <img src="...>.

Cellen med link til forsiden er tildelt colspan="3" for at give plads til de nedenunder liggende 'udfletninger'. På samme måde er cellerne med links til layout, html og grafik tildelt colspan="2".

I kodeboksen herunder viser jeg tabellens opbyging og hvordan billederne er lagt ind. For overskuelighedens skyld har jeg fjernet links fra teksten.

<table>
 <tr>
  <td colspan="3">Forside</td>
  <td style="width:140px;background:url(vandret.gif);color:black"></td>
  <td><img alt="" src="grenned.gif" width="17" height="16" /></td>
  <td colspan="2" style="background:url(vandret.gif);color:black"></td>
  <td><img alt="" src="drejned.gif" width="17" height="16" /></td>
  <td colspan="2"></td>
 </tr>
 <tr>
  <td><img alt="" src="lod.gif" width="17" height="16" /></td>
  <td><img alt="" src="vinkel.gif" width="17" height="16" /></td>
  <td colspan="2">Layout</td>
  <td><img alt="" src="vinkel.gif" width="17" height="16" /></td>
  <td colspan="2">HTML</td>
  <td><img alt="" src="gren.gif" width="17" height="16" /></td>
  <td colspan="2">Grafik</td>
 </tr>
 <tr>
  <td><img alt="" src="lod.gif" width="17" height="16" /></td>
  <td></td>
  <td><img alt="" src="gren.gif" width="17" height="16" /></td>
  <td>Start med layout</td>
  <td></td>
  <td><img alt="" src="gren.gif" width="17" height="16" /></td>
  <td style="width:140px">En helt ny side</td>
  <td><img alt="" src="lod.gif" width="17" height="16" /></td>
  <td><img alt="" src="gren.gif" width="17" height="16" /></td>
  <td style="width:140px">Filformat og -version</td>
 </tr>
 <tr>
  <td><img alt="" src="lod.gif" width="17" height="16" /></td>
  <td></td>
  <td><img alt="" src="gren.gif" width="17" height="16" /></td>
  <td>Andre designs</td>
  <td></td>
  <td><img alt="" src="gren.gif" width="17" height="16" /></td>
  <td>CSS og stylesheet</td>
  <td><img alt="" src="lod.gif" width="17" height="16" /></td>
  <td><img alt="" src="gren.gif" width="17" height="16" /></td>
  <td>Størrelser, klippe/klistre</td>
 </tr>
</table>

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen februar 2003
Hjemmesideskolen
Du er her: Forsiden - scripts - Lav et site-map - vis strukturen på dit site
Brugere lige nu: 1
Home Mail