Rozdział 7. Zagadnienia związane z projektowaniem stron WWW

Jeśli tworzysz swoje strony WWW w programie Dreamweaver, to jesteś projektantem, nawet jeśli sam siebie nie uważasz za artystę. Chciałbym móc Ci powiedzieć, że Dreamweaver automatycznie przygotuje Twoje strony oraz że one będą one wspaniale wyglądać i funkcjonować bez jakiegokolwiek wkładu pracy z Twojej strony. Chciałbym także móc Ci powiedzieć, że wystarczy znać parę podstawowych zasad, aby uchronić się od pomyłek projektowych. Nie mogę jednak tego zrobić, bo skłamałbym. Prawda jest taka, że to Twoja myśl decyduje o artystycznej postaci projektu strony, to Ty odczytujesz zamierzenia przyszłych czytelników swoich stron i to Ty starasz się nadać swoim stronom niepowtarzalny charakter. Może też być inaczej - możesz uznać, że najlepszym rozwiązaniem dla Twojej strony będą stare i sprawdzone rozwiązania, które zagwarantują bezpieczne i pewne funkcjonowanie systemu nawigacji.

Dreamweaver udostępnia wiele różnych dróg do tego samego celu. Równie wiele prowadzi do różnych celów. Możliwości jest nieskończenie wiele. W tym rozdziale zastanowimy się wspólnie nad pewnymi kwestiami projektowania stron i korzystając z programu Dreamweaver przećwiczymy ich rozwiązanie na przykładach. Wykorzystaj szansę stworzenia własnego projektu i naucz się korzystać z narzędzi projektowych programu.

Oto lista tematów:

• Posługiwanie się kolorami

• Wzory tła

• Wyświetlanie i edycja siatki

• Obraz jako „kalka” strony

• Rozdzielczość ekranu

• Strategia projektowa

• Rozmiary plików

Posługiwanie się kolorami

Jednym z najczęściej stosowanych okien i zarazem jednym z najważniejszych z punktu widzenia procesu projektowania jest w programie Dreamweaver okno dialogowe Page Properties. Otworzysz je wybierając pozycję Page Properties w menu Modify (patrz rysunek 7.1). Tutaj właśnie definiowany jest tytuł strony, kolor tła, obraz jako tło, kolor tekstu, schemat kolorystyki połączeń oraz określane marginesy strony. Także w tym oknie możesz wskazać obraz, który zostanie zastosowany jako „kalka” strony internetowej. Dodatkowe informacje na temat wykorzystania obrazów jako kalki znajdziesz w rozdziale 6., „Praca z obrazami”. Aby sprawnie korzystać z ustawień okna Page Properties, najpierw zobacz w jaki sposób definiuje się w nim ustawienia kolorów dla strony WWW.

Rys. 7.1. Okno dialogowe Page Properties

Definiowanie kolorów

Paleta kolorów programu Dreamweaver zawiera kolory bezpieczne, obsługiwane w Internecie, które powinny wyglądać mniej więcej tak samo na każdym komputerze.

Z poziomu okna Page Properties możesz przypisać dowolny kolor bezpieczny tekstowi lub stanom połączeń - wystarczy kliknąć próbkę koloru obok danego pola, aby wyświetlić paletę kolorów. Jeśli chcesz na przykład zmienić domyślny kolor tekstu, kliknij próbkę obok pola Text. Wskaźnik myszki przyjmie postać pipety - jest to próbnik kolorów, którym możesz pobierać próbki kolorów z dowolnych miejsc. Rysunek 7.2 prezentuje paletę kolorów.

Paleta programu Dreamweaver jest taka sama jak w programach Fireworks i Flash. W ten sposób możesz określić zestaw używanych kolorów i bezpiecznie importować obrazy do dowolnego z wymienionych programów.

Jeśli przesuniesz próbnik kolorów nad paletą, u góry pojawią się szesnastkowe kody kolorów. Kliknij żądany kolor, aby przypisać go do określonego pola.

W górnym prawym rogu palety znajdziesz dwie ikony i przycisk ze strzałką.

Rys. 7.2. Paleta kolorów programu Dreamweaver

Przycisk pozwala rozwinąć menu, w którym znajdziesz następujące pozycje:

• Color Cubes - jest to standardowa paleta kolorów bezpiecznych pod względem obsługi w Internecie. Paleta ta jest taka sama w programach Dreamweaver, Fireworks i Flash.

• Continous Tone - to polecenie spowoduje ułożenie kolorów na palecie według odcieni.

• Windows OS - wyświetlona zostanie paleta kolorów systemu Windows. Jest to standard na każdym komputerze pracującym pod kontrolą systemu Microsoft Windows.

• Mac OS - wyświetlona zostanie paleta kolorów systemu Macintosh. Jest to standard na każdym komputerze pracującym pod kontrolą systemu Macintosh.

• Greyscale - wyświetlona zostanie paleta odcieni szarości.

• Snap to Web Safe - umieść znacznik obok tej pozycji, aby Dreamweaver automatycznie wybierał bezpieczny kolor sieciowy najbliższy kolorowi wybranemu z palety kolorów systemowych Windows lub Macintosh. Opcja ta jest zaznaczona domyślnie, a więc nie usuwaj z niej znacznika, jeśli nie masz ku temu ważnego powodu. Jest stosowana do aproksymacji kolorem bezpiecznym koloru pobranego próbnikiem.

Pierwsza z ikon - biała, przekreślona czerwoną kreską - przywraca domyślne ustawienie koloru (dlatego czasami nazywa się ją gumką). Innymi słowy kliknięcie tej ikony jest równoważne brakowi przypisania koloru.

Druga ikona, o postaci kolorowego koła, otwiera okno dialogowe Color, w którym możesz zdefiniować własny kolor podając udziały jego składowych RGB (w polach Red, Green i Blue). Możesz także wskazać odcień koloru (pole Sat), jego nasycenie (pole Sat) oraz jego jasność (pole Lum). Okno Color przedstawione zostało na rysunku 7.3. Korzystanie z własnych kolorów zawsze pociąga za sobą pewne ryzyko. Kolory takie mogą nie być poprawnie obsługiwane przez 8- i 16-bitowe karty grafiki. Definiowaniem własnych kolorów zajmiemy się w dalszej części rozdziału.

Rys. 7.3. Okno Color

Wielu projektantów korzysta z okna Color, jeśli stosują oni także inne programy. Jeśli na przykład ilustracja została przygotowana w programie Macromedia Freehand i chciałbyś w Dreamweaverze dobrać dla niej odpowiednie tło, możesz w oknie Color wprowadzić wartości RGB stosowane w programie Freehand. To samo dotyczy programów Photoshop, Illustrator, Flash i innych.

Możesz oczywiście otworzyć oba dokumenty w programie Dreamweaver i za pomocą próbnika pobrać kolor z dokumentu innego programu Macromedia. Jest to bardzo użyteczna opcja, lecz czasami zbyt czasochłonna. Staraj się więc zapisywać kody szesnastkowe i wartości RGB stosowanych przez siebie kolorów, a pozwoli to zaoszczędzić masę czasu.

Ćwiczenie 7.1. Dobór koloru tła i koloru tekstu programu Flash

W tym ćwiczeniu dopasujemy kolor tła dokumentu programu Dreamweaver do koloru tła obrazu o nazwie ARTFLOWER.PNG (plik ten znajdziesz w folderze Color na dysku CD dołączonym do książki). Przygotujesz także interaktywny tekst i zastosujesz do niego taki kolor, aby pasował do obrazu.

1. Otwórz plik COLORTEST.HTML z foldera Color na dysku CD dołączonym do książki. Dokument zawiera pustą tabelę o dwóch wierszach i jednej kolumnie. Tabela ma szerokość równą 100% szerokości strony. W obu wierszach ustawiono sposób wyrównania do środka komórki i do górnej krawędzi. Kolor tła dokumentu jest biały (#FFFFFF) - jest to domyślny kolor tła w Dreamweaverze.

2. Umieść punkt wstawiania w górnym wierszu tabeli. Wybierz pozycję Image z menu Insert i wstaw plik ARTFLOWER.PNG z folder Color na dysku CD.

3. Po wstawieniu obrazu, wybierz pozycję Page Properties w menu Modify. Gdy pojawi się okno dialogowe Page Properties, przesuń go do lewego dolnego rogu ekranu. Chodzi o to, aby widzieć zarówno okno Page Properties, jak i obraz.

4. Kliknij (ale tylko raz) próbkę koloru obok pola Background. Gdy wyświetlona zostanie paleta kolorów, wskaźnik myszki przekształci się w próbnik kolorów. Gdy umieścisz próbnik nad tłem wstawionego obrazu, na pasku palety Color pojawi się wartość szesnastkowa #CCCC99 - jest to kod koloru. Kliknij, aby pobrać próbkę koloru. Teraz wartość szesnastkowa pojawi się w polu Background (patrz rysunek 7.4).

Rys. 7.4. Wybierz kolor tła korzystając z okna Page Properties i próbnika

5. Kliknij przycisk Apply, aby zobaczyć wybrany kolor i sprawdzić, czy jest właściwy. Kliknij OK, gdy jesteś gotowy opuścić okno Page Properties.

6. Wstaw pod obrazem interaktywny tekst programu Flash o treści Welcome. Na Twoim ekranie napis ten będzie wyglądał nieco inaczej niż na rysunku, bowiem przypiszesz mu czcionkę ze swoich zasobów. Najpierw jednak umieść punkt wstawiania pod obrazem, w dolnym wierszu tabeli.

7. Wybierz w menu Insert pozycję Interactive Images, a następnie pozycję Flash Text w menu podrzędnym. Wyświetlone zostanie okno dialogowe Insert Flash Text (patrz rysunek 7.5). Wybierz czcionkę z listy rozwijanej Font, wpisz w polu tekstowym Size jej rozmiar (wybierz rozmiar 30-40 punktów) i wpisz w polu Text tekst Welcome (patrz rysunek 7.6).

Rys. 7.5. Otwieranie okna dialogowego Insert Flash Text

8. Wybierz kolor tła (pole Bg Color) i kolor tekstu (pole Color) oraz kolor jaki zostanie zastosowany, gdy wskaźnik myszki znajdzie się nad tekstem (pole Rollover Color). Kliknij przycisk z próbką koloru obok odpowiedniego pola. Zacznij od zmiany koloru tła. Rozwiń paletę kolorów i pobierz próbnikiem kolorów kolor z dokumentu (kolor tła obrazu przedstawiającego kwiat) o kodzie szesnastkowym #CCCC99. Gdy ta wartość pojawi się na pasku palety, kliknij myszką, aby wybrać ten właśnie kolor. Jeśli nie wybierzesz koloru tła dla tekstu programu Flash, to zgodnie z ustawieniami domyślnymi tło będzie białe.

Rys. 7.6. Okno dialogowe Insert Flash Text

9. Teraz wybierz kolor tekstu oraz kolor jaki zostanie zastosowany, gdy wskaźnik myszki zostanie umieszczony nad tekstem. Kliknij ikonę Color (patrz rysunek 7.7). Przesuń próbnik kolorów nad obraz kwiatu. Zauważ, że wraz ze zmianą położenia próbnika zmienia się kod koloru wyświetlany na palecie. Wynika to z zastosowania w obrazie przejść tonalnych - obraz zawiera wiele wymieszanych kolorów. Wybierz kolor, który chcesz zastosować do tekstu i kliknij myszką, żeby go pobrać.

10. Powtórz tę operację opisaną w punkcie 9 dla pola Rollover Color. Określany jest w nim kolor jaki zostanie zastosowany do tekstu, gdy wskaźnik myszki będzie umieszczony nad tekstem.

11. Kliknij przycisk Apply, aby sprawdzić w dokumencie efekty wprowadzonych ustawień. Jeśli je akceptujesz, naciśnij OK.

12. Ostatni etap to przetestowanie interaktywnego tekstu. Zaznacz tekst pojedynczym kliknięciem i otwórz inspektora Property (Ctrl+F3). Naciśnij w nim przycisk Play, aby uaktywnić tekst (patrz rysunek 7.8). Przesuń następnie wskaźnik myszki nad tekst, aby sprawdzić jak prezentuje się kolor tekstu w tym przypadku. Jeśli chciałbyś coś zmienić, zaznacz tekst i naciśnij w inspektorze Property przycisk Edit, aby powrócić do okna dialogowego Insert Flash Text.

Rys. 7.7. Wybór koloru dla tekstu interaktywnego

Rys. 7.8. Jeśli zaznaczysz w dokumencie tekst programu Flash, Inspektor Property wyświetli narzędzia do obróbki tekstu

Na marginesie ćwiczenia 7.1 parę uwag. Korzystałeś w tym ćwiczeniu z dwóch typów plików, które nie są obsługiwane w przeglądarkach starszego typu.

Obraz ARTFLOWER ma format PNG (Portable Network Graphics). Choć jest to domyślny format plików graficznych programu Macromedia Fireworks, pliki takie nie są wyświetlane w niektórych przeglądarkach. Więcej informacji na temat formatu PNG znajdziesz w rozdziale 6.

W ćwiczeniu korzystałeś też z tekstu programu Flash. Tworząc taki tekst utworzyłeś plik o formacie SWF (Shockwave Flash). W przypadku publikowania dokumentu COLORTEST.HTML, plik ten, teraz zapisany na Twoim dysku twardym, musiałbyś umieścić na serwerze sieciowym (dotyczy to oczywiście wszystkich plików stowarzyszonych poprzez połączenia z dokumentem COLORTEST.HTML). Tylko wówczas użytkownicy mogliby go zobaczyć. Jest jeszcze jedno wymaganie, które musi być spełnione, aby tekst pojawił się w przeglądarce - przeglądarka musi być wyposażona w moduł dodatkowy Macromedia Shockwave.

Nowsze przeglądarki są już wyposażone w ten moduł, ale w przypadku starszych trzeba go ściągnąć i zainstalować, aby pliki programu Flash mogły być obsługiwane. Więcej informacji na temat plików SWF znajdziesz w rozdziale 18., „Animacje Flash”.

Własne kolory

Niektórym projektantom stron internetowych nie wystarcza paleta bezpiecznych kolorów sieciowych i decydują się na korzystanie z własnych kolorów. Jest to decyzja ryzykowna, ale coraz bardziej uzasadniona, biorąc pod uwagę rozpowszechnianie się kart graficznych obsługujących kolory 24- i 32-bitowe (True Color).

Kolory użytkownika będą poprawnie wyświetlane tylko wówczas, gdy karta grafiki jest w stanie wyświetlić kolory w reprezentacji True Color. Projektanci zadają więc pytanie: „Ilu użytkowników korzysta z takiego sprzętu?”.

Według badań prowadzonych przez StatMarket (www.statmarket.com) 38% użytkowników może cieszyć się pełnią barw. Około 56% korzysta z kart 16-bitowych (często tryb ten nazywany jest High Color), a tylko 6% nadal ogląda strony WWW korzystając z kart 8-bitowych (256 kolorów).

Jeśli więc jesteś gotów poświęcić kolorystyczną jakość swojej strony dla 38% użytkowników lub wiesz na pewno, że Twoja strona będzie oglądana tylko na odpowiednim sprzęcie, to bierz się do dzieła i twórz własne kolory.

Jak się do tego zabrać w programie Dreamweaver? Kliknij ikonę z próbką koloru, obok pozycji, której kolor chcesz zmienić. Wyświetlona zostanie paleta bezpiecznych kolorów sieciowych. Kliknij na niej ikonę z tęczowym kółkiem.

W wyświetlonym oknie Color (patrz rysunek 7.3):

• Kliknij kolor z palety proponowanych

lub

• Podaj w polach Red, Green i Blue wartości dla poszczególnych składowych koloru.

Okno Color przyda się nawet wtedy, jeśli będziesz korzystał tylko z kolorów bezpiecznych. Dreamweaver nie dołącza bowiem do koloru z palety wartości RGB. Jeśli więc w programie do edycji grafiki posługujesz się zestawem kolorów i chcesz ten sam zestaw zastosować w programie Dreamweaver, zapisz wartości RGB dla stosowanego zestawu i wpisz je w oknie Color programu Dreamweaver. Aczkolwiek jest w takim przypadku inne rozwiązanie - jeśli przygotowujesz obrazy w programach Fireworks, Freehand lub Flash, możesz próbnikiem kolorów Dreamweavera pobrać kolor z dokumentu innego programu i zastosować identyczny do elementu w dokumencie programu Dreamweaver.

Paleta Assets i kolory

Paleta Assets to nowy element, który pojawił się w wersji 4 programu Dreamweaver. Paleta ta przechowuje kolory zastosowane na stronach i ułatwia powtórne z nich korzystanie. Aby wyświetlić listę kolorów palety Assets:

1. Wybierz pozycję Assets w menu Window (lub kliknij F11), aby wyświetlić paletę Assets.

2. Kliknij ikonę Colors, z lewej strony palety Assets.

Rysunek 7.9 prezentuje listę kolorów mojej palety Assets. Są tu wszystkie kolory, jakie zostały użyte w mojej witrynie. Jeśli zdefiniowany został bufor połączeń dla witryny, w polu Type będzie wyświetlana informacja czy użyty kolor jest kolorem bezpiecznym, obsługiwanym w Internecie.

Rys. 7.9. Lista kolorów palety Assets

Ćwiczenie 7.2. Korzystanie z kolorów palety Assets

Aby elementowi strony WWW przypisać kolor z listy palety Assets:

1. Zaznacz tekst lub inny element, którego kolor chcesz zmienić.

2. Wybierz pozycję Assets w menu Window i kliknij ikonę Color z lewej strony palety, aby wyświetlić kategorię Color, a w niej listę kolorów.

3. Wybierz z listy kolor, który chcesz zastosować, i kliknij przycisk Apply. Możesz także przeciągnąć kolor z palety Assets na zaznaczony element.

Kolor elementu powinien się zmienić na wybrany.

Początek ramki

Podpowiedź

Możesz zmniejszyć ryzyko zabawy z kolorami korzystając z polecenia Undo. Odpowiada mu uniwersalny skrót klawiaturowy Ctrl+Z (w systemie Windows). Jeśli nie podoba Ci się zastosowany właśnie kolor, cofnij po prostu operację (ach, gdybyż tak można było w prawdziwym życiu!). Dreamweaver pozwala na cofanie trzech kolejnych operacji, a więc możesz jeśli to konieczne, możesz zrezygnować z wprowadzonych zmian.

Koniec ramki

Lista Favorite palety Assets

W trakcie prac nad stronami WWW pewne kolory są częściej używane niż inne. Jeśli pochodzą z palety bezpiecznych kolorów sieciowych, niewątpliwie zapamiętasz ich ulokowanie na palecie i pobierzesz właściwy kolor nawet z zamkniętymi oczyma. Jeśli to kolory własne, pewno ich wartości RGB masz wyryte głęboko w pamięci. Po co jednak zapychać sobie mózg takimi informacjami, skoro można często stosowane kolory umieścić na liście Favorite palety Assets w kategorii Color.

Aby dodać kolor do listy, wskaż myszką kolor, kliknij jej prawym klawiszem i wybierz z menu kontekstowego pozycję Add to Color Favorites. A oto inna metoda: kliknij ikonę ze znakiem plus (+) w prawym dolnym rogu palety Favorites (jest to ikona New Color) i próbnikiem pobierz kolor, który chcesz dodać do listy ulubionych.

Aby wyświetlić listę kolorów Favorite, wybierz na pasku palety Assets opcję Favorite. Jeśli chcesz zobaczyć listę wszystkich kolorów użytych przy projektowaniu stron witryny, wybierz opcję Site. Na tej liście kolory ulubione są wymieszane z wszystkimi pozostałymi.

W widoku Favorite możesz zgromadzić swoje kolory w folderach. Rysunek 7.10 prezentuje moje ulubione kolory rozdzielone między dwa foldery - Logo Colors i Background Colors.

Aby utworzyć folder:

1. Kliknij ikonę New Favorites Folder, u dołu palety Assets (pamiętaj, aby wybrać opcję Favorite w kategorii Color).

2. Wpisz nazwę foldera.

3. Zaznacz na liście kolor lub zestaw kolorów i przeciągnij do nowego foldera.

Rys. 7.10. Foldery kolorów palety Assets

Menu kontekstowe w widoku Color palety Assets

Inne opcje dotyczące organizacji kolorów dostępne są w menu kontekstowym lub za pomocą ikon u dołu palety Assets w widokach Site lub Favorite kategorii Color. Rysunek 7.11 menu kontekstowe, a tabela 7.1 zawiera zwięzłe opisy poszczególnych pozycji menu.

Rys. 7.11. Inne opcje dotyczące organizacji kolorów dostępne są w menu kontekstowym lub za pomocą ikon u dołu palety Assets w widokach Site lub Favorite kategorii Color

Tabela 7. Pozycje menu kontekstowego organizacji kolorów

Pozycja	Opis	Przycisk lub ikona o tej samej funkcji
Refresh Site List	Powoduje odświeżenie listy dostępnych zasobów. Kolory nieużywane zostaną usunięte. Kolory zastosowane w aktualnie otwartym dokumencie zostaną dodane do listy zasobów.	Strzałka w kształcie litery C.
Apply	Powoduje zastosowanie koloru do aktualnie zaznaczonego tekstu lub innego elementu dokumentu.	Przycisk Apply.
Edit	Ta opcja jest dostępna tylko w widoku Favorites. Powoduje wyświetlenie palety kolorów, co umożliwia modyfikację koloru lub zastąpienie go innym. Pamiętaj, że zmiana koloru tą drogą nie spowoduje aktualizacji kolorów zastosowanych w dokumencie.	Ikona z kartką i piórem.
Add to Favorites	Nadaje kolorowi status ulubionego - pojawia się on na liście Favorites.	Przycisk ze znakiem plus.
Copy to Site	Kolor zostaje skopiowany z foldera jednej witryny do foldera innej. Wybierz z menu podrzędnego witrynę, do której chcesz skopiować kolor.

Projekt i układ strony

Pewna szacowna drukarnia ma reklamowe koszulki z napisem „Projekt to dobry pomysł.” Myślę, że fraza ta podsumowuje zwięźle to, co chcemy uzyskać w przypadku naszych stron WWW: aby po jednym dobrym pomyśle pojawił się następny. W końcu, czyż nie chciałbyś, aby ktoś, kto odwiedza Twoją stronę, nie zakrzyknął na widok pasków nawigacji, wzoru tła lub zestawu fotografii i ilustracji - „Co za wspaniały pomysł!”. Ja chciałbym.

Na szczęście mamy dobre pomysły. Trzeba tylko wprowadzić je w życie, zanim przepadną. Jednym z pierwszych kroków, które możemy podjąć w tym kierunku jest wykorzystanie narzędzi projektowych programu Dreamweaver.

Wzory tła

Wielu projektantów woli stosować jako tło obrazy niż jednolite barwy. Aby wskazać obraz, który będzie tłem strony, wybierz pozycję Page Properties z menu Modify i kliknij ikonę foldera obok pola Background Image.

Aby uzyskać ciekawe rezultaty, poeksperymentuj z metodami składania tła z kafelków i utwórz taki wzór tła, aby nie było śladów sklejeń oraz nałożeń elementów na siebie (chyba, że tego właśnie chcesz). Rysunek 7.12 prezentuje wzór tła w oknie programu do edycji grafiki. Rysunek 7.13 pokazuje, jak wygląda tło dokumentu programu Dreamweaver poskładane z takich właśnie kafelków. Jeśli nie chcesz, aby tło było składane z powieleń wybranego obrazu, możesz skorzystać z kaskadowych arkuszy stylów. Są one omawiane w rozdziale 12., „Korzystanie z kaskadowych arkuszy stylów”.

Rys. 7.12. Oto obraz wybrany jako tło w programie Adobe Photoshop

Rys. 7.13. Oto tło dokumentu programu Dreamweaver złożone z kafelków

Linie siatki

Pozycjonowanie obrazów, tabel i innych obiektów jest łatwiejsze, jeśli włączone zostanie wyświetlanie siatki. W tym celu wybierz w menu View pozycję Grid, a następnie pozycję Show Grid w menu podrzędnym. Rysunek 7.14 pokazuje przykładową siatkę. Siatka może być wyjątkowo przydatnym narzędziem, ale nie zapewnia pozycjonowania co do piksela, niezależnie od przeglądarki.

Rys. 7.14. Obraz umieszczony na siatce. W przeglądarce wyświetlony zostanie tylko obraz, siatka nie

Aby wyświetlić lub zmodyfikować linie siatki, wybierz w menu View pozycję Grid, a z menu podrzędnego pozycję Edit Grid. Spowoduje to otwarcie okna dialogowego Grid Settings (patrz rysunek 7.15).

Rys. 7.15. Okno dialogowe Grid Settings

Show Grid

W oknie dialogowym Grid Settings kliknij pole wyboru Show Grid, aby włączyć lub wyłączyć wyświetlanie siatki. Wywoływanie okna nie jest jednak konieczne - wystarczy w menu View wybrać pozycję Grid, a następnie pozycję Show Grid z menu podrzędnego. Możesz też skorzystać ze skrótu Ctrl+Alt+G.

Edit Grid

Okno dialogowe Grid Settings (patrz rysunek 7.15) umożliwia wybranie stylu siatki i zdefiniowanie odstępów między jej liniami. Możesz także wskazać kolor linii i jednostkę miary (piksele, cale lub centymetry). Opcje Display pozwalają na wyświetlenie siatki zbudowanej z linii ciągłych lub kropkowanych.

Snap to Grid

Jeśli wybierzesz z menu podrzędnego Grid pozycję Snap to Grid lub zaznaczysz pole wyboru Snap to Grid w oknie dialogowym Grid Settings, elementy umieszczane na stronie będą automatycznie wyrównywane względem linii siatki. Aby opcja ta działała, siatka musi być wyświetlana.

Jeśli stosujesz wyrównywanie względem linii siatki, jest to wygodna opcja. Czasami jednak projektant chce stworzyć stronę mniej statyczną, o bardziej spontanicznym układzie - wówczas dosuwanie do linii siatki może być irytujące. Zawsze jednak możesz wyłączyć (lub włączyć) opcję jednym skrótem klawiszowym - Ctrl+Alt+Shift+G. Pamiętaj, że siatka to tylko narzędzie pomocnicze programu Dreamweaver. Na opublikowanej stronie WWW sposób wyrównania będzie zależał od szerokości zastosowanych tabel i interpretacji tabel przez przeglądarki. Innymi słowy, niech siatka nie uśpi Twej czujności.

Początek ramki

Uwaga

Jeśli szukasz w Dreamweaverze czegoś na podobieństwo prowadnic z programów graficznych lub DTP (na przykład z programu Quark Xpress), to nie masz szczęścia - Dreamweaver nie udostępnia prowadnic. Możesz je zastąpić tabelą lub obrazem-kalką. Więcej informacji o tabelach znajdziesz w rozdziale 8., „Definiowanie układu strony za pomocą tabel”

Koniec ramki

Kalki

Dreamweaver umożliwia podłożenie pod obszar roboczy obrazu, który będzie pełnił rolę wzorca czy też kalki (ang. Tracing Image). Obraz taki pomaga w rozplanowaniu układu strony i zaprojektowaniu strony. Może się na przykład zdarzyć, że Twój klient zażyczy sobie wykonanie stron WWW w oparciu o drukowane broszury reklamowe swojej firmy (i nie udostępni broszury w wersji elektronicznej). Wówczas tok postępowania byłby taki: skanujesz broszurę i stosujesz zeskanowany obraz jako wzorzec tworzonej strony. Obraz wzorcowy nie zostanie dołączony do plików witryny i w związku z tym nie będzie wyświetlany w przeglądarce.

Kalki są pomocne także w pracy grupowej. Na przykład projektant prezentuje żądany układ strony WWW na rysunku, a ktoś inny stosuje ten plik graficzny jako kalkę tworzonych stron. Należy jednak pamiętać, że obrazy-kalki, podobnie jak siatka, nie są wyświetlane w przeglądarce.

Rysunek 7.16 prezentuje obraz-kalkę w widoku układu strony (Layout View) - narysowano już na nim kilka komórek tabeli. Informacje na temat wykorzystania tabel w projektowaniu układu strony znajdziesz w rozdziale 8.

Rys. 7.16. Oto strona WWW Nutella.com jako „kalka” w widoku układu strony

Aby umieścić na stronie obraz-kalkę:

1. Wybierz w oknie dokumentu pozycję Page Properties z menu Modify.

2. Kliknij przycisk Browse obok pola Tracing Image, aby wybrać obraz, który chcesz zastosować jako kalkę.

3. Za pomocą suwaka Image Transparency określ stopień przeźroczystości obrazu (0% - obraz będzie niewidoczny; 100% - obraz całkowicie nieprzeźroczysty). Najrozsądniejsza wartość to 50%.

4. Kliknij przycisk Apply, aby przetestować wygląd obrazu w oknie dokumentu.

5. Kliknij OK, jeśli uznasz, że poziom przeźroczystości jest odpowiedni.

Jest jeszcze inna metoda umieszczania obrazu-kalki na projektowanej stronie. Wybierz w menu View pozycję Tracing Image, a z menu podrzędnego pozycję Load. Menu podrzędne zawiera jeszcze cztery inne pozycje (patrz rysunek 7.17):

• Show - umożliwia włączanie i wyłączanie wyświetlania kalki.

• Align with Selection - kalki wyrównuje kalkę o x, y pikseli względem górnego lewego rogu aktualnie zaznaczonego obiektu.

• Adjust - pozwala precyzyjnie określić współrzędne kalki.

• Reset - przywraca obrazowi stosowanemu jako kalka jego pozycję domyślną (z lewej strony ekranu).

Rys. 7.17. Pozycje menu podrzędnego Tracing Image

Marginesy strony i ich szerokość

Marginesy strony ustawia się w oknie dialogowym Page Properties (wybierz pozycję Page Properties w menu Modify lub zastosuj skrót Ctrl+J). Szerokości marginesów definiowane są w pikselach, w polach Left Margin i Top Margin (Internet Explorer) lub w polach Margin Width i Margin Height (Netscape Navigator). Jeśli pola pozostawisz puste, niektóre przeglądarki i tak zastosują marginesy domyślne o szerokości jednego lub dwóch pikseli. Aby temu zapobiec, wpisz w polach marginesów wartości 0. A ponieważ różne przeglądarki obsługują różne atrybuty marginesów, umieść wartość 0 we wszystkich czterech polach.

Eksperymentowanie z różnymi ustawieniami marginesów może prowadzić do ciekawych efektów. Możesz zdefiniować marginesy równe 0, aby obraz „stapiał” się z paskami przewijania przeglądarki. Z kolei zastosowanie bardzo szerokich marginesów pozwala wymusić pojawienie się obrazu lub innego elementu strony w określonym miejscu.

Linijki

W oknie dokumentu programu Dreamweaver można włączyć wyświetlanie linijek. Pojawiają się one u góry dokumentu i z jego lewej strony. Dostęp do linijek masz w menu View - wybierz pozycję Rulers, a następnie pozycję Show z menu podrzędnego, lub zastosuj skrót Ctrl+Alt+R.

Rysunek 7.18 prezentuje menu podrzędne Rulers. Umożliwia ono wybranie jednostki miary na linijkach - pikseli, cali lub centymetrów.

Rys. 7.18. Pozycje menu podrzędnego Rulers

Domyślnie, linijki mają swój początek (punkt 0,0) w lewym górnym rogu okna. Jeśli chcesz zmienić początkowe punkty linijek, kliknij kwadrat na przecięciu linijek (w białym kolorze, z dwoma przecinającymi się liniami) i przeciągnij ustawienie początku do dowolnej wartości.

Aby przywrócić wartości domyślne (a więc ponownie 0,0), wybierz w menu View pozycję Rulers, a potem pozycję Reset Origin z menu podrzędnego. Możesz także kliknąć dwukrotnie kwadrat przecięcia obu linijek.

Projektowanie internetowe: duży obraz

Projektowanie internetowe może być Twoim zawodem, hobby lub katorgą. Nieważne czym jest. Ważne, abyś uświadomił sobie, że oprócz palet kolorów, siatki i linijek jest coś jeszcze, co musisz jako projektant wziąć po uwagę - rozdzielczość ekranu i rozmiary plików. W kolejnych punktach zajmiemy się tymi tak istotnymi z punktu widzenia projektowania internetowego kwestiami.

Rozdzielczość ekranu

Rozdzielczość ekranu często jest przyczyną zamieszania. Brak wiedzy na temat zasad skanowania i dostosowywania rozmiaru obrazów do okien przeglądarki może zniweczyć nawet najwspanialszy pomysł. Pierwszym krokiem ku uporządkowania naszej wiedzy jest przyjęcie tezy, że obrazy internetowe są przeznaczone do wyświetlania na monitorach - takie obrazy powinny zawsze mieć rozdzielczość 96 lub 120 dpi (w przypadku systemu Windows; a 72 dpi w przypadku systemu Macintosh).

Kolejna rada - w fazie przygotowania obrazu niech Twoją jednostką miary będzie piksel. Stosuje ją komputer, stosuj i Ty. Pamiętaj także, że niektórzy odbiorcy Twoich stron nie będą w stanie zobaczyć obrazów lub dokumentów o szerokości przekraczającej 600 pikseli (możesz oczywiście wiedzieć z góry, że nie ma takiego zagrożenia - wówczas nie ma zmartwienia). To nic, że Ty masz śliczny monitor 21-calowy. Są tacy, co nie mają. Weź także pod uwagę kwestię wyglądu Twoich stron w różnych przeglądarkach, a szczególnie na różnych platformach, począwszy od komputerów PC, a skończywszy na komputerach Macintosh.

Tworząc strony WWW pamiętaj, że użytkownicy korzystają z określonej rozdzielczości. Na przykład u mnie rozdzielczość jest ustawiona na 800x600. Oznacza to, że w poziomie zobaczę 800 pikseli, a w pionie 600. Gdybym korzystał z rozdzielczości 640x4800 odpowiednie wartości wynosiłyby 640 i 480.

Projektanci stron muszą w swoich projektach uwzględnić relacje między stroną a oknem przeglądarki. Pojawiają się tu dwa problemy:

• Strony mogą być za szerokie w stosunku do okna przeglądarki użytkownika, co zmusza przeglądarkę do wyświetlenia paska przewijania u dołu okna.

• Strony mogą być zbyt wąskie względem okna przeglądarki, co powoduje wyświetlenie białego paska z prawej strony.

Chociaż nie ma konkretnych rozwiązań tych problemów, masz pewne możliwości wyboru. Pierwsza możliwość, to wcześniejsze ostrzeżenie użytkownika za pomocą ekranu tytułowego zawierającego informację odnośnie zalecanej rozdzielczości. Możesz pójść jeszcze dalej i dodać do pierwszej strony skrypt JavaScript, który sam określi rozdzielczość stosowaną przez użytkownika i przepuści użytkowników z „właściwą” rozdzielczością nie niepokojąc ich komunikatem.

Początek ramki

Podpowiedź

Możesz ściągnąć rozszerzenie z Macromedia Exchange, które umożliwi dokonywanie detekcji rozdzielczości ekranu, oraz skierowanie użytkownika do odpowiedniego zestawu stron.

Rozszerzenie znajdziesz pod adresem www.macromedia.com/exchange. Hasło wyszukiwania to resolution. Po zainstalowaniu rozszerzenia, masz dostęp do skryptu obsługującego detekcję trzech różnych rozdzielczości oraz przekierowywanie.

Koniec ramki

Strategia projektowa

Jednym ze sposobów zapewnienia pełnego wykorzystania przestrzeni jest stosowanie tabel definiowanych w procentach szerokości okna. Technika ta często nazywana jest często „układem płynnym”, bowiem układ strony automatycznie dostosowuje się do okna przeglądarki użytkownika - elementy strony zmieniają rozmiary i przesuwają się w kierunku krawędzi okna przeglądarki. W rozdziale 8. dowiesz się jak zaprojektować w programie Dreamweaver takie tabele (to naprawdę proste!). Wadą tej metody jest to, że nie można jej stosować do obrazów. Obrazy mają określone rozmiary i nie powinny być rozciągane ani kondensowane, chyba że nie zależy Ci na ich jakości.

Trzecia i ostatnia z możliwości to określić już na wstępie prac projektowych szerokość strony w pikselach. Na rysunku 7.19 przedstawione jest takie właśnie rozwiązanie. Projektanci witryny Oxygen.com zdecydowali się na stronę o szerokości 600 pikseli, mając świadomość, że przy wyższej rozdzielczości na monitorach pojawi się biały pas z prawej strony.

Rys. 7.19. W projekcie strony WWW Oxygen.com wykorzystano kolorowe prostokąty i białe tlo, co minimalizuje dodatkową wolną przestrzeń z prawej strony ekranu

Zastosowanie określonej szerokości strony ma swoje zalety. Przede wszystkim zawsze możesz wykorzystać dodatkową powierzchnię wstawiając tam elementy, które nie są istotne z punktu widzenia przesłania strony. Można tam umieścić na przykład parę połączeń tekstowych, kilka ogłoszeń reklamowych, menu rozwijane lub małą ankietkę. Niektórzy użytkownicy zobaczą te elementy, inni nie.

Dreamweaver udostępnia na pasku stanu menu Window Size, które pomoże Ci rozwiązać tę kwestię (patrz rysunek 7.20). Spójrz więc na pasek stanu, a znajdziesz je obok mini-paska szybkiego uruchamiania. Wyświetlane wartości określają w pikselach aktualnie stosowane rozmiary (na przykład 760x420). Rozwiń menu, aby wyświetlić listę rozdzielczości ekranu.

Rys. 7.20. Menu Window Size

Menu Window Size pozwala dobrać rozmiary okna do najczęściej stosowanych rozdzielczości. Korzystając z tej rozdzielczości możesz przetestować wygląd dokumentu na różnych ekranach. Opcja Edit Sizes umożliwia dodanie do listy nowych pozycji.

Przepustowość łączy a rozmiar plików

Zawsze znajdzie się ktoś, kto będzie się upierał, że Twoje strony ładują się zbyt wolno. Nikt tego nie lubi słuchać, dlatego projektanci stron WWW mają fioła na punkcie rozmiaru plików. Niektórzy przyjmują regułę praktyczną - czas ładowania strony nie może być dłuższy niż 8 sekund, bo użytkownik dłużej nie będzie czekał.

Czasami kusi Cię, aby skłonić użytkowników do zaczekania. Myślisz - a może jednak woleliby zobaczyć piękny, lecz ładujący się kilka sekund obraz, zamiast małego, zamazanego obrazeczka, który pojawi się w pół sekundy, co prawda? Może tak, a może nie.

To od Ciebie zależy, jak długo użytkownicy będą chcieli grać w tę grę na czekanie. Zastanów się, gdzie akurat będą użytkownicy odwiedzający Twoje strony. Jeśli wiesz, że 75% z nich korzysta z linii T1 swojej firmy, zrelaksuj się i spokojnie zwiększ jakość obrazu.

Jeśli natomiast połowa siedzi w domu przed komputerami podłączonymi do sieci przez modemy, lepiej zmniejsz swoje obrazy. W przeciwnym razie, na pewno pojawią się skargi.

Skuteczne skracanie czasu ładowania oznacza, że musisz podjąć wszelkie wysiłki, aby zmniejszyć ilość danych w plikach. Duże lub niepoprawnie sformatowane obrazy powodują, że przeglądarka „zacina” się przy ich ściąganiu. Podobny problem pojawia się przy dużych ilościach tekstu. Wśród pozostałych winowajców tego typu zachowań znajdziesz pliki dźwiękowe, moduły dodatkowe, ogłoszenia reklamowe, a wszystko na i tak zapchanych serwerach sieciowych.

Śledzenie rozmiaru plików

Dreamweaver ma dwa narzędzia, które będą pomocne w walce z czekaniem. Przede wszystkim możesz wyświetlić rozmiary wszystkich plików witryny. Wybierz pozycję Site Files (lub naciśnij klawisz F8) i sprawdź w oknie Site zawartość kolumny Size. Rysunek 7.21 pokazuje przykład.

Rys. 7.21. Przeglądanie rozmiaru plików w oknie Site

Aby sprawdzić rozmiar pliku graficznego w oknie dokumentu programu Dreamweaver, zaznacz obraz i odczytaj wartość podawaną w inspektorze Property (obok ikony obrazu) (patrz rysunek 7.22).

Rys. 7.22. Zaznacz obraz i sprawdź w inspektorze Property rozmiar pliku

W oknie dokumentu programu Dreamweaver znajdziesz na pasku stanu wskaźnik rozmiaru całego dokumentu i orientacyjny czas ładowania dokumentu (znajdziesz go między menu Window Size a mini-paskiem szybkiego uruchamiania). Wskaźnik ten przedstawiony jest w postaci ilorazu obu wielkości - na przykład 36K/10 sec. Narzucając określoną przepustowość łącza można oszacować czas ładowania.

Aby zmienić stosowaną w obliczeniach przepustowość łącza, wybierz w menu Edit pozycję Preferences, a w oknie dialogowym Preferences wskaż kategorię Status Bar (patrz rysunek 7.23). Rozwiń listę Connection Speed i wybierz wartość, dla której chcesz oszacować czas ładowania dokumentu.

Rys. 7.23. Wybieranie przepustowości łącza, dla której chcesz oszacować czas ładowania dokumentu

Oto kilka rad, które pozwolą skrócić czas ładowania dokumentu:

• Dziel długie teksty na krótsze fragmenty. Daj użytkownikom możliwość przeglądania materiału strona po stronie. Długie strony ładują się długo.

• Przygotowuj swoje obrazy w programie do obróbki grafiki, takim jak na przykład Fireworks. Specjalizowane programy graficzne wyposażone są w narzędzia pozwalające eksportować pliki do formatu GIF i JPEG. Adobe Photoshop także ma już te opcje. Naucz się z nich korzystać.

• Przygotowuj małe obrazy. Ponieważ obszar jakim dysponujesz jest niewielki, staraj się go tak wykorzystać, aby wywrzeć maksymalne wrażenie.

• Przestudiuj techniki obróbki obrazu, takie jak posteryzacja, pikselizacja i przeźroczystość. Dzięki nim Twój obraz będzie wyglądał bardziej interesująco, nie zwiększając swojego rozmiaru.

• Staraj się stosować na wszystkich stronach witryny ten sam pasek nawigacji. Dzięki temu użytkownik będzie go musiał ściągać tylko raz. W programie Dreamweaver umieść swój pasek nawigacji w bibliotece, aby ułatwić dostęp do niego. W rozdziale 16., „Biblioteki i szablony” dowiesz się jak korzystać z bibliotek. Czas ładowania możesz dodatkowo skrócić stosując układy ramek i korzystając z uzupełniania kodu po stronie serwera.

• Stosuj miniatury obrazów jako połączenia prowadzące do pełno wymiarowych wersji. W rozdziale 6. znajdziesz więcej informacji na ten temat.

Początek ramki

Britt Funderburk - projektowanie dla Internetu

Britt Funderburk Naczelny Projektant w Oxygen Media, Inc. zgodził się zdradzić parę sekretów dobrego projektowania stron internetowych (patrz rysunki 7.24-7.26). Kiedyś, gdy Brick i ja byliśmy szkolnymi kolegami, Brick tworzył natryskiwane kartki imieninowe i koszulki z frapującymi napisami. Teraz podejmuje decyzje projektowe dla multimedialnych kompanii Nowego Jorku wyznaczających kierunki rozwojowe. Czas dla Ciebie, Britt!

Jak to się stało, że zająłeś się akurat projektowaniem internetowym i co robisz teraz?

Podobnie jak inni graficy poniekąd wpadłem w to. Zaczynałem wraz z początkiem Internetu od projektowania stron e-komercji i programów multimedialnych na płytach CD-ROM. Stąd do interaktywności już niedaleko. Zacząłem pracę w Discovery Channel Online, co było niesamowitym doświadczeniem. Potem zajmowałem się różnymi projektami. Obecnie współpracuję z Oxygen Media - jest to nowa firma internetowa i telewizja kablowa.

Czy projektując swoje strony WWW korzystasz z siatki?

Nie stosuję jakiejś określonej siatki. Kluczem do sukcesu strony WWW jest przemyślana architektura informacji. Projektanci powinni mniej myśleć o tym, jak ma wyglądać ich dzieło, a więcej o tym, jak ma działać. Jeśli jesteś w stanie określić cel strony WWW, najlepszy jej układ stanie się bardziej oczywisty.

Czy powinniśmy się trzymać się tylko bezpiecznych kolorów sieciowych, czy też możemy sobie pozwolić na stosowanie własnych (skoro nowy sprzęt poradzi sobie z nimi)?

W głębi duszy jestem minimalistą i zawsze największą radość sprawiało mi radzenie sobie z wszelkimi ograniczeniami. Lecz ten problem dotyczy Twoich odbiorców. Jeśli masz nadzieję dotrzeć do liczącej się grupy użytkowników korzystających z gorszego sprzętu i starszych wersji oprogramowania, wydaje mi się, że powinieneś wziąć pod uwagę istnienie określonych ograniczeń i w swoich decyzjach projektowych je uwzględnić.

Co jest najważniejszą sprawą przy projektowaniu systemu nawigacji?

Nawigacja musi być oczywista i konsekwentna. Projektanci popełniają często ten sam błąd tworząc całkowicie różne systemy nawigacji w każdej z projektowanej przez siebie witryn, zamiast bazować na sprawdzonych systemach. Nie jest najlepsze rozwiązanie. Dając użytkownikom niestandardowy system nawigacji, żądasz od nich nauczenia się czegoś nowego, zanim będą w stanie korzystać z Twoich stron. Jeśli ktoś nie „złapie” szybko o co chodzi, to na pewno szybko odejdzie do innych stron.

Projektując stronę WWW jak podchodzisz do kwestii relacji szerokości okna względem szerokości strony?

Chociaż wiele witryn projektuje się obecnie dla rozdzielczości 800x600, nadal najbardziej kompatybilną rozdzielczością pozostaje 600x400. Często rozwiązaniem jest zastosowanie „układu płynnego”, co pozostawia rozwiązanie problemu w gestii sprzętu użytkownika. W przypadku stosowania tego typu rozwiązania projekt przewidziany jest zazwyczaj na mniejsze rozmiary okna i powiększa się proporcjonalnie wraz ze wzrostem tych rozmiarów. W ten sposób projekt staje się niezależny od wielkości ekranu.

Z jakich technik korzystasz przy planowaniu wolnych obszarów na stronach WWW?

Kiedyś stosowaliśmy niewidoczne obrazy o rozmiarach 1x1piksel i w kolorze tła. Teraz korzystamy z kaskadowych arkuszy stylów, bowiem pozwalają one precyzyjniej pozycjonować elementy. Brak kompatybilności platform i przeglądarek stanowi jednak utrudnienie w dojściu do takiej precyzji, jakiej chcieliby projektanci.

Jakiej rady udzieliłbyś komuś, kto dopiero zaczyna zajmować się projektowaniem stron WWW?

Samolot to nie rower, a witryna sieciowa nie jest telewizorem. Innymi słowy, ponieważ witryny są interaktywnymi aplikacjami, wymagają absolutnie innego potraktowania niż plakat czy książka. Jedną z ważniejszych umiejętności jest umiejętność konstruowania jasnego i konsekwentnego systemu nawigacji. Analizuj systemy popularnych witryn i ucz się w ten sposób jak je tworzyć. Co sprawia, że witryny te działają? Co w nich jest, że są użyteczne? Stosuj techniki, które już się sprawdziły. Poprawiaj je, jeśli potrafisz, ale zawsze staraj się, aby były proste.

Koniec ramki

Rys. 7.24. Britt Funderburk, Naczelny Projektant Oxygen Media, Inc.
Rys. 7.25. Witryna sieciowa Oxygen Media zaprojektowana przez Britta Funderburka
Rys. 7.26. Inny projekt Britta Funderburka - tutaj układ strony korzysta z poziomego paska przewijania

Podsumowanie

Projektowanie stron WWW to nowa dziedzina. Projektanci internetowi stoją przed szeregiem nowych problemów związanych z rozpraszaniem kolorów, rozmiarami plików i szerokościami okna przeglądarki. Na szczęście stosowane przez nich medium jest elastyczne. Jeśli na przykład na opublikowanej stronie WWW kolor nie prezentuje się dobrze, zawsze można go zmienić. W przypadku takiej samej strony papierowej kłopot byłby znacznie większy.

Podstawowe zasady projektowania stron WWW można poznać czytając podręczniki, szukając w Internecie witryn edukacyjnych i uczestnicząc w kursach sieciowych. Dreamweaver pozwala wdrożyć te zasady w życie. Wersja 4 programu zawiera narzędzia, takie jak paleta bezpiecznych kolorów sieciowych, okno Color, siatka, obrazy-kalki oraz menu Window Size, które pomagają rozwiązywać zarówno te częste, jak i incydentalne problemy.

Wzrost popularności przeglądarek obsługujących kaskadowe arkusze stylów i nowe znaczniki formatowania zmusza projektantów do nieustannego rozwoju. Muszą oni bowiem dbać o to, aby projektowane przez nich strony korzystały z możliwości nowych technik. W tym celu projektanci mogą przeanalizować menu programu Dreamweaver i sprawdzić, co oferuje. Następny etap rozwoju własnych umiejętności to zastosowanie narzędzi w praktyce. W efekcie tej pracy strony będą lepiej się prezentować, szybciej ładować, a użytkownicy będą je chwalić.

W tym rozdziale zajmowaliśmy się takimi kwestiami projektowymi, jak posługiwanie się kolorami. Poruszaliśmy też zagadnienia dotyczące projektu i układu strony, takie jak korzystanie ze wzorów tła i z obrazów stanowiących wzorzec strony, definiowanie marginesów i wyświetlanie linijek. Ostatnim z poruszanych problemów była strategia projektowa. Mam nadzieję, że udało mi się przybliżyć Ci różne strategie, a pytania postawione w tym rozdziale będą pomocne w budowaniu witryny, które spełni Twoje cele.

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

2 G:\DREAM_trans\rozdz07.doc

---