Ten tutorial został napisany w celach edukacyjnych, dla osób, które rozpoczynają zabawe z XHTML + CSS. Dowiecie się z niego jak stworzyć stonę taką jak Sunny Design

Jak wygląda kod XHTML dla tej strony?

Co do czego służy?

<div id="container">
Jest to div, w którym znajduje się cała zawartość strony - taki div musi być, ale nazwać go można dowolnie - podobnie jak wszystkie inne divy, spany, h1, h2 etc.

<div id="header">
Za pomocą tego diva tworzymy nagłówek strony.

<div id="lewo"> i <div id="prawo">
Te dwa divy dzielą stronę na dwie kolumny - lewą i prawą.

<div id="menu">
W tym divie znajduje się menu, które oparte jest na liście.

<div id="ramka">
W tym divie znajdują się linki z działu "zaufali nam".

<div id="gora">
Ten div jest w kodzie pusty, ponieważ za pomocą wybranego skryptu nawigacyjnego będzie się w nim pojawiała zawartość podstron widocznych w menu.

<div id="dol">
Jest to ta część strony umieszczona pod divem o klasie gora. Zawartość jej jest sztywna i znajduje się w głównym kodzie strony (index.html).

<div class="gradient">
Ten div mimo, że wydaje się pusty to za pomocą stylu CSS zawiera w sobie tło - linie odzielającą divy:
<div id="gora"> i <div id="dol">

<div id="footer">
W tym dive znajduję się stopka strony - tło oraz tekst.

Styl CSS

Na początek powinniśmy w stylu wyzerować wszystkie marginesy wewnętrzne (paddingi) oraz marginesy zewnętrzne (marginy), aby dla wszystkich przegladarek nasze późniejsze wartości były takie same:

To samo musimy zrobić dla obrazków, aby nie mialy obramowania nadanego automatycznie przez przegladarki (Firefox i IE)

W body musimy nadać następujący styl

Dzięki text-align:center; nasza strona będzie wyśrodkowana w przegladarce IE 5.
A dzięki background nadajemy tło - w tym przypadku w body widzimy szary i niebieski pasek (http://sunnydesign.glt.pl/images/pasek.jpg), który powtarza się w linii poziomej.
Aby wyśrodkować stronę w pozostałych przegladarkach, nalezy dodać margin:0 auto

0 oznacza że margin z góry i z dołu ma 0px a auto, że prawy i lewy margin są dostosowywane automatycznie, są takie same po obydwu stronach.

text-align:left; - powoduje tutaj, że tekst w zawarttości wyrównany jest do lewej strony.
Aby zdefiniować rodzaje użytych czcionek i wielkość używamy na przykład takiego skrótu: font:11px Tahoma, Arial, Helvetica, sans-serif;
Jeżeli chcemy nadać divowi o identyfikatorze header tło musi napisać:

W taki sytuacjach koniecznie należy podać wysokość (height) i szerokość (width) obrazka, którego chcemy użyć w tle. No-repeat za lokalizacją obrazka oznacza, że tło to nie może się powtrzać ani w pionie ani w poziomie.

Teraz przechodzimy do stylizowania kolejnych dwóch ważnych divów, w których zamieszczać będziemy zawartość strony <div id="lewo"> i <div id="prawo">.

Aby każda kolumna ustawiła się prawidłowo należy podać im szerokość oraz float (sprawia, że element zaczyna pływać i można go za pomocą odpowiednich atrybutów ustawić w odpowiednim miejscu), czyli:
Lewa kolumna ma płynąć do lewej strony - float:left;

A prawa kolumna ma płynąć prawej strony - float:right;

Zajmijmy się teraz głównym menu. Jest ono oparte na liście. Jak wiadomo każda lista składa się z:

Na standardzie przy każdym <li> pokazuje się punktator - kropeczka. My musimy się tutaj pozbyć i zastosować jako punktatory małe ikonki.

Jeżeli chcemy aby kazde <li> miało inny obrazek, musimy każdemu <li> nadać inną klasę, a następnie podać odpowiedni background (tło), aby tekst nie nachodził na obrazek najlepiej w kazdej pozycji podać taką samą wartość paddinga (0 .2em), np:

Ramka niżej jest skonstruowana w bardzo podobny sposób - w tym miejscu dodaliśmy jedynie color tła oraz obramowania pola w którym znajduje sie lista z linkami:

Stopka strony zawiera w sobie obrazek oraz tekst.
Tekst został wypozycjonowany z lewej strony za pomocą margin. Tag clear:both; w stopce służy można powiedzieć do zamknięcia wcześniej uzytych float:left; oraz clear:right; i dzięki temu stopka jest częścią zamykającą całą stronę. Nie oznacza to oczywiscie, że pod nią nie można utworzyć kolejnych częsci strony. clear:both; może byc też używany w innych częściach kodu, tam gdzie jest potrzebny w tym samym celu co w tym.
<div id="footer">
<div class="footer">Page created by Water Design © all rights reserved</div>
</div>

I tak skonstruowana jest część główna strony.
Podstrony zbudowane sa na podobnej zasadzie. Możecie to zobaczyć po wejściu do źródła kazdej podstrony. Ich format jest zależy tylko od waszego zapotrzebowania i fantazji.

Trzeba pamietać, że najważniejsze jest to, aby strona poprawnie była wyświetlana w każdej przeglądarce. Nie można właściwie żadnej lekceważyć, bo w ten sposób lekceważy się również gości naszej strony, którzy korzystają z innej przegladarki niż my.
Dlatego jeżeli chcemy sami zrobić sobie stronę musimy mieć co najmniej 3 podstawowe przeglądarki internetowe (Opera, Firefox, IE) aby móc od razu poprawiać błedy, które wychodzą w trakcie pisania kodu. Niestety nasz kod przez np. IE może być inaczej czytany niż przez Operę czy Firefoxa.

Życzę miłej nauki.