Jak już mogłeś spostrzec na poprzednich lekcjach do opisywania tabeli nadal używałem html-a. Dlaczego? Dlatego, że rzadko zdarza się, by na stronie trafiły się 2 takie same tabele. Poza tym opisywanie tamtych właściwości nie jest krótsze w CSS niż w HTML. Po trzecie, z przyzwyczajenia. Procent udziału CSS w opisie wyglądzu strony będzie różny dla różnych witryn. Na tej lekcji nauczysz się jak opisywać tabele, bo mimo wszystko czasem będziesz tego używał, nawet na tym kursie.

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ć */

td { /* 1 */

    vertical-align: top; /* 2 */

}

td.menu {

    border-left:1px solid white; /* 3 */

    width:160px; /* 4 */

    background-color: #AFB4C0; /* 5 */

}

td.txt {

    border-left:1px solid white; /* 3 */

    border-top:1px solid white;/* 3 */

    border-bottom:1px solid white; /* 3 */

}

td.gorne {

    padding: 25px 0 25px 0; /* 6 */

    border-top: 1px solid white; /* 3 */

    border-right:1px solid black; /* 3 */

    border-left:1px solid white; /* 3 */

    background-color: #AFB4C0;/* 3 */

}{/codecitation}

Opis:

1 - Zaczyna deklarować komórkę. Każda komórka będzie mieć jej właściwości (o ile w klasie nie będzie to zmienione - potęga dziedziczenia!).

2 - Pionowe wypozycjonowanie ustalam na 'top' [góra], czyli cała treść każdej komórki będzie podsuwana do samej góry (komórki).

3 - Określam właściwości obramowania komórki. Każdą stronę opisuję osobno [strony: left(lewa), right(prawa), top(góra), bottom(dół)] wg schematu: border-strona: Qpx typ kolor , gdzie 'Q' - liczba pixeli; typ - jedno z możliwych rozwiązań [patrz niżej]; kolor - kolor ramki, nazwa może być po angielsku [red, blue itp.], kodem heksadecymalnym [np. #AFB4C0] lub kodem RGB.

4 - Określam szerokość komórki w pixelach. Można także określić wysokość - height: Q , gdzie 'Q' to liczba pixeli lub procent. Zawsze należy podać jednostkę, tylko wartość 0 jej nie wymaga.

5 - Kolor tła, sposób określania identyczny jak w przypadku określania tła całej strony.

6 - Padding, czyli odległość wypełnienia komórki od obramowania. Okraślane kolejno strony wg schematu: padding: góra prawa dół lewa określane w pixelach.

Jednostki [wartości przykładowe]:

- procent, zapis: 100%,
- punkt, zapis: 5pt,
- inch(cal), zapis: 2in,
- centymetr, zapis: 3cm,
- względem, zapis: 0.3em [to kropka, nie przecinek],
- piksel, zapis: 4px

Typy obramowań:

- żadne, zapis: border: 1px none white,
- kropkowane, zapis: border: 1px dotted white,
- kreskowane, zapis: border: 1px dashed white;,
- normalnie, zapis: border: 1px solid white,
- podwójna ciągła, zapis: border: 1px double white,
- cieniowane, zapis: border: 1px groove white,
- odwrotnie cieniowane, zapis: border: 1px ridge white,
- cieniowane, zapis: border: 1px inset white,
- odwr. cieniowane, zapis: border: 1px outset white

Masz już w tej chwili gotowe style dla prawie wszystkich tabel. Teraz czas dodać kilka słów do pliku 'index.htm'.

Aby wszystko działało jak trzeba to musisz:
- wpisać do pierwszej od góry komórki <td >
- wpisać do pierwszej komórki drugiej tabeli <td class="menu">
- wpisać do drugiej komórki drugiej tabeli <td class="txt">

Text zabarwiony należy dopisać. Text czarny powinien już tam być.

Na razie nic nie wpisuj do ostatniej tabeli. Zapisz wszystko i obejrzyj efekt. Jeśli nic nie będzie widoczne, to powpisuj do poszczególnych komórek jakiekolwiek napisy, np. 'Hello world!'. Lub nazywam się Bond:-)

W zwykłym html-u można stworzyć całkiem ciekawe listy, ale nigdy nie będą one tak różnorodne jak te, stworzone przy pomocy css.

Może najpierw pokaże jakąś listę, bo nie każdy wie co to jest:

Można także sprawić by były numerowane i by przy kolejnych pozycjach były inne "znaczki". No, ale skoro świat idzie do przodu, wymyślono CSS to czemu z niego nie skorzystać, szczególnie, że dzięki niemu można uzyskać dużo lepsze efekty, a dodatkowo wszelkie zmiany w wyglądzie 100 stron dokonywane są przez zmianę w jednym pliku. Więc zacznijmy.

