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

Transkript

1 Název projektu: Registrační číslo projektu: Zlepšení podmínek pro využívání ICT ve výuce CZ.1.07/1.1.02/ INFORMAČNÍ A KOMUNIKAČNÍ TECHNOLOGIE -ADOBE DREAMWEAVER- Zpracoval: Ing. Zdeněk Železný

2 Obsah: 1. lekce Tvorba www stránek úvod lekce Členění a formátování dokumentu lekce Úvod do Dreamweaveru CS lekce Vkládání textů a obrázků lekce Kaskádové styly CSS lekce Úprava textu panel vlastností lekce Externí šablona CSS lekce Změny pravidel a pořadí lekce Nastavení vlastních tří lekce Životopis samostatná práce lekce Vytvoření šablony stylů pro tisk lekce Import textu, tvorba nadpisů lekce Tvorba seznamů a blokových citací lekce Tvorba tabulek lekce Popisky sady Spry lekce Tvorba navigace lekce Tvorba interních a externích odkazů lekce Odkazy samostatná práce č lekce lekce Vkládání a použití obrázků lekce Práce s obrázky ve Photoshopu lekce Adobe Bridže lekce Pruh nabídek Spray lekce Spry panel se záložkami lekce Úprava stylu nabídek a záložky Spry lekce Chování Spry efektů lekce Import dat XML lekce Tvorba Spry skládaček lekce Layout stránky

3 30. lekce Obal stránky lekce Oblasti s obsahem lekce Vkládání výplní lekce Tvorba formulářů lekce Ovládací prvky Spry lekce Textové oblasti. 102 Testová část Test č. 1 Úvod do Adobe DW CS4 106 Test č. 2 Úpravy pomocí kaskádových stylů Test č. 3 Externí šablona CSS 117 Test č. 4 Nastavení pravidla pro vlastní třídu Test č. 5 Úpravy CSS stylů Test č. 6 Úprava textu panel vlastnosti Test č. 7 Externí šablona CSS Test č. 8 Nastavení vlastních tříd Test č. 9 Nastavení vlastních tříd. 140 Test č. 10 Import textu, nadpisy, seznamy Test č. 11 Práce s tabulkou Test č. 12 Navigace v rámci webu. 155 Test č. 13 Práce s obrázky Test č. 14 Nabídky Spry. 162 Test č. 15 Chování pomocí Spry efektů Test č. 16 Spry skládačky Test č. 17 Layout stránky Test č. 18 Tvorba formulářů

4 1. lekce TVORBA WWW STRÁNEK-ÚVOD WWW - World Wide Web Klient (browser, prohlížeč) je program, který komunikuje s uživatelem, na základě pokynů uživatele se obrací na jednotlivé servery, získává od nich data a zobrazuje je.př. Microsoft Internet Explorer, Netscape Navigator, Mozilla, Server je program, který přijímá a obsluhuje požadavky klientů. Př. Apache, Microsoft Internet Information Server, Zope WWW - historie CERN výzkumné centrum fyziky 1991 byl vytvořen web pro přenos informací a značkovací jazyk HTML 1.0.Novější verze HTML 4.0 slouží jako základna pro XHTML. Konsorcium World Wide Web pokračuje ve vývoji,změny je možné sledovat na adrese: návrhy konsorcia W3C se v současné době nahlíží jako na standardy.prohlížeče: Mosaic, Netscape Navigator, InternetExplorer, Opera, Mozilla Chrome Standardy pro Web HTTP HyperText Transport Protocol určuje pravidla komunikace mezi klientem a serverem. HTML HyperText Markup Language je jazyk,kterým se zapisují WWW stránky. Interpretaci stránky zajišťuje klient. XHTML extensible HyperText Markup Languageje jazyk, který vznikl přizpůsobením HTML pravidlům XML. CSS Cascading Style Sheets (kaskádové styly)slouží k popisu výsledného vzhledu stránky. (X)HTML editory WYSIWYG (What You See Is What You Get) editory Př: Adobe Dreamweaver CS4, MSFrontPage Textové editory Př: AceHTML, Poznámkový blok z MS Windows Konvertory z jiných datových formátů Př: aplikace MS Office Validátory jsou kontrolní nástroje, provádí kontrolu aupozorňují na chybná nebo problematická místa On-line služba: Jazyk (X)HTML je značkovací jazyk. K dokumentu se přidávají značky(tagy), které upravují vzhled dokumentu, zvýrazňujípotřebné údaje, formátují dokument, určují povahu obsahuprvku. Tyto značky umí číst a zpracovat program prohlížeč.<html xmlns=" 4

