Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Warstwy w dokumencie

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:

Zmień kolejność warstw zamieniając np. obecną wartość z-index:2;, na wartość z-index:10;

Tak powinna wyglądać zmieniona 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.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.