Obsah

On-line kurz je rozdělen do 14 logických částí - lekcí.

Každá lekce obsahuje:

• výklad tvorby části webu s přímo prezentací na příkladu (celou dobu tvoříte fiktivní web),
• shrnutí obsahu lekce,
• „domácí" úkol do příští lekce.

Struktura lekcí Vám napomůže snáze pochopit téma, ověřit a procvičit si vlastní schopnosti. Zároveň Vám studium nezabere více než 60 minut času týdně.

Obsah jednotlivých lekcí:

1. Obsluha programu NVu a vytvoření nové stránky

Stažení, instalace a obsluha programu NVu pro tvorbu webových stránek. Struktura webu, základní stránka, složky ve webu..Tvorba nové stránky programem. Možnosti zobrazení stránky, náhled a zobrazení kódu. Přenos textu z Wordu.

Procvičení: vytvoření nové základní stránky , zápis textu do stránky, vytvoření a uložení nové stránky.

2.  Formátování textu

Nastavení znakové sady, velikosti, zvýraznění a barvy písma. Další možnosti písma: podtržení, horní a dolní indexy. Vkládání symbolů. Tvorba nového odstavce a zalomení řádky. Zarovnání a odsazení odstavce.

Procvičení: tvorba nové stránky s nadpisem a různými formáty odstavce a písma

3.  Tvorba seznamů

Tvorba odrážkovaného seznamu a jeho nastavení. Tvorba číslovaného seznamu a jeho nastavení. Tvorba definičního seznamu. Vkládání seznamů do sebe.

Procvičení: Tvorba nové stránky s jednotlivými typy seznamů.

4.  Vkládání obrázků

Vložení kresleného a animovaného obrázku a fotografie do stránky. Úprava vloženého obrázku, titulek, alternativní text. Umístění obrázku v samostatném odstavci a na stránce, obtékání a odstup textu.

Procvičení: Vložení několika typů obrázku do připravené stránky a jejich úprava.

5.  Tvorba tabulek

Vložení tabulky, nastavení počtu řádků a sloupců. Přidání a vymazání řádků a sloupců. Šířka sloupců. Nastavení orámování buněk a tabulky a pozadí buněk. Zarovnání obsahu v buňkách, zarovnání tabulky na stránce. Nadpis tabulky.

Procvičení: Vytvoření nové stránky s několika tabulkami: prezentace údajů, přesné umístění textu na stránce, tabulka s obrázky.

6.  Hypertextové odkazy

Odkaz na webovou stránku, odkaz na obrázek, odkaz na jiný web. Odkaz na elektronickou poštu. Odkaz na soubor PDF a na soubor ke stažení. Tvorba záložek a odkazy na různá místa ve stránce. Vlastnosti odkazu: titulek, odkaz v novém okně. Použití obrázku pro odkaz.

Procvičení: vytvoření nové stránky s různým typem odkazů.

7.  Vlastnosti stránky

Nadpis stránky, způsob kódování češtiny. Nastavení barevného pozadí stránky a  obrázku na pozadí. Nastavení výchozí barvy písma a barev pro hypertextové odkazy.

Procvičení: Úprava dvou vytvořených stránek, vytvoření barevného pozadím a tapety na pozadí textu.

8.  Tvorba formulářů

Vložení formuláře do stránky, vlastnosti formuláře. Vytvoření prvku formuláře: jednoduchý text, pole pro heslo, zaškrtávací předvolba, přepínač, výběr souboru, tlačítka. Vytvoření textového pole a seznamu. Tvorba skupiny prvků. Akce při použití tlačítek.

Procvičení: vytvoření nové stránky s jednoduchým formulářem.

9.  Použití vnořených stylů

Použití standardních stylů při tvorbě stránky. Vytvoření a použití nového vnořeného stylu v rámci jedné stránky. Úprava a odstranění stylu. Využití stylu k formátování textu.

Procvičení: Vytvoření několika stylů a dodatečné formátování hotové stránky pomocí vytvořených stylů.

10.  Komplexní příklad

Návrh webových stránek společnosti, nabízející počítačová školení. Vytvoření základní stránky s odkazy na další webové stránky s informacemi o kurzech, kontaktem na firmu, ceník kurzů (také ke stažení) a objednávkový formulář. Podklady pro tvorbu těchto budou ke stažení na internetu.

11.  Publikování webu

Princip hostingu. Bezplatný hosting. Placený hosting. Komunikace s webovým serverem.

Certifikát o absolvování on-line kurzu.

12.  Pro pokročilé I: stránka s rámečky

Úprava kódu webové stránky, ruční zápis značek v programu NVu. Tvorba hlavní stránky s rámečky. Nastavení vlastnosti rámečků. Použití hypertextových odkazů na stránce s rámečky.

Procvičení: Vytvoření hlavní stránky webu se dvěma rámečky a jednoduchým menu.

13.  Pro pokročilé II: princip externích stylů

Pojem externího stylu. Vytvoření externího souboru se styly a jeho připojení na webovou stránku pomocí úpravy kódu. Základní pravidla pro psaní stylů. Využití připojených stylů k formátování webové stránky.

Procvičení: Tvorba jednoduchého souboru s externími styly, jeho připojení k hotové stránce a formátování stránky.

14.  Pro pokročilé III: více o externích stylech

Systematický přehled možností CSS stylů: nastavení těla stránky, vlastních odstavců, nadpisů a seznamů.

Procvičení: Vytvoření souboru se systémem externích stylů a dodatečné formátování hotové stránky.

Průvodce on-line kurzem:

Po dokončení všech 13 lekcí získáte certifikát o absolvování on-line kurzu.
Zaujal Vás obsah on-line kurzu? Pak neváhejte s objednáním on-line.

Ukázka

Ukázka ze 4. lekce:

• Vložení obrázku do samostatného odstavce
• Vložení obrázku do textu
• Úkol na procvičení do příště

Poznámka: Ukázka neobsahuje celou lekci, pouze její části.

4.1      Vložení obrázku do samostatného odstavce

Do webové stránky je možné umístit obrázek do samostatného odstavce nebo jej vložit do textu.

Mezi prvý a druhý odstavec textu pomocí klávesy Enter vložte nový odstavec a postavte do něj kurzor.

Použijte příkaz Vložit - Obrázek nebo tlačítko Obrázek (bublinka „Vloží nový obrázek nebo upraví označený"). Tím si zobrazíte okno pro vkládání obrázku.

Dále postupujte takto:

1. Klepněte na tlačítko Vybrat soubor a ze složky obrazky zvolte soubor medved1.jpg.
2. Zkontrolujte, že je označena volba URL je relativní k adrese stránky.
3. Označte volbu Alternativní text a do textového pole zapište vhodný popis obrázku.
4. Potvrďte tlačítkem OK.

Vložený obrázek je zarovnán k levému okraji stránky. Jestliže jej chcete zarovnat doprostřed stránky, označte jej a použijte tlačítko Zarovnání na střed (zcela stejně, jako u zarovnání textu).

Stránku uložte a zkontrolujte ve webovém prohlížeči. Alternativní text se zobrazí v bublince, jestliže na obrázek ukážete myší. Pokud by se v prohlížeči obrázek z nějakých důvodů nemohl zobrazit, objeví se místo něj alternativní text.

Jestliže v dialogu pro vkládání obrázku vyplníte také pole Titulek, bude se v bublince zobrazovat text titulku, zatímco alternativní text se zobrazí na stránce místo nedostupného obrázku.,

Při prázdném poli pro alternativní text musíte označit volbu Nepoužít alternativní text. Pokud ponecháte označenou volbu Alternativní text a text nevyplníte, program NVu neumožní obrázek do webové stránky vložit.

4.2      Vložení obrázku do textu

Obrázek je možné také vložit přímo do textu tak, aby byl jeho součástí.

1.       Postavte kurzor na začátek posledního odstavce, začínajícího slovy „V současné době".

2.       Použijte příkaz Vložit - Obrázek nebo tlačítko Obrázek a způsobem, popsaným v předchozím odstavci zvolte soubor medved1.jpg.

3.       Označte volbu Nepoužít alternativní text.

4.       V zobrazeném okně klepněte na záložku karty Vzhled.

5.       V seznamu Zarovnat text kolem obrázku nastavte volbu Zalomení vpravo. Obrázek bude umístěn na stránce vlevo a text bude obrázek obtékat z pravé strany. Volbou Zarovnání vlevo byste dosáhli opačného efektu: obrázek napravo, obtékání zleva.

6.       Aby nebyl text natlačen přímo na obrázek, do pole Odstup - Levý a pravý zapište vhodnou hodnotu (zpravidla okolo pěti bodů). Obrázek bude z levé a pravé strany opatřen malým odsazením.

7.       Potvrďte tlačítkem OK.

ÚKOL na procvičení do příští lekce

Spusťte program NVu a otevřete stránku Obrazky_cviceni.html:

1. Za prvý odstavec textu přidejte prázdný řádek a vložte do něj obrázek gorila_velka.jpg. Jako alternativní text použijte slovo „Gorila".
2. Obrázek vycentrujte doprostřed stránky.
3. Zmenšete rozměry obrázku tak, aby jeho šířka byla 500 bodů a zůstal zachován poměr výšky a šířky.
4. Okolo obrázku vytvořte rámeček o síle tři body.
5. Do předposledního odstavce (začínajícího slovy „Tlupu goril") vložte obrázek gorila_mala.jpg bez alternativního textu.
6. Obrázek ponechte v původní velikosti a nastavte obtékání textu zprava.
7. Okolo obrázku vytvořte vodorovný odstup 7 bodů.
8. Za konec textu vložte vodorovnou čáru.
9. Délku čáry nastavte na 70% šířky okna.
10. U čáry nastavte sílu 4 body a zrušte stínování.

Pro kontrolu naleznete postup i výsledek cvičení na začátku příští lekce.