: Home / HTML / CSS / kurs CSS / Właściwości strony

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-css/49-wlasciwosci-strony.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Właściwości strony
Ocena użytkowników: / 0
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
piątek, 18 września 2009 03:02

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!

Najpierw zbudujmy stronę w html-u.
Strona ta bedzie mieć trzy tabele, jedna pod drugą. I tu nowość. W html-u zrobiłoby się jedną głowną tabelę i w niej umieszczało kolejne - po co? Dzięki stylom wszystko bedzie zgrabniejsze i prostsze.

Rys. 2 - Wygląd szkieletu strony

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ć.

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież