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
Ú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
Obsah 1 Přihlášení... 4 2 Úvodní obrazovka... 5 3 Formulář pro vložení článku... 6 4 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
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
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
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
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 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) o 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
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. Popis jednotlivých polí formuláře 8
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. Popis jednotlivých polí formuláře 9
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á. Popis jednotlivých polí formuláře 10
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. Popis jednotlivých polí formuláře 11
5 Seznam doporučných tagů Základní škola Uhlířské Janovice 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): <h1> </h1> pro vymezení nadpisu první úrovně, <h2> </h2> pro vymezení nadpisu druhé úrovně atd. Můžete použít teoreticky až šest úrovní nadpisů (tedy až <h6> </h6>). 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: <h1> Toto je nadpis úrovně h1 </h1> <h2> Toto je nadpis úrovně h2 </h2> <h3> Toto je nadpis úrovně h3 </h3> <h4> Toto je nadpis úrovně h4 </h4> <h5> Toto je nadpis úrovně h5 </h5> <h6> Toto je nadpis úrovně h6 </h6> Seznam doporučených tagů 12
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): <p> </p> 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: <p>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.</p><p> Dále pokračuje váš článek touto větou, která už bude ve druhém odstavci.</p> 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: 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): Seznam doporučených tagů 13
<br /> 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,<br /> 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): 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): <p align="hodnota" > </p> 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: <p>text v tomto odstavci bude zarovnaný vlevo. </p> <p align="center">text v tomto odstavci bude vystředěný.</p> <p align="right"> Text v tomto odstavci bude zarovnaný vpravo.</p> Seznam doporučených tagů 14
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): <b> </b> pro vymezení textu, který bude tučným písmem, <i> </i> pro vymezení textu psaného kurzívou, <u> </u> 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: <b>první věta v této ukázce bude tučně.</b> <i> Druhou větu napíšeme kurzívou. </i> <u>třetí větu podtrhneme. </u> <b><i><u> Na čtvrté větě se pořádně vyřádíme a použijeme kombinaci všech tří možností.</u></i></b> 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): <a href="adresa" > </a> 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ě. Seznam doporučených tagů 15
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 <a href="http://www.msmt.cz">mšmt ČR</a>, zatímco druhý na konkrétní článek <a href="http://www.zsuj.cz/view.php?cisloclanku=2007020018">"moderní škola - moderní výuka jazyků s využitím ICT"</a> na našem školním webu. 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: <ol> <ul> </ol> pro případ číslovaného seznamu nebo </ul> pro seznam s odrážkami. Uvnitř obou tagů musíte ještě jednotlivé položky seznamu (list item) uvozovat tagem: <li> </li> 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> ). Příklad: Příklad číslovaného seznamu se dvěma položkami: <ol><li>první položka seznamu</li> <li>druhá položka seznamu</li> </ol> Seznam doporučených tagů 16
Zanořením dalšího tagu <ul> (případně <ol>) do elementu <li> 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 : <ul> <li>první položka první úrovně seznamu <ul><li> První položka druhé úrovně seznamu</li> <li> Druhá položka druhé úrovně seznamu</li> </ul> </li> <li>druhá položka první úrovně seznamu</li> </ul> Poznámka: V zanořeném tagu <li> 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. Seznam doporučených tagů 17
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: <table> </table> První řádek uvnitř tabulky vymezíme párovým tagem: <tr> </tr> Do řádku nadefinujete tolik buněk, kolik sloupců bude tabulka mít. Uděláte to pomocí tagů pro vytvoření buňky: <td> </td> Poté si musíte rozmyslet, kolik řádků (row) bude tabulka mít a stačí už jen řádky nakopírovat. Nakonec mezi tagy <td> vypíšete obsah jednotlivých buněk. Seznam doporučených tagů 18
Příklad: (2 řádky, 2 sloupce) Základní škola Uhlířské Janovice <table > <tr> <td>obsah levé horní buňky</td> <td>obsah pravé horní buňky</td> </tr> <tr> <td> Obsah levé spodní buňky</td><td> Obsah pravé spodní buňky</td> </tr> </table> 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: <th> </th> 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) <table > <tr> <th>záhlaví 1</th> <th>záhlaví 2</th> </tr> <tr> <td>obsah levé horní buňky</td> <td>obsah pravé horní buňky</td> </tr> <tr> <td>obsah levé spodní buňky</td><td>obsah pravé spodní buňky</td> </tr> </table> Příklad: (tabulka se záhlavím vpravo,2 řádky, 3 sloupce) <table > <tr> <th>záhlaví 1</th> <td>obsah levé horní buňky</td> <td>obsah pravé horní buňky</td> </tr> <tr> <th>záhlaví 2</th><td>Obsah levé spodní buňky</td><td>obsah pravé spodní buňky</td> </tr> </table> Seznam doporučených tagů 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 <table> 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ě. <table border="hodnota" cellpadding=" hodnota" cellspacing=" hodnota"> </table> 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" cellpadding="12" cellspacing="20" 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á), nastavuje vnitřní okraj (vzdálenost mezi okrajem buňky a jejím obsahem) na 12 pixelů, nastavuje vnější okraj buněk (vzdálenost mezi buňkami) na 20 pixelů. Příklad: (tabulka s parametry) <table border="8" cellpadding="12" cellspacing="20"> <tr> <td>obsah levé horní buňky</td> <td>obsah pravé horní buňky</td> </tr> <tr> <td> Obsah levé spodní buňky</td><td> Obsah pravé spodní buňky</td> </tr> </table> Chcete-li změnit zarovnávání textu v buňkách, musíte do tagů <td>, který implicitně zarovnává vlevo a na střed, a <th>, 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. <td align="hodnota" valign= hodnota > </td> <th align="hodnota" valign= hodnota > </td> Seznam doporučených tagů 20
Parametry mohou mít hodnoty: Základní škola Uhlířské Janovice align="left " align="right" align= "center" valign="middle" valign="top" valign="bottom" zarovná obsah buňky doleva (výchozí hodnota u tagu <td>), zarovnání obsahu buňky vpravo, zarovnání na střed (výchozí hodnota u tagu <th>). 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) <table border="8" cellpadding="12" cellspacing="20"> <tr> <td align="center" valign="middle"> obousměrně vystředěná buňka s dlouhým obsahem, aby zarovnání bylo dobře viditelné</td><td align="left" valign="top">vlevo nahoře</td><td align="center" valign="top">vystředěná nahoře </td> </tr> <tr> <td align="right" valign="bottom">vpravo dole</td> <td align="right" valign="top">vpravo nahoře s dlouhým obsahem, aby zarovnání bylo dobře viditelné</td> <td align="center" valign="bottom"> vystředěná dole</td></tr> </table> 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. Seznam doporučených tagů 21
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): <obrazek id="cislo" zarovnani="zpusob_zarovnani" nahled="zobrazit" > 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 <obrazek> 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
Příklad 1: (náhled obrázku v odstavcovém textu se zarovnáním vlevo nebo vpravo) <p><obrazek id="96" zarovnani="vlevo" nahled="ano"> 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. </p> <p><obrazek id="96" zarovnani="vpravo" nahled="ano"> 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. </p> Příklad 2: (náhled obrázku v odstavcovém textu, zarovnání na střed) <p><obrazek id="96" zarovnani="nastred" nahled="ano"> 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. </p> Vložení obrázku 23
Příklad 3: (velký obrázek v odstavcovém textu) <p><obrazek id="96" zarovnani="vlevo" nahled="ne"> 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. </p> Vložení obrázku 24
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 : <table> <tr> </tr> <tr> </tr> </table> <td><obrazek id="15" zarovnani="nastred" nahled="ano"></td> <td><obrazek id="9" zarovnani="nastred" nahled="ano"></td> <td><obrazek id="3" zarovnani="nastred" nahled="ano"></td> <td><obrazek id="4" zarovnani="nastred" nahled="ano"></td> <td><obrazek id="5" zarovnani="nastred" nahled="ano"></td> <td><obrazek id="10" zarovnani="nastred" nahled="ano"></td> <td><obrazek id="1" zarovnani="nastred" nahled="ano"></td> <td><obrazek id="2" zarovnani="nastred" nahled="ano"> </td> <td><obrazek id="6" zarovnani="nastred" nahled="ano"></td> <td><obrazek id="12" zarovnani="nastred" nahled="ano"></td> <td><obrazek id="13" zarovnani="nastred" nahled="ano"></td> <td><obrazek id="14" zarovnani="nastred" nahled="ano"></td> Vložení obrázku 25
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 : <table> <tr><td><obrazek id="65" zarovnani="nastred" nahled="ano"></td> <td><b>cíl projektu a jeho zdůvodnění.</b></td></tr> </table> 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
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