Tworzenie stron WWW z Aligatorem Ćwiczenia praktyczne z programem Selteco Alligator Flash Desginer

Transkrypt

1 Tworzenie stron WWW z Aligatorem Ćwiczenia praktyczne z programem Selteco Alligator Flash Desginer dla liceum i technikum

2 Spis treści Schemat strony www 3 Szkielet projektu 4 Menu główne 6 Strona główna 8 Pokaz slajdów 9 Podstrona O mnie 10 Podstrona Moje hobby 12 Podstrona Galeria 12 Podstrona Kontakt 13 Stopka 14 Oprawa graficzna strony 17 Tytuł i opis 19 Umieszcznie strony www w internecie 20 Program graficzny Alligator Flash Designer dla Windows jest środkiem dydaktycznym zalecanym do uŝytku szkolnego przez ministra właściwego do spraw oświaty i wychowania i wpisany do wykazu środków dydaktycznych przeznaczonych do kształcenia ogólnego do nauczania informatyki na poziomie szkoły podstawowej 4-6, gimnazjum, liceum ogólnokształcącego, liceum profilowanego i technikum (kształcenie w zakresie rozszerzonym) oraz do nauczania technologii informacyjnej na poziomie liceum ogólnokształcącego, liceum profilowanego i technikum (w zakresie podstawowym) na podstawie recenzji rzeczoznawców dr. Rafała Kołodzieja (Uniwersytet Warszawski) oraz mgr Józefa Truszkowskiego (Akademia Podlaska). Numer zalecenia 2362/2008

3 Informacje dla nauczycieli Niniejszy zestaw ćwiczeń został przygotowany zgodnie z obowiązującą reformą programową. PODSTAWA PROGRAMOWA PRZEDMIOTU INFORMATYKA IV etap edukacyjny poziom podstawowy Wyszukiwanie, gromadzenie, selekcjonowanie, przetwarzanie i wykorzystywanie informacji, współtworzenie zasobów w sieci, korzystanie z róŝnych źródeł i sposobów zdobywania informacji. Uczeń: znajduje dokumenty i informacje w udostępnianych w Internecie bazach danych (np. bibliotecznych, statystycznych, w sklepach internetowych), ocenia ich przydatność i wiarygodność i gromadzi je na potrzeby realizowanych projektów z róŝnych dziedzin tworzy zasoby sieciowe związane ze swoim kształceniem i zainteresowaniami dobiera odpowiednie formaty plików do rodzaju i przeznaczenia zapisanych w nich informacji Opracowywanie informacji za pomocą komputera, w tym: rysunków, tekstów, danych liczbowych, animacji, prezentacji multimedialnych i filmów. Uczeń: edytuje obrazy w grafice rastrowej i wektorowej, dostrzega i wykorzystuje róŝnice między tymi typami obrazów przekształca pliki graficzne, z uwzględnieniem wielkości plików i ewentualnej utraty jakości obrazów opracowuje obrazy i filmy pochodzące z róŝnych źródeł, tworzy albumy zdjęć projektuje i tworzy stronę internetową, posługując się stylami, szablonami i elementami programowania poziom rozszerzony Uczeń: opisuje podstawowe modele barw i ich zastosowanie określa własności grafiki rastrowej i wektorowej oraz charakteryzuje podstawowe formaty plików graficznych, tworzy i edytuje obrazy rastrowe i wektorowe z uwzględnieniem warstw i przekształceń przetwarza obrazy i filmy, np.: zmienia rozdzielczość, rozmiar, model barw, stosuje filtry 2

4 Schemat strony www Twoim zadaniem na zajęciach będzie stworzenie strony www na temat "Ja i moje hobby". Za pomocą programu Alligator Flash Designer stworzysz interaktywną i multimedialną stronę www w technologii Flash. Napiszesz kilka słów o sobie oraz o tym, czym lubisz się zajmować w wolnym czasie. Na stronie umieścisz zdjęcia, tekst, efekty animacji oraz linki do swoich profili na serwisach społecznościowych. Na koniec opublikujesz swoją stronę www w internecie. Temat strony: Ja i moje hobby to... Z pewnością chodzenie do szkoły to nie jedyne twoje zajęcie. Zastanów się co lubisz robić, a odpowiesz sobie na pytanie, jakie jest twoje hobby. MoŜe jest to sport, podróŝe, granie na gitarze lub siedzenie na ławce. JeŜeli wiesz juŝ, jaka jest twoja ulubiona czynność, przejdź do następnego kroku. Lista podstron Twoja strona powinna się składać z następujących podstron: 1. Strona główna: Powitanie i krótki opis 2. O mnie: Parę słów o sobie 3. Co robię: Opis swojego hobby 4. Galeria: Zdjęcia związane z hobby 5. Kontakt: Jak mnie złapać w sieci Zastanów się teraz nad zawartością kaŝdej podstrony. WaŜnym etapem pracy jest wcześniejsze przygotowanie zdjęć i tekstów tak, aby praca przy komputerze przebiegała sprawnie. Materiał zdjęciowy W celu przygotowania materiału zdjęciowego wybierz kilka lub kilkanaście zdjęć, które mogłyby nadawać się na opublikowanie w internecie. Przejrzyj swoją kolekcję zdjęć i poszukaj takiego zdjęcia samego siebie, które uwaŝasz za udane. Następnie spróbuj znaleźć zdjęcia związane z twoim hobby. JeŜeli masz mało zdjęć lub wcale, poproś kolegę lub koleŝankę, aby ci asystowali i wybierz się na sesję zdjęciową. JeŜeli nie masz nikogo do pomocy, uŝyj statywu oraz samowyzwalacza w aparacie. Plan ogólny Zrób kilka zdjęć, które obejmują całe budynki np. szkołę, klub, ośrodek kultury lub miejsce publiczne, np. plac lub boisko. Ustaw się wystarczająco daleko aparatu tak, aby twoja postać była małym elementem całej fotografii. Zdjęcia te pozwolą widzowi zorientować się w skali miejsca oraz w jego topologii. Plan średni Przygotuj i ustaw statyw lub poproś swojego asystenta, aby zrobił ci kilka zdjęć, w czasie gdy zajmujesz się swoim hobby, na przykład podczas grania w piłkę lub rozmowy z koleŝanką. Ustaw aparat tak, aby było widać całe postacie od stóp do głów. Aby pozować do zdjęcia udawaj, Ŝe wykonujesz daną czynność i zastygnij na moment potrzebny na zrobienie zdjęcia, wtedy zdjęcie będzie wyraźne i nie rozmazane. Najlepsze są zdjęcia niepozowane, gdy nie spoglądasz w obiektyw aparatu, ale takie, aby widać było wyraz twojej twarzy. Często będziesz musiał podnieść lekko głowę i skierować ją tak, aby twoje oczy były widoczne na zdjęciu. 3

5 PółzbliŜenia Teraz ustaw aparat bliŝej, tak aby postacie były widoczne od klatki piersiowej w górę a twarze wyraźnie widoczne. Powtarzaj te same lub inne czynności w celu wykonania zdjęć. Postaraj się takŝe, aby twoja twarz ukazywała emocje związane z wykonywaną czynnością, na przykład radość, strach lub zamyślenie, dzięki czemu zdjęcia będą ciekawsze. KaŜde ujęcie przejrzyj na miejscu i powtórz je, jeŝeli uwaŝasz za nieudane. Detale Wykonaj takŝe kilka zdjęć przedmiotów związanych w twoim hobby, ale tak, aby nie obejmowały całego przedmiotu lecz jedynie jego część. Na przykład, jeŝeli grasz na gitarze, zrób zdjęcie ręki trzymającej gryf. MoŜesz teŝ zrobić zdjęcie nogi kopiącej piłkę lub jadącej na deskorolce. Wykonaj takŝe zdjęcia samych przedmiotów, na przykład głowy konika szachowego lub zbliŝenie przyborów do makijaŝu. Prawidłowym sposobem wykonywania zbliŝeń jest przytrzymywanie przedmiotów w czasie robienia zdjęcia tak, aby znajdowały się na jednolitym tle, oddalonym od fotografowanego przedmiotu. W ten sposób tło zdjęcia będzie nieostre i nie będzie zakłócało elementu w pierwszym planie. Na koniec przegraj wszystkie zdjęcia na pendrive tak, abyś mógł wziąść je ze sobą do szkoły. Materiał tekstowy Przygotuj wstępną listę tematów, które rozwiniesz na swojej stronie. Napisz kilka słów o sobie, ile masz lat, gdzie mieszkasz. Napisz takŝe o swojej szkole i co o niej myślisz. Zastanów się teraz nad swoim hobby i pomyśl dlaczego lubisz robić to co robisz. Jaka jest historia twojego hobby i co cię zainspirowało (ksiąŝka, kolega, strona www). Przypomnij sobie swoje sukcesy i poraŝki. Spytaj takŝe innych, co myślą o twoim hobby. Zapisz swoje wstępne spostrzeŝenia w pliku tekstowym na pendrive. Po przygotowaniu materiałów, moŝesz nareszcie przejść do właściwego tworzenia strony. Szkielet projektu Zanim dodasz zdjęcia i teksty, musisz stworzyć plik i szkielet strony www. Uruchamianie programu Po włączeniu komputera, odszukaj na pulpicie ikonkę programu i kliknij ją dwukrotnie: Program, po uruchomieniu, zada ci pytanie, od czego chciałbyś zacząć. Wybierz opcję Pusty projekt Flash i kliknij OK. 4

6 Ustalenie rozmiaru strony www Wybierz polecenie Ramka Rozmiar ramki i wpisz odpowiednie wartości: 900 jako szerokość i 900 jako wysokość. Kliknij OK. Taka strona zmieści się na szerokość na ekranie większości komputerów i będzie dawała się przewijać z góry na dół. Ustalenie ilości podstron Na początku plik zawiera tylko jedną ramkę czyli podstronę. Wybierz polecenie Ramka Wstaw, wpisz Ilość: 4 i kliknij OK. Program doda 4 nowe ramki tak, aby razem liczba podstron równała się 5. Ramki nazywają się kolejno Frame 1, Frame 2 itd. Dodawanie ramki matrycy Ramka matryca to ramka, na której umieszcza się elementy wspólne dla wszystkich podstron. Elementy wspólne to najczęściej menu główne, grafika na górze strony nazywana nagłówkiem oraz napisy na dole strony nazywane stopką. Cokolwiek umieścisz na ramce matrycy, element ten pojawi się takŝe w tym samym miejscu na wszystkich pozostałych podstronach. Wybierz polecenie Film Dodaj matrycę. Matrycja pojawi się na liście ramek jako ramka o nazwie Master Frame (1). Przechodzenie pomiędzy ramkami Nazwa aktualnej ramki wyświetlana jest nad powierzchnią ramki w lewym górnym rogu. W razie potrzeby przewiń widok do góry, aby zobaczyć nazwę aktualnej ramki. Wciskaj klawisze PageUp i PageDown, aby przechodzić pomiędzy ramkami lub kliknij nazwę ramki na liście ramek. Wciśnij klawisz PageUp, aby przejść do ramki Master Frame (1). Stopowanie ramek Na początku kaŝda ramka ma czas wyświetlania ustalony na 3 sekundy. Po upływie tego czasu program przejdzie do następnej ramki. Podstrony jednak nie powinny się zmieniać w sekwencji tak, jak na przykład w przypadku prezentacji. Zmiana podstrony powinna nastąpić tylko w wyniku kliknięcia myszką. Aby to zmienić, przejdź na ramkę Frame 1 i wybierz polecenie Ramka Czas ramki. Zaznacz opcje Zatrzymaj na tej ramce oraz Zastosuj do wszystkich ramek i kliknij OK. Zapis pliku Wybierz polecenie Plik Zapisz, wpisz nazwę pliku z projektem strony i kliknij Zapisz. Na następnych zajęciach otworzysz swój projekt poleceniem Plik Otwórz. Zamknij program Alligator Flash Designer i odszukaj ikonkę swojego projektu. Kliknij go dwukrotnie, aby sprawdzić czy plik zapisał się prawidłowo i czy się otwiera. 5

7 Menu główne Przejdź na ramkę Master Frame (1) i przygotuj menu, które będzie wspólne dla wszystkich podstron: Tło przycisków 1. Wybierz narzędzie Okrąg i narysuj kółko. 2. Wybierz polecenie Obiekt Grubość linii 8px. 3. Wybierz polecenie Obiekt Rozciągnij i wpisz wartości 130 x 130 i kliknij OK. 4. Wybierz polecenie Obiekt Przejście tonalne a następnie Centralny, Skala: 200%, kliknij Opcje i ustaw Przesunięcie X: 0, Przesunięcie Y: 75, kliknij OK. Kolor w środku: Czerwony 255, Zielony 190, Niebieski 100 i kliknij OK, Kolor z brzegu: Czerwony 255, Zielony 50, Niebieski 0 i kliknij OK i ponownie OK. 5. Wybierz polecenie Obiekt Kolor linii: Czerwony 255, Zielony 120, Niebieski 0 i kliknij OK. 6. Wybierz Akcja Rollovery i wybierz Kolor najechania, odznacz Brak i ustaw Czerwony 35, Zielony 160, Niebieski 255 i kliknij OK, Poświata/Najechanie: Czerwony 190, Zielony 140, Niebieski 255 i kliknij OK i ponownie OK. Wciśnij klawisz F9 lub wybierz polecenie Film Odtwórz animację i sprawdź czy kółko zmienia kolor po najechaniu myszką. Zamknij podgląd i wybierz Edycja Przesuń do, a następnie wpisz wartości X: 45 i Y: 250. Kliknij OK a kółko ustawi się przy lewym brzegu strony. Opis przycisku Wybierz narzędzie Tekst, kliknij na kółku i wpisz napis start. Ustaw kolor na biały, Wyrównaj na Wyśrodkowany a Cień na Podcień. Kliknij OK. UŜywanie narzędzia Wskaźnik Narzędzie Wskaźnik słuŝy do zaznaczania i przesuwania obiektów. Aby zaznaczyć element, kliknij go. Aby odznaczyć element, kliknij na pustym polu, gdziekolwiek poza istniejącymi elementami. 6

8 Aby zaznaczyć kilka elementów, kliknij na pustym polu poza elementami i obrysuj elementy tak, aby znalazły się całkowicie wewnątrz obrysu. Inną metodą zaznaczania kilku elementów na raz jest przytrzymanie klawisza Shift na klawiaturze i kolejne klikanie na elementach. Teraz przy pomocy narzędzia Wskaźnik, zaznacz tekst start i ustaw go na środku przycisku. Wciskaj klawisze strzałek na klawiaturze, aby precyzyjnie ustawić zaznaczony tekst. Refleks świetlny Dodatkowe odbicie światła w górnej części przycisku stworzy iluzję trójwymiarowości. 1. Wybierz narzędzie Okrąg i narysuj kółko na przycisku. 2. Wybierz polecenie Obiekt Rozciągnij i wpisz wartości 70 x Wybierz polecenie Obiekt Przejście tonalne, a następnie Pionowo, ustaw Górny kolor: Czerwony 255, Zielony 255, Niebieski 255, Krycie 50% i kliknij OK, Dolny kolor: Czerwony 255, Zielony 255, Niebieski 255, Krycie 1% i kliknij OK i ponownie OK. 4. Wybierz Edycja Przesuń do, a następnie wpisz wartości X: 75 i Y: 255. Kliknij OK a refleks ustawi się w górnej części przycisku. Powielanie przycisku Wybierz Edycja Zaznacz Wszystko a potem Edycja Powiel. Wpisz wartości Przesunięcie X: 170 i Przesunięcie Y: 0, Ilość: 4 i kliknij OK. Przycisk zostanie powielony w poziomie 4 razy. Zmiana opisów przycisków Kliknij dwukrotnie kaŝdy tekst i zmień tytuły swoich podstron. Wpisz kolejno: start, o mnie, hobby, galeria, kontakt. Przypisanie linków do przycisków Przy pomocy narzędzia Wskaźnik zaznacz pomarańczowe tło przycisku z napisem start i wybierz polecenie Akcja Kliknięcie. Wybierz opcję Skok do ramki i zaznacz ramkę Frame 1, która będzie twoją stroną tytułową. Kliknij OK. W ten sam sposób, przypisz akcje skoku do ramki dla pozostałych przycisków, dla tła przycisku o mnie: skok do ramki Frame 2, dla tła przycisku hobby: skok do ramki Frame 3, galeria: skok do ramki Frame 4, kontakt: skok do ramki Frame 5. 7

