Część III. Zaawansowane formatowanie dokumentu

Rozdział 8. Definiowanie układu strony za pomocą tabel

Twoje życie projektanta i twórcy stron WWW stanie się dużo prostsze, gdy przy definiowaniu układu strony nauczysz się korzystać z tabel. W początkach języka HTML tabele zostały przewidziane do pełnienia roli, hm..., tabel. Stosowano je do prezentowania w sposób uporządkowany danych statystycznych lub innego rodzaju danych. W rzeczywistości wiele narzędzi stosowanych obecnie przy tworzeniu stron WWW zostało stworzonych przez środowiska naukowe w celu usprawnienia wymiany danych naukowych. Niewątpliwie tabele należą do tej kategorii.

Gdy pojawili się projektanci stron WWW spoza świata nauki i zaczęli tworzyć interesujące oraz zabawne strony, które nie miały wiele wspólnego z mikrobami, konstelacjami czy przewidywaniem pogody, uznali tabele za poręczne narzędzie do umieszczania ilustracji, fotografii i tekstu. W ten sposób strona WWW zaczęła wyglądać równie dobrze jak strona z kolorowego magazynu. No, prawie tak samo. Pomimo wszystkich swoich zalet, tabele nadal nie pozwalają na tak precyzyjne pozycjonowanie elementów jak narzędzia programów Adobe PageMaker czy Quark Xpress. Aby uzyskać ten stopień precyzji, musisz sięgnąć po kaskadowe arkusze stylów (CSS). Ponieważ nie są one powszechnie obsługiwane, warto jednak poświęcić chwilę czasu i nauczyć się projektowania przy pomocy tabel. Kaskadowym arkuszom stylów poświęcony jest natomiast rozdział 12., „Korzystanie z kaskadowych arkuszy stylów”.

Aby zobaczyć tabele od strony kuchni, przyjrzyj się postaci źródłowej niektórych witryn, na przykład www.cnn.com. Zwróć uwagę, że każda porcja informacji zawarta jest w osobnej komórce tabeli. Małe tabele są zagnieżdżane w większych, a te z kolei są zagnieżdżone w jednej ogromnej, jak baby w rosyjskiej lalce-babuszce.

Prześledzenie wszystkich tych tabel może być trudne, dlatego wielu projektantów stron WWW korzysta z wysokiej klasy wielofunkcyjnych edytorów takich jak Dreamweaver. W tym rozdziale poznasz narzędzia stosowane przy projektowaniu z użyciem tabel.

Oto szczegółowa lista tematów:

q       Wstawianie tabel

q       Umieszczanie w tabelach danych i stosowanie do nich wyrównania

q       Wyrównywanie tabel i definiowanie obramowań

q       Stosowanie kolorów do tabel i obramowań

q       Kadrowanie obrazów za pomocą programu Fireworks

q       Widok układu strony

Wstawianie tabel

W tym punkcie omówmy definiowanie układu strony przy pomocy tabel wstawianych z poziomu okna dialogowego Insert Table. Przeczytaj także podrozdział „Widok układu strony”, na końcu rozdziału, aby poznać nowy, alternatywny sposób projektowania z użyciem tabel.

Aby wstawić tabelę, wybierz w menu Insert pozycję Table. Możesz także skorzystać z ikony wstawiania tabeli (Insert Table) na palecie obiektów.

Rysunek 8.1 prezentuje okno dialogowe Insert Table. Wypełnij jego pola, aby zdefiniować tabelę. Funkcje ustawień okna dialogowego Insert Table opisuje poniższa lista.

q       Rows – określa liczbę wierszy tabeli.

q       Columns – określa liczbę kolumn tabeli.

q       Width – definiuje szerokość tabeli. Rozwiń listę obok tego pola i wybierz sposób określania szerokości: w pikselach lub w procentach, względem szerokości okna przeglądarki.

q       Border – to ustawienie pozwala zdefiniować obramowanie tabeli. Wartość 0 jest równoważna brakowi obramowania. Pamiętaj, że przeglądarki różnie wyświetlają obramowania. O ile Netscape wyświetli szerokie, trójwymiarowe obramowanie, to Internet Explorer delikatne i cieniowane. Sprawdź wygląd swojej strony w różnych przeglądarkach, aby zobaczyć jak wyglądają tabele.

