Výška – height a šířka – width obsahu bloku 8 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Odstup od rámečku – padding

Okraje – margin

Styl pozadí – background nebo background-color

Více o stylu pozadí Pozadí má stránka, odstavec, tabulka, zobrazuje se pod celou plochou objektu.

•background-color nastavuje barvu pozadí •background-image nastavuje obrázek na pozadí •background-repeat určuje, jak se obrázek opakuje •background-position definuje pozici obrázku na pozadí

Úprava textu Stylové prvky typu inline: zobrazí text v písmu větším než je základní

zobrazí text tučně

zobrazí text v kurzívě zobrazí text podtržený <strike> zobrazí text přeškrtnutý <sub> zobrazí text jako dolní index <sup> zobrazí text jako horní index 9 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Formátování textu: text-align •zarovnání textu •povolené hodnoty: –left (vlevo) –right (vpravo) –center (na střed) –justify (do bloku) •Příklad: h1{text-size: xx-large; text-align: center}

Seznamy •s odrážkami •číslované

číslovaný

seznam


1. Základy
2. Text
   
   a
   
   

seznam

písmo s

odrážkami


• Základy
• Text
  
  a
  
  písmo

,která označuje nadpis, zůstala u obou nadpisů zachována.

VKLÁDÁNÍ TEXTU

DW poskytuje možnost vkládání textu kopírovaného z jiných zdrojů (MS Office, OpenOffice, poznámkový blok, atd) a ponechává tolik z původního formátování, kolik požadujeme. V praxi si totiž zákazník dodává svoje texty po obsahové a jazykové korektuře a tvůrce webových stránek je pouze vkládá do dohodnutého layoutu. - vybereme výplňový text v pravém sloupci bez nadpisu až po zápatí, ale bez něj. - klávesou Delete jej vymažeme. - Z nabídkového řádku otevřeme→Soubor→otevřít→místní disk C→DW kurz→obsah→ →lekce→lekce 01→dovolená.rtf. C (celý text vybereme a zkopírujeme do schránky (CTRL+C). - V DW umístíme kurzor pod nadpis v pravém sloupci a vložíme sem zkopírovaný text (CTRL+V). Celý text se okamžitě zformátuje jako odstavce se značkou

( jedná se o párový tag). - Ukazatelem myši vybereme výplňový text Zápatí a přepíšeme jej „Prohlídka měst v Umbrii“ - zalomíme řádek →Shift+Enter. Poté napíšeme text Kontaktujte nás Ve zdrojovém kódu byl tento povel zapsán jako nepárový tag
. 16 Integrovaná střední škola polygrafická, Brno, Šmahova 110

VKLÁDÁNÍ OBRÁZKŮ

Vkládání obrázků je velmi přímočaré, podobně jako text, které také dodává zadavatel stránky.Jakmile umístíme obrázek do stránky, můžeme jeho vlastnosti upravovat buď pomocí panelů Styly CSS nebo Vlastnosti. - vybereme veškerý obsah levého sloupce (sidecar 1) včetně nadpisu a vymažeme jej (Delete) - V selektoru značek ( lišta pod dokumentovým oknem)vybereme značku

a vymažeme ji. Tvůrce layoutu do tohoto sloupce totiž vložil nadpis, a pokud ho nebudeme potřebovat, musíme odstranit i značku pro nadpis. - Z nabídky Vložit vybereme →Obraz a dialogovém okně Vyberte zdroj obrazu označíme souborový systém, v oblasti hledání vybereme →místní disk C→DW kurz →obsah→lekce →obrázky→ Zahrada.jpg →OK .V dialogovém okně Atributy tagu obrazu pro usnadnění přístupu do kolonky Alternativní text napíšeme Zahrada→OK. Tento text se bude zobrazovat v případě, že se obrázek nezobrazí, např. některá mobilní zařízení, a pomůže pochopit obsah stránky.

- ukazatel myši vložíme na začátek odstavce pravého sloupce (hlavní obsah, mainContent), před větu Přijeďte si… a stejným způsobem jako v předešlém případě vložíme obrázek „Italské horské 17 Integrovaná střední škola polygrafická, Brno, Šmahova 110

město“ se stejným alternativním textem. - Z nabídkového řádku →Okno otevřeme panel→Vlastnosti. Z roletky Třída vybereme fltrt nebo fltlft (float right nebo left, zarovnej vpravo, vlevo).Ponecháme obrázek vpravo a text jej bude obtékat vlevo.→Uložit. Stránka nyní obsahuje jak text, tak i obrázky vložené do layoutu CSS, stránka vypadá dobře a se bude zobrazovat ve všech prohlížečích.

5. lekce

KASKÁDOVÉ STYLY CSS Moderní webové stránky používají ke stylování a tvorbě layoutů kaskádové styly (CSS). Webová stránka je složená z HTML (zdrojový kód),CSS a JavaScriptu, pomocí kterých ji budujeme. HTML je obsah- materiál vkládáme na vytvářenou webovou stránku v okně Návrh. CSS zajišťuje vzhled a rozvržení stránky, tj. kam se jednotlivé elementy umístí, použití barev textu, tabulek, okrajů, rámečků, pozadí,… JavaScript přidává funkci interaktivity.

ZMĚNA BARVY POZADÍ

K úpravě vlastností pomocí CSS můžeme použít jakékoliv značky HTML, např. (tělo),

(odstavec),

(nadpis), atd. - otevřeme panel CSS styly →Okno →CSS styly→Vše.rozbalíme<styly> pomocí tlačítky + , abychom nějaké styly viděli, musíme mít otevřený dokument v dokumentovém okně. Nyní najdeme pravidla stylů v hlavičce dokumentu, pomocí ostrých závorek <styly> DW ukazuje, že jde o vnitřní(interní) pravidla. - vybereme selektor body klepneme na ikonu upravit styl (ikona tužky na panelu vpravo dole). V dialogovém okně Definice pravidla CSS pro body vybereme kategorii Pozadí a po rozbalení 18 Integrovaná střední škola polygrafická, Brno, Šmahova 110

tlačítka s paletou barev vybereme pomocí kapátka bílou barvu. DW automaticky vloží do zdrojového kódu hexadecimální hodnotu bílé barvy #FFF do pole Background color (barva pozadí) → OK.

Stisknutím F4 skryjeme všechny panely a získáme náhled přes celou obrazovku, pozadí stránky se změnilo ze šedé na bílou barvu, barvy ostatních pozadí se nezměnily.Pomocí tlačítka F4 můžeme opět obnovit zobrazení panelů. Podobně jako značce můžeme přidělit vlastnosti i jiným elementům.Vlastnosti můžeme měnit i tak, že v selektoru značek vybereme požadovaný element, např.< div#sidebar 1> (divize), poté pomocí ikony →Upravit styl vyvoláme dialogové okno pro definování pravidla a provedeme požadovanou změnu. stránku uložíme →Soubor→Uložit.

VKLÁDÁNÍ GRAFICKÉHO POZADÍ.

Zatímco obrázky do popředí se vkládají přímo do stránkypomocí nabídky Vložit, obrázky na pozadí se umísťují pomocí CSS stylů. 19 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Ukazatel myši vložíme do textu v záhlaví „ Prohlédněte si s … “. - V selektoru značek vybereme element (záhlaví), tuto část označujeme element div s identifikátorem #header . V dokumentovém okně se kolem vybraného elementu zobrazí modrá čára. - otevřeme panel styly CSS → Okno →Styly CSS→Současný , tím se přepneme do režimu zobrazujícího vlastnosti současně vybraného elementu (záhlaví). - Ve spodní části okna vybereme ikonu → Upravit styl a v dialogovém okně „ Definice pravidla pro .twoColFixLtHdr #header h“- vybereme kategorii Pozadí → Procházet vedle Backgroundimage. - V zobrazeném dialogu najdeme v Oblasti hledání →místní disk C→DW kurz →soubory →lekce →obrázky →záhlaví-oblaka.jpg →OK. - Z roletky Background- repeat (opakování) vybereme no repeat→OK→Soubor →Uložit .

PRÁCE V ZOBRAZENÍ KÓD, NÁVRH A ROZDĚLENÍ

V nástrojové liště můžeme přepínat mez zobrazením Kód- zobrazuje se pouze zdrojový kód stránky, Návrh, zobrazuje se pouze grafický vzhled stránky a Rozdělení, ve kterém vidíme jak zdrojový kód, tak i grafický návrh. Pokud vybereme lib.text v jednom zobrazení, je vybrán i ve druhém, toho můžeme využívat při kontrole zapisování tagů, který provádí automaticky DW.

20 Integrovaná střední škola polygrafická, Brno, Šmahova 110

6. lekce

ÚPRAVA TEXTU- PANEL VLASTNOSTI ÚPRAVA TEXTŮ, PÍSMA A BAREV

Kaskádové styly nám umožňují kromě změny vzhledu elementu také změnu vzhledu pouze pro značku na určitém místě ve stránce. - Umístíme kurzor myši do textu nadpisu v záhlaví. - V selektoru značek vybereme tag

- Vpanelu Styly CSS → současný →Upravit styl. V dialogovém okně Definice pravidla pro … vybereme Kategorii Typ a v roletce Font-family (písmo) vybereme skupinu Georgia, Times … Výběr fontu se provádí po skupinách, protože ne na všech počítačích musí být nainstalované stejné fonty písma. - na ikoně Color (barva) zvolíme kapátkem bílou barvu.→ OK →Soubor →Uložit .

ZMĚNA VELIKOSTI TEXTU

Kromě změny typu písma a barvy můžeme také změnit velikost textu. - Ukazatel myši umístíme do odstavce textu hlavního obsahu (mainContent). - V selektoru značek vybereme - V panelu Styly CSS→Vše v části Všechna pravidla vybereme selektor 21 Integrovaná střední škola polygrafická, Brno, Šmahova 110

.twoColFixLtHdr#mainContent,klepneme na ikonu →Upravit styl. V dialogovém okně Definice pravidla CSS pro .twoColFixLtHdr#mainContent vybereme Kategorii Typ, velikost textu je nastavena na 100%.V poli Font-size napíšeme 90 a jako jednotku zvolíme % ze seznamu voleb, →OK→Soubor→Uložit. Toto je jeden ze způsobů, jak můžeme změnit velikost textu.

POUŽÍVÁNÍ PANELU VLASTNOSTI

Panel otevřeme z nabídkového řádku →Okno→ Vlastnosti , nachází se v dolní části, pod selektorem značek. Volby v panelu se mění podle aktuálního výběru, pokud vybereme obrázek je v panelu možno upravovat šířku či výšku obrázku a odkazy na nástroje, pomocí nichž jej můžeme upravovat. Pokud je vybrán text, je panel rozdělen do dvou částí HTML

- v něm můžeme upravovat vlastnosti pomocí zdrojového kódu.

CSS - v nich můžeme upravovat vlastnosti pomocí kaskádových stylů. - Otevřeme panel Vlastnosti z nabídkového řádku →Okno→ Vlastnosti . - V okně dokumentu v hlavním obsahu označte větu Po dva týdnysi budete… . - vybereme tlačítko HTML, klepneme na tlačítko I , tím změníme text na zvýrazněný, některé prohlížeče jej zobrazují kurzívou.Ve zdrojovém kódu i v selektoru značek je zapsán tag <em> - V panelu vlastnosti přepneme na tlačítko CSS, - Z nabídky Odkazované vybereme a Upravit pravidlo

V otevřeném dialogovém okně vybereme Typ selektoru z roletky Složený prvek … a pomocí tlačítka méně specifické jako Název selektoru vybereme #mainContent p em → OK .

22 Integrovaná střední škola polygrafická, Brno, Šmahova 110

V okně Definice pravidla… vybereme kategorii Typ a po otevření palety barev vybereme modrou →OK→ Uložit . Pravidla stylů nyní obsahují nové pravidlo, které můžeme použít na jakýkoliv další text uvnitř elementu div#mainContent , když vybraný text zvýrazníme kurzivou, automaticky na něj bude použito obarvení dle definovaného pravidla. Tímto jsme vytvořili svou první webovou stránku.Na konci práce s novou stránkou si ji vždy prohlídneme v prohlížeči, v praxi máme nainstalováno více prohlížečů, ve všech nejpoužívanějších bychom měli zkontrolovat, jak se stránka zobrazuje. - → Soubor →náhled v prohlížeči.- (Mozilla, Explorer, Google Chrome, Opera, …).

7. lekce

EXTERNÍ ŠABLONA CSS PRÁCE S KASKÁDOVÝMI STYLY

Většina stylů CSS je uložena v externí šabloně stylů, potom mohou být všechny vytvářené stránky propojeny s touto šablonou. Tímto způsobem je umožněna jednoduchá změna stylů na všech webových stránkách, propojených s externí šablonou. Navíc to umožňuje vypracovat více externích šablon tím je možno si vybírat různý vzhled pro stejný obsah. Tento způsob práce vede ke specializaci grafiků, někteří se věnují pouze vytváření těchto externích šablon a tvůrci www 23 Integrovaná střední škola polygrafická, Brno, Šmahova 110

stránek si mohou kupovat.

PROPOJENÍ EXTERNÍ ŠABLONY STYLŮ CSS V ADOBE DW CS4

- v panelu soubory otevřete DW kurz→ lekce 02→ onasstart.html (na stránce je vložen základní obsah, tj. obrázky, odstavce textu, nadpisy, ale chybí layout a styly. - uložte stránku jako onas-příjmení. html do DW kurz→ lekce 02 - stránku onasstart.html zavřete beze změny - z nabídkového řádku otevřete Okno→styly CSS→vše→připojit seznam stylů (ikona řetězu) - v dialogovém okně „Připojit externí šablonu stylů“→ Procházet→vyberte DW kurz→ lekce 02→mojestyly.css v okně Média vyberte obrazovku (screen). Moderní CSS styly umožňují použití stylů v závislosti na typu média. V přepínači Přidat jako vyberte Odkaz →OK

Vytvářená stránka se změnila, byl použit layout z 1.lekce,stránka je rozdělena na 2 pevné odstavce, obrázek pozadí v záhlaví je použit i v zápatí - Soubor→Uložit vše. Tímto způsobem jsme propojili tuto stránku s mojestyly.css , ve zdrojovém kódu v hlavičce stránky na řádku 7: .

24 Integrovaná střední škola polygrafická, Brno, Šmahova 110

VYTVOŘENÍ NOVÉHO PRAVIDLA CSS

Pravidlo se skládá ze 2 částí: Selektor

např. h1

Deklarace vlastností např. color: red; fontsize:36 px; v DW se vytváří styly v rozhraní s roletkami a volbami, HTML kód za nás zapisuje DW, pravidla vytváříme pro 2 typy selektorů: 1. Selektor následníka 2. Vlastní selektor (třída) 1. DEFINICE STYLŮ PRO SELEKTOR NÁSLEDNÍKA.

Takto definovaná pravidla pomocí speciálních značek se automaticky ihned použijí, kdykoliv takovou značku (tag) na stránce použijeme. - v nabídkovém řádku otevřeme →Okno→Styly CSS→vše, rozbalíme + mojestyly.css(screen) kurzor vložíme do textu „Seznamte se s našimi zaměstnanci“ a v selektoru Značek (tagů) vybereme

. DW vloží do pole Název selektoru nejdříve takový selektor, který se váže k aktuální pozici kurzoru v textu. - vybereme →nové pravidlo CSS (ikona + v pravé dolní části panelu styly CSS) - V dialogové okně Nové pravidlo CSS klikneme 2x na méně specifické, tím se vytvoří nový selektor #mainContent h1, to bude selektor následníka →OK - symbol # před názvem selektoru znamená, že jde o identifikátor a definované pravidlo ovlivní pouze ty značky

,které jsou vnořeny (jsou následníky) identifikátoru #mainContent

25 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- v dialogovém okně „Definice pravidla CSS pro #mainContent h1“ vybereme v Kategorii Typ, v roletce Font-family zvolíme Georgia, Times New Roman,… a jako Color (barva) označíme štětečkem modrou barvu hexadecimální č.#06F →OK→soubor →Uložit vše. Tímto způsobem uložíme nejen změny ve zdrojovém kódu webové stránky, ale i změny v CSS stylech v souboru mojestyly.css.

8. lekce

ZMĚNY PRAVIDEL A POŘADÍ Všechna námi nově vytvořená nebo přejatá pravidla, která jsou umístěna v externí šabloně mojestylycss si můžeme prohlédnout v panelu →Styly CSS→Vše rozbalit <styly>→+ Zde se také objeví i nově vytvořené pravidla v panelu Vlastnosti, podle jména, které jsme jim přidělili(.jméno,..). - Abychom uviděli všechny vlastnosti vybraného pravidla vybereme v panelu Vlastnosti CSS→současný při označení jména v dokumentovém okně se ve Stylech CSS se objeví vlastnosti pravidlapro .jméno. Abychom je všechny uviděli, musíme zvětšit okno Panelu Styly CSS, za spodní okraj je můžeme roztáhnout. Pokud potřebujeme změnit toto pravidlo, můžeme to provést v panelu →Styly CSS→Upravit styl.Tím vyvoláme dokumentové okno „Definice pravidla pro …“ a vněm můžeme provést požadovanou změnu.Stejného efektu dosáhneme dvojklikem na 26 Integrovaná střední škola polygrafická, Brno, Šmahova 110

příslušnou vlastnost. Tímto způsobem jsme v předchozí práci změnili typ písma a barvu textu pro značku

uvnitř elementu s identifikátorem # mainContent. Jakmile do tohoto elementu na jiné místo vložíme novou značku

, bude na text v této značce použito stejné pravidlo, .Adobe Dreamweaver CS4 rozděluje vlastnosti kaskádových stylů do 8 kategorií:Typ, Pozadí, Blok, Rámeček, Okraj, Seznam, Umísťování, Rozšíření. Nyní vytvoříme nové pravidlo pro text pod obrázkem New Yorku v levém sloupci, v elementu #sidebar1 p. - umístíme kurzor do textu „Výhled z našich kanceláří v New Yorku“, v selektoru značek vybereme odstavec

v panelu →Styly CSS→Nové pravidlo → v dialogovém okně „Nové pravidlo“vybereme Složený prvek (na základě výběru) a v položce Název selektoru ubereme specifikaci až na #sidebar1 p→OK

V dialogovém okně „ Definice pravidla CSS pro # sidebar1 p v mojestyly“ vybereme Kategorii Typ,v poli Font-size napíšeme 80 a v roletce vybereme jednotky % a v roletce Font.style vybereme Italic (kurzíva) !! Jiný způsob změny font-style je z panelu Vlastnosti→přepinač I (kurzíva), používá se pro vložení významového důrazu, DW vloží párovou značku <em> text !! Podobně je to s přepínačem „B“ (tučně) pro HTML kód tag <strong>tučně , v pravidlech CSS 27 Integrovaná střední škola polygrafická, Brno, Šmahova 110

můžeme vytvořit novou třídu, které přidělíme vlastnost ve Font- weight →bold a HTML kódu se to projeví tagem <span class="název třídy">.

- v Kategorii Rámeček zrušíme v poli Margin (vnější okraj) stejné pro všechny a v poli Top (nahoře) napíšeme 0 →OK→soubor → uložit vše

ZMĚNA POŘADÍ VLOŽENÝCH PRAVIDEL

Pro snadnější hledání jednotlivých pravidel v šabloně stylů je výhodné je po vytvoření přesunout tak, jak to odpovídá jejich důležitost, nebo sdružovat více podobných pravidel, máme však možnost je přesouvat do jiného umístění. - otevřeme panel Styly CSS→Vše→rozbalit všechna pravidla + a myší přetáhneme # mainContenz h1 do pozice pod .twoColFixLtHdr #mainContent - myší přetáhneme #sidebar1 p do pozice pod .twoColFixLtHdr #sidebar1 - →Soubor→uložit vše ,tím uložíme provedené změny jak souboru HTML, tak i v souboru CSS.

28 Integrovaná střední škola polygrafická, Brno, Šmahova 110

9. lekce

NASTAVENÍ VLASTNÍCH TŘÍD 2. NASTAVENÍ VLASTNÍCH TŘÍD

Na rozdíl od selektoru následníka, který se pro zadaný tag (značku) a identifikátor používá automaticky, se pravidlo nastavené pro třídu a jméno selektoru používá pouze tam, kde jej potřebujeme. - v panelu Styly CSS →Nové pravidlo CSS - v dialogovém okně „Nové pravidlo CSS“ vybereme Typ selektoru v roletce Třída, v poli Název selektoru napíšeme.jméno.V okně Definice pravidla nastavíme mojestyly.cz→OK

- v dialogovém okně „Definice pravidla CSS pro .jméno v mojestyly“ zvolíme Kategorii Typ, v roletce Font-variant vybereme small-caps.(kapitálky)→OK→soubor→uložit vše

POUŽITÍ STYLŮ

Jednou z možností, jak použít styly na značce je využít panel Vlastnosti - v pravém odstavci vybereme tažením myší slovo Elaine, tím se zvýrazní jméno a oblast nad slovem 29 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- otevřeme z nabídkového řádku →Okno →Vlastnosti, v levé části zkontrolujeme, zda máme stisknuté tlačítko Css. Seznam odkazované v panelu Vlastnosti zobrazuje všechny třídy CSS, které jsou dostupné v dokumentu,vyberte→.jméno Vybraný text se formátuje kapitálkami a indikátor v selektoru značek obsahuje název třídy: <span.jméno>.Třída se přidala do textu pomocí tagu (značky) <span> Pro dokončení stránky zopakujte postup s výběrem jména každé osoby na vytvářené stránce a použijte opět třídu .jméno ., prohlédneme si stránku v živém zobrazení nebo v prohlížeči,potom zvolíme →soubor→uložit. POUŽITÍ VLASTNÍCH TŘÍD NA ČÁSTI STRÁNKY V DW můžeme vkládat části stránky nebo značky

do dokumentu, abychom vytvořili oblasti layoutu nebo organizovali části stránky, značce ,

můžeme přiřadit identifikátor nebo třídu. - myší vybereme fotografii ELAINE a oba odstavce textu. - z nabídkového řádku →vložit→vybereme→rozvržení→Vložit tag Div

- V otevřeném dialogovém okně v roletce Vložit je zvoleno Uzavřít u výběru , do pole třída napíšeme .profil stiskneme tlačítko →Nové pravidlo V dialogovém okně Nové pravidlo CSS bude vybrán Typ selektoru Třída a do pole selektoru napíšeme .profil .V roletce Definice pravidla vybereme mojestyly.css →OK V dialogovém okně Definice pravidla CSS pro profil v mojestyly.css vybereme Kategorii Rámeček a v roletce.Clear (zrušení obtékání) zvolíme right (doprava), ze seznamu kategorie 30 Integrovaná střední škola polygrafická, Brno, Šmahova 110

vybereme Umisťování a roletce Overflow (přetečení) vybereme hodnotu auto (automaticky) →OK.

DW nás vrátí do dialogu Vložit tag Div →OK

V okně dokumentu se nyní zobrazuje tečkovaná čára obklopující část stránky, která obsahuje vybraný obrázek a text. Čára ukazuje na přítomnost značky

.Dokud neprovedeme na stránce další změny, jiné změny na stránce neuvidíme. Další postup přidávání podobných značek

s přiřazenou třídou .profil se bude u ostatních jedinců na stránce trochu lišit, protože třída .profil nyní existuje v souboru mojestyly.css. - v dokumentu vybereme obrázek Lindy a dva odstavce textu, které ji popisují. - v panelu Vložit vybereme v kategorii Rozvržení položku Vložit tag Div, tím se nám znovu otevře dialogové okno Vložit tag Div, v roletce vložit vybereme volbu Uzavřít u výběru ,v roletce třída vybereme .profil. Třída se potom použije na novou značku

→OK. 31 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Část stránky věnovaná Lindě se umístí do své značky

, kolem níž se objeví v okně dokumentu tečkovaná čára. -zopakujeme kroky i pro ostatní osoby, Jason, Lin, Charlie →OK Tímto způsobem jsme vytvořili oddělené části layoutu, které obsahují jednotlivé profily, a přidělili jsme jim třídu CSS, která nám umožní jim dále s tímto profilem pracovat.

PLOVOUCÍ UMÍSTĚNÍ OBRÁZKŮ

Nyní máme vytvořenou třídu nazvanou .profil , která nastavuje vlastnosti clear a owerflow elementům div, které jsme přidali do stránky. - vybereme myší ELAINE, v selektoru značek musíme mít vybráno , v panelu vlastnosti zvolíme ve třídě . fltrt, tím se obrázek zobrazí vpravo a text se zalomí vlevo, u dalších obrázků budeme střídavě volit třídu .fltlft a fltrt, tím budou obrázky střídavě zarovnány vpravo a vlevo.nakonec → Soubor→ Uložit vše.

10. lekce

ŽIVOTOPIS-SAMOSTATNÁ PRÁCE DOMÁCÍ ÚKOL-ZADÁNÍ:

Připravte si jako domácí úkol do samostatného souboru svoje dvě portrétní fotografie (velikost max 60 kB) a ve vámi používaném textovém souboru dva odstavce, první s názvem „osobní životopis a druhý bude mít název profesní životopis, oba by měli mít délku maximálně 400 znaků včetně mezer.Všechny soubory uložte do složky s názvem „ Práce č.1-životopis“. Tuto složku si uložte na vlastní USB-flash disk nebo si ji můžete poslat emailem.

32 Integrovaná střední škola polygrafická, Brno, Šmahova 110

POPIS ÚKOLU:

Vaším úkolem bude vytvořit pomocí programu Adobe Dreamweaver CS4 jednu kompletní wwwstránku s názvem“Vaše příjmení-životopis“, do zadaného rozvržení vložíte vlastní fotografie, nadpisy a odstavce zadaného nebo vámi předem připraveného textu, který máte uložený na USBflash disku. Potom podle jednotlivých bodů zadání budete postupně vkládat nebo upravovat jednotlivá pravidla kaskádových stylů tak, aby vámi vytvořená www-stránka se svým stylem co nejvíce podobala vzorové stránce.

VLASTNÍ ZADÁNÍ:

-Vytvořte nový dokument, typ stránky: prázdná stránku, HTML, jako rozvržení (layout) zvolte: 33 Integrovaná střední škola polygrafická, Brno, Šmahova 110

dva pevné sloupce, všechny šířky v obrazových bodech, postraní sloupec vlevo, záhlaví a zápatí. Jako typ dokumentu zvolte:XHTML 1.0 Transitional, rozvržení CSS: přidat do záhlaví. - Nahraďte nadpis v záhlaví vaším jménem a příjmením -.Upravte pravidlo CSS stylů pro „.twoColFixLtHdr #header h1“: Typ:

font-family: Georgia, Times New Roman, Times, serif font-size:

36 px

color:

#900

Pozadí: background-image: C/Dreamweaver kurz/lekce/obrázky/záhlaví-oblaka.jpg. - Přepište text nadpisu

v #mainContent h1 na „Osobní životopis“ a změňte na nadpis

. - Vložte nové pravidlo do CSS stylů pro #mainContant h2: Font-family

Verdana, Geneva, sains-serif…

Textdekoration Color

Underline #009

- Přžepište text druhého nadpisu

v #mainContent h2na „Profesní životopis“ - Vložte do #sidebar 1 předem připravený vlastní obrázek, jeho velikost by neměla přesahovat 60 kB. - pod obrázek vložte do odstavce

rok pořízení fotografie. - upravte pravidlo pro #sidebar 1p: Font-style

italic

Font-variant

small-caps

34 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Color

#039

- Přepište text v zápatí stránky na : V Brně 10.3.2010 a řádek zalomte pomocí příkazu
před datem. Zápatí můžete rozšířit pomocí zalomení řádku podle velikosti fotografie. - Upravte pravidlo CSS pro .twoColFixLtHdr # footer p: Typ: font-family

Georgia,“Times New Roman“, Times, serif

font-style

italic

font-size

36 px

font-weight

bolder

color

# FC0

Pozadí: background-image

obrázek č.2

Background-repeat

repeat

Background-attachment

sroll

Background-position (x)

left

Background- position(y)

top

- Upravte pravidlo CSS pro body: Pozadí:

background-color

#F9

35 Integrovaná střední škola polygrafická, Brno, Šmahova 110

11. lekce

VYTVOŘENÍ ŠABLONY STYLŮ PRO TISK VYTVOŘENÍ ŠABLONY STYLŮ PRO TISK

Soubory CSS mohou také poskytovat styly pro jiná média, např. pro tisk, vytvořené mojestyly.css byly navrženy pro zobrazení stránky na obrazovce PC. Tiskové styly často vylaďují barevnou kombinaci, aby se stránka lépe vytiskla, skrývají nepotřebné části stránky, vylaďují velikosti či layout, aby více odpovídal použitému médiu, tedy papíru. Jedné stránce můžeme přiřadit více šablon, jakmile se stránka vykreslí pro tisk, bude tiskové zařízení hledat tiskovou šablonu stylů, a pravidla v ní se vezmou v potaz. Pokud ji nenajde, tiskárna rozliší mezi pravidly pro obrazovku a pravidly pro všechny typy médií. Výchozím zobrazovacím médiem v DW je obrazovka, umožňuje však vykreslení i v jiných stylech. - otevřeme z nabídky → Zobrazení →Panely nástrojů→Styl vykreslení, panel se objeví vlevo nad dokumentovým oknem.

PŘEVEDENÍ STÁVAJÍCÍ ŠABLONY STYLŮ NA TISKOVOU

Nejvýhodnější je nevytvářet zcela novou tiskovou šablonu, ale vytvořit ji převedením již vytvořené

šablony

(mojestyly.css),

přejmenováním

a

úpravou

pravidel.

- z nabídky otevřeme → Soubor → Otevřít →DW kurz →Lekce → Lekce 02 → mojestyly.css . -

→soubor

→Uložit

jako

napíšeme

příjmení-tisk.css

→Uložit.

36 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Otevřeme panel → Styly CSS → Připojit seznam stylů. Z nabídky Procházet vybereme →příjmení-tisk.css →,.přidat jako odkaz a v roletce média vybereme tisk → OK .

Tím se připojí nová položka – příjmení-tisk.css k šabloně mojestyly.css, a my můžeme některá

pravidla

upravovat

nebo

zcela

odstranit.

- zavřeme soubor příjmení-tisk.css a dokument příjmení-onas.html→ soubor →Uložit.

SKRYTÍ NEPOTŘEBNÝCH ČÁSTÍ STRÁNKY

- otevřeme

v panelu nástrojů →Styl vykreslení → Vykreslit zobrazení při tisku

- ukazatel myši vložíme do textu zápatí, v panelu Styly CSS → zvolte Vše a rozbalíme + , vybereme

selektor

twoColFixLtHdr

#footer

→Upravit

styl

.

V dialogovém okně „Definice pravidla“ zvolíme Blok, z roletky Display → none (žádné) → OK. Tím se zápatí stránky skryje, pokud budeme stránku prohlížet v zobrazení pro tisk. ZAJIŠTĚNÍ SPRÁVNÝCH BAREV PRO TISK

Je potřeba zajistit, aby byl text nadpisu

v záhlaví vidět, i když se nebudou tisknout obrázky v záhlaví. Proto musíme změnit barvu nadpisu v záhlaví z bílé na světle šedou. - v panelu Styly CSS označíme Vše a vybereme „.twoColFixLtHdr #header h1“ - → Upravit styl , v zobrazeném dialogu vybereme kategorii Typ a v ní color a pomocí kapátka zvolíme světlešedou barvu # CCC.→OK . 37 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Text „Cestovní kancelář Tam a zpět“ bude vidět i v případě tisku, a to ať bude mít uživatel nastavenou volbu tisk obrázků na pozadí, nebo ne, protože se nadpis vytiskne světle šedě na tmavém

pozadí

(nebo

na

žádném).

- → Soubor → Uložit vše.

ODSTRANĚNÍ NECHTĚNÝCH STYLŮ

Nyní je v připojené šabloně tisk-ze.css mnoho stylů shodných s šablonou mojestyly-ze.css, abychom snížili velikost souboru, je nutné pouze ta pravidla, která jsou nová nebo změněná oproti

těm

v mojestyly.css.

- v panelu Styly CSS → Vše → Tisk- ze.css označíme myší např. #sidebar 1p a potom jej pomocí ikony Jiný

odpadkového způsob

koše vymazání

nepotřebných

vymažeme. pravidel:

- → Soubor →Otevřít → tisk-ze.css a zde vybereme myší příslušné pravidlo a ručně jej smazat (Delete). - Tímto způsobem vybereme a smažeme všechny styly mimo těch se selektory „twoColFixLtHdr # header h1“ a „twoColFixLtHdr # footer“, jakmile vymazání dokončíme, zbudou nám v šabloně

pouze

dvě

pravidla.

- → Soubor →Uložit vše. Potom postup uložení opět zopakujeme. 38 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Tím je tisková šablona připravena k použití, ke zjištění rozdílů ve formátování na obrazovce a při tisku použijeme panel nástrojů Styl vykreslování. Tiskárna čte obě šablony stylů.

12. lekce

IMPORT TEXTU, TVORBA NADPISŮ IMPORT TEXTU

-→ Soubor → Otevřít →C →DW kurz→soubor →Lekce→Lekce 03 →santorini-start, tím si otevřeme počáteční dokument v DW, ve kterém bude vytvářet text, odrážkové , číslované seznamy

a

tabulky.

- Zvolíme →Soubor → Uložit jako a uložíme soubor pod názvem santorini-příjmení.html, původní

soubor

zavřeme

Santorini-start

beze

změny!

V dokumentovém okně uvidíme webovou stránku cestovní kanceláře Tam a zpět, obrázky již byly

na

stránku

vloženy

a

nyní

budeme

pracovat

s textem.

- →Soubor → Otevřít → C →DW kurz→soubor →Lekce→Lekce 03 → santorini.txt, tím tento dokument otevřeme. V tomto dokumentu můžeme jeho obsah upravovat, kopírovat a vkládat ho přímo

do

vytvářených

webových

stránek.

- Vyberte všechen text od „vítejte v ráji … až po výlety loděmi a další.“ → CTRL + C , tím ho zkopírujeme do schránky.Vrátíme se na webovou stránku Santorini- příjmení.html a kurzorem myši označíme frázi „sem patří text“ , která je umístěna hned za prvním obrázkem. - →CTRL + V, tím vložíme text ze schránky na vybrané místo. Vložený text se naformátuje jako odstavce pomocí tagů

. Odstavce dostaly přidělený styl s typem písma, které je v již připojené externí Dokončíme

šabloně kopírování

textu

stylů. z poznámkového

bloku.

- otevřeme santorini.txt, označíme text, který začíná „Dolores a Tom a zkopírujeme jej do schránky, poznámkový blok beze změny zavřeme (na záložce santorini.txt klepneme na symbol 39 Integrovaná střední škola polygrafická, Brno, Šmahova 110

x) a vrátíme se na webovou stránku, označíme text „sem patří text“ pod fotografií budovy a vložíme

text

ze

schránky.

→ Soubor →Uložit.

VYTVOŘENÍ NADPISŮ

Text by se měl na webové stránce formátovat tak, aby dával smysl, byl přehledný a celkově srozumitelný. Nadpisy slouží k organizaci stránky do smysluplných částí a zároveň slouží jako titulek

stránky

HTML,

stejně

jako

v knize.

Nadpisy se v HTML dokumentech vytváří pomocí značek (tagů)

, …

, seřazeno od největšího k nejmenšímu. Libovolné zobrazovací zařízení (PC,mobil,čtečka Braillova písma,…) interpretuje text formátovaný pomocí značek pro nadpis jako nadpis. Tento koncept bývá nazýván často jako sémantický kód, značky jazyka HTML vytváří sémantický kontext obsahu stránky:

nadpisy,

odstavce,

seznamy,

blokové

citace,

tabulky,

obrázky,

atd.

- z nabídkového řádku otevřeme panel Vlastnosti →Okno →Vlastnosti ,v něm stiskneme tlačítko HTML. Protože externí šablona stylů mojestyly.css již byla k této stránce již připojena, byly textu již styly v podobě color,font-family,font-size,atd. pomocí definice příslušného pravidla přiděleny. Všechny pravidla si můžeme prohlédnout v panelu vlastnosti, jakmile vybereme část s textem. - Umístíme kurzor do textu „Co říkají naši zákazníci“, v panelu Vlastnosti zapneme tlačítko HTML v roletce Formát se objeví Nadpis 2, podobně i v selektoru značek

. - umístíme kurzor do slova „ Místa“ a v panelu Vlastnosti vybereme v roletce Formát Nadpis 3, Slovo Místa se nyní naformátuje jako nadpis třetí úrovně (tag

), Tím jsme přidělili frázi význam a logické místo v organizaci stránky vzhledem k dalšímu obsahu, který následuje za nadpisem. Stejným

způsobem

naformátujeme

slovo

„Pláže“

jako

nadpis

3.

úrovně.

- → Soubor → Uložit.

40 Integrovaná střední škola polygrafická, Brno, Šmahova 110

13. lekce

TVORBA SEZNAMŮ A BLOKOVÝCH CITACÍ VYTVOŘENÍ SEZNAMŮ

Seznam používáme jako část textu, kde je obsah sdělení oddělen do jednotlivých řádků, které mohou být označeny odrážkami nebo čísly (odrážkový nebo číslovaný seznam, v Adobe Dreamweaveru jsou ikony pro tvorbu seznamů ale označeny jako neuspořádaný a uspořádaný seznam). Na webových stránkách se používají pro snadnější orientaci na stránce a k rychlejšímu čtení, mohou uživatelům pomáhat při hledání rychlých odpovědí. V HTML kódu je: - odrážkový seznam označen značkou (tagem)

- číslované seznam značkou (tagem)
o jednotlivé významové řádky jsou označeny značkou (tagem)
1. v obou druzích seznamů. Všechny tagy jsou párové,to znamená, že jsou na začátku i konci seznamu i řádků (
). - vybereme ve vloženém textu nedokončené věty (v HTML kódu jsou označeny jako samostatné odstavce

a

od „Úžasné bílé zdi“ až po „Noční život, který si nemůžeme nechat ujít“. - Otevřeme panel vlastnosti z nabídkového řádku →Okno →Vlastnosti v panelu vlastnosti vybereme Neuspořádaný (odrážkový) seznam a klepneme na něj myší.

41 Integrovaná střední škola polygrafická, Brno, Šmahova 110

-

stejné

kroky

zopakujeme

u

textových

odstavců

za

nadpisem

Pláže.

Pokud bychom chtěli vytvořit uspořádaný (číslovaný) seznam, klepneme na vedlejší tlačítko vpravo, na kterém jsou číslice.

-

→

→Soubor

Uložit.

VYTVOŘENÍ BLOKOVÝCH CITACÍ

V -

jazyce umístíme

HTML

kurzor

do

odstavce,

jde který

blok začíná

citovaného

„Milujeme Santorini

více

textu než

…

- v panelu Vlastnosti klepneme na tlačítko s názvem „Odsazení textu“,je určeno k vytvoření blokových citací.

Bublinová nápověda se nazývá „Odsazení textu“, ve skutečnosti v HTML jazyce tímto způsobem vytváříme blokovou citaci a předcházejícím tlačítkem „Odsazení textu doleva“ ji odstraňujeme. - zopakujeme předcházející krok také u dalších odstavců, začínajících slovy: Jídlo na střeše … a 42 Integrovaná střední škola polygrafická, Brno, Šmahova 110

moje

„Celá -

Nyní

budeme

vytvořeným

rodina blokovým

→Styly

CSS

citacím

přidělovat

… styly

→Nové

pomocí

CSS.

pravidlo

- v dialogovém okně Nové pravidlo zvolíme v části Typ selektoru volbu „ Tag (předefinuje element HTML)“,v poli Název selektoru vybereme pomocí roletky Blockquote a v roletce Definice pravidla zapíšeme nové pravidlo do mojestyly.css.→OK .

- v otevřeném dialogovém okně Definice pravidla pro blockquote v mojestyly. css vybereme Kategorii Rámeček, v části Padding (vnitřní okraj) zatrhneme volbu Stejné pro všechny a do roletky Right a Left (vpravo, vlevo) zapíšeme číslo 4 s jednotkou px .Potom vybereme Kategorii Okraj a v části Style vybereme z roletky solid (nepřerušovaný), Width (šířka)- thin (tenký) a v části Color- tmavě modrou #00C.→OK. Tímto krokem orámujeme pomocí stylů blokové citace tenkou, modrou, nepřerušovanou linkou, protože to máme uloženo jako nové pravidlo Blockquote v kaskádových stylech, bude tento styl použit automaticky na všechny blokové citace na všech www-stránkách, ke kterým budeme mít připojené mojestyly.css.

43 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- →Soubor →Uložit vše, tím uložíme změny jak do HTML dokumentu, tak i do příjmenímojestyly.css

.

Výsledek si prohlédnout v živém zobrazení (potom ho nesmíme zapomenout vypnout) nebo v prohlížeči.

44 Integrovaná střední škola polygrafická, Brno, Šmahova 110

14. lekce

TVORBA TABULEK TVORBA TABULEK

Původně se layout webových stránek tvořil pomocí tabulek namísto stylů CSS, které přišly později, v současnosti se tabulky používají především pro zobrazování řádků a sloupců dat. - otevřeme rozpracovaný soubor santorini-příjmení.html ze složky lekce 03. - ve spodní části stránky označíme a smažeme text „sem patří tabulka, kurzor ponecháme na místě. - v panelu Vložit rozbalíme záložku Rozvržení klepneme na ikonu Tabulka.

- v dialogovém okně Tabulka napíšeme do pole Řádků 6 a do Pole Sloupců 3, přednastavené hodnoty ve všech ostatních polích vymažeme, vzhled tabulky budeme přidělovat pomocí stylů CSS, díky čemuž bude tabulka přístupná a použitelná na více zobrazovacích zařízeních. - v části Záhlaví vybereme Nahoru, tím se nadpisy umístí nad každý sloupec a do pole Titulek napíšeme Hotely na Santorini →OK.

45 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Tabulka se zobrazí ve zmáčknuté podobě, protože zatím nemá žádný obsah a nemá nastavený žádný rozměr. Pomocí panelu vlastnosti můžeme tabulce přidělit identifikátor, tím můžeme přidělit každému elementu (i tabulce) individuální styl. - v panelu vlastnosti v poli tabulka napíšeme hotely

- nyní napíšeme do první buňky v tabulce místo, do druhé hotel a do třetí hodnocení. Tímto způsobem můžeme vyplnit všechny buňky tabulky, pro zrychlení práce ale zkopírujeme hotový obsah z textového editoru. - → Soubor → Otevřít → lekce 02 → tabulka.html , tím se otevře již vytvořená tabulka v DW, umístíme kurzor dovnitř tabulky, v selektoru značek vybereme tag pomocí CTRL+C ji zkopírujeme do schránky, potom beze změny zavřeme soubor - tabulka.html, označíme stejným způsobem rozdělanou tabulku v souboru santorini-příjmení.html a vložíme ji na místo původní tabulky.

- → Soubor → Uložit . pokud máme vybranou tabulku, můžeme provádět jednoduše a rychle změny typu přidání,odebrání,sloučení či rozdělení řádků a sloupců, ostatní změny je vhodnější provádět pomocí CSS stylů. 46 Integrovaná střední škola polygrafická, Brno, Šmahova 110

STYLOVÁNÍ TABULKY POMOCÍ CSS STYLŮ

- Umístíme kurzor kamkoliv do tabulky, v selektoru značek vybereme . - Otevřeme panel stylů z nabídkového řádku → Okno → Styly CSS → Nové pravidlo CSS . - V dialogovém okně vyberte Typ selektoru, v názvu selektoru se automaticky objeví slovo table a nové pravidlo bude definováno v mojestyly.css → OK. Tímto krokem přidáme selektor table do souboru mojestyly.css a dále budeme definovat pravidlo pro tento nový selektor. - Zvolte kategorii Rámeček a v poli Width (šířka) napíšeme 475 px a v části Padding (vnitřní okraj) do pole Top(nahoře) číslo 4 px, hodnota se automaticky doplní do všech dalších polí

- Vybereme Kategorii Okraj a ve style zvolíme solid (nepřerušovaný),widht (šířka) thin (tenký) color: #00C. →OK.

- → Soubor → Uložit vše.Stránku si prohlédneme v prohlížeči. Vrátíme se do DW a vytvoříme nové pravidlo. 47 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- → Okno → Styly CSS → Nové pravidlo CSS. V dialogovém okně Nové pravidlo CSS vybereme Typ selektoru Složený prvek (na základě výběru), do názvu selektoru napíšeme th,td a pravidlo bude definováno v mojestyly.css. → OK.

V okně Definice pravidla pro th, td v mojestyly.css zvolíme Kategorii Okraj a ve style zvolíme solid (nepřerušovaný), widht (šířka) thin (tenký), color: #00C. →OK.→ Soubor →Uložit vše. Nyní musíme ještě zrušit mezeru mezi rámečky buněk tabulky, což musíme přidat ručně pomocí stylů CSS. - otevřeme →Panel styly, → Vše a v části Všechna pravidla mojestyly.css označíme table. Klepneme na Přidat vlastnost a do okénka vepíšeme Border-collapse, tabulátorem se přesuneme do sousedního okna a sem vepíšeme collapse →enter.

48 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- → Soubor → Uložit vše. Výsledek si prohlédneme prohlížeči nebo v živém zobrazení, tabulka je nyní přehlednější.

15. lekce

POPISKY SADY SPRY POPISKY SADY SPRY

Adobe Dreamweaver Cs4 obsahuje

ovládací prvek sady Spry, pomocí kterého vkládáme,

kontrolujeme umístění a stylujeme tzv. bublinovou nápovědu. V HTML dokumentu se bublinová nápověda vytváří použitím parametru title ve značce , ale ovládací prvek Popisek sady Spry používá JavaScript a CSS. - Otevřeme soubor santorini-příjmení.html, ve zobrazené tabulce vybereme slovo Oia pod nápisem Místo. - Otevřeme z nabídky → Okno →Vložit, tím se nám otevře panel nástrojů, který je umístěn pod nabídkovým řádkem.

49 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- v této nabídce vybereme kategorii → Spry a v ní ikonu →Popisek sady vSpry. - v okně dokumentu se posuneme až pod tabulku, kde se nám objeví v azurovém obdélníku popisek sady Spry: sprytooltip1. - pod tímto popiskem vymažeme text Zde umístěte popisek a napište Oia se čte jako Eea. - → Soubor →Uložit. Pokud je to první nápovědná bublina, kterou jsme do www stránek vložili, zobrazí se nám dialogové okno Zkopírovat závislé soubory, v něm bude upozornění na to, že se k naší stránce připojí dva soubory. Každý ovládací prvek knihovny Spry, který použijeme, vkládá soubory CSS a JavaScriptu do složky nazvané SpryAssets v rámci kořenové složky našeho webového místa. Pokud bychom vytvářené stránky publikovali na internetu, museli bychom tam i tuto složku s těmito závislými soubory nahrát. - zvolíme → OK. Tímto způsobem jsme přidali do kaskádových stylů CSS nový styl SpryTooltip.css. Nyní můžeme v panelu vlastnosti, ten otevřeme z nabídky →Okno → Vlastnosti, poklepáme na bublinovou nápovědu „Popisek sady Spry: sprytooltip1“, měnit takové vlastnosti, jako posun umístění, časová prodleva, efekty a akce myši.

50 Integrovaná střední škola polygrafická, Brno, Šmahova 110

My budeme ale upravovat vlastnosti bublinové nápovědy pomocí kaskádových stylů CSS. - → Okno → Styly CSS → Vše, ve spodní části Všech pravidel rozbalíme pomocí tlačítka + nově připojený soubor stylů SpryTooltip.css , Zvolíme selektor .tooltipContent a zvolíme ikonu Upravit styl

V zobrazeném dialogovém okně zvolíme Kategorii Typ, v něm vybereme štětečkem bílou barvu #FFF, v Kategorii pozadí do pole Background-color (barva pozadí) vybereme štětečkem barvu #O36. - → OK→ Soubor → Uložit vše. V živém zobrazení potom vyzkoušíme nápovědnou bublinu, aby se zobrazila, musíme se myší přiblížit ke slovu Oia.

HLEDÁNÍ A NAHRAZOVÁNÍ TEXTU

DW dokáže na vytvářených stránkách najít a nahradit text, tímto způsobem můžeme najednou nahradit prázdné mezery, tvrdá zalomení řádků, běžné mezery a jiné textové elementy. - v dokumentovém okně pod nápisem

Místa v předposlední odrážce vybereme slovo nakupující. - z nabídkového řádku zvolíme → Upravit → Hledat a nahradit a v otevřeném dialogovém okně

51 Integrovaná střední škola polygrafická, Brno, Šmahova 110

se v kolonce Hledat objeví nakupující, do kolonky nahradit napíšeme zákazníky a stiskneme tlačítko Nahradit. DW nahradí první výskyt nalezené fráze a vyhledá další výskyt, v našem případě nám oznámí, kolik slov se v prohledávaném dokumentu vyskytuje.

- jakmile je nahrazení provedeno, dialogové okno zavřeme, → soubor →Uložit vše.

16. lekce

TVORBA NAVIGACE ODKAZY NA STRÁNKY V RÁMCI JEDNOHO WEBU

Odkazy jsou základními elementy webových stránek a Dreamweaver nám usnadňuje práci s nimi.Webové hypertextové odkazy (hyperlinky) umožňují uživatelům se pohybovat z jednoho místa webu na další, tzn propojují podle předem zvoleného schématu webové stránky, umožňují přecházet na stránky jiného webu či odesílat e-mailové zprávy. - Z nabídkového řádku otevřeme → Soubor → otevřít →DW-kurz →lekce 05 → onasstart.html. - → Soubor → Uložit jako → onas-příjmení.html. - původní soubor onas-start.html zavřeme beze změny. V zápatí otevřené stránky vybereme text Kontaktujte nás.

52 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Otevřeme panel Vlastnosti → okno v nabídkovém řádku → Vlastnosti → stiskneme tlačítko HTML. - V pravo od pole Odkaz stiskneme tlačítko vyhledat soubor a v otevřeném dialogovém okně Vyberte soubor v oblasti hledání najděte Lekce 05 a v ní vyberte soubor kontakt.html, přesvědčíme se, že máme v roletce Relativně k vybranou volbu Dokument → OK a klepneme kamkoliv do dokumentového okna, abychom zrušili výběr textu odkazu.

Výchozí formátováním hypertextových odkazů je modrá barva textu a modré podtržení, v našem případě je ovšem modrý text na modrém pozadí špatně čitelný, to však můžeme změnit pomocí nového pravidla v kaskádových stylech. -→ kurzor umístíme do hypertextového odkazu a v selektoru značek vybereme , → Okno → Styly CSS → vše klepneme na ikonu Nové pravidlo CSS, v otevřeném dialogovém okně Nové pravidlo CSS vybereme Typ selektoru Složený prvek (na základě výběru) a v názvu selektoru pomocí tlačítka Méně specifické vybereme #footer p a → OK. V zobrazeném dialogovém okně Definice pravidla pro #footer p a v mojestyly.css vybereme kategorii Typ a v roletce Barvy vybereme pomocí kapátka barvu žlutou #FFF →OK. 53 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Text odkazu bude teď žlutý se žlutým podtržením na modrém pozadí, jeho čitelnost bude vyšší. Jakékoliv značce zobrazené v zápatí dokumentu bude pomocí kaskádových stylů CSS přiděleno nově vytvořené pravidlo se žlutou barvou textu i podtržením.

Nyní si vyzkoušíme vybrat cíl vytvářeného hypertextového odkazu metodou vizuálního výběru. - → soubor → Otevřít →lekce 05 →Santorini-start.html - Otevřený soubor uložíme se svým příjmením → Soubor → Uložit jako → Santorini.příjmení.html a původní soubor beze změny zavřeme. - V zápatí stránky opět vybereme text Kontaktujte nás, otevřeme panel Vlastnosti a otevřeme -→ Okno → Soubory a v nich najdeme a rozbalíme lekci 05. - V panelu Vlastnosti stiskneme tlačítko HTML, chytneme a přetáhneme ikonu Ukázat na soubor (je vpravo od pole Odkaz) na složku Kontakt.html v lekci 05. Tím vytvoříme odkaz i z této stránky na stránku Kontakt.html, a protože je i tato stránka propojena s mojestyly.css, bude hypertextový odkaz rovněž napsán žlutým písmem i podtržením. - → Soubor → Uložit vše, nyní si můžeme fungování hypertextového odkazu vyzkoušet v náhledu v prohlížeči.

54 Integrovaná střední škola polygrafická, Brno, Šmahova 110

17. lekce

TVORBA INTERNÍCH A EXTERNÍCH ODKAZŮ TVORBA ODKAZŮ V RÁMCI JEDNÉ STRÁNKY

Při použití hypertextového odkazu nám náš prohlížeč zobrazí webovou stránku odshora dolů. Jeli stránka příliš dlouhá a není-li nutné ji celou prohlížet, můžeme pomocí hypertextových odkazů odkázat na vybraný element a prohlížeč nám nastaví stránku na tento element. - → Soubor → Otevřít →Dreamweaver kurz → lekce 03 →Santorini-příjmení.html. - Do postranního sloupce #sidebar 1 za text slunečnému počasí vložíme pomocí klávesy Enter text "Prohlédněte si doporučované hotely". Vybereme slova "doporučované hotely" , otevřeme panel vlastnosti (→ Okno → Vlastnosti) a do pole Odkaz napíšeme #hotely a stiskneme klávesu Enter. Tím jsme právě vytvořili hypertextový odkaz na místo na stránce, kde je umístěna tabulka s identifikátorem #hotely. Znak # značí, že odkaz směřuje na element s vypsaným identifikátorem v rámci aktuální stránky. Pokud bychom chtěli odkaz na danou tabulku směřovat z jiné webové stránky v rámci stejného webového místa, musel by odkaz obsahovat jak název souboru, tak i identifikátor (santorini-příjmení.html#hotely)\ Pro možnost návratu na začátek stránky použijeme podobný odkaz, jako identifikátor můžeme použít element záhlaví. - → Pod tabulku napíšeme slovo Nahoru, označíme jej a v panelu Vlastnosti do pole Odkaz napíšeme #header a stiskneme klávesu Enter. Tím jsme vytvořili odkaz na začátek stránky. - → Soubor → Uložit. Nyní si můžeme prohlédnout stránku v prohlížeči a vyzkoušet fungovámí hypertextových odkazů jak na stránce santorini- příjmení.html, tak na stránce onas-příjmení.html.

VYTVOŘENÍ EXTERNÍHO ODKAZU

55 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Předcházející stránky byly provázány pomocí hypertextových odkazů se stránkami stejného webového místa. Můžeme ovšem aktuální stránku provázat pomocí odkazů i se stránkami jiných webů, musíme však znát plnou webovou adresu nebo adresu URL. Odkazovat můžeme také na obrázek, nejenom na text. - Soubor →Otevřít → onas-příjmení.html, v postranním odstavci vybereme obrázek New Yorku. Otevřeme panel Vlastnosti a stiskneme tlačítko HTML a do pole Odkaz napíšeme úplnou webovou adresu http://mapy.google.cz/ a stiskneme klávesu Enter. Příliš dlouhou nebo komplexní adresu můžeme najít na cílové stránce ve svém prohlížeči a zkopírovat adresu URL přes schránku do pole Odkaz v panelu Vlastnosti. → Soubor → Uložit a v živém zobrazení si prohlédneme výsledek, nebo pomocí náhledu v prohlížeči vyzkoušíme fungování hypertextového odkazu. Ukazatel myši se při najetí na obrázek přemění na ruku, čímž signalizuje, že obrázek je odkazem. Pokud na tento obrázek klepneme, prohlížeč přejde na stránku služby Mapy Google, samozřejmě pokud jsme připojeni k internetu.

Nyní vytvoříme stejný odkaz z textu. Ukazatel myši vložíme na konec úvodního odstavce v maincontent za text zde je cestovní kancelář, napíšeme sem text Naše kancelář se nachází v New Yorku. Vybereme slova se nachází, v panelu Vlastnost do pole Odkaz napíšeme http://mapy.google.cz a stiskneme ENTER. - → Soubor →Uložit. Výsledek si opět můžeme vyzkoušet v prohlížeči.

56 Integrovaná střední škola polygrafická, Brno, Šmahova 110

18.-19. lekce

ODKAZY-SAMOSTATNÁ PRÁCE Č.2 V této práci budete vytvářet jednotlivé wwwstránky (celkem 10), pomocí kaskádových stylůCSS jim dáte požadovaný vzhled, pro zjednodušení práce s více stránkami vytvoříte a připojíte k vytvářeným wwwstránkám externí šablonu kaskádových stylů CSS, vše uložíte do nově vytvořené složky označené vaším jménem a hlavním cílem této práce bude propojení vytvořených wwwstránek pomocí hypertextových odkazů tak, aby bylo možno v internetovém prohlížeči se postupně přepínat mezi jednotlivými stránkami, vždy s možností návratu. - V Adobe Dreamweaveru CS4 vytvořte nový soubor: → Nový → 1 pevný sloupec, záhlaví, zápatí,→OK, - Do nadpisu v záhlaví napište text PRÁCE č 2- ODKAZY, - Soubor Uložte jako „Hlavní stránka“ do nově vytvořené složky s názvem Práce č.2-Příjmení do složky s názvem vaše příjmení,tuto složku vytvořte a umístěte ji na plochu počítače. - Vytvořte nové pravidlo pro #header h1: Typ: color # C00, Pozadí background-color: # F90, Pro napsání znaku # se přepněte pomocí klávesy shift + alt do anglické klávesnice a použijte shift+3. - Do zápatí napište Příjmení a Jméno, - vytvořte nové pravidlo pro # footer p, Typ: Font-family: Palatino Linotype, color- # C00, font-size – 36 px, font-weight- bold Pozadí: background-color: # F90, - V hlavním obsahu mainContent přepište nadpis h1 na Hlavní stránka, zbytek textu vymažte včetně podnadpisu (ne zápatí). - Vložte tabulku: 3 řádky a 3 sloupce, šířka tabulky 150 obrazových bodů, tlouštka okraje 6 obr. Bodů, mezery mezi buňkami 6obr. bodů, záhlaví- žádné, vloženou tabulku vypište dle vzoru: 1

2

3

1a

2a

3a

1b

2b

3b

57 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- upravte pravidlo pro element # mainContent: - zvolte Pozadí- Backgroundcolor- # FF8 - Otevřete soubor mojestyly.css v lekci 02, ihned je uložte jako styly-příjmení.css do složky Práce č.2-Příjmení ve složce na ploše s vaším příjmením. - K Hlavní stránce stránce připojte nově uložené styly-příjmení.css, jako medium vyberte screen, → OK. - Otevřete z nabídkového řádku→Okno Ve stylech CSS rozbalíme styly-příjmení css, v nich smažeme všechna pravidla s výjimkou pravidla pro body, - upravte pravidlo pro body ve stylech-příjmení: Pozadí: background-color- # FF9, - vložte nové pravidlo pro element # mainContent table tr td v styly-příjmení.css: - Typ: Font-size: 24 px, Font-weight: bolder, Color: #600, Pozadí: background-color: # 6FF- → Uložit vše, tímto krokem máme vytvořenou první stránku ze zadané úlohy. V dalších krocích budete zjednodušeným způsobem vytvářet všechny další stránky, které budete ukládat do vaší složky Práce č.2-příjmení . ve složce na ploše s vaším příjmením. - V otevřené Hlavní stránce přepíšeme nadpis h1 Hlavní stránka textem 1. Stránka, vložíme kurzor pod tabulku, napíšeme slovo ZPĚT, - upravíme pravidlo styly v .oneColFixCtrHdr #mainContent, Pozadí: Background-color: zvolíme nějakou vhodnou světlou barvu (každou nově vytvářenou stránku odlišíme jinou barvou pozadí v elementu mainContent) a stránku uložíme jako str 1.html do složky Práce č.2-Příjmení ve složce na ploše s vaším příjmením - stejným způsobem postupně vytvořte a uložte stránky označené jako 1a str., 1b str., 2.str.,2a str., 2b str., 3.str., 3a str., 3b str. Všechny ukládané stránky musí mít při ukládání příponu .html, jinak se nebudou korektně zobrazovat v Adobe Dreanweaveru CS4 jako Html dokument!!! Nyní máte vytvořené a uložené všechny stránky, se kterými budete pracovat(jsou odlišeny nadpisem h1(stránka č.1 …) a barvou pozadí v elementu #mainContent), vaším úkolem bude nyní propojit všechny tyto stránky pomocí hypertextových odkazů tak, abychom se: - z hlavní stránky mohli pomocí odkazu přepnout do libovolné stránky 1.stránka, 2. Stránka a 3. stránka, 58 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- dále vytvořte hypertextové odkazy pro přepínání mezi stránkami v jednotlivých sloupcích (1,str.,-1a str.-1b str.,tam i zpět),podobně propojíme i buňky ve sloupci 2 a 3, - pro návrat na Hlavní stránku použijte hypertextový odkaz vytvořený na text ZPĚT, který je umístěn pod tabulkou. - Po vytvoření jednotlivých hypertextových odkazů musíte každou stránku uložit. Kontrolu funkčnosti jednotlivých odkazů provádějte průběžně v náhledu v prohlížeči. - na závěr práce složku Práce č.2-Příjmení zazipujte a pošlete jako přílohu k emailu na adresu [email protected], Jako předmět zprávy napište: Třída, Příjmení, Práce č.2.

HODNOTÍCÍ TABULKA Ty práce

Poč.bodů

- Vytvořte nové pravidlo pro #header h1: Typ: color # C00, Pozadí

3

background-color: # F90, - vytvořte nové pravidlo pro # footer p, Typ: Font-family: Palatino

4

Linotype, color- # C00, font-size – 36 px, font-weight- bold Pozadí: background-color: # F90, - upravte pravidlo pro element # mainContent, Pozadí-

3

Backgroundcolor- # FF8 - upravte pravidlo pro body ve stylech-příjmení: Pozadí:

1

background-color- # FF9, - K Hlavní stránce stránce připojte nově uložené styly-příjmení.css,

1

jako medium vyberte screen, OK. - vložte nové pravidlo pro element # mainContent table tr td v styly-

5

příjmení.css: Typ: Font-size: 24, Font-weight: bolder, Color: #600, Pozadí: background-color: # 6FF - upravte pravidlo styly v .oneColFixCtrHdr #mainContent, Pozadí:

3

Background-color: Propojení jednotlivých buněk tabulky pomocí hypertextových

5 59

Integrovaná střední škola polygrafická, Brno, Šmahova 110

odkazů složku Práce č.2-Příjmení zazipujte a pošlete jako přílohu k emailu

1

na adresu [email protected], Jako předmět zprávy napište: Třída, Příjmení, Práce č.2. CELKEM

26

PŘEPOČET BODŮ NA ZNÁMKY Známka

Body

1

Min 24

2

21-23

3

18-20

4

15-17

5

Méně než 15

20. lekce

VKLÁDÁNÍ A POUŽITÍ OBRÁZKŮ VKLÁDÁNÍ A POUŽITÍ OBRÁZKŮ

Obrázky představují klíčovou komponentu každé webové stránky, zvyšují její přehlednost, přitažlivost a na první pohled by měly návštěvníka zaujmout. Ke vkládání obrázků můžeme používat panel vložit, výplňový prostor pro obrázky, panel datové zdroje, vkládání kopírováním z Photoshopu či Adobe Bridge. Otevřeme → Soubor →Otevřít → DW-kurz → lekce → lekce 04 → naxos-start.html. Otevřený soubor uložíme pod svým jménem do lekce 04 → Soubor → Uložit jako → naxospřímení.html. Původní soubor naxos-start.html zavřeme beze změny, tím zůstane původní soubor zachován. 60 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Vybereme výplňový prostor obrázku „portara (200x200)“ Klávesou Delete ji odstraníme, - → Okno → Vložit → Běžné → Obraz (pokud tuto ikonu na panelu nevidíme, otevřeme ji klepnutím na šipku směřující dolu hned vedle ikony Obrazy). V zobrazeném dialogovém okně vybereme oblast hledání → lekce → obrázky →naxos-portara → OK.

V dialogu Atributy pro usnadnění přístupu napíšeme do pole Alternativní text výraz Portara na ostrově Naxos → OK. K otevření dialogu pro vložení obrázku můžeme také použít poklepání na obrázek výplňového prostoru a tím ho vyměnit za vybranou grafiku, alternativní text musíme však napsat manuálně v panelu Vlastnosti. Alternativní technikou vložení obrázku do stránky je použití panelu Datové zdroje. - → vymažeme právě vložený obrázek naxos-portara.html. -V nabídkovém řádku zvolíme → Okno → Datové zdroje V zobrazeném dialogovém okně klepneme na ikonu Obrazy, najdeme obrázek naxosportara.html → Vložit. - → Soubor → Uložit.

POUŽITÍ PANELU VLASTNOSTI U OBRÁZKŮ 61 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Pro webové stránky je nejvýhodnější, je-li v rovnováze velikost použité grafiky, jejich kvalita velikost souboru. Proto se musí často optimalizovat grafika, kterou budeme umísťovat na webovou stránku. K tomu účelu obsahuje Adobe Dreamweaver grafický nástroj, který dokáže zajistit nejvyšší možnou kvalitu při zachování malé velikosti souboru. - Otevřeme z HDD → Soubor → Otevřít → Lekce → Lekce 04 →naxos-příjmení.html. V dokumentovém okně vybereme obrázek Portara - Otevřeme panel vlastnosti → Okno → Vlastnosti, pokud máme vybraný obrázek, v panelu Vlastnosti se nám zobrazí řada možností pro úpravu obrázku:

Do okna šířka a výška přímo zapisujeme hodnotu v obrazových bodech, pod alternativním textem je tlačítko (Úprava) pro úpravu obrázku ve Photoshopu nebo Fireworksu, vedle je tlačítko (Upravit nastaveni náhledu) pro úpravu obrázku přímo v Dreamweaveru → Upravit nastaveni náhledu V otevřeném dialogovém okně zkontrolujeme, zda máme ve Formátu nastavenou volbu JPEG, vybereme v dolní části 2 okna náhledu, označíme spodní náhled., v pravé horní části okna rozbalíme roletku Kvalita a pomocí jezdce snížíme kvalitu na 20.Nyní můžeme porovnat vizuálně snížení kvality obrázků změnu velikosti souboru, snížení kvality obrazu není kompenzováno 62 Integrovaná střední škola polygrafická, Brno, Šmahova 110

úsporou velikosti (6,37:1,37 kB), proto označíme horní náhled a v roletce Uložená nastavení vybereme JPEG-lepší kvalita →OK. - →Soubor →Uložit.

21. lekce

PRÁCE S OBRÁZKY VE PHOTOSHOPU KOPÍROVÁNÍ A VKLÁDÁNÍ OBRÁZKŮ Z PHOTOSHOPU

Většina webových designérů používá běžně ve své práci s grafikou Photoshop, proto i DW CS4 umožňuje velmi jednoduše zkopírovat ve Photoshopu jakoukoliv část grafiky, kterou zrovna potřebujeme, a následně ji vložit do rozvržení stránky na vybrané místo v Dreamweaveru. Ten také pomocí Náhledu stránky umožňuje převést soubor do požadovaného formátu. - Otevřeme z HDD → Soubor → Otevřít → Lekce → Lekce 04 →naxos-příjmení.html. - ukazatel myši umístíme do odstavce za text „Hory skrývají zlatavá údolí, kde uvidíte pole a plodiny promíchané s malými kostelíky a impozantními kostely.“ - Otevřeme Photoshop → Start → Všechny programy → Adobe Design Premium CS4 → Adobe Photoshop CS4, po otevření zvolíme → Soubor → Otevřít a ve stejnojmenném dialogu → zvolíme → DW kurz → Lekce → Obrázky → PSD → naxos-obrazky.psd → OK. Otevřený soubor obsahuje vrstvy, v každé z nich najdeme obrázek. - z nabídkového řádku zvolte → Okno → Vrstvy, tím zobrazíme panel Vrstvy a v něm vybereme vrstvu šťastná rodina.

63 Integrovaná střední škola polygrafická, Brno, Šmahova 110

V paletě Nástroje (vertikální panel vlevo vedle dokumentového okna) zvolíme nástroj Obdélníkový výběr a tažením myší při stisknutém levém tlačítku provedeme výběr okolo obrázku s rodinou. Pokud bychom chtěli do výběru zahrnout obrázky ve více vrstvách, zvolíme příkaz → Úpravy → Kopírovat sloučené. - zvolíme → Úpravy → Kopírovat, zavřeme Photoshop bez ukládání obrázku a vrátíme se do Dreamweaveru v něm zvolíme → Upravit → Vložit, tím se zobrazí dialog Náhled obrazu. Provedeme kontrolu, zda v roletce Uložená nastavení je vybraná volba JPEG-lepší kvalita → OK. V zobrazeném dialogovém okně Uložit zobrazený obraz najdeme složku obrazky a do pole Název souboru napíšeme stastna-rodina.jpg a stiskneme tlačítko → OK. Tím vložíme zkopírovaný obrázek do dokumentu. → Soubor → Uložit.

POUŽITÍ OBRÁZKŮ NA POZADÍ

Kromě obrázků na popředí mohou webové stránky obsahovat i obrázky na pozadí, ty vkládáme pomocí CSS stylů. - →Okno → Styly CSS → Vše

V seznamu mojestyly.css vybereme .twoColFixLtHdr #container → zvolíme ikonu Upravit

64 Integrovaná střední škola polygrafická, Brno, Šmahova 110

V dialogovém okně Definice pravidla … vybereme kategorii Typ → Background-image → Procházet → obrázek cara.gif a v roletce Background-repeat zvolíme repeat-y (opakovat po ose y).Tím se obrázek zopakuje po ose y odshora dolů přes celou výšku elementu. - → Soubor → Uložit vše.

POUŽITÍ VÝPLŇOVÉHO PROSTORU PRO OBRÁZKY

Výplňový prostor pro obrázky používají vývojáři webových stránek v případech, kdy ještě nejsou k dispozici finální obrázky, umožňuje to představit grafickou podobu vytvářených budoucích www-stránek, zejména při komunikaci grafika se zadavatelem stránek ( většinou to jsou laici). Výplňový prostor se nejčastěji zobrazuje jako obyčejný šedý čtyřúhelník s titulkem (název budoucího obrázku) v příslušných rozměrech. Tyto výplně jsou určeny pouze pro návrh, jakmile stránku zobrazíme v prohlížeči, výplňový prostor se buď vůbec nezobrazí, nebo se místo zobrazí jako chybějící obrázek (Internet Explorer) Postup při vkládání výplňového prostoru: - Ukazatel myši vložíme tam, kam chceme umístit budoucí obrázek. - Otevřeme panel Vložit → okno →Vložit, panel se otevře pod nabídkovým řádkem, v něm vybereme nabídku →Obrazy: vyhrazené místo pro obraz.

65 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- v dialogovém okně Vyhrazené místo pro obraz vyplníme pole název a zadáme šířku a výšku prostoru v obrazových bodech → OK. Jakmile je výplň vložená, můžeme ji v zobrazení Návrh kdykoliv změnit

22. lekce

ADOBE BRIDGE ZPŘÍSTUPNĚNÍ ADOBE BRIDGE

Adobe Bridge CS4 poskytuje mostové propojení (proto název Bridge) mezi aplikacemi Adobe Creativ Suite, včetne Dreamweaveru, pomocí této aplikace můžeme rychle procházet složkami obrázků a jinými zdrojovými soubory. Je plně integrovaný v Dreamweaveru, můžeme z něj přetahovat obrázky rovnou do DW, aniž bychom museli Bridge opustit jako např. Photoshop. V souboru naxos-příjmení.html umístíme myší kurzor na začátek oblasti pod nadpis Hlavní řecký ostrov. - v nabídkovém řádku zvolíme → Soubor → Procházet nástrojem Bridge, po jeho spuštění klepneme na záložku → Složky → obrazky→ Zdroje Bridge. Pro lepší práci můžeme přepnout Bridge do kompaktního režimu a vněm zvolíme Kompaktní okno vždy nahoře. Tímto krokem zmenšíme okno na asi ¼ velikosti, můžeme ho odsunout mimo dokumentové okno Dreamweaveru a bude stále nahoře.

66 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Nyní myší,při stisknutém levém tlačítku, přetáhneme obrázek dívka-na-plazi.jpg z Bridge do Dreamweaveru a umístíme jej pod hlavní nadpis v mainContent. V zobrazeném dialogu vepíšeme alternativní text Jak chytnout trochu barvy →OK. - Soubor → Uložit.

POUŽITÍ INTELIGENTNÍCH OBJEKTŮ PHOTOSHOPU

Na rozdíl od ostatních obrázků jsou inteligentní objekty propojené se souborem Photoshopu (PSD), což znamená, že jakákoliv změna ve zdrojovém souboru v Photoshopu je souborem Dreamweaveru rozpoznán a nabídne nám aktualizaci webového obrázku. Jeden soubor PSD můžeme umístit na více stránek jako inteligentní objekt Photoshopu a všechny změny zdrojového souboru se potom projeví na všech stránkách. - v souboru naxos-příjmení.html poklepejte na výplň pro obrázek kostela. V zobrazeném dialogu najdeme soubor → obrazky → PSD → naxos-kostel.psd → OK. - v zobrazeném dialogovém okně Náhled obrazu vybereme z roletky Formát volbu JPEG v Uložená nastavení vybereme JPEG lepší kvalita → OK.

67 Integrovaná střední škola polygrafická, Brno, Šmahova 110

V otevřeném dialogovém okně Uložit webový obraz najdeme složku obrazky, do pole Název souboru napíšeme naxos-kostel.jpg → Uložit, tento obrázek však již byl uložený do složky, klepněme na Ano, abychom jej nahradili tím, který chceme uložit nyní. Teď by se měl zobrazit dialog pro napsání alternativního textu Kostel na ostrově Naxos, pokud se dialog nezobrazí, napíšeme frázi do pole Alternativní text v panelu Vlastnosti. Nyní se zobrazí obrázek na vyhrazeném místě, jeho velikost je ale větší, můžeme ji však upravit přetažením myší za levý spodní roh obrázku při současném stisknutém tlačítku shift, kontrolu velikosti obrazu provedeme v panelu Vlastnosti, kde také můžeme napsat přesnou hodnotu šířky a výšky obrázku.

68 Integrovaná střední škola polygrafická, Brno, Šmahova 110

V levém horním rohu obrazu je jednak kruhová zelená značka pro inteligentní objekt, po zmenšení obrazu se objeví žlutý výstražný trojúhelník, který označuje, že rozměry webového obrazu jsou odlišné od vybrané výšky a šířky HTML -→ pravým tlačítkem myši klepneme na obrázek a z místní nabídky vybereme Aktualizovat z originálu, aktualizovaný obrázek se převzorkuje podle aktuálního použití, zdrojový obrázek ve Photoshopu zůstane v původním stavu, aby mohl být použit jinde na stránkách v jiných rozměrech. Pokud se soubor PSD změní, všechny podoby inteligentního objektu se mu okamžitě přizpůsobí. Abychom mohli použít stejný soubor na jiných stránkách, vložíme obrázek na tuto stránku stejným postupem ještě jednou - Soubor → Uložit.

23. lekce

PRUH NABÍDEK SPRAY UPRAVENÍ ODKAZU NA E-MAILOVOU ADRESU

Dalším používaným typem odkazu je odkaz na e-mail, jakmile na něj uživatel klepne, zobrazí se okno s novou a vyplněnou e-mailovou adresou, to je výhodné, pokud požadujeme rychlou zpětnou vazbu. Kurzor umístíme na konec textu v odstavci o Elaine, stiskem klávesy enter vytvoříme nový odstavec a napíšeme sem text Napište Elaine. - vybereme napsaný text. -→ Otevřeme panel vložit → Okno → Vložit a klepneme na ikonu E-mailový odkaz, v zobrazeném stejnojmeném dialogu napíšeme [email protected] - → Soubor → Uložit.

69 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Funkce textového odkazu je závislá na existenci e-mailového klienta nainstalovaného v počítači uživatele,např.Out look, odkaz nebude fungovat, pokud uživatel k posílání e-mailů používá službu na internetu(např. seznam).

VKLÁDÁNÍ PRUHU NABÍDEK SPRY

Webové stránky potřebují interní navigaci, většina současných stránek používá navigaci, která je založena na seznamech stylovaných pomocí kaskádových stylů CSS. S pomocí JavaScriptu se může seznam stát vodorovnou nebo svislou navigací s podnabídkami v rozbalujících se nabídkách. Ovládací pruh nabídek je jednoduchý a silný nástroj, který je určen pro vkládání seznamů- kódu HTML a také odkazů, všech pravidel CSS, která zajistí, že se zobrazí jako pruh nabídek, a JavaScriptu, který zajistí vysunování podnabídek. Ovládací prvek pruh nabídek Spray má výhodu v tom, že jej tvoří pouze seznamy v HTML, takže i když uživatel nemá povolený JavaScript nebo CSS, navigační nabídka je stále funkční jako soubor navigačních odkazů. - Otevřeme soubor onas-příjmení.html, - v postranním panelu umístíme kurzor vlevo od obrázku New Yorku a stiskem Enter vytvoříme prázdný řádek před obrázkem, - otevřeme panel Vložit z nabídky Okno, klepneme na ikonu Spray pruh nabídek

- ve stejnojmenném dialogu vybereme volbu Svisle → OK a nad obrázkem se zobrazí navigační nabídka, → Soubor → Uložit. 70 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- K vytvoření odkazů použijeme panel Vlastností, ten otevřeme klepnutím na azurový pruh panel nabídek spray: menuBar1.

- Vybereme položku 1 v levém seznamu (hlavní nabídky), v poli Text napíšeme Úvodem, v poli Odkaz napíšeme index.html a v prostředním sloupci (druhá úroveň nabidky) vymažeme pomocí tlačítka – všechny tři podnabídky Položka 1.1 až 1.3. - Vybereme položku 2 a do pole Text napíšeme Itálie, v poli Odkaz ponecháme znak mřížky a do nabídky druhé úrovně pomocí tlačítka + přidáme další položku, do pole text napíšeme Umbria a do pole odkaz přepíšeme znak mřížky textem Umbria.html. - Vybereme Položku 3, do pole text napíšeme Řecko, vybereme položku 3.1 do pole text nepíšeme Santorini a do odkazu santorini-příjmení.html, - vybereme položku 3.2, napíšeme Naxos a do odkazu naxos-příjmení.html, - do položky 4 napíšeme O nás a do odkazu onas-příjmení.html, vytvoříme tlačítkem + podnabídku 4.1, vybereme ji, do pole text napíšeme Kontaktujte nás a do Odkazu napíšeme kontakt.html - → Soubor → Uložit.

71 Integrovaná střední škola polygrafická, Brno, Šmahova 110

24. lekce

SPRY PANEL SE ZÁLOŽKAMI VKLÁDÁNÍ SPRY PANELU SE ZÁLOŽKAMI

Tento panel se používá jako náhrada za navigaci na dlouhých stránkách, pomocí Spry panelu se záložkami nahradíme posouvání na dlouhých webových stránkách tím, že potřebné části stránek zkrátíme do panelu se záložkami (v záložkách ponecháme pouze název), zájemce si na webové stránce otevírá klikáním pouze ty záložky, které si chce aktuálně prohlédnout, všechny ostatní jsou schovány v záložkách. - Otevřeme soubor onas-příjmení.html ze souboru → Nabídka → Otevřít → Dreamweaver kurz CS4

→ lekce 05. V tomto souboru je dlouhá webová stránka, na které jsou postupně zobrazeny informace o

jednotlivých zaměstnancích, při prohlížení této stránky se zájemce musí přesouvat po webové stránce pomocí rolovacího kolečka, aby si našel informace o hledaném zaměstnanci. Místo tohoto pracného a zdlouhavého postupu nám Adobe Dreamweaver nabízí k použití Panel se záložkami, který nám poskytne informace o jednotlivých zaměstnancích skrytých v záložkách s jejich jmény. Při otevření této webové stránky si jejich tvůrce může zvolit, která záložka se bude zobrazovat na stránce jako výchozí.

- Vložíme kurzor za úvodní odstavec a stiskem klávesy Enter vložíme nový odstavec. - Na toto místo vložíme Spry panel se záložkami z panelu Vložit, - z nabídkového řádku → Okno → Vložit → kategorie Spry → ikona Spry panel se záložkami.

72 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Panel se zobrazí na stránce na určeném místě, nebudeme si všímat, že nám dočasně vytláčí zbývající obsah stránky doprava. Panel má dvě části:pojmenovanou záložku a obsahovou oblast pro každou záložku. Do obsahové části můžeme vkládat jakýkoliv text, grafiku, tabulky, formuláře, seznamy, dokonce filmy ve Flashi. K jeho naplnění budeme používat panel Vlastnosti, pokud se neotevře automaticky, otevřeme si ho z nabídky → Okno → panel Vlastnosti.

V prvním okně je název panelu (TabbedPanels1), ve druhém okně jsou názvy záložek a pomocí tlačítek + a – můžeme měnit počet záložek, pomocí šipek nahoru či dolů můžeme měnit pořadí záložek. Ve třetím okně můžeme nastavit výchozí stránku. - V panelu Vlastnosti přidáme 3 nové záložky(3 x klepneme na ikonu +), v okně dokumentu Dreamweaver zobrazuje ikonu oka, ta umožňuje vybrat aktuálně skrytý obsah panelu a zpřístupní ho k úpravám. - Vybereme text záložka 1 a napíšeme název Elaine, vložíme kurzor kamkoliv do profilu Elaine, v selektoru značek klepneme na element , tím vybereme celý obsah textu o Elaine i s obrázkem, → Upravit → vyjmout, vybereme text Obsah 1 a nahradíme ho obsahem schránky → Upravit → Vložit.

73 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Stejným způsobem naplníme záložky 2-5 obsahem textu pro jednotlivé zaměstnance cestovní kanceláře.Na konci práce si můžeme pomocí ikon s okem prohlédnout všechny vytvořené záložky a provedeme jejich kontrolu a konečnou úpravu. - zvolíme → Soubor → Uložit. Poté si vyzkoušíme funkčnost jednotlivých záložek pomocí náhledu v prohlížeči.

25. lekce

ÚPRAVA STYLU NABÍDEK A ZÁLOŽEK SPRY ÚPRAVA VZHLEDU PRUHU NABÍDEK A ZÁLOŽEK SPRAY Ovládací prvek Pruh nabídek Spry nám umožňuje vytvořit celkem rychle a jednoduše profesionálně vypadající webové stránky, jejich vzájemné propojení i interní navigaci. Jejich vzhled můžeme snadno upravit s využitím JavaScriptu a kaskádových stylů CSS. Vložením Pruhu nabídek Spry se automaticky připojil k naší stránce soubor s kaskádovými styly SpryMenuBarVertical.css, pomocí tohoto souboru budeme stylovat vloženou nabídku ve formě neuspořádaného seznamu. - Z nabídkového řádku otevřeme soubor → Otevřít → onas-příjmení.html. - Z nabídkového řádku otevřeme soubor → Okno zaškrtneme položku Styly, v seznamu stylů zabalíme pomocí tlačítka – soubory mojestyly-příjmení.css a tisk-příjmení.css. Nyní rozbalíme tlačítkem + soubor SpryMenuBarVertical.css, 74 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- V horní části okna vybereme tlačítkem Vše všechna pravidla, ta se nám zobrazí jednotlivě pod sebou. - Vybereme ze seznamu selektor ul.MenuBarVertical a, pravidlo s tímto selektorem ovlivňuje barvu a pozadí odkazů, teedy značek . Pokud je to nutné, můžeme zachycení a tažením myší prodloužit jak okno Všechna pravidla, tak okno Vlastnosti. - V okně Vlastnosti vybereme background-color (barva pozadí) a kapátkem označíme světle žlutou barvu #FF0, klepneme na paletu barev u vlastnosti color (barva písma) a vybereme kapátkem tmavě modrou barvu #00C → Enter. - Nyní vybereme selektor ul. MenuBarVertical ul li. Pravidlo s tímto selektorem ovlivňuje šířku podnabídek. Jelikož má postranní panel pevnou šířku, můžu být šířka navigační nabídky také omezená, u vlastnosti width (šířka) zapíšeme 200 a zvolíme jednotku px. - Nyní vybereme selektor ul. MenuBarVertical li, Pravidlo s tímto selektorem kontroluje hlavní seznam navigace a budeme ho upravovat pomocí ikony → Upravit styl.Objeví se dialogové okno Definice pravidla pro ul. MenuBarVertical li v SpryMenuBarVertical li.css. - Vybereme Kategorii Rámeček a do pole width (šířka ) napíšeme 200 a jako jednotku zvolíme px. - V kategorii Okraj zrušíme u všech tří vlastností volbu Stejné pro všechny a do části Style (styl) vybereme z roletky slovo solid (plný) do polí Right (vpravo) a Bottom (spodní). Do části Width (šířka) do stejných polí napíšeme 1 px a v části Color (barva) vybereme do stejných polí barvu tmavě modrou #00C.

75 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- → OK → Uložit vše, musíme uložit jak dokument HTML, tak kaskádové styly. Podobně bychom upravovali i horizontální nabídku, rozdíl by byl v šířce nabídkových oken, při větším počtu by šířka oken byla menší, z tohoto důvodu je vhodnější používat vertikální nabídku odkazů. Stejným způsobem můžeme upravovat vzhled Spry panelu se záložkami,.po vložení Spry panelu se záložkami se nám automaticky vloží do okna Styly soubor stylů SpryTabbedPanels.css, v Okně Styly si ho rozbalíme a můžeme upravovat jednotlivá pravidla, jedná se o selektor - TabbedPanels Tab- zde můžeme měnit barvu pozadí záložek,jejich okrajů i stylu písma. - TabbedPanels TabHover -mění barvu záložka při výběru myší. - TabbedPanels TabSelekted a- mění barvu neaktivní záložky. - Po ukončení úprav musíme uložit jak dokument Html, tak i změny v kaskádových stylech - → Uložit vše

76 Integrovaná střední škola polygrafická, Brno, Šmahova 110

26. lekce

CHOVÁNÍ SPRY EFEKTŮ CHOVÁNÍ V DREAMWEAVERU Chování DW je kódem JavaScriptu, který vykonává nějakou akci, např. otevření okna prohlížeče, kterou spouští nějaká událost, např. klepnutí myší. Použití chování je proces o třech krocích: 1. Vybereme element na stránce, který má spouštět chování. 2. Vybereme, jaké chování se má použít. 3. Určíme nastavení nebo parametry takového chování. DW nabízí více jak 30 druhů chování, která jsou všechna dostupná z části Chování, v nabídce Okno. - → Okno → Chování → Inspektor tagů → ikonou + rozbalíme seznam dostupných chování k určité části okna

Některé funkcionality pro použití v DW obsahují: 77 Integrovaná střední škola polygrafická, Brno, Šmahova 110

•

Otevření a zavření okna

•

Změnu zdroje obrázku a zpětnou změnu pro efekt

•

Mizení a objevování obrázku nebo části stránky

•

Zvětšování či třesení grafiky

•

Zobrazení vyskakujícího okna s upozorňovací hláškou

•

Změna textu nebo jiného obsahu HTML v určené oblasti

•

Objevování nebo skrytí části stránky

•

Volání uživatelské funkce JavaScriptu

Ne všechna chování jsou dostupná veškerý čas, běžná chování jsou dostupná pouze v přítomnosti určitého elementu na stránce, např. obrázek,… POUŽITÍ CHOVÁNÍ SPRY EFEKTŮ Pomocí nich můžeme vytvářet vizuální efekty na stránce, jako je zvýraznění elementů, jejich zatřesením, přechodem obrázků v druhý obraz. Tyto efekty slouží k upoutání pozornosti nebo ke zvýraznění potřebného elementu, jsou velmi výrazné a proto se musí používat opatrně. - → Soubor → Otevřít → na disku najdeme cestu do kurzu DW a otevřeme →Lekce 06 a v ní soubor nasiklienti-start.html. - soubor uložíme → Soubor → Uložit jako → název souboru zvolíme nasiklienti-prijmeni.html, a původní soubor nasiklienti-start.html beze změny zavřeme. - V main Content ( hlavním obsahu) označíme nadpis h1 Naši podnikoví klienti. - Z nabídkového řádku otevřeme → Okno → Chování, klepnutím na ikonu + rozbalíme kartu Chování a v ní vybereme → Efekty a v rozbalené podnabídce vybereme → Zvýraznění.

78 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- V zobrazeném dialogovém okně ponecháme jako cílový element současný výběr, v poli Trvání efektu napíšeme 1500 ms, v poli počáteční barva pomocí kapátka vybereme zelenou barvu #00FF33, do pole Konečná barva vybereme červenou barvu #ff0000 a v poli barva po efektu žlutou #FFFF66,zaškrtneme pole přepnout efekt, to nám umožní měnit barvy oběma směry → OK. - V panelu Chování klepneme na pole On clik, tím ho aktivujeme a v seznamu vybereme onMouseOver.

Pokud bychom chtěli měnit parametry efektu Zvýraznění, poklepeme na jeho název v pravém sloupci, tím se nám otevře příslušné dialogové okno. Smazat nepotřebný efekt můžeme po jeho označení v panelu chování pomocí ikony se znakem minus - . 79 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Označíme nadpis h1 v záhlaví dokumentu, v panelu chování přidáme chování → vybereme Efekty a podnabídce vybereme efekt → Zatřást, v dialogu ponecháme Současný výběr. V levém poli panelu Chování ponecháme spouštěč onClick. - Označíme obrázek v sidebar 1, , v panelu chování přidáme chování → vybereme Efekty a podnabídce vybereme efekt → Zaměnit obraz, v dialogu klikneme na procházet a najdeme v DW obrázky santorini-zapadslunce.jpg, ponecháme nabízená zaškrtnutí. → OK. - Soubor → Uložit.

Provedené změny si prohlédneme jako náhled v prohlížeči.

27. lekce

IMPORT DAT XML IMPORT DAT XML POMOCÍ SPRY XML ( Extensible Markup Language) je standardizovanou specifikací pro ukládání dat v textovém formátu, jedná se o značkovací jazyk, který používá podobně jako HTML stejnou metodu označování textu pomocí značek. XML je oproti HTML může značky pojmenovat podle sebe, např. na základě dat, jež označují. Každý soubor jazyka XML může obsahovat vícenásobné záznamy dat. - → Soubor → Otevřeme → DW → Lekce → lekce 06 → nasiklienti-příjmení.html, - Ukazatel myši umístíme pod odstavec textu v elementu div s identifikátorem mainContant (hlavní obsah), tím jsme určili místo , kam vložíme sadu dat. - Z nabídky → Okno → otevřeme panel Vložit a v něm klepneme na kategorii Spry a v ní vybereme Sada dat Spry. - V zobrazeném dialogovém okně Sada dat Spry vybereme z roletky datový typ XML a v okně pro zadání datového souboru klepneme na Procházet, vybereme z lekce 06 soubor klienti.xml → OK, tím se vrátíme do úvodního okna, v poli element řádku zvolíme „klient“ → další a tím se 80 Integrovaná střední škola polygrafická, Brno, Šmahova 110

posuneme do druhého kroku. - Na obrazovce Nastavit možnosti dat budeme postupně vybírat jednotlivé sloupce a nastavíme datový typ. Pro všechny sloupce kromě čtvrtého (s názvem činnost) ponecháme v poli Text název Řetězec, ve čtvrtém sloupci zvolíme pomocí roletky datový typ html, protože tento sloupec obsahuje značky HTML.

Potom klepneme na tlačítko Další a tím se přesuneme do posledního kroku. - Na obrazovce Vyberte možnosti vložení vybereme možnost Vložit tabulku klepneme na tlačítko Nastavení, tím se nám objeví dialogové okno Datová sada Spry- vložit tabulku. - V dialogu máme možnosti pracovat s navrženými sloupci, pomocí tlačítka + a – můžeme sloupce přidávat nebo odstraňovat, měnit pořadí sloupců či aktualizovat detaily oblastí v případě stisknutí řádku tabulky

81 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Klepneme na tlačítko → OK, čímž souhlasíme s výchozím nastavením a vrátíme se do dialogu Vyberte možnosti vložení a potvrdíme ukončení vkládání datové sady Spry tlačítkem Hotovo. - → Soubor → Uložit. Dreamweaver potřebuje přidat dva soubory JavaScriptu, které umožní správné fungování sadě dat Spry, tyto soubory jsou nachystány ve složce SpryAssets a jsme vyzváni k jejich zkopírování. Nyní uvidíme v zobrazení Návrh tabulku s výplňovým textem pro sadu dat, vlastní data jsou uložena v souboru XML a zobrazí se pouze v živém zobrazení nebo při náhledu v prohlížeči. - → Soubor → náhled v prohlížeči. Kromě tabulky a výplňového prostoru Dreamweaver vložil také řádky s důležitým kódem, ten si můžeme prohlédnout v zobrazení kód, v hlavičce dokumentu (). Zde najdeme odkazy na soubory JavaScriptu a funkce, jejímž účelem je ovládání sady dat Spry ( var ds1 = new Spry.Data.XMLDataset("Klienti.xml", "klienti/klienti");ds1.setColumnType("činnost" "html");… Sady dat Spry nám umožňují importovat zdrojové materiály ve formátu XML nebo HTML a jejich dynamické zobrazování na webových stránkách s pomocí tabulkek nebo obalových elementů, kontejnerů, ty mohou obsahovat detailní rozvržení a vyhledávací sekce, to nám dává různé možnosti, jak pracovat se sadami dat Spry.

82 Integrovaná střední škola polygrafická, Brno, Šmahova 110

28. lekce

TVORBA SPRY SKLÁDAČEK VYTVÁŘENÍ SPRY SKLÁDAČEK Spry skládačka je podobná Spry panelu se záložkami, zejména pro podobnou organizaci obsahu do celistvého vícepanelového zobrazení, jednotlivé záložky jsou naskládány na sobě spíše než vedle sebe, takže při klepnutí na jednu z nich se panel i s celým obsahem plynule otevře a obsah se zobrazí v požadované záložce. Pokud je obsah uvnitř panelu větší nebo širší než panel sám, automaticky se zobrazí horizontální nebo vertikální postníky. - Otevřeme →Soubor → Dreamweaver → Lekce → Lekce 06 → Santorini-start.html, - Zvolíme →Soubor → Uložit jako → Santorini-příjmení.html, původní soubor Santorinistart.html zavřeme beze změny. - Ukazatel myši umístíme na konec řádku Ráj u moře v hlavním obsahu (mainContent), tím vytvoříme bod , kam budeme vkládat Spry skládačky.

Z nabídkového řádku otevřeme nabídku → Okno → Vložit a tomto panelu klepneme na ikonu Spry skládačka.Dreamweaver vloží na vyznačené místo do stránky ovládací prvek Spry skládačka.

Výchozím prvkem je dvoupanelová skládačka s rozbaleným horním panelem. Modrá záložka s označením lze přímo měnit v zobrazení Návrh. - Zvolíme → Soubor → Uložit vše, pokud je to požadováno, odsouhlasíme přijetí závislých souborů, které Dreamweaver přidá do složky SpryAssets. - Vybereme výplňovou frázi Popisek 1 a přepíšeme jej textem Vítejte na Santorini. 83 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Vybereme fotografii páru na střeše a veškerý text, který popisuje vesnice a pláže až k „Co říkají naši zákazníci. - V HTML kódu se můžeme přesvědčit, že jsme při označování nic nevynechali → Kód, od značky

před obrázkem až po uzavírací značku

za druhým vybraným seznamem, potom se vrátíme zpět do zobrazení Návrh. - Z nabídkového řádku zvolíme → Upravit → Vyjmout, tím zkopírujeme vybraný obsah do schránky. - Vrátíme se do skládačky, vybereme text Obsah 1 a pomocí lokální nabídky vyvolané pravým tlačítkem myši → Vložit jej nahradíme obsahem schránky. V Návrhovém zobrazení uvidíme pouze část vloženého obsahu, protože se v tomto zobrazení nezobrazuje posuvník. Abychom uviděli celý obsah, klepneme na panel pravým tlačítkem myši a v lokální nabídce označíme v položce Zobrazení elementu položku Plné. Pro práci na jiných panelech je ovšem výhodnější obsah opět skrýt opačným postupem. - Ukazatelem myši posuneme v šedé oblasti s názvem Popisek 2 až se objeví ikona oka, klepneme na ni, tím se nám otevře panel 2. - Vybereme Popisek 2 a přepíšeme jej textem „Co říkají naši zákazníci“. - Stejným způsobem jako v předešlém případě vyjmeme do schránky text v příslušné oblasti a vložíme jej do panelu v oblasti Obsah 2. - Pro naplnění třetího panelu skládačky musíme nejdříve přidat další panel, vytvoříme jej v panelu Vlastnosti. - Vybereme skládačku Spry: Accordion 1, otevřeme panel Vlastnosti a vněm pomocí tlačítka + nebo – můžeme přidávat nebo mazat panely, šipkami přesouváme vybraný panel na požadovanou pozici.

- Tlačítkem + přidáme třetí panel.

- Přepíšeme Popisek 3 textem Doporučené hotely, - Stejným způsobem jako v předešlém případě vyjmeme do schránky text v příslušné oblasti a 84 Integrovaná střední škola polygrafická, Brno, Šmahova 110

vložíme jej do panelu v oblasti Obsah 3 - → Soubor → Uložit, kontrolu funkčnosti provedeme v živém zobrazení či v náhledu v prohlížeči. Na závěr můžeme provést úpravy Spry skládaček pomocí kaskádových stylů CSS, vyladíme pomocí šablony stylů SpryAccordion.css,

29. lekce

LAYOUT STRÁNKY TVORBA LAYOUTU STRÁNKY

V současnosti se při vytváření layoutu webových stránek (rozvržení objektů na stránce)přešlo na stylování pomocí kaskádových stylů CSS, na rozdíl od tabulkového rozvržení, které je datově náročnější, hůře se udržují a dodržují standardy. Tvorba layoutů založená na stylech CSS se skládá ze dvou hlavních komponent: sada značek

- ty vytváří strukturu stránky.

sada pravidel CSS

- pomocí nich se definují rozměry a formátují klíčové elementy

stránky.

- Zvolíme → Soubor → Nový v otevřeném dialogu zvolíme → Prázdná stránka → Typ stránky :HTML → Rozvržení: žádný. Při této volbě nejsou v náhledu k dispozici žádné předvolby layoutu. (K podobnému výsledku můžeme dojít rychleji při zobrazení uvítací obrazovky a klepnutí na HTML ve sloupci Vytvořit nový). - Zvolíme →Soubor → Uložit v zobrazeném dialogovém okně Uložit najdeme Lekce 07 a do názvu napíšeme Layout-příjmení.html → Ok. - Zvolíme z nabídkového řádku → Okno → Styly CSS , ve stejnojmenném panelu se přepneme, pokud je to nutné do režimu →Vše. - Klepneme na ikonu → Nové pravidlo, jako Typ selektoru zvolíme z roletky Tag (předefinuje 85 Integrovaná střední škola polygrafická, Brno, Šmahova 110

element HTML), do Názvu selektoru napíšeme nebo z roletky vybereme Body, v kolonce Definice pravidla ponecháme Pouze v tomto dokumentu.

- Zobrazí se nám dialogové okno Definice pravidla CSS pro body, zvolíme Kategorii → Pozadí a v Background-color pomocí kapátka vybereme světle růžovou barvu #FCF, přepneme do Kategorie Blok a v seznamu pole Text-align (zarovnání textu)zvolíme center. Rozpracovaný layout se zarovná na střed okna prohlížeče, zatímco text zůstane zarovnaný doleva, tato akce je nutná pro starší prohlížeče (IE 5.x,aby se vše správně vykreslilo), v dalších krocích přepíšeme zarovnání textu vlevo. - Zvolíme Kategorii → Rámeček v části Padding ( vnitřní okraj) napíšeme v poli Top (horní) 0, to stejné provedeme v poli Margin ( vnější okraj) →OK.

- Zvolíme → Soubor → Uložit. Zvolené vlastnosti pro body si můžeme prohlédnout v panelu 86 Integrovaná střední škola polygrafická, Brno, Šmahova 110

vlastnosti po klepnutí na body. - samostatně změňte barvu pozadí na bílou. DEFINICE VNĚJŠÍHO OBALU - V panelu Styly CSS zvolíme ikonu→ Nové pravidlo, v zobrazeném dialogovém okně v poli Název selektoru vybereme ID (použito pro jeden element HTML) do pole Název selektoru napíšeme #obal a v roletce Definice pravidla musí být Pouze pro tento dokument →OK.

- V zobrazeném dialogu vybereme Kategorii Blok, v roletce Text-align vybereme left (zarovnání textu doleva) → v kategorii Rámeček → do pole Width napíšeme hodnotu 760 px, v části Margin (vnější okraj) zrušíme zatržení Stejné pro všechny a do pole Top napíšeme 0 a do polí Right a Left zvolíme Auto →OK.Layout má pevnou šířku 760 px takže funguje i při rozlišení 800x600 px,40 px navíc se používá pro zobrazení okrajů okna včetně postníků.Levé a pravé okraje jsou nastaveny na Auto, aby se celý obsah stránky zarovnal na střed okna

87 Integrovaná střední škola polygrafická, Brno, Šmahova 110

prohlížeče,Zbývajících 40 px se rozdělí rovným dílem mezi levý a pravý vnitřní okraj a tím se layout zarovná na střed.

30. lekce

OBAL STRÁNKY OBAL A PRIMÁRNÍ ČÁSTI STRÁNKY

Nyní jsme přidělili značce

s identifikátorem #obal styly.DW nám umožní přímé přidání značky

a přidělení identifikátoru. - Otevřeme z nabídkového řádku nabídku → Okno → Vložit. V zobrazeném panelu Vložit vybereme → kategorii Rozvržení a v ní klepneme na ikonu Vložit tag Div. - V zobrazeném dialogovém okně vybereme v roletce V místě textového kurzoru a v roletce Identifikátor vybereme Obal →OK.

DW přidá do stránky novou značku

s výplní pro obsah, která obsahuje text „sem patří iobsah pro id obal“. Značka

s identifikátorem #obal slouží jako obalový element (kontejner) pro další značky

, jejím účelem je omezení šířky layoutu. Nyní budeme přidávat další hlavní části layoutu, ten je primárně tvořen ze tří částí,

záhlaví obsah zápatí 88

Integrovaná střední škola polygrafická, Brno, Šmahova 110

Každá z těchto částí vyžaduje pravidlo CSS a značku

. - Zvolíme z nabídkového řádku →Okno →Styly CSS → Vše → klepneme na ikonu Nové pravidlo, - v zobrazeném dialogu vybereme Typ selektoru: ID( ), napíšeme do pole Název selektoru: #záhlaví a v poli Definice pravidla ponecháme: Pouze v tomto dokumentu → OK.

- V zobrazeném dialogu vybereme Kategorii:Rámeček a v ní Margin (vnější okraj), zrušíme zatržení : Stejné pro všechny a do polí Top a Bottom napíšeme 12 px → OK. Nyní budeme stejným způsobem definovat další pravidla CSS pro#obsah a #záhlaví. - klepneme na ikonu Nové pravidlo, - v zobrazeném dialogu vybereme Typ selektoru: ID( ), napíšeme do pole Název selektoru: #obsah a v poli Definice pravidla ponecháme: Pouze v tomto dokumentu → OK. - V zobrazeném dialogu vybereme Kategorii:Rámeček a v Padding (vnitřní) a Margin (vnější okraj), zrušíme zatržení : Stejné pro všechny a do polí Top napíšeme 0 px → OK. Tímto bude obsah zobrazen hned pod záhlavím bez jakéhokoli okraje. Třetí pravidlo můžeme vytvořit duplikováním pravidla pro záhlaví: - v panelu Styly CSS označíme #zápatí, → kliknutím pravým tlačítkem vyvoláme lokální nabídku a v ní vybereme Duplikovat, v zobrazeném okně v poli Název selektoru přepíšeme #zápatí → OK. 89 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Nyní má pravidlo #záhlaví a #zápatí stejné vlastnosti, jejich změnu či přidání můžeme provést v panelu Styly CSS. - v panelu Styly CSS → Všechna pravidla označíme #zápatí → klepneme na Přidat vlastnost a z roletky vybereme do prvního pole Clear a do druhého pole Both. Tato vlastnost způsobí, že se blok #zápatí zarovná až pod elementy v plovoucím umístění v části #obsah. Nyní máme definovaná potřebná pravidla pro hlavní části layoutu a můžeme je postupně přidat do stránky. - Označíme text Sem patří obsah id „obal“, vymažeme ho. - V panelu Vložit (otevřeme ho z nabídky → Okno) zvolíme Kategorii →Rozvržení v něm klepneme na ikonu → Vložit tag Div. - V zobrazené nabídce vybereme Vložit: Za začátek tagu a roletky vybereme

a z roletky Identifikátor: záhlaví →OK. Tím jsme vložili značku

s identifikátorem # zápatí do nadřazeného elementu s id #obal

Podobným způsobem vložíme dovnitř elementu #obal další značky (#obsah a #zápatí), abychom tyto značky správně seřadili, použijeme Vložit: Za tag. Výplňový text nám ulehčuje orientaci na stránce. - V nástrojovém panelu Dokument napíšeme do pole Titul: Layout → Enter. - → Soubor → Uložit vše.

90 Integrovaná střední škola polygrafická, Brno, Šmahova 110

31. lekce

OBLASTI S OBSAHEM VKLÁDÁNÍ OBLASTÍ S OBSAHEM

Vytvořený základní layout je příliš obyčejný a jednoduchý, sofistikovanější rozvržení obsahují navíc oblasti sousedící se značkami

, které tvoří jeho součást a jsou do nich vnořené. - - klepneme na ikonu Nové pravidlo, - v zobrazeném dialogu vybereme Typ selektoru: ID(použito pouze …), napíšeme do pole Název selektoru: #logo a v poli Definice pravidla ponecháme: Pouze v tomto dokumentu → OK. Plánované logo bude zobrazeno jako obrázek na pozadí se šířkou 760 px a výškou 71 px, kterou musíme specifikovat. - - V zobrazeném dialogu vybereme Kategorii:Rámeček, do pole Height (výška) napíšeme 71 px, v části Padding (vnitřní okraj) zrušíme zatržení : Stejné pro všechny a do pole Bottom napíšeme 12 px → OK.

Nyní jsme vytvořili selektor identifikátoru #logo pro značku

, kterou nyní umístíme do značky

s identifikátorem #záhlaví. - V panelu Vložit klepneme na ikonu Vložit tag Div, v zobrazeném dialogu vybereme z roletky 91 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Vložit volbu Za začátek tagu a z rolrtky vpravo vybereme značku

. Z roletky Identifikátor vybereme logo → OK. Protože jsme do elementu

s identifikátorem #záhlaví začali vkládat obsah, můžeme výplňový text pomocí klávesy Delete vymazat. Duplikací pravidla pro #logo vytvoříme další element a potom jej vložíme do záhlaví stránky. - V panelu Styly CSS → Vše → pravým tlačítkem myši klepneme na selektor #logo, tím vyvoláme lokální nabídku, v ní zvolíme Duplikovat, jakmile se zobrazí dialog, napíšeme do pole Název selektoru #navigace → OK.

- V panelu Styly CSS vybereme selektor #navigace změníme v části Vlastnosti hodnotu Height ze 71 na 28, potom označíme vlastnost padding-bottom a odstraníme ji pomocí ikony koše v pravém spodním rohu. - V panelu Vložit → klepneme na ikonu Vložit tag Div a v zobrazeném dialogu vybereme Vložit: Za tag, z roletky v pravo vybereme značku

a z roletky Identifikátor: navigace → OK - V panelu Styly CSS → Vše → pravým tlačítkem myši klepneme na selektor #navigace, tím vyvoláme lokální nabídku, v ní zvolíme Duplikovat, jakmile se zobrazí dialog, napíšeme do pole Název selektoru #banner → OK. - V panelu Styly CSS v části Všechna pravidla vybereme selektor #banner a v části Vlastnosti změníme hodnotu vlastnosti height z 28 na200.

92 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- V panelu Vložit klepneme na ikonu Vložit tag Div a zobrazeném dialogu vybereme : Za tag,

a z roletky Identifikátor vybereme : banner → OK. Dalším krokem je rozdělení oblasti s obsahem do dvou sloupců, proto musíme nejdříve definovat styl pro každý sloupec. - V panelu Styly CSS zvolíme → Nové pravidlo, v dialogu do pole Název selektoru napíšeme #sloupec-levý, v poli Typ selektoru musí být: ID (…) → OK.

-V zobrazeném dialogu v kategorii: Rámeček napíšeme do pole Width (šířka) 365 px, z roletky Float (plovoucí umístění) vybereme left (doleva) → OK. Druhý sloupec můžeme jednoduše vytvořit duplikováním levého sloupce. - - V panelu Styly CSS → Vše → pravým tlačítkem myši klepneme na selektor #sloupec-levý, tím vyvoláme lokální nabídku, v ní zvolíme Duplikovat, jakmile se zobrazí dialog, napíšeme do pole Název selektoru #sloupec-pravý → OK. - - V panelu Styly CSS v části Všechna pravidla vybereme selektor #sloupec-pravý a v části 93 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Vlastnosti změníme hodnotu vlastnosti float na right→ Enter. - V panelu Vložit klepneme na ikonu Vložit tag Div, v zobrazeném dialogu vybereme: Za začátek tagu, značku

a z roletky Identifikátor: sloupec-levý → OK. -- V panelu Vložit klepneme na ikonu Vložit tag Div, v zobrazeném dialogu vybereme: Za tag, značku

a z roletky Identifikátor: sloupec-pravý → OK.

- Vybereme výplňový text Sem patří obsah pro id „obsah“ a klávesou Delete jej vymažeme. -→ Soubor → Uložit.

32. lekce

VKLÁDÁNÍ VÝPLNÍ VKLÁDÁNÍ VÝPLNÍ V minulé lekci vytvořený layout webové stránky je pro většinu málo přehledný, trvalo by dlouho, než bychom vysvětlili, co jsme zamýšleli udělat. Proto je vhodné do připraveného obsahu přidat více vizuálních výplní, v praxi rozlišujeme dva druhy výplní: výplň pro obrázek výplňový text - Otevřeme → Soubor → Otevřít → Lekce 07 → Layout–příjmení.html. Nejdříve budeme přidávat grafické výplně: - Vybereme výplňový text Sem patří obsah pro id „logo“ a klávesou Delete ho vymažeme. - Z nabídkového řádku otevřeme → Okno → Vložit v tomto panelu vybereme kategorii Běžné, v ní klepneme na ikonu Obrazy. Z nabídky zvolíme Vyhrazené místo pro obraz.

94 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Zobrazí se dialogové okno a do pole Název napíšeme:Logo, do pole šířka: 760 výška: 71, ostatní pole nebudeme vyplňovat → OK.

Stejný použijeme pro vytvoření výplní pro značky

s identifikátory #navigace a #banner. - označíme výplňový text Sem patří obsah pro id „navigace“, vymažeme jej vložíme Vyhrazené místo pro obraz, s názvem Navigace, šířka: 760 a výška:28 →OK. - označíme výplňový text Sem patří obsah pro id „Banner“, vymažeme jej vložíme Vyhrazené místo pro obraz, s názvem Banner, šířka: 760 a výška:200 →OK. Nyní budeme přidávat základní výplňový text: - Ukazatel myši vložíme do textu Sem patří obsah pro id „sloupec-levý, v selektoru značek vybereme , levou kurzorovou šipkou se posuneme na místo před značku

, napíšeme text Hlavní nadpis, otevřeme z nabídkového řádku → Okno → Vlastnosti. - V panelu Vlastnosti značíme text Hlavní nadpis a v panelu Vlastnosti, v poli Formát vybereme z roletky Nadpis 1. - Vybereme výplňový text Sem patří obsah pro id „sloupec-levý a přepíšeme ho textem Podnadpis. - V roletce Formát v panelu Vlastnosti vybereme: Nadpis 2. Ukazatel myši umístíme ihned za vložený text Podnadpis a stiskem klávesy Enter vytvoříme pod nadpisem prázdný odstavec. Nyní bychom měli napsat několik odstavců výplňového textu, pro zrychlení práce máme již potřebný výplňový text připraven v textovém souboru v lekci 07. - Zvolíme →Soubor → Otevřít → najdeme Lekce 07 → soubor vyplnovy_text.html, z nabídkového řádku zvolíme → Upravit → Kopírovat, soubor zavřeme, tím vrátíme do souboru 95 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Layout-příjmení.html a vložíme jej pomocí CTRL + V na vyznačené místo. Úplně stejný obsah včetně podnadpisu vložíme do pravého sloupce, můžeme to ale provést pomocí příkazu Duplikovat. - Ukazatel myši vložíme do levého sloupce, z nabídkového řádku zvolíme → Upravit → Vybrat vše →, automaticky se vybere text pouze v levém sloupci. Vybraný text zkopírujeme CTRL+C. - Nyní vybereme text Sem patří obsah pro id „sloupec-pravy“ a zkopírovaným textem jej stiskem CTRL+V přepíšeme. - Zvolíme → Soubor → Uložit. Rozvržení stránky je nyní kompletní, je však žádoucí přesunout styly CSS z hlavičky dokumentu do externí šablony, protože interní šablona platí pouze pro jednu stránku, externí šablonu však lze propojit s více stránkami. EXPORTOVÁNÍ STYLŮ - → Styly CSS → vybereme styl pro body, pravým tlačítkem myši vyvoláme lokální nabídku a v ní klepneme na příkaz Přemístit pravidla CSS.

V dialogu vybereme Nový seznam stylů → OK. - V zobrazeném dialogu Uložit jako najdeme lekce 07, do pole název napíšeme příjmení.css → OK. DW přesunul vybrané styly z oblasti za značkou do nově vytvořené externí šablony a současně do aktuálního dokumentu vložil propojení s touto šablonou. Posledním krokem je odstranění už nepotřebné značky <style> - V panelu Styly CSS označíme <style>a pomocí ikony koše ji odstraníme.

96 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Nyní máme připravený návrh layoutu webové stránky k použití, vytvořený návrh je strukturovaný, přehledný a stylovaný pomocí externí šablony.

33. lekce

TVORBA FORMULÁŘŮ Formuláře v papírové i elektronické podobě slouží pro sběr informací, v obou případech se každá informace vkládá do své datové oblasti, aby ji bylo dobře rozumět. Formuláře jsou strukturované, tištěné často používají k odlišení oddělené stránky nebo rámečky, webové formuláře používají značku

. Výhodou online formulářů je možnost pracovat s předvyplněnými poli, tím snižují pracnost a možnost chyb. Elektronické formuláře používají tyto základní prvky:

• Textová pole- umožňují vkládat text a čísla, mají omezený počet znaků. • Textové oblasti- umožňují vkládat text a čísla, používají se pro obsáhlý text. • Přepínače- umožňují výběr jedné z více nabízených položek, výběrem jiné se předcházející výběr zruší. • Zaškrtávací pole- Výběr typu ano- ne, umožňují vybrat více položek současně. • Seznamy- zobrazují pole ve formě roletek, mohou umožňovat výběr jedné nebo i více položek. • Skrytá pole- Slouží k uchovávání dat pro další zpracování formuláře ve formě, kterou uživatel nevidí. • Tlačítka- Potvrzují data ve formuláři nebo jej odesílají ke zpracování.

97 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Po vyplnění se formuláře odesílají k dalšímu zpracování. Elektronické formuláře zahrnují značku , která obsahuje parametr „action“, jehož hodnota se provede po stisknutí potvrzovacího tlačítka, může to být webová adresa jiné stránky, která formulář zpracuje.

PŘIDÁNÍ FORMULÁŘE DO STRÁNKY → Otevřeme z nabídkového řádku → Soubory → Otevřít → lekce 08 → kontakt- start.html. → Zvolíme Soubor uložit jako → do pole pro název napíšeme → kontakt-příjmení.html. → Původní soubor kontakt- start.html beze změny uzavřeme. Nyní musíme přidat značku , která bude obklopovat všechny ostatní prvky formuláře. → V elementu div s identifikátorem mainContent umístíme kurzor za otazník v nadpisu. → Otevřeme z nabídkového řádku → Okno → zde zaškrtneme →Vložit → v něm vybereme kategorii → Formulář → klikneme na první ikonu s názvem Formulář. DW vloží do kódu značku na vybrané místo a v Návrhu jej vyznačí červenou přerušovanou čarou (pokud se čára nezobrazí, zatrhneme v panelu → Dokumenty → Vizuální pomůcky → Neviditelné elementy). → Otevřeme z nabídkového řádku → Okno → zatrhneme nabídku Vlastnosti a v tomto panelu klepneme na ikonu složky vedle pole Akce. V zobrazeném dialogu najdeme v lekci 08 soubor zpracovani_formulare.html → OK.

Pole akce uvádí cílovou stánku, která se zobrazí po potvrzení formuláře, v našem případě je akcí pouze načtení děkující stránky. → Soubor → Uložit. VKLÁDÁNÍ TEXTOVÝCH PRVKŮ

98 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Textové prvky jsou základní formulářové prvky, používají značku ,sbírají data pomocí krátkých frází:

- textová pole

- textová pole Spry - textové oblasti Pro umožnění správného čtení jednotlivých formulářových prvků musíme nastavit v DW volbu, která nám zajistí výstupní kód formuláře ve správném formátu. Zvolíme z nabídkového řádku →Upravit → Předvolby → v zobrazeném dialogu zvolíme Kategorii Usnadnění přístupu a v ní zatrhneme pole Objekty formuláře →OK.

34. lekce

OVLÁDACÍ PRVKY SPRY TEXTOVÉ POLE SPRY

DW obsahuje také Spry objekty pro formuláře, které používají Ajax. Všechny ovládací prvky Spry kombinují formuláře s JavaScriptem, to umožňuje validaci (ověření)vyplněných formulářových polí, tj. , zda do formulářového prvku byla vložena odpovídající data, nebo zda uživatel nezapomněl některé pole vyplnit. Kurzor umístíme za textové pole Jméno, stiskem kláves Shift + Enter zalomíme řádek. → V panelu Vložit v kategorii Formulář klepneme na ikonu Ověření textového pole Spry. V otevřeném dialogu do pole Identifikátor napíšeme email, do pole Popis napíšeme E-mail:, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části poloha vybereme volbu Před položkou formuláře → OK. → Soubor → Uložit. Pokud nás bude DW informovat o připojení externího JavaScriptu, odsouhlasíme jej → OK.

99 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Pokud je to potřeba otevřeme panel Vlastnosti z nabídkového řádku Okno,.v něm budeme upravovat ovládací prvek Spry. → Z roletky Typ vybereme volbu Emailová adresa, zatrhneme Ověřit při Onblur a volbu Vyžadováno, což znamená, že před odesláním formuláře jej musí uživatel vyplnit.

SADA POLÍ. První dvě textová pole uspořádáme do bloku s rámečkem s názvem (legenda) → klepneme vpravo od pole E-mail a stiskneme Enter,tím vytvoříme nový řádek. → Vybereme popisky Jméno a E-mail a textová pole. → V panelu Vložit klepneme na ikonu Sada polí → v zobrazeném dialogu do pole Popisy napíšeme Vaše kontaktní informace → OK → Soubor → Uložit. Sada polí se projeví až při živém zobrazení.

OVĚŘENÍ TEXTOVÉHO POLE → Klepneme za přidanou sadu polí, ale stále do červeného rámečku kolem formuláře→ Enter. → V panelu Vložit klepneme na ikonu Ověření textového pole Spry. V otevřeném dialogu do pole Identifikátor napíšeme uzivjmeno, do pole Popis napíšeme Uživ.jméno, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části poloha vybereme volbu Před položkou formuláře → OK. → V panelu vlastnosti zatrhneme volbu Ověřit při OnBlur, volbu Vyžadováno a v poli Min. Počet znaků napíšeme 6 → Soubor → Uložit. 100 Integrovaná střední škola polygrafická, Brno, Šmahova 110

POLE PRO HESLO Kurzor umístíme za pole Uživ. Jméno, zalomíme řádek Shift + Enter, → v panelu Vložit klepneme na ikonu Heslo ověření sady Spry. V zobrazeném dialogu do pole Identifikátor napíšeme heslo, do pole Popis napíšeme Heslo, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části poloha vybereme volbu Před položkou formuláře → OK. → V panelu vlastnosti zatrhneme volbu Ověřit při OnBlur, volbu Vyžadováno, v poli Min. Počet písmen napíšeme 8, v poli Min. počet čísel napíšeme 2. Posuneme kurzor za pole pro heslo, zalomím řádek Shift + Enter, v panelu Vložit klepneme na ikonu Potvrzení ověření sady Spry. V zobrazeném dialogu do pole Identifikátor napíšeme potvrdheslo, do pole Popis napíšeme Zopakujte heslo, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části poloha vybereme volbu Před položkou formuláře → OK. V panelu Vlastnosti zatrhneme volbu Vyžadováno, v roletce Ověřit platnost podle vybereme volbu heslo ve formuláři form 1., zatrhneme volbu Ověřit OnBlur. Posuneme kurzor za pole pro potvrzení hesla a stiskem klávesy Enter vytvoříme nový odstavec.

Nyní se vrátíme před pole pro uživatelské jméno, pokud je to třeba, vytvoříme stiskem Enter prázdný odstavec a do něho napíšeme text: „Ke vstupu do online přehledu vašich rozpisů a plánů cest si prosím vytvořte účet zadáním uživatelského jména a hesla. Uživ. jméno musí obsahovat alespoň 6 znaků a heslo alespoň 8 znaků obsahujících minimálně 2 čísla.“ Napsaný text a všechny tři pole vybereme, v panelu Vložit klepneme na ikonu Sada polí, v zobrazeném dialogu napíšeme Online nástroje → OK → Soubor → Uložit, tím jsme instrukce i tři pole uzavřeli do sady polí. 101 Integrovaná střední škola polygrafická, Brno, Šmahova 110

35. lekce

TEXTOVÉ OBLASTI TEXTOVÁ OBLAST

Tyto oblasti umožňují vložení většího množství textu, včetně zalamování řádků. Pokud vložený text přesáhne fyzický prostor pro textovou oblast, automaticky se zobrazí posuvník. Kurzor umístíme za poslední sadu polí, ale do formuláře, v panelu Vložit klepneme na ikonu Sada polí a v zobrazeném dialogu napíšeme Vaše cesta →OK. V panelu Vložit klepneme na ikonu Textová oblast. V zobrazeném dialogu do pole Identifikátor napíšeme planovane, do pole Popis napíšeme Cestovní plány, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části poloha vybereme volbu Před položkou formuláře → OK.

Textová oblast se zobrazí hned za jejím popisem, klepneme za popis a stiskneme Shift + Enter, tím zalomíme řádek. Klepneme dovnitř prázdné oblasti a v panelu Vlastnosti do pole počáteční hodnota napíšeme

102 Integrovaná střední škola polygrafická, Brno, Šmahova 110

text: „Stručně popište, kam byste chtěli jet a na jak dlouho.“ → Soubor → Uložit.

PŘEPÍNAČE Klepneme za textovou oblast, ale do sady polí, stiskem Enter se posuneme na další řádek a napíšeme text: „Kolik vás bude cestovat?“, stiskneme Enter. → v panelu Vložit klepneme na ikonu Přepínač ověření sady Spry. → V zobrazeném dialogu přidáme tlačítkem + tři nové přepínače, přidáme popisky a hodnoty těchto tlačítek.Hodnoty píšeme bez diakritiky.V části Rozvrhnout s použitím vyberte volbu Zalomení řádku → OK.

→ Soubor → Uložit.

ZAŠKRTÁVACÍ POLE Umožňují zvolit více možností současně. Klepneme za skupinu přepínačů, stiskem Enter vytvoříme prázdný řádek a napíšeme do něho „Jaké služby chcete, abychom zařídili?“→ Enter. → V panelu Vložit klepneme na ikonu Skupina zaškrtávacích polí , v dialogu přidáme tlačítkem + jedno zaškrtávací pole , v poli popis přepíšeme zaškrtávací pole na Výlety, Doprava a Hotely, do pole Hodnota postejné, ale malými písmeny a bez diakritiky→ OK → Soubor → Uložit.

TVORBA SEZNAMŮ Jedná e o roletkové seznamy, které umožňují více voleb, podobně jako sada zaškrtávacích polí. 103 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Kurzor vložíme za popisek posledního zaškrtávajícího pole,Entrem vytvoříme prázdný řádek a do něj napíšeme „Kdy chcete cesto vat?“ → V panelu Vložit klepneme na ikonu Seznam/Nabídka.

V zobrazeném dialogu napíšeme do pole Identifikátor cas, pole popis necháme prázdné, v části styl vybereme volbu Žádný tag popisu → OK. → Otevřeme panel Vlastnosti a v něm klepneme na tlačítko Hodnoty seznamu. V zobrazeném dialogu ve sloupci Popis napíšeme Ihned → TAB →do sloupce Hodnota napíšeme ihned→ TAB → V příštích dvou měsících →dvamesice →TAB → Někdy letos → TAB →letos → OK → V panelu Vlastnosti vybereme v nabídce Na začátku vybrané volbu Ihned a jako Typ zvolíme Nabídka. To nám neumožňuje vybrat více položek najednou. →Soubor →Uložit.

POTVRZOVACÍ TLAČÍTKO Toto tlačítko spouští akci navázanou na odeslání formuláře. Klepneme kamkoliv do sady polí, v selektoru značek vybereme značku

a posuneme se kurzorovou šipkou doprava mimo vybranou sadu polí → Enter → v panelu Vlastnosti klepneme na ikonu Tlačítko a v zobrazeném dialogu napíšeme do pole Identifikátor odeslat, v části Styl vybereme volbu žádný tag popisu → OK. V panelu Vlastnosti zatrhneme Akci Odeslat formulář → Soubor → Uložit.

104 Integrovaná střední škola polygrafická, Brno, Šmahova 110

TESTOVÁ ČÁST

105 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Test č. 1

Úvod do Adobe DW CS 4 Úkoly: 1. Nastavte Layout nově vytvářené www stránky na 2 pevné sloupce, záhlaví a zápatí. 2. Zobrazení dokumentu nastavte tak, aby bylo vidět současně zdrojový kód www stránky i její náhled. 3. Změňte nadpisy h1 v záhlaví (Prohlédněte si s námi Umbrii) i v hlavním sloupci („ Vy se bavte. My obstaráme vše ostatní.). 4. Z textového dokumentu DW/lekce 1/dovolená.doc zkopírujte text pod nadpis v hlavním sloupci. 5. Do levého sloupce místo textu vložte obrázek z DW/obrazky/zahrada.jpg. 6. Stránku uložte jako Umbria- Vaše příjmení do Lekce 01.

ROZVRŽENÍ STRÁNKY (LAYOUT) Adobe Dreamweaver CS4 nabízí k použití 32 různých rozvržení, profesionálně vytvořených pomocí stylů CSS, což nám usnadňuje práci, protože byly testovány ve všech hlavních prohlížečích a vyhovují webovým standardům. Při tvorbě většího počtu webových stránek pro jednu osobu či událost, by měly mít všechny stránky stejný layout, aby v nich dokázal návštěvník dobře a rychle orientovat. - zvolíme ze Souboru→ Nový, v dialogovém okně Nový dokument v prvním sloupci vybereme „Prázdná stránka, ve sloupci Typ stránky vybereme HTML, ten se běžně používá při tvorbě webových stránek.

Ve třetím sloupci máme na výběr z různých typů layoutů 1 až 3 sloupcové, s pevnou nebo s proměnnou šířkou založenou na procentech nebo jednotce em, s nebo bez záhlaví či zápatí - ve sloupci „Rozvržení“ zvolíme 2 sloupce pevné, postranní sloupec vlevo, záhlaví, zápatí. V posledním sloupci dole volíme „Typ dokumentu“ XHTML 1.0 Transitional, což je přechodový jazyk mezi HTML a novějším XHTML, 106 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Nová webová stránka se zobrazí jako dokument s výplňovým textem, ten tam pro lepší orientaci a představivost vložili tvůrci layoutu. Do tohoto okna budeme vkládat svůj vlastní obsah a upravovat vzhled stránky

Nově vytvořenou stánku je vhodné ihned uložit→Soubor→Uložit, zobrazí se dialog uložit jako , najdeme složku C→Dreamweaver kurz→soubor→lekce→lekce 01 107 Integrovaná střední škola polygrafická, Brno, Šmahova 110

do pole Název napíšeme Umbria-příjmení.html a→ uložit.

ZOBRAZENÍ DOKUMENTU DW nám nabízí 4 základní možnosti zobrazení: - Kód- zobrazuje se pouze zdrojový kód stránky - Návrh- zobrazuje se pouze webová stránka tak, jak bude vypadat. vytvářené stránky. - Rozdělit- kombinuje jak zdrojový kód, tak i návrh, tvůrce www stránky tak má možnost kontroly - Živé zobrazení- vykresluje stránku v prohlížeči Dreamweaveru První tři zobrazení jsou úzce propojená, jakákoliv provedená změna se zobrazí ve všech pohledech. ZMĚNA TITULKU STRÁNKY Titulek webové stránky se zobrazuje v titulkovém panelu okna prohlížeče a je klíčovým prvkem používaným vyhledavači k indexování webových stránek, proto je nutné, abychom změnili výchozí název dokumentu „Bez názvu“ (untitled). V nástrojové liště dokumentu v poli „Název“ vyberte Dokument bez názvu a napište Prohlídka měst v Umbrii →enter

ZMĚNA NADPISŮ Výplňové texty a nadpisy nám pomáhají vizuálně vyplnit layout tak, aby vypadal podobně jako s konečným obsahem umístěným do stránky, můžeme je jednoduše změnit. - Vyberte výplňový text Záhlaví (poklepáním myší), poté napište text „Prohlédněte si s námi Umbrii“. Dvouklikem vyznačíme slovo, trojklikem celý odstavec nebo nadpis, tažením myší při stisknutém levém tlačítku libovolný text. Stejným způsobem přepíšeme nadpis v pravém hlavním odstavci „Hlavní obsah“na text „ Vy se bavte. My obstaráme vše ostatní.“všimneme si, že ve zdrojovém kódu jsme pouze nahradili text, 108 Integrovaná střední škola polygrafická, Brno, Šmahova 110

ale formátovací značka,párový tag

,která označuje nadpis, zůstala u obou nadpisů zachována. VKLÁDÁNÍ TEXTU DW poskytuje možnost vkládání textu kopírovaného z jiných zdrojů (MS Office, OpenOffice, poznámkový blok, atd) a ponechává tolik z původního formátování, kolik požadujeme. V praxi si totiž zákazník dodává svoje texty po obsahové a jazykové korektuře a tvůrce webových stránek je pouze vkládá do dohodnutého layoutu. - vybereme výplňový text v pravém sloupci bez nadpisu až po zápatí, ale bez něj. - klávesou Delete jej vymažeme. - Z nabídkového řádku otevřeme→Soubor→otevřít→místní disk C→DW kurz→obsah→ →lekce→lekce 01→dovolená.rtf. C (celý text vybereme a zkopírujeme do schránky (CTRL+C). - V DW umístíme kurzor pod nadpis v pravém sloupci a vložíme sem zkopírovaný text (CTRL+V). Celý text se okamžitě zformátuje jako odstavce se značkou

( jedná se o párový tag). - Ukazatelem myši vybereme výplňový text Zápatí a přepíšeme jej „Prohlídka měst v Umbrii“ - zalomíme řádek →Shift+Enter. Poté napíšeme text Kontaktujte nás Ve zdrojovém kódu byl tento povel zapsán jako nepárový tag
. VKLÁDÁNÍ OBRÁZKŮ Vkládání obrázků je velmi přímočaré, podobně jako text, které také dodává zadavatel stránky.Jakmile umístíme obrázek do stránky, můžeme jeho vlastnosti upravovat buď pomocí panelů Styly CSS nebo Vlastnosti. - vybereme veškerý obsah levého sloupce (sidebar 1) včetně nadpisu a vymažeme jej (Delete) - V selektoru značek ( lišta pod dokumentovým oknem)vybereme značku

a vymažeme ji. Tvůrce layoutu do tohoto sloupce totiž vložil nadpis, a pokud ho nebudeme potřebovat, musíme odstranit i značku pro nadpis. - Z nabídky Vložit vybereme →Obraz a dialogovém okně Vyberte zdroj obrazu označíme souborový systém, v oblasti hledání vybereme →místní disk C→DW kurz →obsah→lekce →obrázky→ Zahrada.jpg →OK .V dialogovém okně Atributy tagu obrazu pro usnadnění 109 Integrovaná střední škola polygrafická, Brno, Šmahova 110

přístupu do kolonky Alternativní text napíšeme Zahrada→OK. Tento text se bude zobrazovat v případě, že se obrázek nezobrazí, např. některá mobilní zařízení, a pomůže pochopit obsah stránky.

- ukazatel myši vložíme na začátek odstavce pravého sloupce (hlavní obsah, mainContent), před větu Přijeďte si… a stejným způsobem jako v předešlém případě vložíme obrázek „Italské horské město“ se stejným alternativním textem. - Z nabídkového řádku →Okno otevřeme panel→Vlastnosti. Z roletky Třída vybereme fltrt nebo fltlft (float right nebo left, zarovnej vpravo, vlevo).Ponecháme obrázek vpravo a text jej bude obtékat vlevo.→Uložit. Stránka nyní obsahuje jak text, tak i obrázky vložené do layoutu CSS, stránka vypadá dobře a se bude zobrazovat ve všech prohlížečích.

110 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Test č. 2

Úpravy pomocí kaskádových stylů Úkoly: 1. Otevřete vámi vytvořenou stránku Umbria-příjmení.html z lekce 01 2. Proveďte změnu barvy pozadí těla stránky (body) na bílou (# FFF) 3. Do záhlaví vložte pomocí nového pravidla CSS na pozadí obrázek z DW/obrazky/záhlavíoblaka.jpg. 4. Změňte v textu záhlaví font písma na Georgia a barvu písma na bílou. 5. V hlavním sloupci změňte velikost písma na 80%. 6. V hlavním sloupci změňte ve větě:“Po dva týdny si budete …“ řez písma na kurzívu a barvu písma na modrou (# 00F). 7. Stránku uložte jako Umbria-příjmení.html do lekce 02.

VYBÍRÁNÍ A ÚPRAVA STYLŮ CSS Moderní webové stránky používají ke stylování a tvorbě layoutů kaskádové styly (CSS). Webová stránka je složená z HTML,CSS a JavaScriptu pomocí kterých ji budujeme. HTML je obsah- materiál vkládáme na webstránku v okně Návrh. CSS zajišťuje vzhled a rozvržení stránky, tj. kde se jednotlivé elementy umístí,použití barev,pozadí,… JavaScript přidává funkci interaktivity.

111 Integrovaná střední škola polygrafická, Brno, Šmahova 110

ZMĚNA BARVY POZADÍ K úpravě vlastností pomocí CSS můžeme použít jakékoliv značky HTML, např. (tělo). - otevřeme panel CSS styly →Okno →CSS styly→Vše.rozbalíme<styly> pomocí tlačítky + , abychom nějaké styly viděli, musíme mít otevřený dokument v dokumentovém okně. Nyní najdeme pravidla stylů v hlavičce dokumentu, pomocí ostrých závorek <styly> DW ukazuje, že jde o vnitřní(interní) pravidla. - vybereme selektor body klepneme na ikonu upravit styl ikona tužky na panelu vpravo dole. V dialogovém okně Definice pravidla CSS pro body vybereme kategorii Pozadí a po rozbalení tlačítka s paletou barev vybereme pomocí kapátka bílou barvu. DW automaticky vloží do zdrojového kódu hexadecimální hodnotu bílé barvy #FFF do pole Background color (barva pozadí) → OK.

Stisknutím F4 skryjeme všechny panely a získáme náhled přes celou obrazovku, pozadí stránky se změnilo ze šedé na bílou barvu, barvy ostatních pozadí se nezměnily. Pomocí tlačítka F4 můžeme opět obnovit zobrazení panelů. Podobně jako značce můžeme přidělit vlastnosti i jiným elementům.Vlastnosti můžeme 112 Integrovaná střední škola polygrafická, Brno, Šmahova 110

měnit i tak, že v selektoru značek vybereme požadovaný element, např.< div#sidebar 1> (divize), poté pomocí ikony →Upravit styl vyvoláme dialogové okno pro definování pravidla a provedeme požadovanou změnu. stránku uložíme → Soubor→Uložit. VKLÁDÁNÍ GRAFICKÉHO POZADÍ. Zatímco obrázky do popředí se vkládají přímo do stránky, obrázky na pozadí se umísťují pomocí CSS stylů. - Ukazatel myši vložíme do textu v záhlaví „ Prohlédněte si s … “. - V selektoru značek vybereme element (záhlaví), tuto část označujeme element div s identifikátorem #header . V dokumentovém okně se kolem vybraného elementu zobrazí modrá čára. - otevřeme panel styly CSS → Okno →Styly CSS→Současný , tím se přepneme do režimu zobrazujícího vlastnosti současně vybraného elementu. - Ve spodní části okna vybereme ikonu → Upravit styl a v dialogovém okně „ Definice pravidla pro .twoColFixLtHdr #header h vybereme kategorii Pozadí → Procházet vedle Backgroundimage. - V zobrazeném dialogu najdeme v Oblasti hledání →místní disk C→DW kurz →soubory →lekce →obrázky →záhlaví-oblaka.jpg →OK.

113 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Z roletky Background- repeat vybereme no repeat→OK→Soubor →Uložit .

ÚPRAVA TEXTŮ,PÍSMA A BAREV Kaskádové styly nám umožňují kromě změny vzhledu elementu také změnu vzhledu pouze pro značku na určitém místě ve stránce. - Umístíme kurzor myši do textu nadpisu v záhlaví. - V selektoru značek vybereme tag

- Vpanelu Styly CSS → současný →Upravit styl. V dialogovém okně Definice pravidla pro … vybereme Kategorii Typ a v roletce Font-family (písmo) vybereme skupinu Georgia, Times … Výběr fontu se provádí po skupinách, protože ne na všech počítačích musí být nainstalované stejné fonty písma.

114 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- na ikoně Color (barva) zvolíme kapátkem bílou barvu.→ OK →Soubor →Uložit .

ZMĚNA VELIKOSTI TEXTU Kromě změny typu písma a barvy můžeme také změnit velikost textu. - Ukazatel myši umístíme do odstavce textu hlavního obsahu (mainContent). - V selektoru značek vybereme - V panelu Styly CSS→Vše v části Všechna pravidla vybereme selektor .twoColFixLtHdr#mainContent,klepneme na ikonu →Upravit styl. V dialogovém okně Definice pravidla CSS pro .twoColFixLtHdr#mainContent vybereme Kategorii Typ, velikost textu je nastavena na 100%.V poli Font-size napíšeme 90 a jako jednotku zvolíme % ze seznamu voleb OK→Soubor→Uložit. Toto je jeden ze způsobů, jak můžeme změnit velikost textu. POUŽÍVÁNÍ PANELU VLASTNOSTI Panel otevřeme z nabídkového řádku →Okno→ Vlastnosti , nachází se v dolní části, pod selektorem značek. Volby v panelu se mění podle aktuálního výběru, pokud vybereme obrázek je v panelu možno upravovat šířku či výšku obrázku a odkazy na nástroje, pomocí nichž jej můžeme upravovat. Pokud je vybrán text, je panel rozdělen do dvou částí 115 Integrovaná střední škola polygrafická, Brno, Šmahova 110

HTML

- v něm můžeme upravovat vlastnosti pomocí zdrojového kódu.

CSS - v nich můžeme upravovat vlastnosti pomocí kaskádových stylů. - Otevřeme panel Vlastnosti z nabídkového řádku →Okno→ Vlastnosti . - V okně dokumentu v hlavním obsahu označte větu Po dva týdnysi budete… . - vybereme tlačítko HTML, klepneme na tlačítko I , tím změníme text na zvýrazněný, některé prohlížeče jej zobrazují kurzívou. Ve zdrojovém kódu i v selektoru značek je zapsán tag <em> - V panelu vlastnosti přepneme na tlačítko CSS, - Z nabídky Odkazované vybereme a Upravit pravidlo

V otevřeném dialogovém okně vybereme Typ selektoru z roletky Složený prvek … a pomocí tlačítka méně specifické jako Název selektoru vybereme #mainContent p em → OK .

V okně Definice pravidla vybereme kategorii Typ a po otevření palety barev vybereme modrou →OK→ Uložit .

116 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Pravidla stylů nyní obsahují nové pravidlo, které můžeme použít na jakýkoliv další text uvnitř elementu div#mainContent , když vybraný text zvýrazníne kurzivou, automaticky na něj bude použito obarvení dle definovaného pravidla. Tímto jsme vytvořili první webovou stránku.Na konci práce s novou stránkou si ji vždy prohlídneme v prohlížeči, v praxi máme nainstalováno více prohlížečů, ve všech bychom měli zkontrolovat, jak se stránka zobrazuje. → Soubor →náhled v prohlížeči.

Test č. 3

Externí šablona CSS Úkoly: 1. Otevřete soubor DW/lekce 02/onas-start a uložte jej jako onas-Příjmení.html do lekce 02. 2. Připojte jako Odkaz externí šablonu kaskádových stylů z DW/lekce 02/mojestyly.css. 3. Textu v hlavním sloupci „Seznamte se s našimi zaměstnanci“ přidělte pomocí nového pravidla font Georgia a modrou barvu # 06F. 4. Odstavec textu v levém sloupci pod obrázkem zmenšete na 80% velikost a přidělte mu font-style: Italic. 5. Seřaďte pravidla CSS tak, aby byly pohromadě pravidla pro stejnou oblast stánky.

PROPOJENÍ EXTERNÍ ŠABLONY STYLŮ CSS V ADOBE DREAMWEAVER CS4

- v panelu soubory otevřete DW kurz→ lekce 02→ onasstart.html (na stránce je vložen základní obsah, tj. obrázky, odstavce textu, nadpisy, ale chybí layout a styly. 117 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- uložte stránku jako onas-příjmení. html do DW kurz→ lekce 02 - stránku onasstart.html zavřete beze změny - z nabídkového řádku otevřete Okno→styly CSS→vše→připojit seznam stylů (ikona řetězu) - v dialogovém okně „Připojit externí šablonu stylů“→ Procházet→vyberte DW kurz→ lekce 02→mojestyly.css v okně Média vyberte obrazovku (screen). Moderní CSS styly umožňují použití stylů v závislosti na typu média. V přepínači Přidat jako vyberte Odkaz →OK

Vytvářená stránka se změnila, byl použit layout z 1.lekce,stránka je rozdělena na 2 pevné odstavce, obrázek záhlaví je použit i v zápatí - →Soubor→Uložit Tímto způsobem jsme propojili tuto stránku s mojestyly.css , ve zdrojovém kódu v hlavičce stránky na řádku 7: .

VYTVOŘENÍ NOVÉHO PRAVIDLA CSS Pravidlo se skládá ze 2 částí: Selektor

např. h1

Deklarace vlastností např. color: red; fontsize:36 px; v DW se vytváří styly v rozhraní s roletkami a volbami, Html kód za nás zapisuje DW, pravidla vytváříme pro 2 typy selektorů: 3. Selektor následníka 4. Vlastní selektor (třída) 118 Integrovaná střední škola polygrafická, Brno, Šmahova 110

1. DEFINICE STYLŮ PRO SELEKTOR NÁSLEDNÍKA. Takto definovaná pravidla pomocí speciálních značek se automaticky ihned použijí, kdykoliv takovou značku (tag) na stránce použijeme. - v nabídkovém řádku otevřeme →Okno→Styly CSS→vše, rozbalíme + mojestyly.css(screen) kurzor vložíme do textu „Seznamte se s našimi zaměstnanci“ a v selektoru tagů vybereme

DW vloží do pole Název selektoru nejdříve takový selektor, který se váže k aktuální pozici kurzoru v textu. - vybereme →nové pravidlo CSS (ikona + v pravé dolní části panelu styly CSS) - V dialogové okně Nové pravidlo CSS klikneme 2x na méně specifické, tím se vytvoří nový selektor #mainContent h1, to bude selektor následníka →OK - symbol # před názvem selektoru znamená, že jde o identifikátor a definované pravidlo ovlivní pouze ty značky

,které jsou vnořeny (jsou následníky) identifikátoru #mainContent

- v dialogovém okně „Definice pravidla CSS pro #mainContent h1“ vybereme v Kategorii Typ, v roletce Font-family zvolíme Georgia, Times New Roman,… a jako Color (barva) označíme štětečkem modrou barvu hexadecimální č.#06F →OK. Pokud potřebujeme změnit toto pravidlo, můžeme to provést v panelu →Styly CSS→Upravit styl. Tímto způsobem jsme změnili typ písma a barvu textu pro značku

uvnitř elementu

119 Integrovaná střední škola polygrafická, Brno, Šmahova 110

s identifikátorem # mainContent. Jakmile do tohoto elementu vložíme novou značku

, bude na text v této značce použito stejné pravidlo.Adobe DW CS4 rozděluje vlastnosti CSS do 8 kategorií:Typ,Pozadí,Blok,Rámeček - umístíme kurzor do textu „Výhled z našich kanceláří v New Yorku“, v selektoru značek vybereme odstavec

v panelu →Styly CSS→Nové pravidlo →ubereme specifikaci až na #sidebar1 p→OK

V dialogovém okně „ Definice pravidla CSS pro # sidebar1 p v mojestyly“ vybereme Kategorii Typ,v poli Font-size napíšeme 80 a v roletce vybereme jednotky % a v roletce Font.style vybereme Italic !! Jiný způsob změny font-style je z panelu Vlastnosti→přepinač I (kurzíva), používá se pro vložení významového důrazu, DW vloží párovou značku <em> text !- v Kategorii Rámeček zrušíme v poli Margin (vnější okraj) stejné pro všechny a v poli Top napíšeme 0 →OK→soubor → uložit vše

120 Integrovaná střední škola polygrafická, Brno, Šmahova 110

ZMĚNA POŘADÍ VLOŽENÝCH PRAVIDEL Pro snadnější hledání jednotlivých pravidel v šabloně stylů je výhodné je po vytvoření přesunout tak, jak to odpovídá jejich důležitost, nebo sdružovat více podobných pravidel, máme však možnost je přesouvat do jiného umístění. - otevřeme panel Styly CSS→Vše→rozbalit všechna pravidla + a myší přetáhneme # mainContenz h1 do pozice pod .twoColFixLtHdr #mainContent - myší přetáhneme #sidebar1 p do pozice pod .twoColFixLtHdr #sidebar1 - Soubor,uložit vše ,tím uložíme provedené změny jak souboru HTML, tak i v souboru CSS.

Test č. 4

Nastavení pravidla pro vlastní třídu Úkoly: 1. Otevřete z DW/lekce 02/onas-příjmení.html. 2. Vytvořte nové pravidlo pro třídu s názvem Jméno a přidělte mu pravidlo pro fontvariant: small-caps (kapitálky). 3. Pomocí nově vytvořené třídy zformátujte všechna křestní jména osob v hlavním sloupci kapitálkami. 4. Otevřete šablonu mojestyly z DW/lekce 02, přejmenujte ji tisk-Příjmení.css a připojte ji k vytvořené stránce. 5. Z připojené tiskové šablony vymažte všechny styly kromě těch se selektory #header h1 a footer. 6. Změňte v tiskové šabloně barvu nadpisu h1 v záhlaví na šedou #CCC. 7. Upravte styl pro zápatí tak, aby bylo zápatí při tisku skryto ( v kategorii Blok zvolte Display: none). Soubor uložte jako onas-Příjmení.html 2. NASTAVENÍ VLASTNÍCH TŘÍD Na rozdíl od selektoru následníka, který se pro zadaný tag (značku) a identifikátor používá automaticky, se pravidlo nastavené pro třídu a jméno selektoru používá pouze tam, kde jej 121 Integrovaná střední škola polygrafická, Brno, Šmahova 110

potřebujeme. - v panelu Styly CSS →Nové pravidlo CSS - v dialogovém okně „Nové pravidlo CSS“ vybereme Typ selektoru v roletce Třída, v poli Název selektoru napíšeme.jméno.V okně Definice pravidla nastavíme mojestyly.cz→OK

- v dialogovém okně „Definice pravidla CSS pro .jméno v mojestyly“ zvolíme Kategorii Typ, v roletce Font-variant vybereme small-caps.(kapitálky)→OK→soubor→uložit vše POUŽITÍ STYLŮ Jednou z možností, jak použít styly na značce je využít panel Vlastnosti - v pravém odstavci vybereme tažením myší slovo Elaine, tím se zvýrazní jméno a oblast nad slovem - otevřeme z nabídkového řádku →Okno →Vlastnosti, v levé části zkontrolujeme, zda máme stisknuté tlačítko Css. Seznam odkazované v panelu Vlastnosti zobrazuje všechny třídy CSS, které jsou dostupné v dokumentu. Vybraný text se formátuje kapitálkami a indikátor v selektoru značek obsahuje název třídy: <span.jméno>.Třída se přidala do textu pomocí tagu (značky) <span> Pro dokončení stránky zopakujte postup s výběrem jména každé osoby na vytvářené stránce a použijte opět třídu .jméno ., prohlédneme si stránku v živém zobrazení nebo v prohlížeči, potom zvolíme →soubor→uložit.

122 Integrovaná střední škola polygrafická, Brno, Šmahova 110

VYTVOŘENÍ ŠABLONY STYLŮ PRO TISK Soubory CSS mohou také poskytovat styly pro jiná média, např. pro tisk, vytvořené mojestyly.css byly navrženy pro zobrazení stránky na obrazovce PC. Tiskové styly často vylaďují barevnou kombinaci, aby se stránka lépe vytiskla, skrývají nepotřebné části stránky, vylaďují velikosti či layout, aby více odpovídal použitému médiu, tedy papíru. Jedné stránce můžeme přiřadit více šablon, jakmile se stránka vykreslí pro tisk, bude tiskové zařízení hledat tiskovou šablonu stylů, a pravidla v ní se vezmou v potaz. Pokud ji nenajde, tiskárna rozliší mezi pravidly pro obrazovku a pravidly pro všechny typy médií. Výchozím zobrazovacím médiem v DW je obrazovka, umožňuje však vykreslení i v jiných stylech. - z nabídky → Zobrazení →Panely nástrojů→Styl vykreslení, panel se objeví vlevo nad dokumentovým oknem.

PŘEVEDENÍ STÁVAJÍCÍ ŠABLONY STYLŮ NA TISKOVOU Nejvýhodnější je nevytvářet zcela novou tiskovou šablonu, ale vytvořit ji převedením již vytvořené šablony (mojestyly.css), přejmenováním šablony, úpravou stávajících pravidela přidáním nových pravidel. - z nabídky otevřeme → Soubor → Otevřít →DW kurz →Lekce → Lekce 02 → mojestyly.css . - →soubor →Uložit jako napíšeme příjmení-tisk.css →Uložit. - Otevřeme panel → Styly CSS → Připojit seznam stylů. Z nabídky Procházet vybereme →příjmení-tisk.css →,.přidat jako odkaz a v roletce média vybereme tisk → OK .

123 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Tím se připojí nová položka – příjmení-tisk.css k šabloně mojestyly.css, a my můžeme některá pravidla upravovat nebo zcela odstranit. - zavřeme soubor příjmení-tisk.css beze změny a dokument příjmení-onas.html→ soubor →Uložit. SKRYTÍ NEPOTŘEBNÝCH ČÁSTÍ STRÁNKY - otevřeme v panelu nástrojů →Styl vykreslení → Vykreslit zobrazení při tisku - ukazatel myši vložíme do textu zápatí, v panelu Styly CSS → zvolte Vše a rozbalíme + , vybereme selektor twoColFixLtHdr #footer →Upravit styl . V dialogovém okně „Definice pravidla …“ zvolíme Blok, z roletky Display → none (žádné) → OK. Tím se zápatí stránky skryje, pokud budeme stránku prohlížet v zobrazení pro tisk.Obsahuje totiž hypertextový odkaz, který slouží pro přepínání mezi stránkami v prohlížeči, což je při tisku nepoužitelné ZAJIŠTĚNÍ SPRÁVNÝCH BAREV PRO TISK Je potřeba zajistit, aby byl text nadpisu

v záhlaví vidět, i když se nebudou tisknout obrázky v záhlaví, protože můžeme tisknout v některých případech stránku bez obrázků na pozadí (vkládali jsme ja pomocí příkazu background-image. Proto musíme změnit barvu nadpisu v záhlaví z bílé na světle šedou. - v panelu Styly CSS označíme Vše a vybereme „.twoColFixLtHdr #header h1“ - → Upravit styl , v zobrazeném dialogu vybereme kategorii Typ a v ní color a pomocí kapátka zvolíme světlešedou barvu # CCC.→OK .

124 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Text „Cestovní kancelář Tam a zpět“ bude vidět i v případě tisku, a to ať bude mít uživatel nastavenou volbu tisk obrázků na pozadí, nebo ne, protože se nadpis vytiskne světle šedě na tmavém pozadí (nebo na žádném). - → Soubor → Uložit vše. ODSTRANĚNÍ NECHTĚNÝCH STYLŮ Nyní je v připojené šabloně tisk-ze.css mnoho stylů shodných s šablonou mojestyly-ze.css, abychom snížili velikost souboru, je nutné pouze ta pravidla, která jsou nová nebo změněná oproti těm v mojestyly.css. - v panelu Styly CSS vybereme → Vše → Tisk- ze.css označíme myší např. #sidebar 1p a potom jej pomocí ikony odpadkového koše vymažeme. Jiný způsob vymazání nepotřebných pravidel: - → Soubor →Otevřít → tisk-ze.css a zde vybereme myší příslušné pravidlo a ručně jej smažeme (Delete). - Tímto způsobem vybereme a smažeme všechny styly mimo těch se selektory „ twoColFixLtHdr # header h1“ a „twoColFixLtHdr # footer“, jakmile vymazání dokončíme, zbudou nám v šabloně pouze tato dvě pravidla. - → Soubor →Uložit vše. Potom postup uložení opět zopakujeme. Tím je tisková šablona připravena k použití, ke zjištění rozdílů ve formátování na obrazovce a při tisku použijeme panel nástrojů Styl vykreslování. Tiskárna čte obě šablony stylů.

125 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Test č. 5

Úpravy CSS stylů Úkoly: 1. Otevřete z DW/lekce 02/onas-příjmení.html. 2. Upravte pravidlo CSS stylů pro Body, pozadí změňte na růžové 3. Vložte do záhlaví obrázek oblaka.jpg (grafické pozadí) 4. Do zápatí vložte stejný obrázek jako je v záhlaví

VYBÍRÁNÍ A ÚPRAVA STYLŮ CSS (kaskádové styly).

Moderní webové stránky používají ke stylování a tvorbě layoutů kaskádové styly (CSS). Webová stránka je složená z HTML (zdrojový kód),CSS a JavaScriptu, pomocí kterých ji budujeme. HTML je obsah- materiál vkládáme na vytvářenou webovou stránku v okně Návrh. CSS zajišťuje vzhled a rozvržení stránky, tj. kam se jednotlivé elementy umístí, použití barev textu, tabulek, okrajů, rámečků, pozadí,… JavaScript přidává funkci interaktivity.

ZMĚNA BARVY POZADÍ

K úpravě vlastností pomocí CSS můžeme použít jakékoliv značky HTML, např. (tělo),

(odstavec),

(nadpis), atd. - otevřeme panel CSS styly →Okno →CSS styly→Vše.rozbalíme<styly> pomocí tlačítky + , abychom nějaké styly viděli, musíme mít otevřený dokument v dokumentovém okně. Nyní najdeme pravidla stylů v hlavičce dokumentu, pomocí ostrých závorek <styly> DW ukazuje, že jde o vnitřní(interní) pravidla. - vybereme selektor body klepneme na ikonu upravit styl (ikona tužky na panelu vpravo dole). V dialogovém okně Definice pravidla CSS pro body vybereme kategorii Pozadí a po rozbalení 126 Integrovaná střední škola polygrafická, Brno, Šmahova 110

tlačítka s paletou barev vybereme pomocí kapátka bílou barvu. DW automaticky vloží do zdrojového kódu hexadecimální hodnotu bílé barvy #FFF do pole Background color (barva pozadí) → OK.

Stisknutím F4 skryjeme všechny panely a získáme náhled přes celou obrazovku, pozadí stránky se změnilo ze šedé na bílou barvu, barvy ostatních pozadí se nezměnily.Pomocí tlačítka F4 můžeme opět obnovit zobrazení panelů. Podobně jako značce můžeme přidělit vlastnosti i jiným elementům.Vlastnosti můžeme měnit i tak, že v selektoru značek vybereme požadovaný element, např.< div#sidebar 1> (divize), poté pomocí ikony →Upravit styl vyvoláme dialogové okno pro definování pravidla a provedeme požadovanou změnu. stránku uložíme →Soubor→Uložit.

VKLÁDÁNÍ GRAFICKÉHO POZADÍ.

Zatímco obrázky do popředí se vkládají přímo do stránkypomocí nabídky Vložit, obrázky na pozadí se umísťují pomocí CSS stylů. 127 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Ukazatel myši vložíme do textu v záhlaví „ Prohlédněte si s … “. - V selektoru značek vybereme element (záhlaví), tuto část označujeme element div s identifikátorem #header . V dokumentovém okně se kolem vybraného elementu zobrazí modrá čára. - otevřeme panel styly CSS → Okno →Styly CSS→Současný , tím se přepneme do režimu zobrazujícího vlastnosti současně vybraného elementu (záhlaví). - Ve spodní části okna vybereme ikonu → Upravit styl a v dialogovém okně „ Definice pravidla pro .twoColFixLtHdr #header h“- vybereme kategorii Pozadí → Procházet vedle Backgroundimage. - V zobrazeném dialogu najdeme v Oblasti hledání →místní disk C→DW kurz →soubory →lekce →obrázky →záhlaví-oblaka.jpg →OK. - Z roletky Background- repeat (opakování) vybereme no repeat→OK→Soubor →Uložit .

PRÁCE V ZOBRAZENÍ KÓD, NÁVRH A ROZDĚLENÍ

V nástrojové liště můžeme přepínat mez zobrazením Kód- zobrazuje se pouze zdrojový kód stránky, Návrh, zobrazuje se pouze grafický vzhled stránky a Rozdělení, ve kterém vidíme jak zdrojový kód, tak i grafický návrh. Pokud vybereme lib.text v jednom zobrazení, je vybrán i ve druhém, toho můžeme využívat při kontrole zapisování tagů, který provádí automaticky DW.

128 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Test č. 6

ÚPRAVA TEXTU- PANEL VLASTNOSTI Úkoly: 1. Otevřete z DW/lekce 02/onas-příjmení.html. 2. Změňte v záhlaví font písma na Georgia…, a barvu písma na bílou. 3. V hlavním odstavci změňte velikost písma na 90%. 4. V hlavním obsahu označte větu Po dva týdny si budete… a vyberte kurzivu. 5. Přidejte pravidlo, které text v hl. odstavci napsaný kurzívou obarví modře.

ÚPRAVA TEXTŮ, PÍSMA A BAREV

Kaskádové styly nám umožňují kromě změny vzhledu elementu také změnu vzhledu pouze pro značku na určitém místě ve stránce. - Umístíme kurzor myši do textu nadpisu v záhlaví. - V selektoru značek vybereme tag

- Vpanelu Styly CSS → současný →Upravit styl. V dialogovém okně Definice pravidla pro … vybereme Kategorii Typ a v roletce Font-family (písmo) vybereme skupinu Georgia, Times … Výběr fontu se provádí po skupinách, protože ne na všech počítačích musí být nainstalované stejné fonty písma. - na ikoně Color (barva) zvolíme kapátkem bílou barvu.→ OK →Soubor →Uložit .

129 Integrovaná střední škola polygrafická, Brno, Šmahova 110

ZMĚNA VELIKOSTI TEXTU

Kromě změny typu písma a barvy můžeme také změnit velikost textu. - Ukazatel myši umístíme do odstavce textu hlavního obsahu (mainContent). - V selektoru značek vybereme - V panelu Styly CSS→Vše v části Všechna pravidla vybereme selektor .twoColFixLtHdr#mainContent,klepneme na ikonu →Upravit styl. V dialogovém okně Definice pravidla CSS pro .twoColFixLtHdr#mainContent vybereme Kategorii Typ, velikost textu je nastavena na 100%.V poli Font-size napíšeme 90 a jako jednotku zvolíme % ze seznamu voleb, →OK→Soubor→Uložit. Toto je jeden ze způsobů, jak můžeme změnit velikost textu.

POUŽÍVÁNÍ PANELU VLASTNOSTI

Panel otevřeme z nabídkového řádku →Okno→ Vlastnosti , nachází se v dolní části, pod selektorem značek. Volby v panelu se mění podle aktuálního výběru, pokud vybereme obrázek je v panelu možno upravovat šířku či výšku obrázku a odkazy na nástroje, pomocí nichž jej můžeme upravovat. Pokud je vybrán text, je panel rozdělen do dvou částí HTML

- v něm můžeme upravovat vlastnosti pomocí zdrojového kódu.

CSS - v nich můžeme upravovat vlastnosti pomocí kaskádových stylů. - Otevřeme panel Vlastnosti z nabídkového řádku →Okno→ Vlastnosti . - V okně dokumentu v hlavním obsahu označte větu Po dva týdnysi budete… . - vybereme tlačítko HTML, klepneme na tlačítko I , tím změníme text na zvýrazněný, některé prohlížeče jej zobrazují kurzívou.Ve zdrojovém kódu i v selektoru značek je zapsán tag <em> - V panelu vlastnosti přepneme na tlačítko CSS, - Z nabídky Odkazované vybereme a Upravit pravidlo

130 Integrovaná střední škola polygrafická, Brno, Šmahova 110

V otevřeném dialogovém okně vybereme Typ selektoru z roletky Složený prvek … a pomocí tlačítka méně specifické jako Název selektoru vybereme #mainContent p em → OK .

V okně Definice pravidla… vybereme kategorii Typ a po otevření palety barev vybereme modrou →OK→ Uložit . Pravidla stylů nyní obsahují nové pravidlo, které můžeme použít na jakýkoliv další text uvnitř elementu div#mainContent , když vybraný text zvýrazníme kurzivou, automaticky na něj bude použito obarvení dle definovaného pravidla. Tímto jsme vytvořili svou první webovou stránku.Na konci práce s novou stránkou si ji vždy prohlídneme v prohlížeči, v praxi máme nainstalováno více prohlížečů, ve všech nejpoužívanějších bychom měli zkontrolovat, jak se stránka zobrazuje. - → Soubor →náhled v prohlížeči.- (Mozilla, Explorer, Google Chrome, Opera, …).

131 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Test č. 7

EXTERNÍ ŠABLONA CSS Úkoly: 1. DW kurz→ lekce 02→ onasstart.html. 2. Z lekce 2 připojte externí šablonu „Mojestyly.css“. 3. Změňte v hlavním sloupci v h1 v pravidle CSS velikost textu na 36 px a barvu na modrou. 4. Z lekce 2 připojte externí šablonu tisk.css

PRÁCE S KASKÁDOVÝMI STYLY

Většina stylů CSS je uložena v externí šabloně stylů, potom mohou být všechny vytvářené stránky propojeny s touto šablonou. Tímto způsobem je umožněna jednoduchá změna stylů na všech webových stránkách, propojených s externí šablonou. Navíc to umožňuje vypracovat více externích šablon tím je možno si vybírat různý vzhled pro stejný obsah. Tento způsob práce vede ke specializaci grafiků, někteří se věnují pouze vytváření těchto externích šablon a tvůrci www stránek si mohou kupovat.

PROPOJENÍ EXTERNÍ ŠABLONY STYLŮ CSS V ADOBE DW CS4

132 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- v panelu soubory otevřete DW kurz→ lekce 02→ onasstart.html (na stránce je vložen základní obsah, tj. obrázky, odstavce textu, nadpisy, ale chybí layout a styly. - uložte stránku jako onas-příjmení. html do DW kurz→ lekce 02 - stránku onasstart.html zavřete beze změny - z nabídkového řádku otevřete Okno→styly CSS→vše→připojit seznam stylů (ikona řetězu) - v dialogovém okně „Připojit externí šablonu stylů“→ Procházet→vyberte DW kurz→ lekce 02→mojestyly.css v okně Média vyberte obrazovku (screen). Moderní CSS styly umožňují použití stylů v závislosti na typu média. V přepínači Přidat jako vyberte Odkaz →OK

Vytvářená stránka se změnila, byl použit layout z 1.lekce,stránka je rozdělena na 2 pevné odstavce, obrázek pozadí v záhlaví je použit i v zápatí - Soubor→Uložit vše. Tímto způsobem jsme propojili tuto stránku s mojestyly.css , ve zdrojovém kódu v hlavičce stránky na řádku 7:
133 Integrovaná střední škola polygrafická, Brno, Šmahova 110

/>.

VYTVOŘENÍ NOVÉHO PRAVIDLA CSS

Pravidlo se skládá ze 2 částí: Selektor

např. h1

Deklarace vlastností např. color: red; fontsize:36 px; v DW se vytváří styly v rozhraní s roletkami a volbami, HTML kód za nás zapisuje DW, pravidla vytváříme pro 2 typy selektorů: 5. Selektor následníka 6. Vlastní selektor (třída) 1. DEFINICE STYLŮ PRO SELEKTOR NÁSLEDNÍKA.

Takto definovaná pravidla pomocí speciálních značek se automaticky ihned použijí, kdykoliv takovou značku (tag) na stránce použijeme. - v nabídkovém řádku otevřeme →Okno→Styly CSS→vše, rozbalíme + mojestyly.css(screen) kurzor vložíme do textu „Seznamte se s našimi zaměstnanci“ a v selektoru Značek (tagů) vybereme

. DW vloží do pole Název selektoru nejdříve takový selektor, který se váže k aktuální pozici kurzoru v textu. - vybereme →nové pravidlo CSS (ikona + v pravé dolní části panelu styly CSS) 134 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- V dialogové okně Nové pravidlo CSS klikneme 2x na méně specifické, tím se vytvoří nový selektor #mainContent h1, to bude selektor následníka →OK - symbol # před názvem selektoru znamená, že jde o identifikátor a definované pravidlo ovlivní pouze ty značky

,které jsou vnořeny (jsou následníky) identifikátoru #mainContent

- v dialogovém okně „Definice pravidla CSS pro #mainContent h1“ vybereme v Kategorii Typ, v roletce Font-family zvolíme Georgia, Times New Roman,… a jako Color (barva) označíme štětečkem modrou barvu hexadecimální č.#06F →OK→soubor →Uložit vše. Tímto způsobem uložíme nejen změny ve zdrojovém kódu webové stránky, ale i změny v CSS stylech v souboru mojestyly.css.

135 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Test č. 8

NASTAVENÍ VLASTNÍCH TŘÍD Úkoly 1. Otevřeme DW kurz/lekce03/onas.html. 2. Nastavíme nové pravidlo pro třídu .jméno, font-variant:small caps 3. V hlavním sloupci převedeme křestní jména na small caps. 4. Vytvoříme třídu Profil pro obrázek a oba odstavce textu. 5. Pomocí třídy FLTRT (FLTLFT) nechte obtékat obrázky střídavě zlevy a zprava.

2. NASTAVENÍ VLASTNÍCH TŘÍD

Na rozdíl od selektoru následníka, který se pro zadaný tag (značku) a identifikátor používá automaticky, se pravidlo nastavené pro třídu a jméno selektoru používá pouze tam, kde jej potřebujeme. - v panelu Styly CSS →Nové pravidlo CSS - v dialogovém okně „Nové pravidlo CSS“ vybereme Typ selektoru v roletce Třída, v poli Název selektoru napíšeme.jméno.V okně Definice pravidla nastavíme mojestyly.cz→OK

136 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- v dialogovém okně „Definice pravidla CSS pro .jméno v mojestyly“ zvolíme Kategorii Typ, v roletce Font-variant vybereme small-caps.(kapitálky)→OK→soubor→uložit vše

POUŽITÍ STYLŮ

Jednou z možností, jak použít styly na značce je využít panel Vlastnosti - v pravém odstavci vybereme tažením myší slovo Elaine, tím se zvýrazní jméno a oblast nad slovem - otevřeme z nabídkového řádku →Okno →Vlastnosti, v levé části zkontrolujeme, zda máme stisknuté tlačítko Css. Seznam odkazované v panelu Vlastnosti zobrazuje všechny třídy CSS, které jsou dostupné v dokumentu,vyberte→.jméno Vybraný text se formátuje kapitálkami a indikátor v selektoru značek obsahuje název třídy: <span.jméno>.Třída se přidala do textu pomocí tagu (značky) <span> Pro dokončení stránky zopakujte postup s výběrem jména každé osoby na vytvářené stránce a použijte opět třídu .jméno ., prohlédneme si stránku v živém zobrazení nebo v prohlížeči,potom zvolíme →soubor→uložit. POUŽITÍ VLASTNÍCH TŘÍD NA ČÁSTI STRÁNKY V DW můžeme vkládat části stránky nebo značky

do dokumentu, abychom vytvořili oblasti layoutu nebo organizovali části stránky, značce ,

můžeme přiřadit identifikátor nebo třídu. - myší vybereme fotografii ELAINE a oba odstavce textu. - z nabídkového řádku →vložit→vybereme→rozvržení→Vložit tag Div

137 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- V otevřeném dialogovém okně v roletce Vložit je zvoleno Uzavřít u výběru , do pole třída napíšeme .profil stiskneme tlačítko →Nové pravidlo V dialogovém okně Nové pravidlo CSS bude vybrán Typ selektoru Třída a do pole selektoru napíšeme .profil .V roletce Definice pravidla vybereme mojestyly.css →OK V dialogovém okně Definice pravidla CSS pro profil v mojestyly.css vybereme Kategorii Rámeček a v roletce.Clear (zrušení obtékání) zvolíme right (doprava), ze seznamu kategorie vybereme Umisťování a roletce Overflow (přetečení) vybereme hodnotu auto (automaticky) →OK.

138 Integrovaná střední škola polygrafická, Brno, Šmahova 110

DW nás vrátí do dialogu Vložit tag Div →OK

V okně dokumentu se nyní zobrazuje tečkovaná čára obklopující část stránky, která obsahuje vybraný obrázek a text. Čára ukazuje na přítomnost značky

.Dokud neprovedeme na stránce další změny, jiné změny na stránce neuvidíme. Další postup přidávání podobných značek

s přiřazenou třídou .profil se bude u ostatních jedinců na stránce trochu lišit, protože třída .profil nyní existuje v souboru mojestyly.css. - v dokumentu vybereme obrázek Lindy a dva odstavce textu, které ji popisují. - v panelu Vložit vybereme v kategorii Rozvržení položku Vložit tag Div, tím se nám znovu otevře dialogové okno Vložit tag Div, v roletce vložit vybereme volbu Uzavřít u výběru ,v roletce třída vybereme .profil. Třída se potom použije na novou značku

→OK. Část stránky věnovaná Lindě se umístí do své značky

, kolem níž se objeví v okně dokumentu tečkovaná čára. -zopakujeme kroky i pro ostatní osoby, Jason, Lin, Charlie →OK Tímto způsobem jsme vytvořili oddělené části layoutu, které obsahují jednotlivé profily, a přidělili jsme jim třídu CSS, která nám umožní jim dále s tímto profilem pracovat.

PLOVOUCÍ UMÍSTĚNÍ OBRÁZKŮ

Nyní máme vytvořenou třídu nazvanou .profil , která nastavuje vlastnosti clear a owerflow elementům div, které jsme přidali do stránky. 139 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- vybereme myší ELAINE, v selektoru značek musíme mít vybráno , v panelu vlastnosti zvolíme ve třídě . fltrt, tím se obrázek zobrazí vpravo a text se zalomí vlevo, u dalších obrázků budeme střídavě volit třídu .fltlft a fltrt, tím budou obrázky střídavě zarovnány vpravo a vlevo.nakonec → Soubor→ Uložit vše.

Test č. 9

Nastavení vlastních tříd Úkoly: - Otevři soubor onas-příjmení.html. - Přidej nové pravidlo CSS pro selektor Třída v mojestyly.css s názvem.Jméno - Definuj nové pravidlo: pro font variant zvol small-caps. - Označuj postupně jména pracovníků cestovou a z panelu Vlastnosti jim přiděl třídu .Jméno. - Vlož tag div z panelu Vložit pro část stránky (fotografie pracovníka + 2 příslušné odstavce textu), označ ji jako třídu s názvem selektoru .Profil. - Definuj pravidlo pro .Profil: v kategorii Umisťování vyber v kolonce Overflow Auto. - stejně to proveď pro ostatní pracovníky. - Jednotlivé fotografie nech pomocí třídy fltlft nebo fltrt obtékat střídavě

textem zleva

nebo zprava.

2. NASTAVENÍ VLASTNÍCH TŘÍD

Na rozdíl od selektoru následníka, který se pro zadaný tag (značku) a identifikátor používá automaticky, se pravidlo nastavené pro třídu a jméno selektoru používá pouze tam, kde jej potřebujeme. - v panelu Styly CSS →Nové pravidlo CSS - v dialogovém okně „Nové pravidlo CSS“ vybereme Typ selektoru v roletce Třída, v poli Název selektoru napíšeme.jméno.V okně Definice pravidla nastavíme mojestyly.cz→OK 140 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- v dialogovém okně „Definice pravidla CSS pro .jméno v mojestyly“ zvolíme Kategorii Typ, v roletce Font-variant vybereme small-caps.(kapitálky)→OK→soubor→uložit vše

POUŽITÍ STYLŮ

Jednou z možností, jak použít styly na značce je využít panel Vlastnosti - v pravém odstavci vybereme tažením myší slovo Elaine, tím se zvýrazní jméno a oblast nad slovem - otevřeme z nabídkového řádku →Okno →Vlastnosti, v levé části zkontrolujeme, zda máme stisknuté tlačítko Css. Seznam odkazované v panelu Vlastnosti zobrazuje všechny třídy CSS, které jsou dostupné v dokumentu,vyberte→.jméno Vybraný text se formátuje kapitálkami a indikátor v selektoru značek obsahuje název třídy: <span.jméno>.Třída se přidala do textu pomocí tagu (značky) <span> Pro dokončení stránky zopakujte postup s výběrem jména každé osoby na vytvářené stránce a použijte opět třídu .jméno ., prohlédneme si stránku v živém zobrazení nebo v prohlížeči,potom zvolíme →soubor→uložit. POUŽITÍ VLASTNÍCH TŘÍD NA ČÁSTI STRÁNKY V DW můžeme vkládat části stránky nebo značky

do dokumentu, abychom vytvořili 141 Integrovaná střední škola polygrafická, Brno, Šmahova 110

oblasti layoutu nebo organizovali části stránky, značce ,

můžeme přiřadit identifikátor nebo třídu. - myší vybereme fotografii ELAINE a oba odstavce textu. - z nabídkového řádku →vložit→vybereme→rozvržení→Vložit tag Div

- V otevřeném dialogovém okně v roletce Vložit je zvoleno Uzavřít u výběru , do pole třída napíšeme .profil stiskneme tlačítko →Nové pravidlo V dialogovém okně Nové pravidlo CSS bude vybrán Typ selektoru Třída a do pole selektoru napíšeme .profil .V roletce Definice pravidla vybereme mojestyly.css →OK V dialogovém okně Definice pravidla CSS pro profil v mojestyly.css vybereme Kategorii Rámeček a v roletce.Clear (zrušení obtékání) zvolíme right (doprava), ze seznamu kategorie vybereme Umisťování a roletce Overflow (přetečení) vybereme hodnotu auto (automaticky) →OK.

142 Integrovaná střední škola polygrafická, Brno, Šmahova 110

DW nás vrátí do dialogu Vložit tag Div →OK

V okně dokumentu se nyní zobrazuje tečkovaná čára obklopující část stránky, která obsahuje vybraný obrázek a text. Čára ukazuje na přítomnost značky

.Dokud neprovedeme na stránce další změny, jiné změny na stránce neuvidíme. Další postup přidávání podobných značek

s přiřazenou třídou .profil se bude u ostatních jedinců na stránce trochu lišit, protože třída .profil nyní existuje v souboru mojestyly.css. - v dokumentu vybereme obrázek Lindy a dva odstavce textu, které ji popisují. - v panelu Vložit vybereme v kategorii Rozvržení položku Vložit tag Div, tím se nám znovu otevře dialogové okno Vložit tag Div, v roletce vložit vybereme volbu Uzavřít u výběru ,v roletce třída vybereme .profil. Třída se potom použije na novou značku

→OK. Část stránky věnovaná Lindě se umístí do své značky

, kolem níž se objeví v okně dokumentu tečkovaná čára. -zopakujeme kroky i pro ostatní osoby, Jason, Lin, Charlie →OK Tímto způsobem jsme vytvořili oddělené části layoutu, které obsahují jednotlivé profily, a přidělili jsme jim třídu CSS, která nám umožní jim dále s tímto profilem pracovat.

PLOVOUCÍ UMÍSTĚNÍ OBRÁZKŮ

Nyní máme vytvořenou třídu nazvanou .profil , která nastavuje vlastnosti clear a owerflow elementům div, které jsme přidali do stránky. 143 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- vybereme myší ELAINE, v selektoru značek musíme mít vybráno , v panelu vlastnosti zvolíme ve třídě . fltrt, tím se obrázek zobrazí vpravo a text se zalomí vlevo, u dalších obrázků budeme střídavě volit třídu .fltlft a fltrt, tím budou obrázky střídavě zarovnány vpravo a vlevo.nakonec → Soubor→ Uložit vše.

Test č. 10

Import textu, nadpisy, seznamy Úkoly: -

Otevři soubor santorini-start.html a ulož jej jako santorini-příjmení.html

-

Najdi a okopíruj první část textu z santorini.txt v lekci 3.

-

Vlož jej na místo „sem patří text“ v santorini-příjmení.

-

To samé proveď s druhou částí textu.

-

Převeďte slova „Místa“ a „Pláže“ v santorini-příjmení na nadpisy

.

-

Převeďte odstavce pod

nadpisy „Místa“ a „Pláže“ na neuspořádaný (odrážkový seznam).

-

Odsaďte taxt odstavců co řekli jednotlivé osoby

IMPORT TEXTU

-→ Soubor → Otevřít →C →DW kurz→soubor →Lekce→Lekce 03 →santorini-start, tím si otevřeme počáteční dokument v DW, ve kterém bude vytvářet text, odrážkové , číslované seznamy a tabulky. - Zvolíme →Soubor → Uložit jako a uložíme soubor pod názvem santorini-příjmení.html, původní soubor Santorini-start zavřeme beze změny! V dokumentovém okně uvidíme webovou stránku cestovní kanceláře Tam a zpět, obrázky již 144 Integrovaná střední škola polygrafická, Brno, Šmahova 110

byly na stránku vloženy a nyní budeme pracovat s textem. - →Soubor → Otevřít → C →DW kurz→soubor →Lekce→Lekce 03 → santorini.txt, tím tento dokument otevřeme. V tomto dokumentu můžeme jeho obsah upravovat, kopírovat a vkládat ho přímo do vytvářených webových stránek. - Vyberte všechen text od „vítejte v ráji … až po výlety loděmi a další.“ → CTRL + C , tím ho zkopírujeme do schránky.Vrátíme se na webovou stránku Santorini- příjmení.html a kurzorem myši označíme frázi „sem patří text“ , která je umístěna hned za prvním obrázkem. - →CTRL + V, tím vložíme text ze schránky na vybrané místo. Vložený text se naformátuje jako odstavce pomocí tagů

. Odstavce dostaly přidělený styl s typem písma, které je v již připojené externí šabloně stylů. Dokončíme kopírování textu z poznámkového bloku. - otevřeme santorini.txt, označíme text, který začíná „Dolores a Tom a zkopírujeme jej do schránky, poznámkový blok beze změny zavřeme (na záložce santorini.txt klepneme na symbol x) a vrátíme se na webovou stránku, označíme text „sem patří text“ pod fotografií budovy a vložíme text ze schránky. → Soubor →Uložit.

VYTVOŘENÍ NADPISŮ

Text by se měl na webové stránce formátovat tak, aby dával smysl, byl přehledný a celkově srozumitelný. Nadpisy slouží k organizaci stránky do smysluplných částí a zároveň slouží jako titulek stránky HTML, stejně jako v knize. Nadpisy se v HTML dokumentech vytváří pomocí značek (tagů)

, …

, seřazeno od největšího k nejmenšímu. Libovolné zobrazovací zařízení (PC,mobil,čtečka Braillova písma,…) interpretuje text formátovaný pomocí značek pro nadpis jako nadpis. Tento koncept bývá nazýván často jako sémantický kód, značky jazyka HTML vytváří sémantický kontext obsahu stránky: nadpisy, odstavce, seznamy, blokové citace, tabulky, obrázky, atd. - z nabídkového řádku otevřeme panel Vlastnosti →Okno →Vlastnosti ,v něm stiskneme tlačítko 145 Integrovaná střední škola polygrafická, Brno, Šmahova 110

HTML. Protože externí šablona stylů mojestyly.css již byla k této stránce již připojena, byly textu již styly v podobě color,font-family,font-size,atd. pomocí definice příslušného pravidla přiděleny. Všechny pravidla si můžeme prohlédnout v panelu vlastnosti, jakmile vybereme část s textem. - Umístíme kurzor do textu „Co říkají naši zákazníci“, v panelu Vlastnosti zapneme tlačítko HTML v roletce Formát se objeví Nadpis 2, podobně i v selektoru značek

. - umístíme kurzor do slova „ Místa“ a v panelu Vlastnosti vybereme v roletce Formát Nadpis 3, Slovo Místa se nyní naformátuje jako nadpis třetí úrovně (tag

), Tím jsme přidělili frázi význam a logické místo v organizaci stránky vzhledem k dalšímu obsahu, který následuje za nadpisem. Stejným způsobem naformátujeme slovo „Pláže“ jako nadpis 3. úrovně. - → Soubor → Uložit. VYTVOŘENÍ SEZNAMŮ

Seznam používáme jako část textu, kde je obsah sdělení oddělen do jednotlivých řádků, které mohou být označeny odrážkami nebo čísly (odrážkový nebo číslovaný seznam, v Adobe Dreamweaveru jsou ikony pro tvorbu seznamů ale označeny jako neuspořádaný a uspořádaný seznam). Na webových stránkách se používají pro snadnější orientaci na stránce a k rychlejšímu čtení, mohou uživatelům pomáhat při hledání rychlých odpovědí. V HTML kódu je: - odrážkový seznam označen značkou (tagem)

- číslované seznam značkou (tagem)
o jednotlivé významové řádky jsou označeny značkou (tagem)
1. v obou druzích seznamů. Všechny tagy jsou párové,to znamená, že jsou na začátku i konci seznamu i řádků (
). - vybereme ve vloženém textu nedokončené věty (v HTML kódu jsou označeny jako samostatné odstavce

a

od „Úžasné bílé zdi“ až po „Noční život, který si nemůžeme nechat ujít“.

146 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Otevřeme panel vlastnosti z nabídkového řádku →Okno →Vlastnosti v panelu vlastnosti vybereme Neuspořádaný (odrážkový) seznam a klepneme na něj myší.

- stejné kroky zopakujeme u textových odstavců za nadpisem Pláže.

Pokud bychom chtěli vytvořit uspořádaný (číslovaný) seznam, klepneme na vedlejší tlačítko vpravo, na kterém jsou číslice.

- →Soubor → Uložit.

VYTVOŘENÍ BLOKOVÝCH CITACÍ

V jazyce HTML jde blok citovaného textu - umístíme kurzor do odstavce, který začíná „Milujeme Santorini více než … - v panelu Vlastnosti klepneme na tlačítko s názvem „Odsazení textu“,je určeno k vytvoření blokových citací.

147 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Bublinová nápověda se nazývá „Odsazení textu“, ve skutečnosti v HTML jazyce tímto způsobem vytváříme blokovou citaci a předcházejícím tlačítkem „Odsazení textu doleva“ ji odstraňujeme. - zopakujeme předcházející krok také u dalších odstavců, začínajících slovy: Jídlo na střeše … a „Celá moje rodina … - Nyní budeme vytvořeným blokovým citacím přidělovat styly pomocí CSS. - →Styly CSS →Nové pravidlo - v dialogovém okně Nové pravidlo zvolíme v části Typ selektoru volbu „ Tag (předefinuje element HTML)“,v poli Název selektoru vybereme pomocí roletky Blockquote a v roletce Definice pravidla zapíšeme nové pravidlo do mojestyly.css.→OK .

- v otevřeném dialogovém okně Definice pravidla pro blockquote v mojestyly. css vybereme Kategorii Rámeček, v části Padding (vnitřní okraj) zatrhneme volbu Stejné pro všechny a do roletky Right a Left (vpravo, vlevo) zapíšeme číslo 4 s jednotkou px .Potom vybereme Kategorii Okraj a v části Style vybereme z roletky solid (nepřerušovaný), Width (šířka)- thin (tenký) a v části Color- tmavě modrou #00C.→OK. 148 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Tímto krokem orámujeme pomocí stylů blokové citace tenkou, modrou, nepřerušovanou linkou, protože to máme uloženo jako nové pravidlo Blockquote v kaskádových stylech, bude tento styl použit automaticky na všechny blokové citace na všech www-stránkách, ke kterým budeme mít připojené mojestyly.css.

- →Soubor →Uložit vše, tím uložíme změny jak do HTML dokumentu, tak i do příjmenímojestyly.css . Výsledek si prohlédnout v živém zobrazení (potom ho nesmíme zapomenout vypnout) nebo v prohlížeči.

149 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Test č. 11

Práce s tabulkou -

Úkoly:

-

-Otevřete Santorini-příjmení.html

-

Vytvořte tabulku 3 sloupce 5 řádků

-

Z textového souboru Tabuka.doc v lekci 02 překopírujte obsah tabulky

-

Vložte popisku sady Spry pro popis místa Oia, číst se bude jako Ea.

-

Nahraďte text nakupující slovem zákazníky na celé stránce

TVORBA TABULEK

Původně se layout webových stránek tvořil pomocí tabulek namísto stylů CSS, které přišly později, v současnosti se tabulky používají především pro zobrazování řádků a sloupců dat. - otevřeme rozpracovaný soubor santorini-příjmení.html ze složky lekce 03. - ve spodní části stránky označíme a smažeme text „sem patří tabulka, kurzor ponecháme na místě. - v panelu Vložit rozbalíme záložku Rozvržení klepneme na ikonu Tabulka.

- v dialogovém okně Tabulka napíšeme do pole Řádků 6 a do Pole Sloupců 3, přednastavené hodnoty ve všech ostatních polích vymažeme, vzhled tabulky budeme přidělovat pomocí stylů CSS, díky čemuž bude tabulka přístupná a použitelná na více zobrazovacích zařízeních. - v části Záhlaví vybereme Nahoru, tím se nadpisy umístí nad každý sloupec a do pole Titulek napíšeme Hotely na Santorini →OK.

150 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Tabulka se zobrazí ve zmáčknuté podobě, protože zatím nemá žádný obsah a nemá nastavený žádný rozměr. Pomocí panelu vlastnosti můžeme tabulce přidělit identifikátor, tím můžeme přidělit každému elementu (i tabulce) individuální styl. - v panelu vlastnosti v poli tabulka napíšeme hotely

- nyní napíšeme do první buňky v tabulce místo, do druhé hotel a do třetí hodnocení. Tímto způsobem můžeme vyplnit všechny buňky tabulky, pro zrychlení práce ale zkopírujeme hotový obsah z textového editoru. - → Soubor → Otevřít → lekce 02 → tabulka.html , tím se otevře již vytvořená tabulka v DW, umístíme kurzor dovnitř tabulky, v selektoru značek vybereme tag pomocí CTRL+C ji zkopírujeme do schránky, potom beze změny zavřeme soubor - tabulka.html, označíme stejným způsobem rozdělanou tabulku v souboru santorini-příjmení.html a vložíme ji na místo původní tabulky.

151 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- → Soubor → Uložit . pokud máme vybranou tabulku, můžeme provádět jednoduše a rychle změny typu přidání,odebrání,sloučení či rozdělení řádků a sloupců, ostatní změny je vhodnější provádět pomocí CSS stylů.

POPISKY SADY SPRY

Adobe Dreamweaver Cs4 obsahuje

ovládací prvek sady Spry, pomocí kterého vkládáme,

kontrolujeme umístění a stylujeme tzv. bublinovou nápovědu. V HTML dokumentu se bublinová nápověda vytváří použitím parametru title ve značce , ale ovládací prvek Popisek sady Spry používá JavaScript a CSS. - Otevřeme soubor santorini-příjmení.html, ve zobrazené tabulce vybereme slovo Oia pod nápisem Místo. - Otevřeme z nabídky → Okno →Vložit, tím se nám otevře panel nástrojů, který je umístěn pod nabídkovým řádkem.

- v této nabídce vybereme kategorii → Spry a v ní ikonu →Popisek sady vSpry. - v okně dokumentu se posuneme až pod tabulku, kde se nám objeví v azurovém obdélníku 152 Integrovaná střední škola polygrafická, Brno, Šmahova 110

popisek sady Spry: sprytooltip1. - pod tímto popiskem vymažeme text Zde umístěte popisek a napište Oia se čte jako Eea. - → Soubor →Uložit. Pokud je to první nápovědná bublina, kterou jsme do www stránek vložili, zobrazí se nám dialogové okno Zkopírovat závislé soubory, v něm bude upozornění na to, že se k naší stránce připojí dva soubory. Každý ovládací prvek knihovny Spry, který použijeme, vkládá soubory CSS a JavaScriptu do složky nazvané SpryAssets v rámci kořenové složky našeho webového místa. Pokud bychom vytvářené stránky publikovali na internetu, museli bychom tam i tuto složku s těmito závislými soubory nahrát. - zvolíme → OK. Tímto způsobem jsme přidali do kaskádových stylů CSS nový styl SpryTooltip.css. Nyní můžeme v panelu vlastnosti, ten otevřeme z nabídky →Okno → Vlastnosti, poklepáme na bublinovou nápovědu „Popisek sady Spry: sprytooltip1“, měnit takové vlastnosti, jako posun umístění, časová prodleva, efekty a akce myši.

My budeme ale upravovat vlastnosti bublinové nápovědy pomocí kaskádových stylů CSS. - → Okno → Styly CSS → Vše, ve spodní části Všech pravidel rozbalíme pomocí tlačítka + nově připojený soubor stylů SpryTooltip.css ,

153 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Zvolíme selektor .tooltipContent a zvolíme ikonu Upravit styl

V zobrazeném dialogovém okně zvolíme Kategorii Typ, v něm vybereme štětečkem bílou barvu #FFF, v Kategorii pozadí do pole Background-color (barva pozadí) vybereme štětečkem barvu #O36. - → OK→ Soubor → Uložit vše. V živém zobrazení potom vyzkoušíme nápovědnou bublinu, aby se zobrazila, musíme se myší přiblížit ke slovu Oia.

HLEDÁNÍ A NAHRAZOVÁNÍ TEXTU

DW dokáže na vytvářených stránkách najít a nahradit text, tímto způsobem můžeme najednou nahradit prázdné mezery, tvrdá zalomení řádků, běžné mezery a jiné textové elementy. - v dokumentovém okně pod nápisem

Místa v předposlední odrážce vybereme slovo nakupující. - z nabídkového řádku zvolíme → Upravit → Hledat a nahradit a v otevřeném dialogovém okně se v kolonce Hledat objeví nakupující, do kolonky nahradit napíšeme zákazníky a stiskneme tlačítko Nahradit. DW nahradí první výskyt nalezené fráze a vyhledá další výskyt, v našem případě nám oznámí, kolik slov se v prohledávaném dokumentu vyskytuje. 154 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- jakmile je nahrazení provedeno, dialogové okno zavřeme, → soubor →Uložit vše.

Test č. 12

Navigace v rámci webu Úkoly:

- - otevřít →DW-kurz →lekce 05 → onas-příjmení.html. - - Vložte hyperlink na stránku Kontakt.html, jako tlačítko zvolte text kontaktujte nás v zápatí stránky.

- V kaskádových stylech změňte barvu písma hyperlinku na bílou (pouze pro haperlink v zápatí)

- Otevřete soubor Santorini.html. - Použijte slova Doporučované hotely pod obrázkem v sidecar 1 jako hyperlink, který posune stránku na její konec.

- Pod tabulku vložte text Zpět a použijte jej jako hyperlink pro návrat na začátek stránky. ODKAZY NA STRÁNKY V RÁMCI JEDNOHO WEBU

Odkazy jsou základními elementy webových stránek a Dreamweaver nám usnadňuje práci s nimi.Webové hypertextové odkazy (hyperlinky) umožňují uživatelům se pohybovat z jednoho 155 Integrovaná střední škola polygrafická, Brno, Šmahova 110

místa webu na další, tzn propojují podle předem zvoleného schématu webové stránky, umožňují přecházet na stránky jiného webu či odesílat e-mailové zprávy. - Z nabídkového řádku otevřeme → Soubor → otevřít →DW-kurz →lekce 05 → onasstart.html. - → Soubor → Uložit jako → onas-příjmení.html. - původní soubor onas-start.html zavřeme beze změny. V zápatí otevřené stránky vybereme text Kontaktujte nás.

Otevřeme panel Vlastnosti → okno v nabídkovém řádku → Vlastnosti → stiskneme tlačítko HTML. - V pravo od pole Odkaz stiskneme tlačítko vyhledat soubor a v otevřeném dialogovém okně Vyberte soubor v oblasti hledání najděte Lekce 05 a v ní vyberte soubor kontakt.html, přesvědčíme se, že máme v roletce Relativně k vybranou volbu Dokument → OK a klepneme kamkoliv do dokumentového okna, abychom zrušili výběr textu odkazu.

Výchozí formátováním hypertextových odkazů je modrá barva textu a modré podtržení, v našem 156 Integrovaná střední škola polygrafická, Brno, Šmahova 110

případě je ovšem modrý text na modrém pozadí špatně čitelný, to však můžeme změnit pomocí nového pravidla v kaskádových stylech. -→ kurzor umístíme do hypertextového odkazu a v selektoru značek vybereme , → Okno → Styly CSS → vše klepneme na ikonu Nové pravidlo CSS, v otevřeném dialogovém okně Nové pravidlo CSS vybereme Typ selektoru Složený prvek (na základě výběru) a v názvu selektoru pomocí tlačítka Méně specifické vybereme #footer p a → OK. V zobrazeném dialogovém okně Definice pravidla pro #footer p a v mojestyly.css vybereme kategorii Typ a v roletce Barvy vybereme pomocí kapátka barvu žlutou #FFF →OK. Text odkazu bude teď žlutý se žlutým podtržením na modrém pozadí, jeho čitelnost bude vyšší. Jakékoliv značce zobrazené v zápatí dokumentu bude pomocí kaskádových stylů CSS přiděleno nově vytvořené pravidlo se žlutou barvou textu i podtržením.

Nyní si vyzkoušíme vybrat cíl vytvářeného hypertextového odkazu metodou vizuálního výběru. - → soubor → Otevřít →lekce 05 →Santorini-start.html - Otevřený soubor uložíme se svým příjmením → Soubor → Uložit jako → Santorini.příjmení.html a původní soubor beze změny zavřeme. - V zápatí stránky opět vybereme text Kontaktujte nás, otevřeme panel Vlastnosti a otevřeme -→ Okno → Soubory a v nich najdeme a rozbalíme lekci 05. - V panelu Vlastnosti stiskneme tlačítko HTML, chytneme a přetáhneme ikonu Ukázat na soubor (je vpravo od pole Odkaz) na složku Kontakt.html v lekci 05. 157 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Tím vytvoříme odkaz i z této stránky na stránku Kontakt.html, a protože je i tato stránka propojena s mojestyly.css, bude hypertextový odkaz rovněž napsán žlutým písmem i podtržením. - → Soubor → Uložit vše, nyní si můžeme fungování hypertextového odkazu vyzkoušet v náhledu v prohlížeči.

TVORBA ODKAZŮ V RÁMCI JEDNÉ STRÁNKY

Při použití hypertextového odkazu nám náš prohlížeč zobrazí webovou stránku odshora dolů. Je-li stránka příliš dlouhá a není-li nutné ji celou prohlížet, můžeme pomocí hypertextových odkazů odkázat na vybraný element a prohlížeč nám nastaví stránku na tento element. - → Soubor → Otevřít →Dreamweaver kurz → lekce 03 →Santorini-příjmení.html. - Do postranního sloupce #sidebar 1 za text slunečnému počasí vložíme pomocí klávesy Enter text "Prohlédněte si doporučované hotely". Vybereme slova "doporučované hotely" , otevřeme panel vlastnosti (→ Okno → Vlastnosti) a do pole Odkaz napíšeme #hotely a stiskneme klávesu Enter. Tím jsme právě vytvořili hypertextový odkaz na místo na stránce, kde je umístěna tabulka s identifikátorem #hotely. Znak # značí, že odkaz směřuje na element s vypsaným identifikátorem v rámci aktuální stránky. Pokud bychom chtěli odkaz na danou tabulku směřovat z jiné webové stránky v rámci stejného webového místa, musel by odkaz obsahovat jak název souboru, tak i identifikátor (santorini-příjmení.html#hotely)\ Pro možnost návratu na začátek stránky použijeme podobný odkaz, jako identifikátor můžeme použít element záhlaví. - → Pod tabulku napíšeme slovo Nahoru, označíme jej a v panelu Vlastnosti do pole Odkaz napíšeme #header a stiskneme klávesu Enter. Tím jsme vytvořili odkaz na začátek stránky. - → Soubor → Uložit. Nyní si můžeme prohlédnout stránku v prohlížeči a vyzkoušet fungovámí hypertextových odkazů jak na stránce santorini- příjmení.html, tak na stránce onas-příjmení.html.

158 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Test č. 13

Práce s obrázky Úkoly: -

Otevřete soubor Naxos-příjmení.html.

-

Na místo výplňového místa pro obraz vložte ze souboru obrázky/ naxos-portara.jpg, jako alternativní text napište Brána na ostrově Naxos.

-

V panelu vlastnosti upravte obrázek:- š 205,v270 px, formát Jpeg, uložení JPEG lepší kvalita.

VKLÁDÁNÍ A POUŽITÍ OBRÁZKŮ

Obrázky představují klíčovou komponentu každé webové stránky, zvyšují její přehlednost, přitažlivost a na první pohled by měly návštěvníka zaujmout. Ke vkládání obrázků můžeme používat panel vložit, výplňový prostor pro obrázky, panel datové zdroje, vkládání kopírováním z Photoshopu či Adobe Bridge. Otevřeme → Soubor →Otevřít → DW-kurz → lekce → lekce 04 → naxos-start.html. Otevřený soubor uložíme pod svým jménem do lekce 04 → Soubor → Uložit jako → naxospřímení.html. Původní soubor naxos-start.html zavřeme beze změny, tím zůstane původní soubor zachován. Vybereme výplňový prostor obrázku „portara (200x200)“ Klávesou Delete ji odstraníme, - → Okno → Vložit → Běžné → Obraz (pokud tuto ikonu na panelu nevidíme, otevřeme ji klepnutím na šipku směřující dolu hned vedle ikony Obrazy). V zobrazeném dialogovém okně vybereme oblast hledání → lekce → obrázky →naxos-portara → OK.

159 Integrovaná střední škola polygrafická, Brno, Šmahova 110

V dialogu Atributy pro usnadnění přístupu napíšeme do pole Alternativní text výraz Portara na ostrově Naxos → OK. K otevření dialogu pro vložení obrázku můžeme také použít poklepání na obrázek výplňového prostoru a tím ho vyměnit za vybranou grafiku, alternativní text musíme však napsat manuálně v panelu Vlastnosti. Alternativní technikou vložení obrázku do stránky je použití panelu Datové zdroje. - → vymažeme právě vložený obrázek naxos-portara.html. -V nabídkovém řádku zvolíme → Okno → Datové zdroje V zobrazeném dialogovém okně klepneme na ikonu Obrazy, najdeme obrázek naxosportara.html → Vložit. - → Soubor → Uložit.

POUŽITÍ PANELU VLASTNOSTI U OBRÁZKŮ

Pro webové stránky je nejvýhodnější, je-li v rovnováze velikost použité grafiky, jejich kvalita velikost souboru. Proto se musí často optimalizovat grafika, kterou budeme umísťovat na webovou stránku. K tomu účelu obsahuje Adobe Dreamweaver grafický nástroj, který dokáže zajistit nejvyšší možnou kvalitu při zachování malé velikosti souboru. - Otevřeme z HDD → Soubor → Otevřít → Lekce → Lekce 04 →naxos-příjmení.html. V dokumentovém okně vybereme obrázek Portara 160 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Otevřeme panel vlastnosti → Okno → Vlastnosti, pokud máme vybraný obrázek, v panelu Vlastnosti se nám zobrazí řada možností pro úpravu obrázku:

Do okna šířka a výška přímo zapisujeme hodnotu v obrazových bodech, pod alternativním textem je tlačítko (Úprava) pro úpravu obrázku ve Photoshopu nebo Fireworksu, vedle je tlačítko (Upravit nastaveni náhledu) pro úpravu obrázku přímo v Dreamweaveru → Upravit nastaveni náhledu V otevřeném dialogovém okně zkontrolujeme, zda máme ve Formátu nastavenou volbu JPEG, vybereme v dolní části 2 okna náhledu, označíme spodní náhled., v pravé horní části okna rozbalíme roletku Kvalita a pomocí jezdce snížíme kvalitu na 20.Nyní můžeme porovnat vizuálně snížení kvality obrázků změnu velikosti souboru, snížení kvality obrazu není kompenzováno úsporou velikosti (6,37:1,37 kB), proto označíme horní náhled a v roletce Uložená nastavení vybereme JPEG-lepší kvalita →OK. - →Soubor →Uložit.

161 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Test č. 14

Nabídky Spry Úkoly: -

Otevřete stránku onas-příjmení.html.

-

Nad obrázek v sidecar 1 vložte Spry pruh nabídek, seřazení svislé.

-

Položky 1-4 nazvěte : Úvodem Itálie, Řecko, O nás.

-

Položka Řecko má podpoložky Santorini a Naxos

-

Položka Itálie má podpoložky Umbria a Santorini

-

Z koncových položek se bude odkazovat na příslušné stránky.

VKLÁDÁNÍ PRUHU NABÍDEK SPRY

Webové stránky potřebují interní navigaci, většina současných stránek používá navigaci, která je založena na seznamech stylovaných pomocí kaskádových stylů CSS. S pomocí JavaScriptu se může seznam stát vodorovnou nebo svislou navigací s podnabídkami v rozbalujících se nabídkách. Ovládací pruh nabídek je jednoduchý a silný nástroj, který je určen pro vkládání seznamů- kódu HTML a také odkazů, všech pravidel CSS, která zajistí, že se zobrazí jako pruh nabídek, a JavaScriptu, který zajistí vysunování podnabídek. Ovládací prvek pruh nabídek Spray má výhodu v tom, že jej tvoří pouze seznamy v HTML, takže i když uživatel nemá povolený JavaScript nebo CSS, navigační nabídka je stále funkční jako soubor navigačních odkazů. - Otevřeme soubor onas-příjmení.html, - v postranním panelu umístíme kurzor vlevo od obrázku New Yorku a stiskem Enter vytvoříme prázdný řádek před obrázkem,

162 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- otevřeme panel Vložit z nabídky Okno, klepneme na ikonu Spray pruh nabídek

- ve stejnojmenném dialogu vybereme volbu Svisle → OK a nad obrázkem se zobrazí navigační nabídka, → Soubor → Uložit. - K vytvoření odkazů použijeme panel Vlastností, ten otevřeme klepnutím na azurový pruh panel nabídek spray: menuBar1.

- Vybereme položku 1 v levém seznamu (hlavní nabídky), v poli Text napíšeme Úvodem, v poli Odkaz napíšeme index.html a v prostředním sloupci (druhá úroveň nabidky) vymažeme pomocí tlačítka – všechny tři podnabídky Položka 1.1 až 1.3. - Vybereme položku 2 a do pole Text napíšeme Itálie, v poli Odkaz ponecháme znak mřížky a do nabídky druhé úrovně pomocí tlačítka + přidáme další položku, do pole text napíšeme Umbria a do pole odkaz přepíšeme znak mřížky textem Umbria.html. - Vybereme Položku 3, do pole text napíšeme Řecko, vybereme položku 3.1 do pole text nepíšeme Santorini a do odkazu santorini-příjmení.html, - vybereme položku 3.2, napíšeme Naxos a do odkazu naxos-příjmení.html, - do položky 4 napíšeme O nás a do odkazu onas-příjmení.html, vytvoříme tlačítkem + podnabídku 4.1, vybereme ji, do pole text napíšeme Kontaktujte nás a do Odkazu napíšeme 163 Integrovaná střední škola polygrafická, Brno, Šmahova 110

kontakt.html - → Soubor → Uložit.

Test č. 15

Chování pomocí Spry efektů Úkoly: -

Otevřete soubor našiklienti-příjmení.html

-

Zvýrazněte h1 nadpis Naši podnikoví … počáteční barvu zvolte červenou, konečnou zelenou.

-

Zaměňte obraz v sidebar 1 za západ slunce.jpg ze složky obrázky v DW.

-

Přidejte efekt zatřesení h1 nadpisu v záhlaví stránky při přetažení myší.

CHOVÁNÍ V DREAMWEAVERU Chování DW je kódem JavaScriptu, který vykonává nějakou akci, např. otevření okna prohlížeče, kterou spouští nějaká událost, např. klepnutí myší. Použití chování je proces o třech krocích: 1. Vybereme element na stránce, který má spouštět chování. 2. Vybereme, jaké chování se má použít. 3. Určíme nastavení nebo parametry takového chování. DW nabízí více jak 30 druhů chování, která jsou všechna dostupná z části Chování, v nabídce Okno. - → Okno → Chování → Inspektor tagů → ikonou + rozbalíme seznam dostupných chování k určité části okna

164 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Některé funkcionality pro použití v DW obsahují: •

Otevření a zavření okna

•

Změnu zdroje obrázku a zpětnou změnu pro efekt

•

Mizení a objevování obrázku nebo části stránky

•

Zvětšování či třesení grafiky

•

Zobrazení vyskakujícího okna s upozorňovací hláškou

•

Změna textu nebo jiného obsahu HTML v určené oblasti

•

Objevování nebo skrytí části stránky

•

Volání uživatelské funkce JavaScriptu

Ne všechna chování jsou dostupná veškerý čas, běžná chování jsou dostupná pouze v přítomnosti určitého elementu na stránce, např. obrázek,… POUŽITÍ CHOVÁNÍ SPRY EFEKTŮ Pomocí nich můžeme vytvářet vizuální efekty na stránce, jako je zvýraznění elementů, jejich zatřesením, přechodem obrázků v druhý obraz. Tyto efekty slouží k upoutání pozornosti nebo ke zvýraznění potřebného elementu, jsou velmi výrazné a proto se musí používat opatrně. - → Soubor → Otevřít → na disku najdeme cestu do kurzu DW a otevřeme →Lekce 06 a v ní soubor nasiklienti-start.html. 165 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- soubor uložíme → Soubor → Uložit jako → název souboru zvolíme nasiklienti-prijmeni.html, a původní soubor nasiklienti-start.html beze změny zavřeme. - V main Content ( hlavním obsahu) označíme nadpis h1 Naši podnikoví klienti. - Z nabídkového řádku otevřeme → Okno → Chování, klepnutím na ikonu + rozbalíme kartu Chování a v ní vybereme → Efekty a v rozbalené podnabídce vybereme → Zvýraznění.

- V zobrazeném dialogovém okně ponecháme jako cílový element současný výběr, v poli Trvání efektu napíšeme 1500 ms, v poli počáteční barva pomocí kapátka vybereme zelenou barvu #00FF33, do pole Konečná barva vybereme červenou barvu #ff0000 a v poli barva po efektu žlutou #FFFF66,zaškrtneme pole přepnout efekt, to nám umožní měnit barvy oběma směry → OK. - V panelu Chování klepneme na pole On clik, tím ho aktivujeme a v seznamu vybereme

166 Integrovaná střední škola polygrafická, Brno, Šmahova 110

onMouseOver.

Pokud bychom chtěli měnit parametry efektu Zvýraznění, poklepeme na jeho název v pravém sloupci, tím se nám otevře příslušné dialogové okno. Smazat nepotřebný efekt můžeme po jeho označení v panelu chování pomocí ikony se znakem minus - . - Označíme nadpis h1 v záhlaví dokumentu, v panelu chování přidáme chování → vybereme Efekty a podnabídce vybereme efekt → Zatřást, v dialogu ponecháme Současný výběr. V levém poli panelu Chování ponecháme spouštěč onClick. - Označíme obrázek v sidebar 1, , v panelu chování přidáme chování → vybereme Efekty a podnabídce vybereme efekt → Zaměnit obraz, v dialogu klikneme na procházet a najdeme v DW obrázky santorini-zapadslunce.jpg, ponecháme nabízená zaškrtnutí. → OK. - Soubor → Uložit.

Provedené změny si prohlédneme jako náhled v prohlížeči.

Test č. 16

Spry skládačky Úkoly: -

Otevřete soubor Santorini-příjmení.html.

-

Pod h1 nadpis v mainContentu vložte Spry skládačku. 167 Integrovaná střední škola polygrafická, Brno, Šmahova 110

-

Popisek 1 nazvěte „Vítejte na Santorini“ Pop 2 „Co říkají naši zákazníci“, pop.3 „Doporučované hotely“.

-

Do obsahu pro jednotlivé záložky vložte celé příslušné odstavce z dané stránky.

VYTVÁŘENÍ SPRY SKLÁDAČEK Spry skládačka je podobná Spry panelu se záložkami, zejména pro podobnou organizaci obsahu do celistvého vícepanelového zobrazení, jednotlivé záložky jsou naskládány na sobě spíše než vedle sebe, takže při klepnutí na jednu z nich se panel i s celým obsahem plynule otevře a obsah se zobrazí v požadované záložce. Pokud je obsah uvnitř panelu větší nebo širší než panel sám, automaticky se zobrazí horizontální nebo vertikální postníky. - Otevřeme →Soubor → Dreamweaver → Lekce → Lekce 06 → Santorini-start.html, - Zvolíme →Soubor → Uložit jako → Santorini-příjmení.html, původní soubor Santorinistart.html zavřeme beze změny. - Ukazatel myši umístíme na konec řádku Ráj u moře v hlavním obsahu (mainContent), tím vytvoříme bod , kam budeme vkládat Spry skládačky.

Z nabídkového řádku otevřeme nabídku → Okno → Vložit a tomto panelu klepneme na ikonu Spry skládačka.Dreamweaver vloží na vyznačené místo do stránky ovládací prvek Spry skládačka.

Výchozím prvkem je dvoupanelová skládačka s rozbaleným horním panelem. Modrá záložka s označením lze přímo měnit v zobrazení Návrh. - Zvolíme → Soubor → Uložit vše, pokud je to požadováno, odsouhlasíme přijetí závislých souborů, které Dreamweaver přidá do složky SpryAssets. 168 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Vybereme výplňovou frázi Popisek 1 a přepíšeme jej textem Vítejte na Santorini. - Vybereme fotografii páru na střeše a veškerý text, který popisuje vesnice a pláže až k „Co říkají naši zákazníci. - V HTML kódu se můžeme přesvědčit, že jsme při označování nic nevynechali → Kód, od značky

před obrázkem až po uzavírací značku

za druhým vybraným seznamem, potom se vrátíme zpět do zobrazení Návrh. - Z nabídkového řádku zvolíme → Upravit → Vyjmout, tím zkopírujeme vybraný obsah do schránky. - Vrátíme se do skládačky, vybereme text Obsah 1 a pomocí lokální nabídky vyvolané pravým tlačítkem myši → Vložit jej nahradíme obsahem schránky. V Návrhovém zobrazení uvidíme pouze část vloženého obsahu, protože se v tomto zobrazení nezobrazuje posuvník. Abychom uviděli celý obsah, klepneme na panel pravým tlačítkem myši a v lokální nabídce označíme v položce Zobrazení elementu položku Plné. Pro práci na jiných panelech je ovšem výhodnější obsah opět skrýt opačným postupem. - Ukazatelem myši posuneme v šedé oblasti s názvem Popisek 2 až se objeví ikona oka, klepneme na ni, tím se nám otevře panel 2. - Vybereme Popisek 2 a přepíšeme jej textem „Co říkají naši zákazníci“. - Stejným způsobem jako v předešlém případě vyjmeme do schránky text v příslušné oblasti a vložíme jej do panelu v oblasti Obsah 2. - Pro naplnění třetího panelu skládačky musíme nejdříve přidat další panel, vytvoříme jej v panelu Vlastnosti. - Vybereme skládačku Spry: Accordion 1, otevřeme panel Vlastnosti a vněm pomocí tlačítka + nebo – můžeme přidávat nebo mazat panely, šipkami přesouváme vybraný panel na požadovanou pozici.

- Tlačítkem + přidáme třetí panel.

- Přepíšeme Popisek 3 textem Doporučené hotely, 169 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Stejným způsobem jako v předešlém případě vyjmeme do schránky text v příslušné oblasti a vložíme jej do panelu v oblasti Obsah 3 - → Soubor → Uložit, kontrolu funkčnosti provedeme v živém zobrazení či v náhledu v prohlížeči. Na závěr můžeme provést úpravy Spry skládaček pomocí kaskádových stylů CSS, vyladíme pomocí šablony stylů SpryAccordion.css,

Test č. 17

Layout stránky Úkoly: -

Otevřete Nový soubor a vyberte prázdnou stránku bez rozvržení.

-

Uložte ji jako Layout-příjmení.html.

-

Do CSS přidejte nové pravidlo pro Tag, název selektoru Body.

-

Pozadí pro Body bude bílé a text bude vycentrován.

-

Přidejte nové pravidlo pro ID s názvem Obal.

-

text bude zarovnán vlevo a šířka rámečku je 760 px.

-

Přidejte nová pravidla pro ID s názvy Záhlaví,Obsah a zápatí.

-

Do Obalu postupně vložte Tagy div názvy záhlaví, obsah a zápatí ve správném pořadí.

TVORBA LAYOUTU STRÁNKY

V současnosti se při vytváření layoutu webových stránek (rozvržení objektů na stránce)přešlo na stylování pomocí kaskádových stylů CSS, na rozdíl od tabulkového rozvržení, které je datově náročnější, hůře se udržují a dodržují standardy. Tvorba layoutů založená na stylech CSS se skládá ze dvou hlavních komponent: sada značek

- ty vytváří strukturu stránky.

sada pravidel CSS

- pomocí nich se definují rozměry a formátují klíčové elementy

stránky. 170 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Zvolíme → Soubor → Nový v otevřeném dialogu zvolíme → Prázdná stránka → Typ stránky :HTML → Rozvržení: žádný. Při této volbě nejsou v náhledu k dispozici žádné předvolby layoutu. (K podobnému výsledku můžeme dojít rychleji při zobrazení uvítací obrazovky a klepnutí na HTML ve sloupci Vytvořit nový). - Zvolíme →Soubor → Uložit v zobrazeném dialogovém okně Uložit najdeme Lekce 07 a do názvu napíšeme Layout-příjmení.html → Ok. - Zvolíme z nabídkového řádku → Okno → Styly CSS , ve stejnojmenném panelu se přepneme, pokud je to nutné do režimu →Vše. - Klepneme na ikonu → Nové pravidlo, jako Typ selektoru zvolíme z roletky Tag (předefinuje element HTML), do Názvu selektoru napíšeme nebo z roletky vybereme Body, v kolonce Definice pravidla ponecháme Pouze v tomto dokumentu.

- Zobrazí se nám dialogové okno Definice pravidla CSS pro body, zvolíme Kategorii → Pozadí a v Background-color pomocí kapátka vybereme světle růžovou barvu #FCF, přepneme do Kategorie Blok a v seznamu pole Text-align (zarovnání textu)zvolíme center. Rozpracovaný layout se zarovná na střed okna prohlížeče, zatímco text zůstane zarovnaný doleva, tato akce je nutná pro starší prohlížeče (IE 5.x,aby se vše správně vykreslilo), v dalších krocích přepíšeme zarovnání textu vlevo. - Zvolíme Kategorii → Rámeček v části Padding ( vnitřní okraj) napíšeme v poli Top (horní) 0, to 171 Integrovaná střední škola polygrafická, Brno, Šmahova 110

stejné provedeme v poli Margin ( vnější okraj) →OK.

- Zvolíme → Soubor → Uložit. Zvolené vlastnosti pro body si můžeme prohlédnout v panelu vlastnosti po klepnutí na body. - samostatně změňte barvu pozadí na bílou. DEFINICE VNĚJŠÍHO OBALU - V panelu Styly CSS zvolíme ikonu→ Nové pravidlo, v zobrazeném dialogovém okně v poli Název selektoru vybereme ID (použito pro jeden element HTML) do pole Název selektoru napíšeme #obal a v roletce Definice pravidla musí být Pouze pro tento dokument →OK.

172 Integrovaná střední škola polygrafická, Brno, Šmahova 110

-

V zobrazeném dialogu vybereme Kategorii Blok, v roletce Text-align vybereme left (zarovnání textu doleva) → v kategorii Rámeček → do pole Width napíšeme hodnotu 760 px, v části Margin (vnější okraj) zrušíme zatržení Stejné pro všechny a do pole Top napíšeme 0 a do polí Right a Left zvolíme Auto →OK.Layout má pevnou šířku 760 px takže funguje i při rozlišení 800x600 px,40 px navíc se používá pro zobrazení okrajů okna včetně postníků.Levé a pravé okraje jsou nastaveny na Auto, aby se celý obsah stránky zarovnal na střed okna prohlížeče,Zbývajících 40 px se rozdělí rovným dílem mezi levý a pravý vnitřní okraj a tím se layout zarovná na střed.

OBAL A PRIMÁRNÍ ČÁSTI STRÁNKY

Nyní jsme přidělili značce

s identifikátorem #obal styly.DW nám umožní přímé přidání značky

a přidělení identifikátoru. 173 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- Otevřeme z nabídkového řádku nabídku → Okno → Vložit. V zobrazeném panelu Vložit vybereme → kategorii Rozvržení a v ní klepneme na ikonu Vložit tag Div. - V zobrazeném dialogovém okně vybereme v roletce V místě textového kurzoru a v roletce Identifikátor vybereme Obal →OK.

DW přidá do stránky novou značku

s výplní pro obsah, která obsahuje text „sem patří iobsah pro id obal“. Značka

s identifikátorem #obal slouží jako obalový element (kontejner) pro další značky

, jejím účelem je omezení šířky layoutu. Nyní budeme přidávat další hlavní části layoutu, ten je primárně tvořen ze tří částí,

záhlaví obsah zápatí

Každá z těchto částí vyžaduje pravidlo CSS a značku

. - Zvolíme z nabídkového řádku →Okno →Styly CSS → Vše → klepneme na ikonu Nové pravidlo, - v zobrazeném dialogu vybereme Typ selektoru: ID( ), napíšeme do pole Název selektoru: #záhlaví a v poli Definice pravidla ponecháme: Pouze v tomto dokumentu → OK.

174 Integrovaná střední škola polygrafická, Brno, Šmahova 110

- V zobrazeném dialogu vybereme Kategorii:Rámeček a v ní Margin (vnější okraj), zrušíme zatržení : Stejné pro všechny a do polí Top a Bottom napíšeme 12 px → OK. Nyní budeme stejným způsobem definovat další pravidla CSS pro#obsah a #záhlaví. - klepneme na ikonu Nové pravidlo, - v zobrazeném dialogu vybereme Typ selektoru: ID( ), napíšeme do pole Název selektoru: #obsah a v poli Definice pravidla ponecháme: Pouze v tomto dokumentu → OK. - V zobrazeném dialogu vybereme Kategorii:Rámeček a v Padding (vnitřní) a Margin (vnější okraj), zrušíme zatržení : Stejné pro všechny a do polí Top napíšeme 0 px → OK. Tímto bude obsah zobrazen hned pod záhlavím bez jakéhokoli okraje. Třetí pravidlo můžeme vytvořit duplikováním pravidla pro záhlaví: - v panelu Styly CSS označíme #zápatí, → kliknutím pravým tlačítkem vyvoláme lokální nabídku a v ní vybereme Duplikovat, v zobrazeném okně v poli Název selektoru přepíšeme #zápatí → OK. Nyní má pravidlo #záhlaví a #zápatí stejné vlastnosti, jejich změnu či přidání můžeme provést v panelu Styly CSS. - v panelu Styly CSS → Všechna pravidla označíme #zápatí → klepneme na Přidat vlastnost a z roletky vybereme do prvního pole Clear a do druhého pole Both. Tato vlastnost způsobí, že se blok #zápatí zarovná až pod elementy v plovoucím umístění v části #obsah.

175 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Nyní máme definovaná potřebná pravidla pro hlavní části layoutu a můžeme je postupně přidat do stránky. - Označíme text Sem patří obsah id „obal“, vymažeme ho. - V panelu Vložit (otevřeme ho z nabídky → Okno) zvolíme Kategorii →Rozvržení v něm klepneme na ikonu → Vložit tag Div. - V zobrazené nabídce vybereme Vložit: Za začátek tagu a roletky vybereme

a z roletky Identifikátor: záhlaví →OK. Tím jsme vložili značku

s identifikátorem # zápatí do nadřazeného elementu s id #obal

Podobným způsobem vložíme dovnitř elementu #obal další značky (#obsah a #zápatí), abychom tyto značky správně seřadili, použijeme Vložit: Za tag. Výplňový text nám ulehčuje orientaci na stránce. - V nástrojovém panelu Dokument napíšeme do pole Titul: Layout → Enter. - → Soubor → Uložit vše.

Test č. 18

Tvorba formulářů Úkoly: -

Otevřete stránku Kontakt-příjmení.html. 176 Integrovaná střední škola polygrafická, Brno, Šmahova 110

-

Vložte do mainContentu Formulář.

-

Vložte textové pole s názvem Jméno před položkou formuláře.

-

Vložte textové pole Spry s ověřením s názvem Email před položkou formuláře.

-

Uzavřete obě pole do sady polí s názvem Kontaktní údaje.

-

Vložte textové pole Spry s ověřením s názvem Uživ.jméno, min 6 znaků.

-

Vložte pole pro heslo, min.7 znaků, 2číslice.

-

Vložte pole pro zopakování hesla.

-

Předcházející pole vložte do sady polí s názvem Online informace.

PŘIDÁNÍ FORMULÁŘE DO STRÁNKY → Otevřeme z nabídkového řádku → Soubory → Otevřít → lekce 08 → kontakt- start.html. → Zvolíme Soubor uložit jako → do pole pro název napíšeme → kontakt-příjmení.html. → Původní soubor kontakt- start.html beze změny uzavřeme. Nyní musíme přidat značku , která bude obklopovat všechny ostatní prvky formuláře. → V elementu div s identifikátorem mainContent umístíme kurzor za otazník v nadpisu. → Otevřeme z nabídkového řádku → Okno → zde zaškrtneme →Vložit → v něm vybereme kategorii → Formulář → klikneme na první ikonu s názvem Formulář. DW vloží do kódu značku na vybrané místo a v Návrhu jej vyznačí červenou přerušovanou čarou (pokud se čára nezobrazí, zatrhneme v panelu → Dokumenty → Vizuální pomůcky → Neviditelné elementy). → Otevřeme z nabídkového řádku → Okno → zatrhneme nabídku Vlastnosti a v tomto panelu klepneme na ikonu složky vedle pole Akce. V zobrazeném dialogu najdeme v lekci 08 soubor zpracovani_formulare.html → OK.

177 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Pole akce uvádí cílovou stánku, která se zobrazí po potvrzení formuláře, v našem případě je akcí pouze načtení děkující stránky. → Soubor → Uložit. VKLÁDÁNÍ TEXTOVÝCH PRVKŮ

Textové prvky jsou základní formulářové prvky, používají značku ,sbírají data pomocí krátkých frází:

- textová pole

- textová pole Spry - textové oblasti Pro umožnění správného čtení jednotlivých formulářových prvků musíme nastavit v DW volbu, která nám zajistí výstupní kód formuláře ve správném formátu. Zvolíme z nabídkového řádku →Upravit → Předvolby → v zobrazeném dialogu zvolíme Kategorii Usnadnění přístupu a v ní zatrhneme pole Objekty formuláře →OK.

TEXTOVÉ POLE SPRY

DW obsahuje také Spry objekty pro formuláře, které používají Ajax. Všechny ovládací prvky Spry kombinují formuláře s JavaScriptem, to umožňuje validaci (ověření)vyplněných formulářových polí, tj. , zda do formulářového prvku byla vložena odpovídající data, nebo zda uživatel nezapomněl některé pole vyplnit. Kurzor umístíme za textové pole Jméno, stiskem kláves Shift + Enter zalomíme řádek. → V panelu Vložit v kategorii Formulář klepneme na ikonu Ověření textového pole Spry. V otevřeném dialogu do pole Identifikátor napíšeme email, do pole Popis napíšeme E-mail:, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části poloha vybereme volbu Před položkou formuláře → OK. → Soubor → Uložit. Pokud nás bude DW informovat o připojení externího JavaScriptu, odsouhlasíme 178 Integrovaná střední škola polygrafická, Brno, Šmahova 110

jej → OK.

Pokud je to potřeba otevřeme panel Vlastnosti z nabídkového řádku Okno,.v něm budeme upravovat ovládací prvek Spry. → Z roletky Typ vybereme volbu Emailová adresa, zatrhneme Ověřit při Onblur a volbu Vyžadováno, což znamená, že před odesláním formuláře jej musí uživatel vyplnit.

SADA POLÍ. První dvě textová pole uspořádáme do bloku s rámečkem s názvem (legenda) → klepneme vpravo od pole E-mail a stiskneme Enter,tím vytvoříme nový řádek. → Vybereme popisky Jméno a E-mail a textová pole. → V panelu Vložit klepneme na ikonu Sada polí → v zobrazeném dialogu do pole Popisy napíšeme Vaše kontaktní informace → OK → Soubor → Uložit. Sada polí se projeví až při živém zobrazení.

OVĚŘENÍ TEXTOVÉHO POLE → Klepneme za přidanou sadu polí, ale stále do červeného rámečku kolem formuláře→ Enter. → V panelu Vložit klepneme na ikonu Ověření textového pole Spry. V otevřeném dialogu do pole Identifikátor napíšeme uzivjmeno, do pole Popis napíšeme Uživ.jméno, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části poloha vybereme volbu Před položkou formuláře → OK. → V panelu vlastnosti zatrhneme volbu Ověřit při OnBlur, volbu Vyžadováno a v poli Min. 179 Integrovaná střední škola polygrafická, Brno, Šmahova 110

Počet znaků napíšeme 6 → Soubor → Uložit.

POLE PRO HESLO Kurzor umístíme za pole Uživ. Jméno, zalomíme řádek Shift + Enter, → v panelu Vložit klepneme na ikonu Heslo ověření sady Spry. V zobrazeném dialogu do pole Identifikátor napíšeme heslo, do pole Popis napíšeme Heslo, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části poloha vybereme volbu Před položkou formuláře → OK. → V panelu vlastnosti zatrhneme volbu Ověřit při OnBlur, volbu Vyžadováno, v poli Min. Počet písmen napíšeme 8, v poli Min. počet čísel napíšeme 2. Posuneme kurzor za pole pro heslo, zalomím řádek Shift + Enter, v panelu Vložit klepneme na ikonu Potvrzení ověření sady Spry. V zobrazeném dialogu do pole Identifikátor napíšeme potvrdheslo, do pole Popis napíšeme Zopakujte heslo, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části poloha vybereme volbu Před položkou formuláře → OK. V panelu Vlastnosti zatrhneme volbu Vyžadováno, v roletce Ověřit platnost podle vybereme volbu heslo ve formuláři form 1., zatrhneme volbu Ověřit OnBlur. Posuneme kurzor za pole pro potvrzení hesla a stiskem klávesy Enter vytvoříme nový odstavec.

Nyní se vrátíme před pole pro uživatelské jméno, pokud je to třeba, vytvoříme stiskem Enter prázdný odstavec a do něho napíšeme text: „Ke vstupu do online přehledu vašich rozpisů a plánů cest si prosím vytvořte účet zadáním uživatelského jména a hesla. Uživ. jméno musí obsahovat alespoň 6 znaků a heslo alespoň 8 znaků obsahujících minimálně 2 čísla.“ Napsaný text a všechny tři pole vybereme, v panelu Vložit klepneme na ikonu Sada polí, v zobrazeném dialogu napíšeme Online nástroje → OK → Soubor → Uložit, tím jsme instrukce 180 Integrovaná střední škola polygrafická, Brno, Šmahova 110

i tři pole uzavřeli do sady polí.

181 Integrovaná střední škola polygrafická, Brno, Šmahova 110

182 Integrovaná střední škola polygrafická, Brno, Šmahova 110

183 Integrovaná střední škola polygrafická, Brno, Šmahova 110

×

Report "INFORMAČNÍ A KOMUNIKAČNÍ TECHNOLOGIE -ADOBE DREAMWEAVER-"

Your name

Email

Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint

Description

Close Send

×

Sign In

Email

Password

Remember me Forgot password?

Sign In

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close