Technikę warstw można spotkać w większości bardziej zaawansowanych programów do tworzenia grafiki, również w GIMPie. Polega ona na tym, że tworzy się kilka rysunków (warstw) z przeźroczystym tłem, a następnie nakłada te rysunki jeden na drugi w kolejności ustalonej przez twórcę. Dokładnie tak samo można postąpić podczas budowania strony WWW. W ćwiczeniu, które za chwilę wykonamy zasosujemy:
-
position:relative; dla wykonania ramy obrazka,
-
position:absolute; dla poszczególnych warstw,
-
z-index:nr warstwy; nr kolejnej warstwy licząc od spodu.
Ćwiczenie 3_2_3_1
Mając do dyspozycji obrazki - warstwy utwórz z nich jeden obrazek. Do wykonania zadania zastosuj następujący kod HTML:
<body>
<div class="rama">
<div class="warstwa" style="background-image:url(obrazki/as.png);z-index:1;"></div>
<div class="warstwa" style="background-image:url(obrazki/krol.png); z-index:2;"></div>
<div class="warstwa" style="background-image:url(obrazki/dama.png); z-index:3;"></div>
<div class="warstwa" style="background-image:url(obrazki/walet.png); z-index:4;"></div>
<div class="warstwa" style="background-image:url(obrazki/dziesiatka.png); z-index:5;"></div>
</div>
</body>
Kod CSS w
zewnętrznym arkuszu stylów:
div.rama
{
display:block;
position:relative;
width:870px;
height:600px;
background-color:transparent;
}
div.rama > div.warstwa
{
position:absolute;
left:0;
top:0;
width:870px;
height:600px;
margin:0;
padding:0;
background-repeat:no-repeat;
background-position:0 0;
background-color:transparent;
}
Tak powinna wyglądać wykonana strona:
Opis nowych właściwości:
-
background-color, background-image:url(obrazej.jpg), background-repeat, background-repeat - poznasz na tych zajęciach,
-
margin, padding - poznasz na tych zajęciach
Praca domowa
Wykonaj stronę prezentującą technikę warstw.
