Dzień 27: Używanie prawdziwych nagłówków

Pomyśl o swojej stronie jak o strukturze wielopoziomowej podobnej do spisu treści. Najwyższy poziom obejmuje całość i jest zatytułowany tak jak Twoja strona. Na stronie głównej masz wpisy poszczególnych dni, zatem drugi poziom to opisy kolejnych dni, np. "czwartek, 12 czerwca 2003", czy jakoś podobnie. Każdego dnia tworzysz wiele wpisów, które mogą mieć swoje własne tytuły. Jeżeli tak, to jest to trzeci poziom utworzony z tytułów kolejnych wpisów.

Możesz zatem oznaczyć tę strukturę używając prawdziwych tagów nagłówków kolejnych poziomów, czyli <h1>, <h2>, <h3>. Programy udźwiękawiające strony internetowe polegają na tych tagach w celu zinterpretowania struktury strony. Twoje strony mają określoną strukturę, ale bez odpowiednich tagów nie można jej poprawnie rozpoznać. Za chwilę zobaczysz jak można użyć stylów CSS, żeby nagłówki wyglądały w przeglądarkach graficznych dokładnie tak samo jak to, czego używasz w tej chwili (nawet jeśli to jakieś monstrum oparte na tagach <font>).

Kto na tym skorzysta?

  1. Jadzia skorzysta. Jak tylko Jadzia wejdzie na Twoją stronę, JAWS zapowiada, że strona posiada określoną liczbę linków i nagłówków. Jadzia może nacisnąć INSERT+F6 aby usłyszeć wszystkie nagłówki obecne na stronie albo CTRL+INSERT+ENTER aby szybko przejść do następnego nagłówka.
  2. Michał skorzysta. W przeglądarce Opera można nacisnąć klawisz S aby przeskoczyć do kolejnego nagłówka, albo W żeby przeskoczyć do poprzedniego.
  3. Google skorzysta. Google potrafi docenić dobrze skonstruowaną stronę i punktuje słowa kluczowe wyżej, kiedy znajdują się one w tagach nagłówków. (To kolejny powód aby pisać dobre tytuły wpisów.)

Jak to zrobić: blog.pl

  1. Nagłówek zawierający nazwę Twojego bloga zdefiniuj jako nagłówek pierwszego poziomu. Miejsce umieszczenia nazwy bloga może być różne w zależności od wykorzystywanego zestawu szablonów, jednak zazwyczaj zawiera makro {ksywa}. We wszystkich szablonach definiujących całe strony (strona główna, archiwum, strona z komentarzami i księga gości) umieść nazwę w tagu <h1>:

    <h1>{ksywa}</h1>

  2. Zdefiniuj tytuły swoich wpisów jako nagłówki drugiego poziomu; w szablonie określającym wygląd pojedynczego wpisu (menu "edytor html, Wpis do bloga") odszukaj kod wstawiający {temat}, np.:

    <b>{temat}</b><br>

    i zamień go na:

    <h2>{temat}</h2>

  3. Kolejne komentarze na stronie z komentarzami do wpisu oraz kolejne wpisy do księgi gości oznacz nagłówkiem trzeciego poziomu. Wystarczy w szablonie definiującym wygląd pojedynczego komentarza (menu "edytor html, Komentarz") oraz w szablonie definiującym wygląd pojedynczego wpisu do księgi (menu "edytor html, Wpis do księgi") zamienić fragment:

    <span class="kto">{autor}</span> |

    na:

    <h3 class="kto">{autor}</h3>

    Oczywiście możesz też dodać omawiane przez nas wskazówki dotyczące dostępności tabel, a nawet całkowicie przerobić szablony. Przykładowo, minimalny a równocześnie w pełni funkcjonalny i bezproblemowo dostępny komentarz może być uzyskany za pomocą takiego prostego szablonu:

    <h3 class="kto">{autor}, <a href="mailto:{email}">{email}</a>, {data} {czas}</h3>
<div class="komentarz">{tresc}</div>

    Szablon wpisu do księgo gości może wyglądać identycznie lub z wydzieleniem adresu autora wpisu poza nagłówek, np. tak:

    <h3 class="kto">{autor}, {data} {czas}</h3>
<div class="kto"><a href="mailto:{email}">{email}</a>, <a href="{url}">{url}</a></div>
<div class="msg">{tresc}</div>

  4. Wygląd nagłówków możesz dowolnie dostosować dodając lub modyfikując w arkuszu CSS (menu "edytor html, Arkusz stylów") definicje dla h1, h2 i h3. Np. aby tytuły wpisów (teraz nagłówki <h2>) wyglądały dokładnie tak samo jak wcześniej, gdy były zwykłym tekstem jedynie pogrubionym przez <b>, wystarczy dopisać:

    h2 {
  font-size: 1em;
  font-weight: bold;
}

