UWAGA: Strona zawiera materiały archiwalne. Większość artykułów dotyczy Joomla! 1.0
Start arrow Szablony arrow Szablon arrow Modelowanie układu strony
Modelowanie układu strony Drukuj Email
Formatowanie układu stron za pomocą CSS staje się nie tylko zalecanym, ale co raz częściej realizowanym standardem. CSS dostarcza narzędzi, pozwalających sprostać wszystkim wyzwaniom każdego projektu.

Zasady tworzenia układów stron

Jak we wszystkich sztukach graficznych, tak w projektowaniu aplikacji dla Internetu układ służy jednemu celowi: zorganizowaniu zawartości w efektywny sposób, to znaczy:

  • odpowiedni do odczytującego medium (nie tylko przeglądarki!),
  • dostosowany do treści,
  • czytelny dla odbiorców,

Optymalny układ elementów powinien zapewniać:

  • łatwość obsługi - funkcjonalny interfejs użytkownika,
  • przegląd zawartości - podkreślać wagę publikowanych elementów,
  • użyteczność - prezentować ważne treści przed treściami mniejszej wagi, udostępnić mechanizm wyszukujący, dostarczać spójnego systemu nawigacji,

Prostokątne myślenie

Decyzje o układzie treści na stronie internetowej sprowadzają się do ustalenia podziału prostokątnego okna przeglądarki na mniejsze prostokątne obszary uporządkowane w kolumnach i wierszach, a następnie umieszczaniu w nich poszczególnych elementów.

CSS pozwala modelować układy stron swobodnie. Wbrew pozorom, nie narzuca prostokątnego myślenia. Joomla! i Mambo również! Myślenie prostokątami wymusza okno przeglądarki i związany z nim tzw. model pudełkowy. Stworzony także i po to, by uwolnić projektantów od porządkowania zawartości w tabelach. Co ciekawe, stworzony zanim jeszcze modelowanie ukladu stron w tabelach zawładnęło Internetem.

Podział strony na kolumny i wiersze, na prostokątne obszary spełnia jedynie funkcje pomocnicze. Jeśli potraktować je tylko jako pomocniczą siatkę, łatwiej będzie dostrzec miejsce na bogactwo kształtów.

Podstawowe metody

Bez organizującej układ strony siatki prostokątów obejść się raczej nie sposób. Istnieją dwie podstawowe metody tworzenia układów stron składających się z kolumn:

  • oparta na pozycjonowaniu bezwzględnym,
  • oparta na pozycjonowaniu względnym.

Obie metody mają swe zalety i wady. Obie dają projektantowi niemal pełną kontolę nad rozmieszczeniem elementów strony.

Łatwiejszą jest metoda pozycjonowania bezwzględnego. Problem pojawia się dopiero wtedy, gdy chcemy umieścić poniżej kolumn stopkę. W Joomla, jak i w innych CMS-ach, nie da się przewidzieć wysokości kolumn. A to niezbędny warunek, by określić położenie stopki, jeśli korzystamy z pozycjonowania bezwzględnego.

Trudniejszą, ale i zapewniającą większą elastyczność, jest metoda pozycjonowania względnego, wykorzystująca elementy pływające.

Obie metody pozwalają projektować różne rodzaje układów.

Typy układów

Najogólniej można wyróżnić cztery typy układów, wyodrębniane ze względu na różnice związane z rozmiarami elementów strony:

  • układ ustalony albo ograniczony, lodowy [ang. fixed],
  • układ płynny albo dynamiczny, pełnoekranowy [ang. liquid], ze zmienną szerokością kolumn dostosowującą się do okna przeglądarki,
  • układ mieszany, ze stałą szerokością kolumn bocznych i płynną kolumny z główną zawartością.
  • elastyczny [ang. flexible lub elastic] układ skalowany.

Każdy z powyższych typów pociąga za sobą pewne problemy i… jest rónocześnie próbą rozwiązania pewnych problemów. Rozważymy je w kolejnych projektach. Nie będziemy ich więc tu wyszczególniać. Poza jednym.

Kolumny, stopka i Święty Graal

Idealne rozwiązanie dla układu z nagłówkiem i stopką opartego na kilku kolumnach porządkujących elementy treści zakłada, że stopka winna przylegać do dolnych brzegów kolumn umieszczonych w centralnej części strony.

Jeśli wysokość kolumn jest znana, można bezproblemowo skorzystać z walorów pozycjonowania absolutnego. Niestety. W Joomla! i Mambo, podobnie jak i w innych CMS-ach, wysokości kolumn nie jesteśmy w stanie przewidzieć. Ich zawartość jest bowiem generowana dynamicznie.

Poszukiwanie idealnego rozwiązania wielokolumnowego układu ze stopką stało się swoistą pasją projektantów. Symbolem idei jest legendarny bezcenny kielich: Holy Grail - Święty Graal, którego w misji powierzonej przez samego Pana Boga poszukiwali bezskutecznie Rycerze Okrągłego Stołu. Nikt do dziś zresztą nie wie, czym Święty Graal jest. Podobnie chyba, jak nikt naprawdę nie wie, jaki układ strony byłby idealny.

Spośród rozlicznych opracowań koniecznie przejrzyj przynajmniej poniższe:

Więcej adresów stron poświęconych problemom ogólnym, prezentacjom układów 3-kolumnowych, a także z narzędziami wspierającymi projektowanie układów wielokolumnowych znajdziesz w naszym katalogu WWW.

Znajdziesz tam również odnośniki do ogrodu oświecenia projektantów stron WWW. Koniecznie dodaj je do swoich zakładek:


Uwagi, źródła

Jeżeli masz sugestie odnośnie treści lub chcesz zgłosić poprawki do tego rozdziału, skomentuj go albo umieść wiadomość na forum: Dokumentacja - Propozycje, zmiany, poprawki

Dziękujemy!

Stefan Wajda, Zespół Dokumentacji PCJ

 
« poprzedni artykuł   następny artykuł »