- Należy usunąć nawiasy klamrowe { }
- Nie usuwamy nawiasów okrągłych ( )!
Dokładne objaśnienia wzorów znajdziecie w poście Praca z kodami HTML - budowa prezentacji.
Obrazek
<div style="background-image:url(wklejamy adres url grafiki); width: {szerokość obrazka}px; height: {wysokość obrazka}px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left: 0px;">
Ramka
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od górnej krawędzi obrazka}px;"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div></div>
Przy kolejnych ramkach zachodzi pewna zmiana, Mianowicie w odległości od górnej krawędzi obrazka wpisujemy odległość na minusie od dolnej krawędzi obrazka do górnej krawędzi ramki!
Czyli każda kolejna ramka wygląda tak:
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div></div>
<div style="background-image:url(wklejamy adres url grafiki); width: {szerokość obrazka}px; height: {wysokość obrazka}px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left: 0px;">
Przy kolejnych ramkach zachodzi pewna zmiana, Mianowicie w odległości od górnej krawędzi obrazka wpisujemy odległość na minusie od dolnej krawędzi obrazka do górnej krawędzi ramki!
Czyli każda kolejna ramka wygląda tak:
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div></div>
Gotowe kody:
Kod na 1 ramkę do uzupełnienia:
<div style="background-image:url(wklejamy adres url grafiki); width: {szerokość obrazka}px; height: {wysokość obrazka}px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left: 0px;">
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od górnej krawędzi obrazka}px;"><font color="kod koloru z palety RGB"><font size="1"><font face="nazwa czcionki">Tekst</font></font></div></div>
Kod na 2 ramki do uzupełnienia:
<div style="background-image:url(wklejamy adres url grafiki); width: {szerokość obrazka}px; height: {wysokość obrazka}px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left: 0px;">
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od górnej krawędzi obrazka}px;"><font color="kod koloru z palety RGB"><font size="1"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div></div>
Kod na 3 ramki do uzupełnienia:
<div style="background-image:url(wklejamy adres url grafiki); width: {szerokość obrazka}px; height: {wysokość obrazka}px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left: 0px;">
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od górnej krawędzi obrazka}px;"><font color="kod koloru z palety RGB"><font size="1"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div></div>
Kod na 4 ramki do uzupełnienia:
<div style="background-image:url(wklejamy adres url grafiki); width: {szerokość obrazka}px; height: {wysokość obrazka}px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left: 0px;">
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od górnej krawędzi obrazka}px;"><font color="kod koloru z palety RGB"><font size="1"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div></div>
Kod na 5 ramek do uzupełnienia:
<div style="background-image:url(wklejamy adres url grafiki); width: {szerokość obrazka}px; height: {wysokość obrazka}px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left: 0px;">
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od górnej krawędzi obrazka}px;"><font color="kod koloru z palety RGB"><font size="1"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div>
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od dolnej krawędzi obrazka do górnej krawędzi ramki}px;"><font size="1"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div></div>
Jeśli coś będzie nie tak z kodem lub będziecie mieć problemy z nim, piszcie w komentarzach.
mugi-chan
mugi-chan
W jaki sposób można sprawdzić jaka jest odległość ramki od np. górnej krawędzi?
OdpowiedzUsuńSą na to 2, a właściwie 3 sposoby.
OdpowiedzUsuń1. to tzw. metoda na oko. Jej sposób działania jest prosty- wpisujemy pierwszą wartość jaką uważamy za poprawną, a następnie podglądając w trybie normalnym, zmieniamy wartość tak aby była jak najbliżej tej którą chcemy.
2. metoda to korzystanie z narzędnia kątomierza znajdującego się w gimpie. Przeciągając linię pomiędzy konkretnymi miejscami i przede wszystkim prostą, możemy odczytać odległość 2 punktów.
3, metoda podobna jest do 2. z tym że działa w Paincie. Aby zmierzyć odległość musimy pociągnąć" linię prostą. Aby udało się jej nie zniekształcić, wystarczy wcisnąć Shift. Na dole będzie podana wartość.
Oczywiście odległości zmierzone za pomocą metody 2 lub 3 nie będą tak dokładne jak te z metody 1.
A jak sprawdzic na przyklad jaka jest odleglosc od tego to tego???
OdpowiedzUsuńTak jak pisałam wyżej - istnieje kilka sposobów na mierzenie odległości. W komentarzach nie potrafię tego jasno wytłumaczyć dlatego zrobię osobny post z instrukcją sprawdzania odległości.
UsuńA ja mam problem, bo jak daję enter to psuje mi się prezentacja :(
OdpowiedzUsuńPrzyznam szczerze że czasami też tak mam. W takiej sytuacji wciśnij jednocześnie Shift oraz Enter. W ten sposób przejdziesz do nowej linijki bez psucia prezentacji :)
UsuńMam mały problem mugi-chan. Robię w Photoscape i jak już zrobię se tam kolor ramki itp. wiesz o co chodzi to jak daje na prezentacje to jest tylko zdjęcie :( Co mam zrobić ? :((
OdpowiedzUsuńMój tekst się rusza :(
OdpowiedzUsuńNie wyświetla się obrazek tylko ramka z napisem Tekst :( Pls pomóż mugi. Hosting www.tinypic.pl :c
OdpowiedzUsuńLink do obrazka jest źle wstawiony.
UsuńJaki masz login?
OdpowiedzUsuńHejo, wiesz jak sie robi taką ramke w wiekszej ramce? :) Mam nadzieje że wiesz o co mi chodzi
OdpowiedzUsuńDo tego jest trochę inny kod. ciężko mi to wytłumaczyć w komentarzu. Gdy będę miała więcej czasu to postaram się tym zająć.
UsuńTen komentarz został usunięty przez autora.
UsuńTen komentarz został usunięty przez administratora bloga.
UsuńPrzepraszam ale musiałam usunąć link do tego bloga.
UsuńZa to mogę podać link do bloga graficznego:
http://poradnik-html.strefa.pl/ruchome.html
Wielkie dzięki! :)
UsuńA jak zmienić czcionkę w ramkach? Najlepiej na Helveticę...
OdpowiedzUsuńJuż nieważne .-.
UsuńUgh, jestem ślepa i nie zauważyłam, że jest tam do wyboru czcionki. No, brawo, ja!
Można zmienić wielkość czcionki w ramce?
OdpowiedzUsuńOczywiście. Do tego służy:
UsuńNależy go wkleić w dowolnym miejscu w kodzie, a na koniec dopisać przed znacznikiem . Czyli przykładowy kod na ramkę może wyglądać tak:
<*div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od górnej krawędzi obrazka}px;"><*font size="rozmiar"><*font color="kod koloru z palety RGB"><*font face="nazwa czcionki">Tekst
Oczywiście bez *, ponieważ inaczej nie było możliwości wstawić komentarz.
Czy jak mam prezentacje-gifa to jest szansa to odratować?
OdpowiedzUsuńjak wstawić kod prezentacji na howrse? Przy okazji, jest to bardzo przydate :]
OdpowiedzUsuńŚwietny poradnik ;)
OdpowiedzUsuń