Prezentacja z ramkami - poradnik Calvany

Calvana napisał:

CZĘŚĆ PIERWSZA – GRAFIKA podkładka pod tekst

Do stworzenia prezentacji potrzebny nam jest jakiś obrazek. Można go sobie narysować w dowolnym programie graficznym, lub ściągnąć z internetu (pod warunkiem, że autor strony nie zabrania kopiowania jej treści, czyli również obrazków).

Aby prezentacja była ładna, obrazek który wybieramy powinien być nie mniejszy niż ¼ naszego monitora. Zapisujemy go na pulpicie klikając na nim prawym przyciskiem myszy i wybierając „zapisz obraz jako…” lub „zapisz tło” (te komunikaty są różne).

Pora na obróbkę naszej grafiki (jeśli ktoś uzna to za konieczne). Paint nie daje wielkich możliwości stworzenia sobie ładnych przezroczystych ramek i ładnego tekstu. Nie każdy ma dostęp do dobrych programów graficznych, pokażę Wam jak poradzić sobie w popularnym programie tekstowym WORD (z pakietu Office Microsoft). Nawet jeśli niektórzy z Was go nie posiadają to znajdziecie go w każdej kafejce internetowej czy bibliotece lub szkole. Nie ma znaczenia, którą wersję posiadacie. Opisane poniżej funkcje są w każdej wersji.
Paradoksalnie program tekstowy umożliwi nam łatwą obróbkę zdjęcia Ok zaczynamy:

Otwieramy sobie naszego Worda. Z menu „widok” wybieramy sobie opcję „Układ sieci Web”. Lewym przyciskiem myszy przenosimy sobie nasz ściągnięty obrazek do Worda. Teraz musimy dostosować jego wielkość. Musimy mieć w Wordzie cały obrazek widoczny. Nie może być tak, że aby zobaczyć cały obrazek musimy go przesuwać w poziomie lub w pionie. Jego wielkość należy dostosować chwytając prawy dolny róg obrazka. Dzięki temu można obrazek powiększyć (jeśli jest za mały) lub zmniejszyć (jeśli w Wordzie aby zobaczyć cały musimy używać suwaków).




Teraz gdy mamy już widoczny ładnie cały obrazek pora zrobić sobie ramki
Najpierw klikamy na nasz istniejący obrazek prawym przyciskiem myszy, wybieramy opcję „zawijanie tekstu” a dalej opcję „za tekstem”. Pozwoli nam to na umieszczanie ramek i tekstu na tym obrazku a nie obok niego.

W menu szukamy opcji „wstaw” „autokształt” lub „kształt” (w różnych wersjach Worda różnie nazwane i różnie umiejscowione). Wybieramy sobie kształt ramki i rysujemy ją sobie w miejscu, gdzie będziemy chcieli mieć nasz tekst.





Nasza ramka na razie jest biała. Teraz należy nadać jej kolor wypełnienia i przezroczystość. W tym celu klikamy prawym przyciskiem na naszej ramce i wybieramy opcję „formatuj autokształt”.
Efektem będzie przezroczysta ramka danego koloru. Przezroczystość należy ustawić pomiędzy 30% - 60%.





Chwytając taką ramkę można ją dowolnie przemieszczać po naszym obrazku. W każdej chwili, chwytając jej rogi lub boki można ją zwiększać bądź zmniejszać. Takich ramek tworzymy sobie tyle ile nam potrzeba.
Cały tekst do naszej prezentacji będziemy wykonywać w html-u ale jeśli ktoś chce mieć ozdobne nagłówki ramek bądź swój Nick to proponuję już teraz skorzystać z opcji wstaw „WordArt” z menu.

Klikamy wstaw, wybieramy sobie dowolny z prezentowanych po rozwinięciu przykładów (potem można to sformatować po swojemu, ale o tym za chwilę) i pojawia nam się okienko na tekst. Wpisujemy tekst i klikamy ok.




Zaznaczamy lewym przyciskiem myszy nasz tekst, klikamy na nim prawym przyciskiem i wybieramy opcję „Formatuj obiekt WordArt” tam wybieramy menu „układ” i opcję „przed tekstem”. Umożliwi nam to teraz złapanie naszego napisu i przeniesienie go w dowolne miejsce na obrazku. Po zaznaczeniu tekstu pojawiają nam się kolorowe kropki. Niebieskie pozwalają nam na powiększanie, zmniejszanie czy zwężanie naszego tekstu, a zielona i żółta na jego obrót. Ja swój tekst troszkę obrócę dzięki złapaniu zielonej kropki i przesunięciu myszki odrobinę w prawo a niebieskimi kropkami odrobinę go zmniejszę i ustawię z prawej strony.

