Manuál pro interní potřebu Základní školy Uhlířské Janovice

ZÁKLADNÍ ŠKOLA UHLÍŘSKÉ JANOVICE

Manuál pro interní potřebu Základní školy Uhlířské Janovice Hana Blažková

Uhlířské Janovice 2007

Základní škola Uhlířské Janovice

Publikování na školním webu Úvod Začátkem roku 2007 zprovoznila naše škola nové webové stránky. Základem tohoto webu je redakční systém phpRS. Jedná se o obecnou veřejnou licenci GNU, proto jsme mohli jej přizpůsobit našim podmínkám a požadavkům. Systém nabízí poměrně jednoduchý způsob publikování aktuálních informací včetně obrázků i méně zkušeným uživatelům počítače. Vstupuje se do něho přes webové rozhraní. Forma takto vytvořených webových stránek je omezená (jednotný vzhled), uživatel se může zaměřit především na jejich obsah. Systém zároveň umožňuje začlenit konkrétního uživatele do jedné ze skupin (admin, redaktor nebo autor) a tím mu umožnit přístup k některým modulům. Poté je možno tomuto uživateli ještě povolit nebo zakázat jednotlivé úkony v přístupných modulech. Naším záměrem dát všem učitelům (případně i žákům) možnost prezentovat svou práci na webu školy. Někteří již absolvovali kurz, kde si mohli publikování v redakčním systému vyzkoušet. Tento manuál byl vytvořen jako podpora tohoto kurzu. Je určen uživatelům, kteří zvládli základy práce s počítačem (orientují se v prostředí operačního systému a ve struktuře souborů a složek, pracují s více aplikacemi současně, ovládají některý webový prohlížeč a jednoduchý textový editor, používají schránku). Copyright © Mgr. Hana Blažková Copyright © ZŠ Uhlířské Janovice

Úvod


Publikování na školním webu Obsah 1 2 3 4

Přihlášení .................................................................................................... 4 Úvodní obrazovka ....................................................................................... 5 Formulář pro vložení článku........................................................................ 6 Popis jednotlivých polí formuláře ................................................................ 7 Nastavení filtrů ........................................................................................................ 7 Volací link článku .................................................................................................... 9 Titulek článku .......................................................................................................... 9 Úvod........................................................................................................................ 9 Hlavní text ............................................................................................................. 10 PhpRS značky ...................................................................................................... 10 Téma..................................................................................................................... 10 Typ článku............................................................................................................. 10 Šablona................................................................................................................. 10 Zdroj článku .......................................................................................................... 10 Datum vydání........................................................................................................ 10 Datum stažení....................................................................................................... 10 Autor ..................................................................................................................... 10 Slovní spojení odpovídající danému článku .......................................................... 11 Priorita článku ....................................................................................................... 11 Hodnocení článku ................................................................................................. 11 Související anketa................................................................................................. 11 Související články ................................................................................................. 11 Uložení článku ...................................................................................................... 11

5

Seznam doporučných tagů ....................................................................... 12 Nadpisy ................................................................................................................. 12 Odstavce............................................................................................................... 13 Písmo.................................................................................................................... 15 Odkazy.................................................................................................................. 15 Seznamy ............................................................................................................... 16 Tabulky ................................................................................................................. 17

6

Vložení obrázku ........................................................................................ 22 Příkaz pro vložení obrázku.................................................................................... 22 Umístění obrázku v odstavci ................................................................................. 22 Umístění náhledů do tabulky................................................................................. 25

7

Galerie obrázků......................................................................................... 27 Vstup do galerie .................................................................................................... 27 Přidání galerie....................................................................................................... 28 Přidání obrázku..................................................................................................... 29

8 Postup při vkládání článku ........................................................................ 30 9 Kontrolní otázky ........................................................................................ 32 Prostor pro poznámky...................................................................................... 33 Použité zdroje .................................................................................................. 34 Odkazy.................................................................................................................. 34 Literatura............................................................................................................... 34

Obsah


Publikování na školním webu 1 Přihlášení Ve webovém prohlížeči zadejte adresu: http://www.zsuj.cz/admin.html. V okně prohlížeče se objeví následující stránka:

Zadejte uživatele a heslo. Pokud vám přihlašovací login nebyl dosud přidělen, můžete ke cvičným účelům použít uživatele tester a o heslo k tomuto účtu nebo nový účet si vyžádat u administrátora.

Přihlášení

4


Publikování na školním webu 2 Úvodní obrazovka Po úspěšném přihlášení uvidíte v modrém poli jednoduchou nabídku:

Přihlášený uživatel je oprávněn: vkládat do systému nové články, případně tyto články editovat (Editace článků), využívat obrázky z interní galerie, případně si vytvořit svou galerii obrázků a načíst do ní vlastní obrázky (Galerie obrázků). Není však oprávněn články vydávat. Vydání povoluje nadřízený redaktor nebo admin. Ti mohou také vložený článek editovat, případně i vymazat ze systému. Poslední položka nabídky (Logout) slouží k odhlášení ze systému. Po odhlášení se může znovu přihlásit kterýkoli uživatel (viz obrázek):

