Kompozycja strony: z tabelą czy bez?

(Tekst „odtworzony”, nie zachowałem wersji oryginalnej z roku 1999, choć pewne jego fragmenty odnajduję w innych tekstach publikowanych później w serwisie Republika WWW).

Parę lat temu szkolny referat mojej córki Ani przygotowany w Wordzie po prostu „przepuściliśmy” przez wersję beta programu FrontPage. Później zaglądałem jeszcze na tę stronę parę razy, modyfikując ją nieco, jednak zasadniczych zmian nie wprowadzałem. I oto zupełnie niedawno obejrzałem dzieło Ani i doszedłem do wniosku, że konieczne są tam poważne zmiany. Moje poczucie tego co dobre i ładne na stronach WWW zmieniło się jednak radykalnie przez te dwa lata.

Założenia

Przystępując do „renowacji” Aninej witryny, założyłem następujące cele:

  1. Podzielić stronę na części tak, by odwiedzający mógł wybrać do lektury jedynie to, co go zainteresuje. Wprowadzenie dodatkowych, krótszych stron pozwala zlikwidować męczący natłok informacji skoncentrowanych na jednej długiej stronie.
  2. Przygotować stronę – czołówkę, która będzie zaproszeniem i jednocześnie planem podróży po stronach. Czołówka ma zawierać jak najmniej słów, by swoją lakonicznością zaintrygować widza, zresztą na następnych stronach słów jest bardzo dużo, więc czołówka nie musi ich mieć w nadmiarze.
  3. Ujednolicić stylistycznie wszystkie strony tak, by odwiedzający miał poczucie, że cały czas jest w jednym miejscu, mimo, że sam decyduje o wyborze stron do oglądania.

Trzeci cel postanowiłem osiągnąć przez wybór jednolitej palety kolorystycznej dla wszystkich stron oraz przez zastosowanie jednolitej kompozycji.

Kompozycja stron

Większość obecnie tworzonych przeze mnie stron opatruję marginesami. Tekst lepiej się czyta, gdy jest rozłożony w węższej szpalcie. Większość tekstów, z jakimi mamy do czynienia, czytamy na kartkach o orientacji pionowej, tymczasem ekran monitora to jakby kartka ułożona w poziomie. I oto wyobraźmy sobie, że piszemy do kogoś list na kartce A4 ułożonej poziomo z bocznymi marginesami o szerokości od 1 do 3 mm? Przecież tak nie robimy!

Arkusze stylów są wyjątkowo poręcznym narzędziem, gdy chcemy zachować na stronach jednolitość stylistyczną. Definiując jednakowe dla całej witryny parametry marginesów, tekstu i czcionki, możemy centralnie manipulować olbrzymią liczbą stron bez potrzeby zmieniania kodu w każdej z osobna. Zatem najpierw należy opracować szablon kompozycji.

Schemat obok pokazuje ogólnie rozłożenie tych elementów stron, które są najważniejsze i powtarzalne w całej witrynie. Na górze, po lewej znajduje się graficzna mapa z odnośnikami do wszystkich stron witryny. Założyłem, że element ten powinien być wyróżniony, dlatego jest wysunięty poza lewy margines. Każdą stronę otwierają dwa dominujące motywy: graficzny banner, będący stylistycznym ornamentem nawiązującym do tematyki poruszanej na stronie oraz pionowo ustawiony tytuł strony (jest to nawiązanie do pomysłu jeszcze ze starej wersji). Grafika tytułu, nie wypełniając całej przestrzeni poniżej, tworzy dodatkowe światło przy prawym marginesie strony.

Decyduję się na rozwiązanie pośrednie: użycie tabeli i pewnych własności stylowych. Polega ono na zdefiniowaniu poprzez arkusz stylów marginesów strony i umieszczeniu w tabeli elementów graficznych oraz tekstu. Teraz tabela nie jest ramą dokumentu, lecz tylko kontenerem dla poszczególnych akapitów. Tabela jest prostsza i nie wymaga stosowania atrybutu width= dla komórek.

Test w przeglądarce Netscape Communicator 4.x pokazuje, że niestety tabele w NC „lekceważą” prawy margines ustalony poprzez definicję {margin-right: 13%} i przesuwają swoją prawą krawędź niemal do brzegu ekranu. Pozostaję jednak przy tym rozwiązaniu, gdyż biorąc pod uwagę różne przeglądarki – akceptujące CSS i nie – ten sposób kompozycji strony wydaje się najbardziej kompromisowy. Ostatecznie, aby zmniejszyć różnicę pomiędzy obrazem strony w MSIE i NC, prawy margines wszystkich stron witryny ustalam na 7%.

Zapraszam do obejrzenia stron Ani po gruntownej modernizacji. W rzeczywistości strony te są one nieco bardziej skomplikowane niż przedstawiony powyżej model, wszakże wszystkie odwołują się do wspólnego schematu kompozycyjnego.

Zobacz.

Scroll to Top