Szablon:Układ autonawigacji

Template-info.png Dokumentacja szablonu [zobacz] [edytuj] [historia] [odśwież]

SzablonyEdytuj

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

OpisEdytuj

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

ParametryEdytuj

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

OpisEdytuj

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?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ń:TOC).

Opis parametrówEdytuj

PrzykładEdytuj

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

Na stronie Szablon:Podręcznik/Ustawienia/Szablon:Układ autonawigacji/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:Układ autonawigacji/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}}.

WynikEdytuj

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 }

SelektorEdytuj

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ówEdytuj

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!

PseudoelementyEdytuj

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.

PseudoklasyEdytuj

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

StylEdytuj

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ściEdytuj

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

LicznikiEdytuj

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

MediaEdytuj

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 nazwEdytuj

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ładEdytuj

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ładEdytuj

BłędyEdytuj

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

Parametry szablonu (strukturyzacja Wizualnego Edytora)Edytuj

Zobacz teżEdytuj