q       Cell Padding – podaj wartość, w pikselach, określającą odstęp między zawartością komórki tabeli a krawędzią komórki.

q       Cell Spacing – podaj wartość, w pikselach, określającą odstęp między komórkami tabeli (patrz rysunek 8.2).

Piksele czy procenty?

Cele witryny sieciowej powinny być jasno nakreślone już w fazie projektowania. Na przykład musisz podjąć decyzję dotyczącą sposobu określania szerokości tabel – w pikselach czy w procentach szerokości okna przeglądarki.

Jeśli tabela ma mieć stałą szerokość, powiedzmy 500 pikseli, oczywiste jest, że należy szerokość zdefiniować w pikselach. Jeśli wolisz, aby tabela w sposób płynny dostosowywała się do zmian rozmiarów okna przeglądarki i do wielkości ekranu, rozważ drugą z możliwości. Rysunek 8.3 porównuje oba typy tabel. Jeśli decydujesz się na tabele definiowane względem szerokości okna, pamiętaj, że nie musisz stosować wartości 100%. Może to być wartość dowolna. Jeśli na przykład chcesz zająć tylko 80% szerokości okna przeglądarki, zaznacz tabelę i wpisz wartość 80% w polu W inspektora Property (pamiętaj, aby wybrać z listy obok tego pola pozycję %). Jeśli ma to być tylko 20 czy 50%, wpisz takie wartości.

Wybór między tabelami definiowanymi w procentach szerokości okna i w pikselach nie jest taki oczywisty. Abyś wiedział na jakiej podstawie go dokonać, najpierw poznaj zalety obu technik.

Tabele definiowane w procentach szerokości okna są wspaniałe bo:

q       Pozwalają wykorzystać dodatkowe miejsce na monitorach o większej rozdzielczości.

q       Można zarezerwować określony obszar na te elementy strony, których charakter jest bardziej płynny – na przykład na kolumny tekstu, których rozmiar nie musi być precyzyjnie określony.

q       Nie ma tu konieczności definiowania szerokości komórek tabeli, a więc tabele są mniej pracochłonne.

q       Prawdopodobieństwo, że pewne elementy strony nie zmieszczą się w oknie przeglądarki, jest tu minimalne, bowiem tabela zostanie dopasowana do okna przez przeglądarkę.

Tabele definiowane w pikselach są wspaniałe bo:

q       Można konkretnie zdefiniować szerokość określonego obszaru okna przeglądarki, dzięki czemu umieszczona tam zawartość będzie się prezentować tak samo we wszystkich przeglądarkach.

q       Można zdefiniować komórki o wymiarach dokładnie dopasowanych do wymiarów obrazu, który jest w nich umieszczany. W ten sposób nie ma problemu zmian rozmiarów obrazu.

q       Kontrolując szerokość komórki tabeli stosowanej jako zasobnik, można zapobiec pojawianiu się niepożądanych pustych obszarów oraz znikaniu elementów strony.

Czasami najlepszym rozwiązaniem jest połączenie obu typów tabel i stosowanie w zależności od potrzeb raz tabeli definiowanej względem szerokości okna przeglądarki, a innym razem określanej w pikselach. Tabele o szerokości równej 100% okna przeglądarki mogą przechowywać całą zawartość Twojej strony WWW, a poszczególne elementy, takie jak obszary zarezerwowane na obrazy i tekst, można umieszczać w mniejszych tabelach zdefiniowanych w pikselach.

Początek ramki

Podpowiedzi dotyczące tabel

Aby dopasować wymiary już istniejących tabel, zaznacz tabelę klikając jej zewnętrzną krawędź (wymaga to pewnego sprytu, ale popróbuj).

Najlepszą chyba techniką zaznaczania tabel jest zaznaczanie poprzez selektor znaczników, z lewej strony paska stanu. Umieść punkt wstawiania w tabeli, którą chcesz zaznaczyć i kliknij znacznik <TABLE>. Zaznaczona tabela zostanie obwiedziona czarną linią. Skorzystaj z pól H i W inspektora Property (Ctrl+F3), aby zmienić rozmiary tabeli lub sposób ich definiowania.