Skopiuj plik 'index.htm' i nadaj kopi nazwę 'listy.htm'. Od tego momentu wszelkie zmiany na stronie index.htm (w 99%) będziesz musiał także przeprowadzić na innych stronach - poradzisz sobie! (choćby dlatego, że musisz:-)) )

Budowanie strony 'listy.htm':

{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">

    </head>

<body>

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

        <tr>

            <td > </td>

        </tr>

    </table>

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

        <tr>

            <td class="menu"> </td>

            <td class="txt">

                <ul // 1

                    style="list-style-image: // 2

                    url('lista.gif');"> // 3

                    <li>Pierwsza pozycja</li> // 4

                    <li>Druga pozycja</li> // 4

                </ul>

            </td>

        </tr>

    </table>

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

        <tr>>

            <td> </td>

        </tr>

    </table>

</body>

</html>{/codecitation}

Opis:
* - spokojnie, specjalnie zrobiłem takie małe napisy w górnej i dolnej części strony, ponieważ są mało istotne. Najważniejsza treść jest bordowo-brązowa.
1 - 'ul' oznacza lista punktowana (taka jak w przykładzie na górze strony). Inną możliwością jest 'ol' wtedy lista będzie numerowana.
2 - określam wygląd dla tej konretnej listy. I tak kolejno mówię przeglądarce co chciałbym zmienić list-style-image: url('lista.gif'); co możnaby przetłumaczyć na dla_listy[list]-wygląd[style]-obrazek[image].
3 - zostanie wczytany plik 'lista.gif', zamiast tych zwykłych czarnych punktów. Nazwa pliku może być dowolna, odradzam jednak stosowania polskich liter i spacji. Mogłeś już spostrzeć, że zawsze kiedy jest możliwość wczytania pliku graficznego schemat jest ten sam obiekt-image: url('ścieżka/plik.gif'); Podobna sytuacja była już wcześniej z tłem [ background-image: url(plik.gif);].
4 - znacznik <li> oznacza początek pierwszej pozycji.

Jak zawsze CSS daje jeszcze kilka możliwości. Opiszę tu jedną z najczęściej używanych. Otóż jest to dodawanie jako punktów jakichś symboli, które są ładowane na poziomie przeglądarki [kwadraty na górze strony]. Mogą to być:

• style="list-style-type: disc;"
• style="list-style-type: circle;"
• style="list-style-type: square;"
• style="list-style-type: decimal;"
• style="list-style-type: lower-roman;"
• style="list-style-type: upper-roman;"
• style="list-style-type: lower-alpha;"
• style="list-style-type: upper-alpha;"
• style="list-style-type: none;"

W przypadku list można jak najbardziej robić także klasy. Tu ich nie używałem ponieważ w ten sposób było mi łatwiej i krócej przeprowadzić tę lekcję.

A teraz zadanie bojowe dla Ciebie: zrób klasę, w której będą opisane właściwości listy. Popróbuj także nadać jej inne właściwości - tło, obramowanie itp (prawie wszystko czego do tej pory nauczyłeś się w tym kursie będzie działać!). Stworzoną wcześniej stronę zachowaj. Próby możesz przeprowadzać w niej. Niech na tej stronie w komórce określonej klasą 'txt' znajdzie się kilka przykładów. Ich treść i liczba zależy jedynie od Ciebie!

Czasy, kiedy formularze musiały straszyć użytkowników swoim szarym, często niepasującym do reszty strony wyglądem dawno minęły - na szczęście! Teraz prawie każdy obiekt może by pięknie zabarwiony, po najechaniu może się zmieniać kursor itp. Ogólnie wszystko co do tej pory poznałeś przyda się na tej lekcji. Właściwie teraz zaczyna się część kursu, w której będziesz poznawał coraz mniej nowych właściwości, a coraz więcej sposobów ich wykorzystania.

Pola formularza:

{codecitation}<input type="text" name="poletxt" value="To jest pole"> // 1

<input type="submit" name="wyslka" value="Wyślij form"> // 2

<input type="radio" name="wybor" value="opcja1"> // 3

<input type="radio" name="wybor" value="opcja2"> // 3

<input type="checkbox" name="sprawdz" value="ok"> // 4

<textarea name="wpis" cols="12" rows="5">Wielowierszowe pole textowe</textarea> // 5 Wielowierszowe pole textowe{/codecitation}

Opis:
1 - Jednowierszowe pole textowe. Służy do wpisywania krótkich textów, takich jak imię nazwisko, miejscowość itp.
2 - Przycisk submit, służy do wysyłania wypełnionej zawartości formularza. // w tym wypadku kliknięcie na niego niczego nie spowoduje - powyżej widzisz przykładowe pola - nie formularz.
3 - Przyciski typu radio służą do wybierania jednej opcji z całego wachlarza możliwości.
4 - checkbox służy do zaznaczania więcej niż jednej możliwości z całego ich zbioru.
5 - I teraz wielowierszowe pole textowe. Służy do wprowadzania dłuższych łańcuchów znaków - wpisy do księgi gości, czy też wysyłanie e-maila ze strony.

Być może dla kogoś, kto nigdy wcześniej nie miał styczności z formularzami, powyższe wyjaśnienia mogą nie mieć sensu. Jednak jest to kurs CSS, nie html - dlatego będę pokazywał jak zmienić wygląd powyższych obiektów - nie jak tworzyć formularze. Dla zainteresowanych [ kurs tworzenia stron www -> Krok6 -> Formularze ]

Teraz skoro już przypomniałeś sobie krótko sposób budowania pól formularzy czas zacząć je zmieniać.

Zacznijmy od pola textowego:

/* będę tworzył klasę, od ciebie zależy sposób umieszczenia tego na stronie. */
input.przycisk {// 1
border-right: #9B0000 1px solid; // 2
border-top: #9B0000 1px solid;
border-bottom: #9B0000 1px solid;
border-left: #9B0000 1px solid;
font-size: 11px; // 3
background-color: black; // 4
cursor: hand; // 5
color: white; // 6
font-family: tahoma,sans-serif; // 7
height: 19px;} // 8

Opis:
1 - tworzę klasę 'przycisk'
2 - obramowanie - to już było przy tabelach
3 - Określam rozmiar czcionki na 11 px [pixeli]
4 - kolor tła na czarny
5 - jeśli myszka znajdzie się nad tym obiektem, to zmieni wygląd na rączkę [przykład] - nie we wszystkich przeglądarkach
6 - color textu ma być biały
7 - użyj czcionki 'tahoma'
8 - określ wysokość na 19 px [pixeli]
przykład:

Tym sposobem szybko i przyjemnie zmieniliśmy kolor jednowierszowego pola textowego. Jak widziałeś przed klasą wpisałem 'input' oznacza to, że tą klasą mogą być opisane wszystkie obiekty 'input', czyli - patrz na górę strony - pierwsze cztery. Wielowierszowe pole textowe nie zostanie opisane, ponieważ nie jest 'input' (mówiąc najprościej jak się da). A więc trzeba dla niego stworzyć nową klasę:

textarea.pole { // 1
border:0; // 2
font-size: 11px; // 3
color: white; // 4
scrollbar-arrow-color:#9B0000; // 5
scrollbar-base-color: white;
scrollbar-dark-shadow-color: white;
scrollbar-face-color: black;
scrollbar-shadow-color: silver;
background-color: black; }

Opis:
1 - w tym wypadku użylem klasy 'pole' (możesz nie zrobić klasy, ale wtedy będziesz miał wszystkie 'textarea' jednakowe).
2 - obramowanie na zero, czyli nie ma być w ogólne widoczne
3 - rozmiart textu na 11px [pixeli]
4 - kolor textu biały
5 - w wielowierszowych polach textowych występują paski przewijania, ustalmy więc ich kolor. Jeśli tego nie zrobimy przyjmie kolor taki jak scrollbar na stronie (w przykładzie u góry - biały).
6 - tło ma być czarne
przykład:

Jak już pewnie zauważyłeś wiele rzeczy z poprzednich lekcji się powtarza. Ale to jeszcze nic! Poczekaj do lekcji o akapitach(!).

Zadanie dla ciebie:

- stworz stronę 'formularz.htm' [skopiu stronę index i zmień nazwę]
- umieść ją w folderze, w którym masz wszystkie inne strony z tego kursu
- popróbuj na wszystkich obiektach, niech każdy ma swoją własną klasę, ale te właściwości, które się powtarzają umieść w jednym 'input' - skorzystaj z dziedziczenia - miejsce trzeba oszczędzać!

Na stronach wykonanych przy użyciu html-a często text nie jest zbyt piękny; przyssany do krawędzi, mały, nieczytelny. Gdy zaglądamy w kod okazuje się, że jego wygląd w ogóle nie jest zdefiniwany:-( Nie wygląda to dobrze. I tu po raz koleny z pomocą przychodzi CSS. Może to stwierdzenie jest już nudne, ale w sposób szybki i łatwy można to zmienić:-).
Jak sądzisz, ile tabelek jest na tej stronie? Policz. A oto wynik=2+2-4+1 :-)
tak tylko jedna! Jedna tabelka z jedną komórką, reszta zrobiona w CSS w 5 min. Może nie jest to najpiękniejsza strona jaką w życiu widziałem, ale na pewno jest przejżysta i schludna - a to dwie podstawowe cechy dobrej strony.