Ponownie klikamy prawym przyciskiem myszy i wybieramy opcję formatuj obiekt WordArt. Tam w menu kolory i linie możemy wybrać jeden kolor naszego tekstu, lub wybrać opcję „efekty wypełnienia”. Ta druga daje nam więcej ciekawych możliwości ozdobienia tekstu.
Ja wybiorę sobie opcję wypełnienia gradientem (przejście z jednego koloru w drugi), opcję dwóch kolorów, po przekątnej. A wygląda to tak:




Można również ustawić opcję cienia lub nadać efekt trójwymiarowości (efekt 3-W) oraz określić kolor cienia bądź 3W.



Możliwości formatowania obiektu WordArt jest oczywiście więcej, ale to już polecam samemu wypróbować inne opcje i obserwować efekty. Tym oto sposobem można stworzyć sobie ramki oraz teksty nagłówków do naszej prezentacji.

Ten sposób ma jedną małą wadę. Tak stworzonego obrazka w Wordzie nie da się zapisać bezpośrednio na pulpicie  Trzeba się teraz troszkę pomęczyć.
Ustawiamy kursor poza naszym obrazkiem w Wordzie. Chodzi o to, aby te kolorowe kółeczka zaznaczonego obiektu czy obrazka zniknęły, dlatego trzeba kliknąć poza obszarem obrazka w polu Worda. Teraz trzeba zrobić zrzut ekranu (wykonać zdjęcie). W tym celu na klawiaturze wyszukujemy klawisza „PRTSC” (skrót od PRinT SCreen czyli drukuj ekran) lub „PRTSC SYSRQ”. Nie pojawi nam się żaden komunikat po kliknięciu tego klawisza, ale nasz komputer (tak po cichu) trzyma sobie w pamięci nasz obrazek. Aby go przywołać należy otworzyć program Paint i tam w białym polu na obrazek prawym przyciskiem myszy wywołać menu i wybrać opcję wklej.

Teraz z całego widoku naszego pulpitu w programie Paint, zaznaczamy obszar obrazka naszej prezentacji. Potem klikamy prawym przyciskiem myszy i wybieramy opcję przytnij. Dzięki temu uzyskamy nasz obrazek, podkład pod prezentację.

Przedostatni etap naszych graficznych zmagań to odpowiedni rozmiar obrazka. Jeśli będzie on za szeroki, to trzeba będzie przewijać prezentację w prawo i w lewo, żeby obejrzeć całość. Mało komfortowe. Jeśli będzie za wysoki… No od biedy można przewijać całą prezentację w górę i w dół, ale moim zdaniem, w momencie gdy dojdą jeszcze przewijane ramki html-a, to zbyt długi obrazek okazuje się niewygodny. Cóż więc zrobić. Klikamy w Paincie na naszym obrazku prawym przyciskiem myszy i wybieramy opcję „zmień rozmiar”. Tam zaznaczamy zmianę w pikselach. Wartość w poziomie ustalamy maksymalnie na 820. Jeśli wartość pionowa w tym momencie przekracza 690 to można odznaczyć opcję „zachowaj współczynnik proporcji” i ustawić tę wartość ręcznie na max 690. Jeśli tego nie zrobimy i obrazek będzie wyższy niż ta wartość, będzie to oznaczało konieczność przewijania potem prezentacji w pionie.

Pozostaje zapisać gotowy obrazek. Klikamy menu plik -> zapisz jako…
Zapisujemy na pulpicie wybierając format JPEG. Zabronione jest używanie formatu BMP. Jest on zbyt duży by umieścić go w prezentacji.
I koniec. Nasza grafika jest gotowa

Teoretycznie można by w ten sposób zrobić całą prezentację i nie bawić się już w kod html. Ale taka prezentacja ma jedną wadę. Nie da się jej edytować. Raz wstawiony tekst pozostaje już tam na stałe. Aby zmienić zawartość takiej prezentacji trzeba by wszystko robić od nowa. Wstawienie tekstu w kodzie html daje możliwość nam edycji zawartości w każdym momencie.

Calvana napisał:

CZĘŚĆ DRUGA – KOD HTML czyli formatowanie ramek do obrazka

