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!
Budowanie strony:
<!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>
|
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':
/* 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' */
|
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ć.
|
