Pokaż wiadomości
Zaokrąglane menu na stronę WWW
Tutorial
Tutorial
Oryginał: Basic Rounded Navigation Bar
Opracowanie: carlosp120
Tłumaczenie: furion
Poziom trudności: łatwy
Opracowanie: carlosp120
Tłumaczenie: furion
Poziom trudności: łatwy
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: KoniecJeśli coś jest dla Was niezrozumiałe to piszcie, natychmiast wytłumaczę.
Działające menu w HTML'u
Opracowanie: furion
Poziom trudności: średni
Efekt końcowy: www.furion.yoyo.pl/do_tutoriali/index.html
Opracowanie: furion
Poziom trudności: średni
Efekt końcowy: www.furion.yoyo.pl/do_tutoriali/index.html
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:
Kod:
<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:
Kod:
<img src="jakis_obrazek.png" />
12. Aby obrazek był jednocześnie linkiem do innej strony należy wstawić go w ten sposób:Kod:
<a href="adres strony"><img src="jakis_obrazek.png" border="0"/><a/>
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:Kod:
<img src="bok1.png" /><img src="bok2.png" />
15. 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.Kod:
<img src="bok1.png" /><a href="index.html"><img src="home.png" border="0"/><a/><img src="bok2.png" />
16. Wstawiamy kolejny obrazek, który będzi linkiem do nieistniejącej jeszcze strony about.html. Do naszego kodu wstawiamy:Kod:
<a href="about.html"><img src="about.png" /><a/>
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/><img src="bok2.png" />
17. Czynności powtarzamy z odpowiednimi nazwami plików i obrazków. Oto ukończony kod:
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" />
18. 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/
KoniecMiniaturka:
(zwłaszcza na darmowych hostingach reklamy to standard)
no i dzięki za ocenę 
