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

Save this PDF as:
 WORD  PNG  TXT  JPG

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.

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

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

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

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

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

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

Ú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

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

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

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

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

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

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

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

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

Ú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

FFUK Uživatelský manuál pro administraci webu Obsah

FFUK Uživatelský manuál pro administraci webu Obsah FFUK Uživatelský manuál pro administraci webu Obsah FFUK Uživatelský manuál pro administraci webu... 1 1 Úvod... 2 2 Po přihlášení... 2 3 Základní nastavení webu... 2 4 Menu... 2 5 Bloky... 5 6 Správa

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

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1. Bloky Tu se popisuji blokové tagy, což jsou všechny, za kterými se zalamuje řádka. Jde o různé oddíly textu a odstavce. Opakem blokových tagů jsou řádkové (in-line) tagy na značkování textu. Tag Význam

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

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

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

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

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

ZSF web a intranet manuál

ZSF web a intranet manuál ZSF web a intranet manuál Verze pro školení 11.7.2013. Návody - Jak udělat...? WYSIWYG editor TinyMCE Takto vypadá prostředí WYSIWYG editoru TinyMCE Jak formátovat strukturu stránky? Nadpis, podnadpis,

Více

WEBOVÉ STRÁNKY WWW.NOCKOSTELU.CZ

WEBOVÉ STRÁNKY WWW.NOCKOSTELU.CZ WEBOVÉ STRÁNKY WWW.NOCKOSTELU.CZ Zpracováno na základě podkladů poskytnutých organizátory akce Lange Nacht der Kirchen, Rakousko. Domovská stránka Noci kostelů je založena na databázi, která vedle běžných

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

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

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

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

HTML. ICT_01., 02. konzultace; 2. ročník 1/6 ICT_01., 02. konzultace; 2. ročník 1/6 HTML Vystavení vlastních dat na Internetu Každý uživatel Internetu, který chce svoje webové stránky publikovat na Internetu potřebuje: - místo na webovém serveru,

Více

Jdeme tvořit webové stránky!

Jdeme tvořit webové stránky! Jdeme tvořit webové stránky! Díky prezentaci jsme se již dozvěděli, že na tvorbu základních webových stránek v podstatě nepotřebujeme žádné speciální programy a stačí nám obyčejný poznámkový blok, který

Více

Tvorba webu. Kaskádové styly (CSS) Martin Urza

Tvorba webu. Kaskádové styly (CSS) Martin Urza Tvorba webu Kaskádové styly (CSS) Martin Urza Motivace Proč používat kaskádové styly k formátování HTML? Dovolují více možností formátování než klasické HTML atributy a stále přibývají další (možnosti).

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

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

(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

Veškeré formátovací úpravy buněk vždy platí pouze pro buňky, které si označíte.

Veškeré formátovací úpravy buněk vždy platí pouze pro buňky, které si označíte. Veškeré formátovací úpravy buněk vždy platí pouze pro buňky, které si označíte. Přesun kurzoru Šipky:,,, o jeden znak, řádek, buňku daným směrem Ctrl + / na konec / začátek řádku buněk Ctrl + / na konec

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

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

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

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

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

zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o.

zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o. zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o. 1 Obsah 1. Přihlášení 2. Výpis sekcí 3. Vytvoření nové sekce 4. Editace sekce 4.1. Výběr sekce k editaci 5. Editace hlavičky

Více

Nastavení vzhledu listů a tisk tabulek

Nastavení vzhledu listů a tisk tabulek Nastavení vzhledu listů a tisk tabulek 5 Práce s listy Nastavení vzhledu listu Nastavení zobrazení listu Tisk Další možnosti tisku Microsoft Excel 2010 Rychle hotovo! Práce s listy List sešitu je podobný

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

Excel tabulkový procesor

Excel tabulkový procesor Pozice aktivní buňky Excel tabulkový procesor Označená aktivní buňka Řádek vzorců zobrazuje úplný a skutečný obsah buňky Typ buňky řetězec, číslo, vzorec, datum Oprava obsahu buňky F2 nebo v řádku vzorců,

Více

Prozkoumání příkazů na pásu karet Každá karta na pásu karet obsahuje skupiny a každá skupina obsahuje sadu souvisejících příkazů.

Prozkoumání příkazů na pásu karet Každá karta na pásu karet obsahuje skupiny a každá skupina obsahuje sadu souvisejících příkazů. Úvodní příručka Microsoft Excel 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. Přidání příkazů na panel nástrojů Rychlý přístup

Více

Microsoft Word - Záhlaví a užití stylů

Microsoft Word - Záhlaví a užití stylů Microsoft Word - Záhlaví a užití stylů Záhlaví a zápatí Záhlaví a zápatí jsou oblasti umístěné na horním a dolním okraji každé stránky v dokumentu. Do záhlaví a zápatí můžete vložit text nebo grafiku (obrázek,

Více

13. Vytváření webových stránek

13. Vytváření webových stránek 13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací

Více

POKROČILÉ ZPRACOVÁNÍ TEXTU

POKROČILÉ ZPRACOVÁNÍ TEXTU POKROČILÉ ZPRACOVÁNÍ TEXTU Hana Rohrová, Roman Rohr Cíle kurzu Po ukončení tohoto kurzu budete schopni: používat pokročilé formátování textu, odstavců, sloupců a tabulek, převádět text na tabulku a naopak,

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

Střední průmyslová škola Ostrov. Tvorba webových stránek. Petr Pistulka I2 2012-2013 CC - BY NC SA3.0. Klínovecká 1197 363 01 Ostrov

Střední průmyslová škola Ostrov. Tvorba webových stránek. Petr Pistulka I2 2012-2013 CC - BY NC SA3.0. Klínovecká 1197 363 01 Ostrov Střední průmyslová škola Ostrov Klínovecká 1197 363 01 Ostrov Tvorba webových stránek Petr Pistulka I2 2012-2013 CC - BY NC SA3.0 Prohlášení Prohlašuji, že jsem svou práci vypracoval samostatně, použil

Více

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu PŘÍRUČKA Správa obsahu webové prezentace Formátování textu Verze: 6.2 Datum: 4.12.2009 Autor: Ing. Michal Šídlo, michal.sidlo@netgenium.com Společnost: NetGenium s.r.o., www.netgenium.com Obsah 1. Základní

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

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

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

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

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

6. Textové editory konečná úprava dokumentu

6. Textové editory konečná úprava dokumentu 6. Textové editory konečná úprava dokumentu Formát stránky Ještě než začneme tvořit nový dokument, je namístě nastavit rozměry stránky. Pokud nechceme použít výchozí rozměr A4, nastavíme rozměry papíru

Více

Webové stránky. 8. Pozadí webové stránky. CSS pozadí. Datum vytvoření: 18. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.

Webové stránky. 8. Pozadí webové stránky. CSS pozadí. Datum vytvoření: 18. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr. Webové stránky 8. Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 18. 10. 2012 Webové Strana: 1/6 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická oblast Název DUM

Více

Tiskové sestavy. Zdroj záznamu pro tiskovou sestavu. Průvodce sestavou. Použití databází

Tiskové sestavy. Zdroj záznamu pro tiskovou sestavu. Průvodce sestavou. Použití databází Tiskové sestavy Tiskové sestavy se v aplikaci Access používají na finální tisk informací z databáze. Tisknout se dají všechny objekty, které jsme si vytvořili, ale tiskové sestavy slouží k tisku záznamů

Více

Zakládání nové nebo úprava existující stránky

Zakládání nové nebo úprava existující stránky NÁVOD KTERAK UPRAVOVATI OBSAH WEBU PP. PRO PLZEŇSKÉ PANENKY VYROBIL PŘEMEK 2008 Zakládání nové nebo úprava existující stránky Např. když je nový program na měsíc nebo aktualita, nebo když je někde něco

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

Úvod. Program ZK EANPRINT. Základní vlastnosti programu. Co program vyžaduje. Určení programu. Jak program spustit. Uživatelská dokumentace programu

Úvod. Program ZK EANPRINT. Základní vlastnosti programu. Co program vyžaduje. Určení programu. Jak program spustit. Uživatelská dokumentace programu sq Program ZK EANPRINT verze 1.20 Uživatelská dokumentace programu Úvod Základní vlastnosti programu Jednoduchost ovládání - umožňuje obsluhu i málo zkušeným uživatelům bez nutnosti většího zaškolování.

Více

KAPITOLA 1 Přehled aktuálního vývoje webů 11

KAPITOLA 1 Přehled aktuálního vývoje webů 11 Obsah Úvodem 9 KAPITOLA 1 Přehled aktuálního vývoje webů 11 Definice webového designu 12 Poznejte sedm pravidel webového designu 14 Pochopte tři přístupy k webovému designu 16 Shrnutí 24 KAPITOLA 2 Design

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

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

GeoGebra Prostředí programu

GeoGebra Prostředí programu GeoGebra Prostředí programu Po instalaci a spuštění programu uvidí uživatel jediné škálovatelné okno hlavní okno programu. Podle toho, zda otevíráte okno ve standardní konfiguraci (obr. 1) nebo v konfiguraci

Více

Microsoft Office PowerPoint 2003

Microsoft Office PowerPoint 2003 Microsoft Office PowerPoint 2003 Školení učitelů na základní škole Meteorologická Maturitní projekt SSPŠ 2013/2013 Vojtěch Dušek 4.B 1 Obsah 1 Obsah... 2 2 Seznam obrázků... 4 3 Základy programu PowerPoint...

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

Vytvoření pozvánky. Michaela Maginot. O autorovi

Vytvoření pozvánky. Michaela Maginot. O autorovi Vytvoření pozvánky Michaela Maginot O autorovi Michaela Maginot žije v Unterhachingu v Německu kousek od Mnichova. Vystudovala školu Deutschen Meisterschule für Mode (německá přední škola zabývající se

Více

Formátování diplomové práce (Office 2007,2010)

Formátování diplomové práce (Office 2007,2010) Formátování diplomové práce (Office 2007,2010) Formátování textu Formát textu je jeden z faktorů, který ovlivní celkový dojem a funkčnost dokumentu. Mnoho začátečníků se zpočátku nechává unést možnostmi

Více

8. OKNA 73. obr. 1 Roletové menu "Okna"

8. OKNA 73. obr. 1 Roletové menu Okna 8. OKNA Obsah 8. OKNA 73 OBSAH 73 8.1 UKLÁDÁNÍ UŽIVATELSKÝCH OKEN 76 8.2 NAČÍTÁNÍ UŽIVATELSKÝCH OKEN 77 8.3 VLASTNOSTI OKEN 77 8.3.1 VLASTNOSTI ZÁLOŽKOVÉHO OKNA 78 8.4 VOLBA OKNA 78 8.5 ZRUŠENÍ OKNA 79

Více

Google Apps. dokumenty 4. verze 2012

Google Apps. dokumenty 4. verze 2012 Google Apps dokumenty verze 0 Obsah Obsah... Úvod... Tabulky... Popis prostředí... Menu a panely nástrojů... Uložení a nastavení sešitu... Tvorba a formátování tabulky... Vložení vzorce a funkce... Pravé

Více

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS Výstupový indikátor 06.43.19 Motivační název: Autor: Vzdělávací oblast: Vzdělávací obory: Ročník: Časový rozsah: Pomůcky: Projekt Integrovaný vzdělávací systém města Jáchymov - Mosty Tvorba webu I Petr

Více

Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a podpory palivového

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

Nápověda k redakčnímu systému InstantWeb.cz

Nápověda k redakčnímu systému InstantWeb.cz Nápověda k redakčnímu systému InstantWeb.cz Přihlášení na adrese www.vasedomena.cz/admin naleznete přihlašovací pole se jménem a přiděleným heslem. Toto heslo je zpočátku přiděleno poskytovatelem programu,

Více

Aplikované úlohy Solid Edge. SPŠSE a VOŠ Liberec. Ing. Jan Boháček [ÚLOHA 27 NÁSTROJE KRESLENÍ]

Aplikované úlohy Solid Edge. SPŠSE a VOŠ Liberec. Ing. Jan Boháček [ÚLOHA 27 NÁSTROJE KRESLENÍ] Aplikované úlohy Solid Edge SPŠSE a VOŠ Liberec Ing. Jan Boháček [ÚLOHA 27 NÁSTROJE KRESLENÍ] 1 CÍL KAPITOLY V této kapitole si představíme Nástroje kreslení pro tvorbu 2D skic v modulu Objemová součást

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

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a

Více

1. Obsah 2. Úvod Zdarma poštovní klient od společnosti Microsoft přímo v PC

1. Obsah 2. Úvod Zdarma poštovní klient od společnosti Microsoft přímo v PC 1. Obsah 1. Obsah... 1 2. Úvod... 1 3. Instalace... 2 4. Vytvoření účtu... 5 5. Pošta... 7 6. Kontakty... 11 7. Informační kanály... 11 8. Nastavení zobrazení... 12 2. Úvod Zdarma poštovní klient od společnosti

Více

OPERACE S DATY Autor: Mgr. Dana Kaprálová Datum (období) tvorby: září, říjen 2013 Ročník: sedmý Vzdělávací oblast: Informatika a výpočetní technika

OPERACE S DATY Autor: Mgr. Dana Kaprálová Datum (období) tvorby: září, říjen 2013 Ročník: sedmý Vzdělávací oblast: Informatika a výpočetní technika Autor: Mgr. Dana Kaprálová OPERACE S DATY Datum (období) tvorby: září, říjen 2013 Ročník: sedmý Vzdělávací oblast: Informatika a výpočetní technika 1 Anotace: Žáci se seznámí se základní obsluhou tabulkového

Více

Popis základního prostředí programu AutoCAD

Popis základního prostředí programu AutoCAD Popis základního prostředí programu AutoCAD Popis základního prostředí programu AutoCAD CÍL KAPITOLY: CO POTŘEBUJETE ZNÁT, NEŽ ZAČNETE PRACOVAT Vysvětlení základních pojmů: Okno programu AutoCAD Roletová

Více

Manuál Redakční systém

Manuál Redakční systém Manuál Redakční systém SA.07 Obsah Úvod... ) Struktura webu... ) Aktuality... 0 ) Kalendář akcí... ) Soubory ke stažení... 6 5) Fotogalerie... 8 Redakční systém umožňuje kompletní správu vašich internetových

Více

Nápověda ke cvičení 5

Nápověda ke cvičení 5 Nápověda ke cvičení 5 Formát datum: vyznačíme buňky pravé tlačítko myši Formát buněk Číslo Druh Datum Typ: vybereme typ *14. březen 2001 Do tabulky pak zapíšeme datum bez mezer takto: 1.9.2014 Enter OK

Více

AutoCAD výstup výkresu

AutoCAD výstup výkresu Kreslení 2D technické dokumentace AutoCAD výstup výkresu Ing. Richard Strnka, 2012 1. Výstup z AutoCADu Výklad: Výstup z programu AutoCAD je možný několika různými způsoby. Základní rozdělení je na výstup

Více

HTML Hypertext Markup Language

HTML Hypertext Markup Language HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé

Více

VKLÁDÁNÍ OBJEKTŮ - obrázek

VKLÁDÁNÍ OBJEKTŮ - obrázek VKLÁDÁNÍ OBJEKTŮ - obrázek Autor: Mgr. Dana Kaprálová Datum (období) tvorby: srpen 2013 Ročník: šestý Vzdělávací oblast: Informatika a výpočetní technika 1 Anotace: Žák se orientuje v prostředí aplikace

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

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Š ÚnO, Bratří Čapků 1332

ZŠ ÚnO, Bratří Čapků 1332 MS Excel 2002 Grada - po spuštění je třeba kliknout do středu obrazovky - v dalším dialogovém okně (Přihlášení) vybrat uživatele, zřídit Nového uživatele nebo zvolit variantu Bez přihlášení (pro anonymní

Více

Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu...

Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu... Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu... 9 Slovo úvodem Editaci článků provádějte v prohlížeči MOZILLA FIREFOX!

Více

VYHLEDÁVACÍ BANNER PRO WEBOVÉ STRÁNKY

VYHLEDÁVACÍ BANNER PRO WEBOVÉ STRÁNKY VYHLEDÁVACÍ BANNER PRO WEBOVÉ STRÁNKY DOKUMENTACE Datum: 16.12. 2013 Zpracováno pro: Ředitelství silnic a dálnic ČR Na Pankráci 546/56 145 05 Praha 4 Zpracoval: VARS BRNO a.s. Kroftova 3167/80c, 616 00

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

Tabulkový procesor Microsoft Excel

Tabulkový procesor Microsoft Excel Tabulkový procesor Microsoft Excel Úvod Tabulkový procesor Microsoft Excel spolu s Microsoft Word, Access, Outlook, PowerPoint a FrontPage tvoří programový balíku Microsoft Office. Tabulkový procesor Microsoft

Více

Návod k použití Verze 1.5.17

Návod k použití Verze 1.5.17 mobilní aplikace Návod k použití Verze 1.5.17 Obsah 1. CO TO JE WOLAPKA...3 2. VYTVOŘENÍ NOVÉHO TÝDNE...4 3. NÁZEV A DATUM TÝDNE...5 4. FOTOGRAFOVÁNÍ...6 4.1. FOTOGRAFOVÁNÍ DO KONKRÉTNÍ POZICE...7 4.2.

Více

TABULKY U STÁTNÍCH ZKOUŠEK

TABULKY U STÁTNÍCH ZKOUŠEK TABULKY U STÁTNÍCH ZKOUŠEK Obsah Co říká norma:... 2 Nadpis... 2 Měrná jednotka... 2 Hlavička tabulky...2 Sloupce... 2 Řádky... 3 Součty... 3 Obecná poznámka... 3 Zvláštní poznámky...3 Značky v tabulce...

Více