background
English

Náhodná šablona

Další šablona..

RSS CMSimple_XH wiki


RSS CMSimple forum


Nacházíte se: Domů > Rady a návody – Textový editor - přidání obrázku do stránky

Rady a návody

NOVINKA! Nyní si můžete vyzkoušet online DEMOVERZI CMSimple_XH

Návody pro začátečníky - používání redakčního systému CMSimple_XH.

Textový editor - přidání obrázku do stránky

27.07.2012

5. LEKCE: Vložení obrázku do vaší stránky.

 

V předchozí lekci jsme se naučili jak používat textový editor TinyMCE k psaní, formátování textu a jak vkládat odkazy. Nyní máme připraven na stránce text, ale chceme ho oživit nějakým obrázkem. Editor samozřejmě umožnuje vložení obrázku, který však MUSÍME NEJPRVE PŘIPRAVIT NA NÁŠ SERVER.

Doporučil bych zachovat tyto kroky, které si následně vysvětlíme:

  • výběr obrázku vložení do pracovního adresáře
  • optimalizace jeho velikosti
  • upload na server


Je třeba si uvědomit, že pokud máme webovou stránku (tedy část která zobrazuje hlavní obsah) širokou například 600 pixelů, je nesmyslné do ní vkládat obrázek široký např. 3264 pixelů, tedy takový, jak jste ho stáhli z fotoaparátu. Fotografii je třeba nejprve upravit nějakým grafickým editorem a zmenšit jeho šířku minimálně na 1/3 šířky obsahové stránky.

Vřele bych vám doporučil editor IrfanView, který je zdarma a obshuje vše, co pořebujete. IrfanView stáhnete ZDE, češtinu ZDE a pluginy (doporučuji) ZDE.


Krok za krokem:

1.) Vyberte obázek, který chcete použít pro web a uložte si ho do nějakého pracovního adresáře

2.) Změňte jeho velikost. Doporučuji třetinu šířky stránky (např. pokud je stránka široká 600px - 600:3=200px) pokud má být obrázek zalomen v textu. Pokud ho chcete použít jinak (např. na celou šířku stránky) zadejte tedy  600px.

3.) Při ukládání změn obrázku se snažte použít volbu "Progresivní" a kvalitu snížit v rozmezí cca 90-80%. Jde nám o rychlost načítání!

4.) Upravený a optimalizovaný obrázek nahrajte FTP klientem na váš server do odresáře USERFILES/IMAGES.


Optimalizovaný obrázek máte nyní v adresáři userfiles/images na serveru připraven k použití na stránce. Vložení obrázku vyžaduje ovšem konfiguraci obtékání textu. Je několik možností, které si ukážeme názorně na následujícím videu.

 


Doufám, že video bylo dostatečně názorné a pomůže vám v práci s textovým editorem v CMSimple_XH.

 

SHRNUTÍ:

  • u vloženého obrázku VŽDY vyberte zarovnání (tedy obtékání textu)
  • nezapomeňte nastavit okraje obrázku - zabrání to tomu, aby se text přímo dotýkal obrázku
  • vždy vyplňte popis a titulek obrázku - vyžaduje to SEO optimalizace
  • větší obrázky je možné tažením za roh zmenšit - viz poslední část videa
  • obrázky před použitím optimalizujte pro web - změňte jeho velikost a optimalizujte kvalitu

CMSimple_XHCMSimple WikiCMSimple_XH - WikiCMSimple_XH - forumChristoph BeckerDotComWebdesignSimple SolutionsTG_PopupFrank Ziesingholgerirmler.decmsimple.sk

Útulek Hněvice

nahoru

RSS CMSimple_XH wiki