Wojtek Hildebrandtt uruchomił dział WARSZTAT.

ZAPRASZAMY

Gdy wiemy już co napisać (potrzebny jest dobry pomysł) i jak to napisać (tu potrzebny jest kurs HTML i CSS, a także dalsze kursy, które pojawią się na youthcoders.net), pora zabrać się do pracy. Włączamy więc ulubione narzędzia i zaczynamy.
W dziale warsztat będziemy opisywać narzędzia, które wykorzystujemy do tworzenia naszych stron i aplikacji.

Na pierwszy ogień jednak nie pójdzie żaden edytor czy całe środowisko programistyczne.
Najpierw narzędzie, bez którego w sieci byłoby mroczno i straszno (w zasadzie kiedyś tak było).
Parafrazując pewne zdanie: webdeveloperzy dzielą się na tych, którzy używają Firebuga i na tych, którzy dopiero zaczną.

Pierwsza rzeczą, jaką programista webowy powinien zrobić po włączeniu świeżej instalacji Firefoxa, to menu Narzędzia->Dodatki wyszukać i zainstalować rozszerzenie Firebug.
Od tej pory mały robak czający się zazwyczaj w prawym dolnym rogu przeglądarki, na pasku stanu daje nam dostęp do wielkich możliwości w kwestii nie tylko śledzenia poprawności naszej aplikacji internetowej, ale także edycji jej wyglądu.

Na wstępie krótki opis możliwości dodatku. W następnych artykułach zajmiemy się praktycznym wykorzystaniem kolejnych modułów.

Rozwinięty panel Firebuga na górze posiada pasek dostępnych narzędzi. Ikona robaka (nawet robaki potrafią być przyjazne) daje dostęp do różnych podstawowych opcji. Kliknąłem go po raz pierwszy pisząc ten artykuł, żeby przekonać się, co tam jest. Wygląda więc na to, że nie będziemy tego przycisku używać.

Co innego drugi z kolei przycisk - Zbadaj element. Dziś nie wyobrażam sobie pracy nad stroną bez wykorzystania tego narzędzia. Klikamy i najeżdżamy kursorem na interesujący nas element layoutu strony... Natychmiast widzimy fragment kodu HTML odpowiedzialny za ten element, jego miejsce w strukturze dokumentu oraz towarzyszące mu style. Jeśli klikniemy ten element, dane pozostaną na panelu i możemy zabierać się do analizy.
Karty HTML i CSS posiadają przycisk Edytuj - na żywo możemy zmieniać layout strony. Dodatkowo podczas przeglądania HTML w prawej części panelu mamy kolejne zakładki - Styl (pokazującą wszystkie atrybuty stylu - własne, odziedziczone, wpisane etc.) a obok Układ - atrybuty margin i padding właśnie przestały być problemem. Dalej zakładka DOM. O niej za chwilę.
Moim skromnym zdaniem, to lepsze niż jakiekolwiek narzędzie WYSIWYG. Ale uwaga, zmiany są na bieżąco renderowane w oknie Firefoxa, ale pliki źródłowe oczywiście nie są zmieniane. Gdy osiągamy satysfakcjonujący nas rezultat, zmiany należy skopiować z Firebuga do edytora źródeł.

Przy okazji przycisku Zbadaj element wiemy już też mniej więcej, do czego służą karty HTML i CSS. Po drodze jednak pominęliśmy kartę Konsola. Po jej aktywowaniu strzałka przy tytule kart daje nam dostęp do opcji tego, co może być w niej logowane. Jednak największa siła konsoli to możliwość logowania własnych danych z poziomu Javascript i - to jest przebój, o którym szerzej w następnych artykułach - kodu PHP przy wykorzystaniu FirePHP.

Idąc dalej, docieramy do zakładki karty Skrypt. To odpowiednik klasycznych debuggerów znanych z różnych IDE, służący do debugowania JavaScriptu. Pobawimy się nim w przyszłości.

Kolejną kartą jest DOM. Tu otrzymujemy opis drzewa DOM naszego dokumentu (to samo, ale dla wybranych elementów oferuje zakładka DOM w panelu HTML). Są to na pewno wielce mądre rzeczy, jednak jeszcze nigdy nie zdążyło mi się wykorzystać tych informacji. Ale może jeszcze przyjdzie taki czas, w którym docenię ten element Firebuga.

