Szablon:Autonawigacja/opis

Z Wikibooks, biblioteki wolnych podręczników.
Przejdź do nawigacji Przejdź do wyszukiwania

Szablony[edytuj]

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}}[edytuj]

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}}[edytuj]

Opis[edytuj]

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

Parametry[edytuj]

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}}[edytuj]

Opis[edytuj]

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

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

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

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.

Jak on działa?[edytuj]

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[edytuj]

Przykład[edytuj]

<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[edytuj]

CSS
CSS
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[edytuj]

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[edytuj]

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ść[edytuj]

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[edytuj]

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[edytuj]

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[edytuj]

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[edytuj]

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[edytuj]

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

Media[edytuj]

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[edytuj]

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ń[edytuj]

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[edytuj]

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[edytuj]

Błędy[edytuj]

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

Parametry szablonu (strukturyzacja Wizualnego Edytora)[edytuj]

Zobacz też[edytuj]