Jak stworzyć prosty, uniwersalny, nietabelkowy układ strony WWW?
Układ pojedynczej strony WWW może być oparty na kilku różnych rozwiązaniach. Pominę tu układy ramkowe, gdyż wg mnie wykorzystanie ramek to zupełnie inne zagadnienie – odnosi się raczej do zasad tworzenia nawigacji niż tzw. layoutu strony WWW. Układ strony WWW można zbudować wykorzystując różne sposoby. Pierwszy sposób – wciąż bardzo popularny – polega na tworzeniu szkieletu strony za pomocą tabel. Drugi i trzeci sposób opiera się na na wykorzystaniu arkuszy stylów – właściwości pozycjonowania bezwględnego oraz relatywnego. Kombinacje własności stylowych, w tym także zastosowanie własności float, prezentowano w Republice już wcześniej.
W tym artykule zaproponuję jeszcze jedno rozwiązanie, które bazuje na stylowej własności float, która – najprościej rzecz ujmując – wymusza oblewanie jednych elementów przez inne bądź to z prawej, bądź z lewej. Zazwyczaj oblewamy tekstem jakiś inny element, np. obrazek, ale własność tę można także wykorzystać do wymuszania pozycjonowania elementów blokowych. Typowym elementem blokowym jest <div>, który należy traktować jak pudełko, do którego wkładane są inne elementy. Całość więc przypomina bardzo prostą układankę kilku prostokątnych elementów:
- Blok oznaczony „1” to miejsce na nagłówek strony.
- Blok oznaczony „2” to miejsce na menu nawigacyjne.
- Blok oznaczony „3” to miejsce na treść główną strony.
- Blok oznaczony „4” to miejsce na pierwszy blok stopki, gdyż stopkę dla większej elastyczności szablonu podzielono na dwa bloki.
- Blok oznaczony „5” to miejsce na drugi blok stopki.
Ale kod HTML dla takiej układanki musi się cechować dodatkowymi własnościami: powinien być jednolity, integralny, niezmienny, a mimo to powinien umożliwić zbudowanie całkowicie różnych stron WWW, np. powinien dać możliwość manipulowania układem w taki sposób, aby składające się na stronę „klocki” można było przestawić, np:
Co więcej – należy stworzyć nie tylko różne „układanki”, ale sformatować klocki w taki sposób, aby ich kształt graficzny, kolorystyka i klimat były całkowicie odmienne:
Wszystkie modyfikacje wyglądu mają być przeprowadzane nie w kodzie HTML, ale WYŁĄCZNIE poprzez arkusz stylu. No cóż, i zrobił nam się z naszego zadania taki mały ogródek arkuszy stylu – „CSS Zen Garden” w wersji „light”. 🙂
Zatem do dzieła.
Budowa szkieletu strony
Bazowy szkielet składa się kilku kluczowych elementów <div>, osadzonych w nadrzędnych pudełkach, które pełnią rolę „taśmy klejącej”.
Największe pudełko: ma zawsze szerokość równą wielkości okna przeglądarki dzięki width: 100%. Dzięki z-index=200 wszystkie obiekty w tym bloku będą na wierzchu, ponad innymi elementami, albowiem można by w przyszłości pomyśleć o umieszczeniu niżej grafiki, która pełniłaby rolę tła strony.
HTML:
<div class="center_content" align="center"> <!-- ... --> </div>
CSS:
div.center_content {
width: 100%;
z-index: 200;
position: absolute;
}Wewnątrz opisanego wyżej bloku umieszczone są dwa kolejne bloki: dla nagłówka strony i dla pozostałej części strony:
HTML:
<div align="center"> <div class="top"> <!-- tu będzie nagłówek strony --> </div> <div class="get_width"> <!-- tu będzie "reszta" strony --> </div> </div>
CSS:
Styl dla pudełka przeznaczonego na nagłówek niech będzie na początek bardzo prosty:
div.top {
width: 700px;
background-color: red;
height: 135px;
}W tym pudełku poza tytułem strony oznaczonym znacznikiem <h1> nic innego nie musi się pojawić, a wszelkie modyfikacje wyglądu będą możliwe dzięki arkuszowi stylu.
„Reszta” to anonimowy kontener, który wyznacza wyłącznie dopuszczalną szerokość układu strony:
div.get_width {
width: 700px;
}Teraz należy zejść głębiej: w nagłówku znajdzie się tytuł strony, a poniżej (czyli w „reszcie”) zostaną ustawione kolejne dwa bloki: pierwszy pomieści menu i pole na treść główną, w drugim znajdą się obydwa bloki stopki serwisu.
HTML:
<div align="center">
<div>
<h1>Tytuł strony</h1>
</div>
<div>
<div class="content1">
<!-- Tu będzie menu i główna treść strony -->
</div>
<div class="content2">
<!-- Tu będą obydwa bloki stopki -->
<div>
</div>
</div>CSS: style dla bloku „content1” i „content2” są w zasadzie identyczne:
div.content1 {
width: 700px;
background-color: blue;
float: left;
}
div.content2 {
width: 700px;
background-color: green;
float: left;
}Dla pierwszego bloku należy ustalić kolor tła: będzie on wspólny dla menu i dla treści. Trzeba założyć, że w przypadku menu pionowego wysokość bloku menu będzie mniejsza niż wysokość bloku treści, dlatego wspólne tło pozwoli wypełnić kolorem blok menu aż do dolnej krawędzi wyznaczonej przez pole treści.
Dla drugiego bloku wspólny kolor nie jest konieczny, ale gdyby obydwa pola stopki nie miały określonego koloru tła, wtedy będą dziedziczyć kolor z bloku nadrzędnego.
Bloki „content1” i „content2” mają też ustawioną własność float – one same będą wyrównane do lewej, a cokolwiek będzie z nimi sąsiadowało, powinno je oblewać z prawej strony, jednak określona szerokość układu sprawia, że elementy sąsiednie „wylądują” poniżej.
Warto zapamiętać: opisany w tym artykule sposób tworzenia układu strony opiera się na manipulacji dwiema własnościami stylowymi: szerokością elementów i oblewaniem.
Kolejne „klocki” wstawiamy do omówionych wyżej pudełek. W „content1” znajdzie się menu. Może być proste, może być skomplikowane, ale na razie potraktuję je jak „czarną skrzynkę” bez zaglądania do środka. W „content2” będzie treść strony.
HTML:
<div align="center">
<div>
<h1>Tytuł strony</h1>
<h1>Tytuł strony</h1>
</div>
<div>
<div>
<div class="menu">
<!-- Tu będą kolejne pozycje menu -->
</div>
<div class="page_content">
<!-- Tu będzie treść strony -->
</div>
</div>
<div>
<div class="menu_foot">
<!-- Tu będzie treść stopki 1 -->
</div>
<div class="page_content_foot">
<!-- Tu będzie treść stopki 2 -->
<div>
<div>
</div>
</div>CSS: dla układu menu względem treści ważne jest określenie szerokości obu tych pól i sposobu ich oblewania:
div.page_content {
width: 510px;
float: left;
background-color: gold;
text-align: left;
}
div.menu {
width: 190px;
float: left;
}Taki zapis sprawi, że menu będzie po lewej stronie układu, ale wystarczy zmienić sposób oblewania dla elementu nadrzędnego „content1” oraz dla menu:
div.content1 {
width: 700px;
background-color: blue;
float: right;
}
div.menu {
width: 190px;
float: right;
}– by już zmienić układ strony w sposób dość stanowczy. 😉 Efekty pracy można obejrzeć na kolejnej stronie.
Kolejne eksperymenty z określaniem szerokości wybranych bloków i sposobu ich oblewania pozwalają uzyskać jeszcze inne układy strony. Bez wnikania w szczegółowe opisy po prostu zaprezentuję te możliwości na przykładach.
Łatwo się przekonać, że dla trzech poniższych ilustracji kod HTML jest identyczny i różni się jedynie nazwą przypisanego im pliku CSS z definicjami stylów. Przykłady warto powiększyć do osobnego okna, aby w je obejrzeć w pełnym wymiarze.
________________________________
Pragnę serdecznie podziękować programistom współpracującym z Republiką WWW – Grzegorzowi Pawełczukowi i Kamilowi Kluskowi, bo bez ich inspiracji i pomysłów ten artykuł by nie powstał. 🙂