Ostatnią zakładką jest Sieć. Pozostaje pusta, jeśli włączyliśmy Firebuga na załadowanej już stronie - pokaże co potrafi, jeśli przeładujemy zawartość okna. A potrafi wiele - poda wszystko co wie na temat żądań powstałych przy generowaniu strony - nagłówki, odpowiedzi, czas realizacji etc. Ale tak naprawdę zakładkę sieć docenimy pracując przy AJAXie. Szczegóły już niedługo.

Tak po krótce prezentują się możliwości Firebuga. Już wkrótce pojawią się artykuły opisujące je bardziej szczegółowo, na podstawie konkretnych zadań do wykonania.

W międzyczasie, jeśli ktoś chciałby dowiedzieć się czegoś więcej - http://getfirebug.com, to miejsce, gdzie należy szukać.

Warto przeczytać:

• http://youthcoders.net/it/dev-zone/1163-debugowanie-aplikacji-ajax-za-pomoca-firephp.html
  
• http://youthcoders.net/it/dev-zone/1146-firebug-podstawy.html
  

Właściwie, zaznajomienie się z tym textem nie jest potrzebne, by móc z pełnym sukcesem przerobić ten kurs. Jednak na pewno nie zaszkodzi.

Programy:

W zupełności starczy zwykły systemowy notatnik - choć polecam [geany lub PitPad 3.2], a także jakakolwiek przeglądarka internetowa interpretująca CSS - choć odradzam Internet Explorera, gdyż jest przestarzała i nie pozwala w pełni wykorzystywać możliwości drzemiących w CSS. Kurs przygotowywany na Operze 8.0 i FF 1.0. Większość efektów - jeśli nie wszystkie - powinny być identyczne na popularniejszych przeglądarkach.

Dlaczego powstał ten kurs:

Stworzyłem ten kurs dlatego, że [prócz nielicznych wyjątków] żaden, który trafił w na mój monitor nie był w stanie w prosty i zrozumiały sposób wyjaśnić o co tak właściwie chodzi. Ten kurs ma za zadanie pokazać ci jak używać CSS - nie jaki on jest (nie będę Ci kazał na pamięć wykuwać się fragmentów kodu). Po skończeniu tego kursu powieneś wiedzieć jak stosować CSS, by niewielkim nakładem sił uzyskiwać ciekawe efekty.

Dla kogo jest ten kurs:

Najogólniej mówiąc dla wszystkich chętnych między 7 a 150 rokiem życia:-), przyjmując, że dopiero w wieku siedmiu lat człowiek posiada zdolność czytania - z jednym zastrzeżeniem - trzeba znać html przynajmniej całkowite podstawy (podstawy podtstaw). Jeśli nie znasz html-a polecam mój kurs tworzenia stron www, który zbiera pochlebne recenzje wśród początkujących webmasterów. Osobiście wątpie, aby ktokolwiek miał choćby najmniejsze problemy ze zrozumieniem którejś z lekcji - wszystkie starałem się pisać w sposób jak najprostszy, tłumaczą prawie każdy znak. (Swoją drogą tak powinien, moim zdaniem, wyglądać kurs dla początkujących). A więc życzę powodzenia!

Co potem:

Po przerobieniu tego kursu radzę nie zaprzestawać na tym. Style CSS są "trochę" obszerniejsze niż treści przedstawione w tym kursie. [w poszerzaniu swojej wiedzy może posłuzyć "Poradnik dla webmasterów K. Stelmacha", umieszczony razem z ta witryną (patrz 'na koniec')] Na dobry początek starczy ta strona. Po przyswojeniu sobie wiedzy zawartej na niej, każdy będzie w stanie szybko i bez większych trudności przygotować ładnie wyglądającą stronę.

O autorze:

