Piątek 04 Kwiecień 2025r. Godz 00:00:00      
Postów: 251      

Tworzenie warstw DHTML

Poznane w poprzednich lekcjach arkusze stylów są bardzo przydatne do tworzenia warstw. Warstwa to nic innego jak wydzielony obszar dokumentu w kształcie prostokąta, któremu można określić położenie, kolor tła, styl czcionki oraz wiele innych przydatnych właściwości. Przy zastosowaniu kilku warstw na jednej stronie można ustalić, która ma być na wierzchu, która na samym dole itd. Definicja warstwy powinna przebiegać wg schematu:

<STYLE TYPE="text/css">
    #nazwa_warstwy1 { właściwość: wartość }
    #nazwa_warstwy2 { właściwość: wartość }
</STYLE>

Tekst lub gafika, która ma się znaleźć na warstwie musi być objęta znacznikami <DIV ID="#nazwa_warstwy"> i </DIV>.

<HTML>
  <HEAD>
    <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
    <STYLE TYPE="text/css">
      <!--
      #warstwa1 { position: absolute; left: 50; top: 50; width: 300; height: 200 }
Wartość absolute właściwości position spowoduje, że definiowana warstwa zostanie umieszczona w miejscu o współrzędnych podanych przez left i top względem lewego, górnego rogu aktualnego dokumentu.
      #warstwa2 { position: absolute; left: 50; top: 110; background-color: transparent;
                          font-size: 16pt; color:yellow; text-align: center; width: 300; height: 200 }
      #warstwa3 { position: relative; left: 250; top: 230; background-color: red;
                          width: 200; height: 75; }
W tym przypadku warstwa zostanie umieszczona względem obecnej pozycji w dokumencie (dzięki wartości relative)
      -->
    </STYLE>
  </HEAD>
  <BODY BGCOLOR="#6FB20F">
    <DIV ID="warstwa1">
      <IMG SRC="../rys/comp.jpg">
    </DIV>
    <DIV ID="warstwa2">
      Dzięki warstwom<BR>
      możesz pisać na grafice !!!<BR>
      Bez znajomości DHTML-a<BR>
      jest to niemożliwe.
    </DIV>
      Ten tekst nie jest na żadnej warstwie.
    <DIV ID="warstwa3">
      To jest przykład warstwy względnej.
    </DIV>
  </BODY>
</HTML>