Dag 18: Gi din kalender en ekte overskrift

«Men,» hører jeg du roper ut, «kalenderen min har allerede en overskrift. Bare se her, den har måneden og året rett der til høyre på toppen. Til og med i fet skrift.»

Men hvis du dykker inn i HTML-kilden, så vil du se at kalenderen din ikke har en ekte overskrift. Sannsynligvis har den en enkel <td> tabellcelle definert til å strekke seg over hele den første raden, med en CSS-regel som gjør den fet. Dette er veldig mye lettere med en ekte <caption>-tagg. Det er lettere å lese i malen din, siden din sparer noen byte, ser nøyaktig lik ut i visuelle nettlesere, og er mer tilgjengelig.

Hvem har nytte av det?

  1. Marius har nytte av det. Lynx viser overskriften i fronten med ordet «OVERSKRIFT:», og gjør det helt tydelig at denne linjen er overskriften og ikke kolonnens tittel eller tabelldata.
  2. Anne får indirekte nytte av det. Ved å bruke en ekte <caption>-tagg ryddes veien for bruken av ekte tabelltitler, noe som gagner Anne på en måte som vi skal diskutere i morgen.

Hvordan gjøre det

Du kan kun gjøre dette i publiseringsverktøy som har støtte for kalendere (noe som utelukker Blogger) og som tillater deg å tilpasse HTML-en som er generert for kalendere (som utelukker Manilla).

I Movable Type, har du sannsynligvis en tabell til kalenderen i din hovedsidemal som starter slik som dette (du finner den sannsynligvis ved å søke etter «calendarhead»):

<table border="0" cellspacing="4" cellpadding="0">
<tr>
<td colspan="7" align="center"><span class="calendarhead"><$MTDate format="%B %Y"$></span></td>
</tr>

<tr>
<td align="center"><span class="calendar">Søn</span></td>
...

La tabelltaggen være, men bytt ut hele den første <tr>-tabellraden med en ekte <caption>-tagg, slik som dette:

<table border="0" cellspacing="4" cellpadding="0">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<td align="center"><span class="calendar">Søn</span></td>
...

La resten være; vi fikser det i morgen.

class-atributtet til <caption> er valgfri; jeg lot den være der så dette kunne bli en dropp-inn utskiftning i Movable Type's standardmal, som bruker en CSS-regel for å gjøre måneden og året i fet skrift. Ved å bruke <caption>-taggen som vist, burde siden din vises nøyaktig likt som den gjorde før.

I Greymatter, er konseptet det samme men malens tagger er annerledels:

<caption>{{monthword}} {{yearyear}}</caption>

Igjen, du kan forandre den visuelle stilen til caption ved å bruke cascading style sheets, hvis du er inne i denslags ting.

I Radio, så er prosessen til en viss grad vanskeligere, men ikke umulig. (Jeg står i gjeld til Tony Bowden for disse instruksjonene.)

  1. I Radio, åpner du Radio's faktiske applikasjon. I Windows, høyreklikk på det lille Radio-ikonet i systemkurven og velg «Åpne Radio».
  2. I «Verktøy»-menyen, velg «Utviklere», deretter «Hopp ...» (Control+J). Hopp til «system.verbs.builtins.radio.weblog.drawCalendar» (uten anførselstegn).
  3. Så går du til «Rediger»-menyen, «Finn og erstatt», «Finn ...» (Control+F) og finn "hCalendarTable". Dette skulle åpenbare datablokken med kode som tegner den innledende <table>-taggen og den falske kalenderoverskriften.
  4. Endre den siste linjen av datablokken (som skriver ut monthYearString-en i en <tr>-tagg) til dette:

    add ("<caption>" + monthYearString + "</caption>")

  5. Lukk vinduet. Den vil spørre om du ønsker å kompilere endringene, svar ja.
  6. Hvis du ønsker det kan du stilsette overskriften. Gå til din hjemmesidemal (i preferanse-siden) og legg stil til caption-overskriften. Dette er det jeg bruker. Hvor min <style>-seksjon før inneholdt dette:

    body, td, p {
      font-family: verdana, sans-serif;
      font-size: 12px;
    }

    Nå inneholder den dette:

    body, td, p, caption {
        font-family: verdana, sans-serif;
        font-size: 12px;
        }
    
    caption {
      text-align: center;
      font-weight: bold;
    }

Les mer