Giorno 27: Usate intestazioni vere

Pensate al vostro sito come ad uno schema a livelli. Il livello principale è intestato con il nome del sito. Sulla vostra pagina principale, vi sono elementi da parecchi giorni. Così' il secondo livello riporta la data: "Marted' 16 luglio 2002", o qualcosa di simile. Ogni giorno, inserite più articoli, che hanno, ognuno, un proprio titolo. Se è così, avete anche un terzo livello, rappresentato dai titoli degli articoli.

Ora applicate questo schema utilizzano i tag <h1>, <h2>, <h3> . I lettori di schermo si affidano a questi tag per interpretare la struttura delle vostre pagine. Sì, le vostre pagine hanno una struttura, ma senza gli appropriati tag per le intestazioni, i lettori di schermo non la ritrovano. Tra un minuto, mostrerò come usare i CSS per far apparire, sempre allo stesso modo, le intestazione nei browser visuali, indipendentemente dal mostruoso tipo di <font> utilizzato.

A chi serve?

  1. A Jackie. Appena Jackie raggiunge la vostra pagina, JAWS annuncia che la pagina ha un certo numero di link ed un certo numero di intestazioni. Jackie può digitare INSERT+F6 per ascoltare tutte le intestazioni della pagina, oppure CTRL+INSERT+ENTER per navigare velocemente nella pagina, saltando alla successiva intestazione.
  2. A Michael. In Opera, può digitare S per saltare alla successiva intestazione, oppure W per tornare alla precedente.
  3. A Google. Google apprezza la pagina ben strutturata, e valuta di più le parole chiave che appaiono tra i tag delle intestazioni. (Dunque un'altra buona ragione per scrivere al meglio i titoli degli articoli)

Come fare: Movable Type

  1. Definite gli stili per il logo del sito. Nel modello Stylesheet (styles-sites.css), aggiungete le seguenti linee:

    h1, h2, h3 {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 20px;
  font-weight: normal;
}

/*/*/a{}
h1 {font-size: 100%}
/* */

  2. Definite lo stile del logo con il tag <h1>. Nei 4 modelli principali (Main Index, Category Archive, Date-Based Archive, Individual Entry Archive), cercate questo:

    <div id="banner">
<$MTBlogName$><br />

    E sostituitelo con questo:

    <div id="banner">
<h1><$MTBlogName$></h1>

  3. Definite le date con i tag <h2>. Abbiamo già una classe definita per questa date, quindi non è necessario cambiare nulla; cambiamo solo il tag. Nei 4 principali modelli, cercate questo:

    <div class="date">	
<$MTEntryDate format="%B %d, %Y"$>
</div>

    E sostituitelo con questo:

    <h2 class="date">	
<$MTEntryDate format="%B %d, %Y"$>
</h2>

  4. Definite i titoli degli articoli con il tag <h3>. Di nuovo, cambieremo solo il tag, non il foglio di stile. Nei 4 principali modelli, cercate questo:
    <span class="title"><$MTEntryTitle$></span>

    E sostituitelo con questo:
    <h3 class="title"><$MTEntryTitle$></h3>

Come fare: Radio

  1. Definite lo stile delle intestazioni. Il tema preimpostato in Radio non usa i tag delle intestazioni, sarà dunque necessario definire questi stili direttamente. (Da personalizzare, ma questi esempi dovrebbero rendere identica la visione di queste pagine come nei browser visuali.)
    In effetti, prima di iniziare, cercate "h2 {" nel modello di Home Page. Se trovate questa regola, rimuovetela; non viene utilizzata da nessuna parte, e ci servirà a nostro modo:

  2. h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold
    }

  3. Bene, ora aggiungete questi stili, non importa dove,  nella sezione <style> del modello di Home Page:

    h1, h2 {
  margin: 0;
  padding: 0;
}

h1 {font-size: 24px}
h2 {font-size: 13px}

/*/*/a{}
h1 {
  font-size: large;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: x-large;
}
html>body h1 {
  font-size: x-large;
}
h2 {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body h2 {
  font-size: small;
}
/* */

    Notate che stiamo usando dimensioni di font relative nelle intestazioni per i browser che interpretano il dimensionamento relativo, e la dimensione assoluta per Netscape 4. Questa tecnica dovrebbe esservi familiare; l'abbiamo utilizzata infatti ieri.

  4. Definite l'intestazione per il nome del sito. Nel modello di Home Page, cercate "<%siteName%>" ed individuate questa linea:

    <font size="+2"><b><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></b></font>

    Cambiatela così:

    <h1><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></h1>

  5. Definite l'intestazione per le date. Nel modello Day , cercate "<%longDate%>" ed individuate questa linea:

    <b><%longDate%></b>

    Cambiatela così:

    <h2><%longDate%></h2>

Approfondimenti

 
<< Giorno 26: Usate dimensioni relative per i font| Indice | Giorno 28: Etichettate gli elementi dei moduli >>