Szablon:Autonawigacja

 Dokumentacja szablonu [zobacz] [edytuj] [historia] [odśwież]

Szablony

Szablony autonawigacji

• {{Autonawigacja}} - szablon nawigacji ustala na podstawie strony Szablon:NawigacjaSpecjalna/Ustawienia/<nazwa książki>/config, które są potrzebne do autonawigacji,
• {{NawigacjaSpecjalna}} - szablon używany przez {{Autonawigacja}} do nawigacji pomiędzy artykułami, jeżeli strona Szablon:NawigacjaSpecjalna/Styl/<nazwa szablonu do autonawigacji> istnieje,
• {{Układ autonawigacji}} - szablon definiuje zmienne, które określają następny i poprzedni artykuł do danego artykułu, te zmienne są definiowane, wtedy, gdy istnieje strona Szablon:NawigacjaSpecjalna/Nawigacja/<nazwa książki> istnieje, w którym jest zestaw artykułów dla danego podręcznika, i adres strony jego spisu treści.

---

Zwykle na stronach książki jest użycie bezparametrowo szablonu {{Autonawigacja}} lub z parametrem, który jego pierwszym parametrem jest nazwa książki, i stworzenie odpowiedniego configu o adresie ogólnym podanym przy opisie tego szablonu i podanie szablonu styli napisanych przez jego autora podanym w opisie {{NawigacjaSpecjalna}}, i nie trzeba tworzyć strony, o adresie ogólnym podanym w opisie {{Układ autonawigacji}}.

Artykuł poprzedni i następny, i adres strony głównej jest ustalany przez szablony nawigacji szablonów stronicowych, tzn.: {{LinkPoprzedniArtykuł}} i {{LinkNastępnyArtykuł}}, a adres aktualnej strony głównej jest ustalany przez szablon: {{AktualnaKsiążka}}, jeżeli nie stworzymy strony w podanym w opisie {{Układ autonawigacji}}.

Użycie szablonu {{Autonawigacja}}

Wykorzystuje się go tak:

1. Najpierw musimy skonfigurować układ rozdziałów tworząc stronę Szablon:NawigacjaSpecjalna/Nawigacja/<Nazwa książki>, np. Szablon:NawigacjaSpecjalna/Nawigacja/OGRE, jak ją skonfigurować, możemy przeczytać tutaj.
2. Wstawiamy do każdej podstrony na początku kod {{Autonawigacja|Nazwa książki}}.

---

Jeżeli nie zbudujemy tej strony, z układem stron (artykułów), to ten szablon korzysta z szablonów nawigacji, serii szablonów stronicowych, które są pokazane na stronie ze zbioru wszystkich szablonów stronicowych.

Użycie szablonu {{NawigacjaSpecjalna}}

Opis

Szablon nawigacji ze stylem charakterystycznym dla danego podręcznika za projektowanym przez danego jego pisarza.

Parametry

Podstawowy zestaw parametrów

• poprz i nast - linki kolejno poprzedniego i następnego artykułu dla danego aktualnego artykułu - wymagane.

Zaawansowany zestaw parametrów

• książka - nazwa książki - opcjonalny,
• poprz i nast - linki kolejno poprzedniego i następnego artykułu dla danego aktualnego artykułu - wymagane,
• spis treści - link do spisu treści - opcjonalny.

Użycie szablonu {{Układ autonawigacji}}

Opis

Szablon ten służy do konfiguracji układu książki, przy korzystaniu z szablonu Autonawigacja.

Najpierw w pierwsze linijce musimy wstawić poniższy kod:

{{Układ autonawigacji|krok={{{1}}}

Potem konfigurujemy, gdzie jest spis treści pisząc

|spis treści=Matematyka dla liceum

Następnie konfigurujemy kolejne rozdziały książki pisząc:

|link do rozdziału 1|nazwa rozdziału 1
|link do rozdziału 2|nazwa rozdziału 2
|link do rozdziału 3|nazwa rozdziału 3
|link do rozdziału 4|nazwa rozdziału 4

i tak dopóki nie wypiszemy wszystkich rozdziałów (czy podstron -- jak kto woli) z naszej książki. Można też zamiast nazwy rozdziału wstawić ciąg pusty, wtedy ona jest liczona za pomocą nazwy artykułu książki, tutaj powyżej link do rozdziału, usuwając jego początkową cześć, którą jest nazwa książki, wraz z po nim ukośnikiem.

Na końcu wstawiamy linię:

}}

