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ě.

Slides:



Advertisements
Podobné prezentace
Laserová tiskárna barevná
Advertisements

Technologie pro publikování na webu 1
Interaktivní tabule Je to velká interaktivní plocha, ke které je připojen počítač a data-video projektor. Kombinuje výhody běžné popisovatelné tabule a.
Technologie pro publikování na webu 1
TNPW1 Technologie pro publikování na webu Cvičení č. 8 Obtékání a sloupce Martin Adámek.
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.
Seznamy Seznamy lze použít pro zpřehlednění zobrazovaných dat na stránce. Seznamy lze použít pro zpřehlednění zobrazovaných dat na stránce. Seznamy se.
Základní struktura, metainformace
Formuláře Formuláře lze nalézt téměř na každém webu. Formuláře lze nalézt téměř na každém webu. Použití formulářů: Použití formulářů: Blog Blog Uživatelské.
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:
CSS a HTML 5. HTML 5 HTML5 je nová verze specifikace značkovacího jazyka HTML, která přináší podstatné změny v technologiích webových stránek. HTML5 umožňuje.
TVORBA WEBOVÝCH STRÁNEK
Tematická oblast: Aplikační software pro práci s informacemi II.
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.
Geometrie pevného disku
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
Topologie sítí Topologií sítě rozumíme způsob zapojení počítačů do počítačové sítě. Rozeznáváme čtyři druhy: Sběrnicová topologie Prstencová topologie.
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.
Blokový model v CSS Obr. 1.
Paměťové karty Paměťové karty patří mezi paměti typu flash memory.
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.
Počítačová síť a typy sítí
Vnější paměť Ukládání dat pouze do operační paměti by při práci s počítačem nestačilo. Pro uchování vytvořených dat mají počítače ještě další, tzv. diskové.
Délkové jednotky v CSS Pro zápis délkových jednotek se používají jednotky: Absolutní Relativní Procenta Údaje se zapisují jako celá nebo desetinná čísla.
Tvorba WWW stránek HTML - XHTML Každá Internetová stránka (WWW stránka) je vytvořena pomocí programovacího jazyka HTML (Hypertext Markup Language). Každá.
LED tiskárna barevná Do této kategorie patří tiskárny, které tisknou pomocí LED diod resp. práškového toneru. Využívají se celkem čtyři tonery (tři barevné,
FTP – přenos souborů Tato služba se používá pro přenos souborů pomocí přenosového protokolu FTP. Pro tuto službu existují speciální klienti, kteří se dokáží.
Inkoustová tiskárna Do této kategorie patří tiskárny, které tisknou pomocí inkoustu. Obr. 1.
Porovnání technologie CD a DVD
Flash disk Je to polovodičová paměť EEPROM, která se dnes používá jako náhrada disket. Připojuje se pomocí sběrnice USB a může mít různou podobu. Obr.
Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Úvod do CSS 1.
Doména Pro připojení do internetu musí mít každý počítač přidělenu tzv. IP adresu, která se skládá z dekadických čísel. Pro připojení do internetu musí.
Funkce a procedury Funkce jsou v PHP nezbytným programovacím prostředkem. Funkce jsou v PHP nezbytným programovacím prostředkem. Procedura vykonává nějakou.
Příkaz break, continue Cykly nemusejí probíhat vždy řádně celým cyklem. Cykly nemusejí probíhat vždy řádně celým cyklem. Někdy může být výhodné provádění.
Vizualizér Vizualizér je zařízení, které zachycuje obraz přímo z neprůhledné předlohy (trojrozměrné předměty, knihy, mapy apod.). Obraz zachycený pomocí.
Reproduktory Reproduktory se používají jako standardní výstup počítačů. Jeden malý reproduktor bývá součástí základní jednotky. Je určen pro přehrávání.
Digitální výukový materiál zpracovaný v rámci projektu „EU peníze školám“ Projekt:CZ.1.07/1.5.00/ „SŠHL Frýdlant.moderní školy“ Škola:Střední škola.
Jazyk PHP Programovací jazyk PHP (Hypertext preprocessor) je skriptovací jazyk, který běží na straně serveru. KLIENT - SERVER Server posílá do vašeho počítače.
CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují.
Sběrnice Obr. 1.
CSS Cascading Style Sheets Kaskádové styly
DTD DTD (Document Type Definition) je jinými slovy návod pro prohlížeč zpracovávající dokument. DTD (Document Type Definition) je jinými slovy návod pro.
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:
Příkaz "echo" Příkaz "echo" Příkaz "echo" se používá pro zobrazení daných informací na monitoru. Příkaz "echo" se používá pro zobrazení daných informací.
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: Vkládání objektů do textového editoru Autor:
WWW – hypertextový informační systém
HTML editory HTML editory se dělí na dva základní typy:
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á,
Netradiční typy diskových pamětí
Diskové pole RAID Disková pole (RAID - Redudant Array of Inexpensive Disks) se používají v souvislosti se zabezpečením dat. Princip RAID pole spočívá.
URL v HTML URL - Unique Resource Locator Příklad:
Plazmové monitory Plazmové displeje jsou určeny zejména pro použití ve veřejných informačních systémech - letiště, nádraží, banky, nebo při prezentacích.
Vypalovací mechanika Vypalovací mechanika je zařízením, které spadá do skupiny výstupních zařízení. Úkolem vypalovací mechaniky je nahrát (vypálit) data.
Základy syntaxe jazyka PHP PHP JE TECHNOLOGIE BĚŽÍCÍ NA SERVERU. PHP JE TECHNOLOGIE BĚŽÍCÍ NA SERVERU. Typický PHP skript obsahuje: Typický PHP skript.
Primitivní počítadlo
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.
Textový procesor (MS Word) Ing. Jan Roubíček. Tabulky v textu VY_32_INOVACE_10_2_15_AP.
Tvorba www stránek CSS (Úvod do kaskádových stylů (Úvod do kaskádových stylů) Ing. Miroslav Vachůn, Ph.D.
Příkaz switch Příkaz switch se používá, pokud testujete jednu proměnnou s více možnými hodnotami. Příkaz switch se používá, pokud testujete jednu proměnnou.
Sestava počítače Do sestavy počítače patří všechny vnitřní i vnější části počítače včetně příslušenství. 
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.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.
Diskové pole RAID Disková pole (RAID - Redudant Array of Inexpensive Disks) se používají v souvislosti se zabezpečením dat. Disková pole (RAID - Redudant.
1 Kurz XHTML a CSS Část 1: Náš první XTHML dokument a jeho publikace na internetu.
Elementaristika elektronických informací
ADOBE DREAMWEAVER CS6 CSS - Formátování textu
Název: VY_32_INOVACE_VDT_6B_7A Škola:
Transkript prezentace:

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ě šířky okna Jednotné rozvržení a vzhled všech stránek webu Typy layoutu Podle počtu sloupců Jednosloupcový Dvousloupcový Třísloupcový Vícesloupcový

Layout stránky Technologie tvorby layoutu Podle nastavení šířky stránky fixní layout – dle rozlišení – šířka cca 1000px fluidní layout – šířka je proměnná dle rozlišení Technologie tvorby layoutu Tabulkový layout Rámcový layout Blokový layout

Tabulkový layout stránky Pro rozvržení stránky (layout stránky) se dříve nejčastěji používala tabulka, protože jazyk HTML neměl žádné univerzální značky pro tuto činnost. Výhody přehledný a jednoduchý kód Nevýhody pomalé načítání - načítá se celá tabulka najednou omezené možnosti formátování buněk tabulky Nepoužívat!!

Rámcový layout stránky Rámcový layout seskupuje obsahu několika html stránek pomocí speciální rámcové stránky. Rámcová stránka definuje rozvržení obsahu stránek do rámcových oblastí. Výhody jednoduché a efektivní řešení rozložení obsahu společné menu pro všechny strany Nevýhody pomalé načítání nevhodné pro vyhledávače Nepoužívat!!

Blokový layout stránky Pro rozvržení stránky pomocí CSS pozicování byly vymezeny značky div a span. Tyto dva elementy jsou univerzální, můžeme obsah uvnitř nich formátovat jakoukoliv vlastností CSS. Výhody rychlé načítání - úsporný kód formátování - větší možnosti nastavení vzhledu úprava vzhledu - centrální šablona stylů Nevýhody rozdíly mezi prohlížeči v interpretaci CSS

Značka DIV Tato značka ohraničí nějakou část stránky, která bude mít společné vlastnosti nadefinované v CSS pomocí nějaké třídy. Do značky div lze vložit další (vnořený) div. Značka div je bloková a hodí se nejlépe pro rozvržení stránky. Značka DIV před sebou a za sebou udělá konec řádku.

Značka SPAN Značka span není značkou blokovou, ale značkou řádkovou. Pomocí této značky lze formátovat určitou část textu. Značka SPAN nemůže v sobě obsahovat blokové značky. Používá se zejména pro práci s textem. Příklad: <p>Normální text a najednou <span title="text bubliny">text, který má bublinu.</span></p>

Dvousloupcový layout Obr. 1

Dvousloupcový layout Obr. 2

Dvousloupcový layout Externí stylopis – styl2.css Obr. 3

Třísloupcový layout Obr. 4

Třísloupcový layout Obr. 5

Třísloupcový layout Externí stylopis – styl3.css Obr. 6

Otázky k opakování Co je to layout stránky? Jakým způsobem lze vytvořit layout stránky? Jaké nevýhody má tabulkový a rámcový layout?

Použité zdroje BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, 2011. BLÁBOLIL, Roman. Www.blabik.cz: Podpora výuky: „Tvorba www stránek“ [online]. 6. února 2013 11:30. Dostupný z WWW: http://www.blabik.cz/vyuka/ict/35_Tvorba_WWW_stranek.pdf Použité obrázky: Vlastní