Jak stworzyć prezentację na Howrse?

Dzisiaj pokażę jak samemu wykonać prezentację html i jak ją zamieścić na Howrse.

1. Najpierw potrzebujemy tła do prezentacji (polecam tapeciarnia.pl ).

Jak już wybierzemy ładne tło to musimy pobrać je na nasz komputer.
W tym celu najpierw wybieramy wielkość (zalecam 800x600pikseli) i klikamy "pobierz"

 

2. Potem zajmujemy się "przystrojeniem" naszej prezentacji.

Potrzebujemy do tego programu graficznego. Polecam:

+ Photoscape

+ Photoshop

Lub dla mniej wymagających po prostu paint.

Ja pokażę "przystrajanie" prezentacji w Photoscape. Ten program jest bardzo dobry, ponieważ póki nie zamkniemy programu możemy dowolnie edytować i formatować każdy element.

 Jak otworzymy Photoscape to wybieramy "Edytor". Potem z lewej strony wybieramy nasze tło i przeciągamy na środek.

Tutaj opiszę podstawowe funkcje, które oferuje nam program (kliknij, żeby powiększyć):

Opisy funkcji z obrazu z linku powyżej:

1. Dodawanie tekstu.
2. Cofnij/Powtórz/Zapisz
3. Ramki i linie.
4. To jest pasek, który pokazuje nam na ile dany element jest widoczny - im bardziej w prawo tym bardziej widzoczny (wykorzystuję do napisów), im bardziej w lewo tym mniej widoczny (używam do ramek).
5. Kolor obiektu (ramki, tekstu, linii).
6. W tej zakładce możemy dodać do nasze prezentacji jakąś ramkę np. coś świątecznego, wzorki na rogach.
7. Rozmiar naszej prezentacji.

3. Jak już mamy gotowe tło to musimy "wrzucić" je do internetu, czyli zalinkować.

Wchodzimy na stronę Imageshack (lub inną stronę do hostingu) klikamy "Browse" i wybieramy nasze tło.

4. Teraz czas na html.

Kod do grafiki:
<div style="background:url(link bezpośredni do tła); width: szerokość tła(800)px; height: wysokość tła(600)px; overflow: auto; margin-top: 0px; margin-left: 0px;">

Kod do ramki:
<div style="width: szerokość ramkipx; height: wysokość ramkipx; margin-top: odległość ramki od górnej krawędzi tłapx; margin-left: odległość ramki od lewej krawędzi tłapx; overflow: auto">twój tekst</div>

Wszystkie wymiary podajemy w pikselach.

Uzupełniony kod musimy skopiować w trybie html na sam początek naszej prezentacji.

*Jeśli chcemy zrobić więcej ramek, to kopiujemy dwa razy kod do ramek, tylko margin top w drugiej ramce jest wtedy odległością od poprzedniej ramki lub od dolnej krawędzi tła (zależy od rozmieszczenia ramek). Jeśli zauważymy, że nasza 2 ramka jest pod tłem prezentacji to znaczy, że liczymy od dolnej krawędzi ramki i wpisujemy wtedy liczby na minusie np. margin top: -150px.

5. To już koniec. Zostało cieszyć się z prezentacji.

Piszcie komentarze, może czegoś nie zrozumieliście? - wyjaśnię.

Jeśli chcecie pochwalić się prezentacją możecie umieścić w komentarzach linki do Waszych prezentacji, które mogę umieścić na blogu.

A tutaj coś dla legatów - gratisowa prezentacja:

<div style="background:url(http://img541.imageshack.us/img541/9905/gratisowaprezka.jpg); width: 800px; height: 600px; overflow: auto; margin-top: 0px; margin-left: 0px;"><div style="width: 237px; height: 484px; margin-top: 57px; margin-left: 513px; overflow: auto">TWÓJ TEKST</div>

*Zezwalam na używanie powyższej prezentacji na stronie www.howrse.pl bez pytania mnie o zgodę, jednak zabraniam rozpowszechniania jej na innych stronach i blogach oraz edytowania tła lub przypisywania sobie autorstwa tej prezentacji.

edit:

I jeszcze jedno, jak ktoś potrzebuje pomocy w przygotowaniu kodu to proszę o podanie w komentarzu loginu, bo inaczej nie wiem z kim mam  się skontaktować...

ponieważ dużo osób ma problem z odnalezieniem informacji dotyczących parametrów prezentacji/ramek polecam odpalnie painta i przejrzenie tego :)

- miodowa