Więc czas by pokazać Ci co zrobić, by równie szybko twoja strona nabrała rumieńców.

Na początek określimy wygląd pierwszej kolumy drugiej tabeli (o przypisanej klasie 'menu'). Zrobimy to wg mojego projektu. Potrzebujemy zatem 2 nowych klas:

P.menu1 { // 1
margin: 10px 10px 0 10px; // 2
font-size: 9pt; // 3
padding: 2px 20px 2px 0; // 4
font-weight: bold; // 5
text-align: right; // 6
font-family: verdana,tahoma,helvetica,sans-serif; // 7
background-color:#B1BBBE; // 8
border-left: 1px solid white; // 9
border-right: 1px solid white;
border-bottom: 1px solid white;
border-top: 1px solid white;}

P.menu2 {// 1
margin:0 10px 0 0; // 2
font-size: 9pt; // 3
padding: 0; // 4
text-align: right; // 6
font-family: verdana,tahoma,helvetica,sans-serif; // 7
border-right: 1px solid white;} // 9

Opis:
1 - Tworzę dwie klasy 'menu1' i 'menu2'.
2 - Coś nowego - margin, oznacza odległość od obramowania (text także może je mieć!) na zewnątrz. W przeciwieństwie do padding, które określa odległość od obramowania do wewnątrz (patrz rys.3).
3 - określam rozmiar czcionki czcionka[font]-rozmiar[size]. Najczęściej podaje się w pixelach[px] lub punktach[pt] (zaleca się jednak stosowanie innych jednostek niż punkty).
4 - o tym było już wcześniej - padding - odległość obiektu od obramowania - prawie każdy obiekt może mieć obramowanie (nawet text, link, grafika). Opisywane w kolejności: góra prawa dół lewa lub jeśli wszystkie wartości są takie same jedną liczbą. Pamiętaj, że tylko 0 może nie mieć jednostki.
5 - określam jakiej "wagi" [weight] ma być text [font] na pogrubiony [bold]. Inne możliwości: normal, bolder, lighter.
6 - wyrównanie textu do prawej.
7 - określam rodzaj czcionki: czcionka[font]-rodzaj[family]: pierwsza, druga, trzecia. Podaje się kilka czcionek, po to by w przypadku, kiedy jakaś czcionka nie była zainstalowana na komputerze internauty nie wchodziła standardowa Times New Roman, tylko następna z kolejki.
8 - kolor tła zabarwi powierzchnię pod textem i pod padding. Miejsca pod marginesami [margin] nie zabarwi.
9 - obramowanie textu(!) Też się zdziwiłem kiedy o tym usłyszałem. Efekt możesz ocenić na tej stronie. Spójrz na lewą lub prawą (podwójną) ramkę - jedna linia z tabeli, druga z textu.