Nie można dodawać na początku, czy na końcu dodatkowych nowych linii.

W przypadku książki np. Pies i człowiek o rozdziałach Pies (link -- Pies i człowiek/Pies), Człowiek (link -- Pies i człowiek/Człowiek), Autorzy (link -- Pies i człowiek/Autorzy) i spisie treści w Pies i człowiek/Spis treści konfiguracja będzie wyglądać tak:

{{Układ autonawigacji|krok={{{1}}}
 |spis treści=Pies i człowiek/Spis treści
 |Pies i człowiek/Pies|Pies
 |Pies i człowiek/Człowiek|Człowiek
 |Pies i człowiek/Autorzy|Autorzy
}}

Jak on działa?

Dzięki niemu wykorzystując szablon Szablon:NawigacjaSpecjalna/Nawigacja/<Nazwa książki> otrzymujemy pewne informacje przydatne przy nawigacji np. wykorzystując {{NawigacjaSpecjalna/Nawigacja/<Nazwa książki>|poprz}} otrzymujemy link do poprzedniego rozdziału (oczywiście szablon ten musimy wykorzystać z rozdziału pewnej książki; link jest postaci [[link|rozdział]])), dodając {{NawigacjaSpecjalna/Nawigacja/Nazwa książki|nast}} otrzymujemy link do następnego rozdziału pewnej książki (postaci [[link|rozdział]]), z kolei pisząc {{NawigacjaSpecjalna/Nawigacja/Nazwa książki|Spis treści}} otrzymujemy sam link np. Pisanie wypracowań:TOC).

Opis parametrów

Przykład

<noinclude>{{UnikalnaStronaStart}}</noinclude>
<noinclude>{{Autonawigacja|CSS}}</noinclude>
{{ArtykułSubst}}
<noinclude>{{Autonawigacja|CSS}}</noinclude>
<noinclude>{{UnikalnaStronaKoniec}}</noinclude>

---

Na stronie Szablon:Podręcznik/Ustawienia/Szablon:Autonawigacja/config są zmienne, by załadować odpowiedni artykuł. Ten szablon ustawień wygląda następująco:

{{#switch: {{{1}}}
 | poza_projektem = 
 |          tytuł = CSS
 <!-- Zmienne, którą książkę i artykuł ma najpierw analizować
 -->
 |        książka = CSS
 |        artykuł = Składnia
 <!-- Koniec
 -->
 |          autor = 
 |         autor1 = 
 |         sekcja = 
 |        sekcja2 = 
 |        sekcja3 = 
 |        sekcja4 = 
 |        sekcja5 = 
 |      poprzedni = 
 |       następny = 
 |      adnotacje = 
 |        tłumacz = 
 |  tłumacz_uwagi = 
 |    wikitłumacz = 
 |         stopka = 
 |       #default = 
}}

Zmienne: | książka = CSS i | artykuł = Składnia, mówią, jaki artykuł z jakiej książki ma ładować na stronie bieżącej strony. Można tak zrobić, że ładowany jest artykuł na stronie szablonu. Ten szablon korzysta ze strony Szablon:Podręcznik/Ustawienia/Szablon:Autonawigacja/config.

Szablon {{PobierzUstawienia}} pobiera ustawienia, jaki artykuł i książkę ma symulować, zobacz dokumentację tego szablonu, tzn. {{PobierzUstawienia/opis}}.

Zmienna tytuł, czyli | tytuł = CSS, przedstawia tytuł podręcznika, używany przez szablon {{Podręcznik}}.

Wynik

Menu

Na bardzo ogólnym poziomie, plik CSS składa się z listy selektorów oraz przyporządkowanych do nich stylów.

 div { background-color: green; }
 selektor { styl }

Selektor

