Prezentacja HTML

 Część 1 - GRAFIKA

Jeśli nie mamy, to pobieramy photoscape, całkowicie darmowy i legalny do ściągnięcia program. KLIKNIJ ABY POBRAĆ, LEGALNIE I DARMOWO. PhotoScape jest również idealny do szybkiej i precyzyjnej obróbki zdjęć, myślę że każdemu może się przydać :)

1

Uruchamiamy program, w głównym kółku naklikamy "Edytor".

2

Otwieramy swoje zdjęcie

 

3
Próbujemy dodać własne ramki oraz napisy nad nimi

 

Jak ustawić preferencje ramki?
 - Jeśli chcemy ramke pokrytą (np. kolor biały) dajemy opcję "Wypełnienie", ustawiamy wybrany kolor, dajemy wskaźnik "Zaczernienie" lekko w lewo, jak nam pasuje i "rysujemy myszką" ramkę ;)
- Jeśli chcemy tylko linię jako ramkę (tak jak na obrazku niżej) wybieramy grubość linii i jej kolor i "rysujemy myszką ramkę" ;)
UWAGA! Najlepiej zrobić jedną, główną ramkę bo tak najłatwiej dodacie HTML!

Jak dodać tekst?
Kliknij na literkę T w zakładce "Obiekt", koło podwójnej literki T. Dodanie tekstu jest banalne, wpisujemy wybrany tekst, później wybieramy czcionke, pogrubienie i inne efekty, potem ok :)

4
Jeśli dodaliśmy tekst/rankę w złym miejscu możemy to edytować klikając na obiekt i przesuwając go za pomocą pajączka. Jeśli natomiast coś dodaliśmy źle i chcemy to usunąć możemy na pajączku nakliknąć X, lub wybrać z menu w prawym dolnym rogu "Cofnij".

5
Zapisujemy (Zapisz->Zapisz jako)

Część 2 - KOD HTML

1

Wchodzimy w okno edycji prezentacji. 

2

Wchodzimy w TRYB HTML, jego znaczek znajduje się zaraz nad ikonami.

Kliknij na obrazek by powiększyć

3

Usuwamy całą zawartość tabelki HTML.

Kliknij na obrazek by powiększyć

4

Do tabelki wpisujemy taki kod: 
KOD HTML
(po wklejeniu kodu do okna html usuńcie te niepotrzebne cyfry, które skopiowaliście z tej strony (1,2,3,4)) 

5

Tutaj macie objaśnienia ;)

Link do obrazka - Aby zalinkować obrazek polecam wejść na ifotos.pl, wybrać obrazek z komputera i myślę że dalej sobie poradzicie. 

Szerokość i wysokość obrazka - Najlepiej podać takie wymiary w wys. i szer. jakie ma nasz obrazek.
Szerokość i wysokość ramki z tekstem - Ustawiamy wedle upodobań, tak aby ramka pasowała wymiarowo do obrazka.

Odległość ramki z tekstem od górnej części obrazka - Po prostu wpisujemy takie wymiary aby górny brzeg ramki z tekstem pokrył się z górny brzeg ramki na obrazku, którą wykonaliśmy w programie graficznym.

Odległość ramki z tekstem od lewej krawędzi obrazka - Wpisujemy takie wymiary aby lewa krawędź naszej ramki z tekstem pokryła się z lewą krawędzią naszej ramki na obrazku.

Tekst ;) - W tym miejscu wpisujemy nasz tekst, który znaleźć się ma w ramce. Uwaga! Tekst wpisujemy tylko i wyłącznie w trybie normalnym.

WYMIARY WPISUJEMY DOKŁADNIE W MIEJSCACH, KTÓRE NAPISANE SĄ DUŻYMI LITERAMI.

6

Po wpisaniu wszystkich wymiarów (mają być w pikselach) dajemy "tryb normalny"

Kliknij na obrazek by powiększyć

7

Jeśli nasze wymiary się nie zgadzają dajemy powtórnie "tryb html" i według własnych upodobań zwiększamy/zmieszamy wymiary poszczególnych elementów, podając inne wymiary w pikselach. (można się pogubić, gdzie jaki wymiar był, więc najlepiej popatrzeć jeszcze na tą stronę i zobaczyć gdzie co się znajdowało)

8

Jeśli wszystko się zgadza, będąc w trybie "tryb normalny" naklikamy na słowo "Tekst ;)", usuwamy go i wpisujemy własną treść prezentacji. Można łatwo edytować, dodając kolory, pogrubienia itp w trybie normalnym.Później zapisujemy i gotowe ;)
 
Inne...
Jeśli chodzi o prezentacje na kilka ramek napiszcie do mnie na howrse, w miare możliwości podam wam do niej kod. Tutaj zamieściłam przepis na prezentacje z jedną ramką, ponieważ jest ona dość łatwa, z większą ilością ramek może być problem, a nie chce nieporozumień ;)

Jeśli komuś nie wychodzi prezentacja może do mnie napisać.W wiadomości podajcie wasz problem i "zepsuty" kod html, postaram się go naprawić. Piszcie na howrse lub na e-maila ;)