Základy informatiky a výpočetní techniky 2

Cvičení č. 7

| 1VS6 22.03.2004 | 1VS12 24.03.2004 | 1VS18 25.03.2004 | 1VS19 22.03.2004 | 1VS24 24.03.2004 | 1VS36 25.03.2004 |


Dynamické HTML

Samostatná práce

  1. Na disku D: si vytvořte vlastní složku a v ní dvě další složky pojmenované HTML a OBRAZKY.

  2. Do složky OBRAZKY si uložte následující čtyři obrázky (kliknutím pravým tlačítkem myši na požadovaný obrázek a následnou volbou příkazu Save picture as...). S těmito obrázky budeme dále pracovat.

    prhrad1.jpg
    prhrad2.jpg

    pernst1.jpg
    pernst2.jpg


  3. Do složky HTML si uložte následující dva soubory (kliknutím pravým tlačítkem myši na název požadovaného souboru a následnou volbou příkazu Save target as...).


    Na tyto soubory se potom budete ze své stránky odkazovat.

  4. Vaším úkolem je vytvořit HTML stránku přesně podle následujícího vzoru. Stránku uložte pod názvem hrady.htm do složky HTML. Při vkládání obrázků používejte pouze relativní cesty. Použité barvy jsou lightblue, red, lightyellow, silver a antiquewhite.




  5. Prvky stránky zarovnejte užitím tabulky. Tlačítka s nápisy vodorovně, svisle a tlačítko Autor stránky budou vstupní prvky typu button. V sekci barev pozadí (prvky typu radio) bude přednastavena bílá (atributem checked). Při vytváření tabulky se můžete inspirovat následující nápovědou.




  6. Texty Více informací budou hypertextovými odkazy na soubory prazskyhrad.htm a pernstejn.htm, které máte uloženy ve složce HTML.

  7. Po kliknutí na tlačítko Autor stránky (tj. při události onclick) se zobrazí metodou alert informace o autorovi v následujícím tvaru (viz příklad JS 1.1 sbírky příkladů).



  8. Pokud si uživatel zvolí nějakou barvu, pak se tato barva nastaví jako pozadí celé stránky. Tedy při události onclick příslušného rádiového tlačítka změňte vlastnost bgColor objektu document (viz příklad JS 1.2 sbírky příkladů).

  9. Při najetí myší na obrázek hradu (událost onmouseover) se původní obrázek nahradí interiérem příslušného hradu. Při opuštění kurzoru myši z daného obrázku (událost onmouseout) se zobrazí obrázek původní (viz příklad JS 1.6 sbírky příkladů).



Volitelná část – práce s filtry a kaskádovými styly

Pro konkrétní objekt na stránce můžeme filtr přímo nastavit takto:


Původní obrázek 
  <IMG src="images/pernstejn.jpg">
Horizontální převrácení 
  <IMG src="images/pernstejn.jpg" style="filter: fliph">
Převod na odstíny šedi 
  <IMG src="images/pernstejn.jpg" style="filter: gray">
Nastavení průhlednosti
radiální transparentní přechod 
  <IMG src="images/pernstejn.jpg" style="filter: alpha(style=2)">
Nastavení průhlednosti
obdélníkový transparentní přechod 
  <IMG src="images/pernstejn.jpg" style="filter: alpha(style=3)">
Nastavení průhlednosti
lineární transparentní přechod z úrovně průhlednosti 60% 
  <IMG src="images/pernstejn.jpg"
       style="filter: alpha(opacity=60, finishopacity=0, style=1)">
Zvlnění 
  <IMG src="images/pernstejn.jpg"
       style="filter: wave(strength=3, freq=4, lightstrength=15)">
Kombinace filtrů 
  <IMG src="images/pernstejn.jpg" style="filter: gray alpha(style=2)">



Pokračujte ve své samostatné práci

  1. Tlačítka Převrátit obrázek vodorovně a svisle slouží k převrácení obrázku. Použijte filtry flipv a fliph. Hodnotu filtru je možné přiřadit skriptem následujícím způsobem:
    objekt.style.filter="flipv"

  2. Při kliknutí na obrázek se hodnota nastaveného filtru zruší, což provedeme následujícím způsobem:
    objekt.style.filter=""

  3. Vyzkoušejte si další filtry. Jejich popis včetně prametrů získáte prostřednictvím níže uvedených odkazů.

  4. Na souborech prazskyhrad.htm a pernstejn.htm si vyzkoušejte práci s kaskádovými styly (CSS). Pro nadpis H1 nastavte vlastnosti tak, aby se každý text vymezený touto značkou psal modře tučným písmem Arial o velikosti 32 bodů (vlastnosti font-family, font-weight, font-size a color). Vlastnosti elementu P modifikujte tak, aby první řádek každého odstavce byl odsazen o 20 bodů (vlastnost text-indent) a text celého odstavce byl zarovnán do bloku (vlastnost text-align) apod. Vše potřebné ohledně CSS naleznete ve skriptech na str. 78 až 84.

Stránky věnující se problematice filtrů a CSS: