|
Wpisany przez Patryk yarpo Jar
|
|
piątek, 18 września 2009 02:40 |
|
Może najpierw czym jest warstwa? Mylnie możesz sądzić, że to jakaś folia. Choć przy odpowiednim użyciu stylów CSS można warstw używać jak "folii", to jednak ja proponuję abyś uważał warstwę [znacznik div] za "pojemnik" .
Przez pojemnik rozumiem prostokąt o jakichś rozmiarach, w którym możesz umieścić co tylko chcesz. Co więcej taki pojemnik sam z siebie ma niewiele cech.
W pojemniku możesz trzymać jakbłka, truskawki, proszek do prania albo częsci rowerowe. Chodzi o to, że dzięki pojemnikowi są one zebrane razem. Nie zyskują nagle jakichkolwiek właściwości "dziedziczonych" z pojemnika.
Pamiętaj - prostokąt.
Przeróbmy zatem naszą stronę `index.htm', w taki sposób, aby pewne jej fragmenty powrzucać do pojemników.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Moja pierwsza strona!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<div id="wrapper">
<div id="top">
<h1>To jest moja pierwsza strona!</h1>
</div>
<div id="menu">
<ul>
<li><a href="/index.htm" title="Przejdź do strony głównej">home</a></li>
<li><a href="/kontakt.htm" title="Skontaktuj się ze mną">kontakt</a></li>
</ul>
</div>
<div id="content">
<p>Tu umieść jakiś krótki wstęp.</p>
<p>Jeśli chciałbyś się ze mną skontaktować, to zajrzyj na stronę <a href="/kontakt.htm">kontaktu</a>.</p>
</div>
</div>
</body>
</html>
Jak widzisz mamy 4 pojemniki (warstwy):
wrapper
top
menu
content
Nazwy same mówią o tym, do czego mają służyć. Tak naprawdę, jeśli nie wykorzystuje się stylów CSS to warstwy bardzo niewiele dają.
Spokojnie - i do CSS dojdziemy w tym kursie (jako, że to kurs HTML, potraktujemy CSS bardzo pobieżnie, ale zawsze czegoś się nauczysz).
Zauważ, że tak naprawdę to niczego nie zmieniło na razie w sposobie prezentacji danych na stronie. Warstwy (znaczników div) używa się po to, aby pogrupować treść na stronie. Same z siebie niewiele formatują. Do tego służy CSS.
Teraz zapewne jesteś totalnie skołowany :P Spokojnie - w dalszej części się wszystko wyjaśni.
Zadanie dla ciebie:
Wprowadź podobną strukturę na stronie `kontakt.htm'
|
