1
MANUÁL K POUŽITÍ WEBOVÉ APLIKACE
Obsah
1. Registrace uživatele ... 2
2. Přihlášení uživatele ... 3
3. Změna uživatelského hesla... 3
4. Uživatelské prostředí pro tvorbu webové stránky ... 4
4.1. Postranní panel ... 5
4.2. Formátovací editory ... 8
4.2.1. Popis funkcí ovládacích prvků v prvním řádku ... 8
4.2.2. Popis funkcí ovládacích prvků ve druhém řádku ... 11
4.2.3. Popis funkcí ovládacích prvků ve třetím řádku ... 13
2
1. Registrace uživatele
Registrační formulář pro získání informací k vytvoření uživatelského účtu se nachází na stránce „Reg.aspx“. Pro registraci je nutné vyplnit všechny položky. Název stránky smí obsahovat pouze alfanumerické znaky, znak „pomlčka“ a znak „podtržítko“. Heslo se musí skládat s minimálně osmi znaků, musí obsahovat velká a malá písmena, číslo a minimálně jeden speciální znak. Políčko pro potvrzení hesla musí obsahovat stejné znaky jako políčko pro heslo. Políčko s popisem E-mail musí obsahovat korektní emailovou adresu. Bezpečnostní otázka a odpověď musí obsahovat minimálně jeden znak.
Obrázek 1: Registrační formulář
Po korektním zadání všech uživatelských informací je zobrazena zpráva o vytvoření uživatelským účtu. V opačném případě jsou vypsána chybová upozornění týkající se políček, v nichž nejsou informace korektní.
Obrázek 2: Informace o úspěšném vytvoření účtu
Po potvrzení zprávy o úspěšném vytvoření uživatelského účtu a kliknutím na tlačítko pokračovat je již zobrazeno uživatelské prostředí, které je na obrázku 5.
3
2. Přihlášení uživatele
Přihlašovací formulář se nachází na stránce „WebEditor.aspx“. Obsahuje dva vstupy potřebné pro ověření uživatele pomocí informací zadaných při registraci. Prvním vstupem je emailová adresa, u níž jsou zobrazeny zadávané znaky, a druhým vstupem je heslo, jehož znaky jsou z důvodu bezpečnosti skryty. Po korektním zadání ověřovacích informací a úspěšném ověření existence registrovaného uživatelského účtu je možné se přihlásit kliknutím na příslušné tlačítko, či stisknutím klávesy ENTER. Při neúspěchu je červeně vypsána zpráva a je nutné vstupy opravit. Dále je zde odkaz pro přesměrování na registrační stránku, která byla popsána na předchozí straně.
Obrázek 3: Přihlašovací formulář
3. Změna uživatelského hesla
Po úspěšné registraci, či po úspěšném přihlášení uživatele je zobrazeno uživatelské prostředí obsahující mnoho ovládacích prvků pro tvorbu webové stránky. V horní části se nachází odkaz pro změnu hesla. Při kliknutí na tento odkaz dojde k přesměrování na stránku „Pass.aspx“, která obsahuje formulář pro změnu uživatelského hesla. (Obrázek 4) Do tohoto formuláře je nutné zadat aktuální heslo zadané při přihlášení a do dvou dalších vstupů zadat heslo nové.
Vstupy jsou kontrolovány stejnými pravidly jako při registraci u této položky.
Obrázek 4: Formulář pro změnu hesla
4
4. Uživatelské prostředí pro tvorbu webové stránky
V horní části se nachází, mimo již popsaný odkaz pro změnu hesla, odkaz pro odstranění účtu a odhlášení uživatele. Při kliknutí na odkaz pro odstranění účtu je zobrazen dialog, v němž je nutné tuto operaci ještě jednou potvrdit. Po potvrzení tohoto dialogu je kompletně odstraněn uživatelský účet se všemi jeho daty. Aktivace odkazu pro odhlášení způsobí skrytí ovládacích prvků pro tvorbu stránky a zobrazení přihlašovacího formuláře.
Obrázek 5: Vzhled uživatelského prostředí
Mimo již uvedených odkazů pro jednoduchou správu uživatelského účtu se zde nachází formátovací editory pro úpravu jednotlivých částí stránky, kterými jsou záhlaví, menu, tělo a zápatí. Tělo stránky je standardně určeno pro to, aby jeho obsah byl měněn pomocí odkazů v části menu.
Dále je zde levý postranní panel, který slouží k nahrávání souborů na server, přidávání, či odstraňování podstránek, jejichž obsah je upravován v editoru pro tělo stránky, a k nastavení dalších parametrů stránky, které není možné pomocí jednotlivých editorů realizovat.
Ve spodní části je potom prostor pro zprávy o uživatelských akcích.
5
4.1. Postranní panel
V horní části tohoto panelu se nachází oblast s nadpisem „K tělu zahrnout“. Obsahuje zaškrtávací políčka pro nastavení definice jednotlivých částí stránky. První zaškrtávací políčko slouží pro vytvoření či zrušení definice záhlaví stránky. Při jeho odškrtnutí zmizí formátovací editor pro úpravu zápatí stránky a tato část také zmizí i ve vygenerované veřejné stránce uživatele. Obsah tohoto editoru však odstraněn není. Při jeho zaškrtnutí je pak editor pro úpravu této části znovu zobrazen a je tedy načten i před tím definovaný obsah.
Obrázek 6: Definice částí výstupní stránky
Dalšími zaškrtávacími políčky se stejnou funkcí jsou položky „Menu“ a „Zápatí“.
Položka „Menu“ krom výše popsaného chování navíc ještě obsahuje dva přepínače s názvy
„MenuSkin1“ a „MenuSkin2“, určené pro vhled příslušného editoru. Smysl přepínačů pro vzhled spočívá v tom, že se editor pro menu stránky při přepnutí na druhý vzhled zúží a funkční tlačítka jsou seřazena do čtyř řádků. Užší vzhled menu je vhodné použít při nízkém rozlišení obrazovky.
Při odškrtnutí políčka „Menu“ tyto přepínače logicky zmizí.
Další oblastí postranního panelu jsou ovládací prvky sloužící pro nastavení velikosti stránky, či jejich jednotlivých částí, jejich orámování či umístění celé stránky v okně prohlížeče.
Obrázek 7: Nastavení parametrů výstupní stránky
Jak je vidět na obrázku 7, pod jednotlivými vstupními políčky jsou tlačítka, jejichž popis napovídá, jaký parametr nadřazené políčko definuje. Kliknutím na jednotlivá tlačítka jsou tedy uloženy příslušné parametry stránky. Pro jednotlivá políčka jsou povoleny pouze číselné
6
hodnoty případně zakončené znakem „%“, kterým je definována velikost vzhledem k oknu prohlížeče u parametru pro celkovou šířku a výšku stránky a u ostatních parametrů podíl velikosti nadřazeného prvku.
Dále tato oblast obsahuje dvě zaškrtávací políčka, z nichž první určuje, zda má být výstupní stránka zarovnána na střed, či nikoliv. Pokud je políčko odškrtnuté, standardně prohlížeč zarovná obsah vlevo. Druhé políčko definuje orámování stránky, což je užitečné pro lepší orientaci v jednotlivých částech stránky a také samozřejmě pro hodící se dekoraci vzhledem k vytvořenému obsahu.
Předposlední oblast postranního menu (Obrázek 8), která začíná nadpisem „Obrázek na pozadí“ obsahuje čtyři přepínače pro nahrání a zároveň automatickou definici obrázku na pozadí s uživatelem zvolenými parametry, a dále jeden přepínač sloužící pro nahrávání libovolných souborů určených pro vkládání objektů do jednotlivých částí stránky.
Obrázek 8: Nastavení obrázku na pozadí a nahrávání médií
Jak opět popis přepínačů napovídá, při kliknutí na některou volbu bude otevřeno nové okno prohlížeče pro nahrání obrázku na pozadí příslušné části stránky, kde je možné nastavit styl opakování tohoto obrázku, či tento obrázek z dané části odstranit, jak je vidět zde:
Obrázek 9: Okno pro nahrávání obrázku na pozadí
Při kliknutí na tlačítko s popisem „Vybrat soubor“ je otevřen známý dialog z běžné práce v systému pro výběr souboru, po jehož zvolení je vypsán do okna prohlížeče jeho název a
7
po kliknutí na tlačítko s popisem „Nahrát“ je zobrazen dialog s informacemi o tomto obrázku a jeho zvoleném stylu. Po potvrzení tohoto dialogu je automaticky vygenerován potřebný html kód pro realizaci této definice a okno pro nahrání médií je automaticky zavřeno.
Po kliknutí na poslední přepínač je pak zobrazeno okno s podobným ovládáním, které slouží k nahrání libovolných souborů obrázků či médií, které jsou určeny pro vložení do jednotlivých částí stránky. Obsahuje seznam s názvy nahraných souborů, pomocí něhož je možné zvolit, který soubor má být případně odstraněn příslušným tlačítkem. Toto okno je vidět zde:
Obrázek 10: Nahrávání libovolných souborů na server
Poslední oblast postranního panelu slouží k přidávání a odstraňování podstránek (Obrázek 11). Je zde políčko pro text, které slouží pro název nové podstránky, která je vytvořena po kliknutí na tlačítko s popisem „Přidat podstránku“. Název podstránky může obsahovat pouze písmena bez diakritiky, čísla, pomlčku a podtržítko.
Jak je vidět na obrázku číslo 11, je ještě ve spodní části postranního panelu odkaz na vygenerovanou stránku, aby bylo možné průběžně nahlížet, jak výstupní stránka vypadá. Po jeho aktivaci kliknutím je tvořená stránka zobrazena v nové záložce.
Obrázek 11: Přidávání a odstraňování podstránek
8
4.2. Formátovací editory
Jsou to editory, které provádí pomocí příslušných tlačítek formátování textu a podle těchto úprav generují zdrojový kód stránky. Jeho vzhled a funkčnost je přizpůsobena tak, aby byl podobný nejznámější a nejrozšířenější kancelářské aplikaci „Microsoft Office Word“ a tím bylo jeho použití intuitivnější. Zde je již náhled editoru pro část „tělo stránky“:
Obrázek 12: Vzhled formátovacího editoru
Všechny editory obsahují stejné množství ovládacích prvků lišící se pouze v jejich rozmístění, kromě editoru pro menu stránky, který je optimalizován pro odkazy a také pro to, aby zabíral malý prostor stránky. Neobsahuje tedy některé ovládací prvky, například pro vkládání obrázků, médií, tabulek a některé další. V následujících seznamech je popis funkcí jednotlivých ovládacích prvků očíslovaných podle pořadí v jednotlivých řádcích. Například tlačítko pro vložení data se nachází ve třetím řádku a je na tomto řádku první v pořadí. Bude tedy ve třetím seznamu za číslem jedna. Toto uspořádání se týká editoru zobrazeném na obrázku číslo 12.
4.2.1. Popis funkcí ovládacích prvků v prvním řádku
1. Odstranění veškerého obsahu editoru 2. Uložení obsahu editoru
3. Vrácení provedených akcí 4. Znovu provedení vrácené akce
5. Obnovení automaticky uloženého obsahu 6. Seznam pro volbu vzhledu písma
7. Seznam pro volbu velikosti písma 8. Nastavení tučného písma
9. Nastavení kurzívy
9 10. Nastavení podtrženého písma
11. Nastavení přeškrtnutého písma 12. Nastavení barvy pozadí textu 13. Nastavení barvy textu
14. Definice odkazu 15. Zrušení odkazu
16. Odstranění formátování
Při kliknutí na nastavení barvy pozadí textu či barvy samotného textu je zobrazen okno (Obrázku 13), kde je možné zvolit tuto barvu. Po kliknutí na popis „Další barvy“ je zobrazeno okno pro podrobnou definici barvy (Obrázek 14). Pomocí jednotlivých karet v tomto okně je možné zvolit barvu pomocí nástroje „kapátko“, vybrat z palety barev, zobrazit název základních barev či přímo zadat její hodnotu.
Obrázek 13: Výběr barev
Obrázek 14: Podrobná definice barvy
10
Při kliknutí na tlačítko pro definici odkazu je pak otevřeno okno na obrázku číslo 15.
V tomto okně na kartě s popisem „Obecné“ je možné definovat odkaz na libovolný zdroj dat do políčka s popisem „URL odkazu“.
Obrázek 15: Definice odkazu1
V editoru pro menu stránky je možné zadat čistý název podstránky vytvořené prostřednictvím příslušného ovládacího prvku postranního panelu. Editor menu má nastaven jako pracovní adresář ten, ve kterém se nacházejí podstránky. Aby byl pomocí odkazů z menu měněn obsah těla stránky, tedy aby podstránky byly skutečně podstránkami, je nutné ještě na kartě rozšířené (Obrázek 16) přidat do políčka s popisem „Název cíle“ hodnotu „ifrm“, což je vnitřní název pro část definující tělo stránky.
Obrázek 16: Definice odkazu 2
11
4.2.2. Popis funkcí ovládacích prvků ve druhém řádku
1. Vložení nedělitelné mezery 2. Vložení speciálního znaku 3. Vložení tzv. emotikon 4. Vložení či úprava obrázku 5. Vložení či úprava médií
6. Seznam pro volbu formátu textu 7. Zarovnání vybraného obsahu doleva 8. Zarovnání vybraného obsahu na střed 9. Zarovnání vybraného obsahu doprava 10. Zarovnání vybraného obsahu do bloku 11. Zmenšení odsazení
12. Zvětšení odsazení 13. Definice dolního indexu 14. Definice horního indexu 15. Seznam s odrážkami 16. Číslovaný seznam
17. Úprava atributů odstavce 18. Úprava CSS stylu
19. Úprava zdrojového kódu HTML
Obrázek 17: Výběr speciálních znaků
12
Po kliknutí na tlačítko pro vložení speciálního znaku je zobrazeno okno (Obrázek 17), kde je možné jej zvolit a zobrazit definici v html kódu a jeho numerický kód. Po kliknutí na tlačítko pro vložení tzv. emotikon je zobrazeno okno na následujícím obrázku. Emotikony jsou malé obrázky vyjadřující určité emoce napodobeninou lidské tváře.
Obrázek 18: Výběr emotikon
Na následujícím obrázku je okno pro vložení či úpravu obrázku v části stránky, kterou obhospodařuje příslušný editor. Editory pro záhlaví, tělo a zápatí stránky mají nastaven jako pracovní adresář ten, ve kterém se nachází soubory nahrané na server pomocí ovládacího prvku s popisem „Obrázky /média“. Díky tomuto je možné zadat do políčka s popisem „URL obrázku“
čistý název nahraného souboru, podobně jako při definici odkazu v editoru pro menu stránky. Na dalších kartách tohoto okna jsou další nastavení parametrů obrázku.
Obrázek 19: Vložení a úprava obrázku
13
Obrázek 20: Vložení a úprava médií
Podobně je možné při kliknutí na příslušné tlačítko nastavit vložení média pomocí okna zobrazeného na obrázku 20. Místo políčka s popisem „URL obrázku“, jak bylo uvedeno na předešlém příkladě, je zde políčko s popisem „Soubor / URL“, který má stejnou funkci.
4.2.3. Popis funkcí ovládacích prvků ve třetím řádku
1. Vložení data 2. Vložení času
3. Vložení vodorovného oddělovače
4. Zobrazení pomocných linek a skrytých prvků 5. Vložení či úprava tabulky
6. Úprava vlastností řádku 7. Úprava vlastností buňky
8. Vložení řádku před označený řádek 9. Vložení řádku za označený řádek 10. Odstranění řádku
11. Vložení sloupce před označený sloupec 12. Vložení sloupce za označený sloupec 13. Rozdělení buňky
14. Sloučení buněk 15. Definice citace 16. Definice akronymu 17. Definice zkratky
14 18. Zobrazení náhledu před tiskem
19. Nastavení vlastností tisku a samotný tisk 20. Vyhledání a nahrazení textu
21. Přepnutí editoru pro zobrazení na celé obrazovce
Na následujícím obrázku je okno pro definici a vložení tabulky. Na kartě „Rozšířené“
je potom dodatečné nastavení například pro definici obrázku na pozadí, barvy orámování a podobně. Na posledním obrázku je pak okno pro vyhledání nějakého textu a jeho nahrazení.
Obrázek 21: Vložení a úprava tabulky
Obrázek 22: Vyhledávání a nahrazení textu
Tímto končí popis použití této aplikace pro běžného uživatele. Dále jsou zde nastavení pro pokročilé uživatele, kam spadá úprava atributů odstavce, podrobná definice css stylu, a editor kódu html, jejichž podrobný popis zde nebude. Pokročilí uživatelé jistě budou schopni využít bohaté možnosti tohoto editoru.
15
Seznam obrázků
1. Registrační formulář ….………... 2
2. Informace o úspěšném vytvoření účtu ………..……… 2
3. Přihlašovací formulář …….……….………. 3
4. Formulář pro změnu hesla ……….………. 3
5. Vzhled uživatelského prostředí ………. 4
6. Definice částí výstupní stránky ………..….. 5
7. Nastavení parametrů výstupní stránky ………... 5
8. Nastavení obrázku na pozadí a nahrávání médií ………..…. 6
9. Okno pro nahrávání obrázku na pozadí ……….…. 6
10. Nahrávání libovolných souborů na server ………... 7
11. Přidávání a odstraňování podstránek ……….. 7
12. Vzhled formátovacího editoru ……….. 8
13. Výběr barev ……….. 9
14. Podrobná definice barvy ……….. 9
15. Definice odkazu 1 ………. 10
16. Definice odkazu 2 ………. 10
17. Výběr speciálních znaků ………...11
18. Výběr emotikon ………... 12
19. Vložení a úprava obrázku ……… 12
20. Vložení a úprava médií ……….... 13
21. Vložení a úprava tabulky ………. 14
22. Vyhledávání a nahrazení textu ………. 14
