Prezentacje

Tutaj przedstawię jak zrobić prezentację razem z grafiką i kodem HTML. Kod HTML pochodzi z bloga i-love-howrse.blogspot.com.

Grafika.

W sieci wyszukujemy duży obrazek. Ja szukałam na stronie tapeciarnia.pl. Będę pracować na takim obrazku:

Głównie ramki i napisy będę wykonywać w programie Photoscape, ale można to również robić w Paincie lub innym programie graficznym.

Tak więc, otwieramy Photoscape i wybieramy opcję 'Edytor'.

Następnie klikamy 'Obiekt' i wybieramy kształt ramki.

Ustaw zaczernienie lub jeżeli chcesz nie ustawiaj go wcale. :)

Teraz na obrazku wstaw ramkę. Nawet jeśli będzie za duża lub za mała możesz ją sformatować. :)

Teraz dodaj nagłówek. Może być to Twój login. Aby wstawić napis kliknij literę 'T'.

Gdy uważasz, że skończyłeś/aś zapisz obrazek.

HTML

Gdy masz już grafikę, czas na kod HTML. Obrazek musisz zlinkować. Zrób to na stronie imageshack.us lub innej stronie. Ja osobiście wolę iv.pl. Tak więc, jak jesteś na iv.pl kliknij 'Przeglądaj', wybierz swój obrazek (prezentację) i naciśnij 'Wczytaj pliki na serwer'. Następnie pokarzą ci się różne kody/linki. Wybierz ten pierwszy. To jest link do twojego obrazka.

Nie zamykaj okna z linkiem do twojego obrazka!

W edycji swojej prezentacji (w trybie HTML oczywiście) wklej ten kod (kod na 1 ramkę):

Kod :
Obrazek:
<div style="background-image:url(link do obrazka); width: [szerokość obrazka w pixelach]px; height: [wysokość obrazka w pixelach]px; overflow: auto; margin-top: 0px; margin-left: 0px;">

Ramka:
<div style="width: [szerokość ramki w pixelach]px; height: [wysokość ramki w pixelach]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [odległość ramki od górnej krawędzi obrazka w pixelach ]px; margin-left: [odległość ramki od lewej krawędzi obrazka w pixelach]px;">TEKST

UWAGA !
Jeśli jest napis znajduje się w nawiasach kwadratowych " [ ] " to liczbę lub tekst wpisujemy, usuwając te nawiasy.

Jeśli napis znajduje się w nawiasach " ( ) " nie usuwaj nawiasów i w nie wpisz tekst.

Trzeba to wszystko połączyć (bez napisu kod, ramka, znaczniki zamykające). Tam gdzie jest pogrubione, trzeba uzupełnić.

Paleta rgb. Co to takiego? To HTML'owy zapis kolorów. Taką paletę możesz znaleźć klikając tu.

W uzupełnianiu dokładnych pikseli polecam program Paint. Można sobie tam wymierzyć dokładną odległość i wymiary.

Tutaj znajduje się uzupełniony kod ze zrobioną przeze mnie wcześniej grafiką. Poniższy kod możesz wkleić jako swoja prezentacja. :)

<div style="background-image:url(http://iv.pl/images/11255175214773612908.jpg); width: 800px; height: 508px; overflow: auto; margin-top: 0px; margin-left: 0px;">
<div style="width: 291px; height: 319px; color: rgb(0, 0, 0); overflow: auto; margin-top: 97px; margin-left: 418px;">TEKST

Kody na większą ilość ramek

Kod na 2 ramki.

<div style="background-image:url(LINK DO OBRAZKA); width: [SZEROKOŚĆ OBRAZKA]px; height:[WYSOKOŚĆ]px; overflow: auto; margin-top: 0px; margin-left: 0px;">

<div style="width: [TAK SAMO JAK SZEROKOŚĆ OBRAZKA]px; height: [TAK SAMO JAK WYSOKOŚĆ OBRAZKA]px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left:0px;">

<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD GÓRNEJ KRAWĘDZI W PIKSELACH ]px; margin-left: [ODLEGŁOŚĆ RAMKI OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst </div></div>

</div>

<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD DOLNEJ KRAWĘDZI OBRAZKA W PIKSELACH NA MINUSIE]px; margin-left: [ODLEGŁOŚĆ OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst</div>

UWAGA !

Aby druga ramka nie była pod obrazkiem prezentacji, trzeba zrobić następujące czynności.

1. Skupiamy się na kodzie na drugą ramkę.
2. Patrzymy na fragment kodu, gdzie jest "odległość ramki od górnej krawędzi obrazka w pixelach" .
3. W pierwszym kodzie wpisywaliśmy np. 100 i wtedy ramka była 100 px od górnej krawędzi, ale tu jest inaczej. Jeśli wpiszesz w drugiej ramce "100 px" to pojawi się ona 100px pod obrazkiem prezentacji. Jak temu zapobiec? Ustawiamy ilość pikseli na minusie ! np. (-100px). Będzie to oznaczało, że ramka będzie 100 pikseli od dolnej krawędzi prezentacji.

Tak samo jest z kolejnymi ramkami ! np. z 3, 4, 5 ... W pierwszej pozostawiamy wszystko normalnie.

Kod na 3 ramki.

<div style="background-image:url(LINK DO OBRAZKA); width: [SZEROKOŚĆ OBRAZKA]px; height:[WYSOKOŚĆ]px; overflow: auto; margin-top: 0px; margin-left: 0px;">

<div style="width: [TAK SAMO JAK SZEROKOŚĆ OBRAZKA]px; height: [TAK SAMO JAK WYSOKOŚĆ OBRAZKA]px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left:0px;">

<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD GÓRNEJ KRAWĘDZI W PIKSELACH ]px; margin-left: [ODLEGŁOŚĆ RAMKI OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst </div></div>

</div>

<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD DOLNEJ KRAWĘDZI OBRAZKA W PIKSELACH NA MINUSIE]px; margin-left: [ODLEGŁOŚĆ OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst</div>

</div>
<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD DOLNEJ KRAWĘDZI OBRAZKA W PIKSELACH NA MINUSIE]px; margin-left: [ODLEGŁOŚĆ OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst</div>

UWAGA !

Ramki nie mogą nachodzić na siebie, bo nie będą chciały się przesuwać !

Kod na 4 ramki.

<div style="background-image:url(LINK DO OBRAZKA); width: [SZEROKOŚĆ OBRAZKA]px; height:[WYSOKOŚĆ]px; overflow: auto; margin-top: 0px; margin-left: 0px;">

<div style="width: [TAK SAMO JAK SZEROKOŚĆ OBRAZKA]px; height: [TAK SAMO JAK WYSOKOŚĆ OBRAZKA]px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left:0px;">

<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD GÓRNEJ KRAWĘDZI W PIKSELACH ]px; margin-left: [ODLEGŁOŚĆ RAMKI OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst </div></div>

</div>

<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD DOLNEJ KRAWĘDZI OBRAZKA W PIKSELACH NA MINUSIE]px; margin-left: [ODLEGŁOŚĆ OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst</div>

</div>

<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD DOLNEJ KRAWĘDZI OBRAZKA W PIKSELACH NA MINUSIE]px; margin-left: [ODLEGŁOŚĆ OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst</div>
</div>

<div style="width: [SZEROKOŚĆ RAMKI]px; height: [WYSOKOŚĆ RAMKI]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [ODLEGŁOŚĆ RAMKI OD DOLNEJ KRAWĘDZI OBRAZKA W PIKSELACH NA MINUSIE]px; margin-left: [ODLEGŁOŚĆ OD LEWEJ KRAWĘDZI W PIKSELACH]px;">TEKST Tekst</div>

To już wszystko. W razie trudności proszę o pozostawienie komentarza i loginu na howrse. Być może będę mogła ci pomóc. :) Kod HTML i parę porad pochodzi ze strony i-love-howrse.blogspot.com

Strony

Prezentacje

8 komentarzy: