Dodawanie grafiki do strony internetowej

Dodawanie grafiki do strony internetowej

Autor: Małgorzata Sumisławska

Opublikowano: 10/5/2007, 12:00 AM

Liczba odsłon: 8698

Na co dzień przeglądamy strony internetowe i nie potrafimy sobie wyobrazić portalu bez grafiki. Program FrontPage pozwala umieszczać na naszej stronie przeróżne obrazy. Możemy skorzystać z gotowych klipów pakietu Office, wkleić zdjęcie z aparatu fotograficznego lub narysować własne dzieło. Dzięki wykorzystaniu Autominiatur możemy stworzyć własną galerię obrazów. Ponadto, mamy możliwość dodania do rysunków odnośników do innych plików (tzw. hiperłaczy).

Jeśli chcemy wstawić, obraz wybieramy z menu głównego Wstaw, Obraz. Tutaj rozwija się długa lista sposobów, w jaki można umieścić plik na stronie. Clipart jest to umowna nazwa, w której się mieszczą zarówno obrazy, jak i krótkie filmy wideo lub dźwięki. Pakiet programów Office zawiera gotową kolekcję klipartów, którą oczywiście możemy rozszerzać o własne pliki.

Aby wstawić klipart, dźwięk lub wideo, wybieramy Wstaw, Obraz, Klipart. Po prawej stronie pojawi się okienko zadań Clipart. W górnej części okienka znajduje się wyszukiwarka, która pozwala zawęzić zakres tematyczny wyświetlanych plików. Wpisujemy słowo kluczowe w polu Wyszukaj, a następnie klikamy przycisk Przejdź. W polu, które zajmuje większą część okienka zadań pojawią się klipy. Jeżeli klikniemy Przejdź bez wpisywanie słowa w polu Wyszukaj, zobaczymy wszystkie dostępne pliki.

Rysunki oraz pliki dźwiękowe mogą znajdować się w różnych miejscach. Aby wybrać odpowiednia lokalizacje rozwijamy pole Wyszukaj w. Klipy pogrupowane są na trzy główne foldery: Moje kolekcje (sami je tworzymy na swoim komputerze), Kolekcje pakietu Office (są dostarczane razem z pakietem Office) oraz Kolekcje sieci Web (aby się do nich dostać musimy mieć dostęp do Internetu). Organizację klipów widzimy w postaci drzewa katalogów. Aby otworzyć folder klikamy znak "+", który znajduje sie przy jego nazwie. Jeżeli przy danym katalogu stoi znaczek , oznacza to, że pokazane zostaną wszystkie klipy z danego folderu oraz z folderów podrzędnych. Znacznik mówi, że zawartość danego katalogu nie zostanie wyświetlona. Status folderów zmieniamy klikając znaczniki lewym przyciskiem myszy.

Następnie przechodzimy do pola Wyniki powinny mieć postać. Do wyboru mamy Clipart, Fotografie, Filmy, Dźwięki. To pole również ma postać drzewa katalogów. Oprócz typu multimediów możemy wybrać format każdego z nich.

Jeżeli zaznaczymy interesujące nas kryteria wyboru, zatwierdzamy je klawiszem Przejdź. Po chwili w okienku zadań Clipart, pojawią się klipy. Jeżeli klikniemy lewym przyciskiem myszy wybrany plik, pojawi się on w tekście w miejscu, w którym jest kursor. Jeżeli tylko najedziemy na miniaturę klipu kursorem myszy, po jego prawej stronie pokaże się niebieska strzałka w dół. Klikając ją, rozwiniemy menu podręczne obrazka (lub dźwięku, filmu itp.). Polecenie Wstaw umieszcza klip w edytowanym przez nas dokumencie. Komenda Kopiuj zapamiętuje plik w schowku, dzięki temu możemy przenieść go do innego programu. W ten sposób możemy skopiować klipart z programu FrontPage, następnie otworzyć dowolny program do obróbki grafiki i umieścić go w nim przy pomocy polecenia Edycja, Wklej (lub skrótem klawiszowym Ctrl+V). Jeżeli spodoba nam się obraz, możemy poszukać czegoś w podobnym stylu. W tym celu wybieramy Znajdź podobny styl.

 

Możemy również przenieść klip do własnej kolekcji. Klikamy Kopiuj do kolekcji, otwierając w ten sposób okno dialogowe Kopiowanie do kolekcji. Zaznaczamy lokalizację kopiowanego pliku i zatwierdzamy przyciskiem OK. Jeżeli chcemy umieścić klip w nowym folderze, klikamy Nowy i w okienku dialogowym, które się pokażę wpisujemy nazwę nowego katalogu.

 

Jeżeli klip znajduje się w naszej kolekcji możemy zmienić słowa kluczowe, które pomogą nam go znaleźć. W tym celu z podręcznego menu obrazka wybieramy Edytuj słowa kluczowe. Otworzy się okno Słowa kluczowe. Po lewej stronie widzimy podgląd rysunku. Poniżej możemy wstawić podpis klipu (pole Podpis). W prawej części okna dialogowego edytujemy słowa kluczowe. Jeśli chcemy dodać nowy wyraz związany z klipem, wpisujemy go w polu Słowo kluczowe i klikamy Dodaj. Powinien znaleźć się na liście poniżej. Aby usunąć słowo z listy zaznaczamy je, a następnie klikamy Usuń. Zatwierdzamy przyciskiem Zastosuj lub OK. Różnica między nimi jest taka, że OK zatwierdza zmiany i zamyka okno dialogowe. Przycisk Zastosuj tylko zatwierdza zmiany i pozwala na dalszą edycję.

Do porządkowania kolekcji klipów służy program ClipOrganizer. Aby go otworzyć wybieramy polecenia Organizuj klipy, które znajduje się w dole okienka zadań Clipart. ClipOrganizer pozwala dodawać do zbioru nowe pliki, w tym również nasze własne zdjęcia lub filmy.  Po lewej stronie widzimy okienko zadań Lista kolekcji z drzewem katalogowym plików. Aby dodać nowy folder, klikamy lewym klawiszem myszy ten folder, który ma być dla nowego katalogiem nadrzędnym. Przykładowo, chcemy utworzyć folder Zdjęcia w katalogu Ulubione. Zaznaczamy folder Ulubione i wybieramy Plik, Nowa kolekcja.

Pojawi się okienko dialogowe Nowa kolekcja. W polu Nazwa wpisujemy nazwę nowego folderu. Niżej widzimy pole Wybierz lokalizację kolekcji. Zauważmy, że możemy modyfikować tylko folder Moje kolekcje. Jeżeli wcześniej nie zaznaczyliśmy folderu docelowego, możemy to zrobić teraz. Aby dodać nowy plik do folderu, zaznaczamy docelowy katalog w okienku zadań Lista kolekcji. Następnie wybieramy Plik, Dodaj klipy do kolekcji, Samodzielnie. Pojawi się okno dialogowe, które pozwoli znaleźć plik.

Jeśli chcemy usunąć klip z kolekcji zaznaczamy go i klikamy przycisk . Ten sam przycisk służy do usuwania folderów. Jeśli chcemy usunąć katalog, zaznaczamy go na Liście folderów i klikamy . Pamiętajmy, że usuwając folder, usuwamy całą jego zawartość wraz z katalogami podrzędnymi.

Nie musimy dodawać obrazu do kolekcji klipów, aby zamieścić go na stronie. Z menu głównego wybieramy Wstaw, Obraz, Z pliku. Otworzy się okno dialogowe, z którego wybierzemy obraz znajdujący się na dysku. Możemy również wkleić zdjęcie bezpośrednio ze skanera lub aparatu fotograficznego (wybieramy Wstaw, Obraz, Ze skanera lub aparatu fotograficznego)

Jeżeli wstawimy obraz do dokumentu,  możemy zmieniać jego atrybuty. Gdy zaznaczymy obrazek, na jego obrzeżach pojawiają się czarne kwadraciki. Pozwalają one na zmianę rozmiarów i proporcji rysunku. Najeżdżamy kursorem myszy na kropkę znajdującą się w rogu rysunku - pokaże się skośna strzałka. Wciskamy lewy przycisk myszy i przeciągamy. W ten sposób modyfikujemy rozmiar obrazu bez zmiany jego proporcji (długość i szerokość zostanie zmieniona w takim samym stopniu). Możemy także zwiększyć lub zmniejszyć tylko jeden wymiar (szerokość, bądź wysokość rysunku). W tym celu przeciągami kropki, które znajdują się na środkach boków obrazka. Kropki na pionowych bokach służą do zmiany szerokości rysunku, a te na poziomych - wysokości. 

Gdy zmienimy rozmiary obrazu, w jego prawym dolnym rogu pojawi się przycisk Akcje obrazu. Klikamy go rozwijając menu podręczne. Zauważmy, że powiększony lub pomniejszony, obraz staje się nieostry. Możemy poprawić jego wygląd zaznaczając Przepróbkuj obraz, aby dopasować rozmiar. Na rysunku po lewej stronie widzimy obrazek tylko pomniejszony, natomiast po prawej - pomniejszony i przepróbkowany.

     

Jeśli klikniemy na obraz prawym przyciskiem myszy, otworzymy menu podręczne. Oprócz standardowych poleceń, takich, jak Wytnij, Kopiuj, Wklej, zawiera ono opcję Autominiatura. Dzięki temu poleceniu, możemy umieścić na stronie pomniejszony obraz. Aby zobaczyć rysunek plik w pełnych rozmiarach należy kliknąć jego miniaturę. Stosowanie Autominiatur pozwala tworzyć galerie zdjęć. Istotna rzeczą jest zastosowanie odpowiedniego typu pliku obrazu. Zauważmy, że zmiana typu pliku pozwala zmniejszyć wielkość pliku. Przykładowo zdjęcie w formacie BMP zajmuje znacznie więcej miejsca niż to samo zdjęcie zapisane jako JPEG, mimo, że różnica w jakości jest niezauważalna. Wybieramy Zmień typ pliku obrazu, otwierając tym samym okno dialogowe Typ pliku obrazu

W górnej części okna widzimy informacje na temat pliku oryginalnego oraz zmienionego. Dzięki temu jesteśmy w stanie porównać rozmiar rysunku przed i po zmianie. Poniżej zaznaczamy docelowy typ pliku obrazu. Do wybory mamy GIF, JPEG, PNG-8 oraz PNG-24. Jeżeli na stronie umieszczamy rysunki wykonane za pomocą komputera, wykresy, schematy blokowe itp., najlepszym formatem będzie GIF. Z kolei do zdjęć najlepiej nadaje się format JPEG. Formaty PNG-8 i PNG-24 nie są obsługiwane przez wszystkie przeglądarki, z tego powodu goście odwiedzający naszą stronę internetową mogą mieć problemy z ich oglądaniem.

Wiele przycisków edycji obrazu znajduje się na pasku narzędzi obrazu. Aby go otworzyć wybieramy z podręcznego menu Pokaż pasek narzędzi obrazu.

Zauważmy, że większość klawiszy jest aktywna tylko wtedy, gdy obraz jest zaznaczony. Znaczenia poszczególnych przycisków są następujące:

  • - otwiera okno Wstawianie obrazu z pliku

  • - wstawia pole tekstowe w obrazie. Aby było to możliwe, program musi automatycznie przekonwertować plik do formatu GIF, co może pogorszyć jakość zdjęcia lub zwiększyć jego rozmiar.

  • - zamienia obraz na jego Autominiaturę,

  • - obraca obraz w lewo o 90 stopni,

  • - obraca obraz w prawo o 90 stopni,

  • - przerzuca obraz w pionie,

  • - przerzuca obraz w pionie,

  • - zwiększa kontrast,

  • - zmniejsza kontrast,

  • - rozjaśnia obraz,

  • - przyciemnia obraz,