HTML nie jest trudny, ale wymaga dużej uwagi. Pewne rzeczy będą stałe, inne będziecie musieli modyfikować. Oczywiście opiszę dokładnie co jest do czego i jak to zmieniać.
Pierwszą rzeczą jaką musimy wykonać, to wstawić naszą grafikę do internetu.
W tym celu wpisujemy w adres przeglądarki http://imageshack.us/
Dzięki przyciskowi Browse wyszukujemy na naszym pulpicie obrazka do naszej grafiki i akceptujemy. Pod spodem domyślnie ustawione jest „Image Resie” 800x600. Należy zmienić tam opcję na „do not resize” (nie zmieniaj rozmiaru obrazka) I kliknąć „upload now”

Po załadowaniu obrazka kopiujemy tekst, który jest tam w opcji „HTML Code”

Tekst wklejamy sobie gdzieś z boku do notatnika (jest w menu akcesoria – lub do innego programu tekstowego). I na razie zostawiamy. Jego FRAGMENT będzie nam potrzebny do naszego kodu html

No to zaczynamy Tworzyć naszą prezentację.

<div></div> - nazwijmy to początkiem i końcem naszej ramki. W dalszej części te znaczniki będą odrobinę zmodyfikowane, ale o tym za chwilkę.
Do naszej prezentacji najpierw wstawiamy grafikę. A oto w jaki sposób należy to wykonać:

Na początku drugiej części powiedziałam jak wysłać obrazek do sieci, oraz jakie informacje po jego wysłaniu są nam potrzebne. Z tekstu, który wkleiliśmy przed chwilą do notatnika musimy znaleźć i pozostawić tylko adres obrazka znajdujący się w znaczniku <img>. Pozostała część jest nam niepotrzebna. Obrazek poniżej pokazuje, jak wygląda skopiowany (po wstawieniu obrazka do imagshack) html code oraz na żółto zaznaczony fragment, który należy pozostawić. Wszystko poza tym żółtym należy usunąć.


A oto, jak powinien wyglądać w naszym notatniku pierwszy kawałek działającego kodu:

<img src='https://2img.net/r/ihimizer/img852/8096/obraz15w.jpg' border='0'/>

Porponuję teraz dla sprawdzenia wstawić tę jedną linijkę kodu do prezentacji w trybie HTML.
Jak?
Wchodzimy w menu profil do zakładki moja strona. Po prawej stronie od napisu prezentacja mamy trzy maleńkie ikonki. Pierwsza z lewej „zmień” – służy do edycji prezentacji. Druga z lewej „Zmień moją prezentację” – służy do jej skasowania. Trzecia ikonka to opcje i służy do ustawień.

Jeśli mamy obecnie jakieś teksty czy rysunki wpisane w prezentacji, wybieramy drugą ikonkę i usuwamy wszystko. Teraz wybieramy trzecią ikonkę „opcje” – tam ustawiamy wysokość prezentacji (musi być dostosowana do wysokości naszego obrazka zapisanego w Internecie) oraz szerokość prezentacji. Polecam na początek ustawienie wysokości na 700 a szerokość wybrać opcję „duży”.

Pora wstawić kod prezentacji. W tym celu wybieramy pierwszą ikonkę „zmień”. Po prawej stronie klikamy ikonkę TRYB HTML, wklejamy nasz pierwszy tekst z notatnika:

<img src='https://2img.net/r/ihimizer/img852/8096/obraz15w.jpg' border='0'/>

I zapisujemy.
Przyjrzyjcie się teraz wstawionemu obrazkowi. Ma on zapewne kilka ramek (na moim przykładowym obrazku jest tylko jedna) rozłożonych w różnych miejscach obrazka. Są one w pewnej odległości od góry (TOP) i od lewego (LEFT) brzegu obrazka. Utworzymy teraz HTML-ową ramkę z suwakiem dla tekstu.

Wstawię tu gotowy kod takiej ramki i wytłumaczę co wolno w nim zmieniać i jak, by dostosować do swojego obrazka.


<div style="position: absolute; top: 167px; left: 93px; height: 135px; width: 145px; overflow: auto;">
To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb.
</div>


Ten tekst należy wkleić pod wstawionym wcześniej obrazkiem.
A teraz wyjaśnienia:
Pierwsza linijka tego kodu ma wstawione cztery wartości liczbowe. TOP, LEFT, HEIGHT oraz WIDTH.
Służą one do umieszczenia naszego tekstu w odpowiednim miejscu na naszej grafice.
Nie trzeba ich zmieniać ręcznie. Gdy wkleimy już naszą pierwszą ramkę z przykładowym tekstem, będziemy mogli ją przesuną1ć w trybie normalnym (niekoniecznie w html). Już wyjaśniam jak.

<img src="https://2img.net/r/ihimizer/img543/2129/obrazlast1.th.jpg" border="0"/>

Gdy w trybie normalnym klikniemy dwukrotnie na naszym tekście pojawi się dookoła niego ramka z białymi, kwadratowymi punkcikami na rogach i brzegach. Służą one do zmiany pozycji i rozmiaru ramki tekstu.
Np. jeśli chwycimy punkcik z prawej strony i przeciągniemy go w prawo a potem chwycimy lewy punkcik ramki i przesuniemy go również w prawo, to de facto cała ramka przesunie nam się w prawo W ten sposób umieszczamy ją w wybranym przez nas miejscu i dostosowujemy rozmiar.
Rozmiar czcionki, grubość, pochylenie czy kolor również można zmieniać w trybie normalnym. W tym celu wpisany przez nas tekst należy zaznaczyć (tak jak się to robi do kopiowania) i zmodyfikować go ikonkami widocznymi u góry prezentacji w trybie normalnym.

INFORMACJA DLA UŻYTKOWNIKÓW CHROME

Edycja w trybie normalnym nie działa na przeglądarce CHROME.
Użytkownicy tej przeglądarki mają dwa wyjścia:
1. zrobić prezentację w innej przeglądarce (polecam)
2. Pozycję ramki ustalić modyfikując metodą prób i błędów cztery wartości liczbowe w pierwszej linijce kodu <div…> Top, Left, Height i Width

Co wolno Wam zmieniać i jak…
Position absolut oraz overflow auto pozostają niezmienne i nie należy tu nic kombinować.
TOP – określa pozycję ramki od góry obrazka. Zmniejszenie tej wartości spowoduje przesunięcie ramki do góry, zwiększenie wartości liczbowej spowoduje przesunięcie ramki w dół.
LEFT – określa pozycję ramki od lewego brzegu obrazka. Zmniejszenie liczby przesunie ramkę w lewo, zwiększenie przesunie ramkę w prawo.
HEIGHT – określa wysokość ramki (jej długość). I analogicznie… większa liczba to dłuższa ramka, mniejsza liczba to krótsza ramka.
WIDTH – określa szerokość pola tekstowego. I tu również, zwiększenie liczby to szersze pole, zmniejszenie liczby to węższe pole.

Wklejcie sobie ten kod i pokombinujcie z ustawieniami oglądając efekt. Liczby tak należy dopasować (metodą prób i błędów) aby wstawiony tekst znalazł się na miejscu kolorowej ramki na obrazku.
Rada: Zawsze wstawiajcie ramkę z przykładowym tekstem na tyle długim by konieczne było pojawienie się suwaka. Inaczej nie będziecie widzieli dokładnie jak powinna być zmodyfikowana wasza ramka tekstowa.


I to by było na tyle. Wstawiam tutaj jeszcze raz cały kod. Skopiujcie go sobie i pokombinujcie z przesuwaniem pola tekstowego i jego wielkością.


<img src='https://2img.net/r/ihimizer/img852/8096/obraz15w.jpg' border='0'/>

<div style="position: absolute; top: 167px; left: 93px; height: 135px; width: 145px; overflow: auto;">
To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb. To jest przykładowy tekst, który należy zamienić na swój własny wedle potrzeb.
</div>


Kilka uwag. Powyższy kod można potraktować jako gotowca do modyfikacji. Czyli zmienić adres obrazka oraz rozmieszczenie ramki. Aby mieć więcej ramek, wystarczy skopiować pierwszą, wkleić poniżej i przesunąć. Pamiętaj, aby dobrze dobrać kolor tekstu, tak aby był on czytelny. Nie może zlewać się on z tłem ramki. Modyfikując kod uważaj, by nie wykasować przypadkiem gdzieś znacznika <> lub równie ważnych średników czy dwukropków Wszelkie modyfikacje można wykonywać tylko z trybu html.
Powodzenia. Jeśli braknie Wam cierpliwości, zawsze znajdą się chętni, którzy wykonają Wam prezentację
Jeśli nie zrozumiałeś tego co jest napisane w tej prezentacji to albo odpuść sobie jej tworzenie i poproś kogoś o zrobienie, lub przeczytaj ją jeszcze raz (bo napisana jest bardzo dokładnie).

Poradnik opracowała Calvana przy współpracy z ilh_ac.

To kopia z forum w grze, tak na wszelki wypadek, jakby ktoś tam temat usunął...

Łiii! Zroniłam sobie prezentację