Tvorba webových stránek na google – Sites (10.)

Prezentace na téma: "Tvorba webových stránek na google – Sites (10.)"— Transkript prezentace:

1 Tvorba webových stránek na google – Sites (10.)
Favicon a animovaný gif Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Zuzana Jurajdová. Dostupné z Metodického portálu ISSN Provozuje národní ústav pro vzdělávání, školské poradenské zařízení a zařízení pro další vzdělávání pedagogických pracovníků (NÚV) .

2 Favicon Favicon je malá ikonka o rozměrech 16 x 16 či 32 x 32 pixelů, kterou najdeme na webu vedle názvu webu na kartě prohlížeče. Pokud ji nezměníme, google sites tam má poměrně nepěknou ikonku, znázorňující Google Sites. K tomu, abychom ji mohli vyměnit, potřebujeme obrázek, nejlépe ve formátu s průhledným pozadím (např. s příponou .png) a musíme ji nahrát na naši webovou stránku způsobem, jaký si ukážeme. Nejdříve ale potřebujeme faviconu vytvořit. K tomu nám pomůžou online stránky, které nám ji po nahrání vytvoří.

3 Stránek k vytváření favicon je více, stačí vygooglovat
Stránek k vytváření favicon je více, stačí vygooglovat. Můžeme použít např. tuto stránku: Obrázek nahrajeme a tento online nástroj nám ji vytvoří. (Ve složce obrázek – favicon-pes.png) Je zde upozornění, že obrázek může mít průhledné pozadí a nesmí být větší než 150 kB.

4

5 Po vytvoření ikony ji nezapomeneme stáhnout a najít ji v počítači, ať s ní můžeme dále pracovat.
Otevřeme si náš web a přejdeme do části „spravovat web“. Zde vybereme „přílohy“. Zde klikneme na nahrát a najdeme v systému naši faviconu. Důležité je, aby se jmenovala favicon.ico (což nám automaticky pojmenoval program), jinak to google nerozezná jako faviconu. Jakmile je dokončen upload, uvidíte, že se sama změnila i ikona.

6

7 Měnící se obrázek Určitě jste na webu někdy narazili na úvodní obrázek, který se sám mění. Nejde o klasickou powerpointovou prezentaci, a i tento obrázek můžeme na google sites vložit. Tentokrát si nevystačíme s vložením obrázku jen do kódu html, ale přidáme několik jednoduchých kroků. Nejdříve si měnící se obrázek musíme vytvořit. Vybereme vhodné fotografie a v aplikaci gifmaker.me (nebo jiné) si z fotek vytvoříme obrázek s příponou .gif.

8 Klikneme na upload images a obrázky vybereme
Klikneme na upload images a obrázky vybereme. Když chceme vybrat více obrázků, při označování držíme Ctrl.

9 Po nahrání obrázků se nám změní velikost plátna (Canvas size), necháme a změníme si rychlost animace (Animation speed) na 3000 milisekund (3 s).

10 Poté zvolíme „download the gif“ a uložíme obrázek do počítače.

11 Změna rozvržení stránky a vložení gifu
V předchozích úkolech jsme si změnili rozvržení stránky na jeden sloupec. Do prostředního rámečku jsme vkládali aktuality, do spodního zápatí a do horního, který by měl být prázdný, teď vložíme námi vytvořený animovaný gif. Klikneme do místa, kam chceme obrázek vložit, a tak, jak již známe, sem obrázek vložíme. Po vložení obrázku na stránky klikneme na „změnit“ a odklikneme – otevřít obrázek v novém okně. Když stránku uložíme, zjistíme, že se zatím obrázek sám nemění.

12

13

14

15 Po uložení stránky klikneme na obrázek – ten se otevře v novém okně a bude animovaný. Klikneme na webovou adresu a celou ji zkopírujeme (Ctrl + C).

16 Stránku zavřeme a vrátíme se na náš web
Stránku zavřeme a vrátíme se na náš web. Přepneme se do režimu úprav (tužka) a obrázek smažeme. Klikneme na vložit obrázek a zde vybereme druhou možnost – Webová adresa URL a sem vložíme námi zkopírovanou adresu z prohlížeče. Poté vybereme 100 %, aby nám obrázek vyplnil celou stránku. Zkontrolujeme, že se obrázek sám mění a máme hotovo.

17

18