9 Strona główna Pierwsza strona zawiera powitanie oraz zachętę do dalszego przeglądania witryny. Przejdź na Frame 1 i wybierz narzędzie Tekst Artystyczny, a następnie kliknij pod przyciskami menu, w miejscu, gdzie chcesz dodać tekst. Pojawi się okienko do wpisywania tekstu: MoŜesz wpisać po prostu Witajcie! lub wymyślić inny tekst, który przyciągnie uwagę. Wpisz tekst i kliknij OK. Następnie za pomocą narzędzia Wskaźnik wyrównaj tekst pod przyciskami menu. Animacja Intro Zaznacz tekst powitania jeŝeli nie jest zaznaczony i wybierz polecenie Intro Animacja intro. Ta animacja określa sposób, w jaki tekst pojawi się na ekranie. W tym przypadku obiekt wleci zza prawej krawędzi ekranu. Zaznacz opcję Włącz animację, wybierz efekt Wleć oraz Kierunek: od prawej krawędzi ekranu. Ustaw czas trwania animacji na 1 sekundę. Teraz dopisz pod napisem powitalnym tekst zachęcający do obejrzenia twojej strony. Wybierz narzędzie Paragraf Tekstu i narysuj prostokąt ograniczający tekst, pod napisem powitalnym. Pojawi się okienko do wpisywania tekstu. Wpisz tekst i ustaw kolor tekstu na czarny. Zaznacz wpisany tekst i wybierz polecenie Intro Animacja intro. Zaznacz opcję Włącz animację, wybierz efekt Wleć oraz Kierunek: od dolnej krawędzi ekranu. Ustaw czas trwania animacji na 1 sekundę. Sformatuj kolumnę tekstu tak, aby zajmowała połowę szerokości strony. W tym celu pociągnij za prawy uchwyt tekstu i zmniejsz jego szerokość do połowy strony. Zostaw z prawej strony miejsce na grafikę, którą wykonasz samodzielnie na następnych zajęciach. Wciśnij klawisz F9 lub polecenie Film Odtwórz animację, aby uruchomić stronę w podglądzie. 8

10 Pokaz slajdów Pokaz slajdów, złoŝony z kilku zdjęć i zmieniających się co jakiś czas, umieszczony zostanie nad menu głównym i będzie wyświetlał się na kaŝdej stronie. Przygotuj na pendrive zdjęcia swojego hobby. Zapisz lub zapamiętaj nazwy co najmniej 3 zdjęć, które będą w pokazie. Zapamiętaj takŝe, w jakiej kolejności będą pojawiać się na ekranie. Warto zacząć od zdjęcia ogólnego, następnie zdjęcia z twoim udziałem a zakończyć zdjęciem ze zbliŝeniem jakiegoś elementu. Przejdź na Master Frame (1). Wybierz narzędzie Sprite i narysuj kwadrat. Program doda nowy sprite i przejdzie do edycji jego ramek. Wciśnij klawisz Esc, aby wyjść z edycji sprite. Sprite (czyt. sprajt) to film, który ma własne ramki i odtwarza się niezaleŝnie od głównej strony. Dzięki temu zdjęcia będą mogły zmieniać się we własnym tempie, niezaleŝnie od pozostałych elementów. Zaznacz sprite, jeŝeli nie jest zaznaczony i wybierz polecenie Obiekt Właściwości. Wpisz nazwę Slajdy, zaznacz Kadruj zawartość i kliknij OK. Następnie wybierz polecenie Edycja Przesuń do. Wpisz wartości X: 0, Y: 0, Szerokość: 900, Wysokość: 300 i kliknij OK. Sprite zostanie rozciągnięty i umieszczony na górze strony, częściowo pokrywając się z przyciskami menu. Wybierz Edycja Pod spód, aby to sprite był przykryty przyciskami a nie odwrotnie. Kliknij sprite dwukrotnie, aby przejść do edycji ramek wewnątrz sprite. Wybierz Wstaw Obraz. Odszukaj na pendrive to zdjęcie, które ma pojawić się jako pierwsze w pokazie slajdów, zaznacz je i kliknij Otwórz. JeŜeli zdjęcie jest za duŝe, program spyta o automatyczne zmniejszenie zdjęcia, kliknij OK, aby to potwierdzić. Po załadowaniu zdjęcia wybierz Obiekt Rozciągnij i wpisz Szerokość: 900. Kliknij OK. Zdjęcie przeskaluje się do szerokości strony. Następnie wybierz Edycja Przesuń do i wpisz X: 0 i Y: Kliknij OK. Upewnij się, Ŝe zdjęcie jest zaznaczone i wybierz Intro Pojawienie a potem Outro Wygaszenie. Na koniec wybierz Animacja Ruch, wybierz opcję Ruch: 2 (wolny) i kliknij OK. 9

11 Wciśnij klawisz F9 lub wybierz polecenie Film Odtwórz animację, aby sprawdzić czy zdjęcie pojawia się i przesuwa. Powolne przesuwanie się zdjęcia nazywa się panoramą lub panoramowaniem. Aby dodać kolejne zdjęcia, wybierz polecenie Ramka Wstaw i kliknij OK. Dodana zostanie nowa ramka wewnątrz pokazu slajdów. Wybierz Wstaw Obraz i dodaj w ten sam sposób co powyŝej następne zdjęcie. Ustaw dla niego te same animacje Intro, Outro i Ruch co dla poprzedniego zdjęcia. Dodaj więcej zdjęć tak, aby pokaz slajdów miał co najmniej 3 fotografie. Wciśnij F9, aby sprawdzić czy wszystkie zdjęcie pojawiają się i przesuwają w cyklu. W przypadku, gdy interesująca część zdjęcia nie zdąŝy odkryć się w całości lub w ogóle, przesuń zdjęcie nieznacznie do góry tak, aby panoramowanie zaczynało się trochę wcześniej. Po zakończeniu dodawania zdjęć do pokazu slajdów, wciśnij Esc, aby wyjść ze sprite i powrócić do edycji głównej strony. Dodaj teraz przejście tonalne biegnące od pokazu slajdów w dół. Przy pomocy narzędzia Prosotokąt narysuj prostokąt. Wybierz polecenie Edycja Przesuń do i wpisz X: 0 i Y: 300, Szerokość: 900, Wysokość: 150 i kliknij OK. Następnie Obiekt Przejście tonalne. Wybierz Pionowo, Górny kolor: Czerwony: 255, Zielony: 230 Niebieski: 160, Kliknij OK. Dolny kolor: Czerwony: 255, Zielony: 255, Niebieski: 255, kliknij OK i ponownie OK. Na koniec wybierz polecenie Edycja Pod spód, aby przejście tonalne znalazło się pod przyciskami menu. Podstrona O mnie Przejdź na Frame 1 i przy pomocy narzędzia Wskaźnik zaznacz tekst Witajcie! na głównej stronie. Wybierz Edycja Kopiuj, aby przenieść element do schowka. 10

12 Teraz przejdź na ramkę Frame 2 i wybierz Edycja Wklej, aby skopiować element ze schowka na stronę. Następnie kliknij dwukrotnie na wklejonym elemencie i wpisz tekst O mnie. Kliknij OK. UwaŜaj, aby nie przesunąć przypadkowo wklejonego tekstu. Tytuły wszystkich podstron powinny być w tym samym miejscu, aby tekst nie przesuwał się nieznacznie w czasie zmieniania podstron. Powtórz te same kroki, aby wkleić i wpisać tytuły wszystkich podstron. Na Frame 3 wpisz tekst Hobby, na Frame 4 wpisz tekst Galeria a na Frame 5 wpisz Kontakt. Wciśnij klawisz F9 lub wybierz polecenie Film Odtwórz animację i klikaj na przyciski w menu głównym, aby sprawdzić, czy moŝna przechodzić pomiędzy podstronami. Przejdź na ramkę Frame 2 czyli O mnie i wybierz polecenie Wstaw Ikona. Wybierz ikonę z postacią i kliknij Otwórz. Umieść ikonę pod napisem O mnie. Z prawej strony ikony dodaj tekst przy pomocy narzędzia Paragraf Tekstu i wpisz parę słów o tym jak się nazywasz i gdzie mieszkasz. Ustaw kolor tekstu na czarny. Dodaj jeszcze kilka innych ikon i wpisz o sobie to, co uwaŝasz za stosowne. Gotowa strona powinna zawierać co najmniej 3 zdania na twój temat. Zaznacz wszystkie ikony i wybierz polecenie Intro Wsuń z lewej. Następnie zaznacz wszystkie teksty znajdujące się przy ikonach i wybierz polecenie Intro Wsuń z prawej. 11

13 Podstrona Hobby Przejdź na stronę Frame 3 czyli Hobby i przy pomocy narzędzia Paragraf Tekstu wpisz historię swojego hobby. Wymyślenie tekstu zajmie ci na pewno wiele czasu. JeŜeli brak ci natchnienia, na początek wpisz cokolwiek, co przychodzi ci do głowy. Tekst moŝesz zmienić w późniejszym etapie. Ustaw kolor tekstu na czarny. Podstrona Galeria Przejdź na stronę Frame 4 czyli Galeria i wybierz Wstaw Obraz. Odszukaj na pendrive zdjęcia do galerii. Zaznacz zdjęcie i wybierz Otwórz. JeŜeli program zapyta o automatyczne zmniejszenie zdjęć, potwierdź to klikając OK. Teraz zmniejsz zdjęcie, pociągając za jego uchwyty. Po zmniejszeniu moŝesz obciąć zdjęcie tak, aby usunąć niepotrzebny brzeg lub tak, aby miało niestandardowe proporcje, na przykład utworzyć zdjęcie pionowe lub panoramiczne. 12 Aby obciąć zdjęcie, wybierz narzędzie Obetnij. Następnie pociągnij za jeden z uchwytów zdjęcia w ten sam sposób, jak przy zmniejszaniu zdjęcia. Na koniec do kaŝdego zdjęcia dodaj ramkę i cień. Wybierz narzędzie Wskaźnik i kliknij dwukrotnie na zdjęciu. Wpisz Grubość linii: 4, Kolor linii: Czerwony: 255, Zielony: 255, Niebieski: 255 i kliknij OK, Linia zewnętrzna: 1, Kolor linii: Czerwony: 128, Zielony: 128, Niebieski: 128 i kliknij OK, ustaw takŝe Cień: Ciemna poświata i kliknij OK. Przy pomocy narzędzia Tekst dodaj podpis pod kaŝdym zdjęciem. Ustaw kolor tekstu na czarny lub jakikolwiek inny pasujący do zdjęć. W ten sam sposób zaimportuj pozostałe zdjęcia do twojej galerii. Ustaw zdjęcia tak, aby nachodziły rogami na siebie, lub jeŝeli lubisz porządek, ustaw zdjęcia w równych rządkach.

14 Na koniec zaznacz wszystkie zdjęcia i wybierz polecenie Intro Rozciągnięcie. Podstrona Kontakt Przejdź do ramki Frame 5 czyli Kontakt. Na tej stronie moŝesz podać informacje kontaktowe do siebie, numer telefonu, adres lub link do profilu na innym serwisie. Wybierz polecenie Wstaw Ikona, wstaw ikonkę telefonu komórkowego i przesuń ją pod napis Kontakt. Numer telefonu wpisz przy pomocy narzędzia Tekst. Następnie zaznacz tekst przy pomocy narzędzia wskaźnik i wybierz polecenie Intro Rozciągnięcie. Potem polecenie Intro Animacja Tekstu, zaznacz Włącz animację liter i kliknij OK. Ta opcja spowoduje, Ŝe cyfry numeru telefonu będą pojawiały się jedna po drugiej. 13

15 Wybierz polecenie Wstaw Ikona, wstaw ikonkę laptopa i przesuń ja pod ikonkę telefonu. Link do swojego profilu wpisz przy pomocy narzędzia Tekst, zmień kolor tekstu na czarny i kliknij OK. Wybierz polecenie Akcja Kliknięcie. Zaznacz Otwórz URL lub plik i wpisz link do swojego profilu. Na koniec wybierz polecenie Wstaw Ikona i wstaw ikonkę poczty elektronicznej. Link do swojego a wpisz przy pomocy narzędzia Tekst zmień kolor tekstu na czarny i kliknij OK. Wybierz polecenie Akcja Kliknięcie. Zaznacz Otwórz URL lub plik i wpisz adres poprzedzony tekstem mailto: Aby zmienić kolor tekstu po najechaniu kursorem myszy, zaznacz tekst adresu i wybierz komendę Akcja Kolor najechania. Ustaw dowolny kolor i kliknij OK. Wciśnij klawisz F9 lub wybierz polecenie Film Odtwórz animację i przejdź na stronę Kontakt. Najedź myszką na adres i sprawdź, czy kolor tekstu zmienia się na ten, który przed chwilą ustawiłeś. Stopka Stopka to część strony zamykająca ją od dołu. W stopce umieszcza się często linki do podstron, informacje o prawach autorskich oraz dane kontaktowe. Stopka powinna pojawić się na kaŝdej z podstron, naleŝy zatem umieścić ją na ramce matrycy. Przejdź na ramkę Master Frame (1) i wybierz narzędzie Prostokąt. Narysuj na dole strony prostokąt. Następnie polecenie Edycja Przesuń do i wpisz X: 0 Y: 850, Szerokość: 900 i Wysokość: 50. Kliknij OK a prostokąt wyrówna się do dolnej krawędzi strony. Teraz wybierz polecenie Obiekt Przejście tonalne. Wybierz Pionowo, Kolor górny Czerwony: 255, Zielony: 255 Niebieski: 255, Kliknij OK. Kolor dolny: Czerwony: 255, Zielony: 100, Niebieski: 0, kliknij OK. 14

16 Wpisz, kto jest autorem strony i posiadaczem praw autorskich. Wybierz narzędzie Paragraf Tekstu i na stopce narysuj prostokąt ograniczający wpisywany tekst: Pojawi się okienko do wpisywania tekstu. Na początek musisz wpisać znak Copyright. Wybierz z menu Start systemu Windows polecenie Uruchom. Wpisz polecenie charmap i wciśnij Enter: Z listy liter kliknij dwukrotnie znak Copyright a następnie przycisk Kopiuj. Zamknij program Tablica Znaków i przełącz się z powrotem do programu Alligator Flash Designer. W okienku do wpisywania paragrafu tekstu wybierz polecenie Wklej niesformatowany: Następnie dopisz, kto jest autorem strony oraz skąd pochodzą inne elementy strony, na przykład zdjęcia. Dopisek Wszelkie prawa zastrzeŝone ostrzega innych, Ŝe wymieniona w stopce osoba jest posiadaczem praw autorskich i majątkowych do pracy. Ustaw kolor tekstu na czarny i kliknij OK. Prawa autorskie to prawo do podpisania pracy swoim nazwiskiem lub pseudonimem. To ty wymyśliłeś układ strony, kolorystykę oraz połączyłeś wszystkie elementy tak, aby wzajemnie do siebie pasowały. Prawa autorskie są niezbywalne, to znaczy nikt inny oprócz autora nie moŝe twierdzić, Ŝe to on stworzył dane dzieło. JeŜeli w swojej pracy wykorzystałeś zdjęcia innych osób, powinieneś dopisać ich jako współautorów, na przykład: Zdjęcia - Józek Kowalski z IIa. Prawa majątkowe to prawo do decydowania o tym, gdzie twoja praca moŝe być wykorzystana oraz do pobierania ewentualnych opłat za wykorzystanie twojej pracy. Na początku prawa majątkowe przysługują autorowi pracy. Prawa majątkowe są zbywalne, czyli mogą być przekazane lub sprzedane innej osobie. W szczególności zabronione jest kopiowanie pracy w całości lub w częściach bez zgody posiadacza praw majątkowych. 15

17 Menu stopki W stopce umieszcza się takŝe linki do głównych podstron tak, aby uŝytkownik nie musiał przewijać widoku do góry strony w celu przejścia na inną podstronę. Wybierz narzędzie Tekst i kliknij na stopce po prawej stronie od informacji o prawach autorskich. Wpisz napis start, wybierz biały kolor tekstu oraz wyśrodkowanie, następnie zmień rozmiar czcionki na 14. Kliknij OK. Następnie polecenie Edycja Przesuń do i wpisz X: 425 Y: 865, Szerokość i Wysokość pozostaw bez zmian. Kliknij OK a tekst ustawi się odpowiedniej pozycji na stopce. Na koniec wybierz polecenie Akcja Kolor najechania. Ustaw następujący kolor: Czerwony: 90, Zielony: 160, Niebieski: 255 i kliknij OK. Teraz wybierz polecenie Edycja Powiel i wpisz Przesunięcie X: 100, Przesunięcie Y: 0 Ilość: 4. Kliknij OK a tekst zostanie skopiowany 4 razy. Kliknij dwukrotnie na kaŝdym tekście i wpisz odpowiednie nazwy podstron: Przy pomocy narzędzia Prostokąt narysuj kwadrat pomiędzy napisami start i o mnie. Wybierz polecenie Edycja Przesuń do i wpisz X: 485 Y: 873, Szerokość: 12 i Wysokość: 12. Kliknij OK a prostokąt zostanie umieszczony idealnie pomiędzy napisami. Wybierz Obiekt Kolor wypełnienia i ustaw kolor prostokąta, na przykład czerwony. Na koniec skopiuj prostokąt trzykrotnie, wybierz polecenie Edycja Powiel i wpisz Przesunięcie X: 100, Przesunięcie Y: 0 Ilość: 3. Kliknij OK a kwadrat zostanie skopiowany 3 razy w odpowiednie miejsca. Dodanie linków do tekstów w stopce Dla kaŝdego tekstu w stopce ustaw odpowiedni skok do ramki. Zaznacz tylko tekst start i wybierz Akcja Kliknięcie. Wybierz Skok do ramki i ramkę Frame 1. Kliknij OK. W ten sam sposób ustaw skok do odpowiednich ramek dla tekstów o mnie, hobby, galeria, kontakt. Wciśnij klawisz F9 lub wybierz polecenie Film Odtwórz animację i sprawdź, czy linki w stopce działają i czy stopka pojawia się na wszystkich podstronach. 16

18 Oprawa graficzna Element graficzny umieścisz w prawej kolumnie na głównej stronie na prawo od tekstu powitalnego. Powinien być to przedmiot kojarzący się z twoim hobby. Najprostszym sposobem na dodanie grafiki jest wyszukanie obrazków w internecie i skopiowanie ich do własnego projektu. Musisz jednak liczyć się z tym, Ŝe są to prace innych osób i są objęte prawem autorskim. Oznacza to, Ŝe aby je wykorzystać, powinieneś uzyskać zgodę właściciela tej pracy. Jak zatem wykonać własną grafikę bez potrzeby proszenia się kogokolwiek o zgodę? Najłatwiej po prostu samemu wykonać zdjęcia i przenieść je do komputera. Nie mogą być to jednak zwykłe fotografie, ale takie, aby tło moŝna łatwo usunąć. W tym celu fotografowane przedmioty musisz umieścić na tle białej kartki. JeŜeli przedmiot jest duŝy, ustaw go na tle białej ściany lub rozciągniętego prześcieradła. Zdjęcie musisz wykonać na wprost tak, aby cały przedmiot znajdował się na jasnym tle. Przenieś wykonane zdjęcie do komputera a następnie uruchom program Selteco Photo Lab i otwórz fotografię przedmiotu poleceniem Plik Otwórz. Wybierz narzędzie Obetnij i zaznacz tą część zdjęcia, która zawiera interesujący cię fragment. Po zaznaczeniu kliknij wewnątrz zaznaczonego obszaru, aby zatwierdzić obcięcie zdjęcia. Po obcięciu zdjęcia wybierz polecenie Dostosuj Jasność/Kontrast. Przesuwając suwak kontrastu lub jasności w prawo, zwiększaj kontrast lub jasność tak, aby jasne tło stało się zupełnie białe. Kliknij OK, aby zatwierdzić zmiany. Przy pomocy narzędzia Pipeta najedź na białe tło i sprawdź w prawym dolnym rogu programu, czy odczytane wartości R, G i B wykazują wartości 255 kaŝda. Oznacza to, Ŝe tło stało się całkowicie białe. JeŜeli nie jest, ponownie zwiększ kontrast i jasność, tak jak w poprzednim kroku. 17

