NÁZEV ŠKOLY: Masarykova základní škola a mateřská škola Melč, okres Opava, příspěvková organizace ČÍSLO PROJEKTU: CZ.1.07/1.4.00/21.2623 AUTOR: Mgr. Vladimír.

Prezentace na téma: "NÁZEV ŠKOLY: Masarykova základní škola a mateřská škola Melč, okres Opava, příspěvková organizace ČÍSLO PROJEKTU: CZ.1.07/1.4.00/21.2623 AUTOR: Mgr. Vladimír."— Transkript prezentace:

1 NÁZEV ŠKOLY: Masarykova základní škola a mateřská škola Melč, okres Opava, příspěvková organizace ČÍSLO PROJEKTU: CZ.1.07/1.4.00/ AUTOR: Mgr. Vladimír Rychlý NÁZEV: VY_32_Inovace_Informatika_1 ČÍSLO DUM: 5 TÉMA: Program WebDwarf – vytvoření webové stránky. ROČNÍK: 9. OBDOBÍ REALIZACE: 3/2012

2 Anotace Prezentace popisuje krok za krokem vytvoření stránky pomocí programu WebDwarf. Tento program je freeware a je určen pro tvorbu webových stránek pro začátečníky i bez předchozích zkušeností. Odkaz pro stažení je v citacích na konci prezentace.

3 Program WebDwarf Program určený pro tvorbu webových stránek.
Jeho jednodušší verze, kterou budeme používat, je freeware. Nevyžaduje žádné předchozí zkušenosti s vytvářením webových stránek.

4 Princip programu Webovou stránku tvoříme jako projekt v programu WebDwarf, který má koncovku .ims. V tomto projektu provádíme veškeré úpravy. Z tohoto projektu pak vygenerujeme vlastní webovou stránku s koncovkou .html. Pokud v projektu provedeme úpravy, musíme opět vygenerovat novou html stránku.

5 Před spuštěním programu.
Doporučuji vytvořit novou složku pro každý nový projekt – např. „Oblíbené zvíře“. V této složce si vytvořte podsložku „Obrázky“, do které si ukládejte obrázky pro použití na vytvářené webové stránce. (Není podmínkou, ale je to přehlednější). Spusťte program WebDwarf.

6 První stránka - Nadpis Zmáčkneme tlačítko Title

7 Napíšeme text nadpisu, upravíme vlastnosti a potvrdíme OK.
Barva Typ písma Velikost Tučné Kurzíva Podtržené Zarovnání Nadpis stránky

8 Nadpis můžeme myší přesunout na libovolné místo na stránce.

9 Přidáme text tlačítkem Text

10 Napíšeme text a upravíme vlastnosti.
Podtržené Zarovnání Tučné Kurzíva Barva písma Odrážky Číslování Ulož a zavři

11 Po stisknutí tlačítka Save and Close se text uloží.
Opět ho můžeme myší přesunout na libovolné místo na stránce. Můžeme vytvořit a na stránce rozmístit další texty.

12 Vložení obrázku Obrázek vložíme kliknutím na tlačítko s obrázkem Mony Lisy.

13 Najdeme složku Obrázky, ve které máme připravené obrázky a vybereme obrázek.

14 Práce s obrázkem Obrázek můžeme posunout, kam chceme.
Tažením za roh obrázku ho můžeme zvětšit nebo zmenšit. Šipkou u rohu obrázku ho můžeme pootočit. Stejným způsobem můžeme přidat další obrázky.

15 Uložení projektu Jako u jiných aplikací – ikonou diskety nebo File (=Soubor) -> Save (=Uložit). Vybereme námi vytvořenou složku a změníme název – pro první stránku volte název index. Podívej se na další stranu, jak to má vypadat.

16 Pak klikněte na tlačítko Uložit
Vybraná složka Název projektu Pak klikněte na tlačítko Uložit

17 Generování stránky Nyní si z projektu vytvoříme vlastní webovou, to je html stánku. Použijeme tlačítko Publish. Tady je název stránky = index, vytvoříme tedy stránku index.html

18 Opět vybereme složku. Pak zmáčkneme tlačítko Publish.

19 Po vytvoření stránky zmáčkněte Close.

20 Co je teď všechno ve vaší složce?
Složka s obrázky vytvořená při generování html stránky. Složka s nadpisy vytvořená při generování html stránky. Vámi vytvořená složka s obrázky. Vygenerovaná html stránka, kterou si můžete prohlédnout v internetovém prohlížeči. Projekt, ve kterém můžete provádět další úpravy stránky. Stránku pak musíte znovu vygenerovat.

21 Citace Free Web Page Builder, Drag & Drop Website Design Program. Visual Web Design Tool | Website Building Software [online]. [cit ]. Dostupné z: