1 Tvorba WWW stránek pomocí programu Microsoft FrontPage

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage Pomocí tohoto programu můžete vytvářet WWW stránky s minimální znalostí HTML kódu. Bohužel takto vytvořené stránky obsahují množství chyb a nejsou validní. Program nedodržuje nové technologické standardy. Je součástí starších balíků MS Office a lze jej doporučit pouze naprostým laikům a začátečníkům. S programem se pracuje podobně jako s textovým editorem Microsoft Word, to znamená, že WWW stránku vytváříme podobně jako běžný textový dokument. Na požadované části textu vytvoříte hypertextové odkazy a nadefinujete dynamické prvky. HTML kód se vynegeruje dle příslušných pravidel sám. Můžete si ho prohlédnout a případně doplnit ve druhé záložce programu Microsoft FrontPage, která se zobrazuje v dolní části okna. Třetí záložka umožňuje náhled WWW stránky jak by měla vypadat ve skutečném prohlížeči WWW. Základní strukturu dokumentu nemusíte vytvářet, protože program si ji vytvoří sám. Pouze můžete definovat vlastnosti stránky (barva pozadí, obrázek pozadí, rámy a podobně). 1 5 4 3 1 plocha pro vytváření HTML dokumentu 2 rychlost načtení WWW stránky v sekundách při rychlosti internetové linky 56 Kb/s 3 záložka pro zobrazení WWW stránky jak by měla vypadat v prohlížeči 4 záložka pro zobrazení vygenerovaného HTML kódu 5 záložka pro normální zobrazení dokumentu 2 1.1 Formátování textu Při formátování textu využijete sadu ikon Formát, kde můžete nastavit různé typy písma, velikost písma, barvu písma, tučné písmo, kurzívu, podtržené písmo a další. Můžete také použít z menu Formát funkci Písmo : Příklad formátování textu a vygenerovaného kódu: 1

Vygenerovaný kód HTML stránky naleznete na druhé záložce: Pro lepší přehlednost a orientaci jsou jednotlivé tagy barevně rozlišeny. Pokud v Normálním zobrazení označíte do bloku část textu, tak na záložce HTML se v kódu HTML barevně zvýrazní právě označená oblast. V záložce Náhled máte možnost prohlédnout si výsledek vaší práce tak, jak bude vypadat ve skutečném prohlížeči. Zde je úplný výpis vygenerovaného HTML kódu: <html> <head> <meta http-equiv="content-language" content="cs"> <meta name="generator" content="microsoft FrontPage 5.0"> <meta name="progid" content="frontpage.editor.document"> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>nová stránka 2</title> <style> <!-- 2

p.msonormal {mso-style-parent:""; margin-bottom:.0001pt; font-size:12.0pt; font-family:"times New Roman"; margin-left:0cm; margin-right:0cm; margin-top:0cm} --> </style> </head> <body> 1. Internetová stránka toto je jeden odstavec textu. Dále jsou zobrazeny různé druhy textu a jedna vodorovná čára Text psaný tučně text psaný kurzívou podtržený text modrý text <hr> <h1>nadpis</h1> vycentrovaný text kombinovaný text c2=a2+b2 </body> </html> Pokud chcete změnit vlastnosti stránky (barvu pozadí, ohraničení apod.) postupujte například takto: 1. Klikněte pravým tlačítkem myši (v normálním zobrazení) kdekoliv na zobrazené bílé ploše. 2. Ze zobrazeného plovoucího menu zvolte funkci Vlastnosti stránky. 3. Vyberte požadovanou záložku. 4. Nastavte požadované parametry. 5. Zvolte tlačítko OK. Další možností nastavení vlastností stránky je vybráním funkce Vlastnosti z menu Soubor. 3

1.2 Seznamy Při vytvoření seznamu můžete postupovat například takto: 1. Levým tlačítkem myší zvolte ikonu Číslování (pokud chcete vytvořit číslovaný seznam) nebo na ikonu Odrážky. 2. Na stránce se zobrazí číslice nebo odrážka. 3. Vytvořte požadovaný seznam. Po stisku klávesy Enter se kurzor přesune na další řádek a automaticky se vytvoří další číslo nebo odrážka. Pokud chcete vytvořit vnořený seznam, tak pro vnoření použijte několikrát ikonu Zvětšit osazení. Seznam se začne vytvářet opět od začátku přičemž oproti původnímu seznamu bude odsazen směrem doprava. Číslování Odrážky Zvětšit odsazení 1.3 Odkazy Odkazy v programu Microsoft FrontPage můžete vytvořit například takto: 4 1. Napište jednotlivé položky, ze kterých chcete vytvořit odkazy. 2. Požadovanou položku označte do bloku. 3. Na označené položce klikněte pravým tlačítkem myši. 4. Ze zobrazeného plovoucího menu zvolte funkci Hypertextový odkaz. 5. Zobrazí se okno Vložit hypertextový odkaz, ve kterém zadejte do políčka Adresa URL adresu požadovaného odkazu, nebo ze zobrazené stromové struktury vyberte požadovaný dokument. 6. Zvolte tlačítko OK. Takto postupujte u všech položek, u kterých chcete vytvořit odkazy. Vytvoření odkazu znázorňuje podbarvení a podtrhnutí požadované položky. Barvu hypertextového odkazu můžete změnit například ve vlastnostech stránky.