Aby po usunięciu lub zmianie zawartości przywrócić komórce tabeli jej domyślne rozmiary, umieść punkt wstawiania na zewnątrz tabeli. Jest to niezbędne, ale tabela została odświeżona. Jeśli tabela jest bardzo duża, czasami może być konieczne skorzystanie z pasków przewijania i przewinięcie okna dokumentu programu Dreamweaver w celu znalezienia obszaru spoza tabeli.

Jeszcze jedna rada. Aby przenieść punkt wstawiania z tabeli poza nią, zaznacz tabelę i naciśnij klawisz ze strzałką. Punkt wstawiania pojawi się na zewnątrz tabeli i przyjmie postać pulsującej linii o wysokości tabeli, nawet jeśli jest ona bardzo długa (jeśli teraz wprowadzisz jakąś zawartość, pojawi się ona już poza tabelą). Naciśnij klawisz Enter, aby przenieść punkt wstawiania pod tabelę.

Koniec ramki

Wprowadzanie danych do tabeli

Aby umieścić w tabeli dane, choćby takie jak obraz, sekwencja wideo programu Flash lub inny plik multimedialny, kliknij w komórce, rozwiń menu Insert i wybierz odpowiednią pozycję. Możesz także skorzystać z propozycji palety obiektów. Aby wstawić do tabeli tekst, skopiuj go do Schowka i wklej w komórce lub wpisz bezpośrednio. Klawisz Tab pomoże Ci przemieszczać się między komórkami.

Pola Vert i Horz inspektora Property (Ctrl+F3) pozwalają wyrównać dane w komórce. Jest to zalecany sposób stosowania wyrównania. Unikaj, o ile to możliwe, korzystania z atrybutu Align, także dostępnego w inspektorze Property (pola Vert i Horz odnoszą się do komórki tabeli; z kolei lista Align pojawia się, gdy zaznaczysz umieszczony w tabeli obiekt – przypis tłum.).

Stosuj wyrównanie natychmiast po wstawieniu danych. Jeśli stanie się to Twoim zwyczajem, unikniesz problemów w późniejszym etapie prac. Jeśli nie zastosujesz wyrównania, wyrównanie domyślne może przysporzyć kłopotów.

Aby przesunąć dane z jednej komórki do drugiej, zaznacz zawartość komórki i przeciągnij myszką w nowe ulokowanie.

Początek ramki

Podpowiedź

Jeżeli w oknie przeglądarki układ tabeli nie jest taki jak sobie życzyłeś, spróbuj poprawić go stosując następującą procedurę.

Umieść zawartość całej strony w Schowku wycinając ją (poleceniem Cut). Na pustej stronie umieść tabelę zbudowaną z jednego wiersza i jednej kolumny. Zaznacz tabelę i zastosuj do niej wyrównanie do lewego marginesu. Kliknij w komórce i korzystając z ustawień inspektora Property określ sposób wyrównania zawartości (której nadal nie wklejasz jeszcze) – do lewej krawędzi w poziomie (z listy Horz wybierz Left) i do górnej w pionie (z listy Vert wybierz Top). Określ szerokość tabeli w pikselach lub w procentach. Teraz wklej zawartość Schowka do nowej tabeli.

Zdefiniowana tabela pełni dla zawartości strony rolę zasobnika. Ponieważ zastosowałeś do zasobnika wyrównanie do lewego marginesu, zawartość strony także będzie wyrównana w ten sam sposób. Możesz także wycentrować tabelę lub zastosować wyrównanie do prawego marginesu.

Koniec ramki

Wyrównywanie tabel i definiowanie obramowań

Po wstawieniu tabel, musisz je wyrównać. W tym rozdziale nauczyłeś się już stosować wyrównanie do zawartości komórek tabeli, teraz czas nauczyć się wyrównywać same tabele.

Kluczem do sukcesu jest jasne określenie własnych zamierzeń odnośnie układu strony. Pomocne może być naszkicowanie sobie układu lub wykorzystanie obrazu jako „kalki” projektowanej strony WWW (opcja Tacing Image jest dostępna w oknie dialogowym Page Properties otwieranym z poziomu menu Modify).

Aby wyrównać tabelę, zaznacz ją klikając jej krawędź lub korzystając z selektora znaczników na pasku stanu. Jeśli tabela zostanie obwiedziona czarną linią, oznacza to, że jest zaznaczona. Wybierz teraz z listy Align inspektora Property sposób wyrównania tabeli. Jeśli zastosujesz wyrównanie do prawej (right) lub lewej (left), zawartość strony umieszczona poza tabelą ułoży się wokół niej.

Obramowanie tabeli

Jeśli chcesz, możesz zdefiniować obramowanie tabeli, przypisując mu określoną wartość w pikselach. Obramowanie tabeli bardzo przypomina obramowanie obrazu, o czym mówiliśmy w rozdziale 6., „Praca z obrazami”.

Za pomocą obramowania możesz wyróżnić niektóre komórki tabeli, dzięki czemu będą one lepiej widoczne na kolorowym tle, a ich zawartość będzie się bardziej rzucać w oczy. Rysunek 8.4 prezentuje tabelę, do której zastosowano obramowanie o szerokości 4 pikseli (ponadto, do obramowania zastosowano czarny kolor, zmieniono też rozmiary komórek dopasowując je do umieszczonego w lewej kolumnie obrazu prezentującego przejście tonalne).

Ćwiczenie 8.1. Obłamywanie tekstu wokół obrazu

Przy projektowaniu stron WWW często pojawia się pytanie, jak obłamać tekst wokół obrazu. Obłamywanie tekstu wokół obiektu to technika pozwalająca zaoszczędzić cenne miejsce, a efekty jej zastosowania prezentują się bardzo profesjonalnie – oczywiście o ile postępowanie było prawidłowe. W tym ćwiczeniu korzystać będziemy z pliku SITEOFDAY.HTML z foldera Wrapping na dysku CD dołączonym do książki. Kolejne etapy procedury obłamywania tekstu wokół obrazu WYESONG.GIF (plik ten także znajduje się w tym samym folderze) pozwolą Ci przećwiczyć metody definiowania bezwzględnych (w pikselach) i względnych (w procentach) szerokości tabel oraz wyrównywania tabeli i zawartości jej komórek przy pomocy inspektora Property. Nasz plik testowy zaprezentowany jest na rysunku 8.5 – w tym przypadku zastosowano obramowanie o szerokości jednego piksela.

1. Otwórz plik SITEOFDAY.HTML w oknie programu Dreamweaver. Umieść punkt wstawiania w komórce tabeli i zaznacz tabelę klikając znacznik <TABLE> na pasku stanu. Wokół zaznaczonej tabeli pojawi się czarna obramowanie z uchwytami.
2. Otwórz inspektora Property (Ctrl+F3) i w polu W (width – szerokość) zastąp wartość 100% wartością 75%. Sprawdź, czy z listy obok pola W wybrano pozycję %. Po zmianie względnej szerokości tabeli ze 100 % na 75%, tabela zwęzi się, wypełniając jedynie 75% szerokości okna.
3. Sprawdź czy tabela jest nadal zaznaczona i rozwiń listę Align w inspektorze Property. Wybierz z niej pozycję Center. Tabela przesunie się na środek ekranu.
4. Do wyrównanej w ten sposób tabeli wstawimy teraz mniejszą tabelę. Umieścimy ją w obszarze tekstu i wkleimy do niej obraz. Kliknij w komórce tabeli, umieszczając punkt wstawiania na samym początku tekstu.
5. Wybierz w menu Insert pozycję Table. W oknie dialogowym Insert Table zdefiniuj tabelę o jednym wierszu i jednej kolumnie i zdefiniuj jej szerokość w pikselach (a więc nie w procentach) podając wartość 220. W pola Border, Cell Padding i Cell Spacing wpisz wartości 0. Kliknij OK, aby wstawić tabelę do dokumentu.
6. Tabela pojawi się nad tekstem. Skoryguj to stosując do zaznaczonej tabeli wyrównanie do lewego marginesu (pozycja Left z listy Align inspektora Property). Dzięki temu tekst obłamie się wokół tabeli.
7. Teraz wstaw do tabeli o szerokości zdefiniowanej w pikselach obraz. Umieść punkt wstawiania w komórce i wybierz pozycję Image z menu Insert. Znajdź na dysku CD plik o nazwie WYESONG.GIF i naciśnij przycisk Select, aby obraz pojawił się w dokumencie.
8. Jeśli tekst nie oblewa obrazu, kliknij przed nagłówkiem wyesong.com i usuń klawiszem Del (lub Backspace) dodatkowe odstępy, które odsuwają tekst od tabeli. Wprowadź miękkie łamanie wiersza (Shift+Enter), aby przesunąć tekst niżej.
9. Zastosuj do umieszczonego w komórce tabeli obrazu wyrównanie. Jednokrotnym kliknięciem zaznacz obraz. Naciśnij następnie klawisz ze strzałką w prawo, aby w komórce pojawił się punkt wstawiania. W inspektorze Property wybierz z listy Horz pozycję Center, a listy Vert pozycję Top. Obraz przemieści się do środka komórki tabeli.
10. Zapisz plik i wyświetl go w przeglądarce. Jeśli 20 dodatkowych pikseli wolnego obszaru wokół obrazu to za mało, wróć do okna dokumentu i w polu H inspektora Property wpisz wartość 5.

Formatowanie tabel

Interfejs programu Dreamweaver znacznie ułatwia formatowanie tabel. Ręczna zmiana rozmiarów tabeli wprost w kodzie HTML to zadanie stresujące, bowiem nie widzisz bezpośrednio efektów wprowadzanych modyfikacji. Interfejs pozwala dopasowywać rozmiary, kolory, pozycję, szerokość obramowania oraz wybierać obrazy jako tło tabeli (formatując tabele niemal zawsze korzystam z inspektora Property, ponieważ mam tu wszystko co potrzeba, a na dodatek w jednym miejscu).

Rozpinanie komórek tabeli

Korzystanie z tabel w widoku standardowym (Standard View) wymaga od projektanta umiejętności rozpinania komórek na wierszach i kolumnach. W widoku układu (Layout View) problemu rozpinania nie ma.

Atrybuty Colspan i Rowspan pozwalają rozciągnąć pojedynczą komórkę tabeli na kilka wierszy lub kolumn (patrz rysunek 8.6).

Atrybuty Colspan i Rowspan są szczególnie użyteczne, gdy tworzysz tabelę z przeznaczeniem na tekst i obrazy. Taką tabelę przygotujemy w ćwiczeniu 8.2. Będzie ona zawierała baner reklamowy w postaci długiego obrazu oraz kilka małych nawigacyjnych obrazów.

Aby rozpiąć komórkę na kilku wierszach tabeli:

1. Kliknij w górnym wierszu obszaru, na którym komórka ma być rozpięta.
2. Wybierz w menu Modify pozycję Table, a następnie pozycję Increase Row Span z menu podrzędnego (patrz rysunek 8.7).
3. Jeśli chcesz zwiększyć rozpięcie o kolejny wiersz, powtórz kroki 1-2. Możesz alternatywnie zastosować skrót klawiaturowy Ctrl+Y.

Początek ramki

Podpowiedź

Aby rozpiąć komórkę na wierszach lub kolumnach, możesz skorzystać z opcji scalania komórek. Zaznacz scalane komórki i naciśnij klawisz M. Zamiast klawisza M, możesz skorzystać z przycisku scalania komórek tabeli w inspektorze Property (w lewym dolnym rogu okna).

Koniec ramki

Aby rozpiąć komórkę na kilku kolumnach tabeli:

1. Kliknij w komórce najbardziej na lewo położonej kolumny z zakresu kolumn, na którym komórka ma być rozpięta.
2. Wybierz w menu Modify pozycję Table, a następnie pozycję Increase Column Span z menu podrzędnego (odpowiedni skrót klawiaturowy to Shift+Ctrl+]).
3. Jeśli chcesz zwiększyć rozpięcie o kolejny wiersz, powtórz kroki 1-2. Możesz alternatywnie zastosować skrót klawiaturowy Ctrl+Y.

Aby usunąć rozpięcie komórki na wierszach lub kolumnach, wybierz w menu Modify pozycję Table, a następnie Decrease Row Span (lub Column Span). Musisz powtórzyć tę operację tyle razy, ile wynosi liczba wierszy lub kolumn, na których komórka jest rozpęta.

Podział i scalanie komórek

Innym sposobem uzyskania efektu rozpięcia komórki jest skorzystanie z funkcji Split Cell. Dzieli ona komórkę na tyle wierszy i kolumn, ile wskażesz w oknie dialogowym Split Cell (patrz rysunek 8.8).