Różnice do pogodzenia
Jak projektować uniwersalne strony WWW

Urok sieci WWW polega na tym, że jest ona powszechnie dostępna i zawładnęła prawie wszystkimi dziedzinami naszego życia, a w prowadzeniu interesów stała się tak nieodzowna, jak telefon czy faks. Projektanci stron WWW marzą, żeby ich dzieło oglądały miliony internautów. Będzie to możliwe, jeśli zwrócą uwagę na różnice w interpretacji informacji przez różne komputery. Większość użytkowników sieci korzysta z Microsoft Windows, żeby więc zapewnić stronie dużą oglądalność, trzeba zatroszczyć się, by na monitorach użytkowników Windows wyglądała równie dobrze, jak na ekranie Maca. Nawet w obrębie jednego systemu istnieją spore różnice interpretacji stron między dwiema głównymi przeglądarkami: Internet Explorerem Microsoftu i Navigatorem Netscape'a.

Urok sieci WWW polega na tym, że jest ona powszechnie dostępna i zawładnęła prawie wszystkimi dziedzinami naszego życia, a w prowadzeniu interesów stała się tak nieodzowna, jak telefon czy faks. Projektanci stron WWW marzą, żeby ich dzieło oglądały miliony internautów. Będzie to możliwe, jeśli zwrócą uwagę na różnice w interpretacji informacji przez różne komputery. Większość użytkowników sieci korzysta z Microsoft Windows, żeby więc zapewnić stronie dużą oglądalność, trzeba zatroszczyć się, by na monitorach użytkowników Windows wyglądała równie dobrze, jak na ekranie Maca. Nawet w obrębie jednego systemu istnieją spore różnice interpretacji stron między dwiema głównymi przeglądarkami: Internet Explorerem Microsoftu i Navigatorem Netscape'a.

Idealna strona WWW sama dopasowuje się do wielkości okna przeglądarki, niezależnie od systemu, wielkości monitora czy rozdzielczości. Ten ideał możesz osiągnąć korzystając z tabel w HTML-u, gdzie rozmiar kolumn definiowany jest w procentach, a nie w pikselach. Tworząc elastyczne tabele, pamiętaj o następujących zasadach:

1Projektuj makiety, które dopasowują się do wielkości okna przeglądarki
Osiągniesz to podając względne szerokości komórek tabeli w procentach.
2Wykorzystaj parametr "cellpadding" aby zachować odstępy między elementami.
Szerokość ramki między komórkami ustaw na zero pikseli.
3Jeśli korzystasz z edytorów HTML typu WYSIWYG, takich jak Macromedia Dreamweaver czy Adobe GoLive, najprawdopodobniej otrzymasz w wyniku kod HTML z tabelami zdefniowanymi w pikselach. Musisz w kodzie ręcznie poprawić wartości w pikselach na wartości procentowe.

Krój na miarę systemu

Użytkownicy Macintoshy trafiają często na strony zapisane drobną czcionką. Mrużą oczy i denerwują się, a jeśli bardzo im zależy, zwiększają wielkość czcionki w preferencjach przeglądarki. Najprawdopodobniej projektanci takich bolesnych dla oczu stron nie mają pojęcia o różnicach w rozdzielczości między Macami a pecetami. Domyślną wartością w systemie Mac OS są 72 piksele na cal (ppi), gdzie piksel równy jest punktowi. Tak więc 12-punktowa czcionka ma 12 pikseli wysokości, czcionka 72-punktowa - 72 piksele (albo 1 cal) itd. W Windows domyślna rozdzielczość wynosi 96 ppi, zatem 12-punktowa czcionka ma wysokość 16 pikseli.

Arkusze stylów
 
Kody
<style TYPE="text/css">
<!--






P{font-family:
verdana, arial,
helvetica, seans-
serif;}





-->

</style>
    Jak działają?
  • Kod HTML mówi przeglądarce, by kolejne linie kodu interpretowała jako dane arkusza (CSS).
  • Starszym przeglądarkom (nie obsługującym arkuszy) każe ignorować kolejne linie kodu. Arkuszy stylów nie obsługują Internet Explorer 2 i wcześniejsze wersje oraz Netscape Navigator 3 i wcześniejsze wersje. Żadna z tych przeglądarek nie jest dziś powszechnie używana.
  • Arkusz informuje przeglądarkę, że kolejne akapity (P) mają być wyświetlone czcionką Verdana, o ile jest zainstalowana w systemie użytkownika. Jeśli nie ma Verdany, przeglądarka użyje czcionki Arial. Jeśli nie ma Ariala, tekst zostanie wyświetlony Helveticą. Jeśli nie ma żadnej z tych czcionek, przeglądarka użyje domyślnej czcionki bezszeryfowej.
  • Starszym przeglądarkom komunikuje, że mogą już przestać ignorować kod HTML.
  • Wszystkim przeglądarkom oznajmia, że nastąpił koniec definicji arkusza stylu.


Zobacz również