Szablon:NawigacjaSpecjalna

 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 spisów treści. Format tej strony jest podany w jego opisie, dotyczącej tego szablonu.

---

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}}.

---

Kategoria autonawigacji powyższych szablonów są zebrane w kategorii i jego kategoriach: Szablony nawigacyjne - autonawigacja podręczników.

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 go skonfigurować, możemy przeczytać tutaj.
2. Wstawiamy do każdej podstrony na początku, i ewentualnie na końcu, jeśli potrzeba, kod {{Autonawigacja|<Nazwa książki>}}.

---

Jeżeli nie zbudujemy strony, szablon, ustawień artykułu poprzez ten szablon, z układem stron (artykułów), to ten szablon domyślnie korzysta bezpośrednio z szablonów nawigacji, serii szablonów stronicowych, które są pokazane na stronie ze zbioru wszystkich szablonów stronicowych, w przeciwnym wypadku on wykorzystuje do generowania następnego, poprzedniego i aktualnego artykułu na podstawie strony {{Układ autonawigacji}}, za pomocą jego ustawień Szablon:NawigacjaSpecjalna/Nawigacja/<Nazwa książki>, który na podstawie tego generuje następny, poprzedni i aktualny artykuł też za pomocą tych samych szablonów, ale tym razem pośrednio.

Użycie szablonu {{NawigacjaSpecjalna}}

Opis

Szablon nawigacji ze stylem charakterystycznym dla danego podręcznika zaprojektowanym 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.

---

Format strony ustawień autonawigacji szablonu {{Autonawigacja}}, potrzebna do szablonu {{NawigacjaSpecjalna}}, o adresie: Szablon:NawigacjaSpecjalna/Ustawienia/<nazwa książki>/config, jest:

{{Conf|{{{1}}}|nawigacja:styl=<zmienna>}}

W powyższym wartość zmiennej <znienna> jest to nazwa szablonu stylu autonawigacji o ogólnym adresie: Szablon:NawigacjaSpecjalna/Styl/<zmienna>. Przykładowe szablony stylów są pokazane w kategorii: Szablony nawigacyjne styli do autonawigacji podręczników, a szablony układu autonawigacji {{Układ autonawigacji}} są w: Szablony nawigacyjne konieczne do autonawigacji podręczników.

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

Opis

Szablon ten służy do konfiguracji układu książki, przy korzystaniu z szablonu {{Autonawigacja}}, tworząc szablon konfiguracyjny Szablon:NawigacjaSpecjalna/Nawigacja/<Nazwa książki>, z którego on wykorzystuje, a jego schemat, jak go tworzyć, jest podany w opisie poniżej.

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 | spis treści = Pies i człowiek/Spis treści, i innych spisach treści bez pełnej nazwy książki: | spis treści 1 = Hodowanie psa w domu i | spis treści 2 = Przyjaźń między psem a człowiekiem - można też tworzyć dalsze parametry, z nazwami stron bez pełnej nazwy książki, ze spisami treści numerowane liczbami naturalnymi od jedynki o wzorze spis treści [numer], konfiguracja wtedy będzie wyglądać tak:

{{Układ autonawigacji|krok={{{1}}}
 |spis treści = Pies i człowiek/Spis treści
 |spis treści 1 = Hodowanie psa w domu
 |spis treści 2 = Przyjaźń między psem a człowiekiem
 |Pies i człowiek/Pies|Pies
 |Pies i człowiek/Człowiek|Człowiek
 |Pies i człowiek/Autorzy|Autorzy
}}

Lub z głównym spisem treści i ze spisami innymi zawarte w podręczniku:

{{Układ autonawigacji|krok={{{1}}}
 |spis treści = Pies i człowiek/Spis treści
 |spis treści 1 = Hodowanie psa w domu
 |spis treści 2 = Przyjaźń między psem a człowiekiem
 }}

Powyżej artykuły zawarte w książce są generowane na podstawie tych podanych spisów treści, tutaj dodatkowe artykuły nie są potrzebne.

A tylko ze spisem treści, wtedy artykuły z niego są generowane na podstawie podanej wartości głównego spisu:

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

Szablon {{Układ autonawigacji}} minimalnie podajemy tylko z parametrem | krok = {{{1}}}, w postaci:

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

Wtedy liczy się tylko styl nawigacji podręcznikowy podany do szablonu {{Autonawigacja|<styl nawigacji>}}, wtedy subnazwa tego stylu jest generowana na podstawie wikikodu szablonu: Szablon:NawigacjaSpecjalna/Ustawienia/<nazwa książki>/config. Artykuły ze spisu treści są generowane domyślnie na podstawie głównej strony podręcznika, wtedy subnazwa tej strony jest równa ciągowi pustemu.

Nazwy artykułów książki spisane na stronie głównej podręcznika domyślnie nie musimy podawać w spisie szablonu: {{Układ autonawigacji}}. Szablon domyślnie zbiera tylko dane spisu treści ze strony głównej podręcznika. Jeżeli w szablonie podamy jakieś nazwy stron, to one są dodawane na sam koniec w danych spisu treści według strony głównej, a dodatkowe spisy treści są dodawane tam pomiędzy.

Jeżeli książka nie ma spisów treści, to szablon {{Układ autonawigacji}} musi zawierać parametr | bez spisów treści = w formie, gdy strona zawiera jakieś artykuły, by po nich nawigować:

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

A gdy podręcznik, jako nie książka, zawiera jeden artykuł główny, bez spisów treści, czyli jest to jedno-modułowy podręcznik, czyli broszura:

{{Układ autonawigacji|krok={{{1}}}
 |bez spisów treści = tak
}}

Możliwe jest podanie parametru | bez analizy spisów treści = tak, wtedy zapis {{Układ autonawigacji}} wygląda:

{{Układ autonawigacji|krok={{{1}}}
 |bez analizy spisów treści=tak
 |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
}}

Możliwe jest też do wykorzystania dodatkowy parametr | automat manualny = tak, wtedy ten szablon działa wolniej, ale ręcznie, ten zapis jest:

{{Układ autonawigacji|krok={{{1}}}
 |automat manualny=tak
 |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ń/Spis treści).

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:NawigacjaSpecjalna/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:NawigacjaSpecjalna/config , który jest przekierowaniem do Szablon:Podręcznik/Ustawienia/Szablon:Autonawigacja/config. Z tej strony też korzysta szablon {{Podręcznik}}.

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

CSS/Składnia

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ż