Stručný návod k HTML editoru v CMS Portia 4 2 03/2015
Představení HTML editor je jednoduchý textový editor pro webové stránky. Nabízí většinu hlavních funkcí jako mají velké editory typu Word pro použití na webu. Můžete psát text, formátovat ho, vytvářet tabulky, vkládat obrázky a mnoho dalšího. Editor nepotřebuje žádnou instalaci na vašem počítači. Vyžaduje pouze internetový prohlížeč kompatibilní s Internet Explorer 8 a vyšší, Firefox, Safari nebo Opera. Důležité zásady Čeština na internetu Adresy na internetu nemohou obsahovat písmena s diakritikou (háčky, čárky), ani žádné speciální znaky jako # & ^ apod. Ikdyž to snad někdy funguje, není záruka že to bude fungovat vždy. Proto se pro jména souborů používá zásadně pouze anglická abeceda = malá písmena bez háčků, čárek, a číslice. Žádné jiné znaky nejsou dovoleny. Mezera se nahrazuje pomlčkou. Nepoužívají se ani velká písmena. Některé servery sice nerozlišují velikost písmen, ale některé ano a FotoAuta.JPG není to stejné jako fotoauta.jpg Přenášení obsahu z Microsoft Word HTML editor je rozhodně něco jiného než Word. Nelze jednoduše okopírovat a přenést text z Wordu do HTML editoru (Ctrl C a Ctrl V)! Word používá jiné značky pro formátování a generuje spoustu zbytečného, pro internet nesmyslného kódu. V HTML editoru je pak text naprosto nepřehledný a neopravitelný a při jakékoli změně je lepší ho vložit raději celý znovu. Jediný správný způsob je vložit ho pouze jako prostý text PŘI NEDODRŽOVÁNÍ TĚCHTO ZÁSAD, SE NEBUDE ZOBRAZOVAT OBSAH STRÁNEK SPRÁVNĚ. VÝBĚR SOUBORŮ S DIAKRITIKOU V NÁZVU PŘESTANE FUNGOVAT ÚPLNĚ. a zformátovat ho v editoru znovu. Interface HTML editor poskytuje jednoduchý interface který by měl být známý všem uživatelům používající editory jako Microsoft Word nebo Open Office. Skládá se ze čtyř samostatných elementů: Nástrojová lišta - vrchní část editoru, která obsahuje mnoho různých tlačítek aktivující funkce editoru. Editovací prostor - oblast pro editaci textu. Kontextová nabídka - menu s funkcemi, které se objeví při kliknutí pravým tlačítkem myši v oblasti editace textu. Dialogy - malá okna, která se zobrazí při zvolení určité funkce, slouží k zadání nezbytných hodnot a informací. 2
Funkce nástrojů Prvek lišty Funkce Zobrazení / editace zdrojového kódu dokumentu (pro experty). Vymaže celý obsah a vytvoří novou prázdnou stránku. Uloží editovanou stránku. Náhled upravované stránky. Výběr šablony. Vyjme označený text do schránky. Kopíruje označený texty do schránky. Vloží kopírovaná data ze schránky (i s formátováním). Nepoužívat! Vloží kopírovaná data ze schránky bez formatování. Používejte vždy jen tento způsob. Krok zpět a Krok vpřed. Najde slovo nebo frázi. Najde a nahradí slovo nebo frázi. Označí celý text dokumentu. Aplikuje tučné, kurzíva, podtržené nebo přeškrtnuté písmo na označený text. Viz Formátování textu. Horní index nebo spodní index z označeného textu. Viz Formátování textu. Vytvoří číslovaný seznam. Viz Formátování textu. Vytvoří nečíslovaný seznam. Viz Formátování textu. Zvětší nebo zmenší odsazení textu Označí citovaný text. Zarovná text (vlevo, na střed, vpravo nebo do krajů). Viz Formátování textu. Vloží nebo odstraní odkaz z označeného textu. Dá se využít i pro nahrání a obsluhu souborů na serveru. Viz Odkazy, E-Maily a Kotvy. Vloží nebo upraví odkaz uvnitř stránky. Viz Odkazy, E-Maily a Kotvy. Vloží obrázek do dokumentu. Vloží Adobe Flash element na stránku. Vloží video ze serveru YouTube.com Vytvoří tabulku s definovaným počtem sloupců a řádků. Vloží vodorovnou oddělovací linku. Vloží "smajlík". Vkládá symboly a speciální znaky (šipky, copyright, apod.). 3
Styly & formátování určuje the vzhled and významovou hodnotu vašeho dokumentu. Můžete si vybrat styl, format, písmo, velikost, atd. Pro odstranění zadáte vybraný název stylu znovu. Viz Formátování textu. Změna barvy textu. Viz Formátování textu. Změna barvy pozadí textu. Viz Formátování textu. Maximalizuje velikost editoru v okně prohlížeče. Zobrazí hranice bloku v textu. Zápis textu Internet (web) vs papír Psaní v HTML editoru je stejně jednoduché jako psaní v jiném editoru, jako je Microsoft Word, nebo Open Office. Ačkoli některé důležité rozdíly existují. Desktopové textové editory a procesory se využívají na vytváření tiskových dokumentů, omezených stránkou papíru. HTML editor se namísto toho většinou používá pro vytváření textů na internet, pro zobrazení ve webových prohlížečích. To je důležité si uvědomit. Nejdůležitější věci na zvážení jsou: Na Internetu nemají stránky fyzické omezení. Mohou se "prodlužovat" do nekonečna. Stejný obsah se může zobrazit různě na různých počítačích nebo v různých prohlížečích. Textové řádky mohou obsahovat více nebo méně slov, podle nastavení počítače. Webové stránky mají jistá technická omezení. Vytváří je programátoři, používající různé "počítačové jazyky". Tyto jazyky jsou mocné v mnoha aspektech, mají však také omezení, která jsou těžko pochopitelná pro uživatele, zvyklé pouze na desktopové editory. Časem si zvyknete na tato omezení a budete schopni také psát kvalitní texty pro internet. Klávesa ENTER První věc kterou byste měli znát o psaní textu, je použití klávesy ENTER (na některých počítačích RETURN). Při jejím stisknutí vytvoří editor nový odstavec. Můžete použít také kombinaci SHIFT + ENTER, která udělá konec řádku v tom stejném odstavci. Klávesa BACKSPACE Jak víte, klávesa BACKSPACE se používá na mazání chyb, celých slov nebo celého textu. Pro zjednodušení můžete použít kombinaci CTRL a BACKSPACE na smazání celého slova před kurzorem. 4
Klávesové zkratky Umožňují pracovat rychleji a jednodušeji. Zde je jejich seznam: CTRL+A označí vše CTRL+B změní písmo na tučné. CTRL+C zkopíruje označenou oblast do schránky. CTRL+I změní písmo na kurzívu. CTRL+L otevře okno odkazů. CTRL+SHIFT+S uloží dokument. CTRL+U změní písmo na podtržené. CTRL+V nebo SHIFT+INSERT vloží data ze schránky CTRL+X nebo SHIFT+DELETE vyjme označenou oblast do schránky. CTRL+Y nebo CTRL+SHITF+Z o krok vpřed. CTRL+Z vrátit poslední krok. CTRL+ALT+ENTER zvětší editor do celého okna prohlížeče. Formátování textu Formátování textu určuje jak bude váš dokument vypadat. Formátovat text v HTML editoru je velmi snadné. Začneme s formátováním písma tučné, kurzívou, podtrhnuté. Tučné, kurzíva, podtrhnuté a přeškrtnuté Označený text můžete zobrazit tučným, kurzívou, podtrženým nebo přeškrtnutým písmem. tučné na nástrojové liště. kurzíva na nástrojové liště. podtržené na nástrojové liště. přeškrtnuté na nástrojové liště. 5
Pokud chcete zrušit tuto funkci stisknete tlačítko znovu. Samozřejmě můžete tyto funkce kombinovat. Poznámka: pokud nezrušíte podtržené písmo budou podtržené i mezery mezi slovy. To stejné se stane i u přeškrtnutého písma. Styly Je docela jednoduché udělat váš text ošklivý, nebo špatně čitelný použitím mnoha různých formátování. Styly pomáhají udržet jednotnou kulturu strukturovaného textu. Každý styl obsahuje předdefinované kombinace formátování, které byly definovány programátorem. Styly jsou také cesta pro zkombinování všech formátování. Umožňují rychlý přístup k nastaveným kombinacím. Například nemusíte stále znovu nastavovat písmo, barvu, velikost. Jednoduše vyberete nastavený styl. 6
Zarovnání textu Odstavec textu může mít řádky zarovnané bud k některé ze stran - vlevo, vpravo, nebo na střed, nebo i do bloku - zarovnané jsou obě strany. Zarovnání doleva na nástrojové liště. Zarovnání doprava na nástrojové liště. Zarovnání na střed na nástrojové liště. Zarovnání do bloku na nástrojové liště. Tato funkce je podobná zarovnání vlevo. Rozdíl je v tom, že pokud se text sám zalomí na víc řádků, každý řádek bude stejně dlouhý i když v něm bude různý počet slov a písmen. 7
Odstavec (Blok) Další velmi důležitá funkce je Formát: Formát se používá na organizování vašeho textu do oddělených částí. Např. když chcete začít novou kapitolu nebo vložit rozdílné kategorie a podkategorie použijete formát a vyberete různé nadpisy. I v tomto dokumentu můžete vidět různé nadpisy, které rozdělují text do různých kategorií. Písma (fonty) Na internetu se používá jen několik málo písem, které obsahuje standardně většina počítačů - aby byl dokument pokud možno zobrazen vždy stejně. U ozdobných písem nikdy nezaručíte, že je bude mít k dispozici každý, kdo si bude stránku prohlížet. Používají se především bezpatková písma (pro lepší čitelnost): Arial, Verdana, Tahoma. Také je k dispozici patkové písmo Times New Roman a neproporcionální font Courier New (jako na starých psacích strojích). Nadměrným užitím různých písem na svých stránkách docílíte chaoticky a ošklivě vypadajícího textu! 8
Doporučuje se nepoužívat mnoho různých typů písma v jednom dokumentu. Je lepší používat předdefinované styly. Velikost písma Zde můžete změnit velikost písma v rozsahu velikostí které definoval programátor webu. Jak můžete vidět, lze použít velký rozsah velikostí. 9
Barvy Další možností jak zobrazit text rozdílně je změna barvy písma nebo pozadí. (Pozor na nastavení stejné barvy písma i pozadí!!) Několik barev je nachystáno přímo v nabídce. Pokud potřebujete další, klikněte v panelu na Více barev... Barvu vyberete kliknutím na ni. Také můžete změnit barvu pozadí Také můžete kombinovat barvy písma pozadí zaráz. Horní a dolní index Horní a dolní index se používají většinou při zápisech matematiky. Je to menší písmo než je normální text Stiskněte nebo na nástrojové liště. 10
Obě funkce můžete kombinovat: Odkazy, E-Mail adresy a kotvy Odkazy a E-mail adresy Pro vložení odkazu, e-mail adresy nebo kotvy použijte zobrazí se dialogové okno. Typ odkazu: určuje jaký typ odkazu vkládáte. Můžete vybrat "URL", "Kotva v této stránce" a "E-mail". Podle zvoleného typu se v okně zobrazují další volby. Začneme s typem URL. URL Informace o odkazu Protokol: specifikuje typ protokolu který chcete použít: "http://", "https://","ftp://", "news://" nebo "jiné". URL: adresa na kterou odkaz ukazuje. Stiskem "OK" se odkaz zapíše do vašeho dokumentu. 11
Cíl Na druhé záložce se nastavuje "Cíl": Cíl: nastavuje v jakém okně se má odkaz zobrazit. Můžete vybrat "<rámec>", "<vyskakovací okno>", "Nové okno" ( _blank ), "Hlavní okno" ( _top ), Stejné okna ( _self ), Rodičovské okno ( _parent). Název cílového rámu: zde najdete jméno volby kterou jste vybrali v "Cíl" Pokud zvolíte jako Cíl vyskakovací okno, zobrazí se další možnosti nastavení, kde můžete zvolit které prvky má okno obsahovat a které ne: 12
Odeslat Odeslat: umožňuje zadat umístění souboru který chcete uložit na server. Můžete také stisknout tlačítko Procházet pro zobrazení dialogu na výběr souboru Odeslat na server: uloží zvolený soubor na server. E-mail Pokud zvolíte typ: E-mail objeví se nové možnosti nastavení: 13
Kotvy Pro vložení kotvy do textu stiskněte Zobrazí se dialogové okno pro nastavení vlastností: Název záložky: označuje bod v dokumentu na který se bude odkazovat kotva. Vytváření seznamů Vytváření seznamů je velice jednoduché a intuitivní. HTML editor nabízí dva druhy seznamů. Číslovaný seznam Vytvoření Pro vytvoření číslovaného seznamu použijete automaticky číslo. na nástrojové liště. Text vedle kurzoru dostane Stisknutím ENTER se založí další položka seznamu s dalším číslem Můžete také označit řádky, které mají dostat číslo a potom stisknout tlačítko Chcete-li ukončit číslovaný seznam, stiskněte tlačítko znovu. Funkce se deaktivuje. 14
Vlastnosti Pokud chcete nastavit vlastnosti seznamu klikněte na něm pravým tlačítkem myši, zobrazí se kontextové menu: Vyberte Vlastnosti číslovaného seznamu, zobrazí se dialogové okno: Start: číslo od kterého bude seznam začínat. Typ: můžete si vybrat z několika typů číslování, např řecké číslovky. Nečíslovaný seznam Vytváření Pracuje naprosto stejně jako u číslovaného seznamu. Místo číslic se zobrazují jen odrážky K aktivaci použijete. 15
Vlastnosti Pokud chcete nastavit vlastnosti seznamu klikněte na něm pravým tlačítkem myši, zobrazí se kontextové menu: Vyberte Vlastnosti číslovaného seznamu, zobrazí se dialogové okno: Typ: můžete si zvolit typ odrážek. Vkládání souborů (PDF, XLS,...) Soubory (pdf, xls, atd.), na které má existovat odkaz, se vkládají v dialogu odkazu. Pro vložení odkazu použijte zobrazí se dialogové okno. Tlačítko Vybrat na serveru otevře dialogové okno, ve kterém je možno nahrát na server libovolný soubor a následně ho vybrat jako cíl odkazu. 16
Vkládání obrázků Vkládání obrázků v HTML editoru je velmi jednoduché. Použijte dialogové okno pro zadání vlastností obrázku. Obsahuje 4 záložky: na nástrojové liště. Zobrazí se Informace o obrázku První záložka jsou Informace o obrázku URL: URL adresa obrázku. Můžete také použít tlačítko Vybrat na serveru. Alternativní text: popis obrázku pokud má být jiný než je jméno souboru. Šířka: šířka obrázku v px. Výška: výška obrázku v px. Můžete zamknout poměr stran obrázku nebo se vrátit k původním hodnotám. Okraje: velikost okraje - volného prostoru kolem obrázku. H-mezera: velikost horizontální mezery. V-mezera: velikost vertikální mezery. Zarovnání: zarovnání obrázku: vlevo (text obtéká obrázek vpravo), vpravo (text obtéká obrázek vlevo), atd... 17
Odkaz URL: URL adresa obrázku. Můžete také použít tlačítko Vybrat na serveru. Cíl: určuje v kterém okně se má obrázek otevřít. Odeslat Odeslat: specifikuje umístění obrázku na lokálním počítači. Můžete také použít tlačítko Procházet pro výběr... Tlačítko Odeslat na server uloží obrázek na server. 18
Rozšířené Pouze pro zkušené uživatele: Id: ID obrázku. Orientace jazyka: nastavuje směr psaní zleva doprava ( LTR ) nebo zprava doleva ( RTL ). Kód jazyka: např. cz, en, pt, pl. Dlouhý popis URL: popis stránky. Třída stylu: jméno CSS třídy. Pomocný titulek: popis cílového objektu. Styl: je možno doplnit styl obrázku. Efekt LightBox Otevírání odkazu obrázku do lightboxu (efekt vyskakovacích oken s obrázkem) se nastavuje v záložce Light Box. Obrázková galerie se nastavuje zaškrtnutím a výběrem jako na obrázku vpravo. Název Skupina musí být pro jednu galerii stejný. Na stránce tak můžete mít galerií více, stačí je oddělit názvem Skupiny. 19
Tabulky Vytvoření tabulky Chcete-li vytvořit tabulku v HTML editoru musíte kliknout na "Vložit/Upravit tabulku" Zobrazí se dialogové okno "Vlastnosti tabulky". Řádky: počet řádků tabulky. Sloupce: počet sloupečků tabulky. Ohraničení: šířka ohraničení tabulky v px. Zarovnání: zarovnání tabulky doleva / doprava / na střed. Šířka: šířka tabulky v px nebo %. Vzdálenost buněk: šířka mezi buňkami v px. Odsazení obsahu: odsazení obsahu buňky od jejího okraje v px. Nadpis: nadpis tabulky. Popis: komentář tabulky (nezobrazuje se). Všechny údaje nejsou nezbytné. Musíte ale vyplnit počet řádků a sloupců. Neviditelnou tabulku (ohraničení = 0) lze využít na zarovnání textu např do několika sloupečkù na stránce. Nebo pro vložení zarovnaných obrázků - v každé buňce jeden 20
Práce s tabulkou Můžete měnit vlastnosti vytvořené tabulky. Kliknutím pravým tlačítkem myši na tabulce se zobrazí kontextové menu. Buňka Vložit buňku před: vloží novou buňku před buňku, ve které je kurzor. Vložit buňku za: vloží novou buňku za buňku, ve které je kurzor. Smazat buňku: smaže buňku na které je kurzor. Můžete také označit více buněk a smazat je naráz. Sloučit buňky: sloučí označené buňky do jedné. Rozdělit buňky vodorovně: rozdělí jednu buňku na dvě - 2 sloupečky. Rozdělit buňky svisle:rozdělí jednu buňku na dvě - 2 řádky. Vlastnosti buňky: otevře nové dialogové okno s vlastnostmi buňky: 21
Šířka: šířka buňky v px nebo % šířky tabulky. Výška: výška buňky v px. Zalamování: zapne / vypne zalamování textu. Vodorovné zarovnání: vodorovné zarovnání obsahu buňky doleva / doprava / na střed. Svislé zarovnání: svislé zarovnání obsahu buňky nahoru / doprostřed / dolů / na účaří. Sloučené řádky: počet sloučených buněk ve sloupci. Sloučené sloupce:počet sloučených buněk na řádků. Barva pozadí: barva pozadí buňky. Barva ohraničení: barva ohraničení buňky. Řádek Vložit řádek před: vloží nový řádek před řádek na kterém je kurzor. Vložit řádek za: vloží nový řádek za řádek na kterém je kurzor. Smazat řádky: smaže označené řádky, nebo řádek na kterém je kurzor. 22
Sloupec Vložit sloupec před: vloží nový sloupec před sloupec na kterém je kurzor. Vložit sloupec za: vloží nový sloupec za sloupec na kterém je kurzor. Smazat sloupce: smaže označené sloupce, nebo sloupec na kterém je kurzor. Editor zdrojového textu HTML editor umožňuje editovat přímo i zdrojový kód vkládané stránky. Tato funkce je pouze pro odborníky, kteří umí jazyk HTML. Pozor, neobratným zásahem můžete celou pracně vytvořenou stránku zničit. Nejdůležitější tagy Tag Význam Párový <b> tučné písmo ano <i> kurzíva ano <p> odstavec nepovinně <a> odkaz ano <img> obrázek ne <hr> vodorovná čára ne <br> zalomení řádku ne <h1>,<h2>, <h3> nadpisy ano <span> úsek textu ano <div> oddíl ano 23