Zatem: do dzieła!
Kod na 2 ramki i objaśnienia
<div style="background:url([link do tła]); width: [szerokość tła]px; height: [wysokość tła]px; overflow: auto; margin-top: 0px; margin-left: 0px;"><div>
<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: [odstęp między górną krawędzią ramki a górną krawędzią tła]px; margin-left: [odstęp między ramką a lewą krawędzią tła]px; border: [grubość obramowania ramki]px solid [kolor obramowania ramki]; border-radius: [stopień zaokrąglenia obramowania ramki]px; box-shadow: [przesunięcie cienia ramki w poziomie]px [przesunięcie cienia ramki w pionie]px [promień rozmycia cienia ramki]px [kolor cienia ramki]; background-color: [kolor tła ramki]">
<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: 0px; margin-left: 0px; padding: [odległość tekstu od krawędzi ramki]px; text-shadow: [przesunięcie w poziomie cienia tekstu]px [przesunięcie w pionie cienia testu]px [promień rozmycia cienia tekstu]px [kolor cienia tekstu]; font-family: [nazwa czcionki]; font-size: [rozmiar czcionki]px; color: [kolor tekstu];">Tutaj wpisz tekst.</div></div>
<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: [odstęp między ramkami]px; margin-left: [odstęp między ramką a lewą krawędzią tła]px; border: [grubość obramowania ramki]px solid [kolor obramowania ramki]; border-radius: [stopień zaokrąglenia obramowania ramki]px; box-shadow: [przesunięcie cienia ramki w poziomie]px [przesunięcie cienia ramki w pionie]px [promień rozmycia cienia ramki]px [kolor cienia ramki]; background-color: [kolor tła ramki];">
<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: 0px; margin-left: 0px; padding: [odległość tekstu od krawędzi ramki]px; text-shadow: [przesunięcie w poziomie cienia tekstu]px [przesunięcie w pionie cienia testu]px [promień rozmycia cienia tekstu]px [kolor cienia tekstu]; font-family: [nazwa czcionki]; font-size: [rozmiar czcionki]px; color: [kolor tekstu];">Tutaj wpisz tekst</div></div>
<div style="width: [szerokość ramki]px; height: [odstęp między dolną krawędzią ramki a a dolną krawędzią tła]px; overflow: auto; margin-top: 0px; margin-left: [odstęp między ramką a lewą krawędzią tła]px;">
<div style="width: [szerokość ramki]px; height: [odstęp między dolną krawędzią ramki a a dolną krawędzią tła]px; overflow: auto; margin-top: 0px; margin-left: 0px;">
</div></div></div></div>
 |
