Zaokrąglane menu na stronę WWW
Tutorial
Tutorial przedstawia sposób wykonania prostego lecz ciekawie prezentującego się menu na stronę WWW.
Tutorial napisany w wersji GIMPa 2.4. W innych wersjach nazwy narzędzi i pojęć mogą się różnić.
Zaczynamy 1. Tworzymy nowy Dokument o wielkości np. 648 x 115px.
2. Tworzymy nową warstwę o nazwie
ramka.
3. Tworzymy zaznaczenie prostokątne
(R). Mniej więcej tak:
4. Klikamy
Zaznaczenie > Zaokąglenie Promień ustawiamy na 30%. Klikamy OK.
5. Zaznaczenie wypełniamy na biało
(Shift + B).
6. Tworzymy nową warstwę. Nazywamy ją
srodek.
7. Klikamy
Zaznaczenie > Zmniejsz. Ustawiamy 3px. Klikamy OK.
8. Zmieniamy kolor pierwszoplanowy na
#F0B259 a kolor tła na
#F87811.
9. Wybieramy narzędzie Gradient
(L). Przeciągamy od góry do dołu zaznaczenia. Klikamy
Zaznaczenie > Nic. Powinno wyglądać tak:
10. W okienku
Warstwy zaznaczamy warstwę o nazwie
ramka. W oknie z naszą pracą klikamy
Filtry > Światło i cień > Rzucanie cienia. Ustawiamy parametry następująco:
Klikamy OK.
11. Narzędziem Tekst
(T) z następującymi parametrami:
Czcionka > Verdana, Rozmiar > 25 px, Kolor > biały tworzymy napis
Home.
12. Tworzymy nową warstwę.
13. Zaznaczamy narzędziem Zaznaczenie prostokątne
(R) linię szerokości 2 pixeli. Mniej więcej tak:
14. Zmieniamy kolor pierwszoplanowy na biały i wypełniamy zaznaszenie Kubełkiem
(Shift+B). Krycie warstwy z linią zmniejszamy na 17%.
15. Tworzymy kolejne opcje menu.
16. Duplikujemy warstwę z liniami oddzielającymi tyle razy ile potrzebujemy - w okienku warstw zaznaczamy warstwę do duplikacji i klikamy przycisk
na dole okienka. Przesuwamy
zduplikowaną linię w to miejsce, gdzie ma się znajdować na obrazku. Czynności 15 i 16 należy powtórzyć, aby uzyskać podobny efekt końcowy:
Koniec
Jeśli coś jest dla Was niezrozumiałe to piszcie, natychmiast wytłumaczę.
1. Otwieramy efekt naszej dotychczasowej pracy za pomocą GIMPa.
2. Ustawiamy prowadnice tam gdzie menu ma być podzielone. Wykonujemy to w ten sposób:
3. Na linie dzielące opcje menu, prowadnice wysuwamy w ten sposób:
4. Dzielimy menu aby wyglądało mniejwięcej tak:
5. Zaznaczamy zaznaczeniem prostokątnym (R) pierwszą część. Prawa krawędź zaznaczenia musi się pokrywać z pierwszą prowadnicą.
6. Klikamy
Obraz > Kadruj według zaznaczenia i zapisujemy wykadrowaną część pod nazwą
bok1.png. Przywracamy poprzedni stan (Ctrl+Z).
7. Zaznaczamy pierwszą opcję menu, w podobny sposób jak poprzednią. Lewy i prawy bok zaznaczenia muszą się pokrywać z prowadnicami. Znów klikamy
Obraz > Kadruj według zaznaczenia i zapisujemy pod nazwą określającą treść przycisku - w tym przypadku
home.png. Przywracamy poprzedni stan (Ctrl+Z).
8. Powtarzamy czynność 7 aż wykadrujemy wszystkie części menu.
9. Ostatnią część zapisujemy podobnie jak część w punkcie 6, pod nazwą
bok2.png.
10. Powinniśmy otrzymać takie obrazy:
11. Zaczynamy pisanie kodu HTML. Podstawowy znacznik służący do wstawienia obrazka wygląda tak:
<img src="ścieżka dostępu" />
Jeśli nasz obrazek znajduje się w tym samym miejscu co plik strony (domyślnie index.html), polecenie będzie wyglądało na przykład tak:
<img src="jakis_obrazek.png" />
Więcej na ten temat tutaj:
http://www.kurshtml.boo.pl/html/wstawienie_obrazka,zielony.html 12. Aby obrazek był jednocześnie linkiem do innej strony należy wstawić go w ten sposób:
<a href="adres strony"><img src="jakis_obrazek.png" border="0"/><a/>
Border (czyli ramkę) ustawiamy na wartości 0, aby w Internet Explorerze nie wyświetliła się ramka wokół obrazka będącego linkiem.
13. Kodowanie menu rozpoczynamy od utworzenia nowego dokumentu html jakimś programem do tego służącym lub otwierając notatnik zapisujemy plik jako np.
index.html w folderze gdzie znajdują się nasze obrazki. Możemy też otworzyć inny, istniejący już plik.
14. Najpierw wstawiamy obrazki boczne o nazwach
bok1.png oraz
bok2.png, które nie będą odnośnikami do innych podstron. W naszym dokumencie wpisujemy następujące polecenia:
<img src="bok1.png" /><img src="bok2.png" />
Między dwa obrazki wstawiamy kod obrazka o nazwie
home.png, który będzie prowadził do strony głownej -
index.html. Między kodami poszczególnych obrazków nie może być odstępów ponieważ muszą się one stykać krawędziami.
<img src="bok1.png" /><a href="index.html"><img src="home.png" border="0"/><a/><img src="bok2.png" />
Wstawiamy kolejny obrazek, który będzi linkiem do nieistniejącej jeszcze strony
about.html. Do naszego kodu wstawiamy:
<a href="about.html"><img src="about.png" /><a/>
Cały kod powinien wyglądać w ten sposób:
<img src="bok1.png" /><a href="index.html"><img src="home.png" border="0"/><a/><a href="about.html"><img src="about.png" border="0"/><a/><img src="bok2.png" />
Czynności powtarzamy z odpowiednimi nazwami plików i obrazków.
Oto ukończony kod:
<img src="bok1.png" /><a href="index.html"><img src="home.png" border="0"/><a/><a href="about.html"><img src="about.png" border="0"/><a/><a href="services.html"><img src="services.png" border="0"/><a/><a href="links.html"><img src="links.png" border="0"/><a/><a href="contact.html"><img src="contact.png" border="0"/><a/><img src="bok2.png" />
Zapisujemy plik.
19. Nasz plik index.html można zapisać jeszcze kilka razy, pod takimi nazwami, jakie podaliśmy w kodzie (about.html, about.html, services.html itd.)
20. Otwieramy plik index.html przez przeglądarkę internetową i możemy się cieszyć gotowym menu.
Oto przykład działania:
http://www.furion.yoyo.pl/do_tutoriali/ Koniec
Miniaturka:
Hyde zone
