obrázky
DESCRIPTION
16. března 2013. VY_32_INOVACE_160317_Obrazky_DUM. Obrázky. Vkládání do stránky, úpravy formátu, okraje. Nejčastěji grafické formáty používanéna webu. GIF ( The Graphics Interchange Format ) JPEG ( The Joint Photographics Experts Group) PNG ( The Portable Network Graphics ) - PowerPoint PPT PresentationTRANSCRIPT
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Michal Sonnek. Obchodní akademie a Střední odborná škola logistická, Opava, příspěvková organizace. Vzdělávací
materiál byl vytvořen v rámci OP VK 1.5 – EU peníze středním školám, registrační číslo CZ.1.07/1.5.00/34.0809.
ObrázkyVkládání do stránky, úpravy formátu, okraje
1
16. března 2013 VY_32_INOVACE_160317_Obrazky_DUM
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
2
Nejčastěji grafické formáty používanéna webu
• GIF (The Graphics Interchange Format)• JPEG (The Joint Photographics Experts
Group)• PNG (The Portable Network Graphics)
více: GIF, JPEG a PNG - jak a kdy je použít?
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
3
Programy pro optimalizaci obrázků
• Adobe Photoshop• Adobe ImageReady• Jasc Paint Shop Pro• Zoner Photo Studio• GIMPShop• Photo Editor Max• …
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
4
Obrázek ve zdrojovém kódu stránky
<img src=„../img/logo.gif alt=″logo společnosti″title ″BSA a.s.″ />
src – určuje URL obrázku
alt – popis obrázku je vidět, pokud se obrázek neobjeví v prohlížeči
title – objeví se, pokud na obrázek najede kurzor myši
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
5
Rozměr obrázku – šířkaVlastnost width určuje šířku obrázku.Hodnoty:Jednotky délky Šířka vyjádřená příslušnou jednotkou.% Vyjádření procenty vůči šířce nadřazeného elementu.auto Šířka elementu se určí podle jeho obsahu.inherit Hodnota se zdědí od nadřazeného elementu.
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
6
Rozměr obrázku – výška
Vlastnost height určuje výšku obrázku.Hodnoty jsou stejné jako u definice šířky.
Příklad:img {
height:250px;width:300px;}
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
7
Obtékání obrázku – floatUrčuje pozici obrázku v rámci plovoucího umístění.left Umístí obrázek doleva v rámci nadřazeného elementu a bude obtékán zprava.right Umístí obrázek doprava v rámci nadřazeného elementu a bude obtékán zleva.img {float: left}
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
8
Rámeček kolem obrázku – border
Nastavení vlastností pomocí značky border umožňuje deklarovat všechny vlastnosti v jednom zápisu.Definice v CSS:img {border:3px solid blue}
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
9
border-colorBarva rámečku obklopující element.HodnotybarvatransparentRámeček bude průhledný.inherit Hodnota se zdědí od nadřazeného
elementu.
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
10
Umístění barvy na rámečkuVlastnost border-color definuje barvu kolem celého objektu.Zadání pro jednotlivé strany:border-top-colorborder-right-colorborder-bottom-colorborder-left-color
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
11
Zkrácená syntaxe border-colorborder-color: a b c d;Hodnota a je pro horní stranu, b pro pravou stranu, c pro dolní stranu, d pro levou stranu rámečku.
border-color: a bc d;Hodnota bc je pro pravou i levou stranu.
border-color: ad bc;Hodnota ad platí pro horní a dolní stranu rámečku, hodnota bc definuje barvu levého i pravého rámečku.
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
12
border-styleDefinice stylu rámečku okolo elementu:solid spojitýdouble dvojitýgroove zařízlýridge vyvýšenýinset vmáčklý dovnitřoutset vystouplý vendotted tečkovanýdashed čárkovanýnone žádnýinherit hodnota se zdědí od nadřazeného elementu
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
13
border-width
Vlastnost určuje šířku rámečku okolo elementu.Hodnoty:Jednotky délkythin slabý rámečekmedium střední rámečekthick silný rámečekinherit hodnota se zdědí z nadřazeného elementu
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
14
border-radius Umožňuje definovat rámečku zakulacené rohy.img {border: 2px solid #FF border-radius: 5px}Rádius jednotlivých stran:border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
15
Vnější okraj – marginVlastnost margin určuje šířku vnějšího okraje elementu.Hodnoty:% Šířka je vyjádřena procenty vůči šířce nadřazeného elementu.jednotky délkyauto Automatické nastavení.inherit Hodnota se zdědí od nadřazeného
elementu.
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
16
Vnitřní okraj – paddingPadding určuje šířku vnitřního okraje elementu.Parametry jsou stejné jako při použití margin.
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
17
Blokový model CSS
Obrázek (libovolný element)
Vnitřní okrajRámeček
Vnější okraj
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
18
• Své znalosti si zopakujte v zde.•Kvíz
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
19
Zdroje
• GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 a CSS3 pro webové designéry. Vyd. 1. Brno: Zoner Press, 2011, 286 s. Encyklopedie webdesignera. ISBN 978-80-7413-166-0.
• WORLD WIDE WEB CONSORTIUM (W3C). World Wide Web Consortium (W3C) [online]. http://www.w3.org/. 27 March 2012 [cit. 2013-03-16]. Dostupné z: http://www.w3.org
• GIF, JPEG a PNG - jak a kdy je použít?. JAROMÍR SKŘIVAN. Webdeisign [online]. 2005-05-16. 2005 [cit. 2013-03-16]. Dostupné z: http://interval.cz/clanky/gif-jpeg-a-png-jak-a-kdy-je-pouzit/
• Vlkodlak - Wikipedie. Wikipedie [online]. 2013 [cit. 2013-03-16]. Dostupné z: http://cs.wikipedia.org/wiki/Vlkodlak