Przykład szkieletu strony

Znając już zasadę działania kaskadowości czas na zapoznanie się ze składnia jezyka CSS oraz stworzeniem pierwszego szkieletu witryny.
Na początku utwórzcie nowy plik i nazwijcie go np: style.css, oraz zapiszcie go w tej samej lokalizacji, w której będzie wasz index.html. Teraz czas na podpięcie tego dodatkowego pliku stylów do naszej strony. W sekcji <head> </head> proszę umieścić następujący kod:

<link href="style.css" rel="stylesheet" type="text/css" />

Po znaku równości, w cudzysłowie musi znaleźć się nazwa wcześniej utworzonego pliku. My nazwaliśmy go style.css, ale nazwa jest dowolna, co pozwala na dopisanie dla jednej strony kilku plików ze stylami css.

Składnia

Składnia w skrócie to:
selektor{cecha: wartość; cecha: wartość; etc…}

Wyobraźmy sobie, że chcemy nadać znacznikowi article szerokość 1000px; tło koloru czarnego, minimalną wysokość 500px. Kod opisujący wszystkie wartości dla znacznika <article> miałby postać:

article{width: 100px;
background: #000000;
min-height: 500px;}

W celu utworzenia pierwszego szablonu podam kilka cech, których użyjemy w naszym szablonie.
width – szerokość ,
height- wysokość,
min-width lub min-height określa minimalne wartości, które mogą być większe jeśli np. w środku znajdzie się więcej tekstu.
margin – margines,
padding – margines wewnętrzny,
background – tło selektora,
color – kolor tekstu,
float – wyrównanie do lewej lub prawej przyjmując wartości left lub right,
border – obramowanie

Budując szablon objaśnię dokładnie opisane cechy wraz z ich wartościami.

Szablon strony

W sekcji <head></head> mamy już podpięty plik style.css zatem przechodzimy do strowrzenia szablonu w sekcji <body></body> dla dokumentu html.

<header>
<p>nagłówek</p>
</header>
<nav><p>nawigacja</p></nav>
<article>
<section>
<p>artykuł</p>
</section>
<aside>
<p>dodatkowe menu lub reklama ...</p>
</aside>
</article>
<footer>
<p>stopka</p>
</footer>

Jak widzicie stronę podzieliłem na header, article oraz footer. W znaczniku article umieściłem jeszcze section i aside. W sekcji można np mieścić treść strony a w aside dodatkowe elementy tj. menu czy reklama. Oczywiście to jedynie przykład i można to rozwiązać na wiele innych sposobów. Dla czytelności kodu w odpowiednich znacznikach umieściłem tekst akapitowy opisujący dany element na stronie.

W celu opisania i nadania odpowiedniego charakteruelementom należy w pliku style.css umieścić kod, który zawiera opis będący jednocześnie komentarzem css.

/** resetuję marginesy wewnętrzne i zewnętrzne. * w informatyce oznacza wszystko**/
*{margin: 0;
padding: 0;}
/**nadaję ttło dla elementu body, w tym wypadku kolor to: #f3f2f7, ale może to być dowolny kolor**/
body{background:#f3f2f7;}
/**nadaję wysokość dla nagłówka strony header 1200px, wysokość równą 250px, wyśrodkowuję za pomocą sztuczki nadając marginesowi
prawemu i lewemu wartość auto, nadaję kolor tła równy #CC230E**/
header{width: 1200px;
height: 250px;
margin: 0 auto;
background: #CC230E;}
/**miejsce na nawigację oddalam od innych elementów za pomocą wartości marginesu od góry i dołu równej 5px.
Nadaję obramowanie dolne i górne jednolite (solid) o grubości 1px i kolorze #333333**/
nav{width: 1200px;
height: 50px;
margin: 5px auto;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
}
/**article ma nadaną szerokość i został wyśrodkowany. Nadałem mu także automatycznie zmieniającą się wysokość**/
article{width: 1200px;
margin: 0 auto;
height: auto;
}
/**sekcja domyślnie będąca pojemnikiem na treść ma szerokość 900px, jest wyrównana do lewej strony,
minimalna wysokość wynosi 500px, a kolor przyjmuje wartość #EBEADF**/
section{width:900px;
float: left;
background: #EBEADF;
min-height: 500px;}
/**pojemnik aside jest wyrównany do prawej i w celu oddzielenia od pojemnika section nie ma szerokości dopełniającej 300px a jedynie 298px,
co rozdziela fizycznie oba kontenery od siebie mimo posiadania tego samego tła**/
aside{ width: 298px;
min-height: 500px;
background: #EBEADF;
float: right;}
/**footer z nowych cech posiada wyzerowanie float'ów, co jes niezbędne dla prawidłowego umiejscowienia stopki. Stąd nowość clear:boath;**/
footer{width: 1200px;
height: 300px;
margin: 0 auto;
clear: both;
background: #434343;
}

To jest bardzo podstawowy i przykładowy kod. Warto poeksperymentować z wartościami i nadać stronie własny charakter.

W celu dalszej pracy proszę o wykonanie własnego szablonu na następne zajęcia i umieszczenie go na serwerze. Jeśli jeszcze nie posiadacie dostępu do serwera proszę o kontakt lub o przyniesienie gotowego projektu na pamięci flash.


Back to: HTML5 i CSS