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:

q       Posługiwanie się kolorami

q       Wzory tła

q       Wyświetlanie i edycja siatki

q       Obraz jako „kalka” strony

q       Rozdzielczość ekranu

q       Strategia projektowa

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

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

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

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

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

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

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

q       Greyscale – wyświetlona zostanie paleta odcieni szarości.

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

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

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

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.

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.

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

q       Kliknij kolor z palety proponowanych

lub

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

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