Tak więc (dane na 20:26 02-05-2004) jestem uczniem ogólniaka w Złotowie, najdalej wysuniętym powiecie woj. wielkopolskiego. Moją przygodę z tworzeniem stron zacząłem w gimnazjum. Mam już na koncie kilka stron opublikowanych w sieci [zapraszam dział 'Linki']. Stylami zająłem się tak jakoś "przy okazji" tworzenia jednej strony i stwierdziłem, że jest to naprawdę przyjemne. Moim głównym zainteresowaniem jest informatyka. Z całego ogromu działów informatyki najbardziej podoba mi się internet i jego możliwości. Mam nadzieję, że ten kurs przyda się choć kilku osobom. Tych, którzy zdecydują się na przerobienie go proszę o kontakt. Nie chodzi tu o nic wielkiego, chciałbym jedynie się dowiedzieć jak oceniacie kurs, co było opisane dobrze, co źle itp. Dzięki Wam kurs może być jeszcze lepszy. A teraz zapraszam do głównej części i powodzenia!

Na początku był html, i więcej nic nie było:-) Możnaby lekko żartobliwie rzec. Ale to prawda, na poczatku lat '90 powstał HTML. Język, który miał stać się uniwersalnym językiem wszystkich platform. I udało się. Read more

Do czego służą klasy

Klasy stworzone są po to, by móc obiektom tego samego typu w treści jednej strony przypisywać inne właściwości. Dodatkowo dzięki klasom można zaoszczędzić sporo miejsca, gdyż właściwości konkretnego znacznika opisujemy tylko raz, a potem jedynie się do niego odnosimy.

Dzięki dziedziczeniu webmaster może skrócić swoja pracą o nawet kilkadziesiąt procent bez żadnego uszczerbku na wyglądzie strony.
Dziedziczenie polega na przejmowaniu części cech od "starszego" - zupełnie jak u ludzi. Zobacz na przykład:

{codecitation}p {color: blue;} /* 1 */

p.klasa1 {font-size:8 pt;} /* 2 */

p.klasa2 {font-size:14 pt; } /* 3 */

p.klasa3 {color:red; font-size:8 pt;} /* 4 */{/codecitation}

Opis: 

1 - przypisuję akapitowi, który nie ma klasy, jakieś właściwości. Tak więc wszystkie jego cechy przejdą na pozostałe 'p', nawet takie, które posiadają klasę.
2 - tworzę klasę 'klasa1', która będzie mieć kolor niebieski [blue] odziedziczony po starszym od siebie 'p' i własne cechy, przypisane tylko jej.
3 - tworze kolejną klasę, która ma cechy starszej od siebie 'p', ale także własne cechy.
4 - ta klasa nie odziedziczy nic ze starszej, a to dlatego, że opisałem także tę właściwość, którą miałaby odziedziczyć i zmieniłem jej wartość.

I tu właśnie znajduje się miejsce do popisu dla webmasterów, którzy mają bzika na punkcie zmniejszania rozmiarów stron. Otóż jeśli masz kilka klas jednego obiektu np. 'p', to nie musisz w każdym opisywać tej samej cechy, starczy, że opisze ją raz w obiekcie głównym. Wtedy każde dziecko zawierać będzie automatycznie cechy opisane w obiekcie rodzicu.

czyli przykładowo:

{codecitation}<p>Ten txt jest niebieski</p>

<p class="klasa1"> Ten txt jest niebieski (odziedziczony kolor) i ma rozmiar 8pt (z klasy)</p>

<p class="klasa2"> Ten txt jest niebieski (odziedziczony kolor) i ma rozmiar 14pt (z klasy)</p>

<p class="klasa3"> Ten txt jest czerowny (zerwane więzi:-)) i ma rozmiar 8pt (z klasy obydwa)</p>{/codecitation}

Schemat dziedziczenia:

Oczywiście jest to tylko przykładowy, bardzo pobieżny schemat, bo przycież znaczników html jest dużo więcej i ogólnie jest to trochę bardziej złożone, ale sądzę, ze teraz jesteś i tak już skołowany, więc chyba to starczy.

Istnieje kilka podstawowych metod łaczenia CSS z HTML-em. W tej lekcji opiszę po krótce każdy z nich.

W treści strony:

