Ocena użytkowników: 5 / 5

Gwiazdka aktywnaGwiazdka aktywnaGwiazdka aktywnaGwiazdka aktywnaGwiazdka aktywna
 

Obecnie, każdy kto chce zabrać się za projektowanie własnej strony musi poznać kaskadowe arkusze stylów (CSS). W artykule przedstawimy zaprojektowanie jednego z bardziej popularnych szkieletów stron.

 

Przykład 1. Szkielet strony

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Przykład css</title>
<style>
div { border: 1px solid #333233; }
#kontener {width: 900px; margin: auto; border: 0px; min-height: 200px; }
#baner_admin {margin-top: 10px; border: 1px; height: 200px; }
#pasek_poziomy_admin {margin-top: 2px; padding: 5px; text-align: left; }
#zawartosc {width: 900px; margin-top: 2px; padding: 0px; min-height: 200px; float: left; }
#lewa_strona {min-height: 100px; width: 180px; padding: 1px; float: left; }
#inf_admin {width: 175px; margin: auto;margin-top: 5px; padding: 1px; min-height: 100px; }
#prawa_strona { float: right; min-height: 259px; padding: 1px; width: 710px; }
</style>
</head>
<body>
<div id="kontener">
<div id="baner_admin">baner</div>
<div id="pasek_poziomy_admin">
menu poziome
</div>
<div id="zawartosc">
<div id="lewa_strona">
<div id="inf_admin">
pole administratora
</div>
</div>
<div id="prawa_strona">informacje</div>
</div>
<div>Stopka</div>
</div>
</body>
</html>

 

Powyższy przykład oparto na elementach div, umieszczono w nim identyfikatory kontener, baner_admin, pasek_poziomy_admin, zawartosc, lewa_strona, inf_admin, prawa_strona. W <body> zostały umieszczone elementy div z identyfikatorami, dzięki czemu strona nabrała oczekiwanego kształtu.

Pierwszy identyfikator kontener ustawia element na szerokość 900 pikseli. Dzięki ustawieniu margin na auto uzyskano wyśrodkowanie całego przykładu. Właściwości border ustawiają krawędzie na 0 co powoduje brak ich widoczności w przeglądarce. Ostatnia wartość ustawia minimalną wysokość kontenera na 200 pikseli.

Identyfikator baner_admin ustawia górny margines (margin-top) na 10 pikseli, wszystkie krawędzie na 1 piksel i wysokość na 200 pikseli. Dzięki temu nawet bez zwartości zachowany zostanie taki sam rozmiar.

Identyfikator pasek_poziomy_admin ustawia margines górny na 2 piksele. Za pomocą skróconego sposobu (padding) wszystkie odstępy ustawione są na 5 pikseli, wyrównanie tekstu do lewej strony osiągnięto dzięki właściwości (text-align).

 

Szkielet strony

Rys. 1. Wygląd strony w przeglądarce Internet Explorer

 

Identyfikator zawartosc odpowiada za środkową część strony o szerokość 900 pikseli, marginesie górnym 2 piksele. Odstępy niewidoczne 0, minimalną wysokość na 200 pikseli a obiekt pływający do lewej strony. Do tego kontenera przypisane są jeszcze identyfikatory lewa_strona (posiadający inf_admin) i prawa_strona odpowiadający za wyświetlanie w przyszłości wszystkich informacji w projekcie.

Na samym dole, poza identyfikatorem zawartosc znajduje się div z tekstem „Stopka”, gdzie pojawia się informacja o firmie lub autorze. Wygląd ogólnej strony przedstawia rys. 1.

Dzięki css stało się możliwe przebudowywanie nawet najbardziej rozbudowanych projektów w ciągu kilku godzin. Nie można zapominać o komentarzach, dzięki nim nawet za kilka miesięcy pliki css będą czytelne. Podstawy kaskadowych arkuszy stylów są dobrze opisane w wielu książkach wydawnictwa helion poświęconej tej tematyce. Walidację pliku CSS można przeprowadzić na stronie http://jigsaw.w3.org/css-validator/ (rys. 2.). Dzięki tworzeniu stron internetowych zgodnie z W3C jest szansa znaleźć stronę na wyższej pozycji w wyszukiwarkach internetowych.

 

 

Strona organizacji W3C

Rys. 2. Strona do walidacji arkusza stylów

 

Wybrane książki:

Książki Helion