Práce s CMS JOOMLA. Tvorba článků a jejich zveřejnění s editorem JCE. MANUÁL č. 1 verze 0

Práce s CMS

JOOMLA Tvorba článků a jejich zveřejnění s editorem JCE MANUÁL č. 1 verze 0 1

Vytvořil www.helpmark.cz | [email protected] | tel: 739 719 548

Obsah ●

Obecné informace o tomto dokumentu

●

Obecné informace o CMS Joomla

●

Vložení obrázku do textu

●

Přihlášení

●

Nahrání obrázku na server

●

Popis úvodních ovládacích panelů

●

Změna velikosti obrázku

●

Postup při vytvoření článku

●

Zarovnání a obtékání obrázku

●

Popis bloků

●

Titulek článku

●

Parametry a metadata článku

●

Sekce a kategorie

●

Editor JCE

●

Vkládání z Wordu

●

Práce s textem v JCE

●

Tvorba seznamů

●

●

●

Práce s obrázky

–

Zarovnání bez ohledu na SEO

–

Zarovnání dle SEO

Tvorba odkazů ●

Zobrazení odkazu v novém okně

●

Odkazování na e-mail

●

Vytváření kotvy

Umístění článku do menu

2


Obecné informace k tomuto manuálu ●

●

●

●

Kliknutím na modrý text se dostanete odkazem přímo na danou stránku, případně na webové stránky s vysvětlujícím popisem. Pro návrat uvnitř prezentace klikněte na šipky PDF prohlížeče K návratu na obsah, je určeno tlačítko v levém dolním rohu Všechny obrázky nemusejí přesně odpovídat Vašemu zobrazení Joomly, protože záleží na konkrétní implementaci Tento manuál popisuje potřebné části, bohužel nemůže popsat vše, to bude předmětem dalších manuálů

3


Obecné informace k Joomla ●

●

●

●

Nikdy nevkládejte obsah v Wordu přímo, ale popsaným způsobem Po úpravě v Joomla musíte na upravené webové stránce stisknout současně klávesy Ctrl a F5, aby se stránka obnovila, jinak se Vám zobrazí to co je uloženo v počítači Administrace se po určité době sama odhlásí. Proto často ukládejte čímž vynulujete odpočítávání času odhlášení Při nahrávání souborů na server název nesmí obsahovat diakritiku (např. ěščřžýáíůú).

4


Přihlášení Zadejte Vaši doménu a za ni /administrator např: www.helpmark.cz/administrator Zadejte uživatelské jméno Zadejte heslo

Klikněte na přihlásit

5


Popis úvodního rozcestí Rychlé vytvoření nového článku

Zobrazí web v druhé záložce

Vstup do seznamu existujících článků

Správa obrázků a souborů 6


Postup vytvoření článku 1. Nejprve se musíte přihlásit do administrace. 2. Na úvodní obrazovce (ovládací panely) zvolte „přidat nový článek“ (nebo ve vodorovném menu ukažte kurzorem na položku „Obsah“ a v zobrazeném menu klikněte na „Správce článků“ a v horní pravé části na zelenou ikonu „Nový“). 3. Vyplňte „Titulek“ - normálně česky s diakritikou a mezerami. Detaily ZDE 4. Vyplňte „Alias“ - bez háčů, čárek, kroužků a bez mezer, alias se bude zobrazovat v URL např. (www.helpmark.cz/alias). Detaily ZDE 5. Zvolte „Sekce“ a „Kategorie“. Více o sekcích a kategoriích ZDE 6. Můžete začít vkládat obsah. Více o obsahu ZDE 7. !!! Nezapomínejte průběžně ukládat !!! Administrace se po čase sama odhlásí. 8. Vyplňte „Informace o metadatech“. Více o metadatech ZDE 9. Vytvořte odkaz v menu, který bude směřovat na článek. Postup ZDE 7


Popis bloků článku Uložit a zavřít

Odkaz na detaily Odkaz o sekcích a kategoriích

Uložit a nechat otevřené

Zavřít bez uložení

Odkaz o JCE editoru

Odkaz na detaily 8


Titulek článku ●

Titulek je název článku a zobrazuje se v horní části internetového prohlížeče a také se pod tímto názvem uloží záložka v prohlížeči. Titulek by měl být výstižný, stručný a vyjadřovat obsah článku. Titulek může také sloužit jako hlavní nadpis článku, ale to záleží na nastavení Joomla.

●

Alias slouží k datovému zpracování, a proto MUSÍ být bez diakritiky (ěščřžýáíéůú) a bez mezer.

9


Sekce a kategorie Sekce i kategorie slouží pro snazší orientaci v článcích a odkazování na články v dané sekci nebo kategorii. Měly by odpovídat logice obsahu a v dané kategorii (nebo sekci) by se měly nacházet články s obdobnými tématy. Sekce je nejvyšší a vytváří se v ovládacích panelech nebo horní vodorovné menu, položka „Obsah“ a „Správce sekcí“. Sekce se dále dělí na kategorie. Kategorie je podmnožina sekce. Každá kategorie patří do nějaké sekce. Vytváří se v ovládacích panelech nebo horní vodorovné menu, položka „Obsah“ a „Správce kategorií“. Příklad:

Sekce „Novinky“ Kategorie „Plánované akce“

Kategorie „Změny ve firmě“

Sekce „Partneři“ Kategorie „Naši zákazníci“

Kategorie „Naši dodavatelé“ 10


Parametry a metadata článku Tento sloupec naleznete vpravo vedle každého článku. Jeho účelem je: ●

Určit autora článku – můžete jej zobrazit na webu

●

Určit komu se článek zobrazí (např. jen přihlášenému)

●

Stanovit datum od kterého se článek zobrazí

●

Předem naplánovat ukončení zveřejnění

●

Parametry pro zobrazování – určují co se zobrazí

●

●

Vytvořit popis článku – popis je VELMI DŮLEŽITÝ pro SEO. Vyhledávače jej někdy použijí ve výsledcích vyhledání. Popis článku

Klíčová slova sice Google a Seznam ignorují, ale nic nezkazíte jejich vyplněním

11


Editor JCE Editor JCE slouží ke vkládání obsahu. Pracuje se s ním obdobně jako např. s MS Wordem. JCE za Vás vytváří HTML kód, jež se používá k vytváření webových stránek. Text je možné vytvořit ve Wordu, ale NIKDY jej nevkládejte přímo. JCE to sice umožní, ale přenesou se i neviditelné znaky, které znehodnotí HTML kód z hlediska SEO optimalizace. Ke vkládání použijte z Wordu použijte tento postup. JCE umožňuje: ●

Vkládat text a označovat jej (nadpisy, odstavce, zvýraznění)

●

Umisťovat obrázky, zarovnávat je a obtékat textem

●

Vytvářet odkazy z části textu nebo obrázků

●

Tvořit uspořádané a neuspořádané seznamy pro snadnou přehlednost

●

Budovat tabulky pro vkládání dat nebo za účele zarovnání, formátovat jejich obsah nebo slučovat buňky (pro přílišnou rozsáhlost v samostatném dokumentu)

12


Vkládání textu z Wordu Při vkládání textu z Wordu pomocí kopírování (označení textu, uložení pomocí Ctrl + C a vložení pomocí Ctrl + V) NIKDY nevkládejte přímo. Došlo by ke vkopírování nežádoucích znaků. Nejprve klikněte na ikonu , otevře se vám okno, do kterého vložte pomocí Ctrl + V požadovaný text. Pokud používáte ve Wordu formátování textu (označování nadpisů), tak se toto formátování obdobně přenese i do JCE editoru. Pokud nadpisy pouze graficky zvýrazníte např. jako tučné, používáte barvy v textu nebo změny fontů písma, tak je vhodnější kliknout na šipku vedle ikony „Vložit“ a zvolit „Vložit jako prostý text“' (poslední položka se znakem T a textem Paste as Plain Text). Tímto způsobem máte naprostou jistotu, že nevkopírujete nežádoucí znaky. 13


Práce s textem v JCE Text se na webu označuje jako: ●

●

●

Nadpisy – různé úrovně od 1 do 6, nadpis 1 úrovně smí být pouze jeden, další musejí být posloupně a nesmějí se přeskakovat Odstavce – odstavec se ukončí klávesou Enter. Pokud chcete ukončit řádek, ale neukončit odstavec, stiskněte současně Shift + Enter Seznam - rozdělujeme na uspořádaný (1,2,3 nebo a) b) c) …) a neuspořádaný (tato položka je v neuspořádaném seznamu)

Nadpis 1. úrovně Nadpis 2. úrovně Nadpis 3. úrovně

Nadpis 2. úrovně

14


Tvorba seznamů Seznamy zpřehledňují a zestručňují klíčové informace. Návštěvníkům se dobře čtou, protože jsou přehledné. Seznamy dělíme na: ●

●

Uspořádané (1,2,3 … nebo a),b),c)) Neuspořádané (symboly pro všechny položky stejné, toto je neuspořádaný seznam)

Položka seznamu musí vždy začínat na novém řádku

Nabídka možných uspořádaných seznamů.

Ukončujeme ji klávesou Enter Pokud chceme vytvořit nový řádek, ale ne novou položku seznamu stiskneme současně Shift a Enter 15


Práce s obrázky Obrázky mohou upoutat pozornost a dokreslit obsah článku. Zde se dočtete o práci s obrázky vkládanými přímo do textu článku. Práci s fotogalerií se bude věnovat další specializovaný manuál. Na následných stranách se dočtete o: ●

Vložení obrázku do textu

●

Vložení obrázku na server webových stránek

●

Zmenšení velikosti obrázku

●

Zarovnání a obtékání textem

16


Vložení obrázku do textu Pokud chcete vložit obrázek, tak: 1. Umístěte kurzor myši do místa v textu, kde se má obrázek zobrazit 2. Klikněte myší na ikonu obrázku 3. Zobrazí se Vám toto dialogové okno 4. Zvolte obrázek 5. Napište popis obrázku 6. Uložte kliknutím na Dále se dozvíte jak: - nahrát obrázek na server - zmenšit velikost obrázku - zarovnat a obtékat obrázek textem 17


Nahrání obrázku na server 1. Klikněte na tuto ikonu se zelenou šipkou (první žlutá slouží k vytvoření nové složky) 2. Otevře se Vám toto okno a klikněte na „Add“. 3. Po zvolení obrázku svou volbu potvrďte tlačítkem „Upload“ Poznámky: ●

●

●

Můžete najednou nahrát i více obrázků, ale pouze do téhož adresáře Názvy vkládaných obrázků nesmějí obsahovat diakritiku Obrázky je možné před nahráním přejmenovat

Již nahraný Odebrat Přejmenovat 18


Změna velikosti obrázku Pokud potřebujete zmenšit obrázek, na požadovanou velikost, stačí určit rozměry zobrazení obrázku v pixelech. POZOR! Nevkládejte zbytečně veliké obrázky, zvětšujete tím velikost stránky a zpomalujete její načítání. Obrázky mohu mít rozměry cca 640×480 px.

19


Zarovnání obrázku Obrázky se standardně zarovnávají vlevo a text pokračuje až pod obrázkem. Chování obrázku je možné změnit pravidlem v externím souboru tzv. CSS, který toto standardní chování může na některých webech měnit. Existují dvě metody jak změnit chování obrázku: 1. Fungující způsob, který ovšem nebere ohled na SEO a validitu kódu 2. Korektně dle pravidel tak, aby byl dle zásad SEO a byl validní

Ilustrativní obrázky dodají webové stránce na atraktivitě a mohou upoutat pozornost návštěvníků. Vždy je však třeba zvážit jaké obrázky použít. Dbejte na vhodný popis obrázku.

20


Zarovnání a obtékání obrázku bez ohledu na SEO Klikněte na toto pole a zvolte zarovnání: ● Left – vlevo ● Right – vpravo Pokud by po uložení nastavení došlo ke změně zobrazení některých částí grafické podoby webových stránek, tak klikněte zde a zvolte tutéž stranu. K tomuto kroku přistupujte POUZE pokud by nastaly problémy. Většinou to není třeba.

21


Zarovnání a obtékání obrázku dle pravidel a přívětivě k SEO U webových stránek, které vytváří HelpMark pamatujeme vždy na SEO, a proto našim zákazníkům vkládáme pravidla stylu s názvy „vlevo“ a „vpravo“ určené právě pro tento účel. Pokud máte web vytvořený někým jiným, tak se budete muset domluvit s tvůrcem, aby Vám tato pravidla vytvořil.

Pokud již máte vložený obrázek, tak: ● ● ●

●

Zvolte záložku „Advanced“ Vyberte třídu „Classes list“ Zvolte příslušné pravidlo (vlevo, nebo vpravo) Uložte klinkutím zcela dole na tlačítko „Update“ 22


Tvorba odkazů ●

●

●

●

●

●

Označte část textu nebo obrázek, který bude sloužit jako odkaz Klikněte v panelu JCE editoru na tuto ikonu Zobrazí se vám toto okno V tomto seznamu můžete vybrat vnitřní odkaz Nebo zadejte externí odkaz do tohoto pole Pokud chcete odkazovat na kotvu téže stránky, tak si ji zvolte zde

Dále se dozvíte jak otevřít odkaz v novém okně a vytvořit odkaz e-mailu.

23


Otevření odkazu v novém okně Je možné nastavit reakci odkazu. Standardně se odkaz otevře a tím zavře původní stránku. Pokud toto chování chcete změnit, tak v dialogovém okně odkazu klikněte na položku „Target“. Volbou „Open in new window“ zajistíte, že se odkaz otevře v nové záložce prohlížeče. Poz.: ostatní volby s velkou pravděpodobností nebudou fungovat správně.

24


Odkazování na e-mail Můžete odkazovat také na e-mailovou adresu. POZOR riskujete tím, že váš web navštíví robot, který shromažďuje e-mailové adresy pro rozesílání SPAMu. Postupujte jako v případě standardního odkazu, pak klikněte na ikonu označenou v červeném kroužku a objeví se Vám toto okno. Vyplňte pole označené „To“ e-mailovou adresou na kterou chcete odkazovat. Pole „Cc“ znamená adresa kopie, pole „Bcc“ znamená skrytá kopie a nakonec pole „Subject“ je určené pro předmět e-mailu.

25


Tvorba kotvy Kotvy jsou velice užitečné pro odkazování na nějakou část uvnitř stránky. Například na nějaký nadpis nebo odstavec. Vytvoření kotvy: 1. Umístěte kurzor na pozici budoucí kotvy (před nadpis, na začátek odstavce …) 2. Klikněte na ikonu kotvy (na obrázku označena červeným kroužkem) 3. Objeví se okénko, do kterého napište název kotvy POZOR bez diakritiky a mezer 4. Uložte a tím jste vytvořili kotvu, na kterou budete moci kdykoli odkazovat Odkaz na kotvu se vytváří jako běžný odkaz (postup zde). Pokud odkazujete na stejnou stránku stačí vybrat název kotvy ze seznamu pole „Anchors“. Pokud odkazujete na jinou stránku, tak za běžný odkaz zadejte znak „#“ a název kotvy. Např.: www.helpmark/#kotva 26


Umístění článku do menu Na každý článek musí vést nějaký odkaz, jinak by jej návštěvníci nenalezli. Tomu se říká navigace a znáte ji jako různá menu (nebo také tlačítka). V Joomle naleznete správu těchto menu pod názvem “Nabídky“. Často web obsahuje více menu (vodorovné, svislé...). Některé články se v menu zobrazí automaticky tím, že jej přiřadíte do kategorie nebo sekce. Záleží na nastavení systému, ale obvykle to bývají novinky apod. Pokud se odkazy na články sami nevytvářejí, tak postupujte následovně: 1. Klikněte na „Nabídky“ v horním vodorovném menu 2. Zvolte požadované menu, kam se má odkaz přidat 3. Klikněte na tuto ikonu v pravém horním rohu 4. Otevře se „Položka nabídek“, zvolte „Články“ 5. Ve stromě zvolte „Vzhled článku“ POKRAČOVÁNÍ 27


Umístění článku do menu 2 Zde vyberte článek ze seznamu

Tento text se zobrazí v menu

Můžete přepsat titulek

Napište název bez diakritiky a mezer (slouží systému)

Možnost umístit odkaz jako podřazený v hierarchii obsahu

28


KONEC MANUÁLU Další manuály naleznete ke stažení na webu

www.helpmark.cz postupně jak je budeme vytvářet

29


Práce s CMS JOOMLA. Tvorba článků a jejich zveřejnění s editorem JCE. MANUÁL č. 1 verze 0

Recommend Documents