Płynne szablony stron

Tworzymy stronę internetową, która nie tylko sama rozciąga się na wyznaczoną szerokość, ale ma również dwie płynne, oddzielone od siebie kolumny.

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.

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.

Etap pierwszy: Stwórz płynną stronę

{tlo_1}

Krok 1. Przygotuj nowy plik

Jeżeli korzystasz z Dreamweavera, przejdź do menu File > New. Wybierz zakładkę
„General”, a następnie w kolumnie „Category” pozycję „Basic page”. W kolumnie „Basic page” wybierz „HTML” i kliknij na przycisku „Create”. Przejdź do menu File > Save i zapisz stronę jako plik o nazwie {stala}max_width.html{/stala}. Powtórz całą procedurę, wybierając zamiast HTML-a opcję CSS w kolumnie „Basic page”.

{/tlo}
{tlo_0}

Krok 2. Załącz dokument CSS

Zapisz plik CSS jako {stala}max_width.css{/stala}. Wróć do pliku HTML i kliknij na przycisku
„Attach Style Sheet” w dolnym panelu styli Dreamweavera. Wskaż lokalizację pliku CSS, zaznacz opcję „Import” obok pozycji „Add as” oraz opcję „screen” w rozwijanym menu „Media”. Kliknij OK.

{/tlo}
{tlo_1}

Krok 3. Dodaj div

Najlepiej zrozumieć sens działania tego projektu, pracując w trybie WYSIWYG
(w edytorze Dreamweaver będzie to tryb „Design”). Zaznacz sekcję „Common” w górnym pasku narzędziowym i kliknij na opcji „Insert Div Tag”. W oknie dialogowym wpisz w polu „ID” nazwę „wrapper”, a następnie kliknij OK. Nowy div zostanie dodany do strony, co widać na powyższej ilustracji.

{/tlo}

{tlo_0}

Krok 4. Wypełnij stronę tekstem

Skasuj domyślnie wstawioną treść i wpisz lub wklej kilka akapitów dowolnego tekstu. Dreamweaver automatycznie sformatuje je w odpowiedni
sposób. Jeżeli tak się nie stanie, wybierz w panelu właściwości („Properties”) z rozwijanego menu „Format” format tekstu „Paragraph”. Zapisz zmodyfikowaną stronę.

{/tlo}
{tlo_1}

Krok 5. Nadaj styl elementowi body

Kliknij na przycisku „New CSS Rule”, znajdującym się u dołu panelu „CSS Styles”. Zaznacz w oknie dialogowym opcję „Tag” i wpisz w pole obok „body”, a następnie wybierz pozycję „{stala}max_width.css{/stala}” przy opcji „Definein”.W oknie dialogowym „CSS Rule Definition”zaznacz kategorię
„Box” i ustaw szerokość (Width) na 100%, a „Margin” i „Padding” na 0.

{/tlo}
{tlo_0}

Krok 6. Utwórz kolejny styl

Stwórz nowy styl CSS: przy pozycji „Selector Type” wybierz opcję „Advanced”
i wpisz w pole „Selector” nazwę „{stala}#wrapper{/stala}”. W oknie dialogowym „CSS Rule Definition”wybierz opcję „Background”. Za pomocą przycisku „Browse” wybierz plik block.gif (znajdziesz go na CD). Opcję „Repeat” ustaw na „no-repeat”, „Horizontal position” na „right”, a „Vertical position” na „top”. Jako kolor tła (Background color) wybierz {stala}#ff0000{/stala}.

{/tlo}{tlo_1}

Krok 7. Nadaj styl akapitom

Czas na jeszcze jedną regułę CSS, tym razem o nazwie „#wrapper p” (wpisz ją w polu „Selector”). W oknie dialogowym „CSS Rule Definition”,przejdź do kategorii „Background” i ustaw opcję „Background color” na {stala}#ffff00{/stala}.
Przy kategorii „Box” odznacz pozycję „Same for all” dla „Margin” i ustaw „Top” na 0. Kliknij OK i wróć do edycji strony.

{/tlo}{tlo_0}

Krok 8. Ręcznie dodaj nowy kod CSS