Jak to zrobić: niByLog

  1. Nagłówek pierwszego poziomu powinien jak zawsze zawierać nazwę lub tytuł Twojego bloga. W zależności od konstrukcji strony, nazwa ta może być zdefiniowana albo w kodzie HTML strony głównej (zawierającej wywołanie skryptu niByLoga), albo w szablonie "Nagłówek bloga". Jeżeli występuje w kodzie strony głównej, to zapewne nazwa jest wpisana na stałe. Natomiast jeżeli w szablonie, to nazwa bloga może być odczytana z konfiguracji niByLoga np. za pomocą kodu:

    <h1><?php echo $config['cfg_blog_name']; ?></h1>

    Niezależnie od tego jaka występuje u Ciebie sytuacja, ważne jest, aby nagłówek bloga znajdował się wewnątrz tagu <h1>.

  2. Jeżeli wykorzystujesz na blogu grupowanie wpisów wg dni, to wyznaczają one kolejny poziom, który trzeba zdefiniować w szablonie "Nagłówek dnia" za pomocą tagu <h2>, np.:

    <h2>@Data</h2>

  3. Tytuły poszczególnych wpisów bloga to nagłówki poziomu 3. (lub 2. jeśli nie stosujesz grupowania wg dni). W szablonie "Wpis bloga" zdefiniuj je za pomocą następującego kodu:

    <h3>@Tytul</h3>

  4. Na stronie zawierającej komentarze do wybranego wpisu, nagłówek komentarzy występuje na tym samym poziomie co nagłówek dnia, np.:

    <h2>Komentarze gości</h2>

    Natomiast nagłówki poszczególnych komentarzy odpowiadają poziomem nagłówkom kolejnych wpisów na stronie głównej bloga, więc szablon "Komentarz" może zawierać np.:

    <h3>@Data, @Godzina, @Podpis:</h3>

Jak to zrobić: Movable Type

  1. Zdefiniuj style dla logo Twojej strony. W arkuszu stylów (styles-sites.css) dodaj następujące linie:

    h1, h2, h3 {
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 20px;
  font-weight: normal;
}
/*/*/a{}
h1 {font-size: 100%}
/* */

  2. Zdefiniuj logo (tytuł) swojej strony jako tag <h1>. W czterech głównych szablonach (Main Index, Category Archive, Date-Based Archive, Individual Entry Archive) poszukaj kodu:

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

    i zamień go na następujący:

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

  3. Nagłówki dat zdefiniuj jako tagi <h2>. Style dla tego tagu masz już zdefiniowane, więc zmieniamy tylko tag. W tych samych 4 głównych szablonach poszukaj:

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

    i zamień na:

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

  4. Tytuły poszczególnych wpisów to kolejny poziom - zdefiniuj je jako <h3> zamieniając w szablonach kod:

    <span class="title"><$MTEntryTitle$></span>

    na następujący:

    <h3 class="title"><$MTEntryTitle$></h3>

Jak to zrobić: Radio

  1. Zacznij od zdefiniowania stylów. Domyślne szablony Radio nie używają żadnych tagów nagłówków, więc style dla nich musimy zdefiniować samodzielnie. (Można to dowolnie dostosować; poniższe przykłady powinny zapewnić wygląd Twojej strony w przeglądarkach graficznych taki sam jak przed zmianami.)

    Najlepiej przeszukaj szablon "Home Page Template" w poszukiwaniu "h2 {". Jeżeli coś takiego znajdziesz, to usuń (to i tak nie jest nigdzie użyte) i wstaw poniższe:

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

  2. Następnie dodaj poniższe style gdziekolwiek w sekcji <style> w "Home Page Template":

    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;
}
/* */

    Zauważ, że używamy tutaj względnych rozmiarów czcionek dla nagłówków w przeglądarkach, które obsługują je poprawnie, oraz bezwzględnych rozmiarów w przeglądarkach takich jak Netscape 4. Tą technikę już chyba znasz - to samo robiliśmy wczoraj.

  3. Zdefiniuj nagłówek z nazwy Twojej strony. W szablonie "Home Page Template" poszukaj makra "<%siteName%>" i zamień linię:

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

    na następującą:

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

  4. Zdefiniuj nagłówek dla dat. W szablonie "Day Template" poszukaj "<%longDate%>", znajdź linię:

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

    i zamień ją na:

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

Zobacz także

 
<< Dzień 26: Używanie względnych rozmiarów czcionek | Spis treści | Dzień 28: Etykietowanie elementów formularza >>