docTEMAT 0kreślanie właściwości strony
download 
Reklamacja Transkrypt
TEMAT 0kreślanie właściwości strony
Opracował: DR
TEMAT 0kreślanie właściwości strony
Teraz zaczyna się praktyczna część kursu. Przy mojej pomocy tworzyć będziemy stronę
internetową. Co lekcję poznasz nowe moŜliwości języka CSS.
Przykład
Najpierw zbudujmy stronę html, która będzie miała trzy tabele, jedna pod drugą.
Dzięki stylom wszystko się uprości.
<!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.
2.
3.
4.
5.
6.
ZSP Oleśnica
Wczytuję plik z opisanymi stylami
Budując tabelę nadal będziemy 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.
Tytuł strony, lub banner
Menu
Treść strony
Stopka strony, czyli miejsce, w którym umieszcza się kontakt z autorem, datę powstania strony itp.
-1-
Opracował: DR
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'. Najpierw otwórz
zwykły systemowy notatnik, następnie wpisz, co następuje ukośniki i liczby opuść - słuŜą
jedynie dla opisu. Zapisz jako 'style.css' w tym samym folderze, w którym zapisałeś
'index.htm'.
Przykład
BODY {
1.
2.
Inne wartości
background
// 1
// 2
// 3
// 4
background-color: #CBD1D3;
text-align: center;
}
TABLE {
margin-left: auto;
margin-right: auto; }
3.
4.
5.
// 5
// 6
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, %.
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ć.
ZSP Oleśnica
-2-
