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:

• Wstawianie tabel

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

• Wyrównywanie tabel i definiowanie obramowań

• Stosowanie kolorów do tabel i obramowań

• Kadrowanie obrazów za pomocą programu Fireworks

• 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.

Rys. 8.1. Okno dialogowe Insert Table

• Rows - określa liczbę wierszy tabeli.

• Columns - określa liczbę kolumn tabeli.

• 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.

• 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.

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

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

Rys. 8.2. Ustawienia Cell Padding i Cell Spacing wpływają na ulokowanie zawartości komórek tabeli

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:

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

• 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.

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

• 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:

• 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.

• 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.

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

Rys. 8.3. Oto dwa typy tabel: definiowana względem szerokości okna przeglądarki i w pikselach

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).

Rys. 8.4. Ta tabela ma obramowanie o szerokości 4 pikseli

Ć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.

Rys. 8.5. Plik SITEOFTHEDAY.HTML. Zdefiniowano obramowanie o szerokości jednego piksela, abyś mógł łatwiej zobaczyć mniejszą z tabel w większej, zaznaczonej

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).

Rys. 8.6. W górnej tabeli zastosowano atrybut Rowspan; w dolnej atrybut Colspan

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

Rys. 8.7. Rozpinanie komórki na kilku wierszach

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).

Rys. 8.8. Okno dialogowe Split Cell

Aby wywołać to okno, kliknij ikonę dzielenia komórki w lewym dolnym rogu inspektora Property lub wybierz w menu Modify pozycję Table, a następnie pozycję Split Cell. Odpowiedni skrót klawiaturowy to Ctr+Alt+S.

Ikona scalania komórek umieszczona jest w inspektorze Property tuż obok ikony dzielenia komórek. Scala w jedną komórkę zaznaczone komórki.

Ćwiczenie 8.2. Projektowanie z użyciem tabel

W tym ćwiczeniu utworzysz tabelę zawierającą baner reklamowy oraz zestaw obrazów nawigacyjnych (patrz rysunek 8.9). Zacznij od otworzenia pliku WEAVING.HTML z dysku CD.

Rys. 8.9. Plik WEAVING.HTML w oknie programu Dreamweaver

1. Wybierz z menu Insert pozycję Table, aby wyświetlić okno dialogowe Insert Table. Zdefiniuj tabelę o dwóch wierszach i sześciu kolumnach. Określ jej szerokość jako 100% szerokości okna przeglądarki. W polach Border, Cell Padding i Cell Spacing wpisz wartość 0.

2. Kliknij w komórce w lewym górnym rogu tabeli. Wybierz w menu Modify pozycję Table, a następnie pozycję Increase Column Span z menu podrzędnego.

3. Powtórz procedurę rozpinania pięć razy stosując skrót klawiaturowy Ctrl+Y. Zamiast opcji rozpinania, możesz zastosować scalanie - zaznacz sześć komórek pierwszego wiersza i naciśnij klawisz M (lub przycisk scalania inspektora Property).

4. Umieść punkt wstawiania w górnym wierszu i wybierz w menu Insert pozycję Image. Wstaw obraz HOME_BANER.GIF z foldera Weaving na dysku CD.

5. Kliknij w obrębie komórki, z prawej strony obrazu, aby usunąć z niego zaznaczenie. Zastosuj do obrazu wyrównanie wybierając w inspektorze Property (Ctrl+F3) wartość Center dla atrybutu Horz i wartość Top dla atrybutu Vert.

6. Umieść punkt wstawiania w pierwszej z lewej komórce drugiego wiersza. Wybierz w menu Insert pozycję Image i wstaw obraz FIBERS.GIF z foldera Weaving na dysku CD.

7. Kliknij w obrębie komórki, z prawej strony obrazu, aby usunąć z niego zaznaczenie. Zastosuj do obrazu wyrównanie wybierając w inspektorze Property wartość Center dla atrybutu Horz i wartość Top dla atrybutu Vert.

8. Naciśnij klawisz ze strzałką w prawo, aby przejść do kolejnej komórki. Wybierz w menu Insert pozycję Image i wstaw obraz STYLES.GIF. Powtórz krok 7., aby wyrównać obraz w komórce.

9. Powtórz opisane wcześniej operacje wstawiając i wyrównując kolejne trzy obrazy: DYES.GIF, LINKS.GIF i LOOMS.GIF.

10. Zapisz plik i wyświetl go w przeglądarce.

Tabele zagnieżdżone

Tam, gdzie układ strony bazuje na tabeli, najczęściej stosowane są także tabele zagnieżdżone. Tabele zagnieżdżone to tabele umieszczone w obrębie innej tabeli. Aby zdefiniować tabelę zagnieżdżoną, kliknij w komórce tabeli, w której chcesz umieścić nową tabelę, i powtórz procedurę wstawiania tabeli (opisywaliśmy ją we wcześniejszej części rozdziału). Poziom zagnieżdżania jest w zasadzie nieograniczony, aczkolwiek im bardziej skomplikowana struktura, tym dłuższy czas ładowania strony.

W ćwiczeniu 8.3 zajmiesz się definiowaniem tabeli zagnieżdżonej. Aby wszystkie komórki tabeli były widoczne, w trakcie ćwiczenia stosować będziemy obramowanie o szerokości jednego piksela.

Ćwiczenie 8.3. Zagnieżdżanie tabeli

1. Otwórz pliki STYLES.HTML z foldera Weaving na dysku CD dołączonym do książki.

2. Wybierz z menu Insert pozycję Table, aby wyświetlić okno dialogowe Insert Table. Zdefiniuj tabelę o jednym wierszu i dwóch kolumnach. Określ jej szerokość jako 100% szerokości okna przeglądarki. W polu Border wpisz wartość 1 (zmienisz to później). Kliknij OK.

3. Umieść punkt wstawiania w pierwszej z lewej komórce wiersza. Wybierz w menu Insert pozycję Image (lub kliknij ikonę Insert Image na palecie obiektów) i wstaw obraz NAVAJO.GIF z foldera Weaving na dysku CD. Kliknij w obrębie komórki, z prawej strony obrazu (lub naciśnij klawisz ze strzałką w prawo), aby usunąć z niego zaznaczenie. Zastosuj do obrazu wyrównanie wybierając w inspektorze Property (Ctrl+F3) wartość Left dla atrybutu Horz i wartość Top dla atrybutu Vert.

4. Umieść wskaźnik myszki nad linią oddzielającą obie komórki i przeciągnij ją w lewo, aby dostosować szerokość komórki do obrazu (powinna ona wynosić około 28%).

5. Przejdź do drugiej komórki. Pomimo, iż jest pusta, zastosuj do zawartości wyrównanie wybierając w inspektorze Property (Ctrl+F3) wartość Left dla atrybutu Horz i wartość Top dla atrybutu Vert. Dzięki temu dane, które wstawisz do komórki będą poprawnie wyrównane. Zanim przejdziesz do kolejnego etapu, sprawdź, czy punkt wstawiania pulsuje przy lewej krawędzi prawej komórki.

6. Wybierz z menu Insert pozycję Table lub kliknij ikonę Insert Table na palecie obiektów. W oknie dialogowym Insert Table zdefiniuj tabelę o trzech wierszach i jednej kolumnie. Określ jej szerokość w pikselach (a nie w procentach) podając wartość 450. W polu Border wpisz wartość 1. W polach Cell Padding i Cell Spacing wpisz wartość 0.

7. Kliknij w górnej komórce wstawionej właśnie tabeli. Wybierz w menu Insert pozycję Image (lub kliknij ikonę Insert Image na palecie obiektów) i wstaw obraz STYLES_HEAD.GIF z foldera Weaving na dysku CD.

8. Otwórz plik BLURB.TXT z foldera Weaving na dysku CD. Zaznacz tekst, skopiuj go do Schowka i zamknij plik.

9. Kliknij w drugim wierszu tabeli zagnieżdżonej. Wybierz w menu Edit pozycję Paste HTML.

10. Kliknij w trzecim wierszu tabeli zagnieżdżonej. Wybierz w menu Insert pozycję Image i wstaw obraz HOME_OFF.GIF. Korzystając z inspektora Property przekształć obraz w połączenie do pliku WEAVING.GIF ulokowanego w folderze Weaving na dysku CD.

11. Naciśnij klawisz ze strzałką w lewo, aby umieścić punkt wstawiania obok obrazu (lecz nadal w komórce tabeli). Zastosuj do zawartości komórki wyrównanie wybierając w inspektorze Property wartość Right dla atrybutu Horz i wartość Top dla atrybutu Vert.

12. Zaznacz tabelę zagnieżdżoną i wpisz w polu Cell Spacing inspektora Property wartość 5, natomiast w polu Border podaj wartość 0.

13. Zaznacz zewnętrzną tabelę i usuń jej obramowanie wpisując w polu Border inspektora Property wartość 0. Zapisz plik i wyświetl w przeglądarce.

Rysunek 8.10 prezentuje ukończoną stronę.

Rys. 8.10. Plik STYLES.HTML w oknie przeglądarki

Modyfikacja tabel

Projektując w widoku standardowym (Standard View) układ strony za pomocą tabel masz możliwość dostosowania sposobu rozpięcia komórek oraz dodania lub usunięcia wierszy i kolumn. Odpowiednie polecenia znajdziesz w menu podrzędnym Table menu Modify. Rysunek 8.7 prezentuje to menu.

Wstawianie wierszy i kolumn

Menu podrzędne Table menu Modify pozwala dodawać do tabeli nowe wiersze i kolumny, ale korzystanie z niego wymaga pewnej wiedzy. Mianowicie, aby do istniejącej tabeli dodać kilka wierszy lub kolumn, musisz w nim wybrać pozycję Insert Rows or Columns.

Jeśli zastosujesz polecenie Insert Row lub polecenie Insert Column, wstawiony zostanie tylko jeden wiersz lub jedna kolumna. Domyślnie, Dreamweaver wstawia nowy wiersz tabeli nad wierszem, w którym aktualnie znajduje się punkt wstawiania. Jeśli nie o to Ci chodzi, skorzystaj z okna dialogowego Insert Rows or Columns (patrz rysunek 8.11). Tą drogą możesz wybrać sposób wstawienia wierszy - nad lub pod punktem wstawiania, oraz kolumn - przed lub za nim.

Rys. 8.11. Okno dialogowe Insert Rows or Columns

Początek ramki

Podpowiedź

Aby wstawić wiersz, korzystaj ze skrótu klawiaturowego Ctrl+M. Aby usunąć wiersz, zastosuj skrót Ctrl+Shift+M. Aby jednocześnie zaznaczyć kilka komórek tabeli, przeciągnij myszką nad nimi. Wokół zaznaczanych komórek pojawi się czarne lub kolorowe obramowanie. Zaznaczona w ten sposób tabela będzie widoczna na ekranie jako obszar zaznaczony.

Koniec ramki

Usuwanie wierszy i kolumn

Aby usunąć wiersze lub kolumny, kliknij w pierwszej usuwanej komórce i wybierz z menu Modify pozycję Table, a następnie pozycję Delete Row lub Delete Column z menu podrzędnego. Jeśli uzyskany rezultat nie odpowiada Twoim zamierzeniom, możesz cofnąć całą operację za pomocą skrótu klawiaturowego Ctrl+Z. Aby usunąć kilka wierszy lub kolumn, zaznacz je myszką i naciśnij klawisz Delete.

Zmiana rozmiarów komórki

Czasami tabele nie prezentują się tak, jak chciałbyś. Zdarza się to każdemu. Niewłaściwe wyrównanie zawartości komórek jest spowodowane najczęściej nieodpowiednimi rozmiarami tabeli. Pamiętaj, że suma wszystkich szerokości komórek tabeli zawsze musi być równa całkowitej szerokości tabeli, podobnie, suma wysokości komórek musi równać się wysokości tabeli. Jeśli ten warunek nie zostanie spełniony, w przeglądarce pojawią się nieoczekiwane zaburzenia wyrównania.

Przy definiowaniu tabeli i wprowadzaniu danych do jej komórek Dreamweaver przypisuje komórkom procentowe udziały w szerokości (lub wysokości) całkowitej tabeli. Aby sprawdzić rozmiar określonej komórki, kliknij w niej (nie zaznaczając zawartości) i odczytaj zawartość pól W i H inspektora Property.

Najprostszą metodą zmiany szerokości kolumn i wysokości wierszy jest przeciągnięcie kropkowanych obramowań komórek. Przeciągnięcie obramowania wiersza lub kolumny automatycznie określa wartości dla wszystkich pozostałych kolumn lub wierszy, w pikselach lub w procentach aktualnych rozmiarów tabeli, w zależności od tego jak je zdefiniowano. Aby zmienić lub usunąć zmodyfikowane rozmiary, skorzystaj z inspektora Property i zmień lub wyczyść zawartość pól W i H.

Jeśli uzyskane drogą przeciągania nowe rozmiary tabeli Ci nie odpowiadają, możesz wyczyścić wszelkie zmiany i zacząć od początku. Do dyspozycji masz polecenia Clear Cell Widths i Clear Cell Heights w menu podrzędnym Table menu Modify (patrz rysunek 8.7). Zamiennie możesz korzystać z przycisków Clear Cell Widths i Clear Cell Heights w inspektorze Property (patrz rysunek 8.12). Aby polecenia były aktywne, musisz najpierw zaznaczyć całą tabelę.

Zamiana pikseli na procenty i odwrotnie

Jeśli zdefiniowałeś szerokość tabeli względem szerokości okna przeglądarki i efekt nie podoba Ci się (lub odwrotnie - zdefiniowałeś tabelę w pikselach i żałujesz), nie wszystko jest stracone. Zaznacz tabelę i przekonwertuj procenty na piksele lub piksele na procenty.

Możesz skorzystać z menu podrzędnego Table menu Modify (odpowiednie polecenia to: Convert Widths to Pixels i Convert Widths to Percents) lub przycisków inspektora Properties (patrz rysunek 8.12).

Rys. 8.12. Przyciski Clear Cell Widths i Clear Cell Heights w inspektorze Property

Kolory w tabelach i w komórkach

Stosując do tabeli kolory i tło w postaci obrazu można poprawić wygląd tabeli. Program Dreamweaver pozwala przypisać bezpieczny lub własny kolor do poszczególnych komórek lub do całej tabeli. Jeśli w tabeli zdefiniowano obramowanie o grubości przynajmniej jednego piksela, można zastosować do obramowania komórki kolor. Pamiętaj jednak, że nie wszystkie przeglądarki obsługują kolorowe obramowania tabel i komórek.

W komórce lub w całej tabeli możesz także zastosować tło o określonym wzorze. Musisz jednak mieć świadomość, że w przypadku zastosowania obrazu jako tła komórek, tło zostanie złożone z powieleń obrazu (z kafelków będących kopiami samych siebie), które wypełnią obszar komórki. Czasem jest to efekt pożądany, a czasem nie.

Narzędzia umożliwiające zastosowanie kolorów oraz opcje wstawiania obrazu jako tła dostępne są w inspektorze Property. Zaznacz tabelę (lub kliknij w obszarze jej komórki), a w inspektorze Property pojawią się pola Bg Color (pozwala wybrać kolor tła) i Brdr Color (umożliwia wybranie koloru obramowania). Obok tych pól znajdziesz ikony z próbkami kolorów umożliwiające rozwinięcie palet. Pole Bg Image pozwala wybrać obraz jako tło tabeli (lub komórki).

Rysunek 8.13 pokazuje tabelę, do której komórek zastosowałem kolorowe tło i obramowania, a do całej tabeli jako tło zastosowałem obraz. Obraz ten jest lepiej widoczny na rysunku 8.14, bowiem wprowadziłem odstępy między komórkami (przypisując atrybutowi Cell Spacing wartość 5).

Rys. 8.13. Tabela, w której atrybut Cell Spacing ma wartość 0

Aby zastosować w komórce tabeli kolorowe tło:

1. Kliknij w komórce, w której chcesz zdefiniować kolor tła.

2. Wybierz kolor, rozwijając paletę kolorów pola Bg w inspektorze Property. Możesz także zastosować własny kolor zdefiniowany w oknie Color.

Rys. 8.14. Tabela, w której atrybut Cell Spacing ma wartość 5 - obraz stanowiący tło tabeli jest teraz lepiej widoczny

Aby zastosować do całej tabeli kolorowe tło:

1. Zaznacz tabelę.

3. Wybierz kolor, rozwijając paletę kolorów pola Bg w inspektorze Property. Możesz także zastosować własny kolor zdefiniowany w oknie Color.

Jeśli chcesz jako tło tabeli lub komórki zastosować obraz, powtórz powyższą procedurę, korzystając jednak z pola Bg Image i przycisku Browse. Możesz także skorzystać z techniki Point-to-File - kliknij ikonę Point-to-File i przeciągnij na plik graficzny w oknie Site (szczegóły tej operacji znajdziesz w rozdziale 5., „Połączenia i nawigacja”).

Aby zastosować kolor do obramowania tabeli lub komórki, powtórz procedurę, korzystając tym razem z pola Brdr inspektora Property.

Aby usunąć kolory zastosowane do tabeli lub jej komórek, wejdź w inspektorze Property w pola definiowania kolorów i usuń szesnastkowe kody kolorów. Możesz także wyświetlić paletę kolorów i kliknąć przycisk usuwania kolorów (biały z czerwonym przekreśleniem).

Stosowanie kolorów i obrazów jako tła tabeli

Dzięki zastosowaniu kolorów i obrazów jako tła Twoja tabela uzyska bardziej profesjonalny wygląd. Jest to także pomocne w rozwiązywaniu wielu problemów projektowych.

Jeśli na przykład zamierzasz umieścić w komórce tabeli sekwencję wideo programu Flash, zdefiniowanie białego tła i przypisanie atrybutowi Cell Spacing wartości 5 spowoduje utworzenie wokół ładnej ramki. Z kolei zastosowanie w komórce jako tła obrazu GIF przedstawiającego animowane paski i umieszczenie na tym tle przeźroczystego obrazu umożliwi uzyskanie ciekawego efektu multimedialnego.

Ćwiczenie 8.4. Praktyczne ćwiczenia ze stosowania kolorów w tabeli i obrazów jako tła

W tym ćwiczeniu skorzystamy z pliku BACKGROUNDS.HTML z foldera Calendar na dysku CD dołączonym do książki. W komórkach istniejącej w tym pliku tabeli zdefiniujesz tła korzystając z trzech obrazów - CELTIC.GIF, MOON.GIF i CLOVER.GIF (znajdziesz je w tym samym folderze). W pozostałych komórkach wprowadzisz kolorowe tło. Rysunek 8.15 prezentuje efekt końcowy, do którego teraz zmierzamy.

1. Plik BACKGROUNDS.HTML z foldera Calendar zawiera tabelę skonfigurowaną jako kalendarz na marzec 2001. Zacznij od umieszczenia punktu wstawiania w pierwszym wierszu tabeli, tuż obok obrazu z nazwą miesiąca (nie zaznacz jednak obrazu lub tabeli zagnieżdżonej).

2. Otwórz inspektora Property (Ctrl+F3) i kliknij ikonę Bacground URL of Cell obok pola Bg. Wybierz z foldera Calendar obraz CELTIC.GIF. Będzie on tłem tego wiersza. Powtórzenia wzoru powinny utworzyć pełne tło wiersza nagłówka kalendarza.

3. Zastosuj kolorowe tło w komórkach tabeli zawierających kolejne daty. Pierwszy wiersz dat znajduje się pod wierszem nazw dni tygodnia. Aby zaznaczyć komórki tego wiersza, przeciągnij myszką przez cały wiersz, tak aby wszystkie jego komórki zostały obwiedzione czarnym obramowaniem. Po zaznaczeniu siedmiu komórek wiersza, rozwiń w polu Bg inspektora Property paletę kolorów i korzystając z próbnika kolorów wybierz jasnoszary kolor o kodzie szesnastkowym #CCCCCC.

4. Powtórz krok 3. dla pozostałych sześciu wierszy dat.

5. Dni 8 marca i 17 marca zaznacz specjalnymi ikonami. Kliknij w komórce oznaczonej numerem 8 (zawiera ona słowa „Full Moon”).

6. W inspektorze Property kliknij ikonę Bacground URL of Cell obok pola Bg. Jako tło komórki wybierz z foldera Calendar obraz MOON.GIF. Obraz pojawi się w komórce.

