Warstwy - klocki budulcowe strony www

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:

<div id="cośtam">

Lub też:

<div class="cośtam">

Czym jest ten div?

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.

Identyfikator

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.

Klasa

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:

<body>

   <div id="topCont">

   </div>

   <div id="mainCont">

   </div>

   <div id="footerCont">

   </div>

</body>

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.

body
topCont

pasek górny i nagłówek

mainCont

menu i treść główna

footerCont

stopka

Popatrzmy teraz na pojemnik zawierający górę strony:

<div id="topCont">
   <div id="top">
      <div id="topleft">...zawartość...</div>
      <div id="topright">...zawartość...</div>
   </div>
   <div id="header">
      <div id="headerleft">...zawartość...</div>
      <div id="headerright">
         ...zawartość...
      </div>
   </div>
</div>

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.

topCont
top
topleft

lewa część paska górnego

topright

prawa część paska górnego

header
headerleft

lewa część nagłówka

headerright

prawa część nagłówka

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:

<div id="mainCont">
   <div id="main">
      <div id="mainmenu">
         ...zawartość...
      </div>
      <div id="maincontent">
         ...zawartość...
      </div>
      <div class="bottom"></div>
   </div>
</div>
 

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.

mainCont
main
mainmenu

menu główne

maincontent

treść główna

bottom

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.

<div id="footerCont">
   <div id="footer">
      <div id="footerleft">
         ...zawartość...
      </div>
      <div id="footerright">
         ...zawartość...
      </div>
      <div class="bottom"></div>
   </div>
</div>

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.

footerCont
footer
footerleft

lewa część stopki

footerright

prawa część stopki

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:

body
topCont
top
topleft

lewa część paska górnego

topright

prawa część paska górnego

header
headerleft

lewa część nagłówka

headerright

prawa część nagłówka

mainCont
main
mainmenu

menu główne

maincontent

treść główna

bottom
footerCont
footer
footerleft

lewa część stopki

footerright

prawa część stopki

bottom