Microsoft FrontPage učební texty. Miroslava Černohlávková Základní škola Vrchlického 5, Ostrava-Radvanice

Transkript

1 Microsoft FrontPage 2000 učební texty Miroslava Černohlávková Základní škola Vrchlického 5, Ostrava-Radvanice

2 Obsah Web... 3 Vytvoření nového webu... 3 Otevření webu... 4 Grafické prostředí programu... 6 Pohledy na stránky webu... 7 Webové stránky... 9 Text a seznamy... 9 Psaní textu, styly odstavců Seznamy s odrážkami, očíslované, víceúrovňové Tabulky Vytvoření tabulky Formátování tabulky a buněk Obrázky Formáty obrázků Vkládání obrázků na stránku Nastavení vlastností obrázků Řešení pomalého načítání obrázků Odkazy Vytvoření odkazů Grafická mapa Animace, zvuk a video Vložení videa Zvuk na pozadí stránky Animace prvků na stránce Proměnlivé tlačítko Formátování webových stránek Barevné pozadí stránek Použití témat Sdílené okraje

3 Web Web je sada webových stránek, kterou publikujeme nejčastěji na Internetu. Tvoříme-li nový web, vytváříme ho na lokálním disku, až po dokončení ho publikujeme na Internet. Program FrontPage slouží k vytváření www stránek, k publikování webu a jeho další údržbě. Vytvoření nového webu 1. Z hlavní nabídky vybereme příkaz File New Web. 2. Objeví se nabídky šablon, jednu z nich si vybereme. Šablony jsou weby s předpřipravenými stránkami na určité téma, např. osobní web, firemní web atd. 3. Do textového okna napíšeme název webu včetně jeho umístění. Klikneme na tlačítko OK a web je připraven na vytváření webových stránek. Vybereme příkaz File New Web. Vytvoří web s jedinou stránkou. Průvodce pro vytvoření webu pro obchodní organizaci. Web pro podporu prodeje v obchodní organizaci. Web pro diskutující skupiny. Vytvoří prázdný web. Vytvoří nový web z kopie webu (importuje soubory z existujícího webu). Osobní web, do kterého můžeme dát své osobní údaje. Zde napíšeme název webu včetně jeho umístění. 3

4 Při zakládání nového webu jsou (podle typu webu) vytvořeny složky a stránky : 1. _private (tato složka slouží pro ukládání pomocných souborů FrontPage; je to skrytá složka a uživatelé nemohou její obsah prohlížet pomocí prohlížeče). 2. Images (tato složka slouží pro ukládání obrázků). 3. Startovací stránka (obvykle se jmenuje index.htm, index.html, default.htm nebo default.html). Je to úvodní stránka webu. 4. Mohou být vytvořeny i další složky nebo stránky podle toho, jaký typ webu jsme si vybrali. Příklad: Složky _private, images a startovací stránka index.htm byly vytvořeny po volbě One Page Web z dialogu pro nový web. Otevření webu Chceme-li s nějakým webem pracovat, musíme si ho nejprve v programu FrontPage otevřít. Klasický způsob otevření webu: 1. Zadáme příkaz File Open Web z hlavní nabídky nebo použijeme ikonu Open Web. Pozor, v programu FrontPage máme dvě ikony Open (otevře webovou stránku) a Open Web (otevře web). 2. Je-li web umístěn na lokálním nebo síťovém disku (což budeme používat při výuce), napíšeme jeho úplný název včetně cesty do okna Folder name. Kdybychom otevírali web umístěný na serveru www, museli bychom napsat jeho URL adresu. Zde můžeme vyhledat a označit web, který chceme otevřít. V tomto okně je napsána adresa otevíraného webu. 4

5 Otevření webu, který jsme nedávno upravovali Většinou pracujeme pouze s malým počtem webů. Pro tento případ je výhodný následující postup při otevírání webu: 1. Dáme příkaz File Recent Webs (z hlavní nabídky FrontPage). 2. Po otevření nabídky nedávno zpracovávaných webů vybereme název požadovaného webu a web otevřeme. Zavření webu Po ukončení práce web zavřeme použitím příkazu File Close ( použitím tohoto příkazu uzavíráme pouze web, nikoliv program FrontPage). Při ukončení programu FrontPage se otevřený web zavře automaticky. Zrušení webu Zrušení webu znamená odstranění všech stránek a všech souborů. Tato akce je nevratná, web je zrušen trvale! Web, který chceme zrušit, nejprve otevřeme ve FrontPage. Klikneme na název webu pravým tlačítkem myši a z místní nabídky zvolíme příkaz Delete. 5

6 Grafické prostředí FrontPage 2000 V levém rohu pracovního okna FrontPage je šest tlačítek pro přepínání mezi různými pohledy (režimy), ve kterých můžeme při práci s webem zobrazovat webové stránky. Při práci na svém webu nejvíce času strávíme v zobrazení stránek (pohled Page), protože právě v něm upravujeme konkrétní vzhled stránek. Budeme v něm používat tři pohledy: 1. Normální zde navrhujeme a upravujeme vizuálně obsah stránky. K dispozici máme řádek nabídky a tlačítka na panelu nástrojů. 2. HTML obsah stránky vidíme zapsán v jazyce HTML. Známe-li jej, můžeme v něm provádět úpravy přímo. 3. Preview náhled. Stránka je zobrazena tak, jak ji uvidí uživatel ve svém prohlížeči. Tlačítka pro přepínání mezi různými pohledy (Views) na stránky webu. Page pohled na vybranou stránku, kterou právě upravujeme. Vidíme vzhled stránky. V zobrazení stránek jsou tři pohledy normální (Normal), HTML a náhled (Preview). Folders pohledy po složkách, vidíme strukturu webu. V levé části okna je struktura složek webu včetně jména serveru a webu. V pravé části je seznam objektů (stránek,obrázků ) ve složkách. Reports pohledy na soubory. V tomto pohledu si můžeme zobrazit řadu souhrnných informací a přehled o stavu webu velikost webu, počet a velikost obrázků, seznam souborů atd. Navigation pohled na grafické schéma webu. Stránky jsou zobrazeny jako obdélníky, ve kterých jsou napsány jejich titulky. Taháním myší za tyto obdélníky měníme schéma webu. Hyperlinks pohled na odkazy. Můžeme si prohlédnout symbolicky znázorněné odkazy na stránky. Odkazy na externí stránky mají ikonku zeměkoule. Odkazy na lokální stránky mají ikonky + nebo -, které rozbalí nebo zavřou další odkazy. Tasks pohled na řešené úkoly. Používá se v případě, kdy na jediném webu pracuje více autorů. Zde je seznam jejich úkolů. 6

