Úprava stránek. Obsah 1. Popis ikon editoru použitých v šabloně 2. Psaní a formátování textu pro web 3. Odkazy 4. Tabulky 5. Obrázky 6.

Transkript

1 Úprava stránek Obsah 1. Popis ikon editoru použitých v šabloně 2. Psaní a formátování textu pro web 3. Odkazy 4. Tabulky 5. Obrázky 6. Média

2 1. Popis ikon editoru použitých v šabloně krátký popis detaily Nový dokument Hledat Vložit prostý text Vložit z Wordu Zpět (Ctrl + Z) Znovu (Ctrl + Y) vytvoří prázdný dokument (odstraní veškerý stávající obsah) vyhledá text v dokumentu (umí také nahradit nalezený text) vloží neformátovaný text (z jiných stránek apod.) vkládá předpřipravený text z wordu (používejte pro vkládání formátovaného textu) vrátí zpět naposledy provedenou akci obnoví poslední zrušenou akci Vložit / upravit odkaz Zrušit odkaz viz. oddíl 4. Odkazy zruší odkaz v aktuálním výběru / odstranit všechny vybrané odkazy Vložit novou tabulku Vlastnosti řádku Vlastnosti buňky Vložit řádek před Vložit řádek za Odstranit řádek Vložit sloupec před Vložit sloupec za Odstranit sloupec Rozdělit buňky Sloučit buňky vloží / upraví novou tabulku nastaví vlastnosti vybraného řádku tabulky nastaví vlastnosti vybrané buňky vloží nový řádek před aktuální vloží nový řádek za aktuální odstraní aktuální řádek vloží nový sloupec před aktuální vloží nový sloupec za aktuální odstraní aktuální sloupec rozdělí dříve sloučené buňky tabulky sloučí vybrané buňky tabulky Vyčistit kód Zrušit formátování Upravit HTML kód vyčistí kód / odstraní přebytečné formátování odstraní z výběru formátování otevře editor s html zdrojem Odstavec Písma Velikost písma formát odstavce dle výběru nastaví druh písma výběru (používejte z rozvahou, písmo nemusí být dostupné na počítačích návštěvníků stránek) nastaví velikost písma výběru (pro nadpisy je lepší použít "Odstavec - Nadpis 1 až 6")

3 Tučné Kurzíva Podtržené Přeškrtnuté Zarovnat doleva Zarovnat na střed Zarovnat doprava Zarovnat do bloku Číslovaný seznam Seznam s odrážkami Zmenšit odsazení Zvětšit odsazení Blok citace zmenší odsazení textu od okraje zvětší odsazení textu od okraje aktuální odstavec odsadí od obou okrajů Barva pozadí Barva textu Vložit / upravit obrázek Vložit / upravit média Vložit vodorovný oddělovač Vodorovný oddělovač viz. oddíl 6. Obrázky viz. oddíl 7. Média vloží pevný oddělovač na pozici kurzoru vloží oddělovač s možností nastavení vlastností Vložit speciální znak Emotikony Přepnout na celostránkové zobrazení Nápověda Krátký popis ikon je možné získat najetím ukazatele myši na ikonu přímo v editoru.

4 2. Psaní a formátování textu pro web: Vizuální editor je na webu skvělá věc. Odstraňuje nutnost znát zápis značek jazyka HTML, takže každý může text na webu formátovat podle své potřeby, a to aniž by se s HTML vůbec kdy setkal. Ve vizuálním editoru jednoduše píšete text stejným způsobem, jako v počítači. K dispozici máte funkce pro zarovnávání či odsazování textu od okraje, tvorbu bodových a číslovaných seznamů, vkládání obrázků atd. Chceme-li formátovat text, může to znamenat mnoho úkonů, které s textem chceme provést. Můžeme například vytvořit jednoduše hlavní nadpis či podnadpis, zvýraznit text tučně, zvětšit velikost písma nebo změnit barvu, zarovnat odstavec na střed, umístit před text odrážku a další. Možností je opravdu mnoho, avšak zvýrazňování textu bychom měli používat uváženě! Jak správně formátovat text v editoru Existují dva způsoby jak dostat textový obsah do editoru. Buď můžete svůj text psát do editoru "přímo" (zde si jej pak také jednoduše naformátujete), nebo si můžete textový obsah připravit v programu MS Word, a poté jej jednoduše zkopírujete do editoru přes patřičnou ikonu. Nejdříve se však zaměříme na psaní a formátování textu přímo v editoru. Psaní a formátování textu "přímo" v editoru Než začneme formátovat jednotlivé části textu, je dobré si nejdříve vytvořit základní, ucelený textový obsah. Máme-li text připravený, můžeme začít s formátováním. Pamatujte! Každou stránku bychom měli začít hlavním nadpisem. Vytvoření hlavního nadpisu Používání nadpisů na stránkách je nedílnou součástí SEO optimalizace stránek. Vytvoření nadpisu v editoru je skutečně velmi jednoduché. Označíme si větu či slovo, které chceme označit jako hlavní nadpis a vybereme z nabídky Nadpis 1. Vytvoření podnadpisů Stejným způsobem jako jsme vytvořili hlavní nadpis, vytváříme v editoru i podnadpisy. Podnadpisy se v označují jako Nadpis 2, Nadpis 3 až Nadpis 6. Jako podnadpisy označujte slova či větná spojení nadepisující určitou část daného odstavce, tedy slova mající určitý význam pro vyhledávače (klíčová slova). Dále je možné nastavit například zvýraznění, zarovnání, velikost nebo barvu písma. Vkládání a formátování textu z Wordu Pokud si text pro web připravujete nejprve v počítači v nějakém textovém editoru (například ve Wordu nebo v OpenOffice.org), pak jej nemůžete jen tak jednoduše zkopírovat do schránky a následně vložit do vizuálního editoru na webu. Namísto toho klepněte nejprve na tlačítko Vložit text z aplikace Word a text zadejte teprve do políčka v dialogu, který se vám objeví. Proč to všechno? Pokud totiž do editoru vložíte zkopírovaný text z Wordu přímo, dojde také k vložení speciálních formátovacích značek, včetně různých barev, velikostí a typů písma. To bude mít za následek, že po uložení nebude stránka vypadat podle nastavení webové šablony. V lepším případě bude vzhled prvků na stránce mírně odlišný, v horším pak bude stránka vypadat nepoužitelně.

5 Vkládání obrázků Zejména méně zkušení uživatelé často vkládají obrázky přímo do dokumentu ve Wordu. To je samozřejmě vhodné pro případ, kdy vytváříte dokument určený například pro tisk. Ovšem nikoli již pro přípravu textů na web. Zkopírováním obrázku do schránky a jeho následným vložením do vizuálního editoru jej totiž na web neuložíte. Obrázky ponechejte v samostatných souborech, které nahrajete pomocí příslušného nástroje (záložka Soubory) do prostoru šablony. Poté obrázky z připraveného textu ve Wordu odstraňte a teprve takovýto text vkládejte do vizuálního editoru na webu. Pozor na odstavce Třetí nejčastější chybou méně zkušených uživatelů je špatná práce s odstavci v textovém editoru, kde si text pro umístění na web připravují. Odstavce vždy vytvoříte stiskem klávesy Enter. Pokud ji použijete dvakrát za sebou, vznikne prázdné místo, resp. jeden prázdný odstavec navíc. Po vložení do vizuálního editoru na webu se to projeví zbytečným prázdným místem mezi řádky. (Chcete-li místo odstavce vložit jen zařádkování stiskněte Shift + Enter) Snažte se tedy vyvarovat popsaných chyb a dodržovat tři základní pravidla, díky kterým si práci s vizuálním editorem v administraci usnadníte a zajistíte si správný vzhled vytvořených stránek.

6 3. Odkazy Již od doby vzniku internetu jsou odkazy jeho zásadní součásti. Jako odkaz je možné použít libovolnou část textu nebo jen slovo. Zásadně však nedoporučujeme používat např. slovo zde! Ale nějaké výstižné pojmenování manuál šablony nebo beseda s Františkem Novákem 2010 apod. Důvodem je, že když vyhledávače (google, seznam ) prohledávají internet slovo odkaz zde pro ně není příliš atraktivní. Vytvoření odkazu krok za krokem a) Vybereme text nebo obrázek, který bude odkazovat na další obsah

7 b) Klikneme na ikonu vložit/ upravit odkaz otevře se dialogové okno c) V tomto dialogovém okně můžeme přímo zadat adresu stránky do řádku url odkazu (ve formátu Také je možné zvolit si z připraveného seznamu odkazů

8 d) Při výběru z připraveného seznamu se automaticky upraví url, následně stačí kliknutím na tlačítko vložit vložit odkaz do stránky (stránku je třeba uložit!)

9 e) Speciální funkci je možné použít při tvorbě odkazu na obrázek V dialogovém okně Vložit/upravit odkaz stačí nastavit položku rel na hodnotu Lightbox a obrázek na který je odkaz vytvořen se pak otevře efektně jakoby nad stránkou šablony

10 4. Tabulky Tabulky je možné využít nejen k výstupu nějakých tabulkových dat, ale také pro formátování obsahu stránky, kterého není jinak možné docílit. Výchozí hodnota rámečku vkládané tabulky je totiž 0, a proto nebude tabulka vidět. Pokud chcete použít rámeček tabulky, věnujte pozornost nastavení hodnot Rozestup buněk a Odsazení obsahu, které značně ovlivní vzhled tabulky. Ve vytvořené tabulce je následně možné upravovat nastavení jednotlivých buněk Atd. Viz. popis ikon

11

12 5. Obrázky Pro oživení obsahu se dají do šablony vkládat obrázky, ty však musí být MENŠÍ než 2Mb a) Postup vložení obrázku do stránky krok za krokem obrázek je nejdříve nutné nahrát do šablony před nahráváním obrázku důrazně doporučuji zvolit požadovanou šířku obrázku pokud budete velikost obrázku upravovat až v editované stránce může dojít k velice nepříjemnému efektu, kdy se stránka načítá velmi pomalu a zbytečně zahlcuje linku nahranému obrázku se upraví automaticky jméno, aby neobsahovalo velká písmena, diakritiku ani mezery a soubor se tak dal dobře používat na webu. rozměry fotografie je možné zkontrolovat kliknutím na jméno souboru.

13 b) Pokud je obrázek nahrán v šabloně, nic již nebrání jeho použití ve stránce. Otevřete si stránku, do které chcete obrázek vložit pro úpravy, kurzor postavte na místo, kam chcete vložit obrázek, klikněte na ikonu Vložit/upravit obrázek V dialogovém okně pak stačí zvolit obrázek ze seznamu obrázků c) Ostatní hodnoty se doplní automaticky, ale je možné je upravit dle požadavku. Popis obrázku využívají vyhledávače a čtečky slabozrakých nebo slepých uživatelů internetu, proto by měl byt vystižný, aby nahradil obrázkový obsah. Titulek používají prohlížeče internetu k zobrazení popisku obrázku, když nad ním zastavíte kurzor myši.

14 d) V položce vzhled dialogového okna vložit /upravit obrázek je možné upravit zarovnání obrázku atd. (okno obsahuje náhled, jak bude cca vypadat výsledek) e) Klikneme na tlačítko vložit a obrázek je na místě

15 f) Ukázka zobrazení titulku:

16 6.Média Do šablony lze jednoduše vložit i například video z youtube. Stačí najít na youtube video, které by jste chtěli přidat. Zkopírovat url (přesná internetová adresa v horním řádku prohlížeče pravděpodobně začínající ) Ikonou Vložit/upravit média vyvolat dialog : Do kterého vložíte adresu youtube a kliknete vložit.