Ktokolwiek zna się na tworzeniu stron internetowych, wie, że zazwyczaj nie zaczyna się od struktury HTML. Zamiast tego sięga się po program graficzny i tam tworzy się układ strony. (Osoba pracująca w agencji otrzymuje układ od grafika lub klienta). Następnie zadaniem jest zbudowanie strony na podstawie tego układu. O to teraz chodzi.
W kontekście odtwarzania układów, będziesz się często spotykać z terminami Slicing i Dicing. Tak naprawdę oznacza to, że bierzesz szablon lub projekt, kroisz go w swoim programie graficznym, a następnie łączysz ponownie za pomocą HTML.
Odpowiedni program graficzny
No cóż, każdy ma swoje preferencje, który program chciałby najchętniej używać. Tak samo jest z programami graficznymi. Jednak w kontekście profesjonalnego webdesignu sytuacja wygląda nieco inaczej. Tam praktycznie wyłącznie pracuje się w Photoshopie. Faktycznie większość projektów projektowych jest dostępna w formacie PSD. I właśnie ten format PSD nie można otworzyć lub edytować we wszystkich programach.
Jeśli nie masz Photoshopa, to nie jesteś całkowicie bezradny. Możliwą alternatywą jest np. GIMP. Program ten możesz pobrać za darmo ze strony http://www.gimp.org/. Pokażę wam podstawowe kroki tworzenia układu za pomocą GIMP. Działa to w podobny sposób także w Photoshopie.
Tworzenie własnego układu
Najpierw zastanów się nad podstawowymi aspektami projektowania:
• Jak szeroki ma być układ?
• Ile kolumn powinno zawierać?
Następnie utwórz obszar roboczy za pomocą Plik>Nowy i ustaw jego rozmiar. Chociaż stworzony przeze mnie układ będzie "wypełniał stronę", to właściwa treść ma tylko szerokość 1000 pikseli. Jako wysokość układu ustawiam 887 pikseli. (Przy czym wysokość strony internetowej później i tak będzie zależała od zawartości).
Zatwierdź dane za pomocą OK. W ten sposób masz gotowy obszar roboczy, który można wypełnić treścią. (Dla przejrzystości pracuję w projekcie z szarym tłem. Na stronie internetowej to tło nie będzie widoczne).
Typowym elementem, który powinien znaleźć się na stronie internetowej, jest logo, które zwykle jest dostarczane jako grafika. Aby dodać je do układu, wybierz Plik>Otwórz i wybierz swoje logo, które powinno być w formatach PNG, GIF lub JPEG. Potwierdź wybór klikając Otwórz. Następnie naciśnij Ctrl+C, aby skopiować logo do schowka. Przejdź następnie do projektu webdesignu i naciśnij tam Ctrl+V. Wklejone logo nie będzie się jeszcze znajdować na odpowiednim miejscu. Za pomocą narzędzia Przenoszenia możesz jednak łatwo przesunąć je na właściwą pozycję.
Jeśli obraz nie da się przesunąć, musisz najpierw aktywować warstwę. Odpowiednie ustawienia znajdziesz w Okno>Szybkie okna>Warstwy.
Dla lepszej orientacji zalecam wyświetlenie linii pomocniczych. Kliknij więc lewym przyciskiem myszy na linijkę i przeciągnij ją trzymając wciśnięty lewy przycisk myszy w odpowiednie miejsce.
Możesz dowolnie przesuwać wiele linii pomocniczych, według których można wyrównywać elementy strony internetowej.
Stwórz teraz kolejną warstwę. Ta warstwa powinna zawierać górne menu.
Jako nazwę można podać Górne Menu. Stwórz warstwę za pomocą OK. Wybierz narzędzie do Wybierania prostokątnego i przeciągnij obszar, w który ma zostać wstawiona nawigacja.
W bieżącym przykładzie zakładam, że tło górnego menu otrzyma przejście kolorów. Kliknij więc na Przebieg kolorów: Wybór z przebiegiem kolorów (wypełnienie).
Przebieg kolorów ma przebiegać od szarości do czerni. Odpowiednie kolory można ustawić za pomocą pól koloru. Jako typ przebiegu ustawiam od jasnego do ciemnego, czyli od koloru przodu do tła. Naciśnij teraz klawisz Ctrl i przeciągnij linię od góry do dołu w wybranym obszarze. Po puszczeniu lewego przycisku myszy obszar ma pożądany przebieg kolorów.
W zasadzie masz teraz dwie możliwości:
• Możesz zostawić obszar nawigacji takim, jaki jest.
• Możesz dodać poszczególne punkty menu, aby w projekcie dokładniej zobaczyć, jakie czcionki itp. są używane.
Wybór między tymi dwoma wariantami zależy ostatecznie od ciebie. Jeśli jednak chcesz przedstawić projekt klientowi, polecam dodanie punktów menu. Doświadczenie pokazuje, że wielu klientów brakuje wyobraźni w tej kwestii.
Najpierw wybierz czcionkę. W GIMP znajdziesz odpowiednie ustawienia pod Okno>Szybkie okna>Czcionki.
Przez całą serię omawiano problematykę czcionek w kontekście CSS i HTML. Teoretycznie jako projektant stron internetowych możesz podać dowolną czcionkę. Jednak nie wiesz, czy jest ona faktycznie dostępna na komputerze odwiedzających i czy będzie wyświetlana, dlatego efekty, zwłaszcza przy użyciu bardzo egzotycznych czcionek, są trudne do kontrolowania. O tej kwestii jeszcze raz wspomnę w trakcie tej serii, gdy będę omawiał czcionki strony przykładowej. W przypadku tego konkretnego układu wybieram jednak następujące ustawienia:
• Verdana pogrubiona
• 20 pikseli
• Biały kolor czcionki
Możecie teraz dodać poszczególne elementy menu w ten sposób. Najlepiej jest skopiować warstwę, w której znajduje się pierwszy element menu, i wkleić ją jako nową warstwę. Następnie można dostosować tekst warstwy. Tak powstanie górne menu.
Górne menu powinno mieć efekt zwisu (hover). Przy najechaniu kursorem myszy na poszczególne elementy menu, zmienia się ich kolor tła. Ten aspekt również powinien być zobrazowany w projekcie. W tym celu należy ustawić pożądany kolor zwisu i skopiować jedną z istniejących warstw menu. Przypisuje się ten kolor do tej warstwy. W obecnym przykładzie zakładam zastosowanie niebieskiego gradientu koloru. Następnie można wstawić tekst elementu menu. Dzięki temu można już uzyskać wyobrażenie, jak ostatecznie będzie wyglądało menu.