Wstaw teraz akapity, z tymi klasami na stronę wg przykładu:
Dodaj teraz te dwie nowe klasy do pliku 'style.css'. Na razie nie wiele zmienią, ale będą niezbędne do przejścia przez nastepną lekcję.

Zmiany w 'index.htm':

<tr>
<td class="menu">
<p class="menu1">Menu:</p>
<p class="menu2">To miejsce wypełnisz na następnej lekcji</p>
</td>

dalsza część strony

Jeśli włączasz teraz swoją stronę 'index.htm' to na dole jest jeszcze tak brzydko wykończona (właściwie, niewykończona). Zaraz to zmienimy - tu zrozumiesz po co (m.in) stworzono możliwość obramowania textu.

P.stopka { // 1
margin: 0;
padding: 10px 1px 1px 1px;
font-family: arial;
font-size: 7pt;
text-align: center;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid white;
background-color: #AFB4C0;}

Opis:
* - nie będę tu się za wiele rozpisywał, bo przed chwilką dokładnie opisywałem każdy element. Tu jedynie wartości są inne.
1 - nowa klasa 'stopka'.
Teraz możesz wykończyć swoją stronę. W ostatnią - najniższą tabelę (jej jedyną komórkę) wpisz dowolny text typu
<p class="stopka">(c) yarpo2004</p>

Teraz kolej na określenie wyglądu głównego txtu na stronie. Do tego będą potrzebne także 2 klasy (oczywiście możnaby było to zrobić w jednej, ale tak poznasz ciekawy efekt).

p.tytul {
border-left:1px solid #333333;
border-right:1px solid #333333;
border-top:1px solid #333333;
font-family: arial,tahoma,helvetica,sans-serif;
font-size: 10pt;
font-weight: bold;
text-align: justify;
margin: 10px 0 0 10px;
padding: 5px 10px 5px 10px; }

Opis:
Wszystkie właściwości powinieneś już znać. Zauważ, że nie określiłem dolnego obramowania, a dolny margines [margin:10px 0 0 10px;] ustaliłem na zero. Dzięki temu boczne obramowania (tej i niższej klasy) jakby "skleją" się ze sobą.

P.tresc {
border-left:1px solid #333333;
border-right:1px solid #333333;
border-bottom:1px solid #333333;
font-family: arial;
font-size: 9pt;
text-align: justify;
margin: 0 0 10px 10px;
padding: 5px 10px 5px 10px; }

Opis:
Tu już możesz zauważyć jak to będzie zrobione. Można to porównać do garnka z pokrywką - klasa 'tytul' jest "pokrywką" klasy 'tresc'. Może teraz jeszcze za bardzo nie rozumiesz, ale kiedy popróbujesz to zrozumiesz. Pozmieniaj wartości 'border' i 'margin'. Po przeanalizowaniu rezultatów powinieneś już wszystko zrozumieć.

Mam nadzieję, że już dokonałeś zmian w pliku 'style.css', ale nadal trzeba uzupełnić zawartość 'index.htm'.
Wykonaj wg przykładu:

<td class="txt">
<p class="tytul">Tu nagłówek</p>
<p class="tresc">wpisz tu dowolny własny text</p>
</td>
</tr>

Jest jeszcze jedno miejsce, które przeważnie na stronach wypełnia grafika - miejsce na banner. Na twojej stronie tworzonej podczas tego kursu jest to jedyna komórka pierwszej tabeli (z przypisaną klasą 'gorna'). Stwórz teraz nową klasę i wpisz w komórkę: <p class="gora">WWW.TwojaStrona.pl</p> - lub dowolny inny txt.

Kod CSS

p.gora { // 1
font-size: 15pt;
padding: 25px 0 25px 0;
font-family: verdana,tahoma,helvetica,sans-serif;
text-align: center;}

Opis:
1 - Nowa klasa 'gora'.
Text bedzie dosyć duży - 15pt, wyśrodkowany. Odległość od górnej granicy wynosi 25, prawe - 0, dolej 25, lewej - 0 [pixeli], rodzaj czcionki 'verdana', jeśli nie będzie takiej czytaj tahoma itd.

Teraz masz baaardzo trudne zadanie - musisz wprowadzić zmiany na (aż) trzech stronach! Ale sobie poradzisz. Oczywiści możesz pozmienić pewne fragmety, dostosowując je do własnego gustu - to przecież twoja strona. (nie zmieniaj jednak struktury strony - rozmieszczenia i ilości tabel, bo będzie Ci potem trudno się odnaleźć).

W linku do tej lekcji widnieje napis 'akapit, czcionka'. O akapicie napisałem już wiele - teraz czas na czcionkę.

Może najpierw wyjaśnię na czym polega różnica między nimi. Otóż akapit <p> odnosi się do pewnej spójnej całości. W akapit nie można wstawić w innego akapitu, ale można wstawić <font>[czcionkę]. Czcionka opisuje jedynie jakiś wybrany fragment textu. Akapit (o ile nie zostanie to zmienione) automatycznie zajmuje 100% dostepnego miejsca, podczas gdy font zajmuje jedynie (jeśli nie zostanie to zmienione) fragment szerokości strony, na którym jest text. Font posiada prawie wszystkie właściwości akapitu, dlatego nie będę tu omawiał żadnego przykładu, bo myślę, że wszystko jasne. Popróbuj:-)

Uwaga: Znacznik <font> został usunięty ze specyfikacji HTML. Oznacza to, że nie należy go używać. W jego zastępstwie należy stosować <span>. O tym znaczniku więcej w dalszej części kursu.

Będzie to dział, który chyba najbadziej się każdemu z was przyda. Pamiętam, że pierwszy raz użyłem CSS do zmiany wyglądu linków. Na tej lekcji nauczysz się nie tylko jak można spowodować zmianę koloru textu, ale również jak można osiągać bardzo wciekawe efekty, jak zawsze, przy minimalnym nakładzie pracy.

Będziemy dalej kontynuować pracę nad twoją stronką.
Stwórzmy więc najpierw bazę dla naszych linków, czyli zdefiniujmy wygląd samego a [bez klasy].

Dodaj do pliku 'style.css':

a {
text-decoration:none; // 1
color: black} // 2

Opis:
1 - Określam dekorację textu [text-decoration] na 'żadna[none]'. Domyślnie linki są podkreślone [underline]. Inne możliwości: line-trough[przekreślnenie], overline[linia nad].
2 - Określam kolor linków na 'czarny'. Gdybym tego nie zrobił przyjęłyby kolor określony ustawieniami przeglądarki (najczęściej fioletowy).

Dzięki temu, że nie użyłem tu klasy wszystkie 'a' będą miały te właściwości wyżej opisane - dziedziczenie.

Teraz czas, aby opisać linki, które będą w menu po lewej w lewej komórce środkowej tabeli.

Dodaj do pliku 'style.css':

a.lewe { // 1
border-left: 1px solid white; // 2
border-bottom: 1px solid white;
width:90%; // 3
background-color:#CBD1D3; // 4
display: block; } // 5

a.lewe:hover { // 6
background-color: white;} // 7

Opis:
1 - Tym razem tworzę klasę o nazwie 'lewe' - odziedziczy ona jednak wszystkie właściwości 'a'.
2 - Obramowanie (jak widzisz wszędzie je stosuję)
3 - Określam szerokość tego linku na 90% dotępnego dlań miejsca. Gdybym tego nie zrobił zająłby tylko powierzchnię pod textem ujętym między <a> txt</a>
4 - Okreslam kolor tła.
5 - Określam typ wyświetlania na 'block' [element blokowy]. Domyślnie jest 'in-line' [wyświetlane w lini]
6 - tworzę pseudoklasę ':hover', która będzie wywołana, kiedy użytkownik najedzie nad obszar linku. Pseudoklasa ta, odziedziczy wszystkie właściwości od 'a' i klasy 'lewe'...
7 - ... dlatego mogą przypisać tylko jedną właściwość zmieniającą kolor tła. Po najechaniu na link (text/grafikę lub na obszar ujęty 'width: 90%' kolor tła ulegnie zmianie).

Nadszedł czas, aby to wszystko jakoś ze sobą połączyć(twoją stronę i nowe klasy).

Otwórz plik 'index.htm' i znajdź pierwszą od lewej komórkę drugiej (środkowej tabeli).
Powinno to wyglądać mniej-więcej tak:

<td class="menu">
<tr>
<p class="menu1">Menu:</p>
<p class="menu2">
<A href="index.htm" class="lewe">O mnie</a>
<A href="index.htm" class="lewe">Ważne</a>
<A href="index.htm" class="lewe">Formularz</a>
<A href="index.htm" class="lewe">Kontakt z autorem</a>
<A href="index.htm" class="lewe">www.yarpo.prv.pl</a></p>
</td>
<td class="txt">

Fragmenty kodu o kolorze czarnym powinny się już znajdować w kodzie stron [jest to druga tabela, pierwsza komórka od lewej]. Nowe fragmenty są niebieskie. Podobnych zmian dokonaj na wszystkich stronach, które dotąd zrobiłeś. Powinny wyglądać prawie tak samo. Liczba linków jest zależna od twojej woli. Poprobuj. Zrób jedną stronę o sobie (skopiuj 'index.htm' zmień jego nazwę i napisz kilka zdań o własnej osobie), drugą z listami - np. lista zakupów (tu nie chodzi o treść), kolejną z formularzami (nie będą działać, gdyż wstawisz jedynie pola, ale popróbuj), następny link niech uruchamia program pocztowy [ <a href="mailto:twoj@adres.pl class="lewe">Kontakt</a> ]. Możesz oczywiście zrobić jeszcze więcej stron, ale sądzę, że starczy jeśli będzie ich 3-4. Oczywiście, aby linki odnosiły się do nich musisz wpisać href="xxx", gdzie xxx - nazwa strony.

>------Rada-----<

Nie musisz za każdym razem pisać od nowa kodu. Stwórz jedną stronę, która będzie mieć wszystko na swoim miejscu, a nastepnie skopiuj ją x razy i pozmieniaj jedynie nazwy nowootrzymanych plików.
>---------------<

SPAN i DIV używa się dziś już bardzo często. Są to dla tagi, które prawie nie mają własnych właściwości. Znacznik DIV jest często używany przy tworzeniu stron opartych o warstwy [w dalszej części kursu]. Znacznik SPAN właściwie nie posiada własnych właściwości [np. <b> pogrubia]. Aktualnie stosuje się go zamiast <font>, a także w innych przypadkach, gdy chcemy określić jakiś fragment strony. DIV stosuje się do większych części witryny.

Przykład:

<span
style="color: red;
background-color: blue;">
</span>

Efekt: Hello world!

Gdyby to był div zająłby 100% szerokości i nie "zmieściłby" się w akapicie. Zostałby jakby wypchniety. A to dlatego, że jest nadrzędnym tagiem dla P - to akapit powinien być na warstwie, nie warstwa na akapicie. Podobnie byłoby, gdybyśmy spróbowali umieścić na akapicie formularz <form>).

Oczywiście dla span i div także można tworzyć klasy.

Na tej lekcji nauczyłeś się bardzo przydatnych tagów html, które są strasznie przydatne w tworzeniu stron za pomocą CSS - o tym się jeszcze przekonasz.
Na twojej stronie nic się nie zmieniło, ale wiedza, którą tu zdobyłeś będzie wykorzystana w dalszej części kursu.

Naprawdę warto poszukać trochę więcej nt. budowania stron przy pomocy warstw - to jest przyszłość.

Na tej lekcji odejdziemy od wykonywanego projektu [potem wrócisz do niego sam i pozmieniasz, co będziesz uważał za konieczne], aby dokładniej zapoznać się z zastosowaniem "DIVów".

Spróbujemy wykonać stronę z tabelą, ale nie tą zdefiniowaną w HTML - <TABLE> - tylko taką z DIV.

Kod HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony</title>
<link rel="styleshet" href="style.css" type="text/css">
</head>
<body>

<div>                                                // 1
<div class="linia">                                  // 2
<div class="komorka">To jest jedna komorka</div>  // 3
<div class="komorka">To jest druga komorka</div>  // 3
</div>                                               // 4
</div>                                               // 5

</body>
</html>

Opis:
1 - Otwieram pierwszą warstwę - możnaby to przetłumaczyć na 'TABLE', gdyż będzie pełnić identyczne funkcje
2 - Otwieram kolejną warstwę - będzie zastepować tr
3 - Warstwy zastępujące td
4, 5 - zamykam warstwę 'linia' i ogólną

Póki co - bez kodu css to jest to będzie to jedna warstwa - posiadająca w sobie warstwę, która ma dwie warstwy w sobie - jedna pod drugą. I gdzie ten efekt! To nie wygląda jak tabela.. Ale dodajmy trochę CSS.

Plik CSS:

div {
border: 1px solid black;    // 1
margin: 0;                  // 1
padding: 2px;               // 1
width: 300px;               // 1
vertical-align: top;}       // 1

div.linia {                 // 2
width: inherit;             // 3
padding: 4px 0 4px 0;    // 2
border: 0; }                // 2

div.komorka {               // 4
display: inline;            // 5
width: 142px; }             // 4

Opis:
1 - tworzę regułę dla zwykłego div. Właśnie ten div "zastępuje" nam <TABLE>
2 - tworzę regułę dla klasy 'linia', która ma zastąpić <tr>
3 - nowość 'właściwość: inherit' oznacza, że ten element ma mieć identyczną właściwość jak element nadrzędny dla niego - w tym wypadku zwykły div [i tak odziedziczył by to, ale chciałem pokazać inną możliwość - w ten sposób można nadawać kolor linkom <a> umieszczonym w akapicie. W regule opisującej akapit musi być zawarta definicja koloru textu]
4 - tworzę regułę dla klasy 'komorka'
5 - zmieniam sposób wyświetlania na 'inline', czyli w lini. Dzięki temu dwa divy będą umieszczone obok siebie.

Popróbuj jeszcze dodając po raz kolejny cały div 'linia' zaraz po zamknięciu tego pierwszego, ale jeszcze w obszarze warstwy ogólnej. Powinieneś otrzymać efekt identyczny do dodania nowego wiersza do tabeli.

Mam nadzieję, że już teraz widzisz, że DIV jest jakby pustą kartką na której możemy narysować co chcemy - tworzyć jakby własne tagi! Powyższy przykład nie stworzył żadnego nowego tagu - bo przecież tabele już są, ale dobrze zobrazował możliwości warstw - a to dopiero początek. Zapraszam dalej.

PS. Jeśli chcesz wprowadzić jakiekolwiek zmiany w poprzednim projekcie możesz to teraz zrobić. Tamten projekt jest już zamknięty. Teraz zajmiemy się czym innym.

Inne podejście do menu

Już raz na tym kursie tematem przewodnim były hiperłącza - teraz jednak poznasz nowe - bardzo ciekawe efekty, a także najnowsze sposoby na tworzenie list nawigacyjnych. Zobaczmy przykłady:

Kod XHTML:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<div id="prawa"></div>
<div id="lewa">
<h2>_menu:</h2>
<ul>
<li><a href="a.htm">HOME</a></li>
<li><a href="a.htm">Spis treści</a></li>
<li><a href="a.htm">Nowości</a></li>
<li><a href="a.htm">Kontakt</a></li>
</ul> 
</div>
<div id="srodek">
<ul>
<li><a href="a.htm">HOME</a></li>
<li><a href="a.htm">Spis treści</a></li>
<li><a href="a.htm">Nowości</a></li>
<li><a href="a.htm">Kontakt</a></li>
</ul>
</div>

</body>
</html>

Opis:
1 - do warstwy 'lewa' wstawiam nagłowek drugiego stopnia <h2>, a także listę. Każda pozycja tej listy to kolejna pozycja naszego menu.
2 - w warstwie 'srodek' także wstawiłem identyczną listę. Wydawałoby się, że muszą wyglądać tak samo... Poczekajmy na kod CSS:-)

Plik CSS:

body { margin: 5px; padding: 5px; background-color: black; }
div { padding: 5px; margin: 0; border: 1px solid white; vertical-align: top; background-color: gray; }
div#lewa { float: left; width: 200px; }
div#prawa { float: right; width: 180px; }
div#srodek{ margin: 0 191px 0 220px; }

div#lewa h2 {
background-color: silver;
letter-spacing: 0.5em;       // 6
margin: 0 0 2px 0;
padding: 5px;
font-weight: bold;
font-size: 13px;
font-family: verdana;
border: 1px solid black;}

div#lewa ul {               // 1
padding: 0;                 // 2
margin: 0;                  //
width: 150px;               //
list-style-type: none;      //
font-weight: bold;          //
font-size: 12px;            //
font-family: verdana; }     // 2

div#lewa ul li {             // 3
margin: 0 0 2px 0;           //
border: 1px solid black;     //
background-color: silver; }  // 3

div#lewa ul a {              // 4
display: block;              //
color: black;                //
padding: 5px 15px 5px 15px;  //
text-decoration: none; }     // 4

