Prezentacje HTML

Pewnie niektórzy z was dopiero zaczynają swoją przygodę z howrse, a może większość jest już doświadczona? Nie ważne :p W tym poradniku pokarzę wam jak zrobić prezentacje HTML czyli tak zwaną prezentacje z "suwakami". Więc na początku grafika.
1. Otwieramy program w którym chcemy zrobić grafikę (w moim przypadku to jest GIMP)

2.  W przeglądarce szukamy odpowiedniego obrazka. Możemy poszukać w Google Grafice, tapeciarnia.pl lub *DeviantArt.com (tutaj trzeba wpisywać po angielsku). Ja wybrałam to zdjęcie

 

3. Klikamy *PPM i skalujemy obraz, żeby w szerokości było 790 pikseli, a w wysokości najlepiej 500, ale to już jest dowolnie ;)

 Wpisujemy to samo co na zdjęciu i klikamy "Przeskaluj" ;D 

Jeśli zdjęcie jest za małe klikamy lupę i powiększamy. 

4. Teraz kolej na ramkę. Wybieramy zaznaczenie prostokątne i rysujemy dowolnej wielkości ramkę.

5. Klikamy PPM, a później edycja i rysuj wzdłuż zaznaczenia.

6. Wybieramy pędzel i ustawiamy krycie na 30, a później malujemy ramkę

7. Możemy dodać jakieś dodatki na przykład napisy i cień ramki ;) 

-cień: klikamy PPM i najeżdżamy na Flirty -->Światło i cień --> Rzucanie cienia. Wyskoczy nam okienko i tam klikamy Ok. 

-tekstu nie będę tłumaczyła, bo chyba każdy wie jak to zrobić ;) 

8. Uzupełniamy kod HTML ;D 

KOD HTML NA JEDNĄ RAMKĘ

<div style="width: [szerokość obrazka]px; height: [wysokość obrazka]px; margin: auto; text-align: center; background-image: url(link do obrazka/tła); background-attachment: scroll; background-color: transparent; background-position: 0% 0%; background-repeat: repeat repeat;" align="center">

<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; margin-top: [położenie względem wysokości]px; margin-left: [położenie względem lewej strony]px; text-align: justify; float: left; overflow: auto; background-color: transparent; padding: 5px; border: 0px none;"><font style="text-shadow: 0px 0px 1px;" face="[nazwa czcionki]" size="[rozmiar czcionki]"><div style="text-align: justify;"><h2 style="text-align: center;"><span style="color: rgb(37, 37, 37); font-size: x-small;">Tu wpisz tekst.<br>Tu wpisz tekst&nbsp;</span></h2></div></font></div>

KOD HTML NA DWIE RAMKI

<div style="width: [szerokość obrazka] px; height: [wysokość obrazka] px; margin: auto; text-align: center; background-image: url(link do obrazka/tła); background-attachment: scroll; background-color: transparent; background-position: 0% 0%; background-repeat: repeat repeat; " align="center">

<div style="width: [szerokość ramki] px; height: [wysokość ramki]px; margin-top: [położenie względem wysokości]p x; margin-left: [położenie względem lewej strony]px; text-align: justify; line-height: 13pt; float: left; overflow: auto; background-color: transparent; padding: 5px; border: 0px none; letter-spacing: 1px;"><font style="text-shadow: 0px 0px 1px;" face="[nazwa czcionki]" size="[rozmiar czcionki]" color="[kolor czcionki z palety rbg]"><div style="text-align: center;">Tu wpisz tekst.<br>Ramka pierwsza.</div></font></div>

<font style="text-shadow: 0px 0px 1px;"><font style="text-shadow: 0px 0px 1px;" face="[nazwa czcionki]" size="[rozmiar czcionki]"><div style="width: [szerokość ramki] px; height: [wysokość ramki] px; margin-top: [położenie względem wysokości]  px; margin-left: [położenie względem lewej strony]px; text-align: justify; line-height: 13pt; float: left; overflow: auto; background-color: transparent; padding: 5px; border: 0px none; letter-spacing: 1px;"><div style="text-align: center;">Tu wpisz tekst.<br>Ramka druga.</div></div></font></font></div>

KOD HTML NA TRZY RAMKI
<div style="background-image: url(link do obrazka/tła ); width: [szerokość obrazka]px; height: [wysokość obrazka] px; margin-top: [położenie względem wysokości]px; margin-left: [położenie względem lewej strony]px;"></div>

<div style="width: [szerokość ramki] px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left: [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><div style="text-align: center;"><font face="[nazwa czcionki]" size="[rozmiar czcionki]">Tu wpisz tekst.<br><br>Ramka pierwsza.</font></div></div>

<div style="width: [szerokość ramki] px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left:  [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><div style="text-align: center;"><span style="font-family: [nazwa czcionki];  font-size: x-small;">Tu wpisz tekst.</span><br style="font-family: [nazwa czcionki];  font-size: x-small;"><br style="font-family: [nazwa czcionki]; font-size: x-small;"><span style="font-family: [nazwa czcionki] ; font-size: x-small;">Ramka druga.</span></div></div>

<div style="width: [szerokość ramki] px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left: [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><p style="text-align: center;"></p><div style="text-align: left;"><span style="font-family: [nazwa czcionki] ; font-size: x-small; text-align: center;">Tu wpisz tekst.</span><br style="font-family: [nazwa czcionki] ; font-size: x-small; text-align: center;"><br style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;"><span style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;">Ramka trzecia.</span></div></div>

KOD HTML NA CZTERY RAMKI
<div style="background-image: url(link do obrazka/tła ); width: [szerokość obrazka]px; height: [wysokość obrazka] px; margin-top: [położenie względem wysokości]px; margin-left: [położenie względem lewej strony]px;"></div>

<div style="width: [szerokość ramki] px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left: [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><div style="text-align: center;"><font face="[nazwa czcionki]" size="[rozmiar czcionki]">Tu wpisz tekst.<br><br>Ramka pierwsza.</font></div></div>

<div style="width: [szerokość ramki] px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left:  [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><div style="text-align: center;"><span style="font-family: [nazwa czcionki];  font-size: x-small;">Tu wpisz tekst.</span><br style="font-family: [nazwa czcionki];  font-size: x-small;"><br style="font-family: [nazwa czcionki]; font-size: x-small;"><span style="font-family: [nazwa czcionki] ; font-size: x-small;">Ramka druga.</span></div></div>

<div style="width: [szerokość ramki]px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left: [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><p style="text-align: center;"></p><div style="text-align: left;"><span style="font-family: [nazwa czcionki] ; font-size: x-small; text-align: center;">Tu wpisz tekst.</span><br style="font-family: [nazwa czcionki] ; font-size: x-small; text-align: center;"><br style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;"><span style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;">Ramka trzecia.</span></div></div>

<div style="width: [szerokość ramki] px; height: [wysokość ramki] px; overflow: auto; margin-top: [położenie względem wysokości] px; margin-left: [położenie względem lewej strony] px; text-shadow: 0px 0px 1px;"><div style="text-align: center;"><div style="text-align: left;"><span style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;">Tu wpisz tekst.</span><br style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;"><br style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;"><span style="font-family: [nazwa czcionki]; font-size: x-small; text-align: center;">Ramka czwarta!</span></div></div></div>


A oto mój efekt ;)

A kodu już mi się nie chciało robić :p

Paulina ;3 (zabajkowa)