TNPW1 Technologie pro publikování na webu Cvičení č. 8 Obtékání a sloupce Martin Adámek.

Slides:



Advertisements
Podobné prezentace
Základy HTML – vkládání objektů
Advertisements

Technologie pro publikování na webu 1
Technologie pro publikování na webu 1
TNPW1 Technologie pro publikování na webu
PRIPO Principy počítačů
PRIPO Principy počítačů
TVORBA WEBOVÝCH STRÁNEK
Technologie pro publikování na webu 1 Ing. Jiří Štěpánek.
TNPW1 Technologie pro publikování na webu Přednáška č. 4 seznamy seznamy tabulky tabulky jejich sémantika jejich sémantika Ing. Martin Adámek Katedra informačních.
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á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:
PRIPO Principy počítačů
TNPW1 Cvičení
Mgr. Vlastislav Kučera přednáška č. 10.  Polohování ◦ Absolutní polohování  Vlastnosti ◦ umístění ◦ display ◦ visibility.
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ě.
PHP – vkládání souborů a html 5
TNPW1 Technologie pro publikování na webu Cvičení č. 5 SFTPFormuláře Martin Adámek.
TNPW1 Technologie pro publikování na webu
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.
TNPW1 Technologie pro publikování na webu Cvičení č. 3 Nadpisy Martin Adámek.
KASKÁDOVÉ STYLY 4.
VY_32_INOVACE_4.3.IVT1.17/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 č. 8.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
Centrování, Box model, Plovoucí fotogalerie Ing. Jiří Štěpánek.
Blokový model v CSS Obr. 1.
Seznam - menu Seznam a jeho položky lze použít například i na vytvoření vysouvacího menu. Seznam a jeho položky lze použít například i na vytvoření vysouvacího.
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.
TNPW1 Cvičení
CSS – rámečky Mgr. Lenka Švancarová.
Přehled dalších vlastností
TNPW1 Technologie pro publikování na webu Cvičení č. 4 Nejen textem živ je web – seznamy, obrázky a tabulky Martin Adámek.
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.
CSS: šířka prvku, rámečky, okraje, výplně plovoucí prvky #CSS – šířka prvku, rámečky, okraje, výplně #CSS – plovoucí prvky.
PRIPO Principy počítačů
TNPW1 Technologie pro publikování na webu Cvičení č.1 Organizační úvod Subjektivní kvalita webu Martin Adámek.
ATNPW1 Technologies for web publishing Lecture no. 1 Organisation introduction Organisation introduction Entrance to HTML Entrance to HTML Ing. Martin.
CSS – vlastnosti textu text-align (vodorovné zarovnání)
TNPW1 Cvičení
TNPW1 Technologie pro publikování na webu Cvičení č. 7 Menu Martin Adámek.
Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_259 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
CSS Cascading Style Sheets Kaskádové styly
DHTML Jan Felger. Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Úvod Tato prezentace zobrazuje pouze zcela základní minimum znalostí, které.
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:
Mgr. Vlastislav Kučera přednáška č. 5.  transformace  přechody.
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.
Mgr. Vlastislav Kučera lekce č. 6.  Polohování ◦ normální řazení ◦ plovoucí boxy  Vlastnosti ◦ float ◦ clear.
Obrázky Obrázky se používají pro oživení stránek. Obrázky se používají pro oživení stránek. Obrázky se do stránek vkládají nepárovou značkou. To znamená,
TNPW1 Technologie pro publikování na webu Cvičení č. 9 Boxmodel Martin Adámek.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
TNPW1 Technologie pro publikování na webu Cvičení č. 2 Překlad URL na fyzickou adresu stránky Editor Macromedia Homesite „Hello world“ v XHTML (úvod do.
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.
Mgr. Vlastislav Kučera lekce č. 5.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
Textový procesor (MS Word) Ing. Jan Roubíček. Tabulky v textu VY_32_INOVACE_10_2_15_AP.
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í.
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.
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.
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í.
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.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
CSS – menu vlevo Mgr. Lenka Švancarová. CSS – menu vlevo.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
Ing. Jiří Štěpánek. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek.
NSWI096 - INTERNET CSS – kaskádové styly Mgr. Petr Lasák.
ADOBE DREAMWEAVER CS6 CSS - Formátování textu
Chování blokových prvků v rámci HTML dokumentu
Tvorba WEBOVÝCH stránek – obrázky
Tabulky a prostředí tabular
Tvorba webových stránek
Přizpůsobení webu Microsoft SharePointu Online
Tvorba webových stránek
Transkript prezentace:

TNPW1 Technologie pro publikování na webu Cvičení č. 8 Obtékání a sloupce Martin Adámek

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 2 Z-index pořadí na ose „z“ pro pozicované prvky –position: absolute, relative, příp. fixed jinak výchozí hodnota „position“ je „static“ výchozí hodnota: auto –pokud se nevnořuje, odpovídá hodnotě „0“ kladné číslo~vyšší důležitost záporné číslo~nižší důležitost

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 3 Plovoucí boxy výchozí nastavení: float: none nastavení obtékaných prvků: –float: left –float: right –nutné povinně zadat šířku obtékající prvky se samy narovnají okolo

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 4 Třísloupcové rozložení 2 obtékané prvky (float: left; float: right;) pak 1 běžný, obtékající, prvek –bez obtékání –nastavený margin (left, right) proti podtečení pod krajní sloupce –bez nastavené šířky pro plovoucí rozložení (přizpůsobení šířce okna) cílem zabránit nutnosti zobrazení vodorovného posuvníku !!!

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 5 Třísloupcové rozložení nejvyšší obvykle hlavní obsah (uprostřed) –=>u něj margin (levý i pravý) nejvyšší může být i jeden z krajních sloupců –=> nutnost použít u patičky css vlastnost clear: both clear: left, right, both; výchozí je clear:none; –pokud má patička nastaveno margin-top≠0: margin-top patičky by platil jen pro prostředek => nad patičku vložit prázdný div –výška např. 1px –clear nastavit jemu příklad –lide.uhk.cz/fim/ucitel/fsadamm2 lide.uhk.cz/fim/ucitel/fsadamm2

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 6 Bodovaný úkol – dnešní zadání Vytvořte stránku s třísloupcovým plovoucím rozložením (layoutem) –stačí vytvořit 5 barevných obdélníků (divů) hlavička; levý; pravý; hlavní; patička mezi jednotlivými bloky zadané pevné mezery pružné rozložení (přizpůsobení šířce okna) –tentokrát výjimečně stačí správné chování ve FF ale při různých běžných rozlišeních samozřejmě stále validní kód, s patřičným odkazem ohodnocení úkolu: 2 body obecná pravidla jsou na webu webu

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 7 Příště boxmodel zadání semestrálního projektu!