Jest to najdłuższy i najgorszy sposób, ponieważ nie można wtedy tworzyć klas - a więc za każdym razem trzeba od nowa opisywać właściwości kolejnego obiektu, nawet kiedy jest identyczny do poprzedniego.

Przykład:

{codecitation}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Tytuł strony</title></head>
<body>
<p style=" // 1
color: blue; text-decoration: underline;"> // 2
To jest przykładowy text</p> // 3
</body>
<html>
{/codecitation}

Opis:
1 - otwieram tag akapitu 'p' i zaczynam określać stylami CSS wygląd tylko i wyłącznie tego akapitu.
2 - opisuję każdą właściwość po kolei wg schematu: właściwość1:wartość; właściwość2:wartość;
3 - Przykładowy napis, tak to wygląda.

Jak widzisz jest to sposób prosty, aczkolwiek bardzo pracochłonny. Przypuśćmy, że nagle chciałbyś zmienić kolor każdego nagłówka na stronie (tych nagłówków byłoby ze 100) :-( - mnóstwo roboty. Dlatego odradzam używanie tego sposobu jako podstawowej metody umieszczenia stylów.

W nagłównku strony:

Jest to już sposób lepszy od poprzedniego. Pozwala na wielokrotne wykorzytanie fragmentu kodu, ale tylko w obrębie danej strony. Cały opis dla poszczególnych obiektów umieszczamy w sekcji head między znacznikami <style type="text/css"> </style>

Przykład:

{codecitation}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony</title>
<style type="text/css">
p.klasa1 { właściwość1:wartość; właściwość2:wartość;} // 1
table {właściwość1:wartość; właściwość2: wartość;} // 2
span.gorne {właściwość1:wartość; właściwość2: wartość;} // 3
</style>
</head>
<body>

<p class="klasa1">To jest przykładowy text</p> // 4
<table> // 5 <tr> <td> ... </td> </tr> </table>
<span >To jest fragment textu</span> // 6
</body>
</html>
{/codecitation}

Opis:
* - wg najnowszych standardów W3C tag font jest przestarzały. Należy używać span.
1,2,3 - w sekcji head wstawiam kolejno opis właściwości kolejnych selektorów
4 - wstwiam tag i przypisuję do niego klasę. Przeglądarka wie, że wcześniej taka klasa została opisana i nadaje wszystkie cechy tej klasy danemu selektorowi [obiektowi na stronie]
5 - Zobacz na opis tabeli w sekcji head - nie użyłem klasy. Tak więc każda tabela będzie posiadać cechy przypisane do 'table'.
6 - Tekst, który bedzie miał właściwości klasy 'gorne'

Jak widzisz nazwy klas mogą być inne niż klasa1, klasa2, itp. Wykorzystując ten sposób zaoszczędziłem sporo miejsca. Być może nie jest to tak widoczne w tej chwili, ale gdybym wstawił jeszcze kilka tabel i akapitów, a każdy miałby wyglądać tak samo, to różnica byłaby już baaardzo widoczna.- (zamiast zrobić jedną klasę, musiałbym za każdym razem wpisywać kilka linijek kodu).

W osobnym pliku:

Jest to najlepszy i najpopularniejszy sposób łączenia htm z css. Aby móc skorzystać z tej metody należy w jakiś sposób poinformować przeglądarkę z jakiego pliku ma czytać. Wszystko dzieje się w sekcji head:

Przykład:

{codecitation}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" // 1
href="plikstyli.css" // 2
type="text/css" /> // 3
</head>
<body>
W tym miejscu umieszczasz treść strony. Możesz skorzystać ze wszystkich klas opisanych w pliku 'plikstyli.css'.

</body>
</html>{/codecitation}

Opis:
1 - każę przeglądarce nastawić się na to, że za chwilę będzie wczytywać plik css [stylesheet].
2 - Podaję ściężkę do pliku, w którym są opisane style. Powinien to być plik o rozszerzeniu *.css.
3 - Określamy typ.

W tym miejscu nie muszę pisać chyba żadnego schematu, ponieważ w tym wypadku należy zmienić jedynie ścieżkę do pliku, aby wszystko działało jak trzeba. Główną zaletą tej metody jest to, że dzięki odesłaniu do jednego pliku cały wygląd strony może być opisany w jednym miejscu, tak więc oszczędność miejsca i czasu w ewentualnych zmianach. Z jednego pliku może korzystać nawet kilka witryn, gdyż można wpisać np. 'href="http//www.strona.pl/plik.css"' - a to sprytne!:-)

