Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Jihlava Šablona 32 VY_32_INOVACE_031.ICT.34 Tvorba webových stránek – úvod do CSS.

Prezentace na téma: "Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Jihlava Šablona 32 VY_32_INOVACE_031.ICT.34 Tvorba webových stránek – úvod do CSS."— Transkript prezentace:

1 Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Jihlava Šablona 32 VY_32_INOVACE_031.ICT.34 Tvorba webových stránek – úvod do CSS

2 Číslo projektu: CZ.1.07/1.5.00/34.0744 Šablona: VY_32_INOVACE Číslo DUMU: 031.ICT.34 Předmět: Informační technologie Název materiálu: Tvorba webových stránek – úvod do CSS Autor: Jaroslav Fišer Formát: Prezentace Microsoft PowerPoint Velikost: 159 kB Stupeň a typ vzdělávání: SŠ – odborné vzdělávání Licence k obrazovému materiálu: CC BY Datum vytvoření: 26. 09. 2013 Klíčová slova: HTML, CSS, kaskádové styly, www, web, internet Anotace: Úvod do kaskádových (CSS) stylů. OA a JŠ Jihlava, VY_32_INOVACE_031.ICT.34 2

3 Tvorba webových stránek – úvod do CSS OA a JŠ Jihlava, VY_32_INOVACE_031.ICT.34 3 Kaskádové styly (v anglickém originále Cascading Style Sheets se zkratkou CSS) je jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. Hlavním smyslem CSS je oddělit vzhled dokumentu od jeho struktury a obsahu. Parametry CSS stylů, využité pro formátování textů formátování objektů pozicování objektů odkazy Poznámka: Není třeba se učit parametry a syntaxi (přesný zápis) zpaměti. Existují editory, které umožňují vybrat požadovaný styl a nabídnou požadované parametry. http://www.microsoft.com/visualstudio/cze/products/visual-studio-express-products

4 Tvorba webových stránek – úvod do CSS OA a JŠ Jihlava, VY_32_INOVACE_031.ICT.34 4 Parametry CSS stylů využité pro formátování textu {color: white; background-color: #336699; font-size:small; font-family:verdana, sans-serif; font-style:normal; text-decoration:none; text-align: left; margin-top: 12px; margin-bottom: 6px; line-height: 100%;} využité pro formátování objektů {margin: 0px; padding: 10px; backround-color: yellow; border: 10px solid #bf997;} využité pro pozicování objektů V definici.css jsou uvedeny znakem #, např. #obsah{ }; V HTML je pak oblast vymezená tagem HTML příkazy využité pro odkazy a:{ }; a:hover{ }; a:visited{ }; a:active{ };

5 Tvorba webových stránek – úvod do CSS OA a JŠ Jihlava, VY_32_INOVACE_031.ICT.34 5 Zápis definice stylů Nejběžnější způsob je zápis stylů do externího souboru s příponou.css, na který se odkazuje v hlavičce, například:...... Samotný soubor stylesheet.css, který obsahuje definici stylů, lze opět napsat v Poznámkovém bloku, může obsahovat například: body { background-color: #F2E77E; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; } Odkaz (link) musí být takto vložen do všech stránek, které budeme následně vytvářet.

6 Tvorba webových stránek – úvod do CSS OA a JŠ Jihlava, VY_32_INOVACE_031.ICT.34 6 Možná ti při řešení Úkolu 1 pomůže tato nápověda: zobrazit zdrojový kód URL definuje doménovou adresu serveru, umístění zdroje na serveru a protokol, kterým je možné zdroj zpřístupnit Úkol 1. 1.Prozkoumej HTML kód www stránky http://jafi3.php5.cz/priklad/prik31.htmhttp://jafi3.php5.cz/priklad/prik31.htm 2.Zjisti název externího souboru definujícího styly použité v této www stránce. 3.Analyzuj soubor se styly. 4.Vytvoř www stránku dle výše uvedené www stránky. 5.HTML kód a CSS kód ulož do svého website do složky priklad 6.Soubor s HTML kódem bude mít název prik31.htm 7.Složku priklad přenes FTP protokolem na tvuj php5 webhosting. Poznámka: Tento DUM volně navazuje na DUMy autora VY_32_INOVACE_021.ICT.34 - 030.ICT.34

7 Tvorba webových stránek – úvod do CSS OA a JŠ Jihlava, VY_32_INOVACE_031.ICT.34 7 Doporučené odkazy: http://jafi3.php5.cz http://jafi3.php5.cz je výukový web autora DUMu http://www.jakpsatweb.cz Doporučená literatura: P. Roubal, Informatika a výpočetní technika pro střední školy - Praktická učebnice Použité zdroje: Veškerý obsah včetně obrázků je dílem autora.