Úvodní obrazovka

5


Publikování na školním webu 3 Formulář pro vložení článku Zvolte položku Editace článků. V okně webového prohlížeče se objeví formulář, do jehož polí budete vkládat všechny potřebné údaje pro publikování článku.

Formulář pro vložení článku

6


Publikování na školním webu 4 Popis jednotlivých polí formuláře Položka Správa anket, kterou vidíte pod textem „Vložení nového článku“ není přihlášenému uživateli přístupná.

Nastavení filtrů Kliknutím na tlačítko Zobrazit články si můžete zobrazit seznam již publikovaných článků. Jejich počet je uveden na konci prvního řádku tohoto pole. Zároveň máte možnost si do seznamu vyfiltrovat pouze některé z nich podle uvedených kritérií a nastavit způsob jejich řazení v seznamu.

V intervalu od do navolíte filtr pro počet článků, které se zobrazí v seznamu: o o

nastavení od 0 do 25 (respektive od 1 do 25) vypíše 25 naposledy vložených článků (bez ohledu na to, zda byly vydány) nastavení od 2 do 2 vypíše předposlední článek atd.

V položce třídit dle vyberete kliknutím na šipku jedno ze 4 kritérií (datum vydání, název článku, autor, link) pro řazení seznamu, řazení bude sestupné. Další filtr můžete nastavit v poli vyhledat text tak, zadáte hledaný textový řetězec a pomocí šipky opět vyberete, kde se má řetězec vyskytovat (v názvu článku, anotaci, hlavním textu, linku). Pokud nebude nalezen, bude seznam prázdný. V položce omezit na téma můžete vybrat společné téma článků, které chcete v seznamu vypsat. V případě, že zatrhnete Zobrazit pouze mé články, vypíší se pouze ty, které jste do systému vložili. Tyto články máte právo nejen prohlížet, ale také dodatečně editovat nebo dokonce smazat. Pokud navolíte více kritérií současně, může se stát, že seznam bude prázdný. Filtrování si vyzkoušejte. Cvičení: a. Změňte nastavení filtru tak, aby se Vám zobrazily všechny články, které v názvu článku obsahují slovo jídelníček. b. Zobrazte všechny články, které v hlavním textu obsahují řetězec rybí filé. Výsledné seznamy porovnejte☺.

Popis jednotlivých polí formuláře

7


Publikování na školním webu Výsledek: a.

b.

Můžete si všimnout, že v posledních dvou sloupcích výpisu je seznam akcí, které jste oprávněni s článkem provádět. Vždy je přístupný odkaz Preview (náhled). Článek se vám zobrazí v novém okně tak, jak by vypadal na webu. Okno zavřete křížkem a vrátíte se zpět do seznamu. Pokud bude ve filtrovaném seznamu některý z článků váš vlastní, bude seznam přístupných akcí rozšířen o možnost Edituj. Tento odkaz vám umožní návrat do formuláře pro editaci článku. V posledním sloupci je možno vybrat ty vaše články, které chcete smazat. Jejich odstranění provedete kliknutím na tlačítko Vymaž všechny označené články.


8


Publikování na školním webu Volací link článku Toto pole nevyplňujte. Automaticky se v něm generuje číslo článku, které obsahuje informaci o roce a měsíci jeho vytvoření a o pořadovém čísle. Pokud bude článek z databáze vymazán, jeho toto číslo bude v databázi vynecháno.

Titulek článku Toto pole je nutno vyplnit. Uvedete název článku s velkým počátečním písmenem a bez tečky na konci.

Úvod Rozmyslete si, zda píšete článek krátký nebo dlouhý. Pokud bude krátký, napíšete jej celý do tohoto pole. Prakticky to znamená, že je z webu uvidět rovnou (titulek i celý článek). Pokud vytvoříte článek delší, napište k němu do tohoto pole jen krátkou anotaci. Čtenář na webu uvidí nejprve titulek s anotací (a.). Titulek bude fungovat jako odkaz, kliknutím na něj se článek „rozbalí“ (b.). Ukázka:

a.

b.


9


Publikování na školním webu Hlavní text Do tohoto pole napíšete celý text. Pokud potřebujete, aby se článek na webu zobrazil členěný do odstavců, obsahoval seznamy (číslované nebo nečíslované) a případně tabulky, je nutno jej formátovat pomocí html tagů. Nevystačíte tedy s formátováním, které znáte z textového editoru. Poznámka: Seznam html tagů, které je doporučeno v polích Úvod a Hlavní text používat, naleznete v další kapitole. Naučíte se tam také tyto tagy do textu správně vkládat.

PhpRS značky Ponecháte Ne. Pokud váš článek bude obsahovat obrázky, vyberte Ano. Poznámka: Obrázky se vkládají pomocí vnitřního příkazu phpRS systému. Příkaz se podobá tagu a vkládá se také do textu čláku. Budete s ním seznámeni dále.

Téma Pomocí šipky vybíráte rubriku, do které chcete svůj článek zařadit. Jsou řazeny abecedně a mají dvě úrovně.

Typ článku Pokud bude váš článek krátký (text pouze v poli Úvod, okno Hlavní text prázdné), změníte volbu.

Šablona Pole přeskočte, není povolena žádná alternativa.

Zdroj článku Můžete uvést zdroj, odkud jste článek převzali (informace o autorských právech týkajících se vkládaného článku). Pokud toto pole nevyplníte, znamená to, že majitelem autorských práv k tomuto článku je provozovatel webového serveru (v tomto případě škola).

Datum vydání Nevyplňujte. Nastaví se datum, od kterého redaktor nebo admin povolí zobrazení vašeho článku na webových stránkách.

Datum stažení Nevyplňujte. Pole umožňuje vašemu redaktorovi nastavit datum, při jehož dosažení článek již nebude zobrazen na hlavní stránce školního webu.

Autor Nevyplňujte. Automaticky se zobrazí jméno uživatele, který je přihlášen a článek přidává.


10


Publikování na školním webu Slovní spojení odpovídající danému článku Můžete (ale nemusíte) uvádět klíčová slova nebo slovní spojení, která vystihují obsah článku. Slova ve spojení oddělujte mezerou, další slovo nebo spojení pište na nový řádek. Poznámka: Tímto způsobem se plníte databázi, kterou je možno z webu školy prohledávat prostřednictvím nabídky "rozšířené vyhledávání". Čtenáři je tím umožněn rychlejší přístup k vašemu článku než pomocí fulltextového vyhledávání. Čtenář zadá klíčové slovo do pole Hledaný text a v poli Hledání omezit na vybere položku „databázi klíčových slov“. Ukázka:

Priorita článku Nevyplňujte. Číslo ovlivňuje pozici článku na hlavní stránce. Prioritu určí váš redaktor.

Hodnocení článku Pro potřeby našeho webu byl redakční systém upraven tak, že čtenáři nemohou články hodnotit.

Související anketa V rozbalovacím menu je možno k článku přiřadit konkrétní anketu. Nevyplňujte. Do správy anket nemáte přístup.

Související články Pole umožňuje přiřadit váš článek k některé ze skupin souvisejících článků v rozbalovacím seznamu. Není nutno zadávat.

Uložení článku Kliknutím na tlačítko Přidat článek uložíte do systému, tlačítkem Reset můžete vymazat již vyplněné položky v případě, že článek nechcete uložit.


11


Publikování na školním webu 5 Seznam doporučných tagů Jak už bylo uvedeno výše, k formátování textu ve formulářových polích Úvod a Hlavní text je třeba používat některé příkazy jazyka html (tagy). Poznámka: Webové stránky se píší pomocí zvláštního jazyka (Hypertext Markup Language), založeného na těchto základních principech: Stránka má vždy textový formát a lze ji vytvořit v libovolném textovém editoru, obrázky v ní nejsou vloženy, ale odkazuje se na ně. Příkazy (tagy) jazyka i se svými parametry se uzavírají do špičatých závorek.Tím je jasně rozlišeno, co je text a co příkaz. Příkazy jsou buď párové nebo nepárové. Párové se používají podobně jako závorky. Text uzavřený mezi nimi bude mít vlastnosti, které příkaz definuje. Nepárové příkazy se mohou vztahovat k celému dokumentu nebo na element, který byl vymezen pomocí párových příkazů. V uvedených příkladech (šedá textová pole) jsou použité tagy zvýrazněné tučně pro lepší orientaci v textu. Toto zvýraznění nemá žádný jiný význam a nemusíte jej používat.

V našem systému budete používat jen několik základních tagů. Postupně se s nimi seznámíme a vysvětlíme jejich funkci.

Nadpisy K vytvoření nadpisů a podnadpisů (hlaviček) můžeme použít následující párové tagy (head):

pro vymezení nadpisu první úrovně,

pro vymezení nadpisu druhé úrovně atd. Můžete použít teoreticky až šest úrovní nadpisů (tedy až

). Nadpisy jednotlivých úrovní budou tučné a liší velikostí písma. Text zformátujete tím, že jej uzavřete mezi počáteční a koncovou část párového tagu (princip závorky). Příkazy se v prohlížeči nezobrazí, ale uvozený text bude mít vlastnosti definované příkazem, v němž byl „uzavřen“.

Příklad:

Toto je nadpis úrovně h1






Seznam doporučených tagů

12


Publikování na školním webu Výsledek:

Poznámka: Nepoužívejte menší nadpisy než je základní písmo nadefinované v phpRS systému.

Odstavce Chceme-li text článku členit do odstavců, použijte tag pro vymezení odstavce (paragraf):

Jednotlivé odstavce textu není nutno oddělovat klávesou enter, ale pokud to učiníte, budete se v textu lépe orientovat. Na výsledek to ovšem nemá žádný vliv. Nic by se nestalo ani v případě, že klávesu enter použijete na jiném méně vhodném místě (např. uprostřed slova). Příklad:

Tento text musí být dostatečně dlouhý, aby se zobrazil na více řádků. Chcete jej zobrazit v prvním odstavci svého článku.
Dále pokračuje váš článek touto větou, která už bude ve druhém odstavci.
Prohlížeč za vymezeným odstavcem automaticky zalomí řádek a udělá vertikální mezeru. Počet řádků v odstavci se může libovolně měnit podle velikosti okna, v kterém vám prohlížeč běží. Zalamování řádků podle velikosti okna však nijak neovlivní nadefinované odstavce. Výsledek může vypadat například takto: Výsledek:

Pokud potřebujete zalomit řádek tak, aby zalomení nereagovalo na velikost okna prohlížeče, docílíte toho použitím tagu pro zalomení řádky (break):


13


Publikování na školním webu
Text za tímto tagem bude vždy začínat na novém řádku, ale není to nový odstavec (nebude oddělen vertikální mezerou). Všimněte si, že jde o tag nepárový a má tudíž odlišnou syntaxi. Lze jej použít samostatně i uvnitř odstavce. Příklad:

V této ukázce nepoužijeme členění na odstavce s vertikální mezerou mezi nimi,
ale pouze zalomíme řádek za první větou tohoto souvětí. Souvětí bude zobrazeno například některým z následujících způsobů (závisí to na velikosti okna prohlížeče): Výsledek:

Jak vidíte, zalamování řádků sice reaguje na velikost okna prohlížeče, ale za první větou je řádek zalomen v každém případě. Pokud vám nebude vyhovovat zarovnání odstavce vlevo, které je implicitní (tzn. že jej nemusíte definovat), můžete použít parametr pro zarovnání (align):

Bude-li hodnota rovna right, zarovnáte odstavec vpravo, bude-li rovna center, zarovnáte jej na střed. Hodnotu left (vlevo) není nutné uvádět, toto zarovnání nastane i bez použití arametru align. Příklad:

Text v tomto odstavci bude zarovnaný vlevo.

Text v tomto odstavci bude vystředěný.

Text v tomto odstavci bude zarovnaný vpravo.
Výsledek:


14


Publikování na školním webu Poznámka: Všimněte si dobře syntaxe. Parametr align se uzavírá do první části tagu paragraf. Hodnota parametru musí být v uvozovkách (oboje nahoře), mezera je pouze před parametrem align. Stejný parametr lze stejným způsobem použít v tagu pro vymezení nadpisu (viz výše).

Písmo Pokud potřebujete v textu odlišit písmo, nepoužívejte jiné styly ani fonty (tj. tagy, které tyto změny definují). Styly jsou implicitně definovány v samotném redakčním systému a v různých webových prohlížečích se mohou zobrazovat různě, podle toho, které fonty písma jsou prohlížeči dostupné. Vzhled stránek je ale vždy jednotný (všechny články stejným fontem). Z téhož důvodu nepoužívejte ani písmo barevné (to je v systému vyhrazeno pouze odkazům). Proto doporučujeme využívat pouze různé řezy písma (tučné, kurzíva, podtržené). K tomu potřebujete následující tagy (bold, italic, underline):

pro vymezení textu, který bude tučným písmem, pro vymezení textu psaného kurzívou, pro podtržený text.

Tagy se dají libovolně kombinovat (tučná kurzíva, tučné podtržené apod.) Dodržujte však správné pořadí podobně jako při použití více druhů závorek. Příklad:

První věta v této ukázce bude tučně. Druhou větu napíšeme kurzívou. Třetí větu podtrhneme. Na čtvrté větě se pořádně vyřádíme a použijeme kombinaci všech tří možností. Výsledek:

Odkazy V případě, že se potřebujete odkázat na jiný článek (ať už na webu školy nebo na úplně jiných stránkách, využijte tagu pro vložení odkazu (anchor):

Tento tag je opět párový a text umístěný mezi jeho pravou a levou část se zobrazí jako odkaz. Bude barevný a podtržený. Po kliknutí se prohlížeč přepne na adresu, která je zadaná parametrem href a volanou stránku zobrazí v novém okně.


15


Publikování na školním webu Jako hodnotu parametru href používejte vždy absolutní adresu odkazovaných stránek ( tj. v podobě http://www.atakdále.cz ) a to i v případě, že se budete odkazovat na některý článek na našem webu. Nejjednodušší je adresu zkopírovat přímo z pole adresa ve webovém prohlížeči, pokud si předtím odkazovaný článek v tomto prohlížeči zobrazíte. Zabráníte tak případným překlepů či syntaktickým chybám. Příklad:

První odkaz v tomto textu ukazuje na hlavní stránku webu MŠMT ČR, zatímco druhý na konkrétní článek "Moderní škola moderní výuka jazyků s využitím ICT" na našem školním webu.

Výsledek:

Seznamy Kromě odstavcového členění můžete ve svém článku využívat také seznam, a to buď číslovaný (ordered list) nebo pouze s odrážkami (unordered list). Použijte k tomu tagy:

pro případ číslovaného seznamu nebo pro seznam s odrážkami.

Uvnitř obou tagů musíte ještě jednotlivé položky seznamu (list item) uvozovat tagem:

Před a za celým seznamem se automaticky udělá vertikální mezera velikosti jednoho řádku. V tomto se seznamy podobají odstavcům (
). Příklad:

Příklad číslovaného seznamu se dvěma položkami:
První položka seznamu

Druhá položka seznamu


16



Zanořením dalšího tagu
(případně
) do elementu
víceúrovňového členění s větším levým odsazením.

můžete docílit

Příklad:

Příklad nečíslovaného seznamu se dvěma úrovněmi odrážek :

První položka první úrovně seznamu
První položka druhé úrovně seznamu

Druhá položka druhé úrovně seznamu

Druhá položka první úrovně seznamu

Výsledek:

Poznámka: V zanořeném tagu
se můžete samozřejmě použít i jiné tagy (například pro řezy písma).

Tabulky Tabulky jsou nedílnou součástí většiny webových stránek. Maticové členění textu do řádků sloupců je výhodné, neboť takto naformátovaný text je přehledný a jste na něj zvyklí (viz vícesloupcová sazba v novinách). Při čtení takového textu si ale často ani neuvědomujete, že se podstatě jedná o tabulku. Základem šablony, používané na našem webu je také tabulka (3 sloupce). První řádek je vyhrazen pro hlavičku školy, prostřední sloupec pro vaše články a krajní dva sloupce pro nabídky.


17


Publikování na školním webu Ukázka:

Všimněte si, že také titulek článku využívá tabulku (1 řádek, 4 sloupce), stejně jako náhledy fotografií (2 řádky, 4 sloupce). Jsou to vlastně tabulky v tabulce. Definování takového formátu je složité. Vy se s ním ale nebudete trápit, protože je nastaveno v samotném redakčním systému. Proto se můžete omezit jen na vytvoření jednoduché tabulky. Vymezení tabulky musí začít párovým tagem:

První řádek uvnitř tabulky vymezíme párovým tagem: Do řádku nadefinujete tolik buněk, kolik sloupců bude tabulka mít. Uděláte to pomocí tagů pro vytvoření buňky:

Poté si musíte rozmyslet, kolik řádků (row) bude tabulka mít a stačí už jen řádky nakopírovat. Nakonec mezi tagy vypíšete obsah jednotlivých buněk.


18


Publikování na školním webu Příklad: (2 řádky, 2 sloupce)

Obsah levé horní buňky Obsah pravé horní buňky

Obsah levé spodní buňky Obsah pravé spodní buňky

Výsledek:

Poznámka: Záleží pouze na správném pořadí tagů a správné syntaxi. Výsledek vůbec nebude ovlivněn způsobem zalamování řádků v textu, který píšete. Pro dobrou orientaci je však vhodné dodržovat zalamování po jednotlivých řádcích tabulky. Pokud bude řádek dlouhý, můžete text zalamovat i po jednotlivých buňkách.

V případě tabulky se záhlavím můžete namísto tagu pro buňku použít tag pro hlavičkové pole:

Obsah buňky bude v tomto případě rovnou vypsán tučným písmem a zarovnaný na střed. Příklad: (tabulka se záhlavím nahoře, 3 řádky, 2 sloupce)

Záhlaví 1 Záhlaví 2



Výsledek:

Příklad: (tabulka se záhlavím vpravo,2 řádky, 3 sloupce)

Záhlaví 1 Obsah levé horní buňky Obsah pravé horní buňky

Záhlaví 2 Obsah levé spodní buňky Obsah pravé spodní buňky


19



Jestliže vám připadá obsah buněk „nahuštěný“ (sousední buňky splývají) nebo chcete-li tabulku zarámovat, musíte do tagu přidat některý z parametrů pro vnitřní (cellpadding) a vnější (cellspacing) okraj buněk nebo šířku rámce tabulky (border). Můžete použít i dva nebo všechny tři současně.

Jako hodnotu parametru zadáváte číslo, které udává šířku rámce nebo okraje buňky v obrazovkových bodech (pixelech), například: border="8"

nastavuje šířku vnějšího rámečku kolem tabulky na 8 pixelů a v případě, že jej vynecháte, bude tabulka bez rámce (neviditelná),

cellpadding="12"

nastavuje vnitřní okraj (vzdálenost mezi okrajem buňky a jejím obsahem) na 12 pixelů,

cellspacing="20"

nastavuje vnější okraj buněk (vzdálenost mezi buňkami) na 20 pixelů.

Příklad: (tabulka s parametry)



Výsledek:

Chcete-li změnit zarovnávání textu v buňkách, musíte do tagů , který implicitně zarovnává vlevo a na střed, a , který implicitně zarovnává na střed (vodorovně i svisle) přidat parametry pro vodorovné (align) a svislé (valign) zarovnání obsahu buňky. Lze použít oba současně nebo jen libovolný z nich.


20


Publikování na školním webu Parametry mohou mít hodnoty: align="left " align="right" align= "center"

zarovná obsah buňky doleva (výchozí hodnota u tagu ), zarovnání obsahu buňky vpravo, zarovnání na střed (výchozí hodnota u tagu ).

valign="middle" valign="top" valign="bottom"

vertikální zarovnání na střed (výchozí hodnota obou tagů), vertikální zarovnání nahoru, vertikální zarovnání dolů.

Příklad: (tabulka s různým zarovnáním obsahu buněk)

obousměrně vystředěná buňka s dlouhým obsahem, aby zarovnání bylo dobře viditelné vlevo nahoře vystředěná nahoře

vpravo dole vpravo nahoře s dlouhým obsahem, aby zarovnání bylo dobře viditelné vystředěná dole

Výsledek:

Poznámka: Výška a šířka zobrazených buněk se mění podle velikosti okna prohlížeče a s ním se mění i zalamování řádků. Proto někdy nemusí být způsob nadefinovaný zarovnávání na první pohled patrný. Doporučení: Použití všech výše uvedených tagů si můžete vyzkoušet v jednoduchém textovém editoru (Poznámkový blok). Pokud vytvořený textový soubor uložíte s příponou html (název.html), můžete si ho následně prohlédnout libovolným webovým prohlížečem.


21


Publikování na školním webu 6 Vložení obrázku Příkaz pro vložení obrázku Po vkládání obrázků už nebudete používat příslušné tagy jazyka html. Redakční systém má pro tento účel vlastní příkazy ( phpRS značky): Pomocí těchto značek můžete do článku vložit obrázek nebo náhled obrázku. Náhled je vlastně zmenšený obrázek, který na webu funguje jako odkaz. Po kliknutí na něj se vám otevře velký obrázek v novém okně prohlížeče. Značka se podobá nepárovému tagu a může mít 3 parametry, které určují číslo obrázku v databázi, způsob jeho zarovnání vzhledem k textu a informaci o zobrazení náhledu (id,zarovnani a nahled):

CISLO

Na místo této proměnné je nutné v parametru id vložit příslušné číslo, pod kterým je veden obrázek v databázi a které si vyhledáte v galeriích obrázků.

ZPUSOB_ZAROVNANI

Pro tuto proměnnou parametru zarovnani jsou možné varianty: "nastred", "vlevo" nebo "vpravo". V případě že použijete „nastred“, text bude obtékat jen shora a zdola.

ZOBRAZIT

Tato proměnná parametru nahled má možné varianty: "ano" v případě, že chcete zobrazit náhled, "ne" v případě, že chcete zobrazit rovnou velký obrázek. Pokud parametr nahled úplně vynecháte, je to stejné jako v případě „ne“ a obrázek bude rovnou velký.

Umístění obrázku v odstavci Příklady umístění obrázku do textového odstavce demonstrují následující 3 příklady. V prvních dvou jde pouze o malý náhled obrázku s různými možnostmi zarovnání. Třetí příklad ukazuje použití „velkého“ obrázku, které není vhodné, neboť taková stránka se při malé rychlosti připojení k Internetu může stahovat velmi dlouho.

Vložení obrázku

22


Publikování na školním webu Příklad 1:

(náhled obrázku v odstavcovém textu se zarovnáním vlevo nebo vpravo)

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

Výsledek:

Příklad 2:

(náhled obrázku v odstavcovém textu, zarovnání na střed)


Vložení obrázku

23



Příklad 3:

(velký obrázek v odstavcovém textu)

Výsledek:

Vložení obrázku

24


Publikování na školním webu Umístění náhledů do tabulky Pokud budete na webu zveřejňovat více obrázků nebo fotografií, použijte k tomu tabulku. Tabulka by měla mít maximálně 6 sloupců, aby se na šířku vešla do střední části webové stránky, vyhrazené pro váš článek. Je třeba si uvědomit, že při zmenšení okna prohlížeče bude „přetékat.“ Počet řádků může být libovolný, ale nepřehánějte to. Lépe vypadá, když se vám tabulka vejde na jednu obrazovku. Do jednotlivých buněk umístíte pomocí výše popsaného příkazu náhledy vašich fotografií. Každý náhled funguje opět jako odkaz a po kliknutí se velký obrázek otevře v novém okně. Příklad :

Výsledek:

Vložení obrázku

25


Publikování na školním webu Podobně je možno v tabulce kombinovat text s náhledy obrázků. V příkladu je tento způsob využit k zvýraznění podtitulku konkrétního článku. Příklad :

Cíl projektu a jeho zdůvodnění.

Výsledek:

Doporučení: Pokud budete v článku publikovat více fotografií, vždy používejte tabulku s náhledy. Tagy včetně příkazů pro vložení obrázku si můžete dopředu připravit v textovém souboru a uložit ho. Až budete tabulku potřebovat, zkopírujte zdrojový text do formuláře pro vložení článku do pole Hlavní text. Upravíte počet řádků a nakonec doplníte jen ID publikovaných obrázků. Tím si ušetříte čas a zamezíte „překlepům“.

Vložení obrázku

26


Publikování na školním webu 7 Galerie obrázků Abyste zjistili ID (identifikační číslo v databázi) obrázku, který chcete do článku vložit, musíte vstoupit do galerie.

Vstup do galerie V úvodní obrazovce (viz kapitola 3) vyberete položku Galerie obrázků. Po této volbě se vám zobrazí seznam existujících galerií:

Pokud jste konkrétní galerii nevytvořili, nemůžete ji mazat ani editovat (tyto akce podléhají právům, která nastaví její autor). Jednotlivé galerie si ale můžete otevřít a prohlédnout si jejich obsah:

Galerie obrázků

27


Publikování na školním webu Nad náhledy jednotlivých obrázků uvidíte jejich ID. Jde o jedinečná čísla, která se generují podle pořadí uploadu obrázků do databáze a nezávisí na jejich zařazení do jednotlivých galerií. V případě, že uploadovaný obrázek bude někdy vymazán, jeho ID bude z řady vynecháno. Pod náhledem najdete informaci o skutečné velikosti (kB) a rozměrech (pixely) obrázku. Klepnutím na odkaz (orig) vedle názvu se vám v novém okně otevře obrázek ve skutečné velikosti.

Přidání galerie Pokud chcete publikovat vlastní obrázky, můžete vytvořit novou galerii a nastavit pro ni práva přístupu pro další uživatele:

Pole název je nutno vyplnit, popis slouží k bližšímu určení obsahu galerie. Tlačítkem Reset vyprázdníte obsah polí, tlačítkem Přidat ji přidáte do stávajícího seznamu:

Po návratu na hlavní stránku sekce bude vaše nová galerie první položkou v seznamu. Máte možnost ji editovat (název, popis, práva), smazat nebo otevřít. Bude ovšem zatím prázdná.

Galerie obrázků

28


Publikování na školním webu

Přidání obrázku Po volbě Přidat nový obrázek můžete vyplnit pole Název obrázku a Popis.

V poli Obrázek zadáte pomocí tlačítka Procházet cestu k obrázku. Tlačítkem Upload nového obrázku jej načtete do databáze. Pozor! Než budete obrázek uloadovat, musí být upravený (vzhled, velikost, formát). . Systém je schopen automaticky generovat náhledy jen pro obrázky ve formátu JPEG a PNG. Pokud je váš zdrojový obrázek v jiném formátu, zůstane okénko náhledu prázdné (náhled nebude vytvořen). To by znamenalo, že obrázek můžete do textu vložit pouze velký (ve skutečné velikosti). Poznámka: Fotografie je nutno nejprve upravit v některém fotoeditoru (např. Zoner Photo Studio, který je k dispozici ve škole). Musí být odstraněny všechny její nedostatky (špatná expozice, neostrost, červené oči apod.) Upravená fotografie by neměla mít velikost přesahující 1MB a musí mít formát jpeg. Doporučení: Pokud nemáte zkušenosti s úpravou fotografií, vyberte si několik nejlepších a uložte do společného úložiště do složky se svým jménem. Poté obraťte se na správce sítě, který vám je upraví a uploaduje do galerie. Snažte se omezit vkládání velkých obrázků, využívejte především náhledy!

Galerie obrázků

29


Publikování na školním webu 8 Postup při vkládání článku Vzhledem k tomu, že do systému přistupujete z webového rozhraní, je dobré dodržovat následující postup: 1. Text článku si napište libovolném textovém editoru, včetně krátké anotace. Zde totiž lépe uvidíte případné chyby. Písmo neformátujte, nevkládejte žádné objekty. Můžete si však text viditelně rozčlenit odstavce (např. volným řádkem) nebo položky seznamu (zalomením řádku). 2. Poté do textu článku vložte tagy pro definování odstavců nebo seznamů (případně i s parametry). 3. Pokud budete využívat tabulku, vyplatí se ji mít připravenou „prázdnou“v jiném textovém souboru (třeba i ve více verzích) a do formuláře ji jenom zkopírovat. Poté doplníte obsah buněk. Poznámka: Pro náhledy obrázků vám stačí tabulka bez parametrů, se šesti sloupci a jedním řádkem. Další potřebné řádky si snadno dokopírujete. Buňky mohou rovnou obsahovat příkaz: a vy pak doplníte jenom ID obrázků. V tabulce, která bude obsahovat ve svých buňkách text (např. výsledková listina nějaké soutěže apod.) už budete muset používat alespoň parametr cellspacing (viz kapitola 5, str. 20) a možná i hlavičkové pole (viz výše.) Její definování bude náročnější.

4. Takto připravený soubor si někam uložte, ale nezavírejte jej. 5. V jiném okně spusťte webový prohlížeč. Způsobem popsaným v kapitole 3 si zobrazte formulář Editace článků a připravený článek pomocí schránky zkopírujte do pole Hlavní text (případně Úvod, jde-li o článek krátký nebo anotaci). 6. Následně vyplňte všechna další (nutná) pole formuláře. Pokud chcete publikovat obrázky, nezapomeňte povolit phpRS značky. 7.

Článek uložte tlačítkem Přidat.

Postup při vkládání článku

30


Publikování na školním webu Po oznámení, že byl článek přidán do systému, máte možnost: Pomocí odkazu Preview zobrazit svůj článek v novém okně tak, jak bude vypadat na webu (pokud byl zvolen typ dlouhý článek, uvidíte jej „rozbalený“). Vrátit se zpět k editaci článku a opravit případné chyby. Poté je třeba článek znovu uložit (Přidat). Vrátit se Zpět na hlavní stránku sekce, kde můžete ve vyprázdněném formuláři editovat další článek. Poznámka: Protože nemáte právo článek vydat, je odkaz Odeslání informačního e-mailu pro vás bezpředmětný. Jde o odeslání informace, že na webu školy je nový článek. Tuto informaci obdrží ji pouze registrovaní čtenáři.

Postup při vkládání článku

31


Publikování na školním webu 9 Kontrolní otázky 1. Jakou adresu musíte zadat ve webovém prohlížeči, abyste se mohli přihlásit do redakčního systému? 2. Jaká oprávnění má v systému uživatel s minimálními právy? 3. Může tento uživatel vydávat články? 4. Která pole ve formuláři pro vložení nového článku je nezbytné vyplnit? 5. Podle jakých kritérií můžete filtrovat zobrazené články? 6. Jaký je rozdíl mezi krátkým a dlouhým článkem z pohledu čtenáře webu? 7. V čem se liší editace formuláře dlouhého a krátkého článku? 8. Co jsou klíčová slova a čemu může prospět jejich uvedení? 9. Jaký je rozdíl mezi párovým a nepárovým tagem? 10. Které tagy použijete pro definování: odstavce, seznamu (číslovaného i nečíslovaného), řezů písma? 11. Které tagy definují: tabulku, řádek tabulky, buňku tabulky? 12. Jak vložíte do článku odkaz na jinou stránku? 13. Kdy je vhodné používat tabulku? 14. Co jsou náhledy obrázků a jaký důvod má jejich používání? 15. Co je ID obrázku a k čemu slouží? 16. Jaké vlastnosti by měl mít obrázek, který chcete uploadovat do databáze redakčního systému? 17. Kterým příkazem vložíte do článku obrázek? 18. Kterým parametrem a jakou jeho hodnotou nastavíte, že se má zobrazit pouze náhled obrázku? 19. Jak ve formuláři pro editaci článku povolíte zobrazování obrázků? 20. Jaký význam má odkaz Preview, který se zobrazí po přidání článku do systému?

Kontrolní otázky

32


Publikování na školním webu Prostor pro poznámky

Prostor pro poznámky

33


Publikování na školním webu Použité zdroje Odkazy http://www.supersvet.cz/phprs/ http://www.jakpsatweb.cz http://zsuj.cz

Literatura Hlavenka Jiří a kol.:

Použité zdroje

Vytváříme www stránky a spravujeme moderní web site. Computer Press. Praha, 1997

34

Obsah levé horní buňky	Obsah pravé horní buňky
Obsah levé spodní buňky	Obsah pravé spodní buňky

Záhlaví 1	Obsah levé horní buňky	Obsah pravé horní buňky
Záhlaví 2	Obsah levé spodní buňky	Obsah pravé spodní buňky

obousměrně vystředěná buňka s dlouhým obsahem, aby zarovnání bylo dobře viditelné	vlevo nahoře	vystředěná nahoře
vpravo dole	vpravo nahoře s dlouhým obsahem, aby zarovnání bylo dobře viditelné	vystředěná dole

Manuál pro interní potřebu Základní školy Uhlířské Janovice

Recommend Documents

Toto je nadpis úrovně h1

Toto je nadpis úrovně h2

Toto je nadpis úrovně h3

Toto je nadpis úrovně h4

Toto je nadpis úrovně h5

Toto je nadpis úrovně h6