5 <!-- Creation date: > <head> <meta http-equiv="content-type" content="text/html;charset=windows-1250 /> <title>jméno</title> </head> <body> <h1>ukázka</h1>tento text se zobrazí <b>tučně</b> a tento <I>kurzívou</I>. </body> </html> Charakteristiky dokumentu Obsah Struktura Styl Obsah tvoří informace, kterou má dokument sdělit. Struktura rozdělení dokumentu na odstavce, stránky, sloupce Styl představuje způsob, jakým je dokument zobrazen. Při nezměněné struktuře a obsahu můžeme měnit styl. Struktura WWW stránky <html> <head> <title>jméno</title> </head> <body> <h1>ukázka</h1>tento text se zobrazí. </body> </html> Tagy (značky) <html> </html> určují začátek a konec dokumentu <head> </head> určují začátek a konec hlavičky hlavička se nezobrazuje, obsahuje další informace pro prohlížeč <body> </body> určuje tělo dokumentu, co je zde, to se zobrazuje WWW stránky Zásadně se odděluje obsah dokumentu tvoří se v HTML od jeho vzhledu (formátu) tvoří se pomocí CSS Rozdělení stránek: Statické stránky Dynamické stránky obsahují programy scripty, applety. 5

6 Tyto programy můžou běžet na lokálním počítači programy v jazyce JavaScript, Visual Basic Script, nebo na serveru, kde jsou stránky uložené programy v jazyce PHP, ASP, Pearl, Java Příkazy v části head 2. lekce ČLENĚNÍ A FORMÁTOVÁNÍ DOKUMENTU < title>.. </title> titulek stránky, nutný příkaz v XHTML <meta>.. </meta> informace o stránce, autorovi Členění dokumentu prvky stránky body blokové prvky: h1 h6 nadpisy p odstavec oddělený řádkou div obdélníkový blok ol, ul seznamy img - obrázek řádkové prvky: span úsek textu em kurzíva, zvýrazněný text strong tučně a - odkaz Blokové prvky text můžeme členit do odstavců bloků pomocí tzv.blokových prvků <p> </p> odstavec - paragraph <div></div> oddíl textu - division, který se používá pro definici stylu <h1></h1> nadpisy (6 úrovní) - headings <blockquote></blockquote> užívá se pro citovaný text 6

7 <pre></pre> předformátovaný text <br /> zalomení řádku <hr /> vodorovná čára Příklad Rozměry a vzdálenosti Jednotky relativní 1em velikost právě používaného prvku 1ex velikost x-výšky použitého písma 1px(pixel) 1 bod obrazovky doporučuje se vycházet z rozlišení 96dpi Jednotky absolutní 1mm, 1cm, 1in (palec-25,4mm) pt typografický bod (1/72 palce) pc typografická jednotka (1pc=12pt) Některé vlastnosti dovolují použít procenta. </head> <body style="background-color:gray"> <div style="color:red;font-size:18px;font-family:verdana"> Tento text je červený, má velikost 16 bodů a je napsaný fontem Verdana.</div> <p style="background-color:blue; color:yellow; margin:16pt"> Tento text je napsaný žlutě na modrém pozadí s 16 bodovým okrajem.</p> <div> Tento text je napsaný implicitním stylem. Protože nemá nastavenou barvu pozadí, má barvu prvku "body".</div> 7

8 </body > </html> Tento text je červený, má velikost 16 bodů a je napsaný fontem Verdana. Tento text je napsaný žlutě na modrém pozadí s 16 bodovým okrajem. Tento text je napsaný implicitním stylem. Protože nemá nastavenou barvu pozadí, má barvu prvku "body". Formátování bloků obsah okraj-margin rámeček-border padding-odstup od rámečku Příklad: <p style="margin:100px; border:1px solid black;padding:50px; backgroundcolor:#338601"> Blokové vlastnosti Rámeček border: síla, typ čáry, barva <p style="border:1px solid red"> <p style="border-bottom-color:#367851"> Výška height a šířka width obsahu bloku 8

