GRAFIKA NA STRONACH WWW TWORZENIE GALERII ZDJĘĆ C.D.

GRAFIKA NA STRONACH WWW
TWORZENIE GALERII ZDJĘĆ C.D.
Ć WICZE NIE 1.
1)
2)
3)
4)
5)
6)
7)
Utwórz na Pulpicie folder o nazwie strona.
W folderze strona umieść podfolder obrazki.
Znajdź w Internecie cztery różne fotografie. Zapisz wszystkie w folderze obrazki.
Zmień nazwy pobranych fotografii na foto01, foto02, foto03, foto04.
Uruchom program GIMP.
Wrzuć na okno narzędzi pierwszą z pobranych wcześniej fotografii.
Wybierz z ikonek narzędzie Kadrowanie i zaznacz nim w formie kwadratu jakąś część
fotografii, która ma być widoczna na miniaturze. ENTEREM zatwierdź wycięcie zaznaczonego
fragmentu.
8) Przeskaluj teraz cały obraz (Obraz/Skaluj obraz). Ustaw wysokość miniatury na 150.
Wybierz polecenie Plik/Zapisz jako i zapisz utworzoną miniaturę w folderze obrazki pod
nazwą „foto01mini.jpg”.
9) Te same czynności wykonaj tworząc miniatury pozostałych fotografii zapisując je pod
nazwami: „foto02mini.jpg”, „foto03mini.jpg”, „foto04mini.jpg”.
10) W folderze obrazki powinny znajdować się teraz następujące pliki graficzne:








foto01.jpg
foto01mini.jpg
foto02.jpg
foto02mini.jpg
foto03.jpg
foto03mini.jpg
foto04.jpg
foto04mini.jpg
11) Utwórz w programie E-Net nową stronę. W tytule wpisz fotografie. Ustaw jasnoniebieski
kolor tła, kolor tekstu ma być czarny, kolor odnośników dowolny. Pozostałe elementy ustal
samodzielnie.
12) Po zatwierdzeniu wszystkich wprowadzonych ustawień zapisz stronę w utworzonym
wcześniej folderze strona jako „index.html”.
13) Zapisz ponownie stronę index (Plik/Zapisz jako), w tym samym folderze, ale pod inną nazwą:
„galeria.html”. Zmień w kodzie html kolor tła tej strony na ciemnoniebieski, kolor tekstu na
biały, tytuł strony na galeria.
14) Na środku strony umieść największy nagłówek: „Moja galeria”.
15) Zrób trzy przejścia do nowej linii znacznikiem <br>.
16) W naszej galerii mają znaleźć się miniatury zdjęć. Gdy na nie klikniemy, powinny pojawić się
w nowym oknie duże odpowiedniki tych miniatur. Miniatury są hiperłączami do większych
zdjęć.
17) Umieść więc w kodzie następujące znaczniki:
18) Dodaj do każdej miniatury ramkę o szerokości 1px.
Strona 1 z 2
19)Zapisz wprowadzone zmiany i na podglądzie sprawdź, czy wyświetlają się wszystkie pliki. Jeśli
któraś z fotografii nie pojawia się, może to oznaczać, że ma ona inne rozszerzenie niż JPG.
Wtedy będzie trzeba zmienić to w kodzie przy nazwie tej fotografii.
20) Pod miniaturami fotografii wstaw odnośnik odwołujący się do drugiej utworzonej wcześniej
strony index.html. Strona ta ma się otwierać w tym samym oknie, w którym była strona
z galerią. Zapisz zmiany i sprawdź na podglądzie, czy wszystko działa tak, jak trzeba.
21) Otwórz w programie E-Net stronę index.html.
22) Wstaw drugi co do wielkości nagłówek z napisem: „Moje galerie zdjęć”. Wycentruj go.
23) Wybierz jedno ze zdjęć z folderu obrazki. Wstaw to zdjęcie pod nagłówkiem. Utwórz
hiperłącze: po kliknięciu na wstawioną fotografię ma się otwierać w tym samym oknie strona
galeria.html.
24) Znajdź w Internecie dowolny baner reklamowy. Kliknij na nim prawym klawiszem myszy.
Wybierz polecenie Pokaż obrazek. Skopiuj jego adres z wyszukiwarki i wklej w cudzysłów
jako adres bezwzględny w znaczniku <img src=”…………”>. Baner ma się znaleźć pod zdjęciem
będącym odsyłaczem do strony z galerią.
D O PRZEANALI ZOWANI A W D OMU :
T W O RZ ENI E
I KO NY PO J AW I AJ ĄC EJ S I Ę W PAS KU PRZ EGL ĄD ARKI OB O K AD RESU ST RO NY .
Większość stron internetowych posiada małą ikonkę z jakimś symbolem obok wyświetlanego
w wyszukiwarkach adresu. Aby umieścić taką ikonkę na tworzonej stronie, należy przygotować ją
wcześniej np. w Gimpie.
1) Utwórz nowy plik w Gimpie. Plik ten ma mieć wymiary 16x16 pikseli.
2) Ikonka będzie mała, więc musimy tak dobrać grafikę, aby była widoczna. Możemy np. umieścić
pierwszą literę z nazwy strony.
3) Wypełnij tło jednolitym kolorem. Wstaw jedną dużą literę w kolorze odróżniającym się od
koloru tła. Możesz też wstawić jakąś grafikę zamiast litery, ale będzie ją trzeba przeskalować
(Warstwa/Skaluj warstwę) do rozmiaru nie większego niż 16x16 pikseli.
4) Zapisz swoją ikonkę w folderze, w którym znajdują się Twoje strony internetowe jako
„ikona.ico”.
5) Teraz do każdej ze stron w linijce nad znacznikiem <title>Tytuł strony</title> dodaj
następujący element kodu html:
<link rel="Shortcut icon" href="……………………………………">
W wykropkowane miejsce będzie trzeba wstawić adres ikonki, który będzie można odczytać
po wrzuceniu wszystkich plików na jakiś serwer w sieci. Na razie to miejsce musi pozostać
puste, bo nie mamy jeszcze założonego konta na serwerze, więc nie możemy podać adresu.
Warto jednak taki plik z ikoną przygotować wcześniej.
Przykłady ikonek:
Strona 2 z 2