Formatowanie obiektu

Karta pracy 2014/2015

Adres:

http://www.plotkarka.eu/kp/formatowanieobiektu.html

Autor:

Radosław Kowaluk

Pozycjonowanie elementów

Skopiuj plik formatowanieobiektu.zip i rozpakuj go do folderu z plikami WWW. Zapoznaj się z zawartością i źródłami plików.

Identyfikator elementu i selektor identyfikatora¹

W znaczniku object dodaj kod:

 height="100"
 id="tlo">

W elemencie style dodaj kod:

}
 #tlo {
 }
 #logo {
 }
</style>

Pozycja absolutna²

W elemencie style dodaj kod.

#logo {
 position: absolute;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Odległość od prawej krawędzi³

W elemencie style dodaj kod.

position: absolute;
right: 10px;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Odległość od dolnej krawędzi⁴

W elemencie style dodaj kod.

right: 10px;
bottom: 10px;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Pozycja ustalona

W elemencie style dodaj kod.

}
#tlo {
position: fixed;
}
</style>

Zapisz zmiany i odśwież podgląd w przeglądarce.

Odległość od lewej krawędzi⁵

W elemencie style dodaj kod.

position: fixed;
left: 0px;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Odległość od górnej krawędzi⁶

W elemencie style dodaj kod.

left: 0px;
top: 0px;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Kolejność elementów⁷

W elemencie style dodaj kod.

top: 0px;
z-index: -1;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Rozciągnięcie tła

W znaczniku object zmień kod.

 data="tlo.swf"
 width="100%"
 height="100%"
 id="tlo">

Zapisz zmiany i odśwież podgląd w przeglądarce.

Wgrywanie plików na serwer

Umieść pliki ćwiczeniowe na serwerze.

1. Atrybut id – definiuje identyfikator elementu. Wartością atrybutu jest nazwa identyfikatora. Selektor identyfikatora (#nazwa) określa formatowanie elementu o danym identyfikatorze.
2. Styl CSS {position:} – definiuje sposób pozycjonowania elementu. Wartości stylu mogą być równe: static - statyczna, relative - relatywna, absolute - absolutna, fixed - ustalona.
3. Styl CSS {right:} – definiuje odległość elementu od prawej krawędzi. Wartości stylu mogą być równe: auto, length, percentage.
4. Styl CSS {bottom:} – definiuje odległość elementu od dolnej krawędzi. Wartości stylu mogą być równe: auto, length, percentage
5. Styl CSS {left:} – definiuje odległość elementu od lewej krawędzi. Wartości stylu mogą być równe: auto, length, percentage.
6. Styl CSS {top:} – definiuje odległość elementu od górnej krawędzi. Wartości stylu mogą być równe: auto, length, percentage.
7. Styl CSS {z-index:} – definiuje kolejność elementów. Wartości stylu mogą być równe: auto, integer - liczba całkowita.

Kadrowanie

Kadrowanie¹

W elemencie style dodaj kod:

#logo {
position: absolute;
right: 10px;
bottom: 10px;
clip: rect(5px,65px,45px,0px);
z-index: 2;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Kierunek tekstu

Kierunek tekstu ²

W elemencie style dodaj kod:

}
p {
direction: rtl; 
}
</style>

Zapisz zmiany i odśwież podgląd w przeglądarce.

Kierunek liter ³

W elemencie style dodaj kod:

direction: rtl;
unicode-bidi: bidi-override;
}

Zapisz zmiany i odśwież podgląd w przeglądarce.

Wgrywanie plików na serwer

Umieść pliki ćwiczeniowe na serwerze.

1. Styl CSS {clip:} – definiuje kadrowanie elementu. Wartości stylu mogą być równe: auto - brak kadrowania, rect(top, right, bottom, left) - funkcja definiuje prostokąt kadrujący. Argumentami są liczby z jednostką określające odpowiednio ukrycie od krawędzi: górnej, prawej, dolnej i lewej.
2. Styl CSS {direction:} – definiuje kierunek tekstu. Wartości stylu mogą być równe: ltr - od lewej do prawej, rtl - od prawej do lewej.
3. Styl CSS {unicode-bidi:} – definiuje kierunek liter. Wartości stylu mogą być równe: normal - litery w domyślnej kolejności, embed - litery w kolejności direction, bidi-override - litery w odwrotnej kolejności (gdy direction:rtl;)