Zerknijmy teraz w treść strony naszego szablonu, czyli pomiędzy znaczniki <body> a </body>. Nie trzeba się długo przyglądać aby zauważyć, że pełno jest tam tego typu znaczników:
Lub też:
Znacznik <div> tłumaczony jest w książkach jako warstwa. Przyznam jednak, że nie wiem czemu jest to tak zrobione. Warstwy bowiem kojarzą się z czymś, co układa się jedno nad drugim. Natomiast divy są z reguły ustawione pod sobą lub obok siebie.
Czym więc tak naprawdę jest ten div?
znacznik <div> to nic innego jak prostokątny pojemniczek
Pojemniczek ten ma określoną wysokość, szerokość i masę innych parametrów, no i jak na pojemniczek przystało powinien zawierać coś w środku. Wewnątrz diva może się znajdować jakaś treść lub też i inne divy a w nich treść lub kolejne pojemniczki i tak dalej i tak dalej.
A skąd wiadomo jak ma wyglądać dany pojemniczek?
Jak być może się domyślasz, reguły dotyczące wyglądu są zapisane w arkuszu CSS. No ale żeby było dokładnie wiadomo, które reguły odnoszą się do którego pojemniczka musimy je jakoś rozróżniać. No i do tego właśnie służą identyfikatory i klasy. I mogą one odnosić się nie tylko do divów, ale do wszelkich elementów znajdujących się w treści strony.
Co robi identyfikator? Identyfikuje :-) Czyli jednoznacznie określa dany element strony, nadając mu jakąś nazwę. Wynika z tego, że identyfikator powinien być niepowtarzalny. I rzeczywiście, jeśli przejrzysz kod strony to zauważysz, że nigdzie nie powtarza się żadna nazwa identyfikatora.
Trochę inaczej jest w przypadku klasy. Klasa określa przynależność danego elementu do określonej grupy. Wszystkie znaczniki tej samej klasy będą miały dzięki temu wspólne cechy, określone również w arkuszu CSS. Na przykład: na tej stronie niektóre rzeczy napisane są w ramkach. Należą one więc do klasy elementów pisanych w ramce. Ot i cała filozofia klasy :-)
Przyjrzyjmy się teraz układowi divów w naszym dokumencie.
Na pierwszy rzut oka możemy rozróżnić trzy główne pojemniki umieszczone jeden pod drugim:
Jak być może się domyślasz po nazwach, pierwszy z nich zawiera górną część strony, drugi treść główną a trzeci to stopka.
Popatrzmy teraz na pojemnik zawierający górę strony:
Pojemnik ten zawiera w sobie dwa kolejne pojemniki: top i header. Pierwszy z nich odpowiada za górny pasek strony a drugi za nagłówek (czyli obrazek i tekst z nazwą i sloganem strony).
Pojemnik top również zawiera w sobie dwa pojemniki: topleft i topright, czyli część lewą i prawą. Tak samo mamy w przypadku pojemnika header: headerleft i headerright. Dopiero one mają w sobie właściwą zawartość strony.
Raz jeszcze przypominam, że wszystkie informacje o wyglądzie tych pojemników - ich wymiarach, kolorach i wzajemnym położeniu zawarte są w pliku CSS.
Zajmijmy się teraz pojemnikiem z główną treścią strony:
Pojemnik ten zawiera w sobie kolejny pojemnik (main). Pojemnik main z kolei ma w sobie pojemnik mainmenu (który jak się pewnie domyślasz zawiera menu), pojemnik maincontent (treść główna) i jeszcze taki dziwny pusty pojemnik klasy bottom. Ten ostatni pojemnik pełni funkcję pomocniczą i służy wyrównaniu układu strony, stanie się to jaśniejsze gdy dojdziemy do omówienia reguł CSS.
I kolejny raz powiem (a raczej napiszę) - z tego układu kodu nie widać od razu, które pojemniki zostaną wyświetlone pod sobą a które obok siebie, ustawia je w ich miejscach kod z pliku CSS.
A teraz ostatni z głównych pojemników - footerCont.
Ten pojemnik ma w sobie kolejny pojemnik (footer) i dopiero on, podobnie jak w przypadku wyżej, podzielony jest na część lewą i prawą oraz dodatkowy pusty pojemnik klasy bottom.
I w ten sposób doszliśmy do końca strony i mamy już wszystkie divy.
Możemy ich strukturę teraz przedstawić na jednym diagramie:
-- XHTML --
-- CSS --
-- Ćwiczenia --