Jak vyzrát na box. -CSS2/), která se zabývá rozvržením elementů. I když CSS

Rozměr: px
Začít zobrazení ze stránky:

Download "Jak vyzrát na box. -CSS2/), která se zabývá rozvržením elementů. I když CSS"

Transkript

1 10 Jak vyzrát na box Proměním ho v blechu, v malou bezbrannou blechu. Až se tak stane, čeká ji pobyt v krabici, kterou vložím ještě do jiné krabice, načež pošlu tuto krabici sám sobě. Jakmile mi bude doručena, uštědřím jí pořádnou ránu velkým kladivem. Opravdu skvěle vymyšleno, to vám povídám. Jsem prostě génius! THE EMPEROR S NEW GROOVE (2000) Historie designu v prostředí webu je již od počátku spjata s překonáváním rozličných omezení. Tato skutečnost je dobře patrná na značně skromné škále prostředků, které nám byly dány k dispozici pro tvorbu působivých designérských prvků. Důvod je ten, že elementy HTML nevytvářejí nic jiného, než s trochou nadsázky řečeno krabičky, přihrádky a zásuvky. nadpisy, odstavce a dokonce ani seznamy v sobě neskrývají nic jiného než určitý sled takovýchto boxů. Možná vás již napadlo, že prapředkem těchto potíží je vlastně obyčejná tabulka. Leckdo se jistě snažil dělat téměř nemožné, jen aby přizpůsobil tuto do značné míry nepoddajnou strukturu připomínající pravidelnou mřížku momentálním okolnostem a potřebám. Kolik designérů rozdělilo obrázek na více částí tak, aby bylo možno s využitím různého uspořádání buněk tabulky navodit iluzi, že layout stránky není sestaven z pouhého sledu boxů? Kolik z nás alespoň jednou nepomyslelo na buňku tabulky, která by mohla mít zaoblené rohy? Rovněž je pravdou, že v CSS nelze spatřovat původ nějakých zásadních změn. Důkazem toho je vlastně i kapitola 8 ze specifikace kaskádových stylů úrovně 2 (www.w3.org/tr/rec- -CSS2/), která se zabývá rozvržením elementů. I když CSS

2 212 PROJEKT 10 stále vychází z obdélníkových tvarů, jejichž zdrojem je HTML, není možné tvrdit, že by nenabízelo pomocnou ruku. Díky některým téměř neznámým jemnostem CSS je možné vytvořit šikmé čáry bez zapojení grafických prvků a rovněž přizpůsobit směr textu zaoblenému tvaru. V následujícím projektu se společně podíváme na několik možností, jak vykouzlit oba zmíněné efekty. Cíle projektu Řekněme, že jeden z našich přátel, který má na starosti webové stránky nabízející vtipné postřehy a komentáře, nás požádal o vytvoření chytlavého a neobvyklého layoutu, který by mohl použít na svém webu. Poté, co jsme se ujistili, že návštěvníci jeho stránek používají vyšší než čtvrté verze prohlížečů, požádali jsme našeho přítele o zaslání ukázkového dokumentu. K tomuto projektu máme od zákazníka jenom velmi zběžně stanovené požadavky. Předně víme, že je velkým příznivcem purpurové barvy a barevné ladění podstatné části jeho webu se točí právě kolem různých odstínů této barvy. Tuto skutečnost potřebujeme promítnout do vzhledu našeho návrhu. (Protože nemáme pevně stanovenou sadu odstínů, můžeme si pro tento projekt zvolit odstíny vlastní.) Kromě toho, náš přítel vyjádřil přání, aby layout byl prostě působivý a praktický, aniž by byl současně okoukaný. To pro tebe bude určitě hračka, nemám pravdu? Instrukce ohledně stažení potřebných souborů z webu pro tento projekt naleznete v úvodu knihy. Příprava Z webové stránky této knihy si stáhněte soubory pro Projekt 10. Pokud hodláte spolupracovat doma, načtěte si do vašeho oblíbeného HTML editoru soubor ch10proj.html, který budete při postupující práci na projektu editovat, ukládat a znovu načítat. Budujeme základy Jak už jsme zvyklí z předchozích projektů, opět se jedná o nepříliš rozsáhlý projekt, který však má tentokráte poněkud neobvyklé členění. Na první pohled jsou zde patrné dvě části pro text každý je zastřešen jedním prvkem div, poslední div je pak využit pro potřeby zápatí. Kromě toho, zhruba v polovině stránky je umístěno menu. Výpis 10.1 zachycuje výchozí kód stránky, obrázek 10.1 ukazuje stránku s dočasným orámováním, které je nastaveno pro všechny prvky div.

3 JAK VYZRÁT NA BOX 213 Obr Prvotní stav projektu, kde lze stěží hovořit o nějaké přítomnosti stylu. Výpis 10.1 Základní struktura stránky <body> <div class="wrap" id="p1"> </div> <div class="wrap" id="p2"> <div id="menu"> </div> </div> <div class="wrap" id="footer"> </div> </body> V této konkrétní části kódu stojí za zmínku několik zajímavých skutečností: Stránka je rozdělena do tří hlavních částí, které sdílejí třídu pojmenovanou jako wrap. To bude velmi užitečné pro použití společné definice stylů. Prvek div náležející k menu je potomkem ( descendant) druhého ze tří prvků div na nejvyšší úrovni hierarchie. V této fázi projektu se vlastně jedná o jediný prvek div, u kterého není uvedena výše zmíněná třída. Pro každý div je specifikována konkrétní hodnota identifikátoru id. Tím je usnadněno použití jakéhokoliv stylu pro konkrétní prvek div, aniž by došlo k nechtěnému ovlivnění prvků ostatních. S povědomím o těchto záležitostech můžeme přejít k tvorbě stylů stránky. Class a ID Ačkoliv se nejedná o příliš obvyklý postup, je zcela pořádku, když prvek div doplníme o dva identifikátory class a id. Jak uvidíme později, za určitých okolností to může být obzvláště užitečné.

4 214 PROJEKT 10 Definice stylu dokumentu Protože nemáme na tomto místě přesně stanoveno jak postupovat, většinou se budeme muset s konkrétní záležitostí vypořádat až tehdy, jakmile přijde na řadu. Jistě nám bude k užitku, že na tomto poli již máme určité zkušenosti. Ze všeho nejdříve vytvoříme základní styly pro pozadí a barvy, trošku si pohrajeme s okraji pro různé části dokumentu a uvidíme, kam nás naše počínání zavede. Potíže s mezerami Naše úsilí je vedeno snahou jak bylo ostatně již dříve rozhodnuto získat stránku vyvedenou v purpurové barvě. Současně by bylo ale vhodné zachovat černý text na světlém pozadí, což přímo volá po použití světlejší barvy pro třídu wrap. Nyní především potřebujeme odstranit světle šedé orámování, jehož hlavním úkolem bylo usnadnit pochopení struktury stránky (viz obrázek 10.1). Vínově zbarvené pozadí získáme tak, že prvku body nadefinujeme barvu pozadí s hodnotu #969, která představuje přiměřeně tmavý odstín purpurové. Pro vlastní obsah bude ale lepší nastavit barvu pozadí na hodnotu #FDF. Každopádně, v obou případech budeme chtít, aby text byl zobrazen černou barvou. Na obrázku 10.2 vidíme dopad našich změn: <title>chapter 10 Project</title> <style type="text/css"> body {background: #969; color: black;} div.wrap {background: #FDF; color: black;} </style> </head> Obr Stránka získá mírně vínový nádech. Bezpečná barva Ačkoliv barva pro pozadí stránky patří mezi tzn. webové bezpečné barvy ( web-safe), u barvy pro prvek div tomu tak již není. Nejbližší bezpečná barva by totiž byla dána hodnotou #FCF. V tomto konkrétním případě bude všechno v pořádku, nicméně, s problémy bychom se mohli setkat u každého projektu, kde je požadavek na společné použití většího množství obrázků a barev založených na CSS. Nyní můžeme takřka na první pohled odhalit, v čem spočívá náš problém mezery mezi jednotlivými prvky div. Tento nechtěný efekt jde na vrub výchozím hodnotám okrajů pro odstavce, což vede k vytváření odstupu mezi jednotlivými prvky. Nedělají to sice všechny prohlížeče, nicméně, jejich počet je dostatečný na

5 to, abychom se tím zde zabývali. Řešení je zcela prozaické ve stylu pro odstavce použijme vlastnost margin a nastavíme jí nulovou hodnotu. Odstup mezi jednotlivými odstavci pak můžeme, v případě potřeby, zdůraznit pomocí vlastnosti padding. div.wrap {background: #FDF; color: black;} p {margin: 0; padding: 0.5em 1em;} </style> Toto nové pravidlo nejenom, že nám pomůže vyřešit problém s mezerou, ale současně také odsadí obsah umístěný v odstavcích od okrajů jednotlivých prvků div. Jak je vidět na dalším obrázku, vypadá to určitě lépe. A abychom předešli eventuálnímu výskytu dalších problémům s mezerami, nastavíme nulové okraje i pro nadpisy h1 a h2. p {margin: 0; padding: 0.5em 1em} h1, h2 {margin: 0; padding: 0 0.5em;} </style> Díky provedení těchto úprav je možno dosáhnout efektivní spolupráce všech prvků div, což nám zobrazí stránku pomocí jednoho celistvého bloku namísto tří odlišných sekcí. Výsledek je názorně zobrazen na obrázku JAK VYZRÁT NA BOX 215 Obr Spojení jednotlivých částí stránky vytváří iluzi jednoho velkého elementu. Nyní, když jsme se konečně dopracovali k tomuto vizuálnímu souladu, je načase všechno opět rozdělit, tentokráte ale ku prospěchu věci! Okraje, výplň a mezera Pro zachování obvyklé mezery o velikosti 1em mezi jednotlivými odstavci textu jsme museli u každého nastavit horní a spodní výplň na hodnotu 0.5em. To je nezbytné učinit, protože výplň se nepřekrývá svisle přiléhající okraje již ano. Tento aspekt layoutu zůstává mnoha autory ponechán zcela bez povšimnutí, nicméně, jde o důležitou stránku věci.

6 216 PROJEKT 10 Uvažujme například situaci, kdy je jeden div následován dalším, přičemž u obou dvou je nastaven okraj. <div style="margin: 1em;">div one</div> <div style="margin: 1em;">div one</div> Kolik místa se podle vás objeví mezi textem uzavřeným do těchto dvou prvků div? Odpověď většiny lidí by nejspíše zněla jako 1em, přičemž ve stejném duchu hovoří i CSS. Je ale správné se ptát pokud má první div spodní okraj o velikosti 1em a druhý div horní okraj o téže velikosti, proč není velikost mezery mezi těmito divy rovna 2em? Důvod, proč to tak je, spočívá v tom, že svisle přiléhající okraje podobně jako v předchozím příkladě se skutečně překrývají. Vzdálenost mezi dvěma elementy tak bude odpovídat větší hodnotě z obou sousedících okrajů. Tudíž, pokud měl první prvek div spodní okraj o velikosti 1px a druhý prvek div horní okraj o velikosti třeba 15px, vzdálenost mezi nimi by pak odpovídala právě těm 15 pixelům. Tohle všechno vám bude naprosto zřejmé, jakmile nad tím přestanete zbytečně hloubat. Bohužel výplň se chová odlišně. Předpokládejme, že v našem příkladu zaměníme okraje za výplň. <div style="padding: 1em;">div one</div> <div style="padding: 1em;">div one</div> Nyní bude mezi těmito dvěma elementy skutečně mezera o velikosti 2em. Abychom tedy nijak nenarušili soudržnost layoutu, musíme zmenšit velikost horní a spodní výplně na polovinu a právě to jsme v našem projektu udělali. Hrátky s okraji V tomto okamžiku je nejvyšší čas vzít si na paškál náš velký box a pokusit se jej učinit trošku méně hranatým. V prvním kroku jednoduše posuneme jeho okraje. div.wrap {background: #FDF; color: black; margin: 0 2em;} Tímto jednoduchým způsobem se docílí mírného zúžení obsahu. Na to lze elegantně navázat v následujícím kroku proč by měly mít všechny prvky div stejné okraje? Pokud budou v jednotlivých částech odlišné, box již nebude vzbuzovat dojem obyčejného boxu, což je ukázáno na obrázku h1, h2 {margin: 0; padding: 0 0.5em;} div#p1 {margin: 0 2em 0 10em;} div#p2 {margin: 0 10em 0 2em;} div#footer {margin: 0 11em 0 2em;} </style> V určitém slova smyslu představují námi dvě vytvořené hlavní části stránky navzájem zrcadlově převrácený obraz. První část má pravý okraj nastavený na hodnotu 2em, pro levý okraj je to pak 10em; u druhé části jsou hodnoty mezi sebou zaměněny. A abychom zachovali mírně odlišný vzhled zápatí, bylo kromě zarovnání jeho levého okraje vůči shora sousedícímu prvků div nutné lehce posunout jeho pravý okraj (konkrétně o 11em).

7 JAK VYZRÁT NA BOX 217 Obr Přerušení boxu. Při pohledu na obrázek 10.4 vystupují do popředí dvě skutečnosti, které si přímo říkají o to, aby se nenechaly jenom tak ležet menu a zápatí. Bez dlouhého přemýšlení se můžeme pustit do úpravy zápatí, protože všechno, co zde budeme potřebovat udělat, se týká přidání výplně a zarovnání textu na střed. Kromě toho, text bude zobrazen kurzívou, přičemž jeho barvu přizpůsobíme podle elementu body. div#footer {margin: 0 11em 0 2em; padding: 0.25em; text-align: center; font-style: italic; color: #969;} Jakmile jsme s tím hotovi, můžeme směřovat naše úsilí směrem k úpravě menu. Kouzla s menu S pouhými třemi odkazy v rámci příslušného prvku div jde o více než jednoduché menu. Zkusme nyní tento prvek div posunout doprava a podívejme se, jak to dopadne (viz obrázek 10.5). Mějte ale na zřeteli, že kdykoliv provádíme posun textového prvku, nesmíme zapomenout na jeho šířku. Vzhledem k docela krátkým odkazům může být menu poměrně úzké. Kromě toho mu také doplníme černé orámování a bílou barvu pozadí, čímž menu na stránce vynikne o něco lépe. div#p2 {margin: 0 10em 0 2em;} div#menu {float: right; width: 5em; border: 1px solid black; background: white;} div#footer {margin: 0 11em 0 2em; padding: 0.25em; text-align: center; font-style: italic; color: #969;} Ovšem to je pouze začátek. Tím, že textu nastavíme vhodné okraje, zajistíme, aby se nedostal příliš blízko k okraji menu. Záporná velikost okraje menu jej popostrčí směrem doprava. To způsobí, že bude částečně zasahovat do tmavě purpurového pozadí. Pro všechny případy rovněž nastavíme hodnotu výplně na nulu. div#menu {float: right; width: 5em; padding: 0; margin: 0-1.5em 0.25em 0.5em; border: 1px solid black; background: white;}! Vedlejší efekty Z nějakého důvodu považuje prohlížeč IE5.x/Win záporný levý a pravý okraj za větší, než jak tomu ve skutečnosti je. V některých případech se udaná velikost mezery dokonce zdvojnásobí. Tato skutečnost poněkud omezuje možnost uplatnění záporných okrajů pro účely posunutí, nicméně, za určitých okolností (jako je tato) však mohou nalézt uplatnění bez větších potíží. Nicméně, v jakémkoliv designu, kde je požadavek na přesné umístění elementů, by se pro jistotu nemělo používat posunutí pomocí záporné hodnotou okrajů.

8 218 PROJEKT 10 Obr Posunutí menu doprava. Černé orámování menu působí trochu nevlídným dojmem, což je navíc umocněno purpurovou barvou kolem dokola. Pokusme se to napravit změnou barvy orámování na maličko tmavší odstín než má nastaveno pozadí stránky. Jednoduše vyjdeme z hodnoty barvy pozadí pro element body, což je #969, a od každé číslice odečteme dvojku. div#menu {float: right; width: 5em; padding: 0; margin: 0-1.5em 0.25em 0.5em; border: 1px solid #747; background: white;} Samozřejmě, jednotlivé odkazy v menu na sebe navzájem navazují jako na sebe navazují slova běžného textu, protože se jedná o řádkové elementy. Pokud chceme umístit každý odkaz na vlastní řádek, musíme pro to něco udělat. Namísto vkládání klasických elementů <br> se zkrátka vydáme cestou vytvoření blokových elementů (pro více informací viz Projekt 5). Přidejme ještě k dobru nějakou tu výplň a když už si s tím dáváme takovou práci, vycentrujme text jednotlivých odkazů; výsledek je zachycen na obrázku div#menu {float: right; width: 5em; padding: 0; margin: 0-1.5em 0.25em 0.5em; border: 1px solid #747; background: white;} div#menu a { display: block; text-align: center; padding: 0.2em 0.5em;} div#footer {margin: 0 11em 0 2em; padding: 0.25em; text-align: center; font-style: italic; color: #969;}

9 JAK VYZRÁT NA BOX 219 Obr Posunutí menu mimo oblast a umístění odkazů do řádků. Myslíme v úhlech Celkově vzato náš design si nestojí vůbec špatně. Připusťme, že stále máme před sebou množství rovných čar a ostrých rohů, nicméně, náš efekt spočívá v použití nepravidelného polygonu namísto běžných obdélníkových tvarů. Přesto by nám určitě přišlo vhod několik šikmých čar jako alternativa vůči rovným čarám, které mají v našem layoutu stále dominantní postavení. Bylo by ovšem ještě více působivější, kdybychom tyto šikmé čáry vytvořili zkombinováním obvyklých HTML elementů a CSS namísto klasického použití obrázků. Domníváte se, že je to zhola nemožné? Popravdě řečeno k něčemu takovému není potřeba o nic více, než to, co nám nabízí CSS1. Pojďme tedy v současném projektu mírně upravit konec stránky. Zápatí vzhledem k části div, která mu předchází, mírně zúžíme. Jejich společným pojítkem pak budou šikmé čáry. Nejlepší na tom je ovšem to, že stačí upravit styl u prvku div, jehož prostřednictvím je zápatí definováno. Začneme přizpůsobením okrajů zápatí tak, aby byly shodné s div#p2. Následně doplníme zápatí o patřičně silné orámování v úžasně křiklavé barevné kombinaci, což v celé kráse zachycuje obrázek div#footer {margin: 0 10em 0 2em; padding: 0.25em; text-align: center; font-style: italic; color: #969; border: 1.5em solid; border-color: red lime blue cyan;}

10 220 PROJEKT 10 Obr Velmi křiklavé orámování kolem zápatí. Co za tím vězí? Zdroj inspirace pro tento efekt pochází z ukázky nazvané An Exercise in Regular Polygons, kterou je možno zhlédnout na Tantek Celik zde brilantním způsobem demonstroval možnosti tvorby šikmých čar s využitím CSS, což položilo základy pro vytváření efektů podobného ražení, jako byl právě ten, který jsme použili v našem projektu. Větší mezera Povšimněte si, že nyní je mezi textem a zápatím více prázdného místa. Za to je zodpovědné horní orámování a nedá se tím tedy nic dělat. Prázdný prostor, který zde máme jaksi navíc, je sice možné zredukovat zmenšením tloušťky rámečku, nicméně, to by vedlo k nechtěnému efektu v podobě zúžení orámování po stranách a v horní části zápatí. Popravdě řečeno, teď to vypadá docela ošklivě. Jde však pouze o přechodný stav, kdy se vám snažíme usnadnit pochopení toho, jak to všechno funguje. Pozorně se podívejte na rohy zápatí. Všimli jste si šikmých předělů v místě, kde se potkávají barvy? Jsou vždy přítomny v rozích rámečku každého elementu. Protože jen velmi málo designerů nastavuje šířku orámování na větší hodnotu než 1 nebo 2 pixely nebo používá odlišnou barvu pro každou jeho část, zůstávají tyto šikmé čáry prakticky bez povšimnutí. Nyní, když jsme se s nimi seznámili, můžeme je s úspěchem využít pro naše potřeby. Klíč k úspěchu leží v manipulaci s barvou a šířkou jednotlivých částí orámování, čímž lze dosáhnout požadovaného efektu. Namísto barevné kombinace červená/ zelená/modrá/azurová musíme použít právě ty dvě barvy, kterými je obklopen div zastřešující zápatí. Tudíž, potřebujeme orámování na obou stranách barevně sladit s barvou pozadí pro prvek body a horní orámování pak s barvou pozadí prvku div ležícího bezprostředně nad ním. div#footer {margin: 0 10em 0 2em; padding: 0.25em; text-align: center; font-style: italic; color: #969; border: 1.5em solid; border-color: #FDF #969;} Kromě tohoto nastavení barev se musíme postarat ještě o jednu záležitost. Spodní orámování zápatí právě rozšířilo oblast vyplněnou světle purpurovou barvou, což není přesně to, co bychom zamýšleli. Máme na výběr ze dvou možnosti, jak toto vyřešit. Jedna z nich spočívá v tom, že se velikost orámování spodní části zápatí se nastaví na nulovou hodnotu. Tím bychom se zbavili přebytečné oblasti se světle purpurovou barvou. Druhou možností je zvolit pro orámování spodní částí zápatí stejnou barvu, jaká je nadefinována pro pozadí prvku body přebytečná oblast pak zmizí. Vůbec nezáleží na tom, pro kterou z možností se nakonec rozhodneme, nicméně, změna barvy vyžaduje kratší zápis a tudíž použijeme toto řešení. Výsledek viz obrázkek div#footer {margin: 0 10em 0 2em; padding: 0.25em; text-align: center; font-style: italic; color: #969; border: 1.5em solid; border-color: #FDF #969 #969;}

11 JAK VYZRÁT NA BOX 221 Obr Šikmé čáry pro potěchu oka. Tato finta hovoří doslova sama za sebe, nicméně, opravdu funguje pouze v situacích podobné té naší, kdy je potřeba překrýt mezeru oddělující dva elementy buďto rozšířením nebo zúžením společné barvy pozadí. Očekávaný efekt se prostě nedostaví v případě rozdílných barev nebo v případě existence orámování prvku. Rovněž nepochodíme ve většině případů, ve kterých je použitý obrázek na pozadí. Výsledky naší dosavadní práce shrnuje výpis zdrojového kódu A již za okamžik nás čeká další krok zaoblené tvary. Výpis 10.2 Shrnutí dosavadního stylu <style type="text/css"> body {background: #969; color: black;} div.wrap {background: #FDF; color: black; margin: 0 2em;} p {margin: 0; padding: 0.5em 1em;} h1, h2 {margin: 0; padding: 0 0.5em;} div#p1 {margin: 0 2em 0 10em;} div#p2 {margin: 0 10em 0 2em;} div#menu {float: right; width: 5em; padding: 0; margin: 0-1.5em 0.25em 0.5em; border: 1px solid #747; background: white;} div#menu a {display: block; text-align: center; padding: 0.2em 0.5em;} div#footer {margin: 0 10em 0 2em; padding: 0.25em; text-align: center; font-style: italic; color: #969; border: 1.5em solid; border-color: #FDF #969 #969;} </style>

12 222 PROJEKT 10 Příchod zaoblených tvarů Do této chvíle jsme si ukázali, jak lze s pomocí vhodně spojených boxů vytvářet nepravidelné tvary a jak využít orámování boxu pro tvorbu šikmých čar. Ale co třeba zaoblené tvary? Je možné HTML elementy přinutit k tomu, aby něco takového zobrazovaly? Prvotní odpověď zní, že to nejde. Ale s využitím několika obyčejných obrázků a troškou nápaditého přístupu při vytváření stylů, je možné vytvořit zaoblené rohy nebo eventuálně dosáhnout obtékání textu podél zaobleného tvaru namísto vnitřku boxů. Naše vlastní muchomůrka Vzhledem k tématu, o kterému se věnuje námi upravovaná webová stránka, by jistě bylo zajímavou ukázkou důmyslnosti vytvořit layout ve tvaru houby. O tom nejsou pochyby. Pojďme si tedy trochu malinko pohrát s okraji, čímž vtiskneme našemu layoutu jakýsi náznak tvaru muchomůrky (viz obrázek 10.9). div#p1 {margin: 0 2em;} div#p2 {margin: 0 10em;} div#menu {float: right; width: 5em; padding: 0; margin: 0-1.5em 0.25em 0.5em; border: 1px solid #747; background: white;} div#menu a {display: block; text-align: center; padding: 0.2em 0.5em;} div#footer {margin: 0 10em; padding: 0.25em; text-align: center; font-style: italic; color: #969; border: 1.5em solid; border-color: #FDF #969 #969;} Obr Několik jednoduchých úprav vede k zásadním změnám layoutu. No zatím to spíše připomíná písmeno T než tvar nějaké muchomůrky. Pro lépe vyhlížející tvar houby potřebujeme zaoblit celou škálu ostrých rohů, v našem layoutu jde zejména o oblast samotného kloboučku (div#p1). Tohle už sice nebude tak jednoduché, nicméně, bude to pořádně zajímavé.

13 Spodek kloboučku Ze všeho nejdříve provedeme zaoblení spodních rohů kloboučku houby. Pro tento efekt budeme potřebovat dva samostatné obrázky, které zaujmou místo v příslušném elementu div. Jejich vzhled je ve čtyřnásobném zvětšení zachycen na obrázku JAK VYZRÁT NA BOX 223 Obr S těmito dvěma soubory typu GIF provedeme zaoblení kloboučku. První krok bude spočívat v doplnění samotného dokumentu o malou část kódu. Potřebujeme vložit prvek div, do kterého pak vložíme obrázek pro pravý spodní roh (nikoliv však pro levý spodní roh). <p> I suppose it s the taste which appeals to some of us. I understand that grasshoppers can be very tasty, too, so who am I to judge? People will eat all manner of weird stuff. But fungus? I don t know. Maybe the morel is that those of us who eat mushrooms aren t really "us," if you see what I mean. It could be that the mushroom-eaters of the world are really some bizarre fungusbased aliens who are secretly planning to take over the world! Just like on <cite>the X-Files</cite>! If that s the case, though, I wonder when I ll get my instructions from the mothership. </p> <div id="p1end"><img src="p1botrt.gif" alt=" "></div> </div> V tomto okamžiku máme odpovídajícím způsobem označený div, který obsahuje daný obrázek. Pochopitelně, až do té doby, než se rozhodneme učinit nějakou změnu, bude příslušný obrázek zarovnán doleva. Do pravého rohu jej můžeme umístit za přispění jednoduchého text-align. A když už jsme v tom, můžeme dát na příslušné místo další zbývající roh. div#p1 {margin: 0 2em;} div#p1end {text-align: right; margin: 0; padding: 0; background: #FDF url(p1botleft.gif) bottom left no-repeat;} div#p2 {margin: 0 10em;}! Odstranění prázdných míst Odstraněním všech mezer mezi prvky img a div jsme zajistili, že div nezobrazuje žádné dodatečné mezery, které nepotřebujeme. Některé prohlížeče, obzvláště IE5. x/win, považují za mezeru, kterou je zobrazit na stránce, i stisk klávesy Enter ve zdrojovém kód. U jiných prohlížečů může být vše nebo taktéž nemusí v pořádku, ale my raději eventuálním komplikacím předejdeme tak, že odstraníme všechny nepotřebné mezery v dokumentu. Zde je důležité si uvědomit, že jsme přesunuli obrázek p1botrt.gif na pravou stranu elementu div, přičemž současně byl obrázek p2botleft.gif umístěn do levého spodního rohu. Poněvadž tento div ukončuje oblast s kloboučkem, oba dva obrázky budou nakonec umístěny v rozích. Je možné se přesvědčit při pohledu na obrázek Přesně tak pomocí několika obrázků jsme dokázali vylepšit náš design. V této myšlence budeme pokračovat dále zaoblíme rohy v místě, kde se klobouček setkává s nožkou.

14 224 PROJEKT 10 Obr Zaoblení spodní části kloboučku odlehčí design. Obr Dva obrázky, které použijeme ke spojení kloboučku a nožky. Zaoblený přechod Nyní můžeme vložit další prvek div do horní části div#p2, kam bychom pak umístili požadované zaoblení, ale v zásadě, nic takového není potřeba. Máme tady totiž element, který se nám bude pro daný účel náramně hodit. Vše, co bude prvek h2 potřebovat, jsou obrázky a nějaký ten styl. Budeme muset použít dva nové obrázky, protože ty, které jsme měli k dispozici před tím, pro klobouček houby, nám zde nebudou moc platné. Obrázky, které vměstnáme do elementu h2, zachycuje obrázek Prázdný alt U těchto obrázků nespecifikujeme žádnou hodnotu u atributu alt, protože tyto obrázky se přímo nepodílejí na obsahu stránky není nutné je tedy popisovat způsobem určeným pro čtečky obrazovky ( screenreader), které používají uživatelé s postižením zraku. Postup by pochopitelně lišil v případě umístění loga či tlačítek, ovšem, v našem designu nic takového není. Překvapivě ale není možné se držet stejného postupu, který předtím fungoval u div#p2. V okamžiku, kdy se pokusíme zarovnat prvek h2 doprava, abychom mohli umístit zaoblení, dojde ve stejný okamžik u prvku h2 k zarovnání textu doprava, což nechceme. To vysvětluje, proč bude obrázek pro levý horní okraj nožky umístěn na začátku elementu h2. <h2><img src="p2topleft.gif" alt=" "> a fun guy</h2> Povšimněte si mezery vložené mezi obrázek a text. Účelem je zabránit textu v tom, aby ocitnul hned vedle obrázku.

15 JAK VYZRÁT NA BOX 225 Nyní je potřeba na pozadí elementu h2 vložit do pravého horního rohu odpovídající zaoblení nožky. Rovněž musíme zařídit, aby byl současně levý zaoblený horní roh zarovnán vůči horní hraně elementu h2. h1, h2 {margin: 0; padding: 0 0.5em;} h2 {background: transparent url(p2toprt.gif) right top no-repeat;} h2 img {vertical-align: top;} div#p1 {margin: 0 2em;} V tomto okamžiku se jedno zaoblení usídlilo v levém horním rohu prvku h2 coby jeho obsah. Druhé zaoblení pak zaujímá pravý horní roh, ovšem, tváří se jako pozadí tohoto elementu. Je zde pouze jeden problém: obě zaoblení jsou umístěna uvnitř nožky houby. Aby byla iluze dokonalá, potřebujeme je mít vně. Víme, že zaoblení jsou tvořena obrázky se stranami o velikosti 20 pixelů a kolem elementu h2 nemůže být žádná výplň. Výplň by totiž odsunula levý horní roh z jeho určeného místa. To vysvětluje, proč musí být výplň nastavena na nulu a levý a pravý okraj h2 na -20px. V důsledku toho se levý a pravý okraj h2 ocitne mimo oblast nožky, přičemž je budou doprovázet i rohové obrázky. Tento efekt si můžeme prohlédnout na obrázku h2 {margin: 0-20px; padding: 0; background: transparent url(p2toprt.gif) right top no-repeat;} Průhlednost Barva pozadí byla pro element h2 nastavena zcela záměrně jako průhledná, aby přes ni mohla prosvítat jakákoliv jiná barva pozadí. Tato skutečnost bude hrát před dokončením projektu klíčovou roli. Obr Záporné okraje a nepřítomnost výplně umístí obrázky tam, kam patří. Při pohledu na klobouček a nožku se před námi objeví několik ladných křivek, ale zdaleka nejsme ještě hotovi. Spodek kloboučku se již nemusí nijak upravovat ale co jeho vršek? Stále je příliš hranatý.

16 226 PROJEKT 10 Uzavření kloboučku Pohled na vršek kloboučku nás zcela určitě přivede k myšlence, že jednoduše vezmeme zaoblené rohy, vsuneme je do prvku h1 a prohlásíme vše za hotové. Nicméně, touto cestou se nevydáme. Namísto toho pozvedneme myšlenku oblých tvarů pro potřeby webového designu na zcela novou úroveň. Vedle přikrášlení designu velkými oblouky v horních rozích, se nám dostane odměny v podobě obtékání textu podle těchto oblouků. Opravdu. Ze všeho nejdřív je ale nutné si obstarat zaoblený grafický prvek, který je dostatečně velký pro naše účely. Řekněme, že rozměr 200x200 px by mohl být tak akorát. Další krok bude spočívat v jeho rozdělení do několika vrstev. Bohatě nám postačí, když jej rozdělíme na osm částí, jak je znázorněno na obrázku Obr Levý horní oblouk (zobrazen v prostředí Adobe Photoshop). Dalo by se sice uvažovat o rozdělení na 10 částí, kde by každá část měla výšku 20 pixelů, nicméně, vůbec nevadí, když spodní část oblouku bude vysoká celkem 60 pixelů je totiž dost úzká na to, aby nám to nevadilo. Nyní náš čeká poměrně nudná část. Pro každou část oblouku se vybere dostatečně velká oblast tak, aby zasahovala do oblasti s tmavě purpurovou barvou (za okamžik pochopíte, proč tomu tak je). Zvolená oblast bude uložena jako obrázek ve formátu GIF, přičemž světle purpurová barva se nastaví jako transparentní. Jak to bude vypadat v praxi, ukazuje obrázek 10.15, kde jsou zachyceny dva grafické prvky získané z oblouku.

17 JAK VYZRÁT NA BOX 227 Obr Dvě části oblouku; šachovnicový vzorek značí průhlednost. Jakmile budeme mít pohromadě všech osm částí (které pojmenujeme jako curve1.gif až curve8.gif), uložíme je do adresáře nazvaného jako curve-l. Pro vložení obrázků do dokumentu je potřeba vytvořit následující krátký úsek kódu. <body> <div class="wrap" id="p1"> <img src="curve-l/curve1.gif" alt=" " class="curve-l"> <img src="curve-l/curve2.gif" alt=" " class="curve-l"> <img src="curve-l/curve3.gif" alt=" " class="curve-l"> <img src="curve-l/curve4.gif" alt=" " class="curve-l"> <img src="curve-l/curve5.gif" alt=" " class="curve-l"> <img src="curve-l/curve6.gif" alt=" " class="curve-l"> <img src="curve-l/curve7.gif" alt=" " class="curve-l"> <img src="curve-l/curve8.gif" alt=" " class="curve-l"> <h1>much room to think</h1> Když tento kód máme v dokumentu, sestavíme z něj požadovaný oblouk. Protože se ale jedná o řádkové elementy, jsou všechny tyto části poskládány jedna za druhou. Tento stav je nutno změnit musíme však na to jít chytře. Před vytvářením blokově orientovaných elementů dáme přednost použití vlastnosti float, která je posune doleva. div#footer {margin: 0 10em; padding: 0.25em; text-align: center; font-style: italic; color: #969; border: 1.5em solid; border-color: #FDF #969 #969;} img.curve-l {float: left;} </style> To však nestačí. Pokud je naším záměrem poskládat jednotlivé části pěkně nad sebe, musíme zařídit, že každá část zaujme místo vlevo pod obrázkem, který jí předcházel. Pro tento účel nebude potřeba použít nic jiného, než vlastnost clear. Aby bylo na první pohled jasné, jak se věci mají, nastavíme těmto obrázkům dočasné orámování (viz obrázek 10.16). img.curve-l {float: left; clear: left; border: 1px solid gray;}

18 228 PROJEKT 10 Obr Jednotlivé části vytvoří oblouk. Povšimněte si, jakým způsobem vyplňuje text prostor vedle obrázků. Výsledný efekt je vlastně názorným důkazem obtékání textu podél oblouku. Dost dobré, není-liž pravda? Přirozeně zde existuje několik dalších věcí, na které je dobré dát si pozor. Obrázky musí být úplně zarovnány k levému okraji div#p1; pokud tomu tak není, iluze obtékání se zhroutí jako domeček z karet. Neměli bychom rovněž zapomenout na přidání nevelkého okraje vpravo, aby se text neoctnul příliš blízko oblouku. A konečně můžeme odstranit to odporné šedé orámování. img.curve-l {float: left; clear: left; margin: 0 0.5em 0 0;} Rozhodně nebude na škodu, když trochu změníme styl nadpisu h1. Trochu tmavší pozadí a orámování ve spodní části společně zanechávají příjemný dojem, a navíc ukazují jednu udivující vlastnost právě vytvořeného oblouku. h1, h2 {margin: 0; padding: 0 0.5em;} h1 {background-color: #EBE; border-bottom: 1px solid #969;} h2 {margin: 0-20px; padding: 0; background: transparent url(p2toprt.gif) right top no-repeat;} Vzpomeňte si, že prvek h1 ve skutečnosti vytvořený oblouk obtéká. Pokud jste prošli přes Projekt 9, asi tušíte, k čemu zde dojde. Při pohledu na obrázek si můžete ověřit, zdali byl váš odhad správný. Nyní se v celé kráse ukazuje, proč jsme se k poněkud pracnějšímu nastavení transparentnosti u světle purpurových oblastí grafických prvků tvořících oblouk. Pokud bychom to neučinili, měli bychom nyní co do činění s velkými plochami světle purpurové barvy, které by překryly pozadí elementu h1. Nyní ovšem po nich není ani památky jsou totiž jakoby zasunuty pod plovoucí elementy. Velkou výhodu lze spatřovat v tom, že vůbec nezáleží na velikosti použitého textu a tudíž ani na výšce, kterou má element h1 tento efekt to nijak neovlivňuje.

19 JAK VYZRÁT NA BOX 229 Obr Celistvý oblouk se symbolickým klobouček s titulkem. Druhý oblouk kloboučku Tato finta hovoří doslova sama za sebe, ovšem, naše práce je hotova teprve z poloviny. Pravý horní roh kloboučku je stále silně hranatý. Budeme zde potřebovat umístit zrcadlově otočenou variantu předchozího oblouku. Postup je na první pohled zřejmý, nicméně, tentokrát půjdeme na věc trochu jinak. Zřejmě se opět nevyhneme nutnosti rozdělit větší grafický prvek na jednotlivé dílčí úseky Mohli bychom sice ve vodorovném směru otočit levý oblouk a znovu jej použít, nicméně, my si to trošku ztížíme a nahradíme jej motivem zachyceným na obrázku Obr Zbývající oblouk kloboučku (zobrazen v prostředí Adobe Photoshop). Všimli jste si boxu s textem peekaboo!, který vyčnívá mimo oblouk? Samozřejmě je to nedílná součást grafického prvku. Rozhodně ji ale nenecháme ležet ladem a nějak ji využijeme. Nejprve ale musíme absolvovat stejnou proceduru jako s prvním obloukem: z každého úseku vezmeme přiměřeně velkou část tak, aby zahrnovala oblast s tmavě purpurovou barvou a uložíme ji jako obrázek ve formátu GIF, kde světle purpurovou složku nastavíme jako transparentní. Všechny tyto soubory pak shromáždíme v adresáři s názvem curve-r.

20 230 PROJEKT 10 Nyní doplníme něco málo HTML kódu. Kód musí být do stránky vložen přesně stejným způsobem, jak to ukazuje následující výpis: <img src="curve-l/curve1.gif" alt=" " class="curve-l"> <img src="curve-r/curve1.gif" alt=" " class="curve-r"> <img src="curve-l/curve2.gif" alt=" " class="curve-l"> <img src="curve-r/curve2.gif" alt=" " class="curve-r"> <img src="curve-l/curve3.gif" alt=" " class="curve-l"> <img src="curve-r/curve3.gif" alt=" " class="curve-r"> <img src="curve-l/curve4.gif" alt=" " class="curve-l"> <img src="curve-r/curve4.gif" alt=" " class="curve-r"> <img src="curve-l/curve5.gif" alt=" " class="curve-l"> <img src="curve-r/curve5.gif" alt=" " class="curve-r"> <img src="curve-l/curve6.gif" alt=" " class="curve-l"> <img src="curve-r/curve6.gif" alt=" " class="curve-r"> <img src="curve-l/curve7.gif" alt=" " class="curve-l"> <img src="curve-r/curve7.gif" alt=" " class="curve-r"> <img src="curve-l/curve8.gif" alt=" " class="curve-l"> <img src="curve-r/curve8.gif" alt=" " class="curve-r"> <h1>much room to think</h1> Co vězí za tímto střídáním kódu pro levý a pravý oblouk? Nuže, podle CSS nesmí žádný plovoucí element sahat výše, než kde se nachází vrchol nějakého předchozího elementu. Z toho tedy plyne, že pokud bychom umístili všechny obrázky tvořící pravý oblouk za obrázky, které patří k levému oblouku, vrchol pravého oblouku by se nacházel na stejné úrovni, jako spodek levého oblouku. A to opravdu není výsledek, který chceme. A pochopitelně, bez správných stylů se nedopracujeme k požadovanému efektu. Vše, co potřebujeme, jsou v podstatě zrcadlově otočené hodnoty stylů z levého oblouku. Výsledek je pak ukázán na obrázku img.curve-l {float: left; clear: left; margin: 0 0.5em 0 0;} img.curve-r {float: right; clear: right; margin: em;} </style> Obr Naše houba má hezky tvarovaný klobouček.

O CSS podrobněji. Box model Document flow Layout

O CSS podrobněji. Box model Document flow Layout O CSS podrobněji Box model Document flow Layout O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin) O CSS podrobněji http://www.w3.org/tr/css21/box.html

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech

Více

Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči

Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči Autor: Mgr. Tomáš Javorský Datum vytvoření: 06 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: DUM seznamuje

Více

Přehled základních html tagů

Přehled základních html tagů Přehled základních html tagů h1... hlavní nadpis h2... podnadpisy h3... podnadpisy další úrovně p... odstavec strong... tučné písmo b... tučné písmo em... kurzíva i... kurzíva br... zalomení řádku ol...

Více

TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz

TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz 6 24.3.2015 aneta.bartuskova@uhk.cz Layout 24.3.2015 aneta.bartuskova@uhk.cz Layout stránky = strukturní i vizuální rozvržení webové stránky Stránka je chápána jako skupina oblastí, každá oblast má svůj

Více

Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití

Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Seznámení

Více

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 4. Formátovací model, pozicování

Více

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03c 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML

Více

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KLÍČOVÉ POJMY textové editory formát textu tabulka grafické objekty odrážky a číslování odstavec CÍLE KAPITOLY Pracovat s textovými dokumenty a ukládat je v souborech různého

Více

Dokument a jeho části oddíly, záhlaví, zápatí

Dokument a jeho části oddíly, záhlaví, zápatí Dokument a jeho části oddíly, záhlaví, zápatí Nejčastějším úkolem bývá ukončení stránky a pokračování textu na další stránce nebo vložení stránky před napsaný text. Podobným úkolem je jiné svislé zarovnání

Více

Základy HTML. Autor: Palito

Základy HTML. Autor: Palito Základy HTML Autor: Palito Zobrazení zdrojového kódu Zobrazení zdrojového kódu Každá stránka je na disku nebo na serveru uložena ve formě zdrojového kódu. Ten kód je psaný v jazyce HTML. Když si chcete

Více

Kapitola 5 Tvoříme tabulky

Kapitola 5 Tvoříme tabulky Kapitola 5 Tvoříme tabulky 5 V předchozích kapitolách jsme získali potřebný základ k tomu, abychom mohli úspěšně tvořit části i celé WWW stránky. Pojďme si tedy na chvíli oddechnout. Podíváme se na projekt

Více

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu

Více

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne Obrázky Tag Význam Párový Výskyt img obrázek ne img video ne map klikací mapa ano area oblast v klikací mapě ne Img Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného

Více

METODICKÝ POKYN PRÁCE S MS Word MÍRNĚ POKROČILÍ. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.

METODICKÝ POKYN PRÁCE S MS Word MÍRNĚ POKROČILÍ. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. METODICKÝ POKYN PRÁCE S MS Word MÍRNĚ POKROČILÍ Formátování textu Text formátujeme (určujeme jeho vlastnosti) na pásu karet DOMŮ. U textu můžeme formátovat font, velikost písma, řez, barvu písma, barvu

Více

Úvod do problematiky ÚPRAVY TABULKY

Úvod do problematiky ÚPRAVY TABULKY Úvod do problematiky ÚPRAVY TABULKY Zaměříme se na úpravy, které určují finální grafickou úpravu tabulky (tzv. formátování.). Měnit můžeme celou řadu vlastností a ty nejdůležitější jsou popsány v dalším

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek 1 HTML Hyper Text Markup Language = hypertextový značkovací jazyk Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy HTML soubor je obyčejný text obalený

Více

Vkládání prvků do dokumentu MS Word

Vkládání prvků do dokumentu MS Word Vkládání prvků do dokumentu MS Word 1. Vkládání Do dokumentu můžeme vložit celou řadu prvků, počínaje čísly stránek a obrázky konče. 1.1. Konec stránky Pokud chceme, aby odstavec byl vždy posledním na

Více

Nová struktura souborů a složek

Nová struktura souborů a složek Tvorba podstránek Vytvoření podstránek Asi si kladete otázku, jakým způsobem docílíme toho, aby se všechny podstránky na našem webu zobrazovaly v námi vytvořeném layoutu. Máme 4 možnosti jak vytvářet podstránky

Více

OBRÁZKY (FOTKY, OBRAZCE) vložení a editace

OBRÁZKY (FOTKY, OBRAZCE) vložení a editace OBRÁZKY (FOTKY, OBRAZCE) vložení a editace K vložení grafického, nebo i jiného objektu do dokumentu se použije záložka VLOŽENÍ. Přehledně zde máme pohromadě vše, co lze do Wordu vložit. Ukažme si vložení

Více

Ovládání Open Office.org Calc Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako.

Ovládání Open Office.org Calc Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako. Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako. Otevře se tabulka, v které si najdete místo adresář, pomocí malé šedočerné šipky (jako na obrázku), do kterého

Více

ROZLOŽENÍ STRÁNKY, NÁVRH. Okraje

ROZLOŽENÍ STRÁNKY, NÁVRH. Okraje ROZLOŽENÍ STRÁNKY, NÁVRH Ve Wordu tedy můžeme nastavovat vlastnosti písma, vlastnosti odstavce a také vlastnosti stránky. Přesuneme se na záložku ROZLOŽENÍ STRÁNKY, kde tyto najdeme v levé části. Další

Více

Vlastnosti dokumentu/stránky

Vlastnosti dokumentu/stránky Vlastnosti dokumentu/stránky Formát stránky papíru pro tisk V záložce Rozložení stránky na pásu karet najdeme vše potřebné pro přípravu dokumentu před tiskem. 1) Záložka Rozložení stránky 2) Změna Orientace

Více

Styly odstavců. Word 2010. Přiřazení stylu odstavce odstavci. Změna stylu odstavce

Styly odstavců. Word 2010. Přiřazení stylu odstavce odstavci. Změna stylu odstavce Styly odstavců V textu, který přesahuje několik stránek a je nějakým způsobem strukturovaný (což znamená, že se dá rozdělit na části (v knize jim říkáme kapitoly) a jejich podřízené části (podkapitoly),

Více

Jak vytvořit nebo předělat vlastní motiv pro SunLight CMS

Jak vytvořit nebo předělat vlastní motiv pro SunLight CMS Jak vytvořit nebo předělat vlastní motiv pro SunLight CMS V tomto tutoriálu se podíváme na to, jak si při troše šikovnosti udělat nebo předělat vybraný motiv pro redakční systém SunLight CMS. Jako příklad

Více

Tvorba fotogalerie v HTML str.1

Tvorba fotogalerie v HTML str.1 Tvorba fotogalerie v HTML str.1 obr. A obr. B 1) Spustíme PsPad, vytvoříme nový dokument a otevře se nám okno nový soubor, kde si můžeme zvolit jaký chceme typ. My označíme HTML a potvrdíme. 2) Pro správné

Více

6. Formátování: Formátování odstavce

6. Formátování: Formátování odstavce 6. Formátování: Formátování odstavce Obrázek 1: Formát / Odstavec Odstavec je text mezi dvěma znaky konce odstavce. Konec odstavce je skrytý znak a vkládáme jej během psaní při každém stisknutí klávesy

