Fireworks 4 i Dreamweaver 4

W tym ćwiczeniu utworzymy system nawigacji dla fikcyjnej witryny dla samotnych, nazwanej lonesome.com.

W tym ćwiczeniu utworzymy system nawigacji dla fikcyjnej witryny dla samotnych, nazwanej lonesome.com.

Stworzymy wysuwające się klawisze, uaktywniające menu w DHTML. Zobaczmy, jak Dreamweaver i Fireworks współpracują ze sobą.

1. Potrzebujesz Dreamweavera 4, Fireworks 4 oraz przeglądarki internetowej, najlepiej Internet Explorera w wersji 4.0 lub nowszej, jeśli chcesz śledzić postępy krok po kroku. Aby rozpocząć, uruchom Fireworks, wybierz File>New, by stworzyć nowy dokument z ustawieniami: szerokość 600, wysokość 120, rozdzielczość 72 dpi, kolor tła biały.

2. Używając narzędzia tekstowego, stwórz okno tekstowe, zawierające napis "lonesome.com" oraz sformatuj je. Ja używam czcionki ITC Officina Sans Bold 34 pkt, kolor #FF6600 oraz #666666. Użyj narzędzia Pen z wciśniętym shiftem, aby narysować linię podkreślającą. Użyj panela Stroke, żeby ustawić atrybuty linii dla ołówka (Pencil) - jeden piksel - o tym samym kolorze, który wybrałem, żeby pasował do tego w arkuszu stylów, którego użyjemy później.

3. Następnie stworzymy grafikę dla naszego wyskakującego przycisku. Narysuj prostokąt o czarnej krawędzi grubości jednego piksela i białym wnętrzu. Ulokuj go ponad początkiem linii. Stwórz napis "menu" przy użyciu Verdany 10 pkt., bez antialiasingu, w tym samym pomarańczowym kolorze. Wybierz File>Import, aby umieścić plik "arrows.gif".

4. Teraz zmienimy naszą pracę w przyciski w programie Fireworks. Ostrożnie zaznacz tylko ramkę, tekst menu oraz strzałkę. Następnie przywołaj okno dialogowe Symbol Properties przy użyciu klawisza F8. Wybierz Type Button, nazwij go "Menu", kliknij OK.

5. Żeby dodać efekt "rozwijania" do stworzonego przycisku, podwójnie kliknij w narzędzie solid pointer. Otworzy się okno edycji symboli. Przejdź do stanu rozwinięcia klikając na zakładkę, a następnie wciśnij Copy Up Graphic. Zmienimy kolor tekstu na jasnoniebieski - #0066FF. Zamknij okno symboli, jeśli skończyłeś.


Zobacz również