7 Příklady pohledů na stránky webu 1. Zobrazení stránek Page View: 2. Pohled po složkách Folders View: 3. Pohled na soubory Reports View: 7

8 4. Schématický pohled Navigation View: 5. Pohled na odkazy Hyperlinks View: 6. Pohled na řešené úkoly: 8

9 Webové stránky Web se skládá ze stránek, které jsou vzájemně propojeny odkazy. Odkazy určují, na jaké stránky se můžete přesunout z domovské i jakékoliv další stránky na webu. Web začíná na domovské stránce (Home Page), což je titulní stránka webu a první stránka, kterou uvidí uživatel po zvolení adresy webu. Propojení stránek odkazy určuje strukturu webu. Další novou stránku webu si vytvoříme z hlavní nabídky volbou příkazu File New Page. Otevře se dialogové okno, v němž máme možnost vybrat si ze seznamu šablon a průvodců. Můžeme také vytvořit prázdnou stránku pomocí tlačítka New Page na panelu nástrojů Standard. Vlastní obsah stránek jsou objekty, které na stránky vkládáme. Na stránky můžeme umístit: Text a seznamy (číslované nebo s odrážkami). Tabulky. Obrázky. Odkazy. Animace, zvuk, video. Formuláře. Další objekty (např. ActiveX Control, Java Applet, ). Text a seznamy Základním prvkem webových stránek je text. Text můžeme zapisovat přímo v programu FrontPage nebo importovat již hotové texty např. z Wordu. Při kopírování textu z Wordu vybereme v okně Wordu úsek textu, umístíme ho do schránky (Ctrl+C), přepneme se do okna FrontPage a vložíme text na stránku (Ctrl+V). Při práci s textem využíváme panel nástrojů Formát. Nemáme-li jej zobrazen, využijeme z hlavní nabídky příkaz View Toolbars Formatting. Pomocí tohoto panelu můžeme formátovat text. Při psaní a formátování textu využijeme mnohé znalosti, které jsme získali při výuce programu Word. Panel Formát: Zarovnání odstavce vlevo, na střed, vpravo. Odrážky a číslování. Barva písma. Styly odstavců. Font typ písma. Velikost písma. Řez písma tučné, kurzíva, podtržené. Detailnější nastavení písma můžeme provést pomocí dialogového okna Font, který zobrazíme z hlavní nabídky volbou příkazu Format Font. Pozor! Pokud vložíme na stránku text napsaný takovým typem písma, který uživatel nemá ve svém počítači nainstalován, bude mu tento text zobrazen výchozím fontem v jeho prohlížeči. Proto není příliš vhodné používat při tvorbě textu na stránkách málo obvyklé fonty. 9

10 Psaní textu Při psaní text rozdělujeme do odstavců. Odstavce ukončujeme klávesou Enter. Za odstavec je tedy považován blok textu až po další stisk klávesy Enter. Text do řádků rozděluje FrontPage automaticky podle šířky stránky. Pokud chceme ukončit řádek dříve, než by došlo k automatickému ukončení, použijeme zalomení řádku stiskem kláves Shift+Enter. Znaky, které nenajdeme na klávesnici, můžeme vložit pomocí okna Symbol, který zobrazíme příkazem z hlavní nabídky Insert Symbol. Chceme-li smazat jen několik znaků, použijeme klávesy Delete (maže znaky od kurzoru doprava) nebo Backspace (maže znaky od kurzoru doleva). Rušíme-li větší blok textu, označíme ho a stiskneme klávesu Delete. Text můžeme kopírovat a přesouvat pomocí schránky: příkazem Edit Cut vyjmeme označený text do schránky, příkazem Edit Copy označený text zkopírujeme do schránky, příkazem Edit Paste vložíme text ze schránky na místo, kde máme umístěn kurzor. Kopírování a přesouvání textu můžeme provádět i pomocí myši. Text označíme a pak táhnutím myší při stisknutém levém tlačítku přesuneme na požadované místo. Pokud při táhnutí myší držíme klávesu Ctrl, text se zkopíruje. Provedeme-li nechtěně nějakou akci (např. něco omylem smažeme), obnovíme původní stav příkazem Edit Undo nebo stiskneme tlačítko Undo. Po napsání textu můžeme provést kontrolu pravopisu příkazem Tools Spelling, klávesou F7 nebo tlačítkem. Styly odstavců Při psaní textu na stránkách jej můžeme formátovat pomocí stylů odstavce podobně jako v textových editorech. Styly odstavce jsou přednastavené vlastnosti textu v celém odstavci, nelze je použít jen na část odstavce. Použitím těchto stylů jednak zkrátíme čas (na odstavec aplikujeme najednou více vlastností jako třeba typ, barvu, velikost písma) a navíc nemusíme u všech odstavců tyto vlastnosti postupně nastavovat ručně. Důležité také je, že tak zajistíme stejný vzhled odpovídajících si odstavců (např. jednotný vzhled nadpisů na stejné úrovni). Zde kliknutím rozvineme seznam stylů a vybereme si požadovaný styl. Před výběrem stylu musíme mít kurzor v tom odstavci, který má být podle tohoto stylu změněn. Stránky lze vytvářet i pomocí tzv. témat (témata si vysvětlíme později), každé téma má jinou sadu stylů odstavce. Většinou máme v seznamu tyto styly: styl Normal - pro běžný text, styly Heading (1-6) pro nadpisy různých úrovní (Heading1 pro nejvyšší a Heading6 pro nejnižší úroveň nadpisů), styl Numbered List pro číslované seznamy, styl Bulleted List pro seznamy s odrážkami, styl Adrres pro psaní adres, styl Formatted pro text viditelně odlišený od okolí, např. citace. (Existují ještě i další styly.) 10