FrontPage pozwala na kadrowanie zdjęć, które umieszczamy w potalu internetowym. Służy do tego przycisk . Najpierw wklejamy obraz na stronę, następnie zaznaczamy go klikając lewym klawiszem myszy i wybieramy na pasku narzędzi obrazu. Na zdjęciu pojawi się prostokąt rysowany przerywaną linią. Zmieniamy jego rozmiary przeciągając kropki na jego obramowaniu. Kiedy już zaznaczymy obszar do wykadrowania wciskamy Enter.

 Tworząc stronę internetową, możemy zauważyć, że położenie obrazu zależy od rozmieszczenia tekstu - gdy dopiszemy kilka linijek przed rysunkiem, obraz się przesunie. Jeżeli chcemy uniknąć takiej sytuacji powinniśmy wypozycjonować bezwzględnie rysunek. W tym celu klikamy przycisk . Obraz zostanie otoczony niebieską ramką. Najeżdżamy kursorem myszy na obramowanie i, gdy pokaże się poczwórna strzałka, przeciągamy obraz w docelowe miejsce. Teraz położenie rysunku jest niezależne od tekstu, ale może go zasłaniać. Niebieska ramka jest widoczna tylko wówczas, gdy obraz jest zaznaczony podczas edycji dokumentu, a więc nie będzie nam psuła estetyki strony.

Ciekawym rozwiązaniem jest wstawianie na rysunku punktów aktywnych. Są to takie obszary obrazu, których kliknięcie otwiera hiperłącza. Punkty aktywne mogą mieć różne kształty: prostokąta, elipsy lub wielokąta. Aby wstawić taki obszar klikamy przycisk , lub i  rysujemy kształt na obrazie. Gdy skończymy, otworzy się okno dialogowe Wstawianie hiperłączy. Rozwijamy listę Szukaj w, aby znaleźć miejsce na dysku, gdzie znajduje się plik, który chcemy załączyć. Zauważmy, że hiperłączem może być nie tylko obraz, ale na przykład plik muzyczny, dokument tekstowy itp.

Przycisk Wyróżnij punkty aktywne przydaje się, gdy obramowania obszarów aktywnych "gubią się" na obrazie. Przycisk ten ukrywa rysunek, dzięki czemu możemy zobaczyć wszystkie odnośniki do hiperłączy.

W programie FrontPage mamy możliwość tworzenia własnych rysunków. Wybieramy Wstaw, Obraz, Nowy rysunek. Na ekranie pojawi się prostokąt. Jest to tzw. kanwa rysunku. W dolnej części okna widzimy pasek narzędzi rysowania. Przycisk pozwala rozwinąć paletę barw wypełnienia rysunku, natomiast za pomocą przycisku dodajemy obramowanie. Jeśli klikniemy Autokształty, rozwiniemy menu gotowych symboli. Wybieramy któryś z nich - kursor zmieni się w krzyżyk - i klikamy w dowolne miejsce na rysunku. Pokaże się kształt.

Gdy zaznaczymy autokształt, zostanie on otoczony okrągłymi znacznikami. Białe kółeczka służą do zmiany rozmiarów rysunku. Zielona kropka pozwala obracać autokształt. Na niektórych widzimy żółty romb. Dzięki niemu możemy modyfikować elementy autokształtu. Na przykład, gdy na poniższym rysunku przeciągniemy żółtą kropkę, zmieni się uśmiech.

             

Jeśli chcemy połączyć kilka autokształtów w jedną całość, zaznaczamy je (aby zaznaczyć kilka elementów musimy trzymać wciśnięty klawisz Alt), a następnie z menu, które widzimy w polnej części okna programu wybieramy Rysuj, Grupuj. Teraz kilka autokształtów będzie traktowana jak jedna całość. Jeżeli zdarzy się, że będziemy chcieli rozbić rysunek, zaznaczamy go w klikamy Rysuj, Rozgrupuj.

Podobnie jak w edytorze tekstu, w programie FrontPage możemy ozdobić tytuł strony korzystając z galerii WordArt. Wybieramy Wstaw, Obraz, WordArt. Otworzy się okno dialogowe Galeria WordArt. Zaznaczamy w nim styl, który nas interesuje i klikamy OK.

Otworzy się okno Edytowanie tekstu WordArt. Podobnie jak w Wordzie, rozwijamy listę pola Czcionka, aby wybrać styl pisania. Następnie określamy rozmiar. Ponieważ WordArt jest traktowany jak rysunek, możemy zmieniać jego atrybuty podobnie jak w przypadku obrazu.