1 2 3 4 1 vložení existujícího souboru nebo WWW stránky 2 vložení odkazu na místo kde se právě nachází v dokumentu kurzor myši (obdoba tagu <A NAME=.> 3 vytvoření nového WWW dokumentu 4 vložení odkazu na elektronickou adresu 5 políčko pro zapsání URL adresy 5 Při vložení dynamického efektu (pro zlepšení grafické podoby WWW stránky) můžete postupovat například takto (pro vložení dynamického efektu je použit předcházející příklad): 1. Z menu Formát zvolte funkci Efekty Dynamic HTML. 2. Zobrazí se okno (sada ikon) pro nastavení efektů. 1 2 3 1 akce 5

2 způsob použití 3 efekt 3. Levým tlačítkem myši klikněte na požadovaném odkazu. 4. Levým tlačítkem myši vyberte ze zobrazeného okna pro nastavení dynamických efektů akci, použití a efekt, který chcete nastavit. Dynamický efekt se projeví až při zobrazení stránky v režimu Náhledu. Aby mohl dynamický efekt fungovat, vytvoří si Microsoft FronPage tzv. JavaScript (programový soubor), který uloží do adresáře s vytvářenou WWW stránkou. Při kopírování hotové WWW stránky na Internetový server musíte zkopírovat i tyto programové soubory. Jméno programového souboru v našem případě je ANIMATE.JS. Výpis programového souboru ANIMATE.JS je při standardním zobrazení dlouhý 14 stran formátu A4. Tady vidíte, že používání programů pro automatickou tvorbu WWW stránek přináší velkou časouvou úsporu (nehledě na to, že pro základní efekty, které jsou většinou v těchto programech naprogramovány, nemusíte znát programovací-skriptovací jazyk JAVA). 1.4 Obrázky, video Do WWW stránky můžete vložit libovolný obrázek, galerii fortografií, kresbu, automatický tvar, WrdArt, video a další. Postup vložení je shodný s textovým editorem Microsoft Word. Obrázek můžete vložit do WWW stránky načtením z předem připraveného souboru, což může být libovolný obrázek nebo můžete využít galerii obrázků tzv. Kliparty. V Klipartu jsou obrázky rozděleny do kategorií a jsou zobrazeny jejich náhledy, samozřejmě můžete obrázky přidávat a odstraňovat je. Pro vložení můžete také využít Schránku Windows. Obrázek se bude jako objekt vkládat na pozici kurzoru. Proto nejprve nastavte textový kurzor na potřebné místo jinak bude objekt jinde, než jste chtěli. Klipart Potřebujete-li vložit obrázek z galerie Klipart, postupujte například takto: 6 1. Z menu Vložit zvolte funkci Obrázek a funkci Klipart. 2. Zobrazí se podokno úloh Vložit Klipart, ze kterého zvolte například funkci Galerie médií. 3. Z nabídky si vyberte (kliknutím levého tlačítka myši) požadovanou kolekci a obrázek (klipart). 4. Klikněte na požadovaném obrázku pravým tlačítkem myši a zvolte funkci Kopírovat. 5. Uzavřete okno Galerie médií a podokno úloh. 6. Na požadovaném místě ve WWW stránce klikněte pravým tlačítkem myši a zvolte funkci Vložit.

Při tomto způsobu vložení klipartu je použita Schránka Windows. Podobným způsobem můžete vložit libovolný objekt do WWW stránky z libovolného programu. S výhodou lze také použít kombinace kláves Ctrl + C (pro kopírování vybraného objektu do schránky) a Ctrl + V (pro vložení objektu ze schránky na pozici kurzoru). nebo 1. Z menu Vložit zvolte funkci Obrázek a funkci Klipart. 2. Zobrazí se podokno úloh Vložit Klipart, ze kterého zvolte například funkci Galerie médií. 3. Z nabídky si vyberte (kliknutím levého tlačítka myši) požadovanou kolekci a obrázek (klipart) 4. Levým tlačítkem myši přetáhněte požadovaný obrázek na požadované místo ve WWW stránce. V levé části dialogu jsou zobrazeny takzvané kategorie kliknutím levého tlačítka myši na některou z nich se zobrazí náhledy jen těch obrázků, které jsou v příslušné kategorii zařazeny. Obrázek Potřebujete-li vložit obrázek přímo ze souboru, postupujte například takto: WordArt 1. Z menu Vložit zvolte funkci Obrázek a funkci Ze souboru... 2. Zobrazí se dialogové okno Obrázek, ve kterém nastavte požadovaný disk a adresář, kde je uložen obrázek. 3. Potvrďte tlačítko Vložit. Funkce WordArt umí aplikovat na text nejrůznější efekty. Text lze psát zakřiveně či zkoseně, volit výplně písma, natáčet objekt a další. Tyto efekty používejte ale jen tam, kde je to vhodné. Potřebujete-li vytvořit a vložit WordArt do WWW stránky, postupujte například takto: 1. Z menu Vložit zvolte funkci Obrázek a funkci WordArt 2. Zobrazí se galerie WordArtu, ze které vyberte požadovaný WordArt a klikněte levým tlačítkem myši na tlačítku OK. 3. Do editačního okna zapište potřebný text, nastavte vhodné písmo a jeho velikost a potvrďte tlačítko OK. Na obrazovce se zobrazí plovoucí nástrojová lišta, pomocí které můžete měnit vlastnosti objektu. 7

Změnu tvaru WordArtu můžete provést pomocí tlačítka Abc. V zobrazeném objektu se nachází další tzv. deformační body, pomocí kterých můžete dále upravovat tvar WordArtu. Video Při vložení video sekvence postupujte například takto: 1. Z menu Vložit zvolte funkci Obrázek a funkci Video... 2. Zobrazí se dialogové okno Video, ve kterém nastavte požadovaný disk a adresář, kde je uložen soubor s videem. 3. Potvrďte tlačítko Vložit. 8

1.5 Tabulky Tato funkce umožňuje vkládat do vaší WWW stránky tabulky, které vám zajistí přehledné uspořádání vložených údajů. Vložení tabulky můžete provést: Pomocí ikony Vložit tabulku (kliknutím levého tlačítka myši). Pomocí menu Tabulka, funkce Vložit a funkce Tabulka Pomocí menu Tabulka a funkce Navrhnout tabulku. Potřebujete-li vložit tabulku do WWW stránky, postupujte například takto: 1. Z menu Tabulka zvolte funkci Vložit a funkci Tabulka 2. Zobrazí se dialogové okno Vložit tabulku, ve kterém zvolíte počet sloupců, počet řádků a šířku sloupců. 3. Zvolte tlačítko OK. Ve vytvořené tabulce můžete pomocí funkce Navrhnou tabulku z menu Tabulka vložit řádky a sloupce, podklad, nastavit všechny řádky stejně vysoké, sloučit sloupce nebo řádky apod. Pokud využijete ikonu pro vytváření tabulky, postup se mírně změní: 1. Zvolte ikonu Vložit tabulku. 2. Tažením (držte levé tlačítko myši) označte takový počet sloupců a řádků, jaký má mít vytvářená tabulka. Po puštění tlačítka bude tabulka vložena na pozici kurzoru. Chcete-li změnit velikost řádků a sloupců tabulky, použijte tento postup: 1. Přesuňte kurzor myši na hranu, kterou chcete posunout kurzor změní svůj tvar na obousměrnou šipku. 2. Stiskněte a držte levé tlačítko myši a tažením nastavte požadovanou velikost. Vlastnosti tabulky nebo buňky můžete změnit takto: 1. Na požadované tabulce nebo buňce klikněte pravým tlačítkem myši. 2. Ze zobrazeného plovoucího menu klikněte na funkci Vlastnosti tabulky (buňky). 3. Zobrazí se dialogové okno Vlastnosti tabulky (buňky), kde nastavte požadované parametry. 4. Zvolte tlačítko OK. V jednotlivých buňkách tabulky můžete požívat libovolné informace (texty, číselné údaje, obrázky, odkazy, seznamy atd.). 9

1.6 Symboly Do WWW stránky pro oživení grafické podoby můžete vkládat různé symboly. Při vkládání symbolů postupujte například takto: 1. Z menu Vložit zvolte funkci Symbol 2. Zobrazí se dialogové okno Symbol, ve kterém si zvolte typ písma (Webdings, Wingdings apod.). 3. Dvojitým kliknutím levého tlačítka myši vložte na pozici kurzoru požadovaný symbol (může také použít tlačítko Vložit). 10

1.7 Rámy Rámy (rámce) se využívají pro rozdělení WWW stránky na více částí. V programu Microsoft FrontPage základní nastavení rámů provedete pomocí Šablon. V dnešní době se doporučuje je nepoužívat. 1. Z menu Soubor zvolte funkci Nový, funkci Stránka nebo sada webových souborů a funkci Šablony stránek 2. Ze zobrazeného dialogového okna zvolte záložku Stránky rámců. 3. Zvolte požadované rozdělení WWW stránky. 4. Zvolte tlačítko OK. 5. Zobrazí se rozdělení WWW stránky, ve kterém musíte nastavit odkazy na počáteční nebo novou WWW stránku. Po nastavení všech údajů můžete vytvářet nové definované stránky. Hlavní stránku, kde je definováno rozdělení WWW stránky na jednotlivé rámy je vhodné při ukládání pojmenovat INDEX.HTML. Nastavení jednotlivých rámů provedete následovně: 1. Levým tlačítkem myši zvolte požadovaný rám. 2. Z menu Rámce zvolte funkci Vlastnosti rámce. 3. V zobrazeném dialogovém okně Vlastnosti rámce zvolte požadované parametry. 4. Zvolte tlačítko OK. 1.8 Formuláře Při tvorbě formuláře v programu Microsoft FronPage můžete postupovat například takto: 1. Z menu Vložit zvolte funkci Formulář. 2. Ze zobrazeného rozvinutého menu zvolte funkci Formulář. Na WWW stránce se zobrazí základní plocha formuláře s tlačítky Odeslat a Vynulovat. 3. Podobným způsobem zvolte do plochy formuláře požadované prvky formuláře (textová pole, zaškrtávací tlačítka apod). 11

Nastavení vlastností formuláře provedete takto: 1. V základní ploše formuláře klikněte pravým tlačítkem myši. 2. Ze zobrazeného plovoucího menu zvolte funkci Vlastnosti formuláře. 3. V dialogovém okně nastavte požadované parametry. 4. Zvolte tlačítko OK. Pokud chcete používat formuláře vytvořené programem Microsoft FrontPage musíte pro správnou funkci serveru WWW rozšířit tento server o produkt Front Page Server Extensions. 12