Více

Rozměry, okraje a rámečky

Rozměry, okraje a rámečky Rozměry, okraje a rámečky 185 Jaké jednotky délky lze v CSS použít Jednotky délky slouží k zapisování vzdálenosti a definují se jimi jak rozměry elementů, tak rozměry okrajů či rámečků. Zapisují se hned

Více

Zá klady HTML. Tag HTML Párová značka, který definuje webovou stránku. Obsah stránky končí značkou

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou Zá klady HTML Jazyk HTML (Hypertext Markup Language) - jedná se o souhrn pravidel pro formatování textu, obrázků atd. pro použítí na webových stránekách. Webovou stránku tvoří prvky, které jsou definovány

Více

IE1 jazyk HTML a kaskádové styly

IE1 jazyk HTML a kaskádové styly IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.

Více

MS PowerPoint ZÁKLADY

MS PowerPoint ZÁKLADY MS PowerPoint ZÁKLADY UKÁZKA ŠKOLÍCÍCH MATERIÁLŮ Centrum služeb pro podnikání s.r.o. 2014, I. Verze, TP OBSAH 1. Úvod do PowerPointu... 1 2. Otevření PowerPointu... 1 3. Pracovní prostředí PowerPointu...

Více

IE1 jazyk HTML a kaskádové styly