19 Po wstępnym wybieleniu zdjęcia, część tła moŝe pozostać nieusunięta. Szczególnie te partie, w których element dotyka podłoŝa lub jest trzymany ręką. Wybierz narzędzie Gumka i klikając na nieusuniętych pikselach usuwaj niepotrzebne tło. JeŜeli zachodzi taka potrzeba, przybliŝ widok poleceniem Widok ZbliŜenie. W ostatnim kroku zmniejsz zdjęcie przy pomocy polecenia Zdjęcie Rozmiar i wpisz taką wysokość i szerokość, aby Ŝaden z rozmiarów nie przekraczał 300 pikseli. Kliknij OK, aby zmniejszyć zdjęcie. W przypadku zdjęć waŝne jest, aby usuwanie tła przeprowadzać na pliku o moŝliwie największej rozdzielczości. Wszelkie niedoskonałości w usuwaniu tła gumką, na przykład przypadkowe zahaczenie gumką o element lub niedokładne odtworzenie zarysu elementu, nie będą widoczne po zmniejszeniu rozdzielczości. Na koniec zapisz plik na pendrive poleceniem Plik Zapisz jako. W programie Alligator Flash Designer, przejdź na ramkę Frame 1 i wybierz polecenie Plik Importuj obraz. Zaznacz plik ze swoim zdjęciem opracowanym wcześniej w programie Selteco Photo Lab. Kliknij Otwórz, aby umieścić zdjęcie na stronie. Zmniejsz i przesuń zaimportowaną grafikę na prawo od tekstu. Spróbuj wkomponować zdjęcie w istniejące elementy, zmniejszając je lub zmniejszając szerokość tekstu. JeŜeli musisz obrócić rysunek, uŝyj komend w menu Obiekt Obróć. Wciśnij klawisz F9 lub wybierz polecenie Film Odtwórz animację, aby sprawdzić kompozycję całości. 18

20 Tytuł i opis Tytuł to napis pojawiający się na belce tytułowej przeglądarki po otwarciu danej strony. Wybierz polecenie Film Tytuł/Słowa kluczowe, wpisz odpowiednio tytuł i opis swojej strony i kliknij OK. Tytuł i opis strony pojawiają się w wynikach wyszukiwania, o ile twoja strona zostanie umieszczona w internecie i zostanie zindeksowana przez wyszukiwarki. Pozycja twojej strony w wynikach wyszukiwania zaleŝy od ilości innych stron, które zawierają linki wskazujące na twoją stronę. Na początku zatem twoja strona będzie w wynikach wyszukiwania na szarym końcu. JeŜeli chcesz przejść na wyŝszą pozycję, poproś innych, aby dodali odnośniki do twojej strony na swoich stronach. Tło przeglądarki Powierzchnia poza wnętrzem strony jest domyślnie biała, ale moŝna ustawić, aby w tym miejscu wyświetlało się zdjęcie lub grafika. Wybierz polecenie Film Tło przeglądarki i wybierz tło pasujące do twojej strony. 19

21 Umieszczanie strony www w internecie Zapisz ukończoną stronę przy pomocy polecenia Plik Zapisz. Następnie wybierz Plik Eksport strony HTML i wybierz opcję Strona WWW i kliknij OK. Podczas eksportu strony www program utworzy na dysku 2 pliki: Najpierw program spyta o nazwę pliku z rozszerzeniem SWF. MoŜesz wpisać nazwę strona.swf lub dowolną inną nazwę. Nazwa ta nie moŝe zawierać spacji ani polskich znaków. W następnym kroku program spyta o nazwę pliku HTML. Powinna to być nazwa domyślna, czyli index.htm. W razie wątpliwości zapytaj nauczyciela, jaką nazwę powinien mieć plik do umieszczenia w internecie. Twoja strona otworzy się w przeglądarce. Aby opublikować ją w internecie wróć do programu Alligator Flash Designer i wybierz Plik Uruchom FTP. Następnie przy pomocy programu FTP zaloguj się do serwera, załóŝ na serwerze www katalog i umieść w nim obydwa pliki. GRATULACJE! UŜywając przeglądarki internetowej wpisz adres do swojej strony. Twoje hobby zaistnieje w internecie. Teraz moŝesz podać adres strony swoim kolegom i koleŝankom. JeŜeli w przyszłości dokonasz zmian na swojej stronie, musisz jeszcze raz utworzyć powyŝsze pliki komendą Plik Eksport strony HTML, a następnie ponownie wgrać obydwa pliki przez FTP. Powodzenia w dalszym tworzeniu stron www! 20