VY_32_INOVACE_4.3.IVT1.07/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 CSS formátování.

Slides:



Advertisements
Podobné prezentace
TVORBA WEBOVÝCH STRÁNEK
Advertisements

Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.
Tvorba webových stránek
TVORBA WEBOVÝCH STRÁNEK
WWW stránky.
Referát č. 22 Tvorba webových stránek (Struktura webu, struktura HTML dokumentu, vytvoření webové stránky exportem z aplikačního programu, provázání.
Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li.
ZÁKLADY HTML Číslo DUM: VY_32_INOVACE_04_11 Autor: Mgr. Ivana Matyášková Datum vytvoření: duben 2013 Ročník: tercie Vzdělávací obor: informační technologie.
VY_32_INOVACE_4.3.IVT1.15/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
Mgr. Vlastislav Kučera přednáška č. 2.  Struktura stránky  hlavička  meta tagy  titulek stránky  připojení stylů,...  CSS.
<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4
VY_32_INOVACE_4.3.IV1.02/Ku Html dokument a jeho struktura Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/
VY_32_INOVACE_4.3.IV1.03/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ HTML & XHTML.
Obchodní akademie a Střední odborná škola, gen. F. Fajtla, Louny, p.o. Osvoboditelů 380, Louny Číslo projektu CZ.1.07/1.5.00/ Číslo sady29Číslo DUM14.
VY_32_INOVACE_4.3.IVT1.14/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
Selektory 1 1. Selektor elementu Deklarované styly budou použité při každém vyskytování elementu v dokumentu. Selektor elementu se obvykle používá pro.
Kaskádové styly (Cascading Style Sheets, CSS) slouží k formátování HTML prvků. Pomocí kaskádových stylů lze nastavit font, řez písma, velikost písma, zarovnání,
TVORBA WEBOVÝCH STRÁNEK
VY_32_INOVACE_4.3.IVT1.04/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ Textové elementy.
Layout stránky Rozvržení stránky (layout stránky) se provádí z těchto důvodů: Určení polohy záhlaví, menu, textů, obrázků... Zachování polohy při změně.
Návrh a tvorba WWW Cvičení 2 CSS 3. Cascading Style Sheet Cascading Style Sheet (kaskádové styly) je stylový jazyk, který se používá pro popis vzhledu.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
Formátování textu. Odstavce  tvoříme párovou značkou  text bude od ostatního textu oddělen Konec řádky  nepárová značka způsobuje ukončení řádku a.
TNPW1 Technologie pro publikování na webu
Jazyk HTML.
VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
Třídy, generické třídy, pseudotřídy
Odkazy Pomocí odkazu se lze pohybovat mezi stránkami. Cílem může být další stránka nebo identifikátor na aktuální stránce. Pomocí odkazu se lze pohybovat.
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
Číslo šablony: III/2 VY_32_INOVACE_P4_3.13 Tematická oblast: Aplikační software pro práci s informacemi II. CSS - vlastnosti Typ: DUM - kombinovaný Předmět:
CSS – rámečky Mgr. Lenka Švancarová.
VY_32_INOVACE_4.3.IVT1.10/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ Validita stránek.
KASKÁDOVÉ STYLY SYNTAXE STYLŮ PRAVIDLO DEFINUJÍCÍ STYL SE SKLÁDÁ Z NEJMÉNĚ TŘÍ ZÁKLADNÍCH ČÁSTÍ: * SELEKTOR ZNAČKY * SLOŽENÉ ZÁVORKY A V NICH JE.
Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Úvod do CSS 1.
VY_32_INOVACE_4.3.IVT1.12/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
Kaskádové styly - CSS.
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
HTML, XHTML a CSS Základy jazyků značek.
CSS – vlastnosti textu text-align (vodorovné zarovnání)
CSS – style Mgr. Lenka Švancarová. CSS – značka style (textstyle.html)
TNPW1 Cvičení
Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li.
Kaskádové styly tvorba webových stránek
CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují.
KASKÁDOVÉ STYLY 1. 2 PRVNÍ STANDARD (CSS1) BYL PŘEDSTAVEN V ROCE 1996, PROTO STARŠÍ PROHLÍŽEČE ("ČTYŘKOVÉ" VERZE) IE A NN KASKÁDOVÉ STYLY NEPODPORUJÍ.
CSS Cascading Style Sheets Kaskádové styly
Gymnázium, Žamberk, Nádražní 48 Projekt: CZ.1.07/1.5.00/ Inovace ve vzdělávání na naší škole Název: Základy práce v textovém editoru Autor: Jaroslav.
CSS – float a clear Mgr. Lenka Švancarová. CSS – float Vlastnost určuje obtékání prvku. Hodnoty:  right – prvek bude zarovnán vpravo, okolní obsah stránky.
VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS.
Párová a nepárová značka, atributy a jejich hodnoty
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
VY_32_INOVACE_4.3.IVT1.13/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
VY_32_INOVACE_4.3.IVT1.06/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS pozicování.
Tvorba www stránek CSS (Úvod do kaskádových stylů (Úvod do kaskádových stylů) Ing. Miroslav Vachůn, Ph.D.
CSS – selektor class.tx { color: black; /* nastaví černou barvu písma */ } Selektor class (třída) použijeme pokud chceme určité vlastnosti definovat pro.
Aplikace XML pro Internet
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
Styly CSS VýhodyDruhyZápis. Výhody CSS oddělení struktury od formátování oddělení struktury od formátování přilinkováním souboru styl.css lze formátovat.
Tvorba www stránek.
ŠKOLA: Gymnázium, Chomutov, Mostecká 3000, příspěvková organizace AUTOR:Mgr. Martin Jiřiště NÁZEV:VY_32_INOVACE_08C_17_uvod_do_html TEMA:Multimédia a grafika.
Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Autor: Bc. Pavel Šiktanc Internetové stránky II. Co se všechno.
Krátký úvodní kurz HTML Jenyk Obecně 1 - html  V HTML jazyce nezáleží na rozložení a délce řádku, extrémem je napsat celý program v jednom řádku.
NÁZEV ŠKOLY: Masarykova základní škola a mateřská škola Melč, okres Opava, příspěvková organizace ČÍSLO PROJEKTU: CZ.1.07/1.4.00/ AUTOR: Mgr. Vladimír.
Základy tvorby www stránky v HTML kódu.
Tvorba WEBOVÝCH stránek – základní TAGY
Kaskádové styly CSS Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jitka Vlčková. Dostupné z Metodického portálu ISSN.
ADOBE DREAMWEAVER CS6 CSS - Formátování textu
Tvorba webových stránek
Tvorba webových stránek
Transkript prezentace:

VY_32_INOVACE_4.3.IVT1.07/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS formátování

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ VY_32_INOVACE_4.3.IVT1.07/Ku  Budeme používat externí styly.  Využijeme soubory z předchozího příkladu (layout.css, format.css, index.html, stranka2.html, stranka3.html, stranka4.html).  V extérním stylu budeme formátovat odkazy, text.  Naučíme se vytvářet tlačítka.

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ VY_32_INOVACE_4.3.IVT1.07/Ku  Externí stylopis tj. soubor *.css se na www stránkách odkazuje v hlavičce tagem v našem příkladu:

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ VY_32_INOVACE_4.3.IVT1.07/Ku selektor {vlastnost1: hodnota; vlastnost2: hodnota} Celá stránka modrým písmem body {color: blue} Všechny nadpisy druhé úrovně budou červenou kurzívou h2 {color: red; font-style: italic;} Odstavce s odsazením prvního řádku p {text-indent: 30px;}

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ VY_32_INOVACE_4.3.IVT1.07/Ku Lze určit stejné vlastnosti několika selektorům najednou pokud je oddělíme čárkami: Nadpisy 1., 2. a 3. úrovně budou modré orámováné h1, h2, h3 {color:blue; border-bottom:1px;}

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ VY_32_INOVACE_4.3.IVT1.07/Ku  class = třídy  id = identifikátory (lze použít v dokumentu jenom jednou, jinak stejné jako class) CSS zápis /* zarovnání vpravo, tučné písmo * /.pismo { text-align: right; font-weight: bold} HTML dokument !TEČKA

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ VY_32_INOVACE_4.3.IVT1.07/Ku Zapište pseudotřídy pro odkazy do souboru format.css: a {text-decoration: none} /*odkazy nebudou podtrhávané*/ a:hover {color: red; text-decoration: underline} /*odkaz,přes který se jede myší, bude podtržený a červený*/

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ VY_32_INOVACE_4.3.IVT1.07/Ku Vyzkoušejte tvorbu „Menu“ různými způsoby:  Odkazy jako tlačítka ZDEZDE  Tlačítka – animace na webu zdarma např.  Odkazy v CSS:.tlacitko a.tlacitko {vlastnost1: hodnota1; vlastnost2:hodnota2;} a:hower.tlacitko {vlastnost1: hodnota1; }

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ VY_32_INOVACE_4.3.IVT1.07/Ku  Otevřete si v Poznámkovém bloku nebo v PSPad „stranka4.html“ a vložte libovolný dlouhý text.  Do „layout.css“ vložte rolovací lištu.right {overflow: auto; }  V „stranka4.html“ přiřaďte tagy pro nadpisy h2, h3 a pro odstavce p  Zvýrazněte částí textu v „stranka4.html“ pomocí tagu span a definováním třídy ve „format.css“  Odsaďte text pomocí vlastností margin: nebo margin-left: ve „format.css“

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ VY_32_INOVACE_4.3.IVT1.07/Ku  Příklad - zdrojový kódzdrojový kód  Soubor layout.csslayout.css  Soubor format.cssformat.css  Webové stránky v prohlížečiprohlížeči

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ VY_32_INOVACE_4.3.IVT1.07/Ku  JANOVSKÝ, Dušan. Jak psát web [online]. 1999, [cit ]. Dostupné z:  Jak dobře začít s tvorbou webu - po lopatě [online] [cit ]. Dostupné z:  Tvorba webu [online] [cit ]. Dostupné z:  CASTRO, Elisabeth. HTML, XHTML a CSS. Brno: Computer Press, ISBN