div#lewa ul a:hover {           // 5
color: gray;                    //
background-color: #cdcdcd;      //
background-image: url(1.gif);   //
background-position: 120px 50%; //
background-repeat: no-repeat; } // 5 

Opis:
1 - jest to dla Ciebie coś nowego. Zamiast tworzyć klasy, opisuję położenie danego obiektu. Ta reguła jest ważna dla wszystkiech ul [list], które są zawarte w warstwie 'lewa'. Liczba selektorów może być większa, np. 'div#cd table tr td p' - w tym wypadku opisywane byłyby właściwości <p>.
2 - reguła dla ul w 'lewa': odległości na 0, szerokość 150px, brak wypunktowania listy, czcionka pogrubiona, rozmiar 12px, rodzaj verdana.
3 - reguła dla li znajdującego się w ul w 'lewa': marginesy (dól 2px, reszta 0), obramowanie 1px, tło siwe.
4 - reguła dla hiperłącza w liście w 'lewa': wyświetlane jako element blokowy, czarną czcionką, padding 5px góra i dół, 15px lewa i prawa; bez dekoracji.
5 - reguła dla hiperłączy najechanych: tekst szary, kolor tła jasny siwy, wczytaj grafikę w tło, umieść ją 120px od lewej granicy <a> i 50% wysokości, wyświetl tylko raz - nie powtarzaj [domyślnie tło się powtarza]. Jest to bardzociekawy efekt - po najechaniu w tle pojawia się grafika - wcześniej jej tam nie było. Grafikę możesz pobrać tu.
6 - odległość między literami w wyrazie. Ustawiona na 0.5em.

W taki oto sposób mamy opisane lewe menu. Ale w kodzie mamy jeszcze raz cos podobnego - tylko w innej warstwie, a nasze opisy nie będą działać na listę z warstwy 'lewa'. Trzeba więc dodać trochę kodu:

Uzupełnij plik css:

body { margin: 5px; padding: 5px; background-color: black; }
div { padding: 5px; margin: 0; border: 1px solid white; vertical-align: top; background-color: gray; }
div#lewa { float: left; width: 200px; }
div#prawa { float: right; width: 180px; }
div#srodek{ margin: 0 191px 0 220px; }

div#lewa h2, div#lewa ul li {   // 1
margin: 0 0 2px 0;
border: 1px solid black;
background-color: silver;}

div#lewa h2 {                                    // 2
letter-spacing: 0.5em;
padding: 5px;
font: bold 13px verdana; }                       // 3

div#lewa ul, div#srodek ul {                     // 4
padding: 0;
margin: 0;
list-style-type: none;
font: bold 12px verdana; }

div#lewa ul {                                    // 5
width: 150px; }

div#lewa ul a {
display: block;
color: black;
padding: 5px 15px;
text-decoration: none; }

div#lewa ul a:hover, div#srodek ul a:hover {
color: gray;
background-color: #cdcdcd; }

div#lewa ul a:hover {
background-image: url(1.gif);
background-position: 120px 50%;
background-repeat: no-repeat; }

div#srodek ul li {
background-color: #cdcdcd;
border: 1px solid black;
display: inline; }                                              // 6

div#srodek ul a {                                               // 7
color: black;
padding: 0px 15px 1px 15px;
text-decoration: none; }

Opis:
1 - jednocześnie opisuje właściwości dla dwóch elementów. elementów tych może być znacznie więcej np. 'p, h1, h2, u, ul { } '. Każdy kolejny element nalezy wpisać po przecinku. Pozwala to zaoszczędzić kilka linijek kodu - warto skorzystać:-).
2 - ponieważ h2 miał tylko 3 właściwości zbieżne z li w nowej regule wpisuję te właściwości - czesto stosowany zabieg. Pamietaj, że ani li od h2 ani odwrotnie nie przejmuje jego właściwości domyslnych czy opisanych gdzie indziej.
3 - teraz bardzo ciekawy skrót. Zastępuje on: font-weight; font-size; font-family'. Więcej nt. skrótów w lekcj.i Skrótowy zapis właściwości
4 - kolejna reguła dla dwóch elementów na raz. Własciwoe można by ją zastąpić regułą dla samego <ul>, ale to mogłoby Cię lekko zbić z tropu.
5 - ponieważ tylko ul z 'lewa' miało określoną szerokość wyrzuciłem tą właściwość do osobnej reguły.
6 - w opisie pozycji listy [li] z 'srodek' zmieniłem z domyslego 'display: list-item' na 'inline', czyli w lini. dzięki temu z listy pionowej wyjdzie ładna lista pozioma - to menu będzei ułożone w poziomie...
7 - ...dlatego z opisu hiperłaczy musiałem wyrzycić 'display: block'

Jeśli już wszystko pozapisywałeś i włączyłes tą stronę zapewne widzisz, że na środku jakby brakuje treści, a po prawej w ogóle jej nie ma... To sie zmieni juz na następnej lekcji. Zapraszam dalej!