Przełącz się na edycję utworzonego wcześniej pliku CSS. Dodaj linijkę „max-width: 800px’” do stylu {stala}#wrapper{/stala} (nowy tekst powinien być wpisany przed nawiasem zamykającym „}”) oraz „max-width: 30em” do {stala}#wrapper p{/stala}. Te ustawienia określają maksymalną szerokość elementów, do których zostały przypisane. „Em” to jedna z jednostek miary wykorzystywanych
przez webdesignerów.

{/tlo}

{tlo_1}

Krok 9. Przetestuj stronę w Firefoksie

Wybierz opcję File > Save All, a następnie otwórz edytowaną stronę w Firefoksie. Nie jest to może najładniejsza strona na świecie, ale style, które wcześniej utworzyłeś, idealnie reagują w sytuacji, gdy zmienisz rozmiar okna. Zwróć uwagę na różne kolory tła dla całej strony i akapitów. Div „wrapper”
ma także zagnieżdżoną grafikę w prawym górnym rogu.

{/tlo}
{tlo_0}

Krok 10. Zmień rozmiar okna

Chwyć za róg okna Firefoksa i zmniejsz jej szerokość. Zobaczysz, że po tym, jak prawy brzeg okna najedzie na stronę, div „wrapper” zacznie się kurczyć, a wraz z nim pola z tekstem. Teraz ponownie powiększ okno przeglądarki. Zaobserwujesz, że w pewnym momencie pola z tekstem przestaną się rozszerzać, a dopiero chwilę po nich cały div „wrapper”.

{/tlo}

{tlo_1}

Krok 11. Przetestuj stronę w Internet Explorerze

Niestety żadna z wcześniejszych reakcji nie ma miejsca w przypadku testowania strony w IE 6. Jako że ta przeglądarka nie rozumie
atrybutu „max-width”, cała strona rozciąga się na pełną szerokość okna bez względu na jego rozmiary (ma to być naprawione w IE 7).

{/tlo}
{tlo_0}

Krok 12. Zmodyfikuj regułę #wrapper

Aby zmusić IE do prawidłowego zachowania, dodaj następujący tekst do reguły {stala}#wrapper:{/stala} „width: expression(document.body.client Width>800?”800px”:”auto”);”. Odpowiada on za wykrycie miejsc, gdzie dokument jest szerszy niż 800 pikseli. Gdy tak się zdarzy, szerokości diva „wrapper” jest ustalana na 800 pikseli. W przeciwnym wypadku pozostaje ona ustawiona na „auto”, dopasowując szerokość do całego dokumentu.

{/tlo}
{tlo_1}

Krok 13. Zmodyfikuj regułę #wrapperp

W przypadku reguły {stala}#wrapper p{/stala} dodaj tekst: „width: expression(
document.body.client Width>(500/12) * parselnt(document.body.currentStyle.fontSize)?”30em”:”auto”);”. To obliczenie generuje szerokość powiązaną z rozmiarem czcionki ustawionym przez użytkownika. Więcej na ten temat dowiesz się ze strony internetowej Svenda Tofte’go (http://www.svendtofte.com).

{/tlo}
{tlo_0}

Krok 14. Przetestuj ponownie stronę

Firefox, Opera i Safari ignorują hacki CSS, lecz w IE strona działa wreszcie tak, jak powinna. Zmniejsz szerokość okna przeglądarki, aby zobaczyć, jak zwężają się różne elementy. Następnie rozszerz okno z powrotem i obserwuj, jak pola z tekstem zatrzymują się po osiągnięciu zdefiniowanych szerokości.

{/tlo}

Etap drugi: Tworzenie dwukolumnowego projektu strony

{tlo_1}

Krok 1. Stwórz pierwszą kolumnę

Identycznie jak w poprzednim kroku, zacznij od stworzenia dokumentu HTML i podłączonego do niego pliku CSS. Przejdź do edycji pliku HTML i dodaj do niego diva o parametrze ID „newsColumn”. Zastąp domyślny tekst jednym dużym nagłówkiem (w edytorze Dreamweaver wykorzystaj do tego menu w panelu właściwości, nadając tekstowi format „Heading 1”), a następnie
wklej kilka akapitów dowolnego tekstu.

{/tlo}
{tlo_0}

Krok 2. Dodaj drugą kolumnę

Kliknij na przycisku „Insert Div Tag”. Z dwóch rozwijanych menu obok pozycji „Insert” wybierz opcje „After tag” oraz „{html}