7. Powtórz krok 6. w komórce z numerem 17 (zawiera ona tekst „Luck O' the Irish”). Jako tło komórki wybierz obraz CLOVER.GIF. W komórce pojawi się obraz przedstawiający koniczynę.

8. Zapisz plik i wyświetl w przeglądarce (patrz rysunek 8.15).

Rys. 8.15. Plik BACKGROUNDS.HTML w przeglądarce

Stosując w tabeli kolorowe tło i obrazy jako tło należy pamiętać o przetestowaniu stron WWW w różnych przeglądarkach. Jest ważna kwestia, bowiem kolory obramowań, kolory tła i obrazy zastosowane w tabeli jako tło bardzo często różnią się wyglądem w przeglądarkach różnych firm.

Czasami zastosowanie obrazu jako tła komórki tabeli to jedyna metoda osiągnięcia określonego celu projektowego. W ćwiczeniu 8.4 zastosowano jako tło komórek obrazy księżyca i koniczyny, aby uniknąć problemów z wyrównaniem, które mogłyby się pojawić, gdybyś te same obrazy wstawił po prostu do komórek jako obrazy. Korzystając z obrazów jako tła komórek tabeli, pamiętaj jednak, że efektem ubocznym tej operacji może być kafelkowe tło, które powstanie ze złożenia powieleń obrazu.

Podział obrazu na wycinki a tabele

Wiele z najpiękniejszych stron internetowych zawiera obrazy zestawione z wycinków i tabele. Wycinek (ang. image slice) to fragment większego obrazu, coś w rodzaju elementu puzzla czy też kadru. Jeśli podzielimy obraz na wycinki i ułożymy je w tabeli definiując atrybuty Cell Spacing i Cell Padding jako równe 0, złożymy z kawałków cały obraz, a linie złożenia będą praktycznie niewidoczne.

Podział obrazów na wycinki za pomocą Fireworks

Fireworks wyposażony jest w narzędzia umożliwiające dzielenie obrazów na wycinki i eksportowanie wycinków jako tabeli, którą można wyświetlić w programie Dreamweaver. Na rysunku 8.16 pokazany jest pasek nawigacji utworzony w Fireworks przy pomocy narzędzia Image Slicing.

Rys. 8.16. Ten obraz jest właśnie dzielony w programie Fireworks na wycinki

Podzielonemu na wycinki obrazowi należy nadać nazwę, a poszczególne wycinki można wyeksportować pojedynczo i ręcznie umieścić w komórkach tabeli programu Dreamweaver. Można także zapisać kod HTML całej tabeli bezpośrednio w Fireworks.

Na rysunku 8.17 przedstawiona jest wyeksportowana z Fireworks tabela z wycinkami obrazu. Zaznaczyłem tabelę i zastosowałem obramowanie o grubości jednego piksela, aby unaocznić fakt, że jest to właśnie tabela z umieszczonymi wewnątrz komórek obrazami. Po usunięciu obramowania (to znaczy po przypisaniu atrybutowi Border wartości 0, obrazy połączą się bez śladu złączenia (patrz rysunek 8.18).

Rys. 8.17. Tabela z obramowaniem o grubości 1 piksela

Rys. 8.18. Po przypisaniu atrybutowi Border wartości 0, obrazy połączyły się bez śladu złączenia

Po podzieleniu obrazu na wycinki i umieszczeniu wycinków w tabeli, zaznacz określony wycinek i w polu Link inspektora Property zdefiniuj połączenie do innego pliku. Każdemu wycinkowi możesz nadać nazwę i dołączyć do niego tekst alternatywny wpisując go w polu Alt inspektora Property. Ponadto, możesz utworzyć z kilku wycinków obszary aktywne. W rozdziale 5. znajdziesz więcej informacji na temat mapy odnośników i definiowania obszarów aktywnych.

Aby połączyć tabelę programu Fireworks z istniejącą tabelą, zaznacz i skopiuj całą zawartość tabeli Fireworks na stronie kodu HTML (skrót Ctrl+A spowoduje zaznaczenie całości). Następnie przygotuj nową tabelę, w której umieszczona zostanie tabela z wycinkami obrazu, lub kliknij w dowolnym miejscu istniejącej tabeli, w którym chcesz wkleić skopiowaną zawartość. Wklej zawartość Schowka do wskazanej komórki i odpowiednio wyrównaj.

Widok układu

Nowością w wersji 4 programu Dreamweaver jest widok układu - Layout View. Umożliwia on bardziej płynne, spontaniczne posługiwanie się tabelami. Tabele i komórki tabeli mogą być w tym widoku dowolnie przeciągane (aczkolwiek tabela zawsze dopasuje się do górnego lewego rogu strony). Ta metoda projektowania tabel jest szczególnie polecana przy korzystaniu z obrazu jako kalki strony WWW. Rozdział 7., „Zagadnienia związane z projektowaniem stron WWW” omawia kwestie związane z tego typu pomocą przy projektowaniu stron WWW.

Projektując tabele w widoku układu nie tylko możesz dowolnie przeciągać same tabele i ich elementy, lecz masz także do dyspozycji opcję Autostretch Columns. Opcja ta znakomicie ułatwia tworzenie tabel o wymiarach procentowych, ustalanych względem szerokości okna.

Aby przełączyć się z widoku standardowego (Standard View) do widoku układu (Layout View), kliknij na palecie obiektów ikonę Layout View. Ikona ta jest pokazana na rysunku 8.19.

Rys. 8.19. Ikona Layout View na palecie obiektów

W widoku układu uaktywniają się na palecie obiektów dwie ikony: Draw Layout Cell i Draw Layout Table. Znajdują się one bezpośrednio nad ikoną Layout View (patrz rysunek 8.19), w sekcji Layout.

Aby narysować tabelę, kliknij ikonę z prawej strony. Aby narysować komórkę tabeli (tabela zostanie utworzona automatycznie), skorzystaj z ikony z lewej strony.

Rysunek 8.20 pokazuje pustą tabelę o jednaj komórce, która została utworzona w widoku układu (Layout View). Szerokość kolumny jest oznaczona cienką zieloną linią i podana liczbowo nad kolumną. Jeśli klikniesz liczbę w nagłówku kolumny, pojawi się menu, a w nim następujące opcje:

• Make Column Autostretch - wymusza poszerzenie kolumny, gdy strona zostanie wyświetlona w większym oknie przeglądarki. Należy z niej korzystać ostrożnie, ponieważ zbyt wiele wolnej przestrzeni w kolumnie może przytłoczyć dane. Opcję tę można zastosować tylko do jednej kolumny.

• Add Spacer Image - ta opcja powoduje wstawienie przeźroczystego obrazu stosowanego do kontrolowania szerokości kolumn w tabelach z opcją Autostretch. Gdy ją wybierzesz, Dreamweaver poprosi o wskazanie źródła obrazu - możesz wybrać własny obraz lub skorzystać z obrazu automatycznie generowanego przez Dreamweaver. Wstawienie przeźroczystych obrazów zapobiega zmianie szerokości kolumn.

• Remove All Spacer Images - opcja automatycznie usuwa wszystkie przeźroczyste obrazy wstawione w tabeli.

• Clear Cell Heights - ta opcja spowoduje usunięcie wszelkich ustawień wysokości komórki. Będzie pomocna, gdy przez przypadek zmienisz wysokości komórek tabeli i spowodujesz problemy z wyrównaniem.

• Make Cell Widths Consistent - spowoduje jednoznaczne określenie szerokości komórek (czasami w nagłówku kolumny pojawiają się dwie liczby: rzeczywista szerokość kolumny i szerokość zadeklarowana w kodzie HTML. Przyczyną tego może być na przykład wstawienie zawartości szerszej niż szerokość kolumny. Zastosowanie tego polecenia spowoduje, że wyświetlona zostanie tylko rzeczywista szerokość - przypis tłumacza). Opcja ta pozwala na bardziej efektywne dopasowanie się tabeli do okna przeglądarki. Oczywiście, jeśli chcesz zachować wcześniej zdefiniowane wymiary komórek, nie używaj jej.

Rysowanie komórek tabeli

Tworząc tabelę w widoku projektu (Design View) projektant musi mieć pełną wizję tego, co chce uzyskać. Kwestie takie jak zastosowanie do kolumny opcji Autostretch, czy też wymiary obrazów i innych elementów wstawianych do tabeli, na tym etapie pracy muszą już być precyzyjne określone. Tylko tak bowiem można zapobiec problemom z rozmieszczeniem elementów i wolną przestrzenią.

Początek ramki

Podpowiedź

Korzystaj z opcji Autostretch do kolumn zawierających tekst. Zdolność zmiany szerokości kolumny zawierającej obraz jest ograniczona rozmiarami obrazu. Natomiast w przypadku kolumny z tekstem jest ona praktycznie nieograniczona, zależąc jedynie od rozmiarów okna.

Koniec ramki

Rys. 8.20. Kliknij nagłówek kolumny, aby wyświetlić menu

Na rysunku 8.21 przedstawiony jest mój projekt strony WWW. Korzystam tu z widoku projektu, aby zdefiniować tabelę o układzie podobnym do układu broszury U.S. Environmental Protection Agency, którą zastosowałem jako kalkę mojej strony. Możesz skorzystać z tej samej techniki, aby przekształcić drukowane materiały biurowe czy reklamowe w strony internetowe.

Rys. 8.21. Stosowanie kalki w widoku projektu

Obrazy stosowane jako kalki wybiera się w oknie dialogowym Page Preferences (otworzysz to okno wybierając pozycję Page Preferences w menu Modify). Jeśli obraz-kalka tworzy kafelkowy wzór (a nie powinien!), w programie do edycji grafiki dodaj wokół niego nieco wolnej przestrzeni.

Dodanie kolejnej komórki tabeli wymaga ponownego wybrania z palety obiektów narzędzia rysowania komórek (Draw Layout Cell). Nowej komórki nie można narysować nad istniejącą.

Edycja tabel w widoku projektu

Jeśli chcesz wykorzystać w swoim dokumencie HTML tabele z wcześniejszej wersji programu Dreamweaver lub z innego programu do tworzenia stron WWW, możesz modyfikacje tabel przeprowadzić w widoku projektu. Otwórz po prostu stronę z tabelą i przełącz się z widoku standardowego (Standard View) do widoku układu (Layout View) klikając ikonę Layout View na palecie obiektów.

Początek ramki

Podpowiedź

W przypadku przekształcania dokumentów drukowanych w sieciowe możesz przygotować elektroniczną kalkę dokumentu zapisując plik w postaci PDF. Otwórz plik PDF w programie Adobe Acrobat lub w przeglądarce sieciowej i dopasuj rozmiary do okna. Zrób zrzut ekranu (Alt+Print Screen) i otwórz obraz w programie do edycji grafiki. Zapisz go w formacie GIF lub JPEG.

Koniec ramki

Początek ramki

Kalendarze HTML

Makromedia Exchange udostępnia rozszerzenie pozwalające na dołączenie do własnej strony kalendarza HTML. Dzięki temu rozszerzeniu nie tracisz czasu na przygotowanie tabeli! Aby ściągnąć rozszerzenie, idź pod adres www.macromedia.com/exchange i szukaj pod hasłem „calendar”.

Po zainstalowaniu rozszerzenia, kliknij ikonę kalendarza w kategorii goodies palety obiektów. Wyświetlone zostanie okno dialogowe, takie jak na rysunku 8.22. Wprowadź odpowiednie ustawienia i kliknij OK. Przykładem takiego kalendarza zajmiemy się w ćwiczeniu 8.4.

Koniec ramki

Początek ramki

Konwersja baz danych i arkuszy kalkulacyjnych do stron WWW

Czy masz bazę danych lub arkusz kalkulacyjny, z których chętnie skorzystałbyś na stronach swojej witryny? Jeśli dane przechowywane są w pliku tekstowym z polami rozseparowanymi znakami tabulacji, Dreamweaver przeniesie dane do swojej tabeli, nie naruszając nic w konstrukcji i zawartości tabeli. Jeśli plik został zapisany w innym formacie, możesz zapisać go we właściwej formie korzystając z odpowiedniej opcji arkusza danych lub programu obsługi baz danych.

Wybierz pozycję Tabular Data w menu Insert i kliknij przycisk Browse, aby wybrać plik danych w formacie TXT. Określ pozostałe opcje okna dialogowego Insert Tabular Data i naciśnij OK (patrz rysunek 8.23).

Koniec ramki

Rys. 8.22. Okno dialogowe Insert Calendar

Rys. 8.23. Okno dialogowe Insert Tabular Data

Dreamweaver sortuje dane w tabeli, która pojawi się w aktualnie otwartym dokumencie.

Podsumowanie

Aby powstała udana witryna sieciowa, musisz rozwijać swoje umiejętności tworzenia i modyfikacji tabel. Chociaż tabele nie zostały przewidziane jako narzędzie definiowania układu strony, tym właśnie się stały. Ponieważ są zazwyczaj obsługiwane przez wszystkie typy przeglądarek, stanowią w tej chwili podstawową metodę kontroli układu strony. Być może w niedalekiej przyszłości zostaną wyparte przez kaskadowe arkusze stylów, lecz ciągle jeszcze warto poświęcić parę chwil, aby nauczyć się z nich korzystać przy projektowaniu stron.

Kompatybilność kompatybilnością, ale każda przeglądarka interpretuje tabele nieco inaczej. Różnice stają się widoczne szczególnie wówczas, gdy w tabeli pojawia się kolorowe tło, obrazy jako tło i obramowania. Korzystając z tych elementów, testuj wygląd tabel w różnych przeglądarkach.

Tabele znajdują zastosowanie w innej popularnej technice, w której podzielone na wycinki obrazy są składane w całość w komórkach tabeli. Pomocne tu będą programy do obróbki grafiki, takie jak Fireworks lub inne, przeznaczone do tworzenia obrazów na strony WWW, w których można podzielić obraz na wycinki i zapisać w plikach GIF. W programie Dreamweaver wycinki są umieszczane w tabeli zdefiniowanej w pikselach. Jeśli wartościom atrybutów Cell Padding, Cell Spacing i Border przypisana zostanie wartość 0, nie będzie żadnych śladów złożenia.

Poeksperymentuj z tabelami, definiując dla nich zastosowania, o których mówiliśmy w tym rozdziale. Sprawdź także przydatność nowych widoków programu Dreamweaver, a na pewno odkryjesz, jak wiele korzyści mogą Ci daj tabele.

2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

2 G:\DREAM_trans\rozdz08.doc

---