Děláme www stránky v HTML editoru - 5. část

Už popáté se scházíme společně s Front Page Expressem, abychom se v něm naučili vytvářet jednoduché HTML stránky. Co se naučíme dnes? Minule jsme slíbili vkládání obrázků. Tak pojďme na to.

     Jako vždy si tedy otevřeme ve Front Page Expressu naši stránku a budeme v ní pokračovat. Když už ale jsme v našem adresáři "html", dříne, že otevřeme soubor "index.htm", založíme si tu podadresář "obr", kam budeme dávat obrázky. Asi jich nebude moct, takže by mohly být klidně přímo v adresáři "html", ale bude dobré, když se pro případ, až budete dělat rozsáhlejší stránku, naučíme adresář založit.

     Klikneme pravým tlačítkem myši do tabulky, z menu vybereme "Nový objekt" a v dalším rozvinutém menu pak "Složka". Tu rovnou pojmenujeme "obr".

     Nyní můžeme kliknout na soubor "index.htm" a otevřít jej. Teď půjde o to sehnat obrázek, který vložíme. Stáhnout jej můžeme například z Internetu. Vyzkoušíme si to na stránce http://www.bratul.ekamarad.cz/bratrstvo/martas.htm, kde si zkusíme stáhnout fotku Marťase.

     Klikneme na fotografii pravým tlačítkem myši a z menu vybereme "Uložit obrázek jako".

     Nyní si klikneme na hypertextový odkaz Martin, klikneme na "Nástroje" v hlavním menu a dále "Sledovat hypertextový odkaz". To už také známe. Otevře se nám stránka "martin.htm", do které obrázek vložíme. Kurzor si postavíme vlevo nahoru na úroveň prvního řádku textu.

     D8le klikneme v hlavním menu na "Vložit" a v rozvinutém menu na "Obraz".

     Dále klikneme na "Procházet".

     A nyní klikneme na adresář "obr".

     Zde vidíme obrázek "martas.gif", který jsme si před chvílí stáhli a tak na něj klikneme. Obrázek se nám vloží do stránky.

     Vidíme ale, že nám řádky našeho textu klesly pod úroveň obrázku. Toho se ale nelekejte. Musíme nastavit vlastnosti právě vloženého obrázku a tak na něj klikneme pravým tlačítkem myši a v rozvinutém menu zvolíme "Vlastnosti obrazu"

     Zdroj obrazu máme už přednastavený, takže jej nebudeme měnit. Směruje nás ze stránky "martin.htm", která je v adresáři "html" do adresáře "obr", kde je obrázek "martas.gif". Klikneme nahoře na tlačítko "Vzhled".

     Pro nás je nyní důležité "Zarovnání". To máme v tuto chvíli nastaveno "Dolů", což nám způsobuje to, že je text až pod obrázkem. Toto menu rozvineme a místo "dolů" nastavíme "doleva". Potvrdíme kliknutím na tlačítko vlevo dole OK.

     Vidíme, že je vše vyřešeno a obrázek je vlevo a zprava je obtékán textem. Zde musíme dávat pozor, protože pokud je kurzor na obrázku, hrozí, že pokud zmáčkneme libovolnou klávesu, obrázek si vymažeme. To poznáme podle bodů kolem něj. Stačí kliknout kurzorem kamkoliv mimo obrázek.

     Stránku jsme tedy opět vylepšili a naučili jsme se něco nového. Příště si povíme, co to je navigace a jak vepisovat emailové adresy a odkazy na jiné stránky. Nyní zbývá stránku opět nahrát pomocí FTP klienta, což už umíte. Musíte tentokrát nahrát celý adresář "obr", což je stejné, jako když nahráváte soubor. Ze souborů pak stačí nahrát "martin.htm", protože v souboru "index.htm" jsme nic neměnili. Stránku po této lekci najdete na adrese http://www.htlm5.ekamarad.cz.