Kawałkowanie obrazka na komórki.docx

Kawałkowanie obrazka na komórki


Kawałkowanie obrazków

Kawałkowanie obrazków polega na dzieleniu ich na mniejsze obrazki, które można zapisać w różnych formatach lub z różnymi ustawieniami optymalizacji. Ponieważ pobieranie takich zoptymalizowanych obrazków trwa krócej niż jednego, większego obrazka, strony WWW ładują się dzięki temu szybciej.

Kawałkowanie obrazka może także ograniczyć liczbę grafik, które trzeba zapisać. Jeśli w danej witrynie WWW ten sam znak logo lub inna grafika są wyświetlane na więcej niż jednym obrazku, wystarczy tylko raz zapisać daną sekcję, gdy obrazek zostanie pokawałkowany; można wówczas ponownie załadować ten sam znak logo lub sekcję grafiki do wszystkich obrazków.

Przy użyciu Kreatora kawałkowania obrazka można utworzyć tabelę, zapisując położenie każdej sekcji obrazka jako jej region i generując kod HTML dla kolumn i komórek. Następnie należy skopiować ten kod do plików źródłowych, aby złożyć obrazek podczas pobierania strony WWW.

Można także tworzyć przejścia, czyli obszary, w których wyświetlany jest drugi obrazek, gdy użytkownik kliknie lub przesunie ponad nimi wskaźnik myszy.

Tworzenie i edytowanie komórek
Kawałkowany obrazek jest dzielony na komórki, których granice można modyfikować. Służą do tego narzędzia w obszarze Narzędzia w oknie dialogowym Kreator kawałkowania obrazka.


Tutorial ten przeznaczony jest głównie dla posiadaczy stron internetowych.
Ogólnie wiadomo, że ciężkie kilobatowo grafiki opóźniają otwieranie stron a posiadaczom połączenia internetowego typu dial-up wręcz uniemożliwiają ich otwarcie.

Pocięcie grafiki na kilka lub kilkanaście części umożliwia szybsze jej ładowanie.

W programie PSP otwórz obrazek który chcesz pociąć na części.

Widok > Pasek narzędzi > Internet

Na planszy ukaże się pasek Image Slicer - okno dialogowe Kreator kawałkowania obrazka.





Lub można wybrać poprzez > Plik > Eksportuj > Kreator kawałkowania obrazka












W okienku > Powiększenie zmniejszamy widok obrazka w widocznym oknie oraz będzie łatwiej widzieć cięcia.



Wybieramy narzędzie > Siatka
Klik w obrazek
Ukaże się następne okno w którym wpisujemy na ile części chcemy podzielić obrazek.
Jeśli chcesz inne wymiary -Wybierz narzędzie Kreator kawałkowania i kliknij obrazek w miejscu, w którym chcesz utworzyć linię podziału.

Aby utworzyć linię pionową, przeciągnij wskaźnik w pionie; aby utworzyć linię poziomą, przeciągnij wskaźnik w poziomie.

Im więcej kawałków tym szybciej obrazek otworzy się na stronie.



Wybrałam dla przykładu ustawienia, nic nie zmieniając - czyli pocięłam obrazek na 9 części





Narzędzie Strzałka pozwala uaktywnić komórkę lub przesunąć jej obramowanie.

Narzędzie Siatka służy do tworzenia siatki równomiernie rozłożonych komórek na całym obrazku lub w innej komórce.

Narzędzie Kreator kawałkowania umożliwia tworzenie poziomych i pionowych linii, czyli do manualnego cięcia

Narzędzie Gumka służy do usuwania linii podziału.

Narzędzie Chwyt umożliwia przeciąganie obrazków w oknie podglądu, co pozwala na wyświetlanie ich ukrytych obszarów.

Przyciski powiększenia pozwalają na powiększanie i pomniejszanie określonych obszarów obrazka.





- Podgląd w przeglądarce



Wybierz narzędzie Strzałka i kliknij wewnątrz komórki, aby ją uaktywnić.
W dolnej części obszaru Właściwości komórki zostaną wyświetlone informacje dotyczące granic komórki.

W polu listy rozwijanej Adres URL wpisz adres strony WWW, na której ma być wyświetlana komórka.

Aby wybrać adres już używany dla obrazka, wybierz go z listy rozwijanej Adres URL.

W polu Tekst zastępczy wpisz tekst, który będzie wyświetlany przez przeglądarkę podczas pobierania komórki.






Z listy rozwijanej Cel wybierz jedną z poniższych ramek docelowych lub opcji okna:
• _blank — ładuje stronę, do której prowadzi łącze, w nowym oknie przeglądarki
• _parent — ładuje stronę, do której prowadzi łącze, w oknie nadrzędnym lub oknie definicji ramek. Jeśli łącze nie znajduje się w ramce zagnieżdżonej, obrazek jest ładowany w pełnym oknie przeglądarki.
• _self — ładuje stronę, do której prowadzi łącze, w tym samym oknie lub ramce, w której znajduje się łącze
• _top — ładuje stronę, do której prowadzi łącze, w pełnym oknie przeglądarki i usuwa wszystkie ramki

Kliknij przycisk Zapisz.






Aby pokawałkować obrazek na komórki


Ustawiłam dla przykładu obrazek i pocięłam go tylko na 9 części

Im więcej kawałków tym szybciej obrazek otworzy się na stronie









Kliknij narzędzie Strzałka i przesuń wskaźnik ponad linią. Gdy kursor zmieni się w podwójną strzałkę

Przeciągnij linię w nowe położenie. Aby przesunąć tylko segment w obrębie bieżącej komórki, podczas klikania linii przytrzymaj naciśnięty klawisz Shift.










Czyli krotko mówiąc …

Zaczęłam od nowa – Czyli > Wyczyść i tym razem ustawiłam na 9 komórek – czyli będę cięła na 36 części








Dodatkowe info


Kliknij narzędzie Gumka i przesuń wskaźnik ponad linią. Gdy kursor przybierze kształt gumki, kliknij, aby usunąć daną linię.

Gdyby usunięcie linii powodowało utworzenie niepoprawnego obszaru, program Corel Paint Shop Pro Photo wyświetli ikonę, aby zasygnalizować niemożność usunięcia linii.







Kliknij komórkę, używając narzędzia Strzałka i usuń zaznaczenie pola wyboru - Uwzględnij komórkę w tabeli.

Kliknij przycisk Zapisz w schowku, aby otworzyć okno dialogowe

Folder docelowy HTML, przejdź do folderu, w którym jest zapisany plik HTML, a następnie kliknij przycisk OK, aby zapisać ustawienia kawałkowania.

Otwórz plik HTML, ustaw wskaźnik w miejscu, w którym chcesz wstawić kod HTML kawałka, a następnie naciśnij klawisze Ctrl + P.

Kliknij przycisk Kreator przejść.



Teraz w okienku zaznaczonym na format > JPG - wybierz format zapisania pociętych części oraz kliknij > Optymalizuj komórkę aby wpisać kompresję.

Klik > Zapisz i podaj gdzie umieścić zapisane pliki.
To wszystko odnośnie cięcia.

Ustawiam, w miejsce aby poznać co to za obrazek







Widok zapisu
Pociętą grafikę należy zapisać na stronę internetową.Na pewno sposób zapisu będzie się różnił w zależności od posiadanego edytora HTML.Ja robię to następująco: razem z plikami pociętego obrazka które wprowadzam do foldera FTP została zapisana jego miniaturka jako Document HTML.Klikam w nią podwójnie.Po otwarciu wygląda to tak:



Klikam podwójnie w puste pole otwartego dokumentu,kopiuję zapis Html a następnie otwieram w moim edytorze i wpisuję przy każdym pliku adres gdzie został umieszczony (ścieżka).Zapisuję i całość umieszczam w folderze FTP.


Jeśli klikniesz prawą stroną myszy w obrazek aby go pobrać pobierzesz tylko jedną cześć z dziewięciu lub z 36 - ściu
Przekonaj się sam(a).



Dodatkowe info
Aby podczas zapisywania kodu HTML program wyświetlał monit o lokalizację i nazwę pliku, należy zaznaczyć pole wyboru Monituj o folder obrazka przy poleceniu Zapisz i Zapisz jako.

Aby zapisać ustawienia kawałkowania
1. W oknie dialogowym Kreator kawałkowania obrazka kliknij przycisk Zapisz ustawienia.
Zostanie otwarte okno dialogowe Zapisz ustawienia kawałkowania.
2. Przejdź do folderu, w którym ma zostać zapisany plik ustawień.
3. Wpisz nazwę pliku i kliknij przycisk Zapisz.
Plik zostanie zapisany w formacie JSD l.


Aby załadować ustawienia kawałkowania
1. W oknie dialogowym Kreator kawałkowania obrazka kliknij przycisk Załaduj ustawienia.
Zostanie otwarte okno dialogowe Załaduj ustawienia kawałkowania.
2. Wybierz plik JSD, który chcesz załadować, a następnie kliknij przycisk Otwórz.

• W przypadku ładowania siatki do innego obrazka o innych wymiarach, program Corel Paint Shop Pro Photo automatycznie dopasuje rozmiar siatki.

Anita

Tutorial tu

http://www.psp-pomoc.com/wdj2/lekcja77.html