Selektor to identyfikator, który określa do jakich elementów dopasować (select - wybrać) dany styl. Można rozróżnić kilka rodzajów selektorów.

• element

 blockquote, p, table

Pasuje do dowolnego elementu, odpowiednio: blockquote, p, table

• klasa

 .zielony, .pogrubiony, .wyjustowany, .niewidoczny

Pasuje do dowolnego elementu z atrybutem class="zielony itp.

• identyfikator (id)

 #naglowek, #stopka, #menu, #moj_adres

Pasuje do dowolnego elementu z atrybutem id="naglowek". Może być co najwyżej jeden taki element w całym dokumencie!

Można łączyć selektory, dodając do elementu klasę lub identyfikator. Zawężamy w ten sposób zastosowanie stylu. Na przykład, jeśli chcemy by zielony był tylko paragraf, ale już nie tabelka, piszemy:

 p.zielony{ background-color: green; }

Wtedy wpisanie <table class="zielony"> nie będzie miało żadnego efektu. Możemy też kilka selektorów oddzielić przecinkami i wtedy klamra po nich będzie miała odniesienie do każdego.

Według atrybutów

Nowsze specyfikacje CSS dają nam do ręki potężne narzędzie - możliwość określania stylu w zależności od atrybutów elementu. Dodając:

 [lang="pl"] { color: blue; }

spowodujemy, że tekst w każdym elemencie, który ma ustawiony atrybut lang="pl", będzie miał kolor niebieski.

Przydatnymi i często stosowanymi sztuczkami są:

 a[target] { cursor: crosshair; }
 abbr[title], acronym[title] { border-bottom: 1px dotted black; }

Pierwsza z nich powoduje, że każdy link z określonym atrybutem target (nieważna jest wartość) będzie po najechaniu na niego myszą zmieniał kursor na "celownik" (jest to usankcjonowany sposób ostrzegania użytkownika, że link otwiera się w nowym oknie). Natomiast drugi powoduje podkreślenie skrótów kropkowaną linią.

Niestety, w przypadku obu z nich starsze przeglądarki są zupełnie bezradne.

Kolejność

Jeśli wypiszemy kilka selektorów po sobie, bez przecinków, będzie to oznaczało, że chodzi nam o ich wzajemne położenie.

 table div p{ font-size: smaller; }

oznacza: paragraf zawarty wewnątrz elementu <div>, który z kolei jest zawarty w elemencie <table>.

Natomiast notacja:

 div > p{ font-size: smaller; }

oznacza: paragraf, którego rodzicem (czyli elementem, który bezpośrednio go zawiera) jest element div.

Różnicę można dostrzec rozważając kod:

 <div><pre><p>tekst</p></pre></div>
 <div><p>tekst</p></div>

Pierwszy z wyżej wymienionych selektorów będzie pasował do obu linijek. Drugi - tylko do drugiej (w pierwszej <div> i <p> są rozdzielone przez <pre>).

Niestety, Internet Explorer zupełnie nie rozpoznaje drugiej notacji!

Pseudoelementy

Selektory można rozszerzyć o tzw. pseudoelementy - które określają szczególne zastosowanie elementu. Wśród najważniejszych pseudoelementów wyróżniamy:

:before

zawartość przed elementem

:after

zawartość po elemencie

:first-letter

pierwsza litera

:first-line

pierwszy wiersz

:first-child

element jest pierwszym dzieckiem swojego rodzica

:last-child

element jest ostatnim dzieckiem swojego rodzica

Pseudoelementy występują w selektorze po dwukropku (:). Przykład:

 td:first-child { padding-left: 2em; }

Powyższy przykład powoduje, że zawartość pierwszej kolumny każdego wiersza w tabeli jest odsunięta od lewej strony o 2em.

Jeśli element określony jest dodatkową klasą to pseudoelement występuje po nazwie klasy:

 td.price:after {content: " PLN";}

Powyższy kod spowoduje automatyczne uzupełnienie każdej komórki zawierającej kwotę o oznaczenie waluty.

Uwaga! Pseudoelementy nie są jeszcze wspierane przez niektóre przeglądarki, a szczególnie przez IE do wersji 6.

Pseudoklasy

