03 – Praktická část – 01b – Redakční systém Contao – část 2
Redakční systém Contao – část 2
V tomto návodu se naučíte
přichystat si obrázky pro publikování na webu (upravit velikost, rozlišení a formát
obrázku v programech Irfan View a Gimp)
vkládat obrázky do Contaa
pracovat s manažerem souborů v Contau
03 – Praktická část – 01b – Redakční systém Contao – část 2
6) Práce s obrázky a manažerem souborů
Pro práci s obrázky doporučujeme používat program Irfan View, který máte nainstalovaný
v počítačích v multimediální učebně. Pro domácí práci lze program zdarma stáhnout zde:
http://www.slunecnice.cz/sw/irfanview/irfanviewexe/ a čeština k programu je zde:
http://www.slunecnice.cz/sw/irfanview/czech/stahnout/ - spusťte instalaci a v samotném Irfanu
musíte v Options – Change Languages změnit aktuální jazyk na český.
a) Změna rozlišení a velikosti obrázku
Otevřete v programu některý z obrázků stažených z internetu (např. stažený ze stránky
http://commons.wikimedia.org/wiki/File:Wiki-alkohol-tester-AL2500.jpg?uselang=cs). V programu
Irfan View stiskněte zároveň klávesovou zkratku Ctrl+r (Ctrl a „r“ či v menu volbu Obrázek – Změnit
velikost / Převzorkovat):
1) Nastavte DPI na 100 (pro prohlížení na webových stránkách stačí rozlišení 100 DPI, pokud
byste chtěli obrázky tisknout, je vhodné rozlišení 300 DPI)
2) Nastavte novou velikost – zatrhněte jednotku cm a zadejte příslušnou hodnotu (podle
instrukcí k dané části Contaa)
b) Formáty obrázků
Doporučenými formáty pro publikování na webu jsou gif a jpg. Při stahování obrázku tedy preferujte
tyto dva formáty. Pokud stáhnete obrázek v jiném formátu, je možné ho v Irfanu uložit jako gif nebo
jpg. Pomocí nabídky Soubor – Uložit jako (zkratka „S“) zvolte odpovídající formát a dejte Uložit.
Obrázky ve formátu svg či png (např. stažený ze stránky
http://commons.wikimedia.org/wiki/File:Alkohol_benzylowy.svg?uselang=cs) se v programu
nezobrazují správně, neboť obsahují průhledné pozadí, které Irfan zobrazuje černě. Pokud obrázek
nechcete upravovat, můžete si je prohlédnout např. v Malování. Pokud byste však chtěli změnit
v
v
v 1
2
3
4
v
03 – Praktická část – 01b – Redakční systém Contao – část 2
velikost, nebo rozlišení, doporučujeme program GIMP (opět jej máte k dispozici ve školních
počítačích, ke stažení např. zde: http://www.slunecnice.cz/sw/gimp-windows/). V Gimpu se velikost
a rozlišení obrázku nastavuje pomocí volby Obrázek – Škálovat obrázek.
Následně je třeba obrázek uložit jako png (volba Soubor – Export As – Obrázek PNG). V poli Name
můžete zvolit nové jméno souboru, pomocí Save in folder vyberete adresář, kam chcete obrázek
uložit. Obrázek se uloží tlačítkem Exportovat.
1
2
v
v
03 – Praktická část – 01b – Redakční systém Contao – část 2
Následně můžete upravit vlastnosti exportu. Nechcete-li obrázek komprimovat, nastavte úroveň
komprimace na 0 a zvolte Exportovat.
v
v
v
v
3
4
5
6
v
v8
7
03 – Praktická část – 01b – Redakční systém Contao – část 2
c) Nahrání obrázku na web – Manažer souborů Contao
K nahrávání souborů na Webchemii (a to nejen obrázků, ale i pdf souborů apod.) je určen modul
Manažer souborů ve skupině Systém. Nejdřív vložte nový adresář (pomocí tlačítka )
do složky Správci – Vaše příjmení (pomocí ikony ). Adresář pojmenujte podle Vámi vybraného
tématu v praktickém úkolu zabývajícím se tvorbou studijního textu. Klikněte na a
zvolte nový adresář vytvořený v předchozím kroku (pomocí ikony ).
d) Vložení obrázku do článku
V modulu Články otevřete článek se svým Příjmením a vyzkoušejte si vkládání obrázků. Klikněte
do místa, kam chcete obrázek vložit a klikněte na ikonu Vložit/upravit obrázek .
Otevře se Vám formulář pro vložení obrázku. Vyberte obrázek ze Seznamu obrázků – každý obrázek
je popsán pomocí cesty k němu v adresáři souborů (tl_files následovaný názvy jednotlivých složek a
podsložek až názvem příslušného souboru s obrázkem).
v
v
v
1
2
3
v
v
1
2
03 – Praktická část – 01b – Redakční systém Contao – část 2
Poté přejděte na záložku Vzhled.
Můžete změnit rozměry obrázku přímo v HTML editoru (viz následující obrázek). V Contau
doporučujeme nastavit nové rozměry pevně v pixelech. Zůstane-li zatržené tlačítko „Zachovat
proporce“ a změníte-li jednu z hodnot šířka či výška, automaticky se dopočítá druhá.
Políčko Styl (na kartě Vzhled) Vám pomůže s:
 odsazením okolního textu od obrázku (margin-top – horní odsazení, margin-right – odsazení
od textu vpravo, margin-bottom – odsazení od textu pod obrázkem).
 nastavením obtékání obrázku (float: left – obrázek je obtékán textem zprava.
např. obrázek, který má v poli styl zapsáno: „margin-right: 10px; margin-bottom: 10px; float: left“
bude obtékán textem zprava a tento text vpravo od obrázku a pod obrázkem bude odsazen 10 px.
v
v
03 – Praktická část – 01b – Redakční systém Contao – část 2
v
v1
2