Jak stworzyć dobry Layout ?
To pytanie, które zadają sobie osoby przygotowujące wszelkiego rodzaju publikacje. Na początku tego artykułu poruszę podstawowe kwestie tworzenia efektownego layoutu, a następnie przedstawię kilka rozwiązań, które mogą zainteresować wielu webmasterów.
- Layout
- - to angielskie słowo, które w jednym zdaniu można wytłumaczyć jako
szata graficzna publikacji, w skład której wchodzi rozplanowanie elementów, krój pisma,
kolorystyka, układ nagłówka i stopki.
W przypadku strony internetowej dobry layout powinien charakteryzować się:- przejrzystą formą,
- czytelnym tekstem,
- intuicyjną obsługą,
- szybkim załadowaniem,
- łatwością wprowadzania zmian.
- Przejrzystość formy
- - jest dobrze rozpoznanym tematem, którym od lat zajmują się działy DTP i
reklamy popularnych czasopism. Jeśli tworzysz stronę firmową, powinieneś:
- wyeksponować logo firmy,
- umieść w widocznym miejscu slogan identyfikujący firmę,
- wyróżnić tytuły i nagłówki,
- zrezygnować z elementów odwracających uwagę od treści.
- Czytelność tekstu
- - to najistotniejszy parametr dobrego layoutu. Aby tekst był czytelny
należy pamiętać o następujących zasadach:
- dobierz odpowiedni do medium publikacji krój i rozmiar czcionki,
- zastosuj kontrastowy kolor tekstu w stosunku do tła publikacji,
- tło umieszczone pod tekstem powinno być jednolitego koloru,
- linie tekstu nie powinny być zbyt długie.
- Intuicyjna obsługa
- - jest kluczowym elementem strony internetowej. Jeśli chcesz aby odwiedzający zapoznał się z informacjami zamieszczonymi na witrynie nawigacja powinna być przemyślana oraz powinna się dobrze komponować z szatą graficzną.
- Szybkość załadowania
- - nikt nie lubi czekać na pobierającą się stronę. Jeśli zastosujesz niezoptymalizowaną grafikę możesz zniweczyć cały trud włożony w przygotowanie witryny. Sprawdź jak dużo kB zajmują twoje grafiki i spróbuj je zoptymalizować dobierając odpowiednią ilość kolorów, wielkość oraz format Obecnie najlepszymi formatami graficznymi do zastosowań internetowych są JPG, PNG, GIF.
- Łatwość wprowadzania zmian
- - to cecha dobrze zaprojektowanej wewnętrznej struktury strony internetowej. Dobrą praktyką jest rozdzielenie warstwy treści umieszczaną w HTML od warstwy prezentacji, którą umieszczamy w oddzielnym pliku CSS. Także wydzielenie ze strony nagłówka oraz stopki do osobnych plików, które później dołączamy za pomocą języków skryptowych do strony zawierającej treść pozwala łatwiej modyfikować zawartość witryny internetowej.
Trochę praktyki
W myśli starej zasady mówiącej, iż jeden dobry przykład zastępuje setki słów, przedstawię przykład, który pomoże zrozumieć zasadę budowania layoutów w oparciu o technikę zwaną box-model.
Wiele osób tworzących strony internetowe, które przyzwyczaiły się do rozplanowania elementów w oparciu o komórki tabeli ma problem ze zrobieniem pierwszej strony wykorzystującej elementy DIV i style CSS. Winny temu jest sposób myślenia o stronie internetowej pociętej na prostokątne kawałki niczym tabliczka czekolady.
Chcąc zbudować poprawną witrynę opartą o koncepcję box-model należy odrzucić taki sposób myślenia i zastąpić go myśleniem blokowym. Bloki to elementy, które występują na stronie internetowej, w szczególności nagłówek, menu nawigacyjne, stopka. Elementy te możemy dowolnie przestawiać tworząc w ten sposób układ strony www. Poniższy przykład przedstawia szablon witryny składającej się z 8 bloków, który może posłużyć jako szablon do zbudowana skomplikowanej strony internetowej.
<html> ... <body> <div id="container"> <div id="menu">#menu</div> <div id="submenu">#submenu</div> <div id="header">#header</div> <div id="subheader">#subheader</div> <div id="left">#left</div> <div id="middle">#middle</div> <div id="right">#right</div> <div id="footer">#footer</div> </div> </body> </html>
W praktyce często spotyka się dodatkowy blok #content, który jest nadrzędny względem bloków #left, #middle, #right, jednak dla uzyskania pełnej swobody ustawiania bloków celowo zastosowałem układ liniowy wewnątrz bloku #container.
Zaletą dobrze zaprojektowanej witryny opartej o box-model jest oddzielenie warstwy danych przechowywanej w strukturze (X)HTML od warstwy prezentacji umieszczonej w stylach CSS. Przedstawiona powyżej struktura XHTML nie zawiera informacji o sposobie prezentacji dzięki czemu jest przejrzysta, prosta w zrozumieniu i łatwa w modyfikacji.
Triki CSS
Ze względu, iż nie wszystkie przeglądarki równie dobrze interpretują standardy, opracowane przez organizacje W3C, należy poznać parę trików, które pomogą nam uzyskać ten sam efekt wizualny strony internetowej w popularnych przeglądarkach.
Największą niekompatybilnością i ignorowaniem standardów cechuje się Internet Explorer (w trybie quirks-mode) i to głównie z myślą o tej przeglądarce stosuje się tak zwane hack'i.
Hack 1
width: 200px; /* IE */ min-width: 250px;
Powyższy hack stosuje się, gdy szerokość bloku dla IE ma być mniejsza niż dla przeglądarek, które poprawnie obsługują style CSS.
Hack 2
width: 200px !important; width: 250px; /* IE */
Ten hack umożliwia ustawienie dla IE większej szerokości bloku niż dla przeglądarek, które poprawnie obsługują style CSS.
Hack 3
height: auto !important; height: 300px; /* IE */ min-height: 300px;
Taka konstrukcja zapewnia elementowi minimalną wysokość oraz automatyczną zmianę wysokości gdy danych wewnątrz bloku jest więcej.
Hack 4
float: left; width: 200px; display: inline;
Nadanie atrybutu float czyniącego element "pływającym" powinno być powiązane z podaniem szerokości bloku oraz ze sposobem jego wyświetlania. Ustawienie display: inline zamiast display: block zapewnia, że margin-left lub margin-right będzie poprawnie interpretowane przez IE.
Layout-y
Poniżej znajduje się 5 przykładów prezentujących jak łatwo utworzyć warstwę prezentacji do podanego XHTML'a.
Przykład 1
Przykład pierwszy demonstruje layout w oparciu o jaki została zbudowana nasza firmowa strona www. Skrócony sposób utworzenia takiego układu można opisać następującymi krokami:
- rozciągnij blok #header na całą szerokość bloku nadrzędnego,
- bloki #left oraz #middle ustaw jako pływające do lewej,
- bloki #right oraz #subheader ustaw jako pływające do prawej,
- bloki #menu i #submenu ustaw w pozycji bezwzględnej.
- blok #footer rozciągnij na całą szerokość oraz ustaw clear
Przykład 2
Ten przykład demonstruje jak prosto można utworzyć lustrzane odbicie pierwszego przykładu. Skrócony sposób utworzenia takiego układu można opisać następującymi krokami:
- rozciągnij blok #header na całą szerokość bloku nadrzędnego,
- bloki #left oraz #middle ustaw jako pływające do prawej,
- bloki #right oraz #subheader ustaw jako pływające do lewej,
- bloki #menu i #submenu ustaw w pozycji bezwzględnej.
- blok #footer rozciągnij na całą szerokość oraz ustaw clear
Przykład 3
Przykład 3 powstał w oparciu o drobną modyfikację poprzedniego układu. Widoczną różnicę uzyskujemy zwężając blok #subheader, którego następstwem jest przesunięcie się bloku #middle w górę. Blok #middle obniżamy poprzez margin-top o wysokośc jaką potrzebujemy na #submenu.
Przykład 4
Przykład 4 wymaga zastosowania tricku aby był poprawnie wyświetlany w IE. Trik polega na obniżeniu #subheader-a o jego wysokość dzięki czemu jest widoczny. Blokowi #left należy ustawić atrybut clear, aby nie wskoczył w miejsce #menu.
Przykład 5
Przykład 5 pozostawiam do samodzielnego przeanalizowania czytelnikom. Zachęcam również do zbudowania własnych layoutów w oparciu o powyższą strukturę (X)HTML.
Wszystkie firmy lub osoby, które budują swoją stronę i chciałyby posiadać profesjonalnie przygotowany layout zapraszamy do skorzystania z naszych usług ekspresowego kodowania xhtml/css.
Do budowy stron został wykorzystany edytor tekstu FOX Edit mojego autorstwa. Polecam go uwadze wszystkim tworzącym strony internetowe.
autor: Marcin Lisok
data: 2005-01-30