11 Seznamy Seznamem rozumíme výčet položek, které jsou uvedeny odrážkou nebo číslem. Příklad seznamu s odrážkami: o Monitor. o Počítač. o Klávesnice. Příklad očíslovaného seznamu: 1. Jirka 2. Pavel 3. Roman Při vytváření seznamů postupujeme tak, že nejprve napíšeme jednotlivé položky tak, aby byly odděleny v samostatných odstavcích (po napsání každé položky stiskneme klávesu Enter). Poté myší označíme všechny položky a stiskneme tlačítko odrážky nebo číslování. Chceme-li si však vybírat z více možností odrážek a číslování, pak místo tlačítek použijeme příkaz z hlavní nabídky Format Bullets and Numbering. Tím si zobrazíme dialogové okno, v němž máme možnost výběru různých tvarů odrážek a různých způsobů číslování seznamů. Je možné vytvářet i víceúrovňové seznamy, v nichž se mohou kombinovat položky číslované a položky s odrážkami. Příklad víceúrovňového seznamu: Téma školení 1. Základy práce s počítačem 2. Windows MS Office Učebnice 1. Začínáme s počítačem 2. Windows 2000 pro začátečníky 3. Microsoft Office Dialogové okno pro výběr odrážek a číslování položek seznamu: (okno zobrazíme příkazem Format Bullets and Numbering) Na prvních dvou záložkách si můžeme vybrat druh odrážek. Na této záložce vybíráme, jakými číslicemi nebo písmeny budou položky seznamu označeny. 11

12 Tabulky Využití tabulek na webových stránkách je dvojí: Tabulky se na webových stránkách používají pro údaje, které lze nejpřehledněji zobrazit uspořádané do sloupců a řádků např. ceníky zboží, rozvrhy hodin atd. Tabulky se výhodně používají i pro zarovnání a uspořádání objektů na stránce. Například menší obrázky a jejich popisky můžeme vložit do buněk (políček) tabulky a tím je zarovnáme. Aby při prohlížení stránek nebylo vidět, že obrázky jsou ve skutečnosti umístěny v tabulce, skryjeme ji. Skrytí tabulky dosáhneme tím, že nastavíme velikost jejích okrajů na nulu. Vytvoření tabulky Tabulku lze v programu FrontPage vytvořit následujícími způsoby: 1. Vytvoření tabulky pomocí tlačítka Insert Table. Klikneme na tuto ikonu, držíme stisknuté levé tlačítko myši a v rozbaleném okně s mřížkou natáhneme symbolickou tabulku tak, aby měla požadovaný počet sloupců a řádků. V této mřížce tažením myší určíme počet řádků a sloupců budoucí tabulky. 2. Vložení tabulky pomocí dialogového okna. Umístíme kurzor na stránce do místa, kde chceme vložit tabulku. Z nabídky zvolíme příkaz Table Insert Table. Zobrazí se dialogové okno Insert Table. V něm zadáme počet řádků, sloupců a další vlastnosti tabulky. Zarovnání tabulky v rámci stránky. Počet řádků. Počet sloupců. Velikost okraje tabulky. Vzdálenost okraje buněk od jejich obsahu. Tloušťka okraje buněk. Šířka sloupců v bodech nebo v procentech. 12

13 3. Nakreslení tabulky. Příkazem z nabídky Table Draw Table si zobrazíme samostatný panel pro tabulku - panel Tables, na němž je tlačítko Draw Table (nakreslit tabulku). Po stisknutí tohoto tlačítka dostane kurzor myši tvar tužky a můžeme s ní nakreslit tabulku. Opětovným stisknutím tlačítka kreslení tabulky ukončíme. Pokud při kreslení tabulky některé čáry vytvoříme chybně, použijeme k jejich odstranění tlačítko Eraser (ukazatel myši se zobrazí jako guma). Panel Tables: Zarovnání obsahu buňky k hornímu okraji. Zarovnání obsahu buňky na střed. Zarovnání obsahu buňky k dolnímu okraji. Barva pozadí buněk. Kreslení tabulky. Vymazání vybraného okraje tabulky. Přidání řádku do tabulky. Přidání sloupce Odstranění buněk. Tlačítka pro rozdělení nebo sloučení buněk. Stejná šířka řádků či sloupců. Vložení dat do tabulky Do tabulky můžeme vložit: text, obrázky, video, další vnořenou tabulku, prakticky všechny objekty, které lze vložit na stránku. Kurzor v tabulce se přemísťuje pomocí kurzorových kláves (šipek) nebo pomocí myši (klikneme myší do té buňky, kam chceme kurzor přemístit). Do následující buňky lze kurzor přemístit stiskem klávesy Tab, do předcházející buňky stiskem kombinace kláves Shift+Tab. Sloučení a rozdělení buněk tabulky 1. Spojení buněk: Označíme buňky, které chceme spojit do jedné. Dáme příkaz Table Merge cells nebo klikneme na tlačítko Merge Cells. 2. Rozdělení buněk: Označíme buňky, které chceme rozdělit do více buněk a dáme příkaz Table Split Cells nebo použijeme tlačítko Split Cells. Určíme, jestli chceme buňky rozdělit do sloupců nebo do řádků. Nastavíme počet budoucích sloupců nebo řádků. Příklad tabulky se sloučenými a rozdělenými buňkami: 13

14 Formátování tabulky a buněk Při formátování tabulky a buněk nastavujeme: okraje, pozadí, vnitřní okraje (vzdálenost obsahu buňky od okrajů), zarovnání obsahu v rámci buňky. Před formátováním musíme nejprve označit ty buňky, kterých se bude formátování týkat. Pokud nastavujeme vlastnosti celé tabulky, stačí umístit kurzor kdekoliv do tabulky. Příkazem Table Properties Table vyvoláme dialogové okno Table Properties pro formátování celé tabulky. Příkazem Table Properties Cell zobrazíme okno Cell Properties pro formátování pouze jedné nebo jen několika vybraných buněk. Vlastnosti celé tabulky: Zarovnání tabulky v rámci webové stránky. Způsob obtékání tabulky textem. Šířka tabulky. Výška tabulky. Určení vzdálenosti obsahu buněk. Okraje tabulky - tloušťka a barva. Pozadí tabulky barva nebo obrázek. Trojrozměrný vzhled tabulky (stínované okraje). Vlastnosti vybraných buněk: Zarovnání obsahu buňky vodorovně (doleva...). Zarovnání obsahu buňky svisle (nahoru,dolů ). Počet spojených buněk v řádku a ve sloupci. Barva okrajů buňky. Nastavení záhlaví tabulky. Šířka sloupce. Výška řádku. Pozadí buňky barva nebo obrázek. 14