9 <p style="width:50%;height:300px"> Odstup od rámečku padding <p style="padding:10px 10% 0 2mm"> <p style="padding:100px"> Okraje margin <p style="margin:100px"> Styl pozadí background nebo background-color <p style="background-color:#338601"> <p style="background:url(obrazek.jpg)"> 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: <big></big> zobrazí text v písmu větším než je základní <b></b> zobrazí text tučně <i></i> zobrazí text v kurzívě <u></u> zobrazí text podtržený <strike></strike> zobrazí text přeškrtnutý <sub></sub> zobrazí text jako dolní index <sup></sup> zobrazí text jako horní index 9

10 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é <ol> číslovaný seznam <li>základy</li> <li>text a písmo</li> </ol><ul> seznam s odrážkami <li>základy</li> <li>text a písmo</li> </ul> 10

11 Vkládání obrázku a videa <img src="obrazek.jpg" alt="" width="300"height="377"/> atribut src udává adresu obrázku atribut alt zobrazí popisný text atributy width a height udávají velikost obrázku <img dynsrc="video.avi" loop="infinite" start="mouseover"/> atribut dynsrc udává adresu videa atribut loop udává počet opakování atribut start udává událost, která video spustí Styly stránky Dokument XHTML by měl obsahovat pouze logicky rozčleněné informace (nadpisy,odstavce, bloky,...) Neměl by obsahovat žádné informace týkající se vzhledu!!! Ani rozvržení stránky pomocí tabulek! Vzhled dokumentu by se měl ovlivňovat jen pomocí tzv. STYLŮ, které by měly být uloženy JEN V SAMOSTATNÉM SOUBORU! Kaskádové definice stylů - deklarace pravidel pro zobrazení obsah a struktura stránky soubor.html vzhled stránky soubor.css výhody paměťově úsporné kratší přístup jeden obsah různé zobrazení stejný vzhled pro několik stránek, vytváří designer nevýhody 11

12 různá podpora u prohlížečů vzhled závisí do jisté míry od prohlížeče 3. lekce ÚVOD DO ADOBE DREAMWEAVERU CS4 POUŽITÍ UVÍTACÍ OBRAZOVKY Otevřeme si program Adobe Dreamweaver CS4, Start všechny programy Adobe Design Premium CS4 Adobe Dreamweaver CS4, můžeme si pro usnadnění jej vložit do nabídky Start. Uvítací obrazovka umožňuje rychlý přístup k naposledy otevřeným stránkám, jednoduchou tvorbu různých typů webových stránek a přímý přístup k tématům nápovědy. Uvítací obrazovka se zobrazuje ve chvíli, kdy spustíme program DW, nebo v okamžiku, kdy není otevřen žádný dokument. 12

13 Uvítací obrazovka se objeví při otevření programu DW. - ve sloupci Vytvořit nový klepneme na HTML, tím se nám otevře nová prázdná stránka. - pokud jsme na této stránce neudělali změny, stránku zavřeme Soubor Zavřít pokud nebudeme chtít uvítací obrazovku již nadále používat, můžeme její otevírání zrušit zatržením volby Příště nezobrazovat v levém spodním rohu okna. Opětovné zobrazování uvítací obrazovky můžeme vyvolat ve Volbách v kategorii Všeobecné 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, 13

14 Nová webová stránka se zobrazí jako dokument s výplňovým textem, který tam pouze pro lepší orientaci na stránce a představivost vložili tvůrci layoutu.(rozvržení stránky). Do tohoto okna budeme vkládat svůj vlastní obsah (text i obrázky) a upravovat vzhled stránky 14

15 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. 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 budou 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 4. lekce VKLÁDÁNÍ TEXTU A OBRÁZKŮ 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Ů 15

16 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, ale formátovací značka,párový tag <h1>,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 <p>( 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 <br>. 16

17 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 <h3> 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

18 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ř. <body> (tělo), <p> (odstavec), <h1> (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

19 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 <body> 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

20 - Ukazatel myši vložíme do textu v záhlaví Prohlédněte si s. - V selektoru značek vybereme element <div#header> (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

21 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 <tag> 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 <h1> - 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 <div#maincontent> - V panelu Styly CSS Vše v části Všechna pravidla vybereme selektor 21

22 .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 <Nové pravidlo CSS> 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

23 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

24 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: <link href="mojestyly.css" rel="stylesheet" type="text/css" media="screen" />. 24

25 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 <h1>. 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 <h1>,které jsou vnořeny (jsou následníky) identifikátoru #maincontent 25

26 - 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

27 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 <h1> uvnitř elementu s identifikátorem # maincontent. Jakmile do tohoto elementu na jiné místo vložíme novou značku <h1>, 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 <p> 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 </em>!! Podobně je to s přepínačem B (tučně) pro HTML kód tag <strong>tučně </strong>, v pravidlech CSS 27

28 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

29 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

30 - 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 <div> do dokumentu, abychom vytvořili oblasti layoutu nebo organizovali části stránky, značce,<div> 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

31 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 <div>.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 <div> 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 <div> OK. 31

32 Část stránky věnovaná Lindě se umístí do své značky <div>, 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 <img>, 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 em. 32

33 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

34 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 <h1> v #maincontent h1 na Osobní životopis a změňte na nadpis <h2>. - Vložte nové pravidlo do CSS stylů pro #maincontant h2: Font-family Textdekoration Verdana, Geneva, sains-serif Underline Color #009 - Přžepište text druhého nadpisu <h2> 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 <p> rok pořízení fotografie. - upravte pravidlo pro #sidebar 1p: Font-style Font-variant italic small-caps 34

35 Color #039 - Přepište text v zápatí stránky na : V Brně a řádek zalomte pomocí příkazu <br> 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 font-style font-size font-weight color Georgia, Times New Roman, Times, serif italic 36 px bolder # FC0 Pozadí: background-image obrázek č.2 Background-repeat Background-attachment Background-position (x) Background- position(y) repeat sroll left top - Upravte pravidlo CSS pro body: Pozadí: background-color #F9 35

36 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

37 - 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 <h1> 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

38 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 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 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

39 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 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ž 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ů <p>. 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 39

40 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ů) <h1>, <h6>, 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 <h2>. - 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 <h3>), 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

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

42 - 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í. 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

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

44 - 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

45 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 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

46 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 <table#hotely> 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

47 STYLOVÁNÍ TABULKY POMOCÍ CSS STYLŮ - Umístíme kurzor kamkoliv do tabulky, v selektoru značek vybereme <table#hotely>. - 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

48 - 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

49 - 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 <acronym>, 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

50 - 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

51 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 <h3> 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

52 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 ové 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

53 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 <a>, 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

54 Text odkazu bude teď žlutý se žlutým podtržením na modrém pozadí, jeho čitelnost bude vyšší. Jakékoliv značce <a> 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 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

55 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

56 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 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 a stiskneme ENTER. - Soubor Uložit. Výsledek si opět můžeme vyzkoušet v prohlížeči. 56

57 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: a 2a 3a 1b 2b 3b 57

58 - 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

59 - 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 u na adresu zdezelezny@seznam.cz, 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 stylypříjmení.css: Typ: Font-size: 24, Font-weight: bolder, Color: #600, 5 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

60 odkazů složku Práce č.2-příjmení zazipujte a pošlete jako přílohu k u 1 na adresu zdezelezny@seznam.cz, 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 Méně než 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

61 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

62 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

63 ú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

64 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

65 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

66 - 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

67 - 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

68 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

69 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 OVOU ADRESU Dalším používaným typem odkazu je odkaz na , jakmile na něj uživatel klepne, zobrazí se okno s novou a vyplněnou ovou 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 ový odkaz, v zobrazeném stejnojmeném dialogu napíšeme elaine@mojeadresa.cz - Soubor Uložit. 69

70 Funkce textového odkazu je závislá na existenci ového klienta nainstalovaného v počítači uživatele,např.out look, odkaz nebude fungovat, pokud uživatel k posílání ů 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

71 - 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ž 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

72 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

73 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 <div.profil>, 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

74 - 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

75 - 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 <a>. 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

76 - 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

77 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

78 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

79 - 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

80 - 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

81 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

82 - 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 (</head>). 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

83 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

84 - 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> před obrázkem až po uzavírací značku</ul> 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

85 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 <div> - 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

86 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

87 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

88 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 <div> s identifikátorem #obal styly.dw nám umožní přímé přidání značky <div> 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 <div> s výplní pro obsah, která obsahuje text sem patří iobsah pro id obal. Značka <div> s identifikátorem #obal slouží jako obalový element (kontejner) pro další značky <div>, 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

89 Každá z těchto částí vyžaduje pravidlo CSS a značku <div>. - 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

90 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 <div id= obal > a z roletky Identifikátor: záhlaví OK. Tím jsme vložili značku <div> 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

91 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 <div>, 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 <div>, kterou nyní umístíme do značky <div> s identifikátorem #záhlaví. - V panelu Vložit klepneme na ikonu Vložit tag Div, v zobrazeném dialogu vybereme z roletky 91

92 Vložit volbu Za začátek tagu a z rolrtky vpravo vybereme značku <div id = zahlavi >. Z roletky Identifikátor vybereme logo OK. Protože jsme do elementu <div> 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 <div id= logo > 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 na

93 - V panelu Vložit klepneme na ikonu Vložit tag Div a zobrazeném dialogu vybereme : Za tag, <div id= záhlaví > 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

94 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 <div id= obsah > 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 <div id= sloupec-levý > 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

95 - 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 <div> 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 <div#sloupec-levý>, levou kurzorovou šipkou se posuneme na místo před značku <div #sloupec-levý>, 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 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

96 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 <head> 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

97 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 <form>. 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

98 Po vyplnění se formuláře odesílají k dalšímu zpracování. Elektronické formuláře zahrnují značku <form>, 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 <form>, 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 <form> 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

99 Textové prvky jsou základní formulářové prvky, používají značku <input>,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 , do pole Popis napíšeme , 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

100 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 ová 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 a stiskneme Enter,tím vytvoříme nový řádek. Vybereme popisky Jméno a 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

101 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

102 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

103 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

104 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 <fieldset> 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

105 TESTOVÁ ČÁST 105

106 Úkoly: Test č. 1 Úvod do Adobe DW CS 4 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

107 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

108 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

109 ale formátovací značka,párový tag <h1>,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 <p>( 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 <br>. 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 <h3> 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

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

111 Test č. 2 Úpravy pomocí kaskádových stylů Úkoly: 1. Otevřete vámi vytvořenou stránku Umbria-příjmení.html z lekce 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

112 ZMĚNA BARVY POZADÍ K úpravě vlastností pomocí CSS můžeme použít jakékoliv značky HTML, např. <body>(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 <body> můžeme přidělit vlastnosti i jiným elementům.vlastnosti můžeme 112

113 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 <div#header> (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

114 - 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 <tag> 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 <h1> - 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

115 - 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 <div#maincontent> - 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

116 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 <Nové pravidlo CSS> 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

117 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 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

118 - 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: <link href="mojestyly.css" rel="stylesheet" type="text/css" media="screen" />. 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

119 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 <h1> 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 <h1>,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 <h1> uvnitř elementu 119

120 s identifikátorem # maincontent. Jakmile do tohoto elementu vložíme novou značku <h1>, 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 <p> 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 </em>!- 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

121 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

122 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

123 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

124 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 <h1> 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

125 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

126 Úkoly: Test č. 5 Úpravy CSS stylů 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ř. <body> (tělo), <p> (odstavec), <h1> (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

127 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 <body> 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

128 - Ukazatel myši vložíme do textu v záhlaví Prohlédněte si s. - V selektoru značek vybereme element <div#header> (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

129 Úkoly: Test č. 6 ÚPRAVA TEXTU- PANEL VLASTNOSTI 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 <tag> 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 <h1> - 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

130 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 <div#maincontent> - 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 <Nové pravidlo CSS> a Upravit pravidlo 130

131 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

132 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

133 - 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: <link href="mojestyly.css" rel="stylesheet" type="text/css" media="screen" 133

134 />. 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 <h1>. 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

135 - 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 <h1>,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

136 Úkoly Test č. 8 NASTAVENÍ VLASTNÍCH TŘÍD 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

137 - 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 <div> do dokumentu, abychom vytvořili oblasti layoutu nebo organizovali části stránky, značce,<div> 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

138 - 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

139 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 <div>.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 <div> 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 <div> OK. Část stránky věnovaná Lindě se umístí do své značky <div>, 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

140 - vybereme myší ELAINE, v selektoru značek musíme mít vybráno <img>, 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. Úkoly: - Otevři soubor onas-příjmení.html. Test č. 9 Nastavení vlastních tříd - 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

141 - 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 <div> do dokumentu, abychom vytvořili 141

142 oblasti layoutu nebo organizovali části stránky, značce,<div> 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

143 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 <div>.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 <div> 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 <div> OK. Část stránky věnovaná Lindě se umístí do své značky <div>, 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

144 - vybereme myší ELAINE, v selektoru značek musíme mít vybráno <img>, 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. Úkoly: Test č. 10 Import textu, nadpisy, seznamy - 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 <h3>. - Převeďte odstavce pod <h3> 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

145 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ů <p>. 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ů) <h1>, <h6>, 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

146 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 <h2>. - 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 <h3>), 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) <ul> - číslované seznam značkou (tagem) <ol> o jednotlivé významové řádky jsou označeny značkou (tagem) <li> v obou druzích seznamů. Všechny tagy jsou párové,to znamená, že jsou na začátku i konci seznamu i řádků (</li>). - vybereme ve vloženém textu nedokončené věty (v HTML kódu jsou označeny jako samostatné odstavce <p> a </p> od Úžasné bílé zdi až po Noční život, který si nemůžeme nechat ujít. 146

147 - 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

148 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

149 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

150 - Úkoly: - -Otevřete Santorini-příjmení.html - Vytvořte tabulku 3 sloupce 5 řádků Test č. 11 Práce s tabulkou - 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 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

151 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 <table#hotely> 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

152 - 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 <acronym>, 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

153 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

154 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 <h3> 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

155 - jakmile je nahrazení provedeno, dialogové okno zavřeme, soubor Uložit vše. Úkoly: Test č. 12 Navigace v rámci webu - - 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

156 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 ové 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

157 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 <a>, 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 <a> 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 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

158 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

159 Úkoly: - Otevřete soubor Naxos-příjmení.html. Test č. 13 Práce s obrázky - 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

160 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

161 - 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

162 Úkoly: - Otevřete stránku onas-příjmení.html. Test č. 14 Nabídky Spry - 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

163 - 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ž 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

164 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

165 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

166 - 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

167 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. Úkoly: - Otevřete soubor Santorini-příjmení.html. Test č. 16 Spry skládačky - Pod h1 nadpis v maincontentu vložte Spry skládačku. 167

168 - 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

169 - 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> před obrázkem až po uzavírací značku</ul> 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

170 - 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, Úkoly: Test č. 17 Layout stránky - 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 <div> - ty vytváří strukturu stránky. sada pravidel CSS - pomocí nich se definují rozměry a formátují klíčové elementy stránky. 170

171 - 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

172 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

173 - 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 <div> s identifikátorem #obal styly.dw nám umožní přímé přidání značky <div> a přidělení identifikátoru. 173

174 - 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 <div> s výplní pro obsah, která obsahuje text sem patří iobsah pro id obal. Značka <div> s identifikátorem #obal slouží jako obalový element (kontejner) pro další značky <div>, 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 <div>. - 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

175 - 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

176 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 <div id= obal > a z roletky Identifikátor: záhlaví OK. Tím jsme vložili značku <div> 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. Úkoly: - Otevřete stránku Kontakt-příjmení.html. Test č. 18 Tvorba formulářů 176

177 - 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 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 <form>, 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 <form> 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

178 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 <input>,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 , do pole Popis napíšeme , 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

179 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 ová 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 a stiskneme Enter,tím vytvoříme nový řádek. Vybereme popisky Jméno a 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

180 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

Zobrazit více