| Kliknij, aby powiększyć. |
Jeśli napis znajduje się w nawiasach kwadratowych "[ ]" to liczbę lub tekst wpisujemy, usuwając te nawiasy.
Jeśli napis znajduje się w nawiasach "( )" nie usuwamy nawiasów i tekst lub liczbę wpisujemy w nie.
Pogrubiony tekst należy zamienić na własny według polecenia.
Jeśli bawiliście się już prezentacjami ze zwykłymi ramkami, na pewno poradzicie sobie z wpisaniem wysokości, szerokości i odstępami między ramką a tłem. W ramkach przesuwanych dochodzi nam coś nowego:
Jeśli napis znajduje się w nawiasach "( )" nie usuwamy nawiasów i tekst lub liczbę wpisujemy w nie.
Pogrubiony tekst należy zamienić na własny według polecenia.
Jeśli bawiliście się już prezentacjami ze zwykłymi ramkami, na pewno poradzicie sobie z wpisaniem wysokości, szerokości i odstępami między ramką a tłem. W ramkach przesuwanych dochodzi nam coś nowego:
[odstęp między ramkami]
Jest to suma odstępu między górną krawędzią ramki a górną krawędzią tła oraz odstępu między dolną krawędzią ramki a dolną krawędzią tła. Czyli jeżeli w miejscu [odstęp między górną krawędzią ramki a górną krawędzią tła] wpisałeś 30px, a w [odstęp między dolną krawędzią ramki a a dolną krawędzią tła] 40px, dodajesz to do siebie. Jako wartość odstępu między ramkami otrzymujesz 70px.Kolory wpisujemy z palety rgb w tzw. kodzie szesnastkowym lub dziesiętnym.
Przykład zapisu koloru czarnego w kodzie szesnastkowym: #000000
... color: #000000; ...
Przykład zapisu koloru czarnego w kodzie dziesiętnym: rgba(0, 0, 0)
... color: rgba(0, 0, 0,) ...
Wyjątkiem może być kolor po znaczniku background-color, jeśli chcecie, żeby tło ramki było półprzezroczyste. Wtedy kolor zapisujecie w nawiasie tylko w kodzie dziesiętnym i dopisujecie czwartą cyfrę (od 0 do 1) określającą stopień przezroczystości. Przykład:
... background-color: rgba(0, 0, 0, 0.5) ...
Jeśli wpisaliście już wszystkie dane i kod działa poprawnie, możecie zacząć się cieszyć. Teraz, aby zwiększyć liczbę ramek, wystarczy przekopiować zaznaczony na żółto akapit (oczywiście już wypełniony) i wkleić zaraz pod oryginałem, tak jak zrobiono to poniżej:
Kod na 3 ramki
<div style="background:url([link do tła]); width: [szerokość tła]px; height: [wysokość tła]px; overflow: auto; margin-top: 0px; margin-left: 0px;"><div>
<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: [odstęp między górną krawędzią ramki a górną krawędzią tła]px; margin-left: [odstęp między prawą krawędzią ramki a lewą krawędzią tła]px; border: [grubość obramowania ramki]px solid [kolor obramowania ramki]; border-radius: [stopień zaokrąglenia obramowania ramki]px; box-shadow: [przesunięcie cienia ramki w poziomie]px [przesunięcie cienia ramki w pionie]px [promień rozmycia cienia ramki]px [kolor cienia ramki]; background-color: [kolor tła ramki]">
<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: 0px; margin-left: 0px; padding: [odległość tekstu od krawędzi ramki]px; text-shadow: [przesunięcie w poziomie cienia tekstu]px [przesunięcie w pionie cienia testu]px [promień rozmycia cienia tekstu]px [kolor cienia tekstu]; font-family: [nazwa czcionki]; font-size: [rozmiar czcionki]px; color: [kolor tekstu];">Tutaj wpisz tekst.</div></div>
<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: [odstęp między ramkami]px; margin-left: [odstęp między ramką a lewą krawędzią tła]px; border: [grubość obramowania ramki]px solid [kolor obramowania ramki]; border-radius: [stopień zaokrąglenia obramowania ramki]px; box-shadow: [przesunięcie cienia ramki w poziomie]px [przesunięcie cienia ramki w pionie]px [promień rozmycia cienia ramki]px [kolor cienia ramki] background-color: [kolor tła ramki];">
<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: 0px; margin-left: 0px; padding: [odległość tekstu od krawędzi ramki]px; text-shadow: [przesunięcie w poziomie cienia tekstu]px [przesunięcie w pionie cienia testu]px [promień rozmycia cienia tekstu]px [kolor cienia tekstu]; font-family: [nazwa czcionki]; font-size: [rozmiar czcionki]px; color: [kolor tekstu];">Tutaj wpisz tekst</div></div>
<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: [odstęp między ramkami]px; margin-left: [odstęp między ramką a lewą krawędzią tła]px; border: [grubość obramowania ramki]px solid [kolor obramowania ramki]; border-radius: [stopień zaokrąglenia obramowania ramki]px; box-shadow: [przesunięcie cienia ramki w poziomie]px [przesunięcie cienia ramki w pionie]px [promień rozmycia cienia ramki]px [kolor cienia ramki] background-color: [kolor tła ramki];">
<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: 0px; margin-left: 0px; padding: [odległość tekstu od krawędzi ramki]px; text-shadow: [przesunięcie w poziomie cienia tekstu]px [przesunięcie w pionie cienia testu]px [promień rozmycia cienia tekstu]px [kolor cienia tekstu]; font-family: [nazwa czcionki]; font-size: [rozmiar czcionki]px; color: [kolor tekstu];">Tutaj wpisz tekst</div></div>
<div style="width: [szerokość ramki]px; height: [odstęp między dolną krawędzią ramki a a dolną krawędzią tła]px; overflow: auto; margin-top: 0px; margin-left: [odstęp między ramką a lewą krawędzią tła]px;">
<div style="width: [szerokość ramki]px; height: [odstęp między dolną krawędzią ramki a a dolną krawędzią tła]px; overflow: auto; margin-top: 0px; margin-left: 0px;">
</div></div></div></div>
Mam nadzieję, że ta instrukcja ułatwi Wam pracę z HTML.
Lionette
Pomysł całkiem ok, tylko po co te kolorowe zaznaczenia? Rażą po oczach.
OdpowiedzUsuńI gdyby kod na 3 ramki był mniejszymi literami, byłoby bardziej czytelnie.
K1005
Znaczenia są po to, aby było wyraźne, co konkretnie należy przekopiować.
Usuń"Teraz, aby zwiększyć liczbę ramek, wystarczy przekopiować zaznaczony na żółto akapit (oczywiście już wypełniony) i wkleić zaraz pod oryginałem, tak jak zrobiono to poniżej."
Można było zrobić to delikatniejszym kolorem. "Znaczenia są po to, aby było wyraźne, co konkretnie należy przekopiować." Jeśli będziecie to tak wyolbrzymiać i pisać do nas jak do 7-latków, to takich czytelników będziecie mieli. Zgodzę się z anonimkiem.
OdpowiedzUsuńYhh tęsknię za starymi redaktorami...
Łał, nie spodziewałam się oskarżenia "piszesz zbyt jasno!"... Ale lepiej jasno niż zagmatwanie. Poza tym wiesz, dla mnie te kody są tak oczywiste, że strasznie ciężko było mi postawić się w miejscu czytelnika i stwierdzić, co już jest zrozumiałe, a co nie. c;
UsuńA propozycji delikatnego koloru przyznaję słuszność i dziękuję, poprawię.
I prosiłabym nie porównywać mnie ze starszymi redaktorami. Nie jestem nimi i nie ma możliwości, żebym się nimi stała. Ani to konstruktywne, ani dające do myślenia.
@Nayleeneh di Versen, myślę, że przesadzasz. Dobrze, że wszystko jest prosto wyjaśnione, nie każdy przecież zna się na HTMLu.
UsuńA jak powinien wyglądać efekt końcowy??
OdpowiedzUsuńmęczę się i męczę i nic nie wychodzi...
zrozumiałam, że jak ma się kopiować coś uzupełnionego to będzie to taka jakby ramka w ramce...
raz u kogoś widziałam, że była normalna grafika, ramka była przesuwana normalnie, tylko że jak się przesuwało nie zmieniał się tekst.... tylko ramki. Każda miała inne tło, tak, jakby była robiona normalnie, ale się ruszało. Miały one osobne suwaki.
Takie jakby podstrony...