15 Obrázky Obrázky vylepší a zpestří vzhled stránek. Mohou se využít jako: pozadí stránek nebo tabulek, ikony, odkazy, tlačítka, grafické mapy, fotografické galerie apod. Při vkládání grafiky bychom ale neměli přehánět, protože grafika může být značně objemná a tudíž může způsobit příliš dlouhé načítání našich stránek do prohlížeče! Existuje velké množství formátů (typů) grafiky, ale pro webové stránky se nejčastěji používají formáty GIF a JPEG. Obrázky ve formátu JPEG: Formát JPEG se nejvíce používá u fotografií (tisíce až miliony barevných odstínů). JPEG je vhodný formát využívající kompresi ( stlačení velikosti), proto tyto obrázky nejsou příliš velké. Obrázky ve formátu GIF: Mohou být statické nebo animované. Animované obrázky GIF jsou na webových stránkách časté, jsou to např. pohybující se šipky nebo různé postavičky atd. Lze je vyrobit grafickým programem. Obrázky GIF obsahují pouze 256 barev, tj. GIF neumožňuje zobrazení v takové barevné kvalitě jako JPEG. Mají však dvě základní přednosti průhledné pozadí a prokládané řádky. Průhledné pozadí (Transparent) tato vlastnost umožňuje vyřešit problém s tím, že většina rastrových formátů ukládá jen pravoúhlé obrázky bez ohledu na skutečný, nepravidelný tvar obrázků. Většinou se obrázky do pravoúhlého tvaru doplní nějakou barvou. Tato barva se skryje označením jako průhledná - transparentní. Obrázek pak lépe zapadne na stránku, protože má vlastní pozadí průhledné a v prohlížeči se nahradí barvou pozadí stránky. Můžeme tak na stránce kombinovat obrázky, aniž by byly rušeny různými okraji. Prokládané řádky (Interlaced) tato vlastnost je výhodná pro ukládání středně velkých až velkých obrázků. Obrázek se neukládá postupně jeden řádek za druhým shora dolů, ale ukládá se nejprve každý osmý, pak každý čtvrtý, každý druhý řádek a nakonec zbytek. Prokládaně uložený obrázek poznáme při jeho načítání do prohlížeče tak, že se nám nejprve objevuje jakoby mlhavý obrázek, který se postupně zaostřuje a vylepšuje. Smyslem je to, že uživatel již zhruba v polovině načítání obrázku pozná, co obrázek obsahuje, a může se rozhodnout, jestli chce čekat na natažení kompletního obrázku nebo načítání ukončí. Vkládání obrázků na stránku Při vkládání obrázků je vhodné, abychom všechny soubory s obrázky, které na svůj web chceme dát, umístili do samostatné složky images. Tato složka se vytváří automaticky při vytvoření webu. Kromě kopírování prostřednictvím schránky můžeme prakticky všechny obrázky vložit pomocí dialogového okna Picture. Pokud vkládáme obrázek na stránku pomocí schránky, nejprve jej do schránky zkopírujeme, pak vložíme na webovou stránku a při ukládání webu budeme programem vyzváni, abychom obrázek uložili do souboru (soubor s obrázkem se stane součástí webu). 15

16 Postup při vkládání obrázku na stránku: 1. Umístíme kurzor na místo, kde bude obrázek. 2. Pokud zvolíme z nabídky příkaz Insert Picture From File nebo klikneme na tlačítko Insert Picture na panelu nástrojů, zobrazí se dialogové okno Picture. V něm najdeme a označíme požadovaný soubor, dáme OK a obrázek bude vložen. 3. Pokud zvolíme z nabídky příkaz Insert Picture Clip Art zobrazí se okno Clip Art Gallery pro výběr klipartu (kliparty lze vložit i prostřednictvím okna Picture). Tlačítko Insert Picture (vložit obrázek). Vložení obrázku klipartu. Vložení obrázku ze souboru. Dialogové okno Picture pro vložení obrázku: Seznam obrázků. Adresa obrázku (buď na disku nebo na Internetu). Hledání obrázku na disku. Hledání obrázku na Internetu. 16

17 Nastavení vlastností obrázků Na obrázek, jehož vlastnosti chceme upravovat, klikneme pravým tlačítkem myši a z místní nabídky zvolíme Picture Properties (vlastnosti obrázku) nebo stiskneme klávesy Alt+Enter. Zobrazí se okno Picture Properties se třemi záložkami General, Video, Appearance. General základní nastavení. Na této záložce je uvedena především cesta a název souboru s obrázkem a grafický formát obrázku. Video nastavení parametrů pro vložení videa. Appearance nastavení velikosti a umístění obrázku. Cesta a název souboru. Grafický formát obrázku. Obrázek s průhledným pozadím. Kvalita obrázku (1-100), větší kvalita-větší soubor. Náhradní zobrazení malého obrázku nebo textu místo původního obrázku (při pomalém načítání nebo při vypnutém zobrazování obrázků). Prokládaný obrázek. Je vyplněno jen v tom případě, že je obrázek odkazem. Definuje umístění obrázku na stránce a zarovnání textu vzhledem k obrázku. (Podrobněji vysvětleno na další stránce textů.) Tloušťka rámečku kolem obrázku. Nula znamená žádný rámeček. Nastavení velikosti obrázku v bodech. Width šířka obrázku, Height výška obrázku. Určení vodorovné a svislé vzdálenosti okrajů obrázku od nejbližších objektů. 17

18 Zarovnání obrázků Obrázky jsou na stránce umístěny dvěma způsoby. Obrázky jsou spojeny s textem, to znamená, že napíšeme-li text před obrázek, obrázek se posune směrem dolů (obrázek se chová jako jedno z písmen). Poloha obrázku je absolutní, to znamená, že můžeme pomocí myši pohybovat s obrázkem nezávisle na textu. Standardní nastavení je spojení obrázku s textem. Chceme-li změnit polohu obrázku na absolutní, klikneme na panelu Pictures na ikonu Position Absolutely. Obrázek můžeme zarovnávat vzhledem k textu. Je to ale možné jen v případě, když je obrázek spojen s textem. Zarovnání nastavujeme v dialogovém oknu Picture Properties na záložce Appearance. Možnosti zarovnání textu vzhledem k obrázku: Standardně je v prohlížeči nastaveno zarovnání Bottom, tedy spodní okraj obrázku s daným řádkem, dále pak text pokračuje pod obrázkem.většinou se ale používá zarovnání Left nebo Right, protože text pak obrázky hezky obtéká. 18

19 Další úpravy obrázků Další úpravy obrázků můžeme provádět pomocí ikon na panelu Pictures: Tento panel zobrazíme z nabídky příkazem View Toolbars Pictures. Otáčení a překlápění obrázku: Původní obrázek. Otočí obrázek Otočí obrázek Překlopí obrázek Překlopí obrázek o 90 0 doleva. o 90 0 doprava. vodorovně. svisle. Vložení obrázku ze souboru: Vyvolá dialogové okno pro vložení obrázku. Nahrazuje zdlouhavější použití příkazu Insert Picture From File z hlavní nabídky. Vložení textu na obrázek a zobrazení miniatur: Vložení textu na GIF obrázek. Umožňuje popsat obrázek textem vloženým přímo na obrázek. Do pravoúhelníku v obrázku vepíšeme text a klikneme někde mimo obrázek. Zobrazení miniatur náhledu. Zobrazí na stránce jen zmenšenou verzi obrázku a z ní je vytvořen odkaz na původní obrázek. Lze tak řešit pomalé načítání velkých obrázků. Poloha a pořadí překrývání objektů: Nastavení absolutní polohy obrázku (obrázkem můžeme pohybovat myší nezávisle na textu). Znázornění obrázku před textem (text nebude přes obrázek vidět, obrázek ho překryje). Znázornění obrázku pod textem (text i obrázek lze vidět, obrázek text nepřekryje). Vrácení změn: Nejsme-li po provedení změn obrázku spokojeni s výsledkem, můžeme se pomocí tohoto tlačítka vrátit k původnímu obrázku. Vrátí se jen ty změny, které jsme provedli od posledního uložení obrázku. 19

20 Jas a kontrast obrázku: Zvýšení kontrastu obrázku. Snížení kontrastu obrázku. Zvýšení jasu obrázku. Snížení jasu obrázku. Význam některých dalších tlačítek: Oříznutí obrázku. Pomocí myši provedeme oříznutí obrázku (zůstane jen oříznutá část). Vytvoření průhledného pozadí obrázku. Nastavíme průhlednou barvu v obrázku. Černá&bílá. Obrázek můžeme přeměnit na černobílý. Zmenší se tím i velikost obrázku. Zeslabení. Potlačení výraznosti podkladu a lepší vyniknutí textu. 3D tlačítko (3D efekt). Použijeme jej v případě, že chceme využít obrázek jako tlačítko. Úprava po zvětšení/zmenšení. Úprava rozlišení obrázku po změně jeho velikosti. Tato tlačítka se používají při tvorbě tzv. hotspot oblasti jako odkazu. Podstata spočívá v tom, že na obrázku vymezíme oblast, která bude odkazem. Podrobněji budou odkazy vysvětleny v následující části učebních textů. Řešení pomalého načítání obrázků Načtení větších obrázků do prohlížeče trvá poměrně dlouho. Existuje několik způsobů, jak problém řešit. 1. Změna velikosti a následná úprava rozlišení obrázku. Zmenšíme-li obrázek na stránce, neznamená to automaticky i zmenšení jeho velikosti (nezmění se totiž velikost pixelu). Aby ke zmenšení opravdu došlo, musíme použít tlačítko Resample. 2. Zobrazení miniatury neboli náhledu. Na webovou stránku se vloží místo originálu pouze zmenšená verze obrázku. Z této miniatury pak vytvoříme odkaz, takže teprve po kliknutí na miniaturu se zobrazí původní obrázek. Uživatel stránek se sám podle náhledu rozhodne, chce-li si načíst originál nebo ne. 3. Zobrazení méně kvalitní verze obrázku, než se načte originál. Tím se uživatel zabaví a lépe vydrží čekat na načtení většího obrázku. Obrázek si v grafickém editoru uložíme v nižší kvalitě, např. s menším počtem barev. Pak v dialogovém okně Picture Properties přejdeme na záložku General a v okně Low-Res napíšeme název souboru nižší kvality. 4. Zobrazení alternativního textu během načítání obrázku. V dialogovém okně Picture Properties přejdeme na záložku General a v okně Text napíšeme náhradní text, který má opět zabavit uživatele v době načítání velkého obrázku. 5. Použití prokládaných obrázků. Uživatel od počátku vidí celý obrázek, třebaže mlhavý a nekvalitní. Může se tak rozhodnout, jestli chce čekat na načtení celého obrázku nebo jestli načítání ukončí. 20

21 Miniatury obrázků (náhledy) jako odkazy na skutečné obrázky: Vkládáme-li na stránku velké obrázky, je jejich načítání do prohlížeče zdlouhavé. Lze to řešit také tak, že místo originálů vložíme na stránku pouze miniatury obrázků, jejichž načítání je rychlé a jež pak slouží jako odkazy na skutečné obrázky. Postup vložení miniatury obrázku: 1. Obrázek, který chceme zobrazit jako miniaturu, nejprve vložíme na stránku ve skutečné velikosti. Pak ho kliknutím myší označíme tak, aby kolem jeho okrajů byly černé čtverečky. 2. Klikneme na ikonu Auto Thumbnail na panelu Pictures. Obrázek bude nahrazen zmenšeným obrázkem (miniaturou) s připraveným odkazem k původnímu obrázku. Parametry miniatur (např. velikost, vzhled okrajů, trojrozměrný efekt) lze detailně nastavit pomocí dialogového okna Page Options, který vyvoláme z nabídky příkazem Tools Page Options. Pozor, toto nastavení vlastností platí až pro další, nově vytvořené miniatury. Rozměry miniatury. Tloušťka okrajů. Barvu okrajů nastavíme ve vlastnostech obrázku Picture Properties. Zkosený okraj trojrozměrný efekt. 3. Po kliknutí na miniaturu se na stránce objeví originál obrázku. 21

22 Odkazy Web je uspořádaná skupina stránek, které jsou navzájem propojeny odkazy (hyperlink). Pomocí odkazů můžeme přejít na další stránku našeho webu nebo se pouze posunout na jiné místo v rámci stejné stránky, což se používá v případě rozsáhlejších stránek. Můžeme pomocí nich přejít i na jiný web, odeslat , zobrazit animaci, obrázek, zvuk, spustit program, atd. Je tedy jasné, že odkazy jsou velmi důležitou součástí webových stránek a že mohou vytvářet vazbu na různé objekty. Odkazem může být text, většinou zobrazený podtrženým písmem, nebo obrázek. Že text či obrázek je odkazem, poznáme tak, že kurzor myši se nad nimi změní na ručičku s ukazováčkem. Textu a obrázku, které slouží jako odkaz, je přiřazena URL adresa, tedy adresa místa, jež se zobrazí po kliknutí na tento odkaz. Odkazy ve FrontPage vytváříme pomocí dialogového panelu Create Hyperlink, který zobrazíme z nabídky příkazem Insert Hyperlink nebo kliknutím na ikonu Hyperlink.V tomto okně specifikujeme parametry odkazu, především zadáme URL adresu, na níž odkaz směřuje. Neznáme-li adresu souboru, na něhož odkaz vytváříme, pouze tento soubor vyhledáme a FrontPage již sám převod na URL adresu zajistí. Dialogové okno pro definici odkazu: Seznam stránek aktuálního (otevřeného) webu. Stránka právě otevřená v pohledu Page, je označená ikonou s tužkou. Chceme-li vytvořit odkaz na stránku aktuálního webu, vybereme ji v tomto seznamu. URL adresa místa, které se zobrazí po kliknutí na odkaz. Nastavení odkazu na záložku. Chceme-li vytvořit odkaz na stránku z Internetu, tímto tlačítkem otevřeme Internet Explorer a vyhledáme stránku nebo napíšeme URL adresu. Vytvoření odkazu na soubor. Vytvoření odkazu na adresu. Odkaz vytvoříme takto: 1. Označíme slova nebo vybereme obrázek, které mají sloužit jako odkaz. 2. Zobrazíme dialogový panel Create Hyperlink, ve kterém nadefinujeme odkaz. Postup definování odkazu si popíšeme v následující části učebních textů a to podle toho, kam vytvářený odkaz směřuje. 22

23 Odkazy vytváříme zpravidla na: Jinou stránku téhož webu (tím si zajistíme větvení našeho webu a možnost přecházet z jedné stránky na druhou). Jiný web (např. na oblíbenou stránku z Internetu). Soubor ( umožňuje např. přehrání videa po kliknutí na obrázek nebo text odkazu). (umožňuje poslat ovou zprávu). Záložku (pomocí záložky se můžeme odkazovat nejen na konkrétní stránku, ale přímo na určité místo této stránky; lze tak rovněž řešit rychlý pohyb na dlouhé stránce, která se nevejde celá na obrazovku). Vytvoření odkazu na jinou stránku našeho webu: 1. Vybereme text nebo obrázek, který bude sloužit jako odkaz. 2. Kliknutím na tlačítko Hyperlink na panelu nástrojů zobrazíme dialogové okno Create Hyperlink. 3. V seznamu stránek webu kliknutím myší vybereme stránku, na kterou chceme odkaz vytvořit, a dáme OK. Vytvoření odkazu na stránku Internetu: 1. Vybereme text nebo obrázek, který bude sloužit jako odkaz. 2. Kliknutím na tlačítko Hyperlink na panelu nástrojů zobrazíme dialogové okno Create Hyperlink. 3. Buď přímo zapíšeme URL adresu nebo kliknutím na tlačítko Use Your Web Browser otevřeme Internet Explorer a vyhledáme požadovanou stránku. Front Page již sám zapíše URL adresu této stránky. Vytvoření odkazu na soubor: 1. Vybereme text nebo obrázek, který bude sloužit jako odkaz. 2. Kliknutím na tlačítko Hyperlink na panelu nástrojů zobrazíme dialogové okno Create Hyperlink. 3. Buď sami zapíšeme úplnou adresu souboru nebo kliknutím na tlačítko File vyhledáme soubor na disku a FrontPage převod na URL adresu zajistí. Vytvoření odkazu pro zaslání ové zprávy: Odkazem bývá text s ovou adresou. Klikneme-li na takový odkaz, spustí se klient elektronické pošty a připraví se nová zpráva s přednastavenou adresou. Často to bývá adresa správce stránky nebo webu. 1. Kliknutím na tlačítko Hyperlink na panelu nástrojů zobrazíme dialogové okno Create Hyperlink. 2. V něm klikneme na tlačítko . Zobrazí se dialogové okno Create Hyperlink, do něhož zapíšeme ovou adresu. 23

24 Vytvoření odkazu na záložku: Než vytvoříme odkaz na záložku, musíme samozřejmě nejprve tuto záložku na stránce definovat. Záložka (bookmark) je označené místo nebo text na webové stránce. Nejčastěji se záložky využívají při tvorbě dlouhých dokumentů, ve kterých usnadňují rychlý přesun například na začátek nebo na konec dokumentu, na jinou kapitolu, atd. Místo na stránce označené jako záložka je ve FrontPage v režimu Normal zobrazeno ikonou s praporkem. Pokud jsme jako záložku označili text, bude tento text čárkovaně podtržen. Postup vytvoření záložky: 1. Označíme na stránce místo nebo text, které budou sloužit jako záložka. 2. Z nabídky zvolíme položky Insert Bookmark. Zobrazí se okno Bookmark. 3. Zapíšeme název záložky do pole Bookmark Name a potvrdíme OK. Zde napíšeme název záložky. Text označený jako záložka je zobrazen čárkovaně podtržený. Místo na stránce označené jako záložka, je zobrazeno ikonou s praporkem. Na vytvořenou záložku určíme odkaz takto: 1. Označíme text nebo obrázek, který bude sloužit jako odkaz. 2. Tlačítkem Hyperlink zobrazíme okno Create Hyperlink a v seznamu vybereme aktuální otevřenou stránku. 3. V rámečku Option zobrazíme Bookmark seznam záložek a vybereme záložku pro odkaz. Potvrdíme OK. Část okna Create Hyperlink pro vytvoření odkazu na záložku: Seznam definovaných záložek, na které lze vytvořit odkazy. 24

