Płynne szablony stron

Odkąd podstawy webdesignu nie są już wiedzą tajemną, coraz więcej osób spiera się, jak powinno się tworzyć idealne layouty stron internetowych. W przeciwieństwie bowiem do innych mediów, projekt serwisu internetowego jest wyświetlany na różnych konfiguracjach i w różnych środowiskach.

Zapanowaie nad płynnym podziałem na stronie internetowej jest bardzo proste. Jeżeli projektujesz układ strony do wydruku - znasz jej rozmiar; gdy tworzysz produkcję na potrzeby telewizji - odłóżmy na bok kwestie związane z formatami PAL i NTSC - wiesz, jaki rozmiar masz do zagospodarowania.

Lecz w sieci, osoby odwiedzające twoją stronę niekoniecznie mają ustawioną tę samą rozdzielczość ekranu. Niektórzy webdesignerzy projektują strony z myślą o najpopularniejszej rozdzielczości, sztywno określając wymiary serwisu, które będą odpowiadać większości odwiedzających. Inni natomiast obstają przy założeniu, że najlepsza strona powinna rozciągać się wraz z oknem przeglądarki internetowej - są to tzw. płynne strony.

W teorii brzmi to świetnie, ale trzeba mieć świadomość, że płynne strony mają również wady. Wymagają na przykład większej elastyczności, gdy w grę wchodzi element graficzny.

Ten artykuł objaśnia dwa najczęstsze problemy występujące podczas projektowania płynnych stron. Po pierwsze, mogą one wyglądać absurdalnie na bardzo dużych monitorach w pełnym powiększeniu (23" ekran da w efekcie stronę o szerokości 2000 pikseli). Może ci się wydawać, że nikt nie ogląda stron internetowych w takich warunkach, ale takie rzeczy się zdarzają. Jeszcze większy problem sprawia nadmierne rozciągnięcie obszaru zawierającego tekst.

Większość analiz wskazuje na to, że łatwiejsze do czytania są kolumny niewielkiej szerokości. Dlatego też ograniczymy nie tylko szerokość całej strony, ale także znajdujących się na niej akapitów. Niestety przeglądarka Internet Explorer nie radzi sobie z najprostszym sposobem na wyznaczenie tych limitów, dlatego niezbędne okaże się zastosowanie sztuczki (hacka) w CSS specjalnie pod kątem IE.

Następnie przygotujemy, z wykorzystaniem CSS, wielokolumnowy projekt płynnej strony. Niektórzy webmasterzy nie radzą sobie z tym wyzwaniem, ponieważ tworzą pływające kolumny i dodają do nich dopełnienie (padding), które wychodzi na zewnątrz kolumn. W efekcie całkowita szerokość strony przekracza 100% szerokości ekranu i co jedna kolumna jest wyświetlana poniżej drugiej, zamiast obok. Dlatego też nasza metoda będzie opierać się na zagnieżdżonych divach.

Podczas pracy będziemy korzystać z Dreamwea-vera, ale równie dobrze możesz użyć innego dowolnego darmowego edytora HTML (jak np. polecanego przez nas Nvu ze strony http://www.nvu.pl).

Jak bezpiecznie radzić sobie z konfliktem na linii IE-CSS

W pierwszej części niniejszego przewodnika dodaliśmy dwie modyfikacje CSS i dwie wartości zapisane w arkuszu stylów, w celu zniwelowania błędu Internet Explorera, który ignoruje wartość "max-width". Jak już wspomnieliśmy, tego typu modyfikacje nie wpływają na sposób działania innych przeglądarek, ale sprawiają, że kod CSS staje się nieprawidłowy.

Możliwe, że chciałbyś zatem rozważyć bardziej złożone metody rozwiązania tego problemu, polegające na stworzeniu oddzielnego arkusza stylów dla IE i dodania go do strony internetowej poprzez warunkowy komentarz. Jest to wewnętrzny komentarz, rozumiany wyłącznie przez IE: możesz dzięki temu nastawić się na konkretną wersję przeglądarki Microsoftu lub wyznaczyć numer wersji, powyżej którego komentarz nie będzie obowiązywał.

Wskazówki

Szerokość a IE

Zauważyłeś pewnie, że gdy ustawisz szerokość dwóch sąsiadujących ze sobą kolumn na 50%, Internet Explorer błędnie umieści je jedna pod drugą. Dzieje się tak z powodu błędu. Zmień szerokość jednej lub obu kolumn na 49,9999%, a wszystko zadziała poprawnie.

Lorem ipsum

Jeżeli chcesz szybko zapełnić stronę (lub inny projekt graficzny)jakimśtekstem, wejdź na stronę http://www.lipsum.com. Wygenerujesz na niej tak długi tekst, jaki tylko sobie zażyczysz.