Część 2 – podstawy CSS i struktura strony
Strona napisana w poprzednim odcinku kursu, mimo że jest zbudowana poprawnie wygląda tragicznie :). Jednak tak właśnie wyglądają strony gdy stosuje się sam html. Aby nadać im odpowiedniego wyglądu trzeba posłużyć się css. Oczywiście można wygląd definiować w samym kodzie html ale jest to niepolecane i przy tworzeniu większych stron zupełni nieopłacalne. Zajmijmy się zatem naszą stroną. Przypominam jak wygląda stworzony dotychczas przez nas kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Strona domowa</title>
<meta http-equiv="Content-Language" content="pl" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
</head>
<body>
<h1>Witam na mojej stronie</h1>
<p>Witam na mojej stronie domowej. Mam nadzieję, że wam się spodoba</p>
</body>
</html>
<html>
<head>
<title>Strona domowa</title>
<meta http-equiv="Content-Language" content="pl" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
</head>
<body>
<h1>Witam na mojej stronie</h1>
<p>Witam na mojej stronie domowej. Mam nadzieję, że wam się spodoba</p>
</body>
</html>
Po pierwsze trzeba stworzyć jakąś logiczną strukturę naszej strony. Większość stron ma wydzielone elementy takie jak nagłówek gdzie znajduje się tytuł strony i ewentualnie jakaś grafika, menu gdzie znajdują się linki (odnośniki) do poszczególnych części serwisu, część odpowiedzialna za właściwą treść witryny gdzie wyświetlamy poszczególne strony oraz stopkę, która znajduje się na samym dole strony i zawiera najczęściej informacje o autorze itp.
Oczywiście jest to model najprostszy. Są strony które mają menu z dwóch stron albo całkiem inaczej rozwiązany układ. Jednak ten podany przeze mnie jest najprostszy i najczęściej spotykany, więc nim teraz się zajmiemy. Jednak najpierw zróbmy plik css, o którym już tyle wspominałem. Zakładam, że posiadacie już plik index.html o kodzie jak powyżej, stworzony w poprzednim odcinku kursu. Otwieramy notatnik i nowy plik. Póki co nie wpisujemy treści lecz od razu klikamy plik -> zapisz jako i wpisujemy styl.css (warto zauważyć iż rozszerzenie pliku ma postać css). I oto mamy plik css. Teraz trzeba powiedzieć plikowi html, że taki plik stylu istnieje i gdzie. Zanim to zrobimy stwórzmy w dowolnym miejscu katalog – moja strona – i tam przenieśmy oba pliki – index.html i styl.css. Od tej pory wszystkie pliki naszej strony będziemy trzymać w tym właśnie katalogu (nazwa katalogu może być oczywiście dowolna i można go przenosić gdzie się chce. Nie wpływa to na naszą stronę.)
Zanim przejdziemy do rozbudowy naszej strony czas zmienić edytor na coś bardziej przystępnego niż notatnik. Na rynku jest mnóstwo najróżniejszych edytorów html,css itp. Zarówno darmowych jak i płatnych. Nie będę tu rozpisywał się nad tym który jest najlepszy bo tak naprawdę to kwestia tego w czym nam się dobrze piszę. W naszym kursie skorzystamy z darmowego edytora kED.
Jest on darmowy i nie wymaga instalacji. Po prostu ściągamy kED 2 z podanej strony (nie wersja instalacyjna). Następnie tworzymy katalog KED i tam wrzucamy ściągniętą paczkę. Trzeba ją teraz tylko wypakować do tego katalogu i możemy korzystać z programu.
Odpalamy kED-a i już możemy pisać :). Program jak na darmową wersję ma nawet spore możliwości i sporo ułatwień przy pisaniu kodu, lecz nie będziemy się w to teraz zagłębiać. Z czasem każdy sam dojdzie do czego służy jaka opcja. Na razie lepiej pisać cały kod samemu co pozwoli się go nauczyć. Najważniejsze jest to iż kED koloruje nam kod co sprawia że jest on bardziej czytelny. Po lewej stronie programu znajduje się zakładka Pliki. Wskazujemy tam nasz katalog gdzie mamy stworzone wcześniej pliki strony i klikamy dwa razy na index.html. Otworzy się on w programie :). Teraz klikamy w programie Plik -> Otwórz plik i wskazujemy nasz plik styl.css, także otwierając. Jak widać mamy teraz oba pliki naszego serwisu otwarte i możemy się szybko miedzy nimi przełączać. Składnia już jest ładnie pokolorowana więc zacznijmy wreszcie coś robić :).
Najpierw w pliku html trzeba pokazać jak już wspomniałem wcześniej nasz plik css. Pomiędzy znacznikami <head></head> wstawiamy poniższy kod:
<head>
<title>Strona domowa</title>
<link href="styl.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Language" content="pl" />
<title>Strona domowa</title>
<link href="styl.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Language" content="pl" />
Tradycyjnie wystarczy go przekopiować. Mówi on przeglądarce że ma korzystać z pliku stylów i wskazuje jego lokalizację.
Teraz można już zacząć edytować wygląd naszej storny za pomocą css. Przechodzimy do pliku css i wpisujemy coś takiego :
html body
{
{
}
Póki co powiedzieliśmy tylko ze chcemy modyfikować wygląd elementu html body (co w praktyce oznacza że modyfikujemy wygląd całej strony) jednak teraz trzeba ten wygląd rzeczywiście zmienić.Pomiędzy nawiasami klamrowymi wpisujemy:
html body
{
background-color:#008000;
color: #000000;
}
Jak widać najpierw podajemy CO chcemy dokładnie modyfikować a następnie nadajemy modyfikację. Najpierw piszemy background-color co oznacza ze chcemy zmodyfikować kolor tła strony. Następnie mamy dwukropek i podajemy kolor jaki sobie zażyczymy. Ale nie tak dosłownie. Kolory podczas tworzenia stron podajemy w postaci szesnastkowej. Informatycy wiedza co to oznacza ale nam wystarczy wiedzieć iż to kod koloru. Oczywiście nie będziemy go pisać z pamięci bo możliwości jest tyle ile kolorów. Posłużmy się narzędziem wbudowanym już w kED-a. Ustawiamy kursor zaraz za dwukropkiem i wciskamy kombinacje klawiszy CTRL+K. Otworzy nam się narzędzie wyboru koloru. Wybieramy kolor jaki nam przyjdzie do głowy i klikamy ok (proponuje wybrać np. zielony). W zależności od tego jaki kolor wybraliśmy program wstawi nam go w kodzie szesnastkowym (u mnie jest to np. #008000 dla zieleni).
Tak samo postępujemy za każdym razem gdy trzeba wybrać jakiś kolor czy to tekstu czy innego elementu strony.A wiec mamy background-color:#008000; co oznacza że ustawiliśmy właśnie tło strony na kolor zielony. Następnie pod spodem wpisujemy color co oznacza kolor tekstu na naszej stronie (nie tylko tekstu, ogólnie domyślny kolor elementów). Podobnie jak poprzednio wybieramy kolor (CTRL+K), proponuje czarny (#000000) i zatwierdzamy. W ten sposób określiliśmy podstawowy wygląd strony. Sprawdźmy jak to wygląda. Zapisujemy plik (ikonka dyskietki na pasku narzędzi Keda albo plik->zapisz) html (wprowadziliśmy tam kod który pokazuje na plik css) oraz plik css, a następnie w przeglądarce otwieramy nasz index.html.
Powinniśmy uzyskać zielone tło i czarny tekst :).
Jak widać plik stylu działa i definiuje nam ładnie kolor tła i tekstu strony.Teraz pod regułą color (pary elementów co modyfikujemy:modyfikacja; nazywamy regułami. Np. nasze color:#000000; to reguła koloru dla naszej strony) dodajemy kolejne :
color: #000000;
margin: 0;
padding: 0;
}
Pierwsze oznacza marginesy a drugie marginesy wewnętrzne elementów strony. W tym wypadku ustawiamy je dla całej strony na 0. Dlaczego? Aby potem gdy rzeczywiście będziemy chcieli robić odstępy były one zawsze domyślnie wyzerowane. Tu warto wspomnieć że style css rządzą się określonymi prawami. Jeśli coś zdefiniujemy w selektorze elementu html body to odnosi się to do wszystkich innych elementów które wchodzą w skład znacznika body na stronie. Nasze reguły wyglądu są dziedziczone. Jeśli w znaczniku body wpiszemy znacznik p, a w nim tekst to będzie on miał także zielone tło i czarny tekst chyba ze w pliku stylu css zdecydujemy że ma być inaczej (wpiszemy inną regułę). W ten sposób nie trzeba np. ustalać dla każdego elementu np. koloru tekstu. Ustalamy go globalnie w selektorze html body a reszta selektorów to dziedziczy automatycznie. Sprytne i wygodne:).
Ustalając marginesy na 0 sprawiamy że na całej stronie będzie obowiązywać margines równy 0, dopóki sami nie pokażemy ze dany element ma mieć inny margines. A dlaczego akurat selektor html body jest globalny? Bo nie ma innego nadrzędnego :). Wszystkie inne znaczniki wpisujemy przecież w obrębie znacznika body. Nie ustalamy nic dla znacznika head z prostej przyczyny – ten znacznik w żaden sposób nie wpływa na wygląd strony. Jest on niewidoczny. Dobrze teraz wracamy do pliku html i wpisujemy następujący znacznik obejmując nim treść naszej strony:
<body>
<div id="glowny">
<h1>Witam na mojej stronie</h1>
<p>Witam na mojej stronie domowej. Mam nadzieję, że wam się spodoba</p>
</div>
</body>
Jak widać to nowy znacznik. Div to jakby pudełko. Dokładniej rzecz biorąc element blokowy który pozwala w łatwy sposób zarządzać rozmieszczeniem poszczególnych bloków serwisu jak logo, menu czy stopka. Może on być wielokrotnie zagnieżdżamy w sobie co pozwala na budowanie bardzo skomplikowanych stron. Ważne jest iż nadajemy mu identyfikator. To właśnie to id. Id stosuje się aby odróżnić znaczniki od siebie. Jeśli będziemy mieli kilka znaczników div to musimy jakoś odróżnić jeden od drugiego. Stosujemy wtedy identyfikator który jest teraz niejako imieniem tego konkretnego znacznika :).
Przyda nam się to za chwile gdy w pliku css zaczniemy modyfikować jego wygląd. Id=glowne (zamiast glowne może być oczywiste dowolna inna nazwa . Jednak ważne aby nam się dobrze kojarzyła z tym co dany znacznik robi) oznacza ze ten element div jest naszym głównym pudełkiem. W nim będziemy trzymać pozostałe elementy strony co pozwoli nam potem łatwo np. wyśrodkować całą stronę w oknie przeglądarki.
Pamiętacie jak na początku wspominałem o poszczególnych częściach naszej witryny? Czas to zrobić. Pomiędzy nasze znaczniki div wpisujemy nowe:
<body>
<div id="glowny">
<div id="NAGLOWEK">Nagłówek strony</div>
<div id="MENU">Menu</div>
<div id="TRESC">
<h1>Witam na mojej stronie</h1>
<p>Witam na mojej stronie domowej. Mam nadzieję, że wam się spodoba</p>
</div>
<div id="STOPKA">Stopka</div>
</div>
</body>
Trochę tego dużo ale łatwo się zorientować co zrobiliśmy. Wyznaczyliśmy bloki o których pisałem na początku. Mamy blok div o identyfikatorze NAGLOWEK (w języku html nie używamy polskich liter! Można to robić tylko w samej treści witryny, która nie jest kodem html) potem blok menu, treść (tam wstawiamy część tekstu który wpisaliśmy przedtem. To jest teraz nasz blok gdzie będzie wyświetlany tekst ) oraz stopka. Tak naprawdę napisy między znacznikami są niepotrzebne i wkrótce je usuniemy ale na razie pozwolą się zorientować w poszczególnych blokach. Bo w przeglądarce bloki nie są widoczne. Są przezroczyste i tylko za pomocą styli css możemy zmienić ich wygląd i położenie.
Zapiszmy nasz plik i otwórzmy w przeglądarce. Uzyskaliśmy coś na wzór listy ;]. Teraz wiele osób zacznie się śmiać że to praktycznie nic. Kilka napisów jeden pod drugim. Spokojnie, efekt będzie widoczny dopiero gdy zmodyfikujemy poszczególne bloki w css. Teraz warto zauważyć że rzeczywiście nasze divy nie są widoczne. O tym gdzie są świadczą jedynie opisy które zostawiliśmy pomiędzy div. Bez tych podpisów w ogóle nie byłoby widać że są tu jakieś bloki. Bloki div to jakby klocki z których składamy witrynę. Domyślnie gdy je wstawimy na stronie, są ustawiane jeden pod drugim. Jednak za pomocą css możemy zmienić ich zachowanie.
Zajmijmy się tym. Przechodzimy do pliku css i wpisujemy poniższy kod (linijkę poniżej klamry zamykającej selektor html body):
#glowny {
width: 780px;
}
Na początku mamy znak #. Oznacza on że chcemy skorzystać z identyfikatora. Identyfikator może się odnosić tylko do jednego znacznika na całej stronie. Nie może być dwóch znaczników (np. div i p) o takim samym id. Dlatego nie musimy wskazywać o jaki znacznik nam chodzi gdyż sam identyfikator to dokładnie wskazuje. A nam chodzi o div, który ma id=glowny. To nasz div nadrzędny w którym mieszczą się inne bloki. Tutaj póki co wpisujemy tylko szerokość.
Budując naszą stronę musimy pamiętać ze użytkownicy używają różnej rozdzielczości ekranu. Nasza strona musi być zbudowana tak aby zawsze wyglądać tak samo bez względu na rozdzielczość. Dlatego musimy na stałe zdefiniować jej szerokość. Gdy ktoś będzie miał wyższa rozdzielczość przeglądarka wyświetli z boku tylko tło, pozostawiając całą witrynę, treść i obrazki w jednakowej szerokości. W tej chwili najmniejszą używaną rozdzielczością (chociaż coraz zadziej) jest 800 na 600 pikseli. Dlatego też taką szerokość ustawiamy dla naszej witryny. Tak naprawdę wpisujemy trochę mniej bo 780 ale to dlatego ze pasek przewijania i ramka przeglądarki zajmują już trochę miejsca i musimy zostawić sobie margines bezpieczeństwa :).
Reguła width(z ang. szerokość) określa nam szerokość naszego bloku div o id – glowny. Ponieważ w nim znajduje się pozostała część naszej strony, cała nasza strona nie będzie szersza niż 780 pikseli . Zapis 780 px to właśnie 780 pikseli (px to skrót z angielskiego pixels co oznacza piksele).
A wiec określiliśmy szerokość naszej witryny. Czas poukładać nasze klocki. Zacznijmy od div-a NAGLOWEK. Poniżej deklaracji selektora glowny w pliku css, wpisujemy:
#NAGLOWEK {
background-color: #ffff00;
}
Określiliśmy jak ma wyglądać nasz element div o id=”NAGLOWEK”. Chcemy żeby nasz nagłówek zajmował całą szerokość strony. Nie musimy już wpisywać width:780px; bo wcześniej określiliśmy to dla bloku glowny. Blok domyślnie zajmuje szerokość całej strony ale ponieważ jest on w bloku glowny, ogranicza się do szerokości 780 px. Wszystkie inne bloki mogą mieć rożne szerokości ale zawsze wypełnia dokładnie szerokość 780 pikseli nie więcej. Dlatego div Glowy jest tak przydatny.
Dlatego w naglowek wystarczy iż określimy kolor naszego nagłówka. Robimy to za pomocą reguły tła. To ta sama reguła co w html body. Bez niej div odziedziczył by kolor tła po znacznikach html body (co ustawiliśmy na zielony. My jednak chcemy by nagłówek miał inny kolor niż reszta strony i ustawiamy mu tło na żółte (tka to zrobiłem w przykładzie).
Teraz zajmijmy się menu i treścią. Chcemy aby po lewej stronie znajdowało się menu a obok treść witryny. Bloki musza być wiec obok siebie a nie jeden pod drugim jak do tej pory. Piszemy w pliku css:
#MENU {
width: 150px;
float: left;
overflow: hidden;
background-color: #808000 ;
}
#TRESC {
width: 630px;
float: left;
overflow: hidden;
background-color: #ffffff;
}
Jak widzimy tu już trochę nowości. Na początek menu. Najpierw ustalam szerokość naszego bloku. Tym razem nie chcemy żeby zajął on całą dostępną czyli 780 pikseli bo obok chcemy dać treść witryny. Ustawiamy więc 150 pikseli (jak na menu to dobra szerokość). Następnie mamy nową regułę float:left. Służy ona do definiowania „oblewania” obrazka treścią ale w naszym przypadku sprawi że następny blok będzie nie pod spodem ale obok naszego menu. Doklejamy w ten sposób następny blok :). Pod spodem mamy jeszcze overflow. Jest to nasze zabezpieczenie przed przepełnieniem. Chodzi o to aby nić co będzie w naszym bloku MENU nie wystawało poza te 150 pikseli. Tekst, grafika czy odnośniki muszą się mieścić w tych 150 pikselach i nie nachodzić na blok obok. Reguła overflow:hidden ukrywa wszystko to co wystaje poza nasz blok. Jeśli teraz np. w piszemy dluugie zdanie i jeśli przekroczy ono szerokość 150 pikseli to zostanie ucięte. Lepiej się zabezpieczyć niż potem mieć rozjechaną stronę.
Ostatnia reguła jest już nam znana. Definiujemy kolor tła naszego bloku MENU. Ja ustawiłem go na #808000 (taki zelono-zółto-brązowy ;-)). Wszystkie kolory ustawiam tu tylko po to aby było widać dobrze poszczególne bloki. Można kolory dobrać według uznania a w przyszłości zastąpimy je bardziej wyszukaną grafiką. Następnie mamy selektor TRESC. Szerokość ustawiamy na taka jaka nam pozostała (780-150 daje nam 630 pikseli). Chodzi o to aby żaden inny blok nie ustawił nam się już obok treści, a blok TRESC wypełnił cała pozostałą przestrzeń.
Kolejne dwie reguły są takie same jak w MENU. Float znowu dosuwa następny element z prawej ale że nie zostało tam już miejsca (wypełniliśmy do końca)następny blok ustawi się pod spodem. Overflow jak poprzednio chroni przed rozjechaniem strony a kolor tła ustawiłem na biały (#ffffff) :).
Pozostała nam tylko stopka. Piszemy w pliku css pod spodem:
#STOPKA {
clear: both;
width: 100%;
background-color: #ff8040;
}
Reguła clear określa nam przyleganie elementu STOPKA. Bez tej własności nasza stopka wyświetlałaby się pod treścią ale obok menu. My chcemy aby stopka zajmowała cala szerokość ekranu i była pod blokami menu i treść. Stąd reguła clear:both; która sprawia ze STOPKA będzie rozciągnięta pod pozostałymi elementami. Reguła width została tu dodana tylko ze względu na to że przeglądarka Intrnet Explorer posiada błąd i może źle wyświetlać naszą stopkę.
Niestety IE posiada wiele takich błędów i czasem trzeba się ratować różnymi sposobami. Ten tu ustawia szerokość stopki na 100 procent czyli każe wypełnić całą dostępną szerokość. Jak widać szerokości (jak i wysokości) możemy ustalać za pomocą pikseli jak i procentowo. Jednak piksele są lepsze gdyż określają nam daną wielkość na stałe i to niezależnie od rozdzielczości. Stopka ma tło koloru pomarańczy (ostatnia reguła).
Zapisujemy pliki css i html i otwieramy index.html w przeglądarce:
Jak widać udało nam się stworzyć bloki. Jeśli macie rozdzielczość większą niż 800 na 600 to cała strona nie będzie wypełniać całego okna przeglądarki. To właśnie to o co nam chodziło. Bez względu na rozdzielczość strona będzie odpowiednich rozmiarów. Co ciekawe mimo iż nie ustalaliśmy wysokości poszczególnych bloków, dostosowują się one do treści w nich zawartych. Im więcej treści tym blok nasz będzie się coraz bardziej wydłużał a stopka cały czas będzie pod nim.
Dzięki temu iż nasze bloki mają każdy inny kolor, możemy łatwo śledzić jak są ułożone. W przyszłości kolory zastąpimy grafiką. Całość wygląda już lepiej niż na początku choć nadal nie imponuje. Pamiętajcie iż struktura i dobre rozplanowanie strony jest na początku najważniejsze. Wyglądem i bajerami zajmujemy się na samym końcu. W ten sposób zbudujemy stronę którą będzie się przyjemnie oglądać.
W następnej części dodamy menu do naszej strony wraz z odnośnikami i nauczymy się robić pod strony w naszej witrynie. Zaczniemy też zabawę z obrazkami i tekstem. Zachęcam do samodzielnego zmieniania kolorów i kodu który tu zaprezentowałem. Wszelkie pytania i wątpliwości piszcie tu w komentarzach. Na wszystko odpowiem.
wypas. Wszystko zrozumiale. Dzieki 🙂
witam i pozdrawiam serdecznie.
jestem grafikiem ale robienie ilustracji to nie to samo co robienie stron internetowych. kilka zrobilem -ale wszystkie za pomocą narzędzi wysiwyg. a ze program jest dosc stary to i mozliwosci ograniczone. przy mojej nowej prywatnej stronie chcialem ambitnie (ma być miedzynarodowa) zeby nie przynosila wstydu i byla zrobiona dobrze. nadrobilem zaleglosci z webmasteringu(w sensie czytania co jest aktualne a co nie) i okazalo sie ze epoka ramek juz dawno mineła, w miedzy czasie jakies tabelki podobno byly modne, a aktualnie to xhtml i css rządzi. od kilku godzin siedze w necie i szukam tutoriali i artykułów które pomogły by w nauce tych metod … i sory że cie tak zanudzam, ale to z powodu podekscytowania. w końcu twoja strona i ten poradnik wyjaśnia to wszystko tak łopatologicznie, że w godzinke można podstawy css załapać. super. dzię?i bardzo za czas jaki poświęciłeś na napisanie tego. było warto. jest to cholernie przydatne. znalazłem tu 80% informacji jakie potrzebuję do zrobienia swojej strony! pozostale 20 % juz znalazlem wczesniej (tutoriale o menu flashowym).
Bardzo dziękuję za ten świetny kurs! Naprawdę imponuje prostota, i przyswajalność opisu. Dziś dopiero podjąłem pierwsze kroki zakładania swojej strony i po godzince już czuję dużą satysfakcję z osiągnięć. Już nie czuję się taki zielony. Pozdrawiam serdecznie!
Witam! Mam taki problem. W moim szablonie joomla zawartość pliku templates_css.php wyświetla się w kodzie strony przez co w narzędziu „spider robot” służącym do analizy jak robot widzi moją stronę jest pełno kodu którego nie powinno byc własnie z tego pliku, czy da sie to jakoś zmienic?