25 Grafická mapa (image map): Na jednom obrázku můžeme vymezit více aktivních oblastí, ke kterým vytvoříme odkazy. Výsledkem bude obrázek rozdělený na části, z nichž každá může mít svůj vlastní odkaz. Příkladem může být obrázkový katalog, ve kterém si klikáním myší na jednotlivé obrázky zobrazujeme stránky s bližšími informacemi. Výhodné je také vytvořit image mapu jako souhrn tlačítek (ve skutečnosti jde o jeden obrázek, ale uživatel má dojem, že se jedná o několik samostatných obrázků s odkazy). Postup vytvoření image mapy: 1. V pohledu Page vložíme na stránku obrázek a myší ho označíme (po jeho obvodě budou černé čtverečky). 2. Na panelu Pictures klikneme na tlačítko Hotspot, pomocí něhož vymezíme na obrázku oblasti ve tvaru kružnice, obdélníku nebo mnohoúhelníku pro tvorbu odkazu. 3. Po označení oblasti pro odkaz se otevře okno Create Hyperlink, v němž nastavíme cíl odkazu. Opakováním 2. a 3. bodu označíme postupně další oblasti obrázku a vytvoříme k nim odkazy. Obrázek sloužící jako image mapa v pohledu Page byla kolem obrázku každého zvířete vymezena oblast pro odkaz. Tentýž obrázek v prohlížeči. Po najetí myší nad obrázek každého zvířete se kurzor změní na ruku, protože všechny čtyři části obrázku jsou odkazy. 25

26 Úprava barev odkazu: Během procházení stránek pomocí internetového prohlížeče jsou odkazy barevně rozlišeny podle toho, zda se jedná o následující možnosti: Nepoužitý odkaz (Hyperlink). Navštívený odkaz (Visited hyperlink). Vybraný (aktivní) odkaz (Active hyperlink). V programu FrontPage můžeme toto barevné nastavení odkazů změnit na kartě Background dialogového okna Page Properties. Vložení videa Animace, zvuk, video Video vkládáme na webovou stránku jako obrázek a můžeme přitom určit, kdy se video přehraje. Nejčastěji se video přehrává při otevření stránky nebo poté, co na něho ukážeme myší. Video do webové stránky lze vložit ve formátu.avi. Postup vložení videa na webovou stránku: 1. Umístíme kurzor na místo na stránce, kam chceme video vložit a z nabídky zvolíme Insert Picture Video. Zobrazí se dialogové okno pro vložení videa. Adresa souboru s videem včetně umístění. Vyhledání souboru s videem v Internetu. Vyhledání souboru s videem na disku. 2. Adresu souboru s videem do okna URL buď napíšeme sami a nebo tento soubor vyhledáme na disku našeho počítače, případně v Internetu - FrontPage již pak URL adresu doplní automaticky. 3. Nastavíme vlastnosti videa, což znamená, že určíme kdy a kolikrát se video přehraje. Z hlavní nabídky zadáme příkaz Format Properties nebo klikneme na video pravým tlačítkem myši a z místní nabídky zvolíme Picture Propertis. Zobrazí se okno Picture Properties a v něm na záložce Video nastavíme způsob přehrávání videa. 26

27 Zobrazení ovládacích prvků videa. Zde určíme, kolikrát se má video opakovaně přehrát. Při zaškrtnutí této volby je video přehráváno po celou dobu, dokud je zobrazena stránka. Přehrání videa po otevření stránky (standardní nastavení). Přehrání videa poté, co na něho ukážeme myší. Zvuk na pozadí stránky Stránky můžeme podbarvit hudbou nebo můžeme návštěvníkům naší stránky něco sdělit, na něco je upozornit. Postup vložení zvuku na webovou stránku: 1. Nastavíme se na stránku, na které chceme přehrávat zvuk. 2. Zadáním příkazu Format Page Properties vyvoláme dialogové okno Page Properties. Na kartě General klikneme na Background Sound. 3. Vyhledáme soubor se zvukem nebo přímo zapíšeme jeho adresu do pole URL. 4. Volbou Loop stanovíme, kolikrát se má zvuk přehrát. Zaškrtnutím volby Forever rozhodneme, že se zvuk bude přehrávat po celou dobu zobrazení stránky. Adresa souboru se zvukem včetně umístění. 27

28 Animace prvků na stránce Animovat lze téměř všechny prvky na stránce text, obrázek, tlačítko. Animační efekt se spojuje s různými událostmi, jako kliknutí myší, přejetí myší nad animovaným objektem, zavedení stránky apod. Postup při animaci prvku stránky: Vybereme prvek na stránce a zvolíme z hlavní nabídky Format Dynamic HTML Effects. Zobrazí se panel DHTML Effects. Z nabídky On vybereme událost, kterou chceme s animací spojit. Click kliknutí levým tlačítkem myši na prvku, Double click dvojí kliknutí myší, Mouse over najetí myší nad prvek, Page load zavedení stránky. Odstranění efektu. Nastavení pro efekt, např. směr pohybu. V nabídce Apply vybereme typ animace. Fly out, Fly in, Drop in by word, Elastic pohybovat prvkem, Formatting změnit vzhled prvku, např. barvu, font, Swap picture nahrazení obrázku jiným obrázkem. Nabídky se různí podle typu označeného prvku! Pohyblivý text Zvolíme na stránce místo pro pruh s pohyblivým textem a z nabídky vybereme položky Insert Component Marquee. V zobrazeném dialogovém okně zadáme parametry. Scroll text se pohybuje kolem dokola, Slide text se pohybuje do okraje a potom začne znovu na opačném kraji, Alternate - text se pohybuje od jednoho okraje k druhému. Zarovnání textu v definovaném pruhu. Zde napíšeme text zprávy, která se bude zobrazovat pohyblivě. Směr pohybu textu - zprava doleva nebo naopak. Rozměr pruhu pro text. Rychlost pohybu (v milisekundách). Delay čas mezi jednotlivými pohyby textu. Amount vzdálenost mezi každým pohybem textu. 28

29 Proměnlivé tlačítko Proměnlivé tlačítko je animované tlačítko s dynamickým efektem. To znamená, že po umístění kurzoru na tlačítko se projeví nějaký efekt např. tlačítko změní barvu, ozve se zvuk, atd. Postup při vytvoření proměnlivého tlačítka: 1. Umístíme kurzor na místo, kde chceme vytvořit proměnlivé tlačítko. 2. Z hlavní nabídky dáme příkaz Insert Component Hover Button. Zobrazí se okno Hover Button Properties. 3. Do okna Button Text napíšeme text, který bude zobrazen na tlačítku. 4. Do okna Link to musíme zadat URL adresu stránky, na kterou se máme stiskem tlačítka dostávat. Buď tuto adresu zapíšeme přímo nebo vyhledáme stránku pomocí tlačítka Browse a Front Page doplní adresu sám. 5. Nakonec klikneme na OK a tlačítko bude vytvořeno. Úprava tlačítka: Změny proměnlivého tlačítka provedeme v dialogovém okně Hover Button Properties, které zobrazíme kliknutím pravým tlačítkem myši na proměnlivém tlačítku (nebo také dvojím kliknutím levým tlačítkem) a volbou Hover Button Properties. Text na tlačítku. Adresa stránky, na kterou se tlačítkem přepneme. Barva pozadí tlačítka (základní barva tlačítka). Velikost tlačítka (Width, Hight). Výběr možných efektů. Další uživatelská nastavení (nastavení zvuku a obrázku). Nastavení proměnlivé barvy (efekt při přejetí myší). Přehrání zvuku při kliknutí na tlačítko. Přehrání zvuku při přejetí tlačítka myší. Změna obrázku na tlačítku při přejetí myší. Název souboru s obrázkem, je-li na tlačítku místo textu obrázek. 29

30 Barevné pozadí stránky Formátování webových stránek Barvy nebo obrázky na pozadí stránky můžeme nastavit dvěma způsoby: Ručně. Použitím témat. Ruční nastavení barevného pozadí stránky Na pozadí stránky můžeme nastavit barvu nebo obrázek. Postupujeme takto: 1. Otevřeme upravovanou stránku. 2. Z hlavní nabídky zvolíme Format Background. Zobrazí se dialogové okno Page Properties, na jehož záložce Background nastavíme buď barvu nebo obrázek na pozadí stránky. Obrázek na pozadí stránky. Přes toto tlačítko vyhledáme soubor s obrázkem pro pozadí a FrontPage doplní adresu automaticky. Barva na pozadí stránky. (jednobarevné pozadí stránky) Adresa obrázku na pozadí stránky. Použití pozadí jiné stránky pro aktuální stránku. Barvy odkazů - hyperlinků (dosud nepoužitého, již dříve navštíveného, právě aktivního). Použití témat Téma je sada předdefinovaných vlastností stránky, a to pozadí stránky, typů písma, textu hlavičky stránky (page banner), barev odkazů, vzhledu seznamů s odrážkami, vodorovné oddělovací čáry, atd. Použití témat zajistí jednotný a atraktivní vzhled stránek celého webu. Výhodou je také to, že určíme-li jedno téma jako výchozí pro celý web, bude toto téma použito pro všechny existující i teprve později vytvářené stránky. Nemusíme však vždy téma použít na celý web, ale lze ho také aplikovat pouze na vybrané stránky. Je rovněž možné témata pozměňovat, např. změnit obrázkové pozadí stránky, barvu odkazů či jiné vlastnosti. Tak si vytvoříme vlastní uživatelská témata. FrontPage nabízí řadu připravených témat, která můžeme přímo použít nebo je upravit podle vlastních požadavků.. 30

31 Postup použití tématu : Z hlavní nabídky dáme příkaz Format Theme. V zobrazeném okně Themes si vybereme téma, které nám vyhovuje. Při výběru se orientujeme podle náhledu v pravé části okna. Použití tématu na všechny stránky webu. Náhled na vybrané téma. Použití tématu jen na vybrané stránky. Seznam témat. Tlačítkem Modify zobrazíme možnosti úprav zvoleného tématu (např. změnu barev). Po stisku tlačítka Modify přibudou u dolního okraje okna Themes další tlačítka pro výběr toho, co chceme na tématu měnit barvy, grafiky, vlastností textu (fontu): Odstranění tématu: Chceme-li barevné téma ze svých stránek odstranit, zadáme příkaz Format Theme a pak volbu No Theme. Ze stránek zmizí nastavený vzhled, ale vložené objekty zůstanou. 31

32 Sdílené okraje Sdílené okraje jsou jednou z možností, jak vložit na více stránek webu stejný obsah, např. stejnou hlavičku stránek, stejný levý, pravý nebo spodní okraj. Sdílené okraje tedy představují oblast, která je společná pro více stránek Výhoda jejich použití spočívá v tom, že úpravu obsahu více stránek provedeme pouze na jediném místě, místo abychom měnili obsah na stránkách jednotlivě. Postup vytvoření sdílených okrajů: 1. Z hlavní nabídky zvolíme Format Shared Border. Zobrazí se dialogové okno Shared Borders: Sdílené okraje na všech stránkách webu. Top (horní). Sdílené okraje pouze na jedné stránce. Left (levý). Bottom (spodní). Použití navigačních tlačítek. Right (pravý). 2. Chceme-li použít sdílené okraje na všechny stránky webu, zvolíme možnost All pages. Chceme-li použít sdílené okraje pouze na jednu stránku, přepneme se v pohledu Page na tuto stránku a v okně Shared Borders zvolíme možnost Current page. 3. Zvolíme okraje, které chceme sdílet Top (nahoře), Left (vlevo), Right (vpravo) nebo Bottom (dole). Rozhodneme také, zda ve sdíleném okraji použijeme navigační tlačítka. 4. Na stránce se zobrazí informace o vzniku sdíleného okraje. Vložíme do vymezeného okraje sdílený obsah, který se bude zobrazovat na všech stránkách s definovanými sdílenými okraji. Oblast sdíleného okraje je ohraničena čárkovanou čarou. Když do této oblasti klikneme myší, ohraničí se plnou čarou. Můžeme do ní napsat text, vložit obrázek,atd. 32