IE1 jazyk HTML a kaskádové styly IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.

Více

. Grafika a plovoucí prostředí. Zpracování textů na počítači. Ing. Pavel Haluza, Ph.D. ústav informatiky PEF MENDELU v Brně haluza@mendelu.

. Grafika a plovoucí prostředí. Zpracování textů na počítači. Ing. Pavel Haluza, Ph.D. ústav informatiky PEF MENDELU v Brně haluza@mendelu. Grafika a plovoucí prostředí Zpracování textů na počítači Ing Pavel Haluza, PhD ústav informatiky PEF MENDELU v Brně haluza@mendelucz Kreslení vektorových obrazů Příklad \unitlength=1mm \begin{picture}(50,30)(10,20)

Více

Zobrazování bannerů podporují pouze nově vytvořené šablony motivů vzhledu.

Zobrazování bannerů podporují pouze nově vytvořené šablony motivů vzhledu. Bannerový systém ProEshop od verze 1.13 umožňuje zobrazování bannerů na popředí e-shopu. Bannerový systém je přístupný v administraci e-shopu v nabídce Vzhled, texty Bannerový systém v případě, že aktivní

Více

WEBOVÉ STRÁNKY www.krestanskevanoce.cz

WEBOVÉ STRÁNKY www.krestanskevanoce.cz WEBOVÉ STRÁNKY www.krestanskevanoce.cz Domovská stránka Křesťanských Vánoc je založena na databázi, která vedle běžných funkcí redakčního systému internetové prezentace umožňuje též uložit údaje o jednotlivých

Více

Administrace webu Postup při práci

Administrace webu Postup při práci Administrace webu Postup při práci Obsah Úvod... 2 Hlavní menu... 3 a. Newslettery... 3 b. Administrátoři... 3 c. Editor stránek... 4 d. Kategorie... 4 e. Novinky... 5 f. Produkty... 5 g. Odhlásit se...

Více

Prezentace. Prezentace. 6. InDesign obtékání textu, zarovnání. Vytvořil: Tomáš Fabián vytvořeno 14. 11. 2012. www.isspolygr.cz

Prezentace. Prezentace. 6. InDesign obtékání textu, zarovnání. Vytvořil: Tomáš Fabián vytvořeno 14. 11. 2012. www.isspolygr.cz 6. InDesign obtékání textu, zarovnání www.isspolygr.cz Vytvořil: Tomáš Fabián vytvořeno 14. 11. 2012 Strana: 1 Škola Ročník 4. ročník (SOŠ, SOU) Název projektu Interaktivní metody zdokonalující proces

Více

Tabulkový procesor. Orientace textu. O úroveň níž O úroveň výš

Tabulkový procesor. Orientace textu. O úroveň níž O úroveň výš Formátování Formátováním rozumíme změnu vlastností daného objektu, dle našich představ a možností programu MS Excel. Formátovat můžeme texty v buňkách, můžeme formátovat buňky, listy i celý sešit a měnit

Více

(X)HTML, CSS a jquery

(X)HTML, CSS a jquery Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou

Více

Copyright 2013 Martin Kaňka; http://dalest.kenynet.cz

Copyright 2013 Martin Kaňka; http://dalest.kenynet.cz Copyright 2013 Martin Kaňka; http://dalest.kenynet.cz Popis aplikace Tato aplikace je koncipována jako hra, může být použita k demonstraci důkazu. Může žáky učit, jak manipulovat s dynamickými objekty,

Více

Pracovní plocha. V první kapitole se seznámíme s pracovním prostředím ve Photoshopu.

Pracovní plocha. V první kapitole se seznámíme s pracovním prostředím ve Photoshopu. Obsah 1. Pracovní plocha 2. Paleta nástrojů, Paletky, Pruhy voleb 3. Paletka Navigator (Navigátor), nástroj Zoom (Lupa) 4. Práce s dokumentem - otevírání, zavírání, ukládání 1. Pracovní plocha V první

Více

StatSoft Jak vyzrát na datum

StatSoft Jak vyzrát na datum StatSoft Jak vyzrát na datum Tento článek se věnuje podrobně možnostem práce s proměnnými, které jsou ve formě datumu. A že jich není málo. Pokud potřebujete pracovat s datumem, pak se Vám bude tento článek

Více

Vytváříme prezentaci její strukturu a celkový vzhled Práce s textem a vkládání objektů 1

Vytváříme prezentaci její strukturu a celkový vzhled Práce s textem a vkládání objektů 1 Vytváříme prezentaci její strukturu a celkový vzhled Práce s textem a vkládání objektů 1 a) Práce s textem Textové pole Pro práci s textem v PowerPointu je nutné mít nejprve vytvořená textová pole, do

Více

ID-Ware II Editace docházky

ID-Ware II Editace docházky ID-Ware II Editace docházky Obsah 1.Vložení průchodu...3 1.1.1.1.Příchod do práce nebo odchod z práce...3 1.2.1.2.Začátek přerušení...3 1.3.1.3.Ukončení přerušení...5 1.3.1Ukončení přerušení na něž bezprostředně

Více

MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress

MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress www.webdevel.cz Webdevel s.r.o. IČ 285 97 192 DIČ CZ28597192 W www.webdevel.cz E info@webdevel.cz Ostrava Obránců míru 863/7 703 00 Ostrava Vítkovice M 603

Více

22. Tvorba webových stránek

22. Tvorba webových stránek 22. Tvorba webových stránek Webové stránky jsou spolu s elektronickou poštou nejpoužívanější prostředky internetu. Brouzdáme li internetem používáme nějaký prohlížeč. To, co vidíme na obrazovce v prohlížeči

Více

Dokumentace k projektu

Dokumentace k projektu Mendelova univerzita v Brně Provozně ekonomická fakulta Dokumentace k projektu Kvetoucí kaktusy Chalupová Lenka LS 2012 Webový Design Obsah 1. Úvod a cíl práce... 3 2. Informační architektura... 3 2.1.

Více

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25.1 Přidání nového tlačítka do menu Abychom mohli zpřístupnit nový pevný tvar do systému, je třeba přidat nové tlačítko do Menu. V našem případě se jedná o příčné

Více

Postup: 1. kresba obrysu hodinek

Postup: 1. kresba obrysu hodinek Postup: 1. Kresba obrysu hodinek. 2. Kresba knoflíku hodinek. 3. Kresba číselníku. 4. Kresba minutové a sekundové stupnice. 5. Kresba vyrytého obvodu číselníku. 6. Kresba ručiček. 7. Kresba datového pole.

Více

Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto

Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Registrační číslo projektu Šablona CZ.1.07/1.5.00/34.0951 III/2 INOVACE A ZKVALITNĚNÍ VÝUKY PROSTŘEDNICTVÍM ICT Autor Mgr. Petr Štorek,Ph. D.

Více

EU-OPVK:VY_32_INOVACE_FIL19 Vojtěch Filip, 2014

EU-OPVK:VY_32_INOVACE_FIL19 Vojtěch Filip, 2014 Číslo projektu CZ.1.07/1.5.00/34.0036 Tématický celek Inovace výuky ICT na BPA Název projektu Inovace a individualizace výuky Název materiálu Microsoft Word styly, tabulky, obrázky Číslo materiálu VY_32_INOVACE_FIL19

Více

Aplikované úlohy Solid Edge. SPŠSE a VOŠ Liberec. Radek Havlík [ÚLOHA 32 ODKAZY A TEXTY]

Aplikované úlohy Solid Edge. SPŠSE a VOŠ Liberec. Radek Havlík [ÚLOHA 32 ODKAZY A TEXTY] Aplikované úlohy Solid Edge SPŠSE a VOŠ Liberec Radek Havlík [ÚLOHA 32 ODKAZY A TEXTY] 1 CÍL KAPITOLY Cílem této kapitoly je naučit se tvořit odkazy ke strojním součástem, plochám, dílům, sestavám, a práci

Více

MS OFFICE, POWERPOINT

MS OFFICE, POWERPOINT Škola: Autor: DUM: Vzdělávací obor: Tematický okruh: Téma: Masarykovo gymnázium Vsetín Mgr. Petr Koňařík MGV_VT_SS_1S2-D15_Z_OFF_PP.docx Informatika MS Office Powerpoint MS OFFICE, POWERPOINT ÚVOD PowerPoint

Více

Webový editor MARKET INOVATOR verze 1.0.0.0

Webový editor MARKET INOVATOR verze 1.0.0.0 Webový editor MARKET INOVATOR verze 1.0.0.0 Uživatelská příručka Úprava hotových webových prezentací 1.krok stáhnout web ze serveru Chceme-li provádět úpravy na webových stránkách, které jsou na internetovém

Více

GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek

GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek Projekt Využití ICT ve výuce na gymnáziích, registrační číslo projektu CZ.1.07/1.1.07/02.0030 MS Word Metodický materiál pro základní

Více

Gymnázium Ostrava Hrabůvka, příspěvková organizace Františka Hajdy 34, Ostrava Hrabůvka

Gymnázium Ostrava Hrabůvka, příspěvková organizace Františka Hajdy 34, Ostrava Hrabůvka Gymnázium Ostrava Hrabůvka, příspěvková organizace Františka Hajdy 34, Ostrava Hrabůvka Projekt Využití ICT ve výuce na gymnáziích, registrační číslo projektu CZ.1.07/1.1.07/02.0030 MS Power Point Metodický

Více

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, v doslovném překladu "světová rozsáhlá síť neboli celosvětová síť, je označení

Více

Integrovaná střední škola, Sokolnice 496

Integrovaná střední škola, Sokolnice 496 Název projektu: Moderní škola Registrační číslo: CZ.1.07/1.5.00/34.0467 Integrovaná střední škola, Sokolnice 496 Název klíčové aktivity: III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT Kód výstupu:

Více

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu POUŽITÝ OPERAČNÍ SYSTÉM POUŽITÝ SOFTWARE PRO WORD PROCESSING SOUTĚŽNÍ ID A 1 Instrukce pro účastníky Otevřete dokument TRANSPORT.DOC, ihned uložte jako TRANSPORTXXX.DOCneboDOCX,kde XXX je Vašesoutěžní

Více

Vývoj Internetových Aplikací

Vývoj Internetových Aplikací 2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info

Více

Excel 2007 praktická práce

Excel 2007 praktická práce Excel 2007 praktická práce 1 Excel OP LZZ Tento kurz je financován prostřednictvím výzvy č. 40 Operačního programu Lidské zdroje a zaměstnanost z prostředků Evropského sociálního fondu. 2 Excel Cíl kurzu

Více

Nastavení stránky : Levým tlačítkem myši kliknete v menu na Soubor a pak na Stránka. Ovládání Open Office.org Draw Ukládání dokumentu :

Nastavení stránky : Levým tlačítkem myši kliknete v menu na Soubor a pak na Stránka. Ovládání Open Office.org Draw Ukládání dokumentu : Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako. Otevře se tabulka, v které si najdete místo adresář, pomocí malé šedočerné šipky (jako na obrázku), do kterého

Více

HLEDEJCENY.mobi. Obsah. Mobilní verze e-shopu. Důvody instalace

HLEDEJCENY.mobi. Obsah. Mobilní verze e-shopu. Důvody instalace Obsah HLEDEJCENY.mobi Mezi Vodami 1952/9 e-mail: info@hledejceny.cz HLEDEJCENY.mobi... 1 Mobilní verze e-shopu... 1 Důvody instalace... 1 Výhody... 2 Co je k mobilní verzi potřeba... 2 Objednávka služby...

Více

Nástroje v InDesignu. Panel nástrojů 1. část. Nástroje otevřeme Okna Nástroje

Nástroje v InDesignu. Panel nástrojů 1. část. Nástroje otevřeme Okna Nástroje Nástroje v InDesignu Panel nástrojů 1. část Nástroje otevřeme Okna Nástroje Poklepem levé myši změníme panel nástrojů Nástroje v panelu nástrojů se používají k vybírání, úpravám a vytváření prvků stránek.

Více

Formátování pomocí stylů

Formátování pomocí stylů Styly a šablony Styly, šablony a témata Formátování dokumentu pomocí standardních nástrojů (přímé formátování) (Podokno úloh Zobrazit formátování): textu jsou přiřazeny parametry (font, velikost, barva,

Více

Informatika 6. ročník/9. Malování IV

Informatika 6. ročník/9. Malování IV Malování IV Text v obrázku Malování je program určený pro malování. Pro psaní textů existují jiné, mnohem lepší programy. I v Malování máme možnost určitým způsobem vložit text. Důležité je uvědomit si,

Více

Gabriela Janská. Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz

Gabriela Janská. Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz PŘÍRUČKA KE KURZU: ZÁKLADY PRÁCE NA PC MS WORD 2003 Gabriela Janská Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz Obsah: 1. Písmo, velikost písma, tučně, kurzíva, podtrhnout

Více

PRÁCE S TEXTOVÝM EDITOREM 6.4 TEXTOVÉ POLE

PRÁCE S TEXTOVÝM EDITOREM 6.4 TEXTOVÉ POLE 6.4 TEXTOVÉ POLE Při tvorbě dokumentů je někdy třeba vkládat texty do rámců, kterým říkáme Textová pole. Tato textová pole, ale nemusí mít vždy pravidelný tvar (obdélník). Pomocí textových polí můžeme

Více

Návod k ovládání aplikace

Návod k ovládání aplikace Návod k ovládání aplikace Tento návod se zabývá ovládáním aplikace PDF Annotation 1, která je založena na aplikaci AVP PDF Viewer a umožňuje nejen PDF dokumenty prohlížet, ale také do těchto dokumentů

Více

Microsoft. Word. Hromadná korespondence. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie

Microsoft. Word. Hromadná korespondence. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie Microsoft Word Hromadná korespondence Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie Hromadná korespondence Funkce hromadná korespondence umožňuje vytvoření malé databáze (tabulky)

Více

CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené...

CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené... Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. CSS 1 blokové To je blokové Zde je dlouhý text v kterém nachazí vložené... vložené Vnější okraje umožňují nastavovat

Více

3 Formuláře a sestavy Příklad 1 Access 2007

3 Formuláře a sestavy Příklad 1 Access 2007 TÉMA: Vytváření formulářů Správce databáze Naše zahrada předpokládá, že bude s vytvořenou databází pracovat více uživatelů. Je třeba proto navrhnout a vytvořit formuláře pro přístup k datům. Zadání: Otevřete

Více

Postup: Nejprve musíme vyplnit tabulku. Pak bude vypadat takto:

Postup: Nejprve musíme vyplnit tabulku. Pak bude vypadat takto: Úkol: Jednoduchá tabulka v Excelu Obrázky jsou vytvořené v Excelu verze 2003 CZ. Postupy jsou platné pro všechny běžně dostupné české verze Excelu s výjimkou verze roku 2007. Postup: Nejprve musíme vyplnit

Více

Webové stránky. 4. Tvorba základní HTML webové stránky. Datum vytvoření: 25. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.

Webové stránky. 4. Tvorba základní HTML webové stránky. Datum vytvoření: 25. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr. Webové stránky 4. Tvorba základní HTML Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 25. 9. 2012 Webové Strana: 1/9 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická

Více

Základní vzorce a funkce v tabulkovém procesoru

Základní vzorce a funkce v tabulkovém procesoru Základní vzorce a funkce v tabulkovém procesoru Na tabulkovém programu je asi nejzajímavější práce se vzorci a funkcemi. Když jednou nastavíte, jak se mají dané údaje zpracovávat (některé buňky sečíst,

Více

Úvodní příručka. Správa souborů Kliknutím na kartu Soubor můžete otevřít, uložit, vytisknout a spravovat své soubory Wordu.

Úvodní příručka. Správa souborů Kliknutím na kartu Soubor můžete otevřít, uložit, vytisknout a spravovat své soubory Wordu. Úvodní příručka Microsoft Word 2013 vypadá jinak než ve starších verzích, proto jsme vytvořili tuto příručku, která vám pomůže se s ním rychle seznámit. Panel nástrojů Rychlý přístup Příkazy tady umístěné

Více

METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.

METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI Základní rozložení plochy Výchozím stavem při práci je normální zobrazení. pás karet - základní nabídka příkazů Pořadí jednotlivých snímků Základní plocha

Více

Manuál: Editace textů v textovém editoru SINPRO Úprava tabulek a internetových odkazů, řádkování

Manuál: Editace textů v textovém editoru SINPRO Úprava tabulek a internetových odkazů, řádkování Manuál: Editace textů v textovém editoru SINPRO Úprava tabulek a internetových odkazů, řádkování (nejen pro editaci STI v systému SINPRO, aktualizováno: 25. 6. 2015) v 2.0 Obsah TABULKY Úprava tabulek...

Více

POČÍTAČOVÁ GRAFIKA VEKTOROVÁ GRAFIKA VÍCENÁSOBNÉ KOPÍROVÁNÍ

POČÍTAČOVÁ GRAFIKA VEKTOROVÁ GRAFIKA VÍCENÁSOBNÉ KOPÍROVÁNÍ POČÍTAČOVÁ GRAFIKA VEKTOROVÁ GRAFIKA VÍCENÁSOBNÉ KOPÍROVÁNÍ VÍCENÁSOBNÉ KOPÍROVÁNÍ Kopírování jednoho prvku je častá činnost v mnoha editorech. Vícenásobné kopírování znamená opakování jednoho prvku v

Více

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s

Více

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

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

Více

Tvorba kurzu v LMS Moodle

Tvorba kurzu v LMS Moodle Tvorba kurzu v LMS Moodle Před počátkem práce na tvorbě základního kurzu znovu připomínám, že pro vytvoření kurzu musí být profil uživatele nastaven administrátorem systému minimálně na hodnotu tvůrce

Více

CorelDRAW Graphics Suite X5

CorelDRAW Graphics Suite X5 CorelDRAW Graphics Suite X5 co je nového: kompletní průvodce Ing. Vilém Lipold NICOM, a. s. Ing. Vilém Lipold, NICOM, a. s. Obrázek 7: Nabrání barvy z okna CorelDRAW X5 novým kapátkem; zobrazují se RGB

Více

Uživatelský manuál aplikace. Dental MAXweb

Uživatelský manuál aplikace. Dental MAXweb Uživatelský manuál aplikace Dental MAXweb Obsah Obsah... 2 1. Základní operace... 3 1.1. Přihlášení do aplikace... 3 1.2. Odhlášení z aplikace... 3 1.3. Náhled aplikace v jiné úrovni... 3 1.4. Změna barevné

Více

Po nastudování této kapitoly byste měli být schopni:

Po nastudování této kapitoly byste měli být schopni: 4 Tvorba prezentací Cíl kapitoly Po nastudování této kapitoly byste měli být schopni: vytvořit jednoduchou prezentaci v Microsoft PowerPoint 2010, vkládat nové snímky, měnit návrh, rozvržení a přechody

Více

ACTIVATE HERE - FAQ. Zakoupením této položky získáte do 60 minut do požadovaného emailu aktivační klíče k vybranému produktu.

ACTIVATE HERE - FAQ. Zakoupením této položky získáte do 60 minut do požadovaného emailu aktivační klíče k vybranému produktu. ACTIVATE HERE - FAQ Co je to Activate-Here produkt? Zakoupením této položky získáte do 60 minut do požadovaného emailu aktivační klíče k vybranému produktu. Součástí emailu je i odkaz, kde si můžete vybraný

Více

Photoshop - tutoriály

Photoshop - tutoriály H OŘÍCÍ TEXT Photoshop - tutoriály 1) Vytvořte Nový soubor. Velikost dokumentu jsem volil 500 x 200 obrazových bodů, rozlišení 72 dpi. Barva pozadí je předpokládaně bílá, což je pro náš případ vyhovující.

Více

Zdokonalování gramotnosti v oblasti ICT. Kurz MS Excel kurz 2. Inovace a modernizace studijních oborů FSpS (IMPACT) CZ.1.07/2.2.00/28.

Zdokonalování gramotnosti v oblasti ICT. Kurz MS Excel kurz 2. Inovace a modernizace studijních oborů FSpS (IMPACT) CZ.1.07/2.2.00/28. Zdokonalování gramotnosti v oblasti ICT Kurz MS Excel kurz 2 1 Obsah Práce s listy v MS Excel 2010... 4 Výběr (volba) listu... 4 Skrýt/zobrazit listy... 5 Klik na záložky... 5 Skrýt list (využítí pásu

Více

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 3. část Vztahy mezi elementy»

Více

Okno Editoru nabízí v panelu nástrojů

Okno Editoru nabízí v panelu nástrojů 110 Editor pracovní nástroje Naučte se používat základní nástroje Editoru pro efektivní úpravy obrázků. VYBRANÉ OVLÁDACÍ PRVKY 112 POLYGONOVÉ LASO A LASO 124 VLOŽIT OBRÁZEK DO OBRÁZKU 132 VÝBĚRY 114 REDUKCE

Více

Výukový materiál vytvořen v rámci projektu EU peníze školám. "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585

Výukový materiál vytvořen v rámci projektu EU peníze školám. Inovace výuky registrační číslo CZ.1.07/1.5.00/34.0585 Výukový materiál vytvořen v rámci projektu EU peníze školám "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585 Škola: Adresa: Autor: Gymnázium, Jablonec nad Nisou, U Balvanu 16, příspěvková organizace

Více

Vzdělávání v egoncentru ORP Louny

Vzdělávání v egoncentru ORP Louny Zpracováno v rámci projektu č. CZ.1.04/4.1.00/40.00067 Vzdělávání v egoncentru ORP Louny Město Louny Obsah 1. Databáze... 4 2. Třídění pomocí filtrů... 5 3. Ukotvení a uvolnění příček... 6 3.1 Ukotvení

Více

Hodnocení soutěžních úloh

Hodnocení soutěžních úloh Terč Koeficient 1 soutěžních úloh Kategorie žáci Soutěž v programování 25. ročník Krajské kolo 2010/2011 15. až 16. dubna 2011 Napište program, který zobrazí střelecký terč dle vzorového obrázku. Jak má

Více

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD CSS 1 Výhody: Udřování prezentace oddělené od dokumentu znamená, že můžete nastavit styly dokumentu pro různá média; Oddělení dokumentu od jeho prezentace znamená menší dokument, což dále znamená, že se

Více

Digitální učební materiál

Digitální učební materiál Digitální učební materiál Projekt: Digitální učební materiály ve škole, registrační číslo projektu CZ.1.07/1.5.00/34.0527 Příjemce: Střední zdravotnická škola a Vyšší odborná škola zdravotnická, Husova

Více

KAPITOLA 8 TABULKOVÝ PROCESOR

KAPITOLA 8 TABULKOVÝ PROCESOR KAPITOLA 8 TABULKOVÝ PROCESOR FORMÁT BUNĚK Parametry formátu buněk a tabulky můžeme nastavit pomocí celkem šesti karet v nabídce Domů/Buňky FORMÁT BUNĚK - OKNO FORMÁT BUNĚK Karta Číslo - nastavuje formát

Více

Microsoft Word - Styly, obsah a další

Microsoft Word - Styly, obsah a další Microsoft Word - Styly, obsah a další Definice uživatelských stylů Nový - tzv. uživatelský styl - se vytváří pomocí panelu Styly a formátování stiskem tlačítka Nový styl. Po stisknutí tlačítka se objeví

Více

NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE. Ataxo Czech s.r.o.

NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE. Ataxo Czech s.r.o. NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE Ataxo Czech s.r.o. ÚVOD Internetové stránky vytvořené společností Ataxo v rámci produktu Mini web můžete jednoduše a rychle upravovat prostřednictvím on-line administrace.

Více