Wśród najważniejszych pseudoklas wyróżniamy:

:hover

element został wskazany myszą

:active

link jest aktywny

:link

link

:visited

link został odwiedzony

:focus

element (który nie jest odnośnikiem) jest aktywny

:lang(C)

element, którego zawartość jest w języku C. Kod języka musi być podany zgodnie ze specyfikacją HTML 4.0 lub RFC 1766

Styl

Między klamrami, po selektorze, definiujemy styl elementu. Opisujemy go ciągami: atrybut - wartość. Wartości atrybutom przypisuje się znakiem :. Należy jednak pamiętać by po przypisaniu wartości parametrowi np. "font-weight: bold" oddzielić go od innych średnikiem ("font-weight:bold;") w przeciwnym przypadku dalszy ciąg pliku zostanie potraktowany jako wartość tego elementu. Najlepiej po każdym średniku przejść do nowej linii - zwiększy to czytelność pliku.

Generowanie zawartości

Ciekawe możliwości, jakie stwarza CSS, to generowanie zawartości - tekstu a nawet grafiki.

 content: "generowana zawartość";

powoduje, że tekst zawarty w danym elemencie zostanie usunięty i zastąpiony przez "generowana zawartość". Aby uniknąć straty zawartości elementu, atrybut content umieszcza się w pseudoelementach :before i :after.

To jednak nie wszystko. Chcąc po każdym adresie e-mail na naszej stronie umieścić ikonkę skrzynki pocztowej, możemy użyć stylu CSS, oszczędzając miejsce w kodzie (X)HTML a sobie samemu mnóstwa pracy!

 .mail:after{ content: url("images/mail.gif"); }

Niestety, obecnie dobrą obsługą generowania zawartości może pochwalić się jedynie przeglądarka Opera

Liczniki

Ta sekcja jest zalążkiem. Jeśli możesz, rozbuduj ją.

Media

Najnowsza specyfikacja CSS wprowadza pewne rozróżnienie sposobu wyświetlania elementów, w zależności od tego na jakim urządzeniu jest "wyświetlana" dana strona (ekran,drukarka,urządzenia czytające na głos,itp.).

Pomysł polega na wprowadzeniu przestrzeni nazw dla każdego z tych urządzeń. Elementy zdefiniowane w ogólnej przestrzeni nazw będą interpretowane przez wszystkie urządzenia jednakowo, natomiast elementy znajdujące się w np. przestrzeni dla ekranu nie będą interpretowane przez drukarkę.

Ustanawianie przestrzeni nazw

Przestrzeń można ustawić na dwa sposoby:

• poprzez dyrektywę importującą @import:

@import url('style-drukarkowe.css') print;
@import url('style-ekranowe.css') screen;

• poprzez dyrektywę definiującą przestrzeń @media:

@media screen {
     BODY {background-color:#f2f2f2;}/* tło na ekranie będzie szare*/
}

@media print {
     BODY {background-color:#ffffff;}/* tło na papierze będzie białe*/
}

@media screen,print {
     BODY {color:#000000;}/* tekst na ekranie i papierze będzie czarny*/
}

Rodzaje urządzeń

Wyróżnia się następujące przestrzenie nazw:

• all - wszystkie urządzenia
• print - drukarka
• screen - kolorowy ekran
• handheld - mały ekran (komputery typu palmtop, telefony komórkowe,itp.)
• projection - projektory
• speech - urządzenia głosowe
• tv - telewizory (mało kolorów,ograniczona wielkość,dźwięk)
• tty - przeglądarki tekstowe (podstawową jednostką miary jest znak, nie piksel)
• embossed - drukarki brailowskie (ograniczenia podobne do przeglądarek tekstowych, plus brak kolorów)

Przykład

W3C opublikowało domyślny arkusz stylów dla HTML 4.0 [1]. Warto jest przyjrzeć się mu aby zobaczyć zastosowanie różnych technik CSS w praktyce.

Przykład

Błędy

Błędy należy zgłaszać na stronie Wikibooks:Kwestie techniczne.

Parametry szablonu (strukturyzacja Wizualnego Edytora)

Zobacz też