OpenCms. Příručka prvních kroků. Miroslav Exner

Transkript

1 OpenCms Příručka prvních kroků Miroslav Exner

2

3 Obsah 1 Úvod Co je OpenCms O příručce Průzkumník Lišty Strom složek Seznam souborů Místní nabídka Projekty Publikování Nový soubor Vlastnosti souboru FCKeditor Horní lišta Střední lišta Přehled funkcí Problémy se schránkou Vložení tabulky Vkládání odkazů a návěští Vložení obrázku Galerie obrázků Galerie souborů ke stáhnutí Galerie externích odkazů Galerie html

4 4 OBSAH Galerie tabulek Spodní lišta Strukturovaný obsah Nejdůležitější struktury Article News article FAQ article Event Photo Album Jednoduchý web Přihlášení a příprava Nový web Články Galerie fotek Stránka odkazů Stránka Kdo jsem Publikování

5 Kapitola 1 Úvod 1.1 Co je OpenCms OpenCms je profesionální správce webového obsahu 1. Velmi přehledně a intuitivně umožňuje uživateli vytvořit a spravovat rozsáhlé a komplexní webové prezentace bez znalostí html, čemuž dopomáhá integrovaný WY- SIWYG editor, který vypadá jako běžný textový procesor (Microsof Word, OpenOffice Writer). Používání šablon dá vašim stránkám jednotný ráz, umožní snadnou navigaci mezi jednotlivými stránkami, nebo vytvoří kompletní galerii obrázků včetně náhledů s jednoduchými efekty. OpenCms je postaveno na technologiích jazyků Java a XML, spolupracuje s volně dostupnými operačními systémy a aplikacemi (např. Linux, Apache, Tomcat, MySQL) i s komerčními produkty (např. Windows NT, IIS, BEA, Oracle DB). Jakožto open source 2 je zcela zadarmo. 1.2 O příručce Tato příručka vznikla v rámci předmětu Příprava textu pomocí počítače na Fakultě aplikovaných věd Západočeské univerzity v Plzni. Je určena lidem, kteří např. chtějí spoluvytvářet obsah (nejen) fakultního webu, 1 Content Management System Na českém internetu se vžilo ne zcela přesné označení redakční systém 2 Zdrojové kódy jsou volně dostupné

6 6 1.2 O příručce či chtějí vytvořit stránky svému předmětu. Aby se nemuseli zdlouhavě učit html a pravidla, jak se vlastně weby mají tvořit což je vlastně podstata správců obsahu, mají k dispozici OpenCms. S prvními krůčky v něm by vám aspoň doufám měla pomoci tato brožura. Snažil jsem se důležitější a používanější funkce a prvky popsat zevrubněji. Kde je popis stručnější, nejedná se o nic zásadního. Nebudeme se zaobírat ani instalací samotného OpenCms, protože bychom museli zprovoznit i služby databázového a webového serveru. O těchto problémech je napsáno spousta příruček, knih a internet se takovými návody jen hemží. Budu předpokládat, že OpenCms je u vás v práci, nebo na univerzitě v provozu a že vám administrátor dal přístupové údaje (uživatelské jméno a heslo) a řekl vám, kde se do pracovní plochy OpenCms 3 přihlásit. Text můžete pročítat od začátku, dozvíte se tak, jaký potenciál v sobě OpenCms skrývá a nakonec si vše vyzkoušet na příkladu. Pokud ale nemáte strach, můžete se vrhnout na příklad okamžitě a ten vás krok po kroku provede tvorbou jednoduchého webu popř. vás odkáže na podrobnější popis problému do jiné kapitoly. Příručka má webové stránky kde lze nalézt její poslední verzi v elektronické podobě a můžete mi zde zanechat svůj dotaz, připomínku nebo návrh. 3 OpenCms je celý systém, pracovní plocha místo, kde můžete spravovat své stránky.

7 Kapitola 2 Průzkumník OpenCms si v databázi vytvoří vlastní virtuální souborový systém (označovaný jako VFS), kam ukládá vaše soubory, ale i spoustu svých nastavení. V průzkumník OpenCms se VFS jeví jakožto normální struktura složek, na kterou jste zvyklí ze svého počítače. Průzkumník souborového systému je jeden ze tří vzhledů pracovní plochy (Workplace) OpenCms a zpravidla se zobrazí po úspěšném přihlášení uživatele. Jak lze vidět z obrázku 2.1, je průzkumník rozdělen na strom se strukturou složek (levá část), na seznam s obsahem zvolené složky a dvě lišty s tlačítky. Obrázek 2.1: Průzkumník

8 8 2.1 Lišty 2.1 Lišty Project V seznamu jsou všechny dostupné projekty přihlášeného uživatele (viz 2.4). Publish project Publikuje projekt (viz 2.4.1). Site V seznamu se vybírá, kterým webem chcete procházet (zpravidla je nastaven na /site/default/) View Přepíná mezi vzhledy pracovní plochy: průzkumníkem souborového systému (Explorer), administrační sekce (Administration) a části pro správu úkolů (Workflow). Reload Znovunačtení pracovní plochy. Preferences Předvolby OpenCms. Zde si můžete nastavit např. vzhled průzkumníku, zobrazované informace u souborů, přístupové heslo. Help Nevíte-li si rady, koukněte se do nápovědy. Exit Back Odhlášení uživatele. Krok zpět při průchodu souborovým systémem. Upload Nahrání souboru na server. Pokud používate Upload Applet (lze nastavit v Preferences), ve vašem prohlížeči musí fungovat Java. New Vytvoření nové položky v současné složce. Level Up O úroveň výš v souborovém systému. Location Současná pozice v souborovém systému.

9 2 Průzkumník Strom složek Stromová struktura složek v souborovém systému OpenCms. Klepáním na symboly + a lze rozbalovat a sbalovat seznamy podsložek. Klepnutím na název složky se zobrazí seznam souborů, které obsahuje. Ovládání je podobné např. průzkumníku v operačním systému Windows. 2.3 Seznam souborů Účel je již patrný z názvu zobrazení názvů souborů ve vybrané složce a k nim další vybrané informace jako je např. typ, titulek, velikost. Klepnutím levým tlačítkem myši na název souboru se zobrazí v internetovém prohlížeči náhled tohoto souboru, klepnutím na složku se do ní přesuneme. Zobrazení náhledu stránky není výhodné jen pro to, abychom zjistili, jak nastavení všemožných vlastností stránku ovlivnilo, ale zobrazí se v něm u některých prvků pomocné ikonky, které nám umožní vytvářet, editovat a mazat obsah stránky přímo (více v příkladu v kapitole 5). Klepnutím levým tlačítkem myši na ikonu vedle názvu souboru označující typ, nebo pravým tlačítkem na název souboru vyvoláme místní nabídku Místní nabídka Místní nabídka poskytuje následující operace, které lze se soubory či složkami provádět. Lock/Unlock Pokud máte práva zápisu do souboru, můžete soubor zamykat, nebo odemykat a zamezit tak dodatečným úpravám od jiných uživatelů. Publish directly Přímé publikování (pouze) označeného souboru (viz 2.4.1). Edit Změna strukturovaného obsahu. Edit Page Změna obsahu webové stránky. Edit sourcecode Změna zdrojového kódu souboru.

10 Projekty Copy Kopírovat soubor. Rename/Move Přejmenovat/přesunout soubor. Delete Vymazat soubor. Touch Změna data a času souboru. Availability Nastavení časové dostupnosti souboru. Lze poslat upozornění několik dnů před expirací. Undo Changes Vrátit změny souboru. Show siblings Zobrazit seznam sourozenců. Permission Nastavení přístupových práv k souboru. Lze nastavit jak pro jednotlivé skupiny uživatelů, tak i pro každého uživatele individuálně. Secure/Export Nastavení zabezpečení a exportu souboru. Change type Změna typu souboru. Change navigation Změna navigace souboru. Edit controlcode Změna kontrolního XML kódu. History Zobrazení historie souboru. Properties Zobrazení vlastností souboru. U každého typu souboru nemusí být dostupné všechny následující funkce. 2.4 Projekty Projekty v OpenCms slouží k přehlednému rozdělení souborů. Záleží na administrátorovi, kolik projektů vytvoří a komu je umožní spravovat. Pro nás dva nejdůležitější projekty Online a Offline jsou téměř identické. Jediný rozdíl je v tom, že Online projekt obsahuje informace, které jsou viditelné veřejně na webu, naproti v projektu Offline můžeme bezproblémově pracovat, měnit obsah, mazat, nebo vytvářet nové soubory a nemusíme mít strach, že návštěvník webových stránek průběh změn uvidí. Jednoduše řečeno: Online projekt je vidět, v offline projektu se šťouráme.

11 2 Průzkumník Publikování Nepotřebujeme-li již v Offline projektu nic dalšího měnit a chceme, aby všechny změny byly viditelné i na veřejném webu, musíme projekt publikovat tlačítko Publish project. V souborech, které se mají publikovat, se zkontroluje platnost všech odkazů, a není-li nalezena chyba, obsah Online projektu je aktualizován novým z Offline projektu. 2.5 Nový soubor Chceme-li v aktuální složce vytvořit novou složku nebo soubor, stikneme tlačítko New, čímž se spustí krátký průvodce. V prvník kroku nejprve musíme vybrat, jaký typ souboru chceme přidávat. Máme několik následujících možností: Folder Obyčejná složka obsahující libovolné soubory. Extended Folder Rozšířená složka (např. galerie fotek, souborů ke stažení). Structured Content Strukturovaný obsah (viz 4). Pattern Page Stránka strukturovaná do odstavců. Page with free text Zcela prázdná stránka, kterou lze libovolně editovat. Text file Obyčejný textový soubor, není nijak zvlášť formátován. JSP Soubor se značkami JSP nebo Java scriptlety. External Link Soubor s externím odkazem. Sibling Sourozenec dále zvoleného souboru. Upload new file Nahrání souboru na server. Typ souboru je možné kdykoliv změnit volbou funkce Change Type z místní nabídky. Do dalšího formuláře musíte zapsat samotný název souboru (Name), vybrat šablonu stránky (Template), zaškrtnout, jestli chcete pozměnit vlastnosti souboru a jestli se má k souboru připojit přípona *.html.

12 Nový soubor Obrázek 2.2: Vlastnosti souboru Ve třetím formuláři lze nastavit několik hlavních vlastností souboru. Parametr Title slouží jako titulek, Keywords klíčová slova důležitá pro vyhledávání, Description je stručný popisek souboru. Zaškrtneme-li políčko Add to navigation, chceme, aby se odkaz na tento soubor přidal do navigačního menu na samotné webové stránce. Navigation Text je textem, který bude v navigačním menu zobrazen, Insert after kam se položka do menu vloží Vlastnosti souboru V minulém odstavci jsme už museli vlastnosti souboru trochu naťuknout, ale to byl asi ten nejednoduší případ, kdy můžeme změnit pouze pár položek. Situace se komplikuje (viz obrázek 2.2), jakmile začneme vytvářet (pod)weby (Microsite). Tlačítkem Advanced lze zobrazit všechny dostupné vlastnosti souboru, to bych ale zkoušel, až budete mít z Open- Cms nějaké zkušenosti. Standardní vlastnosti Tato množina vlastností se dá změnit v normálním formuláři téměř u každého souboru či složky.

13 2 Průzkumník 13 Title Titulek stránky, zobrazuje v seznamu souborů vedle jména, ale také v titulku prohlížeče. Description Popisek souboru. Krátká informace o smyslu, nebo obsahu souboru. Add To Navigation Jestliže chceme přidat odkaz na tento soubor do automaticky sestavované navigace, políčko zaškrtneme. Navigation Text Jaký text se případně zobrazí jako odkaz v navigaci. Show Head Image Chceme-li v hlavičce zobrazit obrázek, označíme Enable, to nám umožní vyplnit dvě následující pole, v opačném případě volíme Disable. Můžeme nechat výchozí nastavení Default. Image Uri Cesta na soubor s obrázkem, který se má zobrazit v hlavičce. Image Link Cíl odkazu představovaný obrázkem v hlavičce. Head Element Cesta k souboru, který předefinovává element hlavičky. Show Head Navigation Chceme-li zobrazit pruh s odkazy na sousední weby v hlavičce stránky, označíme Enable, v opačném případě volíme Disable. Můžeme nechat výchozí nastavení Default. Show Navigation Tree Chceme-li zobrazit navigační strom, zvolíme Enable, v opačném případě volíme Disable. Můžeme nechat výchozí nastavení Default. Element left Cesta k souboru, jež předefinovává levý sloupec stránky. Element right Cesta k souboru, který předefinovává právý sloupec stránky. Center layout Rozvržení středu stránky. Zde nastavíme, jestli chceme na stránce zobrazit např. seznam posledních článků, údálostí, nebo odkazů (viz 5.3). Right layout Rozvržení právého sloupce stránky, podobné jako Center layout.

14 Nový soubor Configure path for the template Cesta ke složce, kam si web ukládá nastavení šablony jako jsou barvy CSS stylů apod. 1 Pokud zvolíme Default výchozí nastavení přebíráme nastavení nadřazené složky, ta případně přebírá výchozí nastavení šablony. Pokročilé vlastnosti Do pokročilých vlastností se dostanete stiskem tlačítka Advaced. Ve dvou záložkách najdete vlastnosti individuální a sdílené. V seznamu jsou vlastnosti základní, trochu jinak pojmenované a kolem nich spousta dalších. Tláčitkem Define můžete dokonce novou vlastnost definovat. Toto jsou ale velmi pokročilé volby a není důvod si s nimi zatěžovat hlavu. 1 Některé údaje v CSS stylech lze změnit jako strukturovaný obsah, takže si můžeme šablonu lehce přizpůsobit.

15 Kapitola 3 FCKeditor Součástí OpenCms je výborný WYSIWYG 1 editor, který funguje přímo v prohlížeči a umožňuje nám vytvořit nebo pozměnit obsah html stránky bez toho, abychom museli být webovými designéry a znát html. Jak je vidět na obrázku 3.1, FCKeditor se podobá většině standardních textových editorů a procesorů. Všechny funkce jsou dostupné přes tlačítka ve třech lištách, které si podrobně popíšeme. 3.1 Horní lišta Webová stránka je rozdělena na několika částí (v OpenCms se označují jako elementy). V této liště si můžeme nastavit, jakou část (element) stránky chceme tvořit. Protože každá stránka může být naspána v několika jazycích (např. mateřština a angličtina), lze na horní liště přepínat mezi jednotlivými lokalizacemi, kterých může být několik. Seznam jazyků V prvním rozbalovacím seznamu lze nastavit, pro jaký uživatelem zvolený jazyk budeme dokument psát. Delete Vymaže nastavenou lokalizaci stránky (stránka nebude pro tento jazyk k dispozici) 1 What You See Is What You Get = Co vidíš, to dostaneš

16 Střední lišta Obrázek 3.1: WYSIWYG editor Seznam elementů V druhém rozbalovacím seznamu se nastavuje, jaká část (element) stránky bude zobrazena v editoru. Elements Nastavení, které části (elementy) budou na webové stránce viditelné. Properties Nastavení vlastností stránky (viz 2.5.1). Cleanup HTML code Odstranění zbytečných html značek, které se mohou ve zdrojovém kódu při editaci vyskytnout. 3.2 Střední lišta Přehled funkcí Save and Exit Uloží dokument a uzavře editor (neuzavře okno projlížeče, ale vrátí se do průzkumníka). Save Uloží dokument.

17 3 FCKeditor 17 Source Zobrazí zdrojový kód stránky. Pokud jste znalí jazyka html, můžete rozpracovaný dokument doladit přímo. Undo Vrátí úpravu dokumentu o krok zpět. Redo Posune úpravu dokumentu o krok vpřed, pokud jsme předtím stiskli Undo. Find Zobrazí okno, kterým můžeme v dokumentu vyhledávat zadané slovní spojení. Replace Zobrazí okno, kterým můžeme zadané zlovo nahradit za jiné. Select All Označí veškerý obsah dokumentu. Remove Format Odstraní formátování označeného textu, změní ho na obyčejný neformátovaný text. Cut Vyjme označený text a uloží ho do schránky (viz 3.2.2). Copy Zkopíruje označený text do schránky (viz 3.2.2). Paste Vloží text ze schránky do dokumentu. Zachovává formátování vloženého textu (viz 3.2.2). Paste as plain text Vloží ze schránky prostý text, čili funkce ignoruje formátování vloženého textu (viz 3.2.2). Paste from Word Pokud jsme do schránky uložili formátovaný text z programu Microsoft Word, můžeme ho vložit do svého dokumentu pomocí této funkce a wordovské formátování tak zachovat (viz 3.2.2). Insert/Edit table Zobrazí okno pro vytvoření nové nebo přenastavení již vytvořené označené tabulky (viz v 3.2.3). Link Označený text změní na odkaz (viz v 3.2.4).

18 Střední lišta Insert/Edit link Zobrazí podrobnější nastavení odkazů (viz v 3.2.4). Insert/Edit anchor Vložení návěští do dokumentu (viz v 3.2.4). Remove link Zruší označený odkaz, změní ho na prostý text. Image gallery Vloží obrázek z galerie obrázků (viz 3.2.6). Download gallery Vloží do dokumentu odkaz na soubor z galerie ke stažení (viz 3.2.7). External links gallery Vložení externího odkazu do dokumentu z galerie těchto odkazů (viz 3.2.8). Html gallery (viz 3.2.9). Vloží do dokumentu html kód uložený v galerii html Table gallery Vloží do dokumentu tabulku uloženou v galerii tabulek (viz ). Insert/Edit Imag Vložení obrázku do dokumentu (viz v 3.2.5). Insert Horizontal Line Na místo kurzoru do dokumentu vloží vodorovnou oddělovací čáru. Insert Special Character Zobrazí tabulku speciálních znaků, které lze do dokumentu vložit. Universal Keyboard Pokud chcete část textu napsat v jiném jazyce, tímto tlačítkem si lze zobrazit univerzální klávesnici, kde si nastavíte její rozložení a můžete psát například arabskými vlnkami. Print Tisk dokumentu. Help Pokud si nevíte rady a ani tato příručka vám nepomohla, můžete tímto tlačítkem zobrazit nápovědu.

19 3 FCKeditor 19 Close Uzavření editoru bez uložení změn editor se pro jistotu ještě dotáže Problémy se schránkou Funkce Cut, Copy, Paste, Paste as plain text a Paste from word pracují přímo se schránkou operačního systému. Právě zde ale vzniká drobné bezpečností riziko, kterému některé internetové prohlížeče 2 předcházejí tím, že práci se schránkou blokují. Tato komplikace se dá ale velmi jednoduše obejít. Místo tlačítka Cut stiknete klávesy CTRL+X, namísto Copy CTRL+C a místo Paste CTRL+V. Dvě zbývající funkce zobrazí okénko, do kterého musíte text vložit opět pomocí CTRL+V a teprve po stisknutí tlačítka OK se text vloží do samotného dokumentu. Tyto klávesové zkratky jsou naprosto standardní pro práci se schránkou a OpenCms vám je pokaždé napoví, když chcete se schránkou pracovat a prohlížeč vám brání Vložení tabulky V oknu s nastavením tabulky můžeme specifikovat několik parametrů. Nejdůležitějšími je určitě počet řádků (Rows) a sloupců (Columns). Parametr Border označuje čířku rámečku v pixelech, údaj summary by měl poskytovat popis struktury a záměr tabulky, s touto informací pracují především nevizuální prohlížeče Vkládání odkazů a návěští První způsob jak vložit odkaz je klepnout na tlačítko Link, po té vepsat nebo nalistovat adresu odkazu (Link URL), zvolit, jak bude cíl (target) otevřen (viz tabulka 3.1), popř. napsat titulek (title). Než si popíšeme druhý složitější způsob, musíme si říci, co je to návěští, jak, kam a proč ho vkládat. Pokud jste na nějaké webové stránce klepnuli na odkaz a ona se vám nezobrazila nová stránka, pouze se ta současná posunula na určité místo, klepnuli jste na odkaz na návěští. Jak to udělat? Nejprve vybereme oblast stránky, kam má být odkaz namířen. Návěští vložíme klepnutím na tlačítko Insert/Edit Anchor 2 Např. FireFox 2.0 ke schránce nepustí, Internet Explorer 7 i s vysokým zabezpečením ano, Opera 9 měla problémy se samotným OpenCms.

20 Střední lišta a napíšeme jméno našeho nového návěští. V editoru se nám na tomto místě dokumentu objeví žlutý obrázek, který symbolizuje návěští, ale na samotné stránce vidět není. Druhý komplexnější způsob jak vložit odkaz je klepnout na tlačítko Insert/Edit Link. Zobrazí se okno s několika záložkami. Záložka Link Info Obsah této záložky se odvíjí od volby Link Type typ odkazu. Pokud je nastaven na URL, jedná se o odkaz na nějakou jinou adresu (většinou se jedná o jinou html stránku, ale může jít o libovolný soubor). Z rozbalovacího seznamu protocol vybereme vhodný protokol 3 a do pole URL vepíšeme nebo nalistujeme (Browse Server) samotnou adresu. Nastavíme-li typ odkazu na Link to anchor in the text, tak chceme vytvořit odkaz na návěští (Select an Anchor By Anchor Name) nebo na libovolný element (Select an Anchor By Element Id) současné stránky přes jeho Id (pokud je u nastaveno). Posledním typem je . Klepnutím na tento odkaz na stránce se spustí výchozí klient elektronické pošty 4. Lze specifikovat ovou adresu příjemce ( Address), předmět (Message Subject) a tělo zprávy (Message Body). Záložka Target Tato záložka je aktivní pouze tehdy, je-li typ odkazu nastaven na URL, čili odkaz směřuje na jinovou stránku, či jiný soubor a parametr target říká, jak se s cílem odkazu při otevření naloží (viz tabulka 3.1). Záložka Advanced Tato záložka schovává dosti pokročilé nastavení jako jsou např. volby přednastaveného stylu, nebo vlastního stylování. Bez této záložky se určitě obejdete. 3 Pro webové stránky se používá HTTP 4 Např. Outlook, Outlook Express, Thunderbird

21 3 FCKeditor 21 Volba Atribut Jak se cíl otevře Same Window self Otevření ve stejném okně New Window blank Otevření v novém okně Top Window top Otevření v okně v popředí Parent Window parent Otevření v rodičovském okně Named Window Otevření v pojmenovaném okně <popup Window> <frame> Otevření v rámci <not set> žádný Otevření ve stejném okně Tabulka 3.1: Otevření cíle odkazu Vložení obrázku V okně Image Properties je spousta parametrů rozčleněná do několika záložek. Záložka Image Info Nejdůležitější je parametr URL adresa k souboru s obrázkem lze ho nastavit ručně, nebo stisknout tlačítko Browse Server, které otevře dialog pro výběr souboru. Do pole Alternative text lze vypisat text, jež poslouží jako textová náhrada obrázku 5. Parametry width a height nastavují šířku a výšku obrázku, border šířku rámečku kolem obrázku, HSpace a VSpace velikost horizontální resp. vertikální mezery, align označuje, jak bude obrázek zarovnán k okolnímu textu (tabulka 3.2). V poli preview se po každé změně parametrů zobrazí náhled, jak bude obrázek ve stránce vypadat. Záložka Link Na této záložce můžete z obrázku vytvořit odkaz na zadanou adresu URL a nastavit, kde se cíl odkazu otevře (Target). 5 Některé prohlížeče (např. Links) nebo čtečky pro zrakově postižené pracují pouze s textem. Někteří uživatelé mohou zobrazování obrázků zakázat.

22 Střední lišta Align left right top texttop middle absmiddle baseline bottom absbottom Význam Obrázek je umístěn k levému okraji a obtékán zprava Obrázek je umístěn k pravému okraji a obtékán zleva Vršek obrázku je zarovnán s nejvyšším bodem libovolného objektu řádku Vršek obrázku je zarovnán s nejvyšším bodem textu (většinou je to totéž, co top) Střed obrázku je zarovnán s účařím písma řádku Střed obrázku je zarovnán se středem řádku Spodek obrázku je zarovnán na účaří Spodek obrázku je zarovnán na spodek písma Spodek obrázku bude zarovnán na nejnižší místo řádku Tabulka 3.2: Zarovnání obrázku

23 3 FCKeditor 23 Advanced Tato záložka opět schovává dosti pokročilé nastavení jako jsou již dříve zmíněná volba přednastaveného stylu, nebo vlastního stylování Galerie obrázků Galerie obrázků slouží jako přehledné úložiště, aby se obrázky neválely kdesi v souborovém systému vašeho webu, ale abyste si mohli zvolit, ze které galerie budete chtít obrázek vybrat popř. ho vyhledat pomocí (neúplného) názvu obrázku (Search). Do galerie lze obrázky také přidávat. Stačí klepnou na tlačítko Upload new file, vybrat soubor s obrázkem, potvrdit a počkat, až se obrázek nahraje na server, což může chvíli trvat záleží na velikosti souboru a rychlosti připojení. Pro nahrávání souboru musejí v prohlížeči fungovat Java applety. Když si z galerie vyberete obrázek klepnutím na jeho název, můžete změnit jeho titulek (Change Value to a Title), obrázek vymazat tlačítkem Delete resource, publikovat pomocí Publish resource (více viz 2.4.1), nebo vložit do dokumentu tlačítkem insert Galerie souborů ke stáhnutí V podstatě se jedná o totéž jako je galerie obrázků s jediným rozdílem. Namísto obrázků se zde nacházejí soubory libovolných formátů určené ke stažení. Do dokumentu se vkládá odkaz na soubor Galerie externích odkazů V této galerii se nacházejí externí odkazy odkazy jiné servery. Místo tlačítka Upload new file je zde tlačítko New, kterým lze otevřít průvodce a vytvořit nový externí odkaz. Když vytváříte nový odkaz, stačí zadat titulek a adresu, kam odkaz povede. Průvodce ještě nabídne v dalším kroku nastavit spoustu možností (viz 2.5.1), zde ale nejsou nikterak důležité 6. 6 Přesněji řečeno, to co jsem nastavil, nemělo na vizáž stránky vliv, ale stala se needitovatelnou :-(

24 Spodní lišta Galerie html Opět velmi podobné jako galerie obrázku nebo souborů ke stažení, avšak tato galerie pracuje pouze s textovými soubory, které obsahují kód html, takže jednoduchým způsobem můžeme do našho dokumentu vložit již hotovou část webové stránky Galerie tabulek Poslední galerie v sobě uchovává tabulky, přesněji řečeno data tabulek. Vypadá a funguje stejně jako galerie předešlé, nicméně přidání nové tabulky je trošku komplikovanější, protože pracuje s formátem CSV 7. Soubor v tomto formátu uchovává jednu jedinou tabulku, řádek v souboru odpovídá řádku tabulky, přičemž hodnoty/buňky jsou odděleny zvoleným znakem (většinou, nebo ;). Rozhodneme-li se přidat novou tabulku, klepneme na tlačítko Upload new file, zobrazí se formulář pro import dat tabulky. Zde buď nalistujeme soubor (File) s daty tabulky, nebo je můžeme vložit ze schránky do pole Data. Oba způsoby pracují ale pouze s daty ve formátu CSV. Zvolíme styl tabulky (XSLT file) a znak, který odděluje jednotlivé hodnoty/buňky tabulky (Delimiter). V dalším kroku ještě zbývá tabulku pojmenovat (Name). Pokud chcete můžete v posledním kroku změnit pár vlastností tabulky, ale není to nezbytné. 3.3 Spodní lišta Format Volba formátu odstavce (pozn. podobný stylům ve MS Wordu nebo Open Writeru). Font Volba fontu (přesněji rodiny písma) pro označený text. Size Volba relativní velikosti písma pro označený text. Bold Italic Volba polotučného řezu písma pro označený text. Volba kurzivního řezu písma pro označený text. [8] 7 Comma-separeted values dolsova přeloženo čárkou oddělené hodnoty. Více

25 3 FCKeditor 25 Underline Podtržení označeného text (podtržený text lze na webu snadno zaměnit za odkaz, proto raději nepoužívat). Strike Through Přeškrtnutí označeného textu. Subscript Označený text změní na dolní index. Superscript Left Justify Označený text změní na horní index. Zarovná text k levému okraji (na levý prapor). Center Justify Right Justify Block Justify Zarovná text na střed. Zarovná text k pravému okraji (na pravý prapor). Zarovná text do bloku. Insert/Remove Numbered List číslovaného seznamu. Insert/Remove Bulleted List seznamu s odrážkami. Označené řádky textu zarovná do Označené řádky textu zarovná do Decrease Indent Increase Indent Zmenší odsazení označeného textu. Zvětší odsazení označeného textu. Text Color Zvolí barvu textu. Protože nemusíte mít jistotu v jakém barevném duchu se nakonec stránka bude zobrazovat, pro zvýraznění nějakého slova bych raději volil změnu řezu na tučný nebo kurzívu. Pokud byste nějakou část textu zvolili například tmavě zelenou a web designér by nakonec zvolil např. světle zelenou barvu na pozadí, tak vaše snaha o zvýraznění slova bude přesně opačná (tmavě zelený text se ve světle zeleném pozadí utopí ). Background Color Zvolí barvu pozadí. Může nastat stejný problém jako při změně barvy textu.

26

27 Kapitola 4 Strukturovaný obsah Použití strukturovaného obsahu nejlépe ilustruje příklad v závěru knihy, ale co to vlastně je? Nejedná se v pravém smyslu o html stránku, ale pouze o XML soubor, ve kterém jsou uloženy všemožné údaje a teprve použítí v nějaké webové stránce se stylem nebo šablonou dá těmto datům formu plnohodnotné stránky. Jednoduchý příklad za vše. Mějme strukturovaný obsah typu článek, ten má nadpis, autora, krátké shrnutí a text. To je ale jediné co známe. Vytvoříme stránku podle šablony, která řekne nadpis bude velký 16 bodů, autor kurzívou, srhnutí tučně a text 1 zarovnaný do bloku. Dáme obsahu formu. Pro vás jako autora článků tak odpadá práce na designu stránky, vy akorát přípravíte text, který se má publikovat v té nejednodušší podobě, a zbytek už za vás udělá šablona, kterou navrhl zkušený webdesignér a ten si musí být vědom všech pravidel, jak má hezký a přehledný web vypadat. 4.1 Nejdůležitější struktury Vytvoření strukturovaného obsahu se nijak neliší od vytváření jiného souboru. Vyberete typ, napíšete jméno, nastavíte vlastnosti. Na změnu 1 Formát textu ale můžeme trochu ovlivnit. K čemu by byl článek, kde nemůžete tučně vyznačit důležité slovo.

28 Nejdůležitější struktury Obrázek 4.1: Strukturovaný obsah narazíte, jakmile chcete soubor editovat (Edit v místní nabídce). Nezobrazí se vám WYSIWYG editor z kapitoly 3, ale formulář se spoustou položek. Většinu si u těch nejdůležitějších struktur popíšeme. Také si všimněte, že vpravo od položek je ikona terčíku. Když na něj najedete myší, zobrazí se vám nabídka, kde můžete přidat novou položku (New), smazat nepotřebnou (Delete), nebo měnit jejich pořadí (Move Up a Move Down). Od položek vlevo se nachází ikona, která zobrazuje krátkou nápovědu tzv. tooltip Article Struktura pro velmi jednoduchý článek. Mně přišla osekaná až příliš, více se mi líbila struktura News article o té za chvíli. Title Titulek/nadpis článku. Teaser text Krátké shrnutí článku, většinou se zobrazuje pod nadpisem v seznamu dostupných článku. Jeden odstavec, kde musíte přesvědčit čtenáře, že váš článek je ten pravý.

29 4 Strukturovaný obsah 29 Article text Samotný obsah článku. Při vstupu do tohoto pole se nad ním zobrazí lišty podobné z editoru, abyste mohli v textu vyznačovat důležitá slova, vytvářet seznamy apod. Release date Datum, kdy byl nebo teprve bude článek vypuštěn na denní světlo. Author Každý správný autor by měl u svého díla uvézt jméno News article Tato struktura je už zajímavější. Jedná se o zprávu, staví na struktuře normálního článku uvedené výše, ale přidává k ní spoustu dalších položek. Uvedeme si pouze ty nové. Additional title Podtitulek zprávy. Author Aby vám čtenáři mohli napsat , co jste ve zprávě zkopal a kde všude máte hrubky. Priority Priorita zprávy, která se zohledňuje při řazení zprávy v seznamu. Důležitější zprávy jsou vždy nejvýšše - na prvních stránkách. Creation date Datum, kdy byla zpráva vytvořena. Expiration date Datum, kdy bude zpráva stažena ze stránek přestane být aktuální 2 Contact Kontaktní informace týkajících se zpraávy. Image Ke zprávě lze přiřadit i několik obrázků. Attachment Můžeme ke článku připojit i libovolný soubor jako přílohu. External link Odkaz na externí adresu vybereme odkaz z galerie, přidáme popisek. Internal link Interní odkaz nalistujeme na serveru, přidáme popisek. 2 Zpráva, že zítra bude benzín za polovic zítra, ztrácí smysl.

30 Nejdůležitější struktury FAQ article FAQ Freqently Asked Questions je obecně známá anglická zkratka, který označuje často kladené otázky. Pokud byste stejně jako ja od této struktury čekali, že bude jednoduše rozčleněna na dvě položky otázka a odpověď, tak vás zklamu. Je to složitější. Title Domnívám se, že jsem by měla přijít samotná otázka, i když název tomu neodpovídá. Descriptionparagraph Tělo odpovědi rozděleno do podstruktury, jež se celá může několikrát zopakovat. Subtitle Podtitulek odpovědi. Text Text odpovědi. Image Obrázek, který chceme k odpovědi připojit. External Link Externí odkaz Ostatní položky jsme si již popsali dříve a jejich význam se nemění Event Jedná se o strukturu pro libovolnou událost (koncert, ples), která je striktně časově vymezena. Short description Krátký popis události. Event dates Časové údaje, které by se mohli události týkat. Začátek, konec, kdy končí registrace apod. Extended Dodatečný popis, kdybychom chtěli být opravdu podrobní Photo Album Komplexní struktura, která v sobě uchovává nastavení galerie obrázků, jaké efekty použít při vytváření náhledů a při zobrazování fotek. Jak vytvořit galerii obrázků se naučite na příkladu v kapitole 5. Title Opět titulek stránky

31 4 Strukturovaný obsah 31 VFS gallery folder Do této položky nalistujeme cestu ke složce s galerií obrázků, které chceme v galerii zobrazit. Align photo navigation Kam zarovnat navigaci při průchodu přes jednotlivé fotografie. Navigation position Kam tuto navigaci umístit. Show resource name as title Zda zobrazit název fotky jako titulek. Podstruktura Overview Nastavení, jak zobrazovat stránku s náhledy. Show title Zda zobrazovat titulek. Align title Kam zarovnat titulek. Displayed columns V kolika sloupech budou náhled umístěny. Row per page A kolik řádků bude na jedné stránce. High quality thumbnails Zda mají být náhledy ve vysoké kvalitě. Thumbnails size Velikost náhledu. Filter effect Jaký se má použít efekt na náhled (Stín Shadow vypadá docela zajímavě) Background color Barva pozadí, na kterém se náhled nachází. Top text Text nad řádkou s náhledy. Bottom text Text pod řádkou s náhledy. Podstruktura Detail Nastavení, jak zobrazit samostatnou fotku. Show title Zda zobrazovat titulek. Show description Zda zobrazovat popisek. Align title, decription Kam zarovnat titulek a popisek. Show link to original Zda zobrazovat odkaz na originál. Size Velikost, na kterou se všechny fotky změní. Filter effect Jaký se má použít efekt na fotku. Background color Barva pozadí, na kterém se fotka nachází.

32

33 Kapitola 5 Jednoduchý web Do této chvíle jsme si pouze popisovali rozhraní a funkce OpenCms, bez hlubšího zkoumání jejich smyslu. Nyní bychom si měli ukázat, jak krok za krokem vytvořit jednoduchý web a naučit se nejdůležitější funkce používat. 5.1 Přihlášení a příprava Abychom vůbec mohli web upravovat nebo ho vytvářet, musíme se do OpenCms přihlásit. Adresu, kde tak učinit, přihlašovací jméno i heslo by vám měl sdělit váš administrátor 1 Po přihlášení se většinou nacházíte v průzkumníku souborového systému (obrázek 2.1). Pokud tomu tak není, musíte přepnout pole View na Explorer, v poli Site nastavte /site/default/ a v poli se současnou pozicí Location nechť je pouze /. Protože nemůžeme měnit údaje viditelné na webových stránkách přímo, aby návštěvníka nemátlo, že se mu stránka mění pod rukama, poslední věc, kterou jejíž nastavení si musíme pohlídat je, abychom se nacházeli v offline projektu, čili nastavit Project na Offline. 1 Pokud si OpenCms nainstaluje na svém vlastním počítači, tato adresa bude nejpravděpodobněji

34 Nový web 5.2 Založení nového webu Nyní už můžeme přikročit k samotnému vytvoření nového (pod)webu. Klepneme na tlačítko New, v následujícím seznamu vybereme Extended folder, což je složka s dalšími vymoženostmi. Tlačítkem Continue pokračovat se se nám zobrazí, jakou přesně vychytanější složku si přejeme. Zvolíme Microsite a opět Continue. V posledním povinném oknu napíšeme jméno naší složky a zaškrtnout, zda chceme upřesnit vlastnosti (viz 2.5.1) nového souboru nebo složky. Protože jméno složky bude nejspíše i URL adresa k našim stránkám, volíme raději název bez akcentovaných písmen. Já volil jméno mujweb a políčko jsem zaškrtl. Potvrzením se dostaneme na změnu základních vlastností složky. Vyplníme pouze popisek Title našeho webu, např. Můj nový web. Přidavání do navigace si ukážeme později, takže pouze stisknout tlačítko Finish. V seznamu je už vidět naše složka mujweb, a protože se jedná o Microsite, má červenou ikonku. 5.3 Úvodní stránka s články Představme si, že jsme zapálení do muziky, navštěvujeme často koncery, tu a tam chceme o nějakém napsat recenzi (v podstatě jakýkoliv libovolný článek article), chceme taktéž upozornit na blížící se akce nebo události (event) a nesmí chybět ani galerie fotek a spousta odkazů na kapely a možná bychom měli přidat i nějaké informace o sobě. Na osobní web je to už docela pěkná řada problémů, které budeme muset vyřešit. Klepněme na složku s naším webem mujweb, zde by se měli nacházet dvě další configuration, do které se ukládá nastavení šablony našich stránek, a modules, kde se nachází další střípky našeho webu jako jsou právě články, události, odkazy atd. jakožto strukturovaný obsah (viz 4). Vedle těchto dvou složek si vytvoříme naši úvodní stránku. Klepneme na New, vybereme Page with free text, jméno stránky Name zvolíme index 2. V poli Template vybereme šablonu. Počet i názvy šablon se můžou lišit, někde jich může být spousta, někde může být pouze jedna, záleží kolik jich administrátoři do OpenCms nainstalovali. V základní instalaci by se měla nacházet -OpenCms Template one, kterou zvolíme. Pole Copy 2 Takto se vždy označuje hlavní stránka na určité URL adrese

35 5 Jednoduchý web 35 Obrázek 5.1: Náhled úvodní stránky body form říká na kolik částí/elementů (počet sloupců a řádek) celou stránku rozdělíme, pro začátek pouze jedna ku jedné 1 column, 1 row a pokračujeme. Ve formuláři vlastností vyplníme titulek Title na Můj Web, do popisku Description napíšeme libovolné informace o našem novém webu, zaškrtneme Add to Navigation, do Navigation text vyplníme Můj Web, zaškrtneme Show in Head Navigation. Protože chceme, aby návštevník hned na první stránce uviděl nejnovější recenze a mohl si tak přečíst nové přírustky, pole Center Layout změníme na List of news article. Abychom návštěvníkovi ještě zobrazili nejbližší události (např. koncerty v okolí), změníme Right Layout na List of 5 latest events. Do pole Configuration path for template nalistujeme klepnutím na ikonu složky vpravo cestu na konfigurační složku configuration, čili by pole mělo pravděpodobně obsahovat cestu /mujweb/ configuration/. Zbytek vlastností necháme prázdný, nebo přepnutý na Default výchozí nastavení. Tlačítkem Finish vytvoříme požadovanou úvodní stránku a ukončíme průvodce. Nyní stačí klepnout levým tlačítkem myši na název našeho nového souboru index.html a měl by se nám zobrazit náhled v novém okně prohlížeče (obrázek 5.1). Ovládání náhledu Náhled má jednu úžasnou výhodu, nemusíme složitě vyrvářet strukturovaný obsah, čili jednotlivé články atd. v souborovém systému, ale můžeme využít přímé editování stránky přes ikonu u jednotlivých částí. Napíšeme tedy krátké uvítání, klepněme na nejvyšší osamocenou ikonu terčíku (Direct Edit). Do otevřeného editoru napíšeme jakoukoliv uvítací