Mieszanka

Istnieje jeszcze jedna możliwość - pomieszanie wszystkich metod. Przykładowo, chcesz aby wszystkie tabele na twojej witrynie wyglądały identycznie. Jest jednak jedna tabele, którą chcesz jakoś szczególnie oznaczyć. Możesz wtedy wczytać plik '*.css' w sekcji head, przypisać tabeli odpowiednią klasę, a dodatkowo w tej wyjątkowej tabeli opisać style.

Przykład:

{codecitation}<table class="tabele" style="właściwość1:wartość; właściwość2:wartość;...właściwośćn:wartość;">
<tr>
<td> ... </td>
</tr>
</table>{/codecitation}

Opis:
Zasada jest bardzo prosta -im "bliżej" znacznika tym bardziej znaczący opis. Czyli najważniejszy jest opis w style=" ", trochę mniej ważny jest opis w sekcji head, a najmniej znaczący w osobnym pliku. Oczywiście chodzi jedynie o sytuacje, kiedy właściwości jakiegoś selektora opisane są w więcej niż w jednym miejscu.

Tym sposobem skończyła się część teoretyczna tego kursu - przechodzimy do praktyki! Jak na razie nie próbuj niczego ćwiczyć - po następnej lekcji będzie to wskazane, ale nie teraz, gdyż jeszcze nie znasz żadnych właściwości:-) opisywanych przez CSS, ale już spokojnie, ten stan nie utrzyma się długo:-). Zapraszam dalej!

Od tej lekcji zaczyna się praktyczna część kursu. Jest to kurs dość nietypowy, gdyż będziesz przy mojej pomocy tworzyć własną stronę! Co lekcję poznasz nowe możliwości, które potem w przy większej lub mniejszej mojej pomocy wstawisz na stronę. Tak więc zacznijmy!

Najpierw zbudujmy stronę w html-u.
Strona ta bedzie mieć trzy tabele, jedna pod drugą. I tu nowość. W html-u zrobiłoby się jedną głowną tabelę i w niej umieszczało kolejne - po co? Dzięki stylom wszystko bedzie zgrabniejsze i prostsze.

Budowanie strony:

{codecitation} <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <title>Tytuł strony</title>

    <link rel="stylesheet" href="style.css" type="text/css" /> // 1

</head>

<body>

    <table width="780" cellpadding="0" cellspacing="0"> // 2

        <tr>

            <td> </td> // 3

        </tr>

    </table>

     <table width="780" cellpadding="0" cellspacing="0">

         <tr>

            <td> </td> // 4

            <td> </td> // 5

        </tr>

    </table>

     <table width="780" cellpadding="0" cellspacing="0">

        <tr>

            <td> </td> // 6

        </tr>

    </table>

</body>

</html>{/codecitation}

Opis:

1 - wczytuję plik z opisanymi stylami.

2 - przy budowie tabeli nadal będę używał html-a, a to dlatego, że rzadko na stronie zdarza się, by kilka table miało taki sam wygląd. Oczywiści można zrezygnować z html-a również w tym wypadku, ale o tym jak w następnej lekcji. Osobiści w tym miejscu byłbym jeszcze za zostawieniem starego poczciwego html-a.3 - to miejsce jest przeznaczone na tytuł strony, lub banner

4 - menu

5 - treść strony

6 - stopka strony, czyli miejsce, w którym umieszcza się kontakt z autorem, datę powstania strony itp.

Być może dziwisz się, że w kursie CSS wita cię html - nie przejmuj się zaraz będzie i css. Stworzyliśmy już stronę główną. Napisz taki kod w notatniku i zapisz w jakimś oddzielnym folderze jako 'index.htm'. Teraz zajmiemy się budową pliku 'style.css'.

Budowanie pliku 'style.css':

{codecitation}/* najpierw otwórz zwykły systemowy notatnik następnie wpisz co następuje ukośniki i liczby opuść - służą jedynie dla opisu */

body { /* 1*/

    background-color: #CBD1D3; /* 2 */

    text-align: center; /* 3 */

} /* 4*/

table {

    margin-left: auto; /* 5*/

    margin-right: auto; /* 6*/

}

/* zapisz jako 'style.css' w tym samym folderze, w którym zapisałeś 'index.htm' */{/codecitation}

Opis:

1 - piszę co chcę deklarować (mogą by to być także 'table' lub 'p'), chcę opisywać wygląd ciała strony. Jak zauważyłeś po 'BODY' wstawiłem klamrę '{', klamrę '}' wstawiłem także na końcu. Oznacza to początek i koniec opisywania stylów dla danego selektora. Kolor strony można opisywać angielskimi nazwami [white, red, blue] lub kodem szesnastkowym [jak w przykładzie].

2 - określam kolor tłą strony. Można oczywiście za pomocą stylów wstawić także grafikę (patrz niżej). Na końcu każdej właściwości należy postawić średnik ';'. Wyjątek - ostatnia właściwość - osobiście i tak polecam wstawianie tam średnika (to nic nie zmienia, ale czasem ułatwia życie).

3 - określam, że text ma być na środku, a w rzeczywistości wszystko co umieszcze na stronie będzie wyśrodkowane [możliwości: left, right, center]. Taki sposób działa jednak tylko w MSIE6.0. Dla nowszych przeglądarek należy stosować 5,6.

4 - i zamykam obszar określania styli ciała 'BODY'.Tym sposobem twoja strona powinna być koloru siwo-niebieskiego. Na razie nic nie będzie widać. Ale to się zmieni na następnych lekcjach. 5,6 - ustawiam prawy i lewy margines strony na 'auto' - dzięki temu w Operze i FF tabele będą wyśrodkowane [pamiętaj o dziedziczeniu].

Inne wartości background:

- background-image: url(tlo.gif); // wstawienie obrazka jako tło
- background-attachment: scroll; // grafa w tle ma się przesuwać razem z treścią strony. [możliwości: -scroll, fixed (zawieszone-nie przesuwa się)]
- background-repeat: no-repeat; // powtarzanie tła [możliwości: repeat, repeat-x, repeat-y, no-repeat (-powtarzaj, powt. poziomo, powt. pionowo, nie powtarzaj]].
- background-repeat: no-repeat; // powtarzanie tła [możliwości: repeat, repeat-x, repeat-y, no-repeat (powtarzaj, powt. poziomo, powt. pionowo, nie powtarzaj]].
background-position: X Y; // początkowe ustawienie tła. Odległość od lewej [x] i od góry [y]. Jednostki: px, em, cm, in, %.

Więcej na ten temat możesz znaleźć w 'Poradniku dla webmasterów Krzysztofa Sztelmacha' - dział 2.2 Kolor i tło.

Na tym skończymy tą lekcję - jak widzisz sporo pisania, ale nic trudnego. Jeśli czegoś nie zrozumiałeś to wróć i jeszcze raz spokojnie przeczytaj, wtedy ruszaj dalej. Pamiętaj aby tworzyć podczas kursu stronę, bo naprawdę dzięki temu dużo szybciej się nauczysz - zawsze na przykładach łatwiej się uczyć.

Pamiętam, że kiedy po raz pierwszy ujżałem kolorowy pasek przewijania byłem w szoku, myślałem - "jak on to zrobił?" Dzisiaj dziwię się jeśli na stronie pasek ma standardowe kolory... Dlatego właśnie umieściłem całą jedną lekcję o zmianie koloru paska przewijania - choć nie jest to nic trudnego.

Wszelkie zmiany w zabarwieniu scrollbara umieszczamy w opisie sekcji body. Czyli może to być definicja body [<body style="i określamy;">] lub też w osobnym pliku, co ja właśnie tu zastosuję.

Zmiany w pliku 'style.css':

/* otwórz plik 'style.css' który utworzyłeś na poprzedniej lekcji */
BODY {
background-color: #CBD1D3;
text-align: center;
/* to wszystko powinno już tam być */

/* a teraz opis scrollbara */
scrollbar-3dlight-color:silver; // 1
scrollbar-arrow-color:black; // 2
scrollbar-base-color:white; // 3
scrollbar-dark-shadow-color:black; // 4
scrollbar-face-color:white; // 5
scrollbar-highlight-color:silver; // 6
scrollbar-shadow-color:silver // 7
}


TABLE {
 margin-left: auto;
 margin-right: auto; }

Opis:
* - jeśli nie za bardzo zrozumiesz opisu, to sprobuj na osobnej stronie pozmieniać kolory, wtedy sam zobaczysz co konkretny fragment zmienia. Pamiętaj o usunięciu komentarzy [napisów za '//' i między '/* ...*/'].
1 - Kolor efektu 3d.
2 - Kolor strzałki.
3 - Kolor toru przesuwaka.
4 - Kolor prawego i dolnego skraju.
5 - Kolor całego scrolla.
6 - Kolor lewego i górnego skraju.
7 - Kolor cienia.

Schemat:

scrollbar-właściwość-color: kolor;

Podobnie jak w poprzednim przypadku na stronie nie zmieniło się zbyt wiele - jedynie kolor paska przesuwania, który w tej chwili i tak jest raczej mało widoczny. A w treści strony nie było żadnej zmiany. Ale spokojnie za parę lekcji zobaczysz już pierwsze rezultaty swojej pracy. Jeśli pracujesz na Operze lub FF to nie zobaczysz, gdyż te przeglądarki nie kolorują suwaka.

Prawdopodobnie jak zaczniesz szukać to znajdziesz jeszcze inne właściwości suwaków, ale to są podstawowe, które w zupełności starczają na pełne określenie scrollbara.

Nanastępnej lekcji nauczysz się zmieniać wygląd kursora, więc także niewiele się zmieni w wyglądzie strony. Za to już w kolejnych lekcjach twoja strona będzie, wręcz rewolucyjnie, ulegac zmianom.

Uwaga!!! Niektóre przeglądarki [np. Firefox, Opera] nie pozwalają na zmianę koloru paska przewijania. Jest to niezgodne ze standardami W3C. Choć np. najnowsze Safari pozwala na jeszcze większą ingerencję w wygląd tego elementu przeglądarki.

Kursor jak wygląda - każdy widzi:-). A na tej lekcji nauczysz się zmieniąć jego wygląd!

Zmiany w pliku 'style.css':

{codecitation}/* otwórz plik 'style.css' który tworzyłeś na poprzednich lekcjach */

body {

    background-color: #CBD1D3;

    text-align: center;

    scrollbar-3dlight-color:silver;

    scrollbar-arrow-color:black;

    scrollbar-base-color:white;

    scrollbar-dark-shadow-color:black;

    scrollbar-face-color:white;

    scrollbar-highlight-color:silver;

    scrollbar-shadow-color:silver;

    /* to wszystko powinno już tam być */
    /* a teraz coś mowego */
    cursor: crosshair; /* 1 */
}

table {

    margin-left: auto;

    margin-right: auto;

}{/codecitation}

Opis:

1 - Tym sposobem zmieniłem kształt kursora na krzyżyk [najedź tu].

Jak zawsze nie jest to jedyna możliwośc jaką daję CSS.

Inne możliwości:

- crosshair [efekt]
- hand [efekt - tylko MSIE]
- move [efekt]
- e-resize [efekt]
- ne-resize [efekt]
- nw-resize [efekt]
- n-resize [efekt]
- se-resize [efekt]
- sw-resize [efekt]
- w-resize [efekt]
- text [efekt]
- wait [efekt]
- help [efekt]
- default [efekt]

Jak można łatwo zauważyć wyborów jest sporo. Jednak zalecam szczególną rozwagę w stosowaniu tych określeń. Bo czy widziałeś kiedyś stronę, na której kursor byłby zmieniony? Radzę stosować to w wyjątkowych sytuacjach. Na tej lekcji chciałem Ci pokazać, że tak można, jednak w dalszej częściu kursu zrezygnuję z tej linijki. Oczywiście jeśli chcesz, możesz zostawić sobie ten fragment:-)