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

Transkript

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

2 Obsah Obecné informace o tomto dokumentu Práce s obrázky 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 Zarovnání bez ohledu na SEO Zarovnání dle SEO Tvorba odkazů Zobrazení odkazu v novém okně Odkazování na Vytváření kotvy Umístění článku do menu Tvorba seznamů 2

3 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

4 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

5 Přihlášení Zadejte Vaši doménu a za ni /administrator např: Zadejte uživatelské jméno Zadejte heslo Klikněte na přihlásit 5

6 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

7 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ř. ( 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

8 Popis bloků článku Uložit a zavřít Odkaz na detaily Odkaz o sekcích a kategoriích Odkaz o JCE editoru Uložit a nechat otevřené Zavřít bez uložení Odkaz na detaily 8

9 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

10 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 Sekce Partneři Kategorie Plánované akce Kategorie Změny ve firmě Kategorie Naši zákazníci Kategorie Naši dodavatelé 10

11 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

12 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

13 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

14 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

15 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

16 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

17 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

18 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

19 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 px. 19

20 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

21 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

22 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

23 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 u. 23

24 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

25 Odkazování na Můžete odkazovat také na ovou adresu. POZOR riskujete tím, že váš web navštíví robot, který shromažďuje ové 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 ovou 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 u. 25

26 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ř.: 26

27 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

28 Umístění článku do menu 2 Tento text se zobrazí v menu Napište název bez diakritiky a mezer (slouží systému) Možnost umístit odkaz jako podřazený v hierarchii obsahu Zde vyberte článek ze seznamu Můžete přepsat titulek 28

29 KONEC MANUÁLU Další manuály naleznete ke stažení na webu postupně jak je budeme vytvářet 29