PSD.2004.01 - Menu dla strony internetowej.pdf

(519 KB) Pobierz
WEBDESIGN
15 min
a.
film
pliki
TWO
Daniel Sodkiewicz
Nie musisz znać Fiasha aby stworzyć ciekawe i animowane menu do własnej strony www.
Jedyne czego będziesz potrzebować to programu graficznego Photoshop w minimalnej wersji 5.5
i chęci przeczytania tego artykułu. Tutorial ten przeprowadzi Cię przez proces tworzenia menu
za pomocą narzędzi Slice, skryptów Rollover i nieskomplikowanego kodu HTML. Jeżeli nie masz
zielonego pojęcia
o
choćby jednym z powyższych pojęć, nie musisz się przejmować
—
poniższe
kroki opisujące dokładnie każdą czynność, przeprowadzą Cię przez cały ten proces.
Cel, Tworzymy przycisk.
Menu, jakie stworzymy, będzie się składać z kilku połączonych ze so-
bą i utrzymanych w nowoczesnym stylu przycisków. Po najechaniu
kursorem na wybrany guzik, zostanie on podświetlony, sam zaś przy-
cisk będzie sprawiał wrażenie trójwymiarowego. Aby rozpocząć pracę
uruchamiamy program Photoshop.
Pierwsze co należy ustalić to wielkość naszego przycisku. Jeżeli nie
mamy konkretnego pomysłu, wybieramy dość standardowe rozmia-
ry 121 na 17 pikseli. Kolejny wybór to kolor tła, w tym przypadku pro-
ponuję jasny odcień szarości np. #D4D4D4 (HTML Code). Aby nadać
naszemu rysunkowi efekt trójwymiarowości należy narysować przy
górnej i lewej krawędzi jasną linię o szerokości 1 piksela np. w kolorze
o jasnej barwie: #F3F3F3. Zapisujemy nasz przycisk w wysokiej ja-
kości pliku JPG, będzie on służył jako szablon do tworzenia kolejnych
klawiszy w menu.
Wysol-o-c
Rozdzielcza
393
11
W\
Zachowaj proporcje
0 Metoda POfiownegoprubko^nd
Dwu ze cienna
V-
Napisy
W zależności od tego z jakich działów składa się nasza strona, two-
rzymy odpowiednie napisy na przyciskach. Korzystając z przygotowa-
nego wcześniej szablonu nanosimy na kolejne przyciski nazwy dzia-
łów. W przedstawionym przykładzie menu będzie się składać
z sześciu guzików: lndex, Newsy, Książki, Historia, Teksty i Kontakt.
Bardzo ważnym elementem, mającym ogromny wpływ na końcową
estetykę naszego menu jest użyta w nim czcionka. Godnymi polece-
nia, eleganckimi krojami sąm.in. Tahoma i Verdana. Każdy stworzo-
ny przycisk zapisujemy osobno w jednym katalogu, staramy się także
aby napisy na każdym z rysunków znajdowały się w tej samej odległo-
ści od górnej, dolnej i (szczególnie) lewej krawędzi. Przed zapisa-
niem obrazka musimy spłaszczyć wszystkie warstwy, poprzez menu:
Warstwa>Sptaszcz obrazek (Layer>Flatten Image).
Dl
T3
?Iridex
-
-
•
•
a
•
•
-
-i
ń
10
luty/marzec 2004
Składamy menu
Otwieramy wszystkie utworzone przyciski, a następnie ustalamy na
jakim tle zostaną one umieszczone. W naszym przykładzie będzie to
niewielki prostokąt o wymiarach: 123 na 109 pikseli. Przy przyciskach
o wymiarach 121 na 17, po lewej i prawej stronie przycisków będzie
wystawał 1 piksel tła, zaś w pionie pomiędzy kolejnymi przyciskami,
oraz na samej górze i dole, także będzie jeden piksel tła. Aby nasz
podkład odróżniał się od samych guzików najlepiej nadać mu jakiś
ciemniejszy kolor, np. cierny odcień szarości #9C9C9C. Na utworzo-
ne tło wklejamy wcześniej stworzone przyciski, ustawiając je,
każde w odległości o 1 piksel od krawędzi i następnego przycisku.
Aby dokładnie móc rozmieszczać wklejone obiekty, należy maksymal-
nie powiększyć (zrobić zbliżenie) naszego obrazka. Po złożeniu cało-
ści, zapisujemy menu w osobnym folderze.
Pierwsze cięcie
Wszystkie wersje Photoshopa, począwszy od numeru 5.5, posiada-
ją bardzo przydatną dla webmasterów funkcję pozwalającą pociąć ob-
razek na mniejsze części i zapisać go w formie kodu HTML z tabelka-
mi wypełnionymi naszym pociętym obrazkiem. Przed przystąpieniem
do tego zadania należy upewnić się czy w menu
Widok (View)
jest za-
znaczona opcja
Dodatkowe (Extras)
(można ją uaktywnić skrótem
klawiszowym
[Ctrl\+[H\).
Następnie, za pomocą narzędzia
Odcięcie
(Slice)
(skrót klawiszowy [K]), dokładnie obramowujemy każdy z przy-
cisków. Aby zrobić to jak najdokładniej, należy skorzystać z maksy-
malnego powiększenia widoku.
Dokładne wycinanie kolejnych obrazków jest bardzo ważne, tutaj bo-
wiem wyznaczamy aktywny obszar naszych przycisków. Niezbędna
jest więc dokładność co do piksela. Pocięcie naszego obrazka koń-
czymy zapisując go poprzez polecenie:
Plik>Zapisz dla Weba
(File>5ave for Web),
potwierdzamy czynność przyciskiem
[Zapisz
(Save)].
Index
Newsy
Książki
Historia
Teksty
Kontakt
HTML
Chwilowo możemy zamknąć Photoshopa, przechodzimy teraz do
stworzonego przez Photoshopa pliku
*.html
(który przed chwilą zapi-
sywaliśmy), gdzie znajduje się nasze menu.
Photoshop stworzył plik z rozszerzeniem
*.html
i folder, w którym znaj-
duje się nasz pocięty obrazek. Otwieramy teraz ten plik html, za po-
mocą zwykłego notatnika lub jakiegoś edytora html (Dreamweaver,
Pajączek). Na początku w znaczniku meta zamieniamy kodowanie
strony z charset=windows-1250 na charset=iso-8859-2. Pierwszy po-
ważniejszy problem na jaki się natkniemy to wykorzystanie naszych
pociętych rysunków jako hiperłączy (linków). Po wpisaniu polecenia:
<a href=""> </a>
pomiędzy wybranym rysunkiem np. tak:
<a href="">
<IMG SRC="Obrazki/menu_03.gif" WIDTH=121 HEIGHT=17
ALT="">
Index
Newsy
Książki
Historia
Teksty
Kontakt
J
s
1
q
I
okaże się, że w przeglądarce internetowej menu po prostu się roz-
sypało.
,
luty/marzec 2004
11
WEBDESIGN
css
Po pierwsze, nie możemy pozwolić na odstępy pomiędzy wpisywa-
nymi kodami, każda bowiem spacja jest postrzegana jako znak, a to
burzy układ całej tabeli. Szczególnie trzeba uważać, aby nie było od-
stępów pomiędzy poleceniami <a h r e f = " " > i </a>, a znajdującym
się wewnątrz nich rysunkiem.
Aby obrazki z hiperłączami nie były w żaden sposób zniekształcane
musimy utworzyć style. Skorzystamy zatem z
Kaskadowych Arkuszy
Stylów—
Cascading Style Sheets (CSS).
Stosowanie styli uniezależni nas od rodzaju przeglądarki, jakiej bę-
dzie używała osoba oglądająca nasze menu, gdyż w stylach mo-
żemy zdefiniować np. wielkość fontu, marginesy, kolor tła dla po-
szczególnych elementów. Style również umożliwiają szybkie zmia-
ny w formatowaniu wielu elementów HTML, gdyż zmiana ta odbywa
się wówczas w jednym miejscu. Aby wprowadzić style do naszego
dokumentu w pliku
*.html
z tabelą, pomiędzy znaczniki HEAD nale-
ży wpisać:
<LINK href="style.css"
type="text/css">
rel="StyleSheet"
Następnie tworzymy plik tekstowy, w którym umieszczamy linijkę:
IMG {border=0 p a d d i n g : 0px, Opx, Opx, Opx} —patrz
screen. Następnie zapisujemy go jako
style.css
w tym samym kata-
logu, co odwołujący się do niego plik
*.html.
Ciąg dalszy pracy z HTML-em
Musimy teraz sprawdzić jakie nazwy posiadają rysunki przedsta-
wiające nasze przyciski, które zostały pocięte i wrzucone do folde-
ru
Obrazki.
Aby to zrobić otwieramy nasz plik
*.html
w przeglądarce,
następnie najeżdżamy na każdy z przycisków menu kursorem i kli-
kamy na nim prawym przyciskiem myszy, wybieramy z menu opcję
„Właściwości". Zapamiętujemy nazwę każdego z przycisków (patrz
ilustracja), po czym przechodzimy do kodu html i przyporządkowu-
jemy każdemu z nich hiperłącza — identycznie jak przedstawiono to
w kroku 6.
Możemy teraz sprawdzić poprawność działania naszego dzieła
w przeglądarce internetowej. Jeżeli występują jakieś problemy w wy-
świetlaniu grafiki, najprawdopodobniej w kodzie HTML zrobiliśmy nie-
potrzebny odstęp (spację) lub niepoprawnie stworzyliśmy plik
*.css.
Jeżeli wszystko działa, czas na ożywienie naszego menu.
RoIIover
Do tego celu zastosujemy najprostszy skrypt typu
Rollover,
któ-
ry zmienia grafikę w momencie, gdy kursor znajdzie się nad nią.
Najpierw jednak w Photoshopie otwieramy rysunki przedstawiające
nazwy poszczególnych działów (te, którym przed chwilą nadawaliśmy
hiperłącza) i przekształcamy je w taki sposób jaki chcemy, aby wyglą-
dały po najechaniu na nie strzałką kursora.
Stworzone przyciski zapisujemy w istniejącym już folderze
Obrazki,
nadając im nazwy np.
newsy.gif. indexy.gif
itd.,
nie zmieniając oczywi-
ście tych pociętych wcześniej przez program. Jeżeli nie mamy pomy-
słu na zmianę wyglądu poszczególnych przycisków, polecam: prze-
kreślenie wyrazu, pogrubienie czcionki czy przedstawioną w przykła-
dzie zmianę koloru tła (np. na jasno-żółty #EEEEA6). Ważne, żeby
nie przesadzić z ilością efektów
rollover,
gdyż wówczas nasza strona
może zacząć przypominać jarmark. W folderze
Obrazki
powinny za-
tem znaleźć się po dwa GIF-y do każdego hiperłącza: jeden ze sta-
nem przycisku przed, a drugi po najechaniu na niego kursorem.
f
•a
Ó)
ra
Index
12
luty/marzec 2004
dl
Zmiana koloru przycisków
W Photoshopie otwieramy pliki z przyciskami, znajdującymi się
w stworzonym przez program folderze o nazwie
Obrazki.
Otwieramy
wybrany przycisk, który został zapisany z rozszerzeniem
*.gif,
np.
menu_03.gif.
Format ten (GIF) zajmuje mało miejsca, jednak unie-
możliwia on dodawanie do obrazka dodatkowych kolorów. Musimy
więc stworzyć w Photoshopie nowy obraz o identycznej wielko-
ści jak nasz przycisk (wielkość sprawdzamy poleceniem
Obrazek>
Wielkość obrazka... (lmage>lmage Size);
przy dokładnym wycię-
ciu przycisków (Krok 5), obrazek powinien mieć rozmiary 121 na 17
pikseli, aby wyeliminować pomyłkę, sprawdzamy wielkość każde-
go przycisku) a następnie kopiujemy GIF-a na nowo stworzone tło.
Za pomocą narzędzia o nazwie
Różdżka
(skrót klawiszowy
[W]),
za-
znaczamy całe szare pole przycisku i kolorujemy je na żółty kolor
#EEEEA6).
Pokolorowane przyciski zapisujemy w folderze
Obrazki,
z dowolnym
rozszerzeniem (najlepiej GIF lub JPEG), ale o mówiącej o ich za-
wartości nazwie (np.
index.jpg).
Inde i
El-
Index
RoIIover w HTML
Wracamy do edycji kodu HTML. Aby skrypt zadziałał np. na napisie
„lndex" należy wpisać:
<a h r e f = " "
<a lirei=""
onMouseOvei=mdex.src="Obrazki/index.ipg"
1
onMouseOut=index.src="Obrazki/!liemi_03.giP">
<IMG SRC="Obraz3d/memi_03.gif" name="ujde.V
WIDTH=121
HEIOHT=17 ALT="
">
onMouseOver='index.src="Obrazki/index.jpg"'
onMouseOut='index.src="Obrazki/menu_03.gif"'>
<IMG SRC="Obrazki/menu_03.gif" name="index"
WIDTH=121 HEIGHT=17 ALT="index">
Gdzie:
newsy.gif
- przycisk po najechaniu kursora,
menu_03_03.gif-
przycisk po opuszczeniu przez kursor obszaru hi-
perłącza, czyli podstawowa wersja rysunku nazwy działu.
Aby móc używać na jednej stronie kilku efektów typu
rollover
musi-
my używać różnych nazw poszczególnych „akcji" dla każdego z hi-
perłączy. W tym przypadku
rollover
dotyczący przycisku „lndex" na-
zwiemy np. index.src, co musimy podać w sekcji name="index".
Przepisując powyższy kod należy zwrócić uwagę na znaki: ' oraz ".
Przy niektórych nazwach oba te symbole występują koło siebie i ła-
two się pomylić.
Wstawiamy m e n u na s t r o n ę
W dokumencie
html
stworzonym przez program Photoshopa, tabelka
z pociętym menu rozpoczyna się od wpisu:
<!-- ImageReady Slices (menu_03.gif) -->
a kończy na
<!-- End ImageReady Slices -->
Aby więc umieścić nasz rysunek na jakiejś stronie, wystarczy sko-
piować w odpowiednie miejsce kod tabeli znajdującej się pomiędzy
wspomnianymi powyżej znacznikami.
Przy przenoszeniu menu do innego dokumentu, należy pamiętać
o dokonaniu odpowiednich zmian w pliku
*.css,
do którego odwołuje
się dana strona (wpisaniu linijki: IMG {border=0 p a d d i n g : 0px,
Opx, Opx, Opx}). Pełny kod i rysunki przedstawionego w tutorialu
menu można znaleźć na dołączonej do pisma płycie CD. •
}
lndex
Newsy
Książki
Historia
Teksty
Kontakt
- -i
i
Ol
o
I
di
CL
luty/marzec 2004
13

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin