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. David Adamovský

2 Obsah: 1. lekce HTML kód a jeho použití, nastavení Dreamweaveru lekce Úvod do Dreamweaveru, založení nového dokumentu lekce Úvod do Dreamweaveru, použití CSS stylů lekce Úvod do Dreamweaveru, práce v zobrazení Kód a Kód a návrh lekce Nástroje Dreamweaveru, panel vlastností lekce Nástroje Dreamweaveru, práce s kaskádovými styly lekce Nástroje Dreamweaveru, práce s kaskádovými styly - pokračování lekce Nástroje Dreamweaveru, práce s třídami lekce Vkládání objektů lekce Odkazy k textu seznamům a tabulkám lekce Vytvoření seznamů lekce Stylování tabulek lekce Propojení s Photoshopem lekce Propojení s Photoshopem, část lekce Propojení s Photoshopem, část lekce Tvorba navigace pomocí CSS stylů lekce Tvorba navigace pomocí CSS stylů, část lekce Tvorba navigace pomocí nabídek Spry lekce Tvorba navigace pomocí nabídek Spry - pokračování lekce Integrace Java Skriptu lekce Integrace Java Skriptu, část 2., použití jazyka XML lekce Samostatná práce vytvoření Spry skládaček lekce Samostatná práce vytvoření layoutu stránky lekce Samostatná práce vytvoření layoutu stránky, 2. část lekce Samostatná práce vytvoření layoutu stránky, 3. část lekce Samostatná práce vytvoření layoutu stránky, 4. část lekce Samostatná práce vytvoření layoutu stránky, 5. část lekce Samostatná práce tvorba formulářů lekce Samostatná práce tvorba formulářů, 2. část

3 30. lekce Samostatná práce tvorba formulářů, 3. část lekce Samostatná práce tvorba formulářů, 4. část lekce Samostatná práce tvorba formulářů, 5. část lekce Samostatná práce publikování stránek na Internetu lekce Samostatná práce publikování stránek na Internetu, 2. část lekce Samostatná práce publikování stránek na Internetu, 3. část. 192 Testová část Test č. 1 HTML kód a jeho použití, nastavení Dreamweaveru 196 Test č. 2 Úvod do Dreamweaveru, založení nového dokumentu Test č. 3 Úvod do Dreamweaveru, použití CSS stylů 198 Test č. 4 Úvod do Dreamweaveru, práce v zobrazení Kód a Kód a návrh Test č. 5 Nástroje Dreamweaveru, panel Vlastnosti. 200 Test č. 6 Nástroje Dreamweaveru, práce s kaskádovými styly. 201 Test č. 7 Nástroje Dreamweaveru, práce s kaskádovými styly, pokračování Test č. 8 Nástroje Dreamweaveru, práce s třídami.203 Test č. 9 Vkládání objektů. 204 Test č. 10 Odkazy k textu seznamům a tabulkám Test č. 11 Vytvoření seznamů. 206 Test č. 12 Stylování tabulek. 207 Test č. 13 Propojení s Photoshopem 208 Test č. 14 Propojení s Photoshopem, část Test č. 15 Propojení s Photoshopem, část Test č. 16 Tvorba navigace pomocí CSS stylů Test č. 17 Tvorba navigace pomocí CSS stylů, část Test č. 18 Tvorba navigace pomocí nabídek Spry Seznam použité literatury 214 3

4 1. lekce HTML KÓD A JEHO POUŽITÍ, NASTAVENÍ DREAMWEAVERU HTML (ze zkratky Hyper Text Markup Language) je programovací jazyk, umožňující vytváření a zobrazování WWW stránek. Při tvorbě WWW stránky její tvůrce v jazyku HTML vytvoří postup, jak má být stránka zobrazena v prohlížeči a při jejím otevírání se prohlížeč řídí jednotlivými značkami (tagy).tyto značky pak určují postup pro prohlížeč, co a jak má být zobrazeno. Je tedy zřejmé, že nejsou přenášeny celé www stránky, ale pouze postup k jejich sestavení, které je závislé na použitém typu prohlížeče.to umožňuje například použití formulářů na stránkách nebo jiného zpětnovazebního mechanizmu. Je několik možností, jak vytvářet HTML soubor. Buď použiji pouze textový editor, např. notepad, který nám ovšem s ničím nepomůže ale na druhé straně je tvorba kódu zcela pod kontrolou programátora. Použití této varianty vyžaduje programátora dokonale obeznámeného s HTML příkazy. Jinou variantou je použití čistě grafického návrhářského systému, kde je www stránka vytvářena jako v textovém editoru. Tato varianta je jednoduchá, ale kód takto generovaný je možné jen těžko upravovat dle vlastních požadavků, a navíc bývá takový kód obalen spoustou nepotřebného balastu, který navyšuje jeho velikost a zmenšuje průhlednost. My použijeme metodu kombinující výhody obou systémů, tj. tvorbu pomocí grafického rozhraní s následnou úpravou a doladěním pomocí změn v HTML kódu. Proto se v průběhu studia některé HTML příkazy naučíme budeme pracovat i s kaskádovými styly. Pro výuku budeme používat program Adobe Dreamweaver verze CS4, který je v současnosti jedním z nejrozšířenějších programů pro tvorbu www stránek. Pro výuku použijeme připravený materiál fiktivních www stránek cestovní kanceláře, jehož použitím si objasníme principy fungování www stránek i celých www serverů. Metoda výuky zpětným rozborem již vytvořeného příkladu je efektivní a přináší rychlé výsledky, protože se žáci mohou soustředit již na vlastní práci a ne na přípravu materiálů. 4

5 Dreamweaver a jeho nastavení Program Adobe Dreamweaver je komplexní návrhářský nástroj, který je potřeba před prvním použitím připravit a nastavit jeho rozhraní tak aby vyhovovalo pro naší práci. Prvním krokem je kontrola nastavení atributů vkládání : 1. Spusťte Dreamweaver CS4 ( dále jen DW) 2. Zvolte Upravit Předvolby 3. V dialogu Předvolby v seznamu Kategorie kliknme na Usnadnění přístupu a zaškrtneme všechny čtyři volby. 4. Stiskněte tlačítko OK Dalším je nastavení klasického rozvržení pracovní plochy. Klikneme na rozbalení grafického návrháře a zvolíme klasické rozvržení. Tím je program připraven a je možné začít s tvorbou webu. Nejprve je nutné nastavit webové místo, kam se budou ukládat všechny soubory. Až se bude web publikovat, provede se kopie tohoto adresáře do místa přiděleného providerem připojení. 1. Spusťte DW 2. Zvolte Web Nový web Další volby 3. Zadáme cesty k souborům a k adresáři grafikou 5

6 Použití uvítací obrazovky Uvítací obrazovka umožňuje přístup k naposledy otevřeným stránkám, tvorbě různých druhů webových stránek a k nápovědě. Pro vytvoření nového souboru zvolíme tlačítko Vytvořit nový HTML 2. lekce ÚVOD DO DREAMWEAVERU, ZALOŽENÍ NOVÉHO DOKUMENTU Volba layoutu CSS V programu DW je použito 32 různých layoutů (vzhledů) vytvořených pomocí CSS, každý s různým vzhledem. Tyto layouty jsou pečlivě vybrány a otestovány pro bezproblémový chod na 6

7 libovolném prohlížeči i operačním systému. Jsou k dispozici jak varianty s pevnou šířkou jednotlivých sloupců ( označeny symbolem zámku ), tak s proměnnou šířkou ( mají symbol provazu ). 1. Zvolte Soubor Nový 2. V dialogu Nový dokument vyberte Prázdná stránka 3. Ve sloupci Typ stránky vyberte HTML 4. Ve sloupci Rozvržení zvolte 2 sloupce pevné, postranní sloupec vlevo, záhlaví, zápatí 5. klikněte na Vytvořit Nová stránka se zobrazí jako dokument s výplňovým textem. To je okno dokumentu, kde budete ukládat svůj vlastní obsah. Ukládání stránky Po vytvoření stránky je nutné ji co nejdříve uložit. 1. Zvolte Soubor Uložit nebo klávesovou zkratku CTRL + S 2. Jakmile se objeví dialog Uložit jako, najděte složku lekce 01 a do názvu napište umbria.html. Je jedno, jestli se použije přípona HTM nebo HTML, obě jsou správné, nicméně v rámci jednoho webu se smí použít jen jeden typ 7

8 3. Klikněte na tlačítko Uložit Zobrazení dokumentu DW umožňuje různé způsoby pohledu na tutéž stránku: Návrh vykresluje stránku tak, jak bude vypadat v prohlížeči Kód zobrazuje zdrojový kód stránky Rozdělit zobrazí zároveň návrh i kód Živé zobrazení vykresluje stránku v prohlížeči Dreamweaver Změna titulku stránky Titulek webové stránky se zobrazuje v titulkovém panelu okna prohlížeče a je to klíčový prvek používaný vyhledávači k indexování webových stránek. Proto je nutné vždy změnit standardně nastavený titulek Dokument bez názvu na titulek, popisující specifickou webovou stránku. 1. přejděte do zobrazení Návrh 2. V poli Titul v nástrojové liště dokumentu vyberte text Dokument bez názvu 3. Napište Prohlídka měst v Umbrii a stiskněte Enter Změna nadpisů Výplňové nadpisy se v DW dají lehce změnit. Výplňové nadpisy a text 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. 1. Poklepejte na text Záhlaví, čímž ho vyberete. Poté napište Prohlédněte si s námi Umbrii. Text lze vybírat různými způsoby, jako je tomu třeba v textových editorech 8

9 2. Ukazatel myši nejdříve umístíme před výplňový text Hlavní obsah a vybereme 3. Vybraný text nahradíme : Vy se bavte, my obstaráme ostatní. Tím je nahrazen text, ale formátování značky <h1> zůstává 4. Zvolte Soubor Uložit Vkládání textu Odstavec textu lze změnit stejně jednoduše, jako u nadpisu 1. Myší najeďte na začátek výplňového textu a označte oba odstavce. Dejte pozor, ať neoznačíte text Zápatí 2. Klávesou Delete text smažte 3. V Průzkumníkovi otevřete text z lekce 01 dovolena.rtf 4. Vyberte celý text a stiskněte CTRL+C čímž text zkopíruji do schránky 5. V DW umístěte kurzor pod nadpis Vy se bavte. My obstaráme vše ostatní a stiskněte CTRL+V, čímž se text nakopíruje ze schránky 9

10 6. Do zápatí zapište text Prohlídka měst v Umbrii 7. Řádek zalomte stisknutím SHIFT + ENTER. Poté napište Kontaktujte nás. Vkládání obrázků Vkládání obrázků je velmi jednoduché. Jakmile se obrázek umístí do stránky je možné měnit jeho vlastnosti buď použitím panelu Vlastnosti, nebo pomocí panelu Styly CSS 1. Vyberte veškerý obsah v postranním panelu, včetně výplňového nadpisu a dvou dalších odstavců 2. Smažte text 3. V selektoru značek, umístěném v liště pod oknem, klepněte na <h3> a tuto značku smažte 4. Pokud se nezobrazuje panel Vložit, zapneme jej příkazem Okno Vložit. Vybereme tlačítko Obraz 10

11 5. V dialogu vybereme zdroj obrazu a v adresáři s obrázky vybereme obrázek zahrada.jpg a klikneme na OK. 6. V dialogu Atributy tagu pro usnadnění přístupu napíšeme do pole Alternativní text zahrada a klikneme na OK Alternativní text se používá při zobrazení stránky bez grafiky, např. při prohlížení stránky browsery mobilních zařízení. 7. Ukazatel myši umístěte na začátek odstavce hlavního obsahu, který začíná slovy Přijeďte si užít dovolenou.. a vyberte Obraz v panelu Vložit. 11

12 8. V dialogu vyberte obrázek italske-horske-město.jpg a klepněte na OK 9. Do alternativního textu napište italské horské město a klepněte na OK 10. V panelu Vlastnosti z roletky Třída zvolte fltrt. Třída fltrt (zkratka z anglického float right česky zarovnej doprava) je styl CSS, který zajistí umístění elementu do prava. Text bude obtékat obrázek zleva. Třída fltlft umístí obrázek doleva a text obtéká zprava. 11. Soubor uložte 12

13 3. lekce ÚVOD DO DREAMWEAVERU, POUŽITÍ CSS STYLŮ Vybírání a úprava CSS stylů Moderní webové stránky používají ke stylování a tvorbě layoutů kaskádové styly CSS. CSS zajišťují vzhled a rozvržení stránky kde se umístí elementy, jaké se použijí barvy či pozadí. V této lekci upravíme barvu pozadí stránky, přidáme grafiku a upravíme několik vlastností textu a to pomocí CSS. Změna barvy pozadí stránky CSS lze použít k úpravě vlastnosti jakékoli značky HTML, např. značky <body> 1. Zvolte Okno Styly CSS 2. V panelu CSS styly klepněte na tlačítko Vše. Všechny zobrazovací režimy CSS stylů jsou přiřazeny k aktuální stránce a proto je nutné mít otevřený nějaký dokument v dokumentovém okně, aby se styly zviditelnily. 3. Rozbalte záznam <style> v části Všechna pravidla kliknutím na znaménko + Nyní najděte pravidla stylů v hlavičce dokumentu. DW ukazuje, že jde o interní styly v dokumentu pomocí ostrých závorek: <style>. V dalších lekcích budeme pracovat se styly uloženými v externí šabloně stylů. DW seřadí tyto styly v panelu Styly CSS podle názvů 4. Vyberte selektor <body> a klepněte na tlačítko Upravit styl, které symbolizuje obrázek tužky na panelu vpravo dole. 5. Jakmile se zobrazí dialog pro definici pravidla pro body, vyberte kategorii Pozadí. Klepněte na tlačítko s paletou barev, čímž otevřete paletu barev. Barvu vyberete pomocí kapátka. 6. V paletě vybereme kapátkem bílou barvu 7. Klepněte na OK. DW si novou barvu poznamená do části Vlastností v panelu Styly CSS. 13

14 8. Náhled přes celou obrazovku zobrazíme klávesou F4. Pozadí se změnilo z šedé na bílou. Barva pozadí záhlaví, zápatí i postranního panelu zůstala zachována. Podobně, jako značce <body> je možné i jiným elementům stránky např.elementu <div#sidebar1> přiřadit vlastní barvu pozadí. 9. Soubor uložte Vkládání grafického pozadí do záhlaví Zatímco se obrázky do popředí vkládají přímo do stránky, pro vložení obrázků do pozadí je nutné použít CSS. 1. Ukazatel myši umístíte kamkoliv do textu v záhlaví Prohlédněte si s námi Umbrii 2. V selektoru značek vyberte <div#header>. Pokud se v dokumentovém okně element vybere pomocí selektoru značek, zobrazí se kolem vybraného elementu obrys ve formě modré čáry 3. V panelu Styly CSS klepněte na Aktuální,čímž se přepneme do režimu, zobrazující vlastnosti aktuálního elementu 4. Přepneme do části Pravidla klepnutím na ikonu Zobrazit kaskádu pravidel pro vybraný tag V části Pravidla poklepejte na.twocolfixlthdr #header h1 5. Jakmile se zobrazí dialog s definicemi pravidel pro.twocolfixlthdr #header vyberte kategorii Pozadí. Poté klepněte na tlačítko Procházet vedle pole Obrázek na pozadí 6. Zvolte soubor záhlaví-oblaka.jpg 14

15 7. Z roletky Backround-repeat vybelte volbu no repeat a klikněte na OK 8. Klepněte kamkoli do stránky, tak se zruší výběr záhlaví a zobrazí obrázek na pozadí Úprava textů, písma a barev CSS umožňují plnou kontrolu nad vzhledem stránky. Je možné změnit nejen všechny elementy na stránce i v celém webu naráz, ale je možné změnit i jen jedno místo. 1. Ukazatel myši umístěte kamkoliv do textu v záhlaví Prohlédněte si s námi Umbrii. 2. V selektoru značek vyberte <h1> 3. V panelu Styly CSS vyberte režim Současný 15

16 4. V části Pravidla klepněte na ikonu Ukázat kaskádu pravidel pro vybraný tag. Vyberte selektor.twocolfixlthdr #header h1 5. Klepněte na ikonu Upravit styl 6. Jakmile se zobrazí dialog pro definici stylu v seznamu Kategorie zvolte Typ 7. Z roletky Písmo vyberte jiné typy písma, jako třeba Georiga. nebo jiné typy písem ze seznamu. Na všech počítačích nejsou vždy nainstalované stejné druhy písma, takže se jejich výběr provádí po skupinách. Většina voleb končí buď serif (patkové) nebo sans-serif (bezpatkové) 8. Klepněte na ikonu palety barev u pole Barva a pomocí kapátka zvolte bílou barvu. Potvrďte stisknutím tlačítka OK 16

17 9. Klepněte kamkoliv do stránky abyste zrušili výběr záhlaví Stejným způsobem je možné nastavit typ písma i ostatní vlastnosti elementů Změna velikosti textu Kromě změny typu písma a barvy je možné změnit i velikost textu 1. Ukazatel myši umístěte kamkoliv do nadpisu nebo do odstavce textuhlavního obsahu stránky 2. V selektoru značek vyberte <div#maincontent> 17

18 3. V panelu Styly CSS klepněte na tlačítko Vše. V části Všechna pravidla vyberte selektor.twocolfixlthdr #maincontent. Poté klepněte na ikonu Upravit styl 4. Jakmile se zobrazí dialog s definicí pro vybrané pravidlo, vyberte kategorii Typ 5. Velokost textu těla stránky je v tomto layoutu nastavena na 100%. Velikost textu změníme tak, že do pole Font-size napíšete 90 a roletkou vpravo zvolíme % Poté klepnem na OK. Nyní vidíme, jak se změnil zadaný text. 6. Soubor nyní uložte 4. lekce ÚVOD DO DREAMWEAVERU, PRÁCE V ZOBRAZENÍ KÓD A KÓD A NÁVRH Cíl hodiny: vysvětlit princip práce v režimu zobrazení Kód a návrh Zobrazení Kód 1. Otevřete dokument umbria.html 18

19 2. V prvním odstavci vyberte frázi Práci nechte na nás a užívejte si zábavy! 3. V nástrojové liště Dokument, která je umístěná přímo nad oknem dokumentu, klepněte na tlačítko Kód Jakýkoli výběr obsahu lze provézt také v zobrazení Kód. Změna v jednom zobrazení se projeví také v tom druhém 4. V panelu nástrojů Dokument klepněte na tlačítko Rozdělit. Tak je možné zobrazit obě zobrazení, jak Kód, tak Návrh 5. Ukazatel myši umístěte na rámeček mezi zdrojovým kódem a zobrazením Návrh, dokud se kurzor nezmění na oboustranně kótovanou šipku. Levým tlačítkem je pak možné měnit poměr mezi jednotlivými okny. 6. V zobrazení Návrh vyberte větu Práci nechte na nás a užívejte si zábavy! a napište Vy se bavte, my se o vše postaráme! Provedená změna se projeví okamžitě v obou zobrazeních 7. V zobrazení Kód okna dokumentu najděte ve druhém odstavci slovo zahrnuje. Slovo vymažte a místo něj napište dostanete. V zobrazení Návrh změna zatím neproběhla 8. Klepněte do zobrazení Návrh, čímž potvrdíte změny ve zdrojovém kódu a aktualizujete stránku 19

20 Práce ve vodorovně nebo svisle rozdělených zobrazeních V režimu zobrazení Kód a Návrh je možné zvolit jak se obrazovka rozdělí, zda vodorovně nebo svisle 1. Zvolte příkaz Zobrazení Rozdělit svisle Funkce ve svislém rozdělení zobrazení Kód a návrh jsou naprosto stejné jako v rozdělení vodorovném 2. V panelu nástrojů Dokument klepněte na tlačítko Kód 3. Zvolte Zobrazení Rozdělit kód Dvě zobrazení stránky s kódem se zobrazí vedle sebe.nyní je možné rolovat kódem v obou částech zvlášť. Pomocí zobrazení Rozdělit kód můžete kopírovat a vkládat kód z jedné části stránky do druhé. Všechny změny v jedné části se projeví také v druhé. 20

21 4. Pokud chcete kód rozdělit vodorovně, zrušte zatržení volby Zobrazení Rozdělit svisle 21

22 5. V panelu nástrojů Dokument klepněte na tlačítko Návrh 6. Soubor uložte 5. lekce NÁSTROJE DREAMWEAVERU, PANEL VLASTNOSTI Používání panelu Vlastnosti Ačkoliv je panel Vlastnosti pouze dalším panelem, zaslouží si speciální zmínku kvůli variabilitě svých možností a zásadní roli při práci designéra. Volby v panelu Vlastnosti se mění podle aktuálního výběru. Například když vyberete text, zobrazí se panel Vlastnosti pro text s nástroji umožňujícími použití formátování a změnu zarovnání. Pokud je vybraný jakýkoli obrázek, zobrazí se panel Vlastností pro daný obrázek s hodnotami šířky a výšky obrázku, stejně tak jako odkazy na další editační nástroje, např. Adobe Photoshop. 1. Otevřete soubor umbria.html 2. Pokud není pod oknem dokumentu vidět panel Vlastnosti zvolte Okno Vlastnosti 22

23 3. V selektoru značek ve spodní části okna dokumentu vyberte <body.twocolfixlthdr> Panel Vlastnosti je rozdělen do dvou částí: HTML a CSS. Vlastnosti se zobrazují v závislosti na tom, které tlačítko, zda HTML nebo CSS, stisknete. Dalšími ovládacími prvky v panelu Vlastnosti jsou tlačítka pro tučnost a kurzivu ve formě přepínačů. Prvním klepnutím aktivujete, druhým deaktivujete. 4. Klepněte na tlačítko HTML 5. V okně dokumentu vyberte větu Po dva týdny si budete užívat bezstarostných radovánek 6. Klepněte na tlačítko I, čímž změníte text na zvýrazněný text 7. V panelu Vlastnosti klepněte na tlačítko CSS 8. V selektoru značek vyberte <em> 9. Z nabídky Odkazované vyberte <Nové pravidlo CSS> 10. V panelu Vlastnosti klepněte na Upravit Pravidlo. Zobrazí se dialogové okno Nové pravidlo CSS. 23

24 V seznamu Název selektoru DW vysvětluje, co který selektor provádí 11. Klepněte dvakrát na tlačítko Méně specifické pod polem Název selektoru, takže se selektor změní na #maincontent p em 12. Stiskněte OK. Zobrazí se dialog Definice pravidla CSS pro #maincontent p em. 13. Otevřete paletu barev u pole Barva a pomocí kapátka vyberte novou barvu, jakoukoli jinou než bílou a klepněte na OK 24

25 Zvýrazněná věta se nyní zobrazí jinou barvou Pravidla stylů nyní obsahují nové pravidlo, které je možné použít na jakákoli další slova, fráze nebo věty v odtavci uvnitř elementu div s identifikátorem maincontent. Pouze se vybere text, který budeme měnit a zvýrazníme ho klepnutím na tlačítko I v panelu Vlastnosti. Panel Vlastnosti jsme použili k vytvoření zvýrazněného textu a přidali jsme k němu pravidlo CSS. DW často nabízí mnoho druhů panelu Vlastnosti, mimo těch pro text a obrázky. Každému elementu, který vybereme v okně dokumentu, bude odpovídat jeho vlastní panel Vlastnosti. 25

26 Prohlédnutí stránky v Živém zobrazení Živé zobrazení nám umožní prohlédnout si stránku, jako by byla zobrazena v prohlížeči přímo v Dreamweaveru. 1. V panelu nástrojů klepněte na tlačítko Živé zobrazení. Ekvivalentem je i stisknutí klávesy F11. Okno dokumentu nahradí živé prohlížení v prohlížeči. Pokud stránka obsahuje elementy, jako jsou hyperlinky, JavaScript, nebo flashové animace, pak budou v živém zobrazení aktivní. 2. Pro návrat do režimu úprav znovu klepněte na tlačítko Živé zobrazení, nebo F11 Prohlídka hotového souboru 6. lekce NÁSTROJE DREAMWEAVERU, PRÁCE S KASKÁDOVÝMI STYLY Nejprve si prohlédneme soubor, který budeme vytvářet. 26

27 1. V panelu Soubory rozbalte pomocí znaménka + složku lekce Zvolte soubor onas-dokonceno.html a stiskněte klávesu F12 3. Prohlédněte si stránku ve svém prohlížeči. Všimněte si layoutu a různých stylů použitých na text všechny byly vytvořeny pomocí stylů CSS Připojení externí šablony stylů Jedním z pravidel moderního webdesignu je udržovat většinu CSS stylů v externí šabloně stylů. Běžně by pak všechny stránky měly být propojeny s odpovídající šablonou stylů. Tento postup vám umožní provést jednoduchou změnu stylů - například když budete chtít změnit barvu textu značky <hl>, která se provede na celém webu. Dreamweaver poskytuje přímočarý způsob, jímž lze externí šablonu stylů ke stránce připojit. 1. Jestliže se panel Soubory (Files) nezobrazuje, zvolte Okno (Window) > Soubory (Files). 2. V panelu Soubory (Files) poklepejte na soubor lekce02 onas-start.html, čímž stránku otevřete v dokumentovém okně. Jak můžete vidět, na stránce se vyskytuje základní obsah, tj. obrázky, nadpisy a odstavce textu, ale chybí zde skutečné rozvržení stránky (layout) nebo styly (podoba prvků). Pro účely tohoto cvičení 27

28 jsme dopředu vytvořili celý layout a podstatnou část stylů a uložili je do externí šablony stylů. Než začnete pracovat se stránkou, vytvořte její novou verzi. 3. Zvolte Soubory Uložit jako a uložte stránky do složky lekce02 pod názvem onas.html. Dalším úkolem pak je připojení šablony stylů k aktuální stránce. 4. Pokud se vám nezobrazuje panel Styly CSS, klepněte na stejnojmenný příkaz v nabídce Okno. V tomto panelu pak klepněte na ikonu Připojit seznam stylů ikona má podobu řetězu a na panelu ji najdete vpravo dole. 5. Jakmile se zobrazí dialog, stiskněte tlačítko Procházet. Najděte složku lekce02 a vyberte soubor mojestyly.css. Pak stiskněte tlačítko OK. 6. V dialogu Připojit externí seznam stylů se ujistěte, že máte v části Přidat jako vybraný přepínač Odkaz". V roletce Média zvolte screen". Pak stiskněte tlačítko OK. Jak můžete vidět, stránka se významně změnila. Jistě poznáváte layout použitý v lekci 1. Můžete vidět obrázek na pozadí záhlaví, který jste použili v lekci 1 a nyní se opakuje v zápatí stránky. Část stránky níže se zobrazuje ve dvou sloupcích. 7. Zvolte Soubor Uložit 8. Klepněte na tlačítko Živý náhled, čímž si stránku prohlédnete ve svém primárním prohlížeči. Jakmile budete hotoví, stiskněte opět tlačítko Živý náhled, čímž se vrátíte opět do režimu úprav dokumentu, nebo zavřete prohlížeč a vraťte se do Dreamweaveru. Složka lekce02 taktéž obsahuje aktualizovanou verzi souboru umbria.html, z něhož jsme styly umístěné do části za značkou <head> převzali, a poté jsme oba soubory s novou externí šablonou propojili. 28

29 Struktura webového místa a struktura lekce Jakmile budete pracovat ve webovém místě vašeho vlastního designu, je běžné, že si vytvoříte jedinou šablonu stylů a stejný soubor CSS pak propojíte s každou stránkou webu. Web bude často obsahovat složku nazvanou css, v níž se uchovávají různé šablony stylů pro různá média - obrazovku, tiskárnu a jiná média. V dalším cvičení vytvoříte nové pravidlo CSS uvnitř právě připojené šablony stylů. Vytvoření nového pravidla CSS V Dreamweaveru vytváříte styly CSS v rozhraní s volbami a roletkami, skutečný kód za vás zapisuje až samotný Dreamweaver. Jakmile získáte více zkušeností s CSS, Dreamweaver vám také umožní snadno napsat CSS vlastní rukou. Dreamweaver vám umožňuje definovat pravidlo CSS pro jakýkoli typ selektoru. V dalších cvičeních se naučíte vytvářet pravidla pro dva typy selektoru: selektor značek založený na selektoru následníka a poté vlastní selektor CSS, jemuž se říká třída. Definice stylů pro selektory následníka Pravidla CSS určená specifickým značkám se ihned a automaticky použijí, kdykoliv takové značky použijete. Například v tomto cvičení vytvoříte pravidlo pro značku <hl> uvnitř elementu div s identifikátorem maincontent, jenž změní barvu textu na modrou, tedy kromě jiných změn. Jakmile definujete toto pravidlo, text oné značky <hl> bude modrý na všech stránkách, které používají tajnou externí šablonu stylů. 1. Pokud to je nutné, znovu poklepáním v panelu Soubory otevřete soubor onas.html. 2. V panelu Styly CSS se ujistěte, že máte zvolený režim Vše. Klepněte na znak plus vedle položky mojestyly.css, čímž ji rozbalíte. V lekci 1 jste viděli, jak se styly použijí pomocí syntaxe se značkou <style> v hlavičce dokumentu. Nyní vidíte název souboru s externí šablonou stylů - mojestyly.css 29

30 3. V okně dokumentu umístěte ukazatel myši do textu nadpisu Seznamte se s našimi zaměstnanci. V selektoru značek u spodního okraje okna dokumentu vyberte <hl > 4. Klepněte na ikonu Nové pravidlo CSS, kterou najdete u spodního okraje panelu Styly CSS. 5. Jakmile se otevře dialog, klepněte dvakrát na tlačítko Méně specifické (Less Specific). Vytvoří se nový selektor #maincontent hl. Stiskněte tlačítko OK. Selektor #maincontent hl se nazývá selektor následníka. Pravidlo s takovým selektorem ovlivní pouze ty značky <hl>, jež jsou následníky (= jsou vnořeny) rodičovského elementu s identifikátorem #maincontent. (Symbol mřížky před názvem maincontent značí, že jde o identifikátor a že se vztahuje na značku, která má definovaný parametr id s tímto názvem.) Značku <hl> v části označené identifikátorem #header styl neovlivní. Selektory následníka můžete použít díky identifikátorům nebo můžete použít selektor tříd. 30

31 Dreamweaver vloží do pole Název selektoru nejdříve takový selektor, který se váže k aktuální pozici ukazatele myši. Tato funkce se vám bude hodit zvláště tehdy, když budete vytvářet pokročilé selektory. Z toho důvodu vám umístění ukazatele myši do části stránky, pro níž vytváříte pravidlo styl, pomůže. 6. V dialogu Definice pravidla CSS pro #maincontent hl zvolte kategorii Typ 7. V roletce Font-family (písmo) zvolte Georgia, Times New Roman, Times, serif" nebo nějakou podobnou volbu. 8. Klepněte na ikonu palety u pole Color (barva) a pomocí kapátka vyberte novou barvu. Požadovanou barvou je třeba #345FA3. Takovou barvu kapátkem nezvolíte, ale museli byste její číselný kód zapsat do příslušného pole. Pak stiskněte tlačítko OK. Změnili jste typ písma a barvu textu značky <hl> uvnitř elementu s identifikátorem #maincontent. Jakmile do tohoto elementu vložíte novou značku <hl>, použije se na ni to stejné pravidlo. A protože tato externí šablona stylů mojestyly.css je spojena také se souborem umbria.html, styl stejné značky uvnitř elementu se stejným identifikátorem se také změní. Pokud byste měli tisíc stránek propojených s touto jedinou šablonou stylů, všechny stejné elementy by rázem též změnily barvu textu a typ písma. Je to skvělý příklad výhod s údržbou a aktualizací stylů, když používáte jedinou externí šablonu stylů. Soubor Uložte. 31

32 7. lekce NÁSTROJE DREAMWEAVERU, PRÁCE S KASKÁDOVÝMI STYLY - POKRAČOVÁNÍ Dokončení stylů pro selektory následníka 9. Ukazatel myši umístěte do odstavce s textem Výhled z našich kanceláří v New Yorku. U spodního okraje okna dokumentu zvolte v selektoru značek značku <p> 10. U spodního okraje panelu Styly CSS klepněte na ikonu Nové pravidlocss. 11. Jakmile se zobrazí dialog, stiskněte dvakrát tlačítko Méně specifické, až dostanete selektor #sidebar1 p. Klepněte na OK 12. Ve sloupci Kategorie vyberte Typ. V poli Font size napište 80 a z roletky vyberte %. V roletce Font style vyberte volbu italic. 13. V levé sloupci zvolte kategorii Rámeček. V části Margin zrušte zatržení volby Stejné pro všechny. V poli Top napište 0 a stiskněte OK 32

33 Kategorii Rámeček řídí neviditelný blok, obklopující elementy určením hodnot jeho výšky, šířky, vnějšího a vnitřního okraje a dalších vlastností. Tomuto se často říká blokový model. Pokud chcete design, v němž chcete přidělit stejný vnější okraj všem elementům, pak nechte zatrženou volbu Stejné pro všechny a hodnotu napište do pole Top, čímž zajistíte, že se stejná hodnota použije pro všechna ostatní pole. Hodnoty vnitřních a vnějších okrajů se mohou lišit na každé straně bloku elementu 14. Zvolte Soubor Uložit vše, čímž se uloží změny v HTML i v souboru CSS 15. Zkontrolujte změny v Živém zobrazení. Všimněte si změn v případě nadpisů <h1> a odstavců pod obrázkem New Yorku. 33

34 Nastavení vlastních tříd Na rozdíl od selektorů následníka, které ovlivňují určitou značku ve specifickém kontextu, ne všechny pravidla CSS se použijí automaticky. Nyní vytvoříme vlastní selektor, nazývaný třída, jejž můžeme použít tam, kde je třeba. 1. Otevřete soubor onas.html 2. U spodního okraje panelu Styly CSS klepněte na ikonu Nové pravidlo CSS. 3. V roletce Typ selektoru zvolte Třída lze ji použít na jakýkoli element, a v poli Název selektoru napište.jmeno. Nezapomeňte na úvodní tečku. DW ji sice vloží, ale pokud se bude později třída vkládat ručně musí se tečka zapsat. 4. Ověřte, že v roletce Definice pravidla máte nastavené mojestyly.css. Stiskněte OK 34

35 5. V zobrazeném dialogu zvolte Typ ve sloupci Kategorie. V roletce Font-variant zvolte small caps (kapitálky). Klepněte na OK 6. Zvolte Uložit vše. Těchto provedených změn si v DW nevšimnete, pokud záznam nevyhledáte v panelu Styly CSS. Protože tohle pravidlo využívá selektor třídy, je třeba jej přidělit ručně, což si ukážeme dále. 35

36 Použití stylů DW poskytuje řadu metod jak použít styly na značce. Nyní použijeme panel Vlastnosti 1. Otevřete soubor onas.html 2. V odstavci o Elaine vyberte tažením myši slovo Elaine. Jméno a oblast nad slovem se zvýrazní. 3. Pokud je to nutné, otevřete panel Vlastnosti stiskem Ctrl+F3 a vyberte tlačítko CSS 4. Ze seznamu Odkazované v panelu Vlastnosti vyberte jmeno 36

37 Vybraný text se formátuje kapitálkami a indikátor v selektoru značek obsahuje název třídy: <span.jmeno>. Třída se přidala do textu pomocí značky <span>. Tímto způsobem je možné třídu použít na existující značku ke změně části elementu (pomocí značky <span>), nebo k přepsání výchozích stylů CSS celé značky (p, h1, atd.) 5. K dokončení stránky opakujte postup s výběrem jména každé osoby a opět použijte třídu.jmeno 6. Stránku zkontrolujte pomocí Živého zobrazení 7. Vraťte se zpět ze Živého zobrazení 8. Soubor uložte 37

38 8. lekce NÁSTROJE DREAMWEAVERU, PRÁCE S TŘÍDAMI Použití vlastních tříd na části stránky V Dreamweaveru je možné jednoduše vkládat části stránky nebo značky <div> do dokumentu, aby jste vytvořili oblasti lazoutu, nebo stránku přeorganizovali. Nyní vytvoříme více částí pomocí značky <div> a všem jim přidělíme jejich vlastní třídu. Tyto části stránky nám umožní zarovnat fotografie každého člověka pomocí plovoucího umístění. 1. Otevřete soubor onas.html 2. Myší vyberte fotografii Elaine a oba odstavce textu 3. V panelu Vložit vyberte Rozvržení. V závislosti na rozvržení plochy je možné vidět nabídku Vložit v panelu nástrojů. 38

39 4. Zvolte Vložit tag Div, otevře se dialog 5. Ujistěte se, že máte v roletce Vložit zvolenou volbu Uzavřít u výběru. V poli třída napište.profil. Neklepejte na OK 6. Stiskněte tlačítko Nové pravidlo CSS. Ve stejnojmenném dialogu bude v části Typ selektoru vybraná volba Třída. 7. V poli Název selektoru napište.profil. V roletce Definovat ověřte, že je zvoleno mojestyly.css. Pak stiskněte OK. 39

40 8. V zobrazeném dialogu vyberte kategorii Rámeček a v roletce Clear (zrušení obtékání) volbu right (doprava) 40

41 9. Ze seznamu Kategorie vlevo vyberte Umisťování. V roletce Overflow (přetečení) vyberte hodnotu auto. Stiskněte OK Později vložíme fotografie do plovoucího umístění. Použitím deklarace clear:right pro třídu.profil zajistíte, že každý nový element div, který přijde za element <div.profil> jej nebude 41

42 obtékat. Jak jsme si ukázali v první lekci, když se element vyskytuje v plovoucím umístění, všechno ostatní se kolem něj zalomí. Aby jste zajistili, že se jednotlivé profily do sebe nezakousnou a ze se vše zalomí jak má, požijte vlastnost clear. Podobně se vlastnost overflow používá k řešení jiného problému, který může plovoucí umístění způsobit. Bez nastavení hodnoty auto vlastnosti overflow může plovoucí obrázek vyčuhovat přes spodní okraj elementu <div.profil> pokud je v něm málo textu. Aby se element <div.profil> roztáhl tak, aby obsáhl celý obrázek a všechen text, je třeba použít vlastnost overflow. 10. DW nás vrátí do dialogu Vložit tag Div. Klikněte na OK. V okně dokumentu se nyní zobrazuje tečkovaná čára, obklopující část stránky, která obsahuje vybraný obrázek a text. Čára označuje přítomnost značky <div>. Postup přidávání dalších značek <div> s přiřazenou třídou.profil se u dalších osob na stránce bude lišit, protože třída.profil nyní existuje v souboru mojestyly.css 1. V okně dokumentu vyberte obrázek Lindy a dva odstavce textu, které ji popisují 2. V panelu nástrojů Vložit vyberte z kategorie Rozvržení položku Vložit tag Div. Otevře se stejnojmenný dialog 3. V roletce Vložit vyberte volbu Uzavřít u výběru, jak jste provedli už dříve. Tentokrát však místo zapisování třídy.profil zcela postačí, když ji vyberete z roletky Třída. Třída se poté použije na novou značku <div>. Stiskněte OK 42

43 Část stránky věnovaná Lindě se umístí do své značky <div>kolem níž se v okně dokumentu objeví tečkovaná čára. 4. Zopakujte kroky pro ostatní části stránky, věnované Jasonovi, Lin a Charliemu 5. Zvolte Soubor Uložit vše, čímž se uloží jak stránka, tak nové pravidlo CSS. 43

44 9. lekce VKLÁDÁNÍ OBJEKTŮ Plovoucí umístění obrázků V předchozím cvičení jsme vytvořili třídu nazvanou.profil, jenž nastavuje vlastnosti clear a overflow elementům div, které jsme přidali do stránky. V dalším cvičení použijeme vlastnost float ke změně umístění pěti obrázkůobsažených v jednotlivých profilech. 1. Otevřete soubor onas.html 2. Vyberte obrázek Elaine. V selektoru značek zkontrolujte, že je vybrána značka <img> 3. V panelu Vlastnosti zvolte třídu.fltrt Obrázek Elaine se zobrazuje vpravo a text se zalomí zleva 4. Vyberte obrázek Lindy. V panelu Vlastností vyberte třídu.fltlft. Fotka Lindy zůstane vlevo, ale protože je umístěna do plovoucího umístění, text se zalomí doprava. 5. Postupně přidávejte další obrázky na střídačku 6. Zvolte Uložit vše 7. Stránku zkontrolujte pomocí Živého zobrazení, aby jste viděli, jak se stránka zobrazuje s plovoucími obrázky. Každý profil začíná na svém místě pod předchozím profilem díky vlastnosti clear. 44

45 Prohlédnutí selektorů v části Pravidla panelu Styly CSS Nyní si ukážeme několik možností, jak nás DW informuje o vlastnostech každého stylu. 1. Otevřete soubor onas.html 2. V okně dokumentu umístěte kurzor myši na některé ze jmen, jimž jste dříve přidělili třídu.jméno. 3. V panelu Styly CSS klepněte na tlačítko Vše, abyste se ujistili, že máte vybranou právě třídu.jméno v části Všechna pravidla. Pak stiskněte tlačítko Současný. 4. Uprostřed panelu klepněte na ikonu Zobrazit informace o vybrané vlastnosti. Je to levá ze dvou ikon. 45

46 Zobrazí se informace, jež vysvětluje původ jednotlivého stylu nebo vlastnosti. 5. Poté klepněte na ikonu Zobrazit kaskádu pravidel pro vybraný tag, čímž zobrazíte část Pravidla namísto části Co je. Pokud ukazatel myši umístíte nad selektor v části Pravidla, zobrazí se nápovědná bublina poskytující tu stejnou informaci jako část Co je společně s informací o specifičnosti, která vám může pomoci při řešení konfliktů v kaskádě. Pokud se vyskytne konflikt, panel CSS přijde přímo s názvem daného selektorů. Umístěním ukazatele myši nad tento selektor, který se zobrazí přeškrtnutý, se objeví nápovědná bublina vysvětlující konflikt a možná vám jej pomůže vyřešit. Nápovědná bublina se běžně zobrazuje také v okně dokumentu. Panel Vlastnosti ukazuje vlastnosti selektorů. Pokud chcete ale vidět část Vlastnosti panelu Styly CSS, pak panel roztáhněte tažením myší za spodní okraj. Hodnoty zde můžete upravovat přímo a nové vlastnosti můžete přidávat pomocí odkazu Přidat vlastnost. 46

47 Převedení stávající šablony stylů na tiskovou Ačkoliv můžete tiskovou šablonu stylů vytvořit úplně od nuly, je většinou mnohem rychlejší ji vytvořit převedením ze stávající šablony stylů. Prvním krokem je uložit stávající externí šablonu stylů pod novým názvem. 1. V panelu Soubory otevřete soubor mojestyly.css. 2. Zvolte Soubor Uložit jako. 3. Jakmile se zobrazí stejnojmenný dialog, napište do pole pro název souboru tisk.css a poté klepněte na tlačítko Uložit. 4. Pokud to je nutné, otevřete soubor onas.html 5. V panelu Styly CSS klepněte na ikonu Připojit seznam stylů. Načež se zobrazí stejnojmenný dialog. Klepněte v něm na tlačítko Procházet. 6. V zobrazeném dialogu najděte složku lekce02 a zvolte v ní tisk.css. Pak stiskněte tlačítko OK 47

48 7. V dialogu Připojit externí seznam stylů ověřte, zda máte v části Přidat jako vybraný přepínač Odkaz". V roletce Média vyberte volbu print" a stiskněte tlačítko OK. V panelu Styly CSS pak klepněte na tlačítko Vše. Přidá se nová položka tisk.css. 8. Soubor tisk.css v dokumentovém okně zavřete. V okně s dokumentem onas.html dokument uložte Odstranění nechtěných stylů Aktuálně je mnoho ze stylů v šabloně tisk.css shodných se styly v šabloně mojestyly.css. Abyste redukovali velikost souboru, je nutné ponechat pouze ta pravidla, která jsou nová nebo změněná oproti těm v šabloně mojestyly.css. Nechtěné styly můžete jednoduše vymazat v panelu Styly CSS. 48

49 1. V panelu Styly CSS vyberte jakýkoli selektor, jako třeba. twocolfixlthdr #contai ner, a poté klepněte na ikonu odpadkového koše, čímž pravidlo smažete. 2. Nebo v panelu Soubory (Files) můžete poklepat na soubor tisk.css, čímž ho otevřete v Dreamweaveru, kde můžete pravidlo vybrat a smazat ručně. Vyberte a vymažte všechny styly mimo těch se selektory. twocolfixlthdr #footer a. twocolfixlthdr #header h 1. Jakmile vymazání dokončíte, zbudou vám v šabloně tisk. css pouze dvě pravidla. Tisková šablona stylů je připravena k použití. V tomto cvičení jste provedli pouze dvě změny. V tiskové šabloně byste však mohli provést mnoho změn. Například pravidla určující šířku stránky by mohla být na řadě. Tiskárny totiž nerozumí jednotce obrazovkových bodů (pixe-lů), takže byste v tiskové šabloně mohli spíše použít body nebo centimetry jako jednotky velikosti částí stránky nebo textu. Ke zjištění rozdílu ve formátování na obrazovce a při tisku použijte panel nástrojů Styl vykreslení (Style Rendering). 3. V panelu nástrojů Styl vykreslení klepněte na ikonu Vykreslit zobrazení na obrazovce Tiskárna (nebo jiná zařízení) čte obě šablony stylů - například i při tisku stále uvidíte nadpis <hl> v části s identifikátorem maincontent modře. Jakmile tiskové zařízení přečte pravidla v souboru mojestyly.css, přesune se do souboru tisk.css, v němž přečte zdejší pravidla. Jelikož pravidla v šabloně tisk.css se čtou později, přepíšou dřívější pravidla. 4. Zvolte Soubor Uložit vše. A poté postup uložení proveďte znovu. 49

50 Právě jste šablonu stylů určenou pro vykreslení na obrazovce upravili, aby se stránka správně vykreslila také při tisku. 10. lekce ODKAZY K TEXTU SEZNAMŮM A TABULKÁM Prohlídka hotového souboru Abyste si prohlédli soubor, který vytvoříte v první části této lekce, můžete jej otevřít ve svém prohlížeči. 1. Spusťte Dreamweaver CS4. 2. Pokud to je nutné, stiskněte klávesu F8 k otevření panelu Soubory 3. V panelu Soubory rozbalte složku lekce03 4. Zvolte soubor santorini-hotovo.html a stiskněte klávesu F12 5. Všimněte si, jak jsou použity různé textové elementy: nadpis, odstavce, seznamy, tabulky a blokové citace, což jsou dlouhé části citovaného textu. Jako citace jsou také formátovány pomocí výchozího stylování, jak můžete vidět na ukázce. 6. Zavřete prohlížeč a vraťte se do Dreamweaveru. Importování textu V tomto cvičení vložíte nadpis a odstavec textu importování z textového dokumentu. 1. V panelu Soubory otevřete soubor lekce03 santorini-start.html 2. Zvolte Soubor Uložit vše a uložte soubor pod názvem santorini.html. Dále budete pracovat s touto verzí souboru, původní soubor ponechte beze změny. 50

51 Uvidíte novou stránku webu cestovní kanceláře Tam a zpět. Obrázky byly vloženy, a tak nyní můžete pracovat na textu. 3. V panelu Soubory (Files) poklepejte na soubor santorini.txt, čímž ho otevřete. Textový dokument se otevře v dokumentovém okně Dreamweaveru, kde můžete jeho obsah upravovat, kopírovat nebo ho přímo vkládat do stránky HTML. 4. Vyberte všechen text od Vítejte v ráji! Santorini je... až do konce této části: Kulturní zařízení blízko pláží zahrnují kavárny, taverny, půjčovny slunečníků, plachtění, výlety loděmi a další. 5. Zvolte Upravit Kopírovat nebo stiskněte Ctrl + C, čímž část textu zkopírujete do schránky. 6. U horního okraje okna dokumentu najdete záložku se souborem santorini.html, na kterou klepněte, abyste se mohli vrátit zpět na webovou stránku. 51

52 7. Najděte frázi Sem patří text, která je umístěná na stránce hned za prvním obrázkem, ale před druhým nadpisem. 8. Zvolte Upravit Vložit nebo stiskněte Ctrl+V, čímž část textu ve schránce vložíte na vybrané místo. Ve výchozím stavu se vložený text naformátuje se značkami <p> jako odstavce. Všimněte si, že odstavce dostaly přidělený styl s typem písma, které už je v šabloně stylů. Výchozí formátování můžete jednoduše přidělit jakémukoli textovému bloku - třeba značkám <hl>, <h2> nebo <p> pomocí panelu Vlastnosti. Před změnou formátování tohoto textu dokončete kopírování soboru santorini.txt do webové stránky. Poznámka: Vložený text se v Dreamweaveru naformátoval jako odstavce, neboť soubor santorini. txt používá dvojí odstavcové zalomení na konci každé části textu. Pokud by původní soubor santorini. txt 52

53 obsahoval pouze jedno odstavcové zalomení řádku na konci každé části textu, Dreamweaver by v takovém případě vložil pouze zalomení řádku pomocí značky <br />. 9. Klepněte na záložku santorini.txt, abyste se vrátili zpět na stránku s textem. 10. Vyberte zbývající část stránky, která začíná větou Dolores a Tom Text zkopírujte do schránky, jak jste to provedli v kroku Klepněte na záložku santorini.html, čímž se vrátíte na webovou stránku. 13. Vyberte frázi Sem patří text, kterou najdete pod fotografií budovy, ale ještě před nadpisem Doporučené hotely. 14. Na toto místo vložte text ze schránky pomocí postupu uvedeného v kroku Na záložce santorini.txt klepněte na symbol x, čímž soubor zavřete. 16. Zvolte Soubor Uložit, abyste svou práci uložili. Vytvoření nadpisů Text by se měl formátovat tak, aby dával smysl, organizoval a byl celkově srozumitelný. V termínech HTML vytváří značka nadpisů - <hl>, <h2>, <h3>, <h4>, <h5> a <h6> - nadpisy. Jakékoli zobrazovací zařízení, ať už jde o počítač, čtečku Braillova písma nebo mobilní telefon, interpretuje text formátovaný pomocí značek pro nadpis jako nadpis. Nadpisy slouží k organizaci stránky do smysluplných částí a zároveň slouží jako titulek stránky HTML, podobně jako v případě knihy. Stejným způsobem vytvářejí značky seznamů a blokových citací formátování, které má svůj základní význam v tom, že pomáhá uživatelům rozeznat text jako seznam nebo dlouhou citaci. 53

54 Tento koncept platí pro všechny značky jazyka HTML a je často nazývám jako sémantický kód. Značky jazyka HTML vytváří sémantický kontext obsahu stránky: nadpisy, odstavce, seznamy, blokové citace, tabulky, obrázky a tak dále. V tomto cvičení provedeme základní sémantické formátování pomocí panelu Vlastnosti : 1. Pokud to je nutné, zvolte Okno Vlastnosti, abyste otevřeli panel Vlastnosti. Ujistěte se, že máte nalevo stisknuté tlačítko HTML. Protože externí šablona stylů je již k této stránce připojena, textu již byla přidělena barva, typ písma, velikost textu pomocí příslušného pravidla CSS - vše se zobrazuje v panelu Vlastnosti (Properties), jakmile vyberete část s textem. Jednoduše tak rozeznáte, jak se text formátuje. 2. Klepněte na nadpis Co říkají naši zákaznici. Všimněte si, že jde o nadpis druhé úrovně (<h2>). Tuto informaci najdete zobrazenou v panelu Vlastnosti a selektoru značek. Vytvoření nadpisu Budeme postupovat takto: 1. Posuňte se stránkou trochu dolů a klepněte kamkoliv na text Místa. 2. Ujistěte se, že máte v panelu Vlastnosti stisknuté tlačítko HTML. Z roletky Formát vyberte Nadpis 3 54

55 Fráze Místa se nyní formátuje jako nadpis třetí úrovně, neboli jako značka <h3>. Tím přidělíte frázi význam a logické místo v organizaci stránky vzhledem k dalšímu obsahu, jenž následuje za nadpisem. 3. Dále naformátujte frázi Pláže jako nadpis třetí úrovně. 4. Soubor uložte 11. lekce VYTVOŘENÍ SEZNAMŮ Vytvoření seznamů Seznamy se čtou snadněji než bloky hustého textu a taktéž uživatelům pomáhají při hledání rychlých odpovědí. V tomto cvičení vytvoříme neuspořádaný seznam. 1. Vyberte nedokončené věty následující za větou Obě nabízejí úžasné západy slunce, dobrou kuchyni a báječné nakupování. 2. Jakmile máte text vybraný, klepněte na panelu Vlastnosti na tlačítko Neuspořádaný seznam. 55

56 Poznámka: Pokud potřebujete vytvořit uspořádaný seznam, klepněte na tlačítko hned vpravo, na němž jsou číslice. Tato tlačítka jsou přepínače. Jestliže budete psát svůj vlastní seznam a budete jej chtít ukončit, klepněte na toto tlačítko, čímž se formátování vrátí zpět k běžnému odstavci. Poznámka: V kódu HTML označuje uspořádaný seznam značka <ol>. Odrážkový, tedy neuspořádaný seznam označuje značka <ul>. Jednotlivé položky seznamu pak v obou případech představuje značka <li> 3. Kroky zopakujte u celého textu následujícího za nadpisem Pláže. 4. Zvolte Soubor Uložit. Tvorba tabulek V dřívějších dobách webu se layout stránek tvořil pomocí tabulek namísto CSS. Mnoho prohlížecích zařízení vyhodnocuje tabulky podle toho, co skutečně mají představovat - řádky a sloupce dat - spíše než 56

57 jako srozumitelný layout stránky. Když přišel jazyk CSS, lidé začali věřit tomu, že tabulky jsou špatné, neboť rozvržení stránky by se mělo vytvářet pomocí CSS. Taková reakce ale byla trochu přehnaná. Tabulky sice nejsou vhodné pro tvorbu rozvržení stránky, ale jsou skvělé a velmi potřebné pro zobrazování řádků a sloupců dat. 1. Pokud to je nutné, použijte panel Soubory k otevření souboru santorini.html ze složky lekce Sjeďte ke spodnímu okraji stránky, tam, kde se nachází text Sem patří tabulka. Text vymažte a ukazatel myši ponechte na této pozici. 3. V panelu nástrojů Vložit klepněte na záložku Rozvržení a poté klepněte na ikonu Tabulka.Vizuálně se vzhled panelu může lišit podle toho, zda používáte plovoucí panel nebo připevněný panel. Ale ikona Tabulka vypadá v obou případech stejně. 4. V dialogu Tabulka napište do pole Řádků číslo 6 a do pole Sloupců číslo 3. Zajistěte, aby pole Šířka tabulky, Tloušťka okraje, Odsazení buňky i Mezery buněk zůstala prázdná. 5. V části Záhlavi vyberte Nahoru, takže nadpisy se umístí nad každý sloupec, a do pole Titulek napište Hotely na Santorini. Pak stiskněte tlačítko OK. Tabulka se v Dreamweaveru zobrazí ve zmáčknuté a nepěkné podobě, neboť zatím neobsahuje žádný obsah a nemá nastavený ani žádný rozměr. 57

58 Pomocí panelu Vlastnosti (Properties) můžete tabulce přidělit identifikátor. 6. V poli Tabulka napište hotely. Poznámka: V tomto cvičení není zcela nezbytné přidělovat tabulce identifikátor, neboť na stránce bude jediná tabulka. Nicméně pokud budete mít tabulek více, přidělením identifikátoru každé tabulce vytvoříte individuální styly pro každou z nich. Stejným způsobem můžete v panelu Vlastnosti (Properties) identifikátor přidělit také seznamům, nebo jakémukoli elementu. 7. Klepněte do první buňky v horním řádku tabulky. Napište Místo. 8. Stiskněte klávesu Tab, čímž se posunete do další buňky. Zde napište Hotel. 9. Stiskněte klávesu Tab ještě jednou a napište Hodnocení. 58

59 Abyste si ušetřili čas, dokončenou tabulku zkopírujete a vložíte. Poznámka: V kroku 5 jste nastavili zarovnání obsahu prvního řádku, tedy záhlaví, značek <th>, nahoru. Všimněte si, že se ve výchozím stavu formátují tučně. Ačkoliv to není v této smrštěné tabulce vidět, obsah značek <th> se také zarovnává vodorovně na střed. Klepněte do prázdné buňky pod záhlavím tabulky a uvidíte značku <td> určenou tabulkovým datům. Jiné elementy tabulky uvidíte v selektoru značek včetně <table#hotely> a <tr>. Tabulku samotnou můžete vybrat pomocí <table#hotely>.zatímco <tr> je řádek tabulky. 10. V panelu Soubory najděte soubor tabulka.html a poklepejte na něj. 11. Klepněte kamkoliv dovnitř tabulky a vyberte značku <table#hotely> v selektoru značek. 12. Zvolte Upravit Kopírovat. Tím tabulku zkopírujete do schránky. 13. Zavřete soubor tabulka.html a vraťte se na stránku santorini.html. 14. Vyberte značku <table#hotely> čímž vyberete celou tabulku. Pak stiskněte Delete, čímž nedokončenou tabulku, s níž jste začínali, smažete. 15. Zvolte Upravit Vložit. Tím dokončenou tabulku vložíte do stránky. 59

60 16. Zvolte Soubor Uložit). Když je tabulka vybraná, panel Vlastnosti nám umožní provést rychlé změny, jako je přidání nového řádku nebo sloupce. Mezery, odsazení nebo rámečky nejlépe provedeme pomocí CSS. 12. lekce STYLOVÁNÍ TABULEK Stylování tabulek pomocí CSS Nástroje Dreamweaveru pro CSS vám umožňují tabulku jednoduše prezentovat mnoha způsoby. Zde vytvoříte pravidla CSS, která nastaví její rozměry a přidají rámeček. 1. Pokud to je nutné, použijte panel Soubory k otevření souboru santorini.html ze složky lekce Najděte tabulku, která se na stránce vyskytuje dole. 3. Klepněte kamkoliv do tabulky. A poté v selektoru značek vyberte <table#hotely> 4. S vybranou tabulkou přejděte do panelu Styly CSS, kde klepněte na ikonu Nové pravidlo CSS. 5. Ve stejnojmenném dialogu vyberte volbu Tag (předefinuje element HTML)" v nabídce Typ Selektoru. Dreamweaver automaticky umístí do pole Název selektoru slovo table na základě aktuální pozice v okně dokumentu. V roletce Definovat pravidla zkontrolujte, že se nové pravidlo uloží do souboru mojestyly.css. Pak stiskněte tlačítko OK. 60

61 Tímto krokem přidáte selektor table do souboru mojestyly.css. Dále vytvoříte pravidlo pro tento nový selektor. 6. V zobrazeném dialogu vyberte kategorii Rámeček. Do pole Width (šířka) napište 475 a zvolte jednotku px" v roletce vpravo. V části Padding (vnitřní okraj) napište do pole Top (nahoře) číslo 4. Hodnota se automaticky doplní do všech dalších polí. 61

62 7. Zvolte kategorii Okraj (Border). V roletce v části Style (styl) zvolte solid" (nepřerušovaný), v roletce v části Width (šířka) zvolte thin" (tenký) a v části Color (barva) zvolte v paletě barev barvu #00C. Hodnoty se automaticky doplní do polí Top (nahoře), Right (vpravo), Bottom (dole) a Left (vlevo). Pak stiskněte tlačítko OK. 8. Zvolte Soubor Uložit vše. Použijte Živé zobrazení nebo si stránku prohlédněte v prohlížeči. 62

63 Uvidíte, že rozměr a vnitřní okraje v buňkách okolo textu se změnily. Kolem tabulky se umístil rámeček, ale nikoliv kolem jednotlivých buněk. Všimněte si, že titulek tabulky není uzavřený do rámečku tabulky. 9. Znovu stiskněte tlačítko Živé zobrazení nebo si stránku prohlédněte v prohlížeči. Pak se vraťte do Dreamweaveru. 10. Klepněte na ikonu Nové pravidlo CSS pro vytvoření nového stylu. V zobrazeném dialogu vytvoříte seznam selektorů oddělených čárkou. 11. Z roletky Typ selektorů vyberte Složený prvek (na základě výběru)". Vymažte vše, co se v poli níže zobrazuje, a napište th, td. 12. Zajistěte, aby se nové pravidlo uložilo do souboru mojestyly.css. Pak stiskněte tlačítko OK. 63

64 13. V zobrazeném dialogu vyberte kategorii Okraj (Border). A použijte stejné hodnoty jako v případě rámečku tabulky v kroku 7. Pak stiskněte tlačítko OK. Vaším posledním krokem bude zrušit mezeru mezi rámečky buněk tabulky. Dialog Definice pravidla CSS neobsahuje vlastnosti potřebné pro toto pravidlo CSS, takže jej budete muset přidat ručně za použití panelu Styly CSS. 14. V panelu Styly CSS klepněte na tlačítko Vše a poté v části Všechna pravidla zvolte selektor table. V části Vlastnosti pro table" klepněte na odkaz Přidat vlastnost. 15. Zapište sem vlastnost border-collapse. Stiskněte klávesu Tab, abyste se přesunuli do pole pro hodnotu, a napište collapse. Stiskněte klávesu Enter k potvrzení přidání nové vlastnosti a její hodnoty. 64

65 16. Zvolte Soubor Uložit vše, abyste veškerou práci uložili. 17. Prozkoumejte výsledek pomocí Živého zobrazení nebo v prohlížeči. Ačkoliv vypadá tabulka ještě stále velmi jednoduše, nastavení šířky a přidání rámečku pomocí CSS pomohlo její čitelnosti a pochopení. 13. lekce PROPOJENÍ S PHOTOSHOPEM Prohlédnutí výsledného souboru Abyste pochytili smysl souboru, který budete vytvářet v této lekci, prohlédněte si jeho dokončenou verzi v prohlížeči. 1. Spusťte Adobe Dreamweaver CS4. 2. V panelu Soubory (Files) rozbalte složku lekce Vyberte soubor naxos-dokonceno.html a stiskněte klávesu F12, čímž si stránku prohlédnete ve vašem primárním prohlížeči. Stránka obsahuje několik obrázků, jak v popředí, tak v pozadí, stejně tak jako obrázky ve formě inteligentních objektů Photoshopu. 4. Zavřete okno prohlížeče a vraťte se do Dreamweaveru. 65

66 Vkládání obrázků Obrázky jsou klíčovými komponentami webové stránky. Panel Vložit obsahuje řadu tlačítek, která umožňují vkládání obrázků rychle a snadno. Využít můžete také výplňový prostor pro obrázky, tak jako v prvním cvičení. 1. V panelu Soubor rozbalte složku lekceo4 a poklepejte na soubor naxos-start.html. Tím soubor otevřete. 2. Zvolte Soubor Uložit jako a uložte soubor do složky lekce04 pod názvem naxos.html. Tímto způsobem (pokud budete později potřebovat stránku naxos-start.html) se původní stránka zachová na pevném disku. 3. Vyberte výplňový prostor obrázku nazvaný portara (200 x 200)" a stiskněte klávesu Delete, čímž jej odstraníte. 4. Na panelu Vložit vyberte kategorii Běžné a klepněte na ikonu Obrazy. Pokud tuto ikonu na panelu nevidíte, klepněte na šipku směřující dolů hned vedle tlačítka s ikonou Obrazy. Podobně jako jiné nabídky, do nichž vstupujete v panelu Vložit, i nabídka Obrazy zobrazuje většinu naposledy použitých objektů jako první položku 66

67 5. Jakmile se zobrazí dialog Vyberte zdroj obrazu, najděte složku s obrázky a vyberte naxosportara.jpg. Poté stiskněte tlačítko OK. 6. V dialogu Atributy tagu pro usnadnění přístupu napište do pole Alternativní text výraz Portara na ostrově Naxos a stiskněte tlačítko OK. Použití obrázků na pozadí Webové stránky mohou obsahovat dva typy obrázků: obrázky v popředí a obrázky na pozadí. Obrázky v popředí jsou webovou grafikou, která se vkládá do dokumentu pomocí značky <img>. Obrázek jste do popředí vložili v předchozím cvičení. Obrázky na pozadí se na druhou stranu do dokumentu vkládají pomocí CSS. 1. Pokud to je nutné, poklepáním na soubor naxos.html v panelu Soubory jej otevřete. 2. Zvolte okno Styly CSS a v panelu klepněte na tlačítko Vše. 3. V seznamu mojestyly.css vyberte twocolfixltlhdr#container a klepněte na ikonu Upravit styl (tužka). 4. V zobrazeném dialogu zvolte v levém sloupci kategorii Pozadí. 5. Stiskněte tlačítko Procházet (Browse) a v zobrazeném dialogu najděte a vyberte obrázek cara.gif 6. Z roletky Background-repeat (opakování pozadí) vyberte volbu repeat-y" (opakovat po ose y). Stiskněte tlačítko OK. 67

68 Tímto zopakujete obrázek po ose y od shora dolů přes celou výšku elementu 7. Zvolte Soubor Uložit vše Protože pravidlo CSS se ukládá do externí šablony, Dreamweaver automaticky změní soubor tak, aby odpovídal posledním úpravám. Jak celý dokument, tak šablonu stylů je třeba uložit, aby se zachovala aktuální podoba dokumentu. Nad oknem dokumentu vidíte záložky reprezentující zdrojový kód a připojené soubory, jako je třeba mojestyly.css. Neuložený soubor se označí pomocí hvězdičky (*). Zvolte Soubor Uložit vše, abyste uložili jak soubor HTML, tak jakýkoli jiný připojený soubor, který se změnil. 68

69 Použití panelu Vlastnosti u obrázků Optimální použití webové grafiky drží v rovnováze rozměry obrázků a jejich kvalitu s velikostí souboru obrázku. Weboví designéři často musí optimalizovat grafiku, kterou už umístili na webovou stránku. Dreamweaver obsahuje grafický nástroj, který skvěle zajistí nejvyšší možnou kvalitu obrazu při zachování malé velikosti souboru obrázku. V tomto cvičení použijeme nástroje Dreamweaveru k optimalizaci a změně rozměru obrázku pro web, provedeme tedy nejběžnější designérský úkon. 1. Otevřete soubor naxos.html. 2. Zvolte Okno Vlastnosti, čímž zobrazíte panel Vlastnosti. Vyberte obrázek v okně dokumentu. Jakmile je obrázek vybraný v dokumentu, v panelu Vlastnosti se zobrazí řada možností k úpravě obrázku, a to pod polem Alternativní (Alt). V panelu Vlastnosti můžete klepnout na obrázkové tlačítko, čímž obrázek otevřete k úpravě ve Photoshopu. Jiné tlačítko vám zase umožňuje upravit nastavení obrázku v dialogu s náhledem přímo v Dreamweaveru. Zde můžete obrázek ořezat nebo vyladit kontrast a ostrost. 3. Vyberte obrázek a v panelu Vlastnosti klepněte na ikonu Upravit nastavení obrazu. Jakmile se zobrazí dialog Náhled obrazu, zkontrolujte, že máte v roletce Formát vybranou volbu JPEG". Jezdce Kvalita nastavte na hodnotu 79. Dialog Náhled obrazu (Image Preview) obsahuje možnosti optimalizace obrázku, včetně možnosti změnit grafický formát na jiný, například změnu obrázku ve formátu GIF na formát JPEG. Pomocí formátu JPEG můžete též kontrolovat stupeň kvality: čím vyšší kvalita, tím bude obrázek obsahovat více detailů a soubor obrázku bude větší. Použijte proto nástroj pro porovnání k rozhodnutí o optimální rovnováze mezi kvalitou a velikostí souboru. 4. V pravém spodním rohu dialogu klepněte na tlačítko 2 okna náhledu. Jakmile se náhled rozdělí do dvou zobrazení, klepněte na spodní zobrazení a pomocí jezdce změňte kvalitu na

70 Jak můžete vidět, kvalita obrázku mezi jednotlivými zobrazeními je jen stěží rozeznatelná. Rozdíl ve velikosti souboru je také mizivý - obrázek ve formátu JPEG v kvalitě 79 má velikost 6,67 KB a obrázek v kvalitě 40 má velikost 2,65 KB - a úspora v kilobajtech nekompenzuje ztrátu kvality obrázku. Kvalita 40 znamená viditelnou degradaci obrázku. Proto ponechte kvalitu nastavenou na hodnotě 79 zvolením horní verze obrázku a stiskněte tlačítko OK. 5. Zvolte Soubor Uložit k uložení vaší práce. 70

71 14. lekce PROPOJENÍ S PHOTOSHOPEM, ČÁST 2 Grafické nástroje Dreamweaveru Všechny grafické nástroje Dreamweaveru jsou přístupné z panelu Vlastnosti jakmile obrázek vyberete. V panelu najdete šest nástrojů: Upravit - otevře obrázek ve výchozím grafickém editoru. Výchozí program můžete zvolit pro jakýkoli typ souborů v předvolbách v kategorii Typy souborů/editory. Podoba ikony se mění v závislosti na tom, jaký program zvolíte. Upravit nastavení obrazu - aktuální obrázek otevře v dialogu Náhled obrazu. Navíc mimo poskytnutí přístupu k optimalizačním funkcím použitým v tomto cvičení můžete tento dialog použít k ořezání obrázků nebo ke změně nastavení animovaného GIF. Aktualizovat podle originálu vykreslí inteligentní objekt podle nově zvolené velikosti. Zdrojový soubor Photoshopu se nezmění. Oříznout - odstraní nepotřebné části obrázku. Jakmile vybere tento nástroj, zobrazí se průhledný blok s řadou úchytů, za něž můžete táhnout myší a definovat tak řez obrázku. Jakmile máte řez definovaný, poklepejte dovnitř a okrajové části se oříznou. Převzorkovat - převzorkuje obrázek, jehož velikost se změnila. Nástroj pro převzorkování je aktivní pouze tehdy, pokud změníte velikost obrázku. Jas a kontrast - vyladí obrázek, který je příliš tmavý nebo světlý. Dialog obsahuje dva jezdce - jeden pro jas a druhý pro kontrast, které můžete nastavit zvlášť. V Živém náhledu si můžete změny prohlédnout dříve, než je potvrdíte. Zostřit - ovlivňuje určení ostrosti obrázku snížením nebo zvýšením kontrastu pixelů na stupnici od 0 do 10. Podobně jako v případě ladění jasu a kontrastu i tento nástroj poskytuje náhled v reálném čase. Grafické operace můžete vrátit zvolením příkazu Úpravy Zpět, pokud dokument nezavřete nebo neukončíte práci v Dreamweaveru. 71

72 Kopírování a vkládání z Photoshopu Mnoho webových designérů používá Photoshop k výchozímu poskládání (nebo kompilaci) layoutu jejich stránek. K vytvoření finálního layoutu v Dreamweaveru jsou nutné pouze části tohoto layoutu ve Photoshopu, neboť dalším elementem stránky je text (nebo se tvoří pomocí CSS). Pokud používáte Photoshop CS4 a Dreamweaver CS4, je velmi jednoduché zkopírovat jakoukoli část grafiky, kterou zrovna potřebujete, ve Photoshopu a vložit ji do rozvržení stránky v Dreamweaveru. Dialog Náhled obrazu (Image Preview) pak hraje roli prostředníka, který převede soubor do požadovaného formátu. 1. Otevřete soubor naxos.html. 2. Ukazatel myši umístěte do odstavce za odstavec textu Hory skrývají zlatavě úrodná údolí, kde uvidíte pole a plodiny promíchané s malými kostelíky a impozantními kostely. 3. Otevřete Photoshop CS4 a zvolte Soubor Otevřít. Jakmile se zobrazí stejnojmenný dialog, vyberte složku obrázky PSD naxos-obrazky.psd. Pak stiskněte tlačítko Otevřít Soubor obsahuje vrstvy. V každé z nich najdete obrázek. 4. Pokud to je nutné, zvolte Okno Vrstvy, čímž zobrazíte panel Vrstvy. V panelu vyberte vrstvu Šťastná rodina". 5. V paletě Nástroje zvolte Nástroj obdélníkový výběr a tažením myši za stisknutého levého tlačítka proveďte výběr okolo obrázku s rodinou. 6. Zvolte Úpravy Kopírovat. Zavřete Photoshop bez ukládání obrázku a vraťte se do Dreamweaveru. 7. V Dreamweaveru zvolte Upravit Vložit. Jakmile se zobrazí dialog Náhled obrazu, ověřte, že máte v roletce Uložená nastavení vybranou volbu JPEG - lepší kvalita". Pak stiskněte tlačítko OK. 72

73 8. Jakmile se zobrazí dialog Uložit webový obraz, najděte složku obrázky. V poli Název soubor napište stastna-rodina.jpg a stiskněte tlačítko Uložit. Obrázek zkopírovaný z Photoshopu se vloží do dokumentu. 9. Zvolte Soubor Uložit. Ačkoliv Dreamweaver propojí obrázek s původním souborem ve Photoshopu, nejde o nic inteligentního" jako v případě inteligentního objektu Adobe Photoshopu, neboť jej nemůžete použít na různých stránkách v různých velikostech. S inteligentními objekty Photoshopu budete pracovat později v této lekci. Zpřístupnění Adobe Bridge Adobe Bridge CS4 je vhodně pojmenovaný program, který hraje úlohu mostového spojení mezi aplikacemi Adobe Creative Suite, včetně Dreamweaveru. Pomocí Bridge můžete rychle procházet složkami obrázků a jinými zdrojovými soubory, také označovat soubory pomocí klíčových slov a jednoduše přistupovat do profesionální fotobanky. Bridge je plně integrovaný v Dreamweaveru: Bridge můžete spustit z Dreamweaveru, přetáhnout obrázky z Bridge rovnou do Dreamweaveru a to vše, aniž byste museli Bridge opustit. 73

74 1. Otevřete soubor naxos.html. 2. Ukazatel myši umístěte na začátek oblasti pod nadpis Hlavní řecký ostrov. 3. Zvolte Soubor Procházet nástrojem Bridge. Zobrazený dialog se vás zeptá, zda chcete Bridge spouštět při přihlášení. Protože v dalších cvičeních Bridge využívat nebudete, klepněte na tlačítko Ne. 4. Jakmile se spustí Bridge, klepněte na záložku Složky a najděte složku obrázky ZdrojeBridge. 5. Zvolte Zobrazení - Kompaktní režim.případně můžete využít tlačítka Přepnout do kompaktního módu v pravém horním rohu okna. Pomocí kompaktního režimu redukujete velikost rozhraní Bridge asi na čtvrtinu obrazovky a to zůstane ve výchozím stavu vždy nahoře, abyste s ním mohli jednoduše posunovat. 6. Pokud je třeba, potáhněte jezdcem, abyste zmenšili rozměr náhledů obrázků. Celé okno pak tažením myší přesuňte na takové místo, že uvidíte jak obrázky v Bridgi, tak dokument v Dreamweaveru. 7. Obrázek divka-na-plazi.jpg přetáhněte z Bridge do Dreamweaveru a umístěte na začátek obsahu. 8. V zobrazeném dialogu napište Jak chytnout trochu barvy. Pak stiskněte tlačítko OK 74

75 9. V Dreamweaveru zvolte Soubor Uložit. Klepněte na tlačítko Živý náhled (Live Preview) nebo stiskněte klávesu F12 (Windows) či Option + F12 (Mac), abyste si stránku prohlédli ve vašem primárním prohlížeči. Pak se vraťte do Bridge a ukončete ho. 75

76 15. lekce PROPOJENÍ S PHOTOSHOPEM, ČÁST 3 Použití inteligentních objektů Photoshopu Na rozdíl od jiných obrázků jsou inteligentní objekty propojené se souborem Photoshopu (PSD). Jakmile se zdrojový soubor PSD jakkoliv změní, Dreamweaver tyto změny rozezná a nabídne aktualizaci webového obrázku. Jeden soubor PSD můžete umístit do více stránek jako inteligentní objekt Photoshopu a všechny instance tohoto obrázku se pak změní najednou. 1. Otevřete soubor naxos.html. 2. V postranním panelu poklepejte na výplň pro obrázek kostela. 3. V zobrazeném dialogu najděte soubor obrázky PSD naxos-kostel.psd. Pak stiskněte tlačítko OK. 4. V dialogu Náhled obrazu vyberte z roletky Formát volbu JPEG". Ponechte hodnotu v poli Kvalita na 80" a stiskněte tlačítko OK. 76

77 V obrázku ve formátu JPEG je kvalita vyjádřená v procentech v rozmezí 0% až 100 %. Obrázek se může napoprvé zobrazit s hodnotou procent založenou na zdrojovém obrázku - což je třeba obrázek z digitálního fotoaparátu. Na druhou stranu kvalita obrázku GIF je vyjádřená množstvím barev. Více použitých barev znamená větší velikost souboru obrázku GIF, ale ne nutně vyšší kvalitu. Některé obrázky GIF obsahují omezené množství barev a stále mohou být kvalitní, i když množství barev snížíte, abyste dosáhli menší velikosti souboru obrázku. 5. V dialogu Uložit webový obraz najděte složku obrázky, do pole Název souboru napište naxoskostel.jpg a stiskněte tlačítko Uložit (Save). Tento obrázek je použitý na stránce naxos- 77

78 dokonceno.jpg a už existuje ve složce obrázky. Klepněte na Ano, abyste jej nahradili tím, který chcete uložit nyní. 6. V zobrazeném dialogu napište Kostel na ostrově Naxos. Stiskněte tlačítko OK. Pokud se zmíněný dialog nezobrazí, napište frázi do pole Alternativní v panelu Vlastnosti. V levém horním rohu obrázku vidíte značku inteligentního objektu. Ta zelenou okrouhlou šipkou označuje, že tento obrázek je propojený s originálním souborem PSD. Nicméně, šířka 300 pixelů je pro obrázek v postranním panelu příliš veliká. 7. Za úchyt v pravém spodním rohu obrázku potáhněte myší se stisknutou klávesou Shift, abyste změnili velikost obrázku. Stisknutou klávesou Shift při tažení za úchyt zajistíte, že se nezmění proporce obrázku. Šířku obrázku si můžete ověřit v poli Šířka v panelu Vlastnosti. Dosáhněte šířky 200 pixelů. 78

79 Značka inteligentního objektu v horním levém rohu ukazuje, že obrázek nyní neodpovídá propojení. Umístěte kurzor na tuto značku a ta vás bude informovat, že rozměry webového obrázku jsou jiné než zvolená šířka a výška v HTML. 8. Pravým tlačítkem klepněte na obrázek a z místní nabídky vyberte Aktualizovat z originálu. Aktualizovaný inteligentní objekt změní velikost a převzorkuje se podle aktuálního použití. Nicméně zdrojový obrázek ve Photoshopu zůstane ve svém původním stavu, abyste jej mohli použít jinde jako inteligentní objekt a mohli ho tak optimalizovat v jiných rozměrech. Pokud se soubor PSD změní, všechny podoby inteligentního objektu se mu okamžitě přizpůsobí. Abyste mohli použít stejný soubor PSD na jiných stránkách, vložte obrázek na tuto stránku stejným postupem, který jste provedli prvně. Pak budete mít dva obrázky propojené do stejného zdrojového souboru PSD. Velikost nového obrázku se může lišit, například pokud použijete pouze jeho miniaturu, ale oba obrázky budou stále propojeny se stejným obrázkem PSD. Pokud obrázek zvětšíte více než originál a nad limit kvality, kterou povoluje zdrojový obrázek PSD, objeví se varování, že vybraný rozměr obrázku je větší než originální soubor PSD. Pak můžete pravým tlačítkem klepnout na obrázek a zvolit příkaz Obnovit velikost podle originálu, čímž se změní do podoby původního souboru PSD. V této lekci jste se naučili, jak použít Dreamweaver ke vložení obrázku do popředí i na pozadí stránky, do stránky jste přidali výplňový prostor a nahradili jste jej skutečným obrázkem. Taktéž jste nalezli obrázek v Bridgi a přetáhli ho do Dreamweaveru. Použili jste panel Vlastnosti k náhledu a úpravě obrázku. Pokud vlastníte Photoshop, byli jste schopni zkopírovat vrstvu v souboru Photoshopu a vložit ji do 79

80 Dreamweaveru. A nakonec jste vzali soubor Photoshopu (dokument PSD) a vytvořili jste inteligentní objekt Photoshopu v Dreamweaveru, který můžete použít vícekrát. 16. lekce TVORBA NAVIGACE POMOCÍ CSS STYLŮ Prohlídka hotového souboru Pokud se chcete podívat, jak funguje hotový soubor, na němž budete dělat v první části této lekce, prohlédněte si dokončenou verzi stránky v prohlížeči. 1. Spusťte Adobe Dreamweaver CS4. 2. Vyberte soubor onas-dokonceno.html a stiskněte klávesu F12 3. Jakmile se stránka otevře ve vašem primárním prohlížeči, klepněte v navigaci v postranním panelu na odkaz Řecko. Jakmile se rozbalí vysouvací nabídka, klepněte na odkaz Santorini. Pak v prohlížeči stiskněte tlačítko Zpět, abyste se vrátili zpět k souboru onas-dokonceno.html. Klepněte na názvy v panelu záložek, abyste si prohlédli informace o našich lidech. Pokud máte v počítači nainstalovaného ového klienta, klepněte na odkazy s ovými adresami jednotlivých pracovníků. Jakmile se zobrazí okno pro novou zprávu, zavřete jej. Stránka obsahuje odkazy na stránky v rámci jednoho webu, stejně tak jako odkazy na externí stránky a ové adresy. 4. Ukončete prohlížeč a vraťte se do Dreamweaveru. Odkazy na stránky v rámci jednoho webu Odkazy jsou základními elementy webu a Dreamweaver vám usnadňuje práci s nimi. Odkazy jsou vlastně ono hyper ze slova hypertext a jsou hnací silou, díky níž se mohou weboví uživatelé pohybovat z jednoho místa na druhé. V tomto cvičení vytvoříte textový odkaz na stránku v rámci jednoho webového místa, a to pomocí několika metod. 1. V panelu Soubory rozbalte složku lekce05 a poklepejte na soubor onas-start.html, čímž soubor otevřete. 80

81 2. Zvolte Soubor Uložit jako. Uložte soubor jako onas.html ve složce lekce05 na vašem pevném disku. Pokud budete potřebovat otevřít původní, nezměněný soubor onas--start.html, najdete ho na svém místě. 3. V zápatí vyberte text Kontaktujte nás. 4. Pokud je třeba, zvolte Okno Vlastnosti k otevření tohoto panelu. Když vytváříte odkazy, ujistěte se, že máte v panelu Vlastnosti stisknuté tlačítko HTML. Klepněte na tlačítko Procházet vpravo od pole Odkaz. Jakmile se zobrazí dialog, najděte složku lekceos a v ní vyberte soubor kontakt.html. Ujistěte se, že máte v roletce Relativně k zvolenou volbu Dokument". Pak stiskněte tlačítko OK. 81

82 Poznámka: Některé webové servery mohou pracovat s odkazy, které jsou relativní ke kořenové složce webu spíše než k danému dokumentu. Jestliže si nejste jisti, jak váš server v tomto ohledu funguje, zvolte raději volbu Dokument. 5. Klepněte kamkoliv do okna dokumentu, abyste zrušili výběr textu odkazu. Výchozím formátováním odkazů je modrý text s modrým podtržením. Proto je text nově vytvořeného odkazu formátovaný modře na modrém pozadí. To lze změnit a zvýšit tak jeho čitelnost. 6. V selektoru značek vyberte <a> a klepněte na ikonu Nové pravidlo CSS v panelu Styly CSS. Odkaz tvoří právě značka <a> Dreamweaver navrhuje volbu Složený prvek". 7. Klepněte na Méně specifické tolikrát, dokud nedostanete selektor #footer p a". Pak stiskněte tlačítko OK. 8. V zobrazeném dialogu vyberte kategorii Typ a klepněte na paletu barvy a pomocí kapátka zvolte bílou barvu: #FFF. Pak stiskněte tlačítko OK. 82

83 Text odkazu je nyní bílý. Jakékoli značce <a> zobrazené v zápatí stránky se přidělí pravidlo stylu a zobrazí se jako bílý text s bílým podtržením. Hledání cíle odkazu pomocí procházení složek je jednou z metod. Dále vyzkoušejte vizuálnější přístup. 9. Pokud je třeba, stiskněte klávesu F8, čímž otevřete panel Soubory, v němž rozbalte složku lekceos. Poklepejte na soubor santorini-start.html, čímž se otevře. Soubor nejdříve uložte jako santorini.html, abyste uchovali předchozí verzi. V zápatí najděte text Kontaktujte nás a vyberte ho. Abyste vytvořili odkaz, můžete vybrat jakékoli množství textu; Dreamweaver sám vloží potřebné značky kolem vybraného textu. 10. V panelu Vlastnosti přetáhněte ikonu Ukázat na soubor -najdete ji vpravo od pole Odkaz - na soubor kontakt.html v panelu Soubory. 11. Pokud složka v panelu Soubory obsahuje stránku, na kterou chcete odkázat, ale složka není rozbalená, přetáhněte ikonu Ukázat na soubor nad tuto složku, tlačítko myši nepouštějte, ale počkejte, než se složka rozbalí. Pak můžete zamířit na soubor, na který chcete odkázat. Protože soubor santorini.html je propojený se souborem mojestyly.css, odkaz se automaticky zobrazí jako bílý text, tedy tak, jak jste nastavili v šabloně stylů odkazům v zápatí stránky. 12. Zvolte Soubor Uložit vše. 13. Zavřete soubor santorini.html. Soubor onas.html nechte otevřený pro další cvičení. Naučili jste se dvě metody vytváření hypertextových odkazů pomocí panelu Vlastnosti. K nalezení souboru, na který chcete odkázat, jste použili tlačítko Procházet. A naučili jste se také, jak využít ikonu Ukázat na soubor. 83

84 Vytvoření externího odkazu Stránky, které jste provázali pomocí odkazů v předchozím cvičení, byly součástí jednoho webového místa. Provázat ovšem můžete pomocí odkazů také stránky různých webů, tedy pokud znáte plnou webovou adresu. Odkazovat můžete na obrázek vyskytující se v místě aktuálního webového místa nebo v rámci jiného webu. V tomto cvičení použijete obrázek k vytvoření externího odkazu a vytvoříte též odpovídající textový odkaz. 1. Pokud je třeba, otevřete soubor onas.html, s nímž jste pracovali v předchozím cvičení. 2. V postranním panelu vyberte obrázek New Yorku. 3. V panelu Vlastnosti napište do pole Odkaz adresu a stiskněte klávesu Enter. Poznámka: Pokud je webová adresa příliš dlouhá nebo komplexní, najděte cílovou stránku ve vašem prohlížeči a zkopírujte adresu URL. Poté ji vložte ze schránky do pole Odkaz v panelu Vlastnosti. 4. Vyberte Soubor Uložit a použijte tlačítko Živé zobrazení, abyste si prohlédli výsledek. Všimněte si, že ukazatel myši se při najetí na obrázek změní na ruku, čímž signalizuje, že obrázek je odkazem. Pokud na obrázek klepnete, prohlížeč přejde na stránku služby Mapy Google, pokud jste samozřejmě připojeni k Internetu. Klepněte znovu na tlačítko Živé zobrazení nebo zavřete prohlížeč a vraťte se do Dreamweaveru. 5. Abyste stejný odkaz vytvořili z textu, umístěte ukazatel myši na konec úvodního odstavce stránky za text Zde je cestovní kancelář Tam a zpět. Napište Naše kancelář se nachází v New Yorku. Poznámka: Jestliže se odkazy ve výchozím stavu formátují podtržené, obrázky použité jako odkazy mají ve výchozím stavu kolem sebe rámeček. Abyste zabránili zobrazení rámečku kolem 84

85 obrázkového odkazu, vložte do šablony mojestyly.css nové pravidlo. twocolfixlthdr #sidebarl a img {border : 0;}. 6. Vyberte slova se nachází. V panelu Vlastnosti v poli Odkaz napište mapy.google.cz/. Pak stiskněte klávesu Enter. 7. Zvolte Soubor Uložit. Vytvořit interní nebo externí odkaz pomocí textu nebo obrázku je v Dreamweaveru velmi jednoduché. 17. lekce TVORBA NAVIGACE POMOCÍ CSS STYLŮ DRUHÁ ČÁST Upravení odkazu na ovou adresu Jiným oblíbeným typem odkazu je odkaz na . Jakmile na něj uživatel klepne, zobrazí se okno s novou zprávou a vyplněnou ovou adresou, což je vhodné, pokud chcete získat rychlou zpětnou vazbu například od svých zákazníků. Kód se odlišuje od standardního odkazu na stránce. Dreamweaver dokáže automaticky vytvořit správný kód pro jakýkoli odkaz na Otevřete soubor onas.html, s nímž jste pracovali v předchozím cvičení. 2. Ukazatel myši umístěte za text o Elaine a stiskněte klávesu Enter, čímž vytvoříte nový odstavec. Napište slova Napište Elaine. 85

86 3. Vyberte napsaná slova. 4. V kategorii Běžné na panelu Vložit klepněte na ikonu ový odkaz. 5. Jakmile se zobrazí stejnojmenný dialog, všimněte si, že Dreamweaver vložil vybraný text do pole Text. Ponechte pole Text, jak je, a do pole napište elaine@mojeadresa.cz. Pak stiskněte tlačítko OK. Vůbec není třeba psát předponu mailto:". Dreamweaver si s kódováním poradí automaticky, jak můžete vidět v poli Odkaz v panelu Vlastnosti. 6. Zvolte Soubor Uložit. Pokud máte ve svém počítači nainstalovaného ového klienta, použijte tlačítko Živé zobrazení nebo stiskněte klávesu F12 a poté klepněte na právě vytvořený e- mailový odkaz. Jakmile se zobrazí okno s novou zprávou, všimněte si pole Komu, v němž je vyplněná ová adresa zadaná v Dreamweaveru. 7. Zavřete jak okno se zprávou, tak okno prohlížeče nebo stiskněte tlačítko Živé zobrazení a vraťte se do Dreamweaveru. Funkce textového odkazu je závislá na existenci ového klienta instalovaného v počítači uživatele, jako je třeba Outlook či Thunderbird. Odkaz nebude fungovat, pokud uživatel používá k odesílání ů službu na Internetu, jako je třeba Seznam nebo Gmail. Tvorba odkazů v rámci jedné stránky Většinou, když klepnete na odkaz na stránku, prohlížeč zobrazí stránku odshora dolů. Občas však může design tvořit opravdu dlouhá stránka vyžadující přístup, jímž se zpřístupní určité části stránky pomocí odkazů. Pak můžete kamkoliv vložit odkaz vedoucí přímo na jakýkoli element, kterému jste přidělili 86

87 identifikátor, a to vše v rámci jediné stránky. V tomto cvičení využijete výhody identifikátoru, který jste použili dříve při tvorbě tabulky, takže vytvoříte odkaz vedoucí na určité místo na spodku stránky. 1. Znovu otevřete soubor santorini.html. Začneme přidáním nějakého textu našeho odkazu. 2. Klepněte myší do postranního panelu za text slunečnému počasí a stiskněte klávesu Enter, abyste vytvořili nový odstavec. 3. Napište Prohlédněte si doporučované hotely. 4. Vyberte slova doporučované hotely. V panelu Vlastnosti napište do pole Odkaz #hotely a stiskněte klávesu Enter. Právě jste vytvořili odkaz na místo na stránce, kde je umístěna tabulka s identifikátorem hotely Znak mřížky (#) značí, že odkaz směřuje na element s určitým identifikátorem v rámci aktuální stránky. Slovo následující za znakem mřížky - v tomto případě hotely - je název identifikátoru. Tento identifikátor byl již na stránce přidělený. Pokud máte hodně dlouhou stránku, jež vyžaduje odkazy tohoto typu, můžete použít jedinečné identifikátory pro nadpisy, seznamy, odstavce nebo jiné části stránky k vytvoření záchytných bodů pro vaše odkazy. K vytvoření odkazu na tabulku doporučených hotelů na jiné stránce v rámci jednoho webového místa by odkaz obsahoval jak název souboru, tak identifikátor, například takto: santorini.html#hotely. 5. Zvolte Soubor Uložit. Použijte tlačítko Živé zobrazení nebo váš prohlížeč k vyzkoušení funkčnosti odkazu. Poté se vraťte do Dreamweaveru. 6. Zavřete soubor santorini.html. Ponechte otevřený soubor onas.html, neboť s ním budete pracovat v dalším cvičení. Použití Ajaxu a framework Spry Profesionální weboví designéři nabízejí novou použitelnost a interaktivitu Internetu s příchodem nové éry Web 2.0. Vrcholnou technologií Web 2.0 je Ajax, což je zkratka výrazu Asynchronous JavaScript and 87

88 XML. Pokud jste někdy používali mapy Googlu nebo jste procházeli fotoalba na Flickru, zažili jste, co Ajax dokáže. Klíčovým termínem ve zkratce Ajaxu je asynchronous (česky asynchronní), což jednoduše znamená ne ve stejném čase". Běžné prohlížení stránek na webu je velmi lineární proces. Například řekněme, že si prohlížíte informace na stránkách nějaké společnosti. A tohle se děje na běžné webové stránce: 1. V prohlížeči navštívíte webovou stránku. 2. Ze vzdáleného serveru se pošle úvodní stránka. 3. Váš prohlížeč stránku vykreslí. 4. Vy klepnete na odkaz na stránce, abyste se dozvěděli více. 5. Váš prohlížeč si vyžádá novou stránku s dalšími informacemi od vzdáleného webového serveru. 6. Webový server tuto stránku pošle prohlížeči. 7. Váš prohlížeč načte stránku a zobrazí ji celou. A takto vypadá stejná operace v případě stránky řízené Ajaxem: 1. V prohlížeči navštívíte webovou stránku. 2. Ze vzdáleného serveru se pošle úvodní stránka. 3. Váš prohlížeč stránku vykreslí a zároveň nahraje všechna příbuzná data do stroje Ajaxu. 4. Vy klepnete na odkaz na stránce, abyste se dozvěděli více. 5. Stroj Ajaxu, který se chová jako prostředník, zpracuje nový požadavek a vrátí odpovídající data. 6. Váš prohlížeč zobrazí nová data na existující stránce a aktualizuje pouze odpovídající část stránky. Ajax v podstatě nahrává pouze odpovídající data stránky, ale nezobrazí je, dokud si o ně nepožádáte. Díky tomu je surfování mnohem plynulejší a interaktivnější. Jestliže se požadují jiná data, než se původně nahrála, stroj Ajaxu stáhne data z webového serveru na pozadí a poté je doručí prohlížeči, aby zobrazil jen ta data, která požadujete. Většina implementací Ajaxu vyžaduje pokročilou znalost JavaScriptu a výbornou znalost kódování. Abyste se nemuseli učit programovat, společnost Adobe vyvinula aplikační rámec (framework) Ajaxu známý jako Spry, jenž je zabudován do Dreamweaveru CS4. Dreamweaver poskytuje čtyři sady nástrojů Spry: Sada dat Spry (SpryData) - zahrnuje data HTML nebo XML do webové stránky a umožňuje je interaktivně zobrazit ajaxovým stylem. 88

89 Formulářové ovládací prvky Spry - kombinují elementy formuláře, jako jsou textová pole a seznamy s ověřovacími funkcemi JavaScriptu a uživatelsky příjemným hlášením chyb. Ovládací prvky Spry pro tvorbu návrhových prvků stránky - poskytují řadu sofistikovaných ovládacích prvků layoutu, včetně záložkových panelů. S nástrojem pro tvorbu záložkových panelů a nabídkových panelů budete pracovat později v této lekci. Spry Efekty - rozšiřují Dreamweaver o knihovnu chování (behavior) s pokročilou funkcionalitou k interaktivnímu ovlivňování elementů na stránce. Efekty zahrnují schopnost mizícího přechodu, zobrazení, snímkování, označení aktivních prvků a změnu zaměřených komponent stránky. 18. lekce TVORBA NAVIGACE POMOCÍ NABÍDEK SPRY Vkládání pruhu nabídek Spry Každá webová stránka potřebuje interní navigaci. Většina webových stránek navržených v posledních letech používá navigaci a nabídky založené na seznamech stylovaných pomocí CSS. S trochou JavaScriptu se může seznam stát celistvou vodorovnou nebo svislou navigací s podnabídkami v rozbalujících se nabídkách. Ovládací prvek Pruh nabídek je jednoduchý a silný nástroj určený ke 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, jenž zajistí vysunování podnabídek. Ovládací prvek Pruh nabídek 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 fungujících navigačních odkazů. 1. Otevřete soubor onas.html. 2. V postranním panelu -vyberte obrázek New Yorku. Stiskněte klávesu s šipkou směřující doleva, abyste výběr přesunuli mimo obrázek a vytvořili místo vložení nalevo od obrázku. Poté stiskněte klávesu Enter k vytvoření prázdného řádku před obrázkem. 89

90 3. V kategorii Spry v panelu Vložit klepněte na ikonu Spry pruh nabídek. 4. Ve stejnojmenném dialogu vyberte volbu Svisle" a stiskněte tlačítko OK. 5. Na obrazovce se zobrazí navigační nabídka. Abyste ji v dokumentu vybrali, klepněte na modrý pruh u horního okraje. 90

91 6. Než nabídku upravíte, zvolte Soubor Uložit. Pokud se vás Dreamweaver zeptá, zda má zkopírovat závislé soubory, stiskněte tlačítko OK. Jakmile jste nabídku vybrali, panel Vlastnosti se použije k vytvoření odkazů. Dreamweaver vytvoří složku SpryAssets v kořenovém adresáři vašeho webu, aby mohl pracovat s jednotlivými ovládacími prvky. Soubory JavaScriptu a CSS, jež pruh nabídek vyžaduje, se přidají do této složky. Vy už jste tuto složku zkopírovali na váš pevný disk, abyste si na začátku této lekce mohli prohlédnout dokončenou stránku. Některé z nezbytných souborů se tak ve složce SpryAssets již vyskytují a nyní se automaticky připojí k vaší HTML stránce. 7. Vyberte položku Položka 1" v seznamu tlačítek v hlavní úrovni nabídky. Poté v poli Text napište Úvodem a níže v poli Odkaz vymažte znak mřížky a napište index.html. Vymažte položky Položka 1.1", Položka 1.2" a Položka 1.3" tak, že klepnete na ikonu minus nad seznamem tlačítek ve druhé úrovni nabídky. 8. Vyberte položku Položka 2" v seznamu tlačítek v hlavní úrovni nabídky. Poté v poli Text napište Itálie a níže v poli Odkaz ponechte znak mřížky. Nad seznamem tlačítek ve druhé úrovni stiskněte ikonu se znakem plus, čímž přidáte další položku. V poli Text napište Umbria a v poli Odkaz vymažte znak mřížky a napište umbria.html. Poznámka: Znak mřížky (#) neodkazuje na žádnou stránku v rámci vašeho webu, ale vytváří spoušť, která simuluje odkaz a umožňuje, aby se otevřela podnabídka. Bez tohoto znaku nebo skutečného odkazu v hlavní nabídce by se podnabídka nezobrazila. 9. Vyberte položku Položka 3". Poté v poli Text napište Řecko a pole Odkaz nechte, jak je. Vyberte položku Položka 3.1". Do pole Text napište Santorini a níže do pole Odkaz (Link) vložte místo znaku mřížky santorini.html. 91

92 10. Vyberte položku Položka 3.2". Do pole Text napište Naxos a níže do pole Odkaz vložte místo znaku mřížky naxos.html. Vymažte položku Položka 3.3" tak, že ji vyberete a poté klepnete na ikonu se znakem minus. 11. Vyberte položku Položka 4". Do pole Text napište O nás. V poli Link napište onas. html. 12. Klepnete na tlačítko se znaménkem plus nad seznamem tlačítek podnabídky, čímž vytvoříte položku 4.1. Vyberte ji a v poli Text napište Kontaktujte nás. V poli Odkaz napište kontakt.html. 13. Zvolte Soubor Uložit. Dokončené odkazy se zobrazí v okně dokumentu. Jestliže se vám zobrazuje některá z podnabídek otevřená, pak klepněte v panelu Vlastnosti v levém sloupci na jakoukoli položku, která nemá podnabídku, čímž se nabídky v dalších úrovních skryjí. 14. V panelu Vlastnosti klepněte na tlačítko Vypnout styly. V dokumentu nyní vidíte nestylovaný seznam, který jste právě vytvořili pomocí panelu Vlastnosti. Klepnutím na tlačítko Vypnout styly můžete upravit nestylovaný vnořený seznam v okně dokumentu a napsat sem text a vytvořit odkazy, čímž se vygeneruje potřebný kód HTML. 92

93 Poznámka: Ne všechna zobrazovací zařízení používají CSS. Například některá méně schopná mobilní zařízení CSS neumí. Vaše nabídka se na těchto zařízeních zobrazí jako seznam a odkazy budou stále funkční. 15. V panelu Vlastnosti klepněte na tlačítko Zapnout styly, čímž seznamu vrátíte styly. 16. Zvolte Soubor Uložit. Dreamweaver uloží závislé styly CSS a soubory JavaScriptu do složky SpryAssets. 17. Použijte živé zobrazení nebo prohlížeč, abyste si stránku prohlédli a novou navigační nabídku otestovali. Jelikož žádná z dalších stránek zatím navigaci nemá, klepněte v prohlížeči na tlačítko Zpět a vraťte se na stránku onas.html. Klepněte opět na tlačítko Živé zobrazení (Live View) nebo zavřete okno prohlížeče a vraťte se zpět do Dreamweaveru. 19. lekce TVORBA NAVIGACE POMOCÍ NABÍDEK SPRY - POKRAČOVÁNÍ Upravení vzhledu Pruhu nabídek Spry Ovládací prvek Pruh nabídek Spry umožňuje vytvořit profesionálně vypadající nabídku, a to rychle a jednoduše. A také jeho stylování je velmi snadné. Výchozí možnosti barevnosti můžete použít k lepšímu barevnému sladění navigace s barevností webové stránky. Již dříve jste viděli, že Dreamweaver přidal k vaší stránce soubory s kódy JavaScriptu a CSS. Možná jste si také všimli, že soubor nazvaný SpryMenuBarVertical.css je připojený k vaší stránce. 1. V panelu Styly CSS sjeďte v seznamu stylů níže, až najdete soubor SpryMenuBarVertical. css, který rozbalte. Buďte opatrní, abyste nevybrali soubor SpryMenuBarVertícal-dokonceno.css. Ačkoliv ten by neměl být propojen k této stránce, najdete jej ve složce SpryAssets, abyste si mohli prohlédnout dokončenou stránku. 93

94 2. V části Všechna pravidla vyberte selektor ul.menubarverticala. Pravidlo s tím selekto-rem ovlivňuje barvu a pozadí odkazů, tedy značek <a>. Pokud je třeba, potáhněte myší směrem dolů za spodní okraj panelu Styly CSS, takže se objeví část Vlastnosti.V této části klepněte na paletu barev u vlastnosti background-color a použijte kapátko k výběru světle žluté barvy s kódem # F F O. Poté klepněte na paletu barev u vlastnosti co1or a kapátkem vyberte tmavě modrou barvu s kódem #00C. Stiskněte klávesu Enter. 3. V části Všechna pravidla vyberte selektor ul.menubarvertical ul li. Pravidlo s tímto selektorem ovlivňuje šířku podnabídek. V části Vlastnosti změňte šířku z 8. 3em na 200px. Jelikož má postranní panel pevnou šířku, šířka navigační nabídky může být také omezená. 94

95 4. V části Všechna pravidla vyberte selektor ul. MenuBarVertica1 li. Pravidlo s tímto selektorem kontroluje hlavní seznam navigace a potřebuje trochu vyladit. Klepněte na ikonu Upravit styl. Zobrazí se dialog pro úpravu stylu. 95

96 5. Vyberte kategorii Rámeček a do pole Width (šířka) napište Vyberte kategorii Okraj. Zrušte zatržení volby Stejné pro všechny" v částech Style (styl), Width (šířka) a Color (barva). V části Style vyberte v polích Right (vpravo) a Bottom (dole) slovo solid, v části Width napište tamtéž 1 a z roletky vyberte hodnotu px", v části Color napište tamtéž #00C. Pak stiskněte tlačítko OK. 96

97 7. Zvolte Soubor Uložit vše. 8. Použijte tlačítko Živé zobrazení nebo váš prohlížeč k prozkoumání vzhledu navigační nabídky. 9. Tlačítko stiskněte znovu nebo zavřete okno prohlížeče a vraťte se do Dreamweaveru. Poznámka: Pokud budete chtít změnit polohu vyskakující podnabídky, upravte hodnotu vlastnosti margin v pravidle se selektorem ul. MenuBarVertical ul. Namísto barvy pozadí byste mohli použít obrázek na pozadí, a to úpravou pravidel pro značku <a>, včetně pravidla se selektorem ul. MenuBarVertical a. MenuBarItemHover. 97

98 Vodorovná navigační nabídka se vkládá stejným způsobem. Velkým rozdílem ve stylování vodorovné nabídky ovšem je, že šířka tlačítek je v tomto případě určena množstvím těchto tlačítek v nabídce. Například vodorovná nabídka s pěti tlačítky bude širší nebo vodorovná nabídka pouze se čtyřmi tlačítky. Vkládání Spry panelu se záložkami Spry panel se záložkami je navržen tak, aby uživatelům pomáhal v navigaci na stránce bez nutnosti pohybovat se na dlouhých stránkách tím, že je zkrátí do panelů se záložkami. Tento ovládací prvek můžete umístit kamkoliv do webové stránky, pokud zde máte dostatek horizontálního prostoru, do něhož se záložky mohou vejít. V tomto cvičení budete organizovat osobní profily na stránce onas.html do panelu se záložkami. 1. Otevřete onas.html 2. Klepněte za úvodní odstavec na stránce, takže sem vložíte ukazatel myši, a poté stiskněte klávesu Enter, abyste vytvořili nový odstavec. Ukazatel myši nechte na místě, neboť označuje bod vložení Spry panelu se záložkami. 3. V kategorii Spry v panelu Vložit klepněte na ikonu Spry panel se záložkami. Panel se záložkami se zobrazí na stránce. Nyní se nezabývejte tím, že panel vytlačil další obsah doprava; jakmile skončíte, vše bude vypadat skvěle. 98

99 Poznámka: Soubor SpryTabbedPanels.css s upravenými pravidly CSS už byl ve složce SpryAssets, neboť jste ho sem zkopírovali z CD. Změny vysvětlíme na konci tohoto cvičení. Barvy, které uvidíte, nejsou běžnými výchozími barvami panelu se záložkami. Spry panel se záložkami má dvě části: pojmenovanou záložku a obsahovou oblast každé záložky. Do obsahové oblasti můžete vložit jakýkoli obsah: text, grafiku, tabulky, seznamy, formuláře, nebo dokonce film ve Flashi. 4. Použijte panel Vlastnosti, abyste přidali tři další panely. Na této stránce jich potřebujeme pět. Klepněte třikrát na ikonu Přidat panel (+). V okně dokumentu Dreamweaver zobrazuje ikonu oka, jež umožňuje vybrat aktuálně skrytý obsah panelu a zpřístupní ho k úpravám. 5. Vyberte Záložka 1" a napište Elaine. 6. Vyberte text Obsah 1, abyste mohli text smazat pomocí klávesy Delete. 7. Ukazatel myši umístěte kamkoliv do profilu Elaine. Pak ze selektoru značek vyberte <div.profi1>, abyste vybrali celou značku <div>. 8. Zvolte Upravit Vyjmout nebo použijte klávesovou zkratku Ctrl + X. 9. Ukazatel myši umístěte opět do prázdné oblasti v obsahové části panelu. Zvolte Upravit Vložit nebo použijte klávesové zkratky Ctrl + V. 99

100 Značka <div.profil) s popisem Elaine se nyní zobrazuje jako obsah první záložky. Protože informace o Elaine byly vyjmuty z předchozího umístění, profil Lindy se posunul nahoru a do strany. 10. Zopakujte kroky 5 až 9, abyste změnili názvy záložek s profilem Lindy, Jasona, Lin a Charlie-ho. A zároveň vyjměte z jejich profilů elementy <div.profi1> a vložte je do obsahové části v jednotlivých záložkách. Jakmile skončíte, použijte ikonu oka, abyste si prohlédli obsah všech záložek. Pokud budete chtít přidat nějaký další obsah nebo stávající upravit, najděte odpovídající obsah pomocí ikon s okem. 11. Zvolte Soubor Uložit. 12. Použijte tlačítko Živé zobrazení, abyste vyzkoušeli, jak záložky fungují. Pak se vraťte zpět stisknutím tlačítka Živé zobrazení nebo zavřením okna prohlížeče do Dreamweaveru. 100

101 Všimněte si, že jakmile se vykreslí první stránka v Živém zobrazení nebo v prohlížeči, otevře se Záložka 1. Spry panely se záložkami vlastně z technického hlediska nejsou žádnou navigací. Ve skutečnosti nepřesunují uživatele ze stránky na stránku nebo do vybraných oblastí jedné stránky. Nicméně poskytují jistý způsob navigace" mezi různým obsahem a tematickým členěním do záložek, na které lze klepnout. Ty seskupují obsah do malých bloků a eliminují tak nutnost většího pohybu v dokumentu. Pravidly CSS, jimiž jste změnili v souboru SpryTabedPanel.css barvu ovládacího prvku na modrou, jsou.tabbedpanelstab,.tabbedpanelstabhover,.tabbedpanelstabselected a.tabbed- PanelsContentGroup. 20. lekce INTEGRACE JAVASCRIPTU Cíl hodiny: vysvětlit práce s JavaScripty v Dreamweaveru Co to je a jak funguje chování Dreamweaveru Chování (behavior) Dreamweaveru je kódem JavaScriptu, který vykonává nějakou akci, jako je třeba otevření okna prohlížeče, jejž spouští nějaká událost, jako je třeba klepnutí myší. Použití chování je proces o třech krocích: 1. Vyberete element na stránce, který má spouštět chování. 2. Vyberete, jaké chování se má použít. 101

102 3. Určíte nastavení nebo parametry takového chování. Běžně zahrnuje spouštěcí element odkaz, který lze přidělit různému množství textu nebo obrázku. V některých případech chování nevyžaduje nahrání nové stránky, neboť jej zaměstná pouze hloupý odkaz, jenž reprezentuje znak mřížky (#). V lekci 5 jste tyto odkazy použili ke spouštění vyskakující podnabídky. Dreamweaver nabízí více než 30 chování, která jsou všechna přístupná z části Chování panelu Inspektor tagů. Zvolte Okno Chování. Klepněte na ikonu se znakem plus (+), abyste zobrazili seznam chování dostupných k určité části okna dokumentu. Některé z funkcionalit zde dostupných pro použití v Dreamweaveru obsahují: Otevření a zavření okna Změnu zdroje obrázku a zpětnou změnu obrázku pro efekt překreslení (rollover) 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ňující hláškou Změna textu nebo jiného obsahu HTML v určené oblasti Objevování nebo skrytí částí stránky Volání uživatelské funkce JavaScriptu Všechna chování zobrazí jedinečný dialog, v němž lze určit odpovídající nastavení. Například dialog Otevřít okno prohlížeče vám umožňuje nastavit webovou adresu souboru, který chcete nechat zobrazit v nově otevíraném okně, ale také šířku a výšku tohoto okna a jeho jiné parametry. Parametry můžete změnit, kdykoliv chcete. 102

103 Poté co definujete parametry chování, zobrazí se panel Chování se zaznamenanou výchozí spouštěcí událostí, jež se zobrazuje vlevo, a jejím názvem, jenž se zobrazuje vpravo. Událost lze změnit vybráním jiné události ze seznamu chování. Například chování Otevřít okno prohlížeče použije ve výchozím nastavení ke spuštění chování událost onclick (klepnutí myší). Pokud budete preferovat překreslení obrázku (rollover), můžete změnit událost na OnMouseOver (přejetí kurzorem myši). Chování jsou extrémně flexibilní a vícenásobná chování můžete přiřadit jediné spoušti. Například můžete chtít zaměnit jeden obrázek za druhý a poté změnit text odpovídající popisku obrázku a to vše jediným klepnutím myši. Ačkoliv rychlá odezva vyžaduje, aby se vše v takovém případě dělo simultánně (zároveň), chování se ve skutečnosti spouští sekvenčně (za sebou). Existuje-li více chování spouštějících se na základě stejné události, budete mít k dispozici možnost volby pořadí, v němž se chování vykonají. Prostě je v seznamu posunete nahoru nebo dolů. 103

104 Prohlédnutí dokončeného souboru V této první části budete pracovat se stránkou věnující se klientům cestovní kanceláře. Abyste si soubor, na němž budete pracovat, mohli prohlédnout, otevřete dokončenou stránku v prohlížeči. 1. Spusťte Adobe Dreamweaver CS4. 2. V panelu rozbalte složku lekceoó. 3. Vyberte soubor nasiklienti-dokonceno.html a stiskněte klávesu F12, abyste si soubor prohlédli ve vašem primárním prohlížeči. Stránka obsahuje Ajaxem poháněné efekty vytvořené v Dreamweaveru pomocí technologie Spry. 4. Pokud je vaším primárním prohlížečem Internet Explorer, možná se zobrazí panel oznamující, že je vypnutá podpora JavaScriptu. Pokud se tak stane, klepněte na panel a zvolte Povolit zablokovaný obsah. Ukazatel myši přemístěte na nadpisy Naši klienti. Všimněte si zvýraznění nadpisu červenou barvou - zobrazí se po krátkou dobu a pak zmizí. To je výsledek Spry efektu nazvaného Zvýraznění (Highlight). 5. Klepněte na záhlaví sloupce Od, abyste seřadili data ve sloupci podle roku od nejmenší-ho k největšímu. Klepněte opět na záhlaví, čímž seřadíte data od největšího k nejmenšímu. Klepněte na sloupec Firma, abyste data v sloupci setřídili podle abecedy. Schopnost třídit tabulku podle záhlaví slupce byla dosažena Sady dat Spry (Spry data set). 6. Jakmile prohlížení stránky dokončíte, zavřete okno prohlížeče a vraťte se do Dreamweaveru. Použití chování Spry efektů Spry efekty mohou vytvářet vizuální efekty na stránce, jako je třeba zvýraznění elementů, obrázky postupně přecházející jeden v druhý nebo zatřesení celým elementem, jako by bylo zemětřesení. Tyto efekty slouží k upoutání pozornosti nebo ke zvýraznění elementu. Jsou velmi výrazné, a proto byste je měli používat opatrně, takže různé části stránky nebudou neustále blikat, třást se, poskakovat nebo se měnit. 1. Otevřete soubor nasiklienti-start.html 2. Zvolte Soubor Uložit jako a uložte soubor pod názvem nasiklienti.html. Pokud budete opět potřebovat startovací stránku, tím přeuložením zůstane přístupná na vašem pevném disku. 3. Spry efekty můžete přidělit čemukoliv, co máte zrovna vybrané v okně dokumentu. Elementům je také můžete přiřadit na základě identifikátoru. Namísto použití aktuální metody výběru přidělte 104

105 elementu identifikátor a poté tomuto elementu přiřaďte Spry efekt. Identifikátor přidáte v zobrazení Kód a návrh (Code and Design). 4. Ukazatel myši umístěte kamkoliv do nadpisu pod značkou < h 1 > a s textem Naši podnikoví klienti. 5. Klepněte na tlačítko Rozdělit, čímž se přepnete do zobrazení Kód a návrh. 6. V kódu hned za nadpisem h1, ale ještě před uzavírací závorkou (>) vložte mezeru a napište id="npk". Název identifikátoru je zkratkou pro naši podnikoví klienti. 7. Klepněte na tlačítko Návrh, čímž se vrátíte do zobrazení Návrh. 8. Pokud je třeba, zvolte Okno Chování k zobrazení panelu Chování. Klepněte na ikonu se znakem plus (+), čímž přidáte chování. Zvolte Efekty Zvýraznění. 105

106 9. V zobrazeném dialogu nastavte v poli Cílový element volbu hl npk". V poli Trvání efektu nechte zadanou výchozí hodnotu 1000 milisekund. Ujistěte se, že v poli Počáteční barva je hodnota #fff a v poli Konečná barva hodnota #f00 (nebo #ff0000, jak ukazuje obrázek). V poli Barva po efektu by měla být hodnota #fff. Pak stiskněte tlačítko OK. Efektem bude drobné červené zvýraznění za značkou <h1 id="npk" >. 10. V panelu Chování klepněte na pole s hodnotou onclick", čímž ho aktivujete. Poté ze seznamu zvolte onmouseover". Pokud chcete změnit parametry efektu Zvýraznění, poklepejte na jeho název v pravém sloupci, čímž se otevře příslušný dialog. Poznámka: Efekt lze smazat vybráním Zvýraznění v panelu Chování a klepnutím na ikonu se znakem minus (-). 106

107 11. Použijte Živé zobrazení nebo váš prohlížeč k prohlédnutí souboru. Efekt znovu neuvidíte, pokud ukazatel myši neumístíte na nadpis. Klepněte znovu na tlačítko Živé zobrazení nebo zavřete okno prohlížeče a vraťte se zpět do Dreamweaveru. 12. Práci uložte. 21. lekce INTEGRACE JAVASCRIPTU, 2.ČÁST POUŽITÍ JAZYKA XML Jak využívat jazyka XML Než budete moci zobrazit jakékoli sady dat pomocí Spry, budete muset vytvořit správný zdroj dat XML. XML (Extensible Markup Language) je standardizovanou specifikací určenou k ukládání dat v textovém formátu. Každý soubor jazyka XML může obsahovat vícenásobné záznamy dat. Například v tomto cvičení budete pracovat se souborem XML, jenž obsahuje data ve formě čísel klientů. Ten soubor se jmenuje klienti.xml, a obsahuje záznamy o různých klientech. Záznam každého klienta vypadá bez dat následovně: <klient> <společnost></společnost> <popis></popis> <činnost></činnost> <od></od> </klient> XML je značkovacím jazykem, podobně jako HTML. Oba dva jazyky používají stejnou metodu označování textu pomocí značek. XML je oproti HTML rozšiřitelným v tom, že můžete značky pojmenovat podle sebe, třeba na základě dat, jež označují. Jak uvidíte v následujícím cvičení, způsob, jímž jsou elementy XML pojmenovány a uspořádány, se uvádí jako schéma. Data umísťujete mezi otevírací a uzavírací značku, takto: 107

108 <společnost>společnost Anon</společnost> Data, která by mohla používat speciální znaky, jako třeba ostré závorky používané k uzavření názvu značky, se spoléhají na uvedení speciálního oddělovače pro znaková data. Ten se používá následovně: <popis>![cdata[společnost Anon je <strong>si1nou</strong> společnosti. ]]</popis> Oddělovač CDATA umožňuje datům XML, aby obsahovala značky HTML. Například soubor XML použitý v tomto cvičení obsahuje plně formátovaný neuspořádaný seznam v jazyce HTML. Importování dat XML pomocí Spry Dreamweaver pracuje se schématy XML pomocí datového objektu Spry, s nímž budete pracovat v následujících několika krocích. 1. V panelu Soubory (Files) rozbalte složku lekceoó a poklepejte na soubor nasiklienti.html. Ukazatel myši umístěte pod odstavec v elementu d i v s identifikátorem maincontent. Tím jste určili místo, kam se sada dat vloží. 2. V panelu Vložit se přepněte do kategorie Spry. 3. V kategorii Spry klepněte na Sada dat Spry. Jinou metodou je zvolení Vložit Spry Sada dat Spry. Nyní je třeba provést tři kroky k dokončení nastavení sady dat. 4. V zobrazeném dialogu Sada dat Spry je první obrazovkou Zadat zdroj dat. Klepněte do roletky Vyberte datový typ a vyberte volbu XML". V poli Název sady dat ponechte dsl a klepněte na tlačítko Procházet. 5. V dialogu Vyberte zdroj XML najděte složku lekceoó a vyberte soubor klienti.xml. Výběr potvrďte stiskem tlačítko OK. V úvodním dialogu v poli Element řádku zvolte klient". 108

109 6. Klepněte na tlačítko Další, čímž se posunete do druhého kroku. Na obrazovce Nastavit možnosti dat vyberte datový typ pro každý sloupec. Klepnutím do sloupce se dozvíte, jaký datový typ má přiřazený. Když je sloupec vybraný, datový typ se zobrazí u horního okraje v nabídce Text. Výchozí typ lze změnit pomocí roletky. Typem může být řetězec (znaky nebo písmena), číslo, datum a html. Datové typy prvních tří sloupců mohou zůstat ve formě řetězce. Sloupec nazvaný činnost" je třeba nastavit jako typ html, neboť obsahuje značky HTML. Datovým typem posledního sloupce by měl zůstat Řetězec" (String). 7. Klepněte na tlačítko Další, abyste se přesunuli do posledního kroku. Na obrazovce Vyberte možnosti vložení vyberte volbu Vložit tabulku" a klepněte na tlačítko Nastavení. 109

110 Zobrazí se dialog Datová sada Spry - vložit tabulku. V dialogu vidíte nástroje, kterými je možno přidávat nebo ubírat sloupce, pohybovat s nimi nahoru a dolů, aktivovat jejich třídění, umožnit použití tříd na sloupce a řádky, případně aktualizovat detaily oblastí v případě stisknutí řádku tabulky. 8. Klepněte na tlačítko OK, čímž souhlasíte s výchozím nastavením. Vrátíte se do dialogu Vyberte možnosti vložení. 110

111 Výchozí nastavení bude plně postačovat malé tabulce v tomto cvičení, ale využít můžete mnohem mocnější nástroje třídění a zobrazení, které poskytuje sada dat Spry na větších a komplexnějších tabulkách. 9. Klepněte na tlačítko Hotovo. Datový typ Spry Aby fungovalo třídění, je třeba použít správný datový typ. Možnými typy jsou: řetězec (string) - abecedně-číslícová data číslo (number) - číslicová data datum (date) - plné datum html- text označený pomocí značek, jako seznamy v tomto příkladu. 10. Zvolte Soubor Uložit. V zobrazení Návrh uvidíte tabulku s výplňovým prostorem pro sadu dat. Vlastní data uložená v souboru XML se zobrazí pouze tehdy, když stránku necháte vykreslit v Živém zobrazení nebo v prohlížeči. Kromě tabulky a výplňového prostoru Dreamweaver vložil také řádky s důležitým kódem. Kromě souborů JavaScriptu zmíněných dříve stránka obsahuje také další funkci JavaScriptu vloženou za značku <head>. 11. Klepněte na tlačítko Kód, abyste se přesunuli do zobrazení s kódem. Posuňte se v dokumentu níže do oblasti kolem řádku 17, kde uvidíte odkazy na soubory JavaScriptu a funkci, jejímž účelem je ovládání sady dat Spry. 111

112 Sady dat Spry vám poskytují mocný nástroj k importování zdrojových materiálů ve formátu XML nebo HTML a jejich dynamické zobrazení na webové stránce s pomocí tabulek nebo obalových elementů, kontejnerů (převážně elementů div). Tyto napěchované kontejnery mohou obsahovat detailní rozvržení a vyhledávací sekce, čímž vám dávají různé možnosti, jak pracovat se sadami dat Spry. 22. lekce SAMOSTATNÁ PRÁCE VYTVOŘENÍ SPRY SKLÁDAČEK Vytváření Spry skládaček Spry skládačka je podobná Spry panelu se záložkami, neboť organizuje mnoho obsahu do celistvého vícepanelového zobrazení. Záložky jsou naskládány na sobě spíše než vedle sebe, takže když na jednu z nich klepnete, panel se plynule rozevře a zobrazí obsah v požadované záložce. Prohlédněte si to, co budete dělat v tomto cvičení: 1. V panelu Soubory vyberte soubor santorini-dokonceno.html a stiskněte klávesu F2, abyste si stránku prohlédli ve vašem primárním prohlížeči. Část stránky označená identifikátorem maincontent je vytvořena pomocí Spry skládačky. 2. Přecházejte z jednoho panelu na druhý klepnutím na záhlaví každého z nich. 3. Okno prohlížeče zavřete a vraťte se do Dreamweaveru. Zvolte Soubor Zavřít. 112

113 Přidání Spry skládačky V tomto cvičení vložíte do vašeho layoutu Spry skládačku. 1. Otevřete soubor santorini-start.html. 2..Zvolte Soubor Uložit. V poli pro název souboru napište santorini.html. Stiskněte tlačítko Uložit.Předchozí layout stránky o Santorini zůstal v původním znění na svém místě. 3. Umístěte ukazatel myši na konec řádku Ráj u moře, čímž vytvoříte bod pro vložení skládačky. 4. V kategorii Spry v panelu Vložit klepněte na ikonu Spry skládačka. Dreamweaver vloží výchozí ovládací prvek Spry skládačka do stránky. Výchozím prvkem je dvoupanelová skládačka s rozbaleným horním panelem. Modrá záložka s označením Skládačka Spry:Accordion 1 a rámeček označují nový objekt. Jakmile je vybraná, označení skládačky a obsah lze přímo měnit v zobrazení Návrh. 5. Zvolte Soubor Uložit vše. Pokud je třeba, stiskněte tlačítko OK k potvrzení přijetí závislých souborů, které Dreamweaver přidá do složky SpryAssets. 6. Vyberte výplňovou frázi Popisek 1 a napište Vítejte na Santorini. 7. Vyberte fotografii páru na střeše a veškerý text níže, který popisuje vesnice a pláže. Zastavte se před dalším nadpisem Co říkají naši zákazníci. 8. Abyste zajistili, že jste nevynechali žádné značky, stiskněte tlačítko Kód (Code). Ujistěte se, že jste vybrali celý blok od značky <p> před obrázkem až k uzavírající značce </ul> za druhým vybraným seznamem. Jde o řádky

114 9. Klepněte na tlačítko Návrh, abyste se vrátili zpět do návrhového zobrazení. 10. Zvolte Upravit Vyjmout, čímž zkopírujete fotografii a text do schránky. 11. Vraťte se do skládačky. Vyberte text Obsah 1. Zvolte Upravit Vložit.V návrhovém zobrazení uvidíte pouze část obsahu, neboť v tomto zobrazení se nezobrazí posuvník. 12. Abyste viděli a upravili celý obsah, poklepejte na panel nebo na něj klepněte pravým tlačítkem, případně zvolte Zobrazení elementu Plné. 13. Ukazatel myši umístěte nad šedou oblast s názvem Popisek 2, až uvidíte ikonu oka. Klepněte na ni, čímž se otevře panel

115 14. Vyberte Popisek 2 a napište Co říkají naši zákazníci. 15. Opakujte kroky 7 až 11, v nichž vyjmete další nadpisy, značky <h2>, s textem Co říkají naši zákazníci a informacemi pod nadpisem. Zastavte se před dalším nadpisem, Doporučené hotely. Vložte obsah do panelu v oblasti Obsah 2. Vložení dalších panelů K vložení nebo vyjmutí panelů do nebo ze skládačky Spry použijte panel Vlastnosti 1. Ujistěte se, že máte v okně dokumentu vybranou skládačku Accordion V panelu Vlastnosti (Properties) klepněte na tlačítko plus (+), čímž přidáte další panel. Poznámka: Panely lze vyjmout pomocí tlačítka minus (-) a přeuspořádat klepnutím na tlačítka s šipkami směrem nahoru a dolů. 3. V okně dokumentu vyberte Popisek 3 a napište Doporučené hotely. 4. Opakujte kroky 7 až 11 z předchozího cvičení, jimiž vyjmete a vložíte nadpisy značky <h2> s textem Doporučené hotely společně s fotografií a tabulkou do panelu Obsah Zvolte Soubor Uložit. Použijte živé zobrazení, abyste si prohlédli stránku ve vašem primárním prohlížeči. Ve výchozím stavu se zobrazuje horní panel. 115

116 6. Klepněte na záložku skládačky a posuňte se obsahem dolu. 7. Klepněte na odkaz v postranním panelu vedoucí na doporučené hotely v nyní zavřeném panelu. Poté klepněte na odkaz znovu. Odkaz v postranním panelu funguje pouze tehdy, když je třetí panel aktivní a otevřený. 8. Klepněte znovu na tlačítko Živé zobrazení nebo zavřete okno prohlížeče a vraťte se do Dreamweaveru. 9. V postranním panelu vymažte větu, která říká Prohlédněte si doporučované hotely. Odkaz funguje pouze tehdy, když je otevřený panel Doporučené hotely, což může být matoucí. K celistvějšímu přístupu k veškerému obsahu stránky ve skládačce není potřeba odkaz na další obsah u spodního okraje dlouhé stránky. 116

117 10. Zvolte Soubor Uložit. Vytvořili jste Spry skládačku a vložili jste do ní obsah a další panely. Ačkoliv obsah vložený v tomto cvičení již na stránce byl, obsah můžete vložit i jinak. Můžete ho třeba zkopírovat z jiných zdrojů, například z Wordu. Do panelů můžete k textům, obrázku či tabulce vložit jakýkoli typ obsahu. Úprava Spry skládačky Podobně jako jiné ovládací prvky Spry, i Spry skládačka má připojený soubor CSS, V tomto cvičení vyladíte výšku panelu s obsahem a změníte barevné schéma v panelu s popiskem. 1. V panelu Styly CSS najděte šablonu stylů SpryAccordion.css a rozbalte ji. Nyní máte ke své stránce připojené čtyři externí šablony stylů. 2. Vyberte selektor.accordionpaneltab 3. Klepněte na ikonu Upravit styl. 4. V zobrazeném dialogu vyberte kategorii Typ a u pole Color klepněte na ikonu palety barev a vyberte novu barvu pomocí kapátka. Barvu změňte na bílou (#FFF). 117

118 5. Zvolte kategorii Pozadí. V poli Background-color změňte barvu #CCC na #345FA3. To je barva použitá na text ve značce <hl> nad skládačkou. V několika dalších krocích změníte ve skládačce všechnu modrou na barvu #345FA3. 6. Stiskněte tlačítko OK. 7. V části Všechna pravidla panelu Styly CSS vyberte selektor. AccordionPanel Content. Pokud je třeba, zvětšete část Vlastnosti níže. Klepněte do pravého sloupce u vlastnosti height, aby se pole dalo upravit. A změňte hodnotu výšky z 200 na 400. Hodnotu v nabídce vpravo ponechte na px" a stiskněte klávesu Enter. Obsah všech panelů má nyní nastavenou stejnou výšku. Volba 400 pixelů umožňuje zobrazení většího obsahu, aniž by se uživatel musel posunovat obsahem, ale výška není zároveň tak velká, aby si uživatel nevšiml dalších panelů. Výška, kterou jste přidělili selektoru.accordionpanelcontent, závisí na množství obsahu, který se zobrazí v tom kterém případě. 8. V části Všechna pravidla vyberte selektor AccordionPanelOpen.AccordionPanel Tab. V části Vlastnosti klepněte na pole vpravo od vlastnosti background-color a napište #345FA3. Pak stiskněte klávesu Enter. 118

119 9. Klepněte na odkaz Přidat vlastnost. Do levého sloupce pro vlastnosti napište color a do pravého pole napište #FFF jako hodnotu vlastnosti. Pak stiskněte Enter. 10. V části Všechna pravidla vyberte selektor.accordionpaneltabhover. V části Vlastnosti klepněte na ikonu palety barev a použijte kapátko k výběru barvy. Vyberte žlutou (#FF0), což bude barva záložky ve stavu překreslení (hover). Úpravou hodnoty vlastnosti color v části Vlastnosti (Properties) můžete nyní změnit více barev. 11. V části Všechna pravidla vyberte selektor.accordionpanelopen.accordionpanel TabHover. V části Vlastnosti zopakujte postup použitý v kroku 10, jímž jste změnili hodnotu vlastnosti color pro stav překreslení záložky otevřeného panelu na žlutou (#FF0). 12. V části Všechna pravidla vyberte selektor. AccordionFocused. AccordionPanel Tab. (Focus odkazuje ke stavu záložky, když je panel aktivní.) V části Vlastnosti zopakujte postup použitý v kroku 8, jímž jste změnili výchozí modrou barvu pozadí na #345FA3. 119

120 13. A nakonec v části Všechna pravidla vyberte selektor.accordionfocused.accordion PanelOpen. AccordionPanelTab. V části Vlastnosti změňte výchozí modrou barvu pozadí na #345FA3. Úspěšně jste vytvořili barevné schéma skládacího panelu, které odpovídá barvám webové stránky. Změnili jste výšku panelu s obsahem, čímž jste umožnili zobrazit více obsahu, takže uživatel se kvůli jeho přečtení nebude muset panelem posouvat. 23. lekce SAMOSTATNÁ PRÁCE VYTVOŘENÍ LAYOUTU STRÁNKY Prohlédnutí dokončeného souboru Abyste pochopili, jak funguje rozvržení (layout), které budete tvořit v první části této lekce, prohlédněte si dokončenou stránku v prohlížeči. 1. V panelu rozbalte složku lekce Poklepejte na soubor layout-dokonceno.html, čímž jej otevřete. Tato stránka reprezentuje rozvržení (layout), které budete vytvářet v této lekci. Jistým způsobem je podobné rozvržení stránek cestovní agentury, ale je dostatečně jiné, abyste získali zkušenost s tvorbou zcela nového layoutu stránky s pevnou šířkou. Rozvržení dvou sloupců se vytvoří pomocí značek <div> v plovoucím umístění - jeden doleva a jeden doprava. 3. Zvolte Soubor Zavřít. Vytvoření layoutu se stylovanými elementy div Nejlepším způsobem, jak dnešní weboví designéři tvoří rozvržení stránky, je použití CSS. Na CSS založené layouty - v porovnání s těmi tabulkovými - zmenšují datovou náročnost souborů, snadněji se udržují a dodržují standardy. Na CSS založená rozvržení se skládají ze dvou hlavních komponent: sady značek <div> vytvářejících strukturu stránky a sady pravidel CSS definujících rozměry a formátování klíčových elementů stránky, takže stránka dosáhne požadovaných funkcí a vzhledu. 120

121 Tvorba stránky a definice značky body V tomto cvičení vytvoříte na CSS založené rozvržení od prázdného dokumentu HTML. Jakmile vytvoříte soubor, deklarujte vaše první pravidlo pro značku <body>. 1. Zvolte Soubor Nový. Jakmile se zobrazí dialog Nový dokument, v levém sloupci zvolte Prázdná stránka. Ve sloupci Typ stránky vyberte HTML a ze sloupce Rozvržení vyberte <žádné>. (Všimněte si, že nejsou k dispozici žádné volby layoutu CSS v případě prázdné stránky.) Klepněte na tlačítko Vytvořit (Create). 2. Zvolte Soubor Uložit. V zobrazeném dialogu najděte složku lekce07 a do pole pro název souboru napište layout-start.html. Stiskněte tlačítko OK. 3. Zvolte Okno Styly CSS. Jakmile se zobrazí stejnojmenný panel, přepněte se do režimu Vše, pokud je třeba. 4. U spodního okraje panelu najděte ikonu Nové pravidlo CSS a klepněte na ni. Nejlepší je začít nejprve s definicí pravidla pro značku <body> 121

122 5. V zobrazeném dialogu vyberte v roletce Typ selektoru volbu Tag (předefinuje element HTML)" V poli Název selektoru vyberte body" nebo napište body. V roletce Definice pravidla vyberte volbu Pouze v tomto dokumentu". Pak stiskněte tlačítko OK. 6. V zobrazeném dialogu zvolte kategorii Pozadí. Klepněte na ikonu palety barev a pomocí kapátka vyberte bílou barvu. 7. Pak vyberte kategorii Blok a v seznamu pole Text-aíign (zarovnání textu) zvolte center". Rozpracovaný layout se zarovná na střed okna prohlížeče, zatímco text zůstane zarovnaný doleva. Aby se vše správně vykreslilo také ve starších prohlížečích, jako je Internet Explorer 5.x, musíte 122

123 vlastnosti text - a1ign přidělit hodnotu center u značky <body>. Později pak toto zarovnání na střed přepíšete zarovnáním doleva u elementu obalujícího obsah stránky. 8. Zvolte kategorii Rámeček. V části Padding (vnitřní okraj) napište do pole Top (horní) hodnotu 0. Totéž proveďte v části Margin (vnější okraj). Pak stiskněte tlačítko OK. 9. Zvolte Soubor Uložit. Barva pozadí je nastavená na bílou, oběma vlastnostem, margin i padding, jste přidělili hodnotu 0. Nastavením obou vlastností řídících vnitřní a vnější okraj elementů na nulu jste předešli problémům s výchozím formátováním elementů ze strany prohlížeče, které ve výchozím stavu nastavují různé hodnoty. Nyní jste připraveni definovat obalové elementy (kontejnery) rozvržení stránky. Definování vnějšího obalu Zatímco značky <div> se mohou použít kdekoliv na stránce, technika tvorby rozvržení stránky založené na standardech CSS počítá s tím, že značky <div> budou obsahovat nebo obalovat všechny ostatní značky a veškerý další obsah. Obalové elementy pomáhají přidělovat celkové nastavení, jako třeba celkovou šířku a zarovnání rozvržení (layoutu). V tomto cvičení definujete pravidlo pro jeden takový obal a do stránky vložíte odpovídající značku <div>. 1. Pokud je třeba, otevřete soubor layout-start.html tím, že na něj poklepáte v panelu Soubory. 2. V panelu Styly CSS pak klepněte na ikonu Nové pravidlo CSS 3. V zobrazeném dialogu vyberte v roletce Typ selektoru (Selector Type) volbu ID (Použito pouze pro jeden element HTML)". V poli Název selektoru napište #obal (nebo název, který vám bude 123

124 vyhovovat více). V roletce Definice pravidla zkontrolujte, zda máte vybranou volbu Pouze v tomto dokumentu". Pak stiskněte tlačítko OK. Z lekce 2 si jistě vzpomínáte, že znak mřížky značí identifikátor, jejž lze použít pouze na jeden element na stránce. 4. V zobrazeném dialogu zvolte kategorii Blok. V roletce Text-align (zarovnání textu) vyberte lefť (doleva). V předchozím cvičení jste nastavili hodnotu vlastnosti text -align u elementu body na center (na střed). Kvůli kompatibilitě se staršími prohlížeči jste nyní opravili zarovnání, které by se v jejich 124

125 případě použilo i na obsah uvnitř stránky. Proto má identifikátor #obal vyšší důležitost (je specifičtější) než selektor značky <body>, všechny elementy umístěné do značky <div> s tímto identifikátorem se zarovnají doleva a ne na střed. 5. Zvolte kategorii Rámeček. V poli Width napište 760 a stiskněte klávesu Tab. V části Margin (vnější okraj) zrušte zatržení volby Stejné pro všechny". V poli Top (horní) napište 0 a stiskněte klávesu Tab. V roletce pole Right (pravý) vyberte hodnotu auto". V poli Bottom (spodní) napište 0 a pak stiskněte klávesu Tab. Z roletky pole Left (levý) vyberte volbu auto". Pak stiskněte tlačítko OK. Tento návrh layoutu má nastavenou pevnou šířku na 760 pixelů, takže funguje zcela bez problémů i při rozlišení obrazovky 800 x 600 pixelů. A proč tedy nepoužít pro šířku právě 800 pixelů? Těch 40 pixelů navíc se totiž použije k zobrazení okrajů okna prohlížeče včetně posuvníků. Tato oblast prohlížeče společně s částí nad a pod zobrazovací oblastí se v angličtině nazývá chrome. Levé a pravé vnější okraje jsou nastaveny hodnotou auto, aby se obalový element di v obsahující celý obsah stránky zarovnal na střed okna prohlížeče. V tomto cvičení se v případě, že je okno prohlížeče širší než 760 pixelů, zbylá šířka automaticky přerozdělí rovným dílem mezi levý a pravý vnitřní okraj. Právě tím se layout zarovná na střed okna prohlížeče.nyní jste připraveni k přidělení stylu značce <di v> s identifikátorem #obal. Jaksi vzpomenete z předchozí práce na stránce onas.html, kde jste pracovali na značce <di v> s třídou. proti 1, Dreamweaver nabízí přímý přístup k přidání značky < d i v > a k přidělení identifikátoru nebo třídy. 6. V kategorii Rozvržení panelu Vložit klepněte na Vložit tag Div.V zobrazeném dialogu zvolte v roletce Vložit volbu V místě textového kurzoru". Z roletky pole Identifikáto vyberte obal". Pak stiskněte tlačítko OK. 125

126 Dreamweaver do stránky přidá novou značku <di v> s výplní pro obsah, která obsahuje text Sem patří obsah pro id obal". Pokud nevidíte obrys ve formě přerušované čáry okolo nové značky <div> v panelu nástrojů Dokument, klepněte na ikonu Vizuální pomůcky, která má podobu okna, a zvolte Obrysy rozvržení CSS". 7. Stiskněte klávesu F4, čímž zavřete všechny panely a zobrazíte pouze okno dokumentu. Všimněte si, že orámovaná značka <di v> s identifikátorem #obal se zarovnává na střed okna dokumentu. Opět stiskněte klávesu F4, abyste znovu zobrazili všechny panely, a pak zvolte Soubor Uložit. Účelem obalové značky <div> je omezení šířky rozvržení (layoutu). Nyní, když je vnější obal na svém místě, přidáte hlavní části layoutu stránky. 126

127 24. lekce SAMOSTATNÁ PRÁCE VYTVOŘENÍ LAYOUTU STRÁNKY,2.ČÁST Nastavení primárních částí stránky Aktuální návrh rozdělíte na tři hlavní části: záhlaví, obsah a zápatí. Každá z těchto oblastí vyžaduje zvláštní pravidlo CSS a značku <di v>. 1. Otevřete soubor layout-start.html.začnete definováním prvního pravidla CSS pro selektor #zahlavi. 2. V panelu Styly CSS klepněte na ikonu Nové pravidlo CSS. V zobrazeném dialogu napište do pole Název selektoru #zahlavi. Zkontrolujte, že máte v roletce Typ selektoru vybranou volbu ID (použito pouze pro jeden element HTML)" a v roletce Definice pravidla volbu Pouze tento dokument". Pak stiskněte tlačítko OK. 127

128 3. V zobrazeném dialogu zvolte kategorii Rámeček.V části Margin (vnější okraj) zrušte zatržení volby Stejné pro všechny". V poli Top (horní) napište 12 a stiskněte klávesu Tab. V poli Bottom (spodní) napište 12 a pak stiskněte klávesu. Nakonec stiskněte tlačítko OK. Pravidlo se selektorem #zah1avi vytvoří trochu prostoru nad a pod značkou <div>. Není nutné deklarovat šířku, neboť ve výchozím nastavení se blokový element, jako je <di v>, roztáhne tak, aby vyplnil celý nadřazený element (kontejner) - což bude v tomto případě značka <div> s identifikátorem #obal. Pokračujte definováním dalších dvou požadovaných pravidel CSS. 4. V panelu Styly CSS klepněte na ikonu Nové pravidlo CSS.V zobrazeném dialogu napište do pole Název selektoru #obsah. Zkontrolujte, že máte v roletce Typ selektoru vybranou volbu ID (použito pouze pro jeden element HTML)" a v roletce Definice pravidla volbu Pouze tento dokument" (This document only). Pak stiskněte tlačítko OK. 128

129 5. V zobrazeném dialogu zvolte kategorii Rámeček. V části Padding (vnitřní okraj) zrušte zatržení volby Stejné pro všechny". V poli Top (horní) napište 0. V části Margin (vnější okraj) zrušte zatržení volby Stejné pro všechny". V poli Top (horní) napište 0. Pak stiskněte tlačítko OK. Tato nastavení způsobí, že se obsah zobrazí hned pod záhlavím bez jakéhokoli okraje. Poslední pravidlo CSS, které deklarujete pro selektor #zapati, bude úplně stejné jako v případě pravidla pro selektor #zahlavi. Takže tvorbu zkrátíme. 6. V panelu Styly CSS klepněte pravým tlačítkem na selektor #zahlavi a v místní nabídce zvolte Duplikovat. 7. V zobrazeném dialogu napište do pole Název selektoru (Selector Name) #zapati. Pak stiskněte tlačítko OK. 129

130 Pokud existující pravidlo CSS pouze duplikujete, nezobrazí se dialog Definice pravidla CSS. Pokud budete potřebovat provést jakékoli změny, můžete použít část Vlastnosti v panelu Styly CSS. 8. V části Všechna pravidla panelu Styly CSS klepnutím vyberte selektor #zápatí. Pak klepněte na příkaz Přidat vlastnost.v prvním sloupci napište clear a stiskněte klávesu Tab. Ve druhém sloupci vyberte z roletky hodnotu both". 130

131 Deklarace clear: both zajišťuje, že se blok #zápatí zarovná až pod elementy v plovoucím umístění. Jak uvidíte později v této lekci, blok #obsah bude obsahovat dva elementy div v plovoucím umístění. Nyní, když jste definovali pravidla pro hlavní části layoutu, je můžete přidat do stránky. Začněte s částí #zahlavi. 9. Vyberte výplňový text Sem patří obsah id obal" a stiskněte klávesu Delete, čímž text odstraníte. Klikněme někam mimo. 10. V panelu Vložit klepněte na Vložit tag Div. V zobrazeném dialogu vyberte z roletky Vložit volbu Za začátek tagu" a z roletky vpravo vyberte značku <div id="obal ">. Z roletky Identifikátor (ID) vyberte zahlavi". Pak stiskněte klávesu OK. 131

132 Vložením značky < div > s identifikátorem #zahlavi za začátek značky <div> s identifikátorem #obal vnořujete značku <div> dovnitř nadřazeného elementu a váš kód by měl vypadat následovně: <div id="obal"> <div id="obsah">sem patří obsah pro id "obsah"</div> </div> Nyní přidejte další dvě značky <div>, každou do značky <div> s identifikátorem #obal. 11. V panelu Vložit klepněte na Vložit tag Div. V zobrazeném dialogu vyberte z roletky Vložit volbu Za tag" a z roletky vpravo vyberte značku <div id=" zahlavi" >. Z roletky Identifikátor vyberte obsah". Pak stiskněte klávesu OK. Všimněte si, že pokaždé, když vyberete položku z roletky Identifikátor (ID), nabídnou se pouze dosud nepřidělené identifikátory. Tím vás Dreamweaver ochrání před použitím jednoho identifikátoru vícekrát. 132

133 12. V panelu Vložit klepněte na Vložit tag Div. V zobrazeném dialogu vyberte z roletky Vložit volbu Za tag" a z roletky vpravo vyberte značku <divid="obsah">. Z roletky Identifikátor (ID) vyberte zapati". Pak stiskněte klávesu OK.Výplňový text vám ulehčuje orientaci, kde se nachází vložené části stránky. 13. V nástrojovém panelu Dokument napište do pole Titul Layout a stiskněte klávesu Enter. 14. Zvolte Soubor Uložit. V dalším cvičení rozšíříte základní rozvržení (layout) o další obsah. 25. lekce SAMOSTATNÁ PRÁCE VYTVOŘENÍ LAYOUTU Vkládání oblastí s obsahem I když můžete samozřejmě využít základní layout, který jste zatím vytvořili v této lekci, výsledná stránka by byla tak trochu neslaná nemastná. Sofistikovanější návrhy obsahují navíc oblasti obsahem sousedící se značkami <di v>, které tvoří části layoutu nebo jsou do nich vnořené. V tomto cvičení budete pracovat s oběma scénáři. 1. Otevřete soubor layout-start.html. Nejdříve budete definovat pravidlo CSS pro značku <div>, v níž se bude nacházet logo. 2. V panelu Styly CSS klepněte na ikonu Nové pravidlo CSS. V zobrazeném dialogu napište do pole Název selektoru #logo. Zkontrolujte, že máte v roletce Typ selektoru vybranou volbu ID (použito pouze pro jeden element HTML)" a v roletce Definice pravidla volbu Pouze tento dokument".pak stiskněte tlačítko OK. V tomto návrhu bude plánované logo zobrazené jako obrázek na pozadí se šířkou 760 pixelů a výškou 71 pixelů. Aby byla celá grafika vidět, je třeba výšku specifikovat. K oddělení loga od jiných elementů se bude taktéž hodit malý vnitřní okraj. 133

134 3. V zobrazeném dialogu zvolte kategorii Rámeček.Do pole Height napište 71.V části Padding (vnitřní okraj) zrušte zatržení volby Stejné pro všechny".v poli Bottom (spodní) napište 12. Pak stiskněte tlačítko OK. Nyní jste vytvořili selektor identifikátoru #logo pro značku <div>, kterou umístíte do značky <div> s identifikátorem #zahlavi. 4. V panelu Vložit klepněte na Vložit tag Div.V zobrazeném dialogu vyberte z roletky Vložit volbu Za začátek tagu" a z roletky vpravo vyberte značku <divid="zahlavi">. Z roletky Identifikátor vyberte logo". Pak stiskněte klávesu OK. Protože jste do elementu <div> s identifikátorem #zahlavi začali vkládat obsah, výplňový text nadále není potřeba, a proto se odstraní. 5. Vyberte výplňový text Sem patří obsah pro id záhlaví" a stiskněte klávesu Delete. 134

135 Nyní přidejte do značky <div> s identifikátorem #zahlavi ještě jeden stylovaný element -oblast, v níž bude navigace. A protože pravidlo CSS se selektorem #1ogo je celkem jednoduché, můžete ho pro zkrácení postupu duplikovat. 6. V panelu Styly CSS klepněte pravým tlačítkem na selektor #logo a v místní nabídce zvolte Duplikovat. Jakmile se zobrazí dialog, napište do pole Název selektoru #nav. Pak stiskněte tlačítko OK. Dále značce <div> s identifikátorem #nav přidělíte jinou výšku a zrušíte nepotřebnou vlastnost padding-bottom (spodní vnitřní okraj). 7. V části Všechna pravidla panelu Styly CSS vyberte selektor #nav. V části Vlastnosti změňte hodnotu vlastnosti height ze 71 na 28 a poté vyberte vlastnost padding-bottom a stiskněte ikonu koše v pravém spodním rohu panelu Styly CSS. Značka <div> s identifikátorem #nav se vnoří do značky <div> s identifikátorem #zahlavi, ale také - což je důležitější - přímo za značku <div> s identifikátorem #logo. 8. V panelu Vložit klepněte na Vložit tag Div. V zobrazeném dialogu vyberte z roletky Vložit volbu Za tag" a z roletky vpravo vyberte značku <divid=" logo">. Z roletky Identifikátor vyberte nav". Pak stiskněte klávesu OK. Ne všechny oblasti s obsahem jsou vnořené do hlavní značky <div> tohoto rozvržení. Dále vytvoříte styl pro banner, jehož místo bude mezi záhlavím a obsahem. Nejrychlejším způsobem je duplikování existujícího stylu a jeho úprava. 9. V panelu Styly CSS klepněte pravým tlačítkem na selektor #nav a v místní nabídce zvolte Duplikovat. Jakmile se zobrazí dialog, napište do pole Název selektoru #ban-ner. Pak stiskněte tlačítko OK. 135

136 10. V části Všechna pravidla panelu Styly CSS vyberte selektor #banner.v části Vlastnosti změňte hodnotu vlastnosti height z 28 na V panelu Vložit klepněte na Vložit tag Div.V zobrazeném dialogu vyberte z roletky Vložit volbu Za tag" a z roletky vpravo vyberte <divid="zahlavi ">. Z roletky Identifikátor vyberte banner". Pak stiskněte klávesu OK. 136

137 Stránka se skutečně začíná formovat před našima očima! Dalším krokem v evoluci designu je oddělení oblasti s obsahem do dvou sloupců. Splnění tohoto úkolu vyžaduje, abyste nejdříve definovali styl pro každý sloupec. 12. V panelu Styly CSS klepněte na ikonu Nové pravidlo CSS. V zobrazeném dialogu napište do pole Název selektoru #sloupec-levy. Zkontrolujte, že máte v roletce Typ selektoru vybranou volbu ID (použito pouze pro jeden element HTML)" a v roletce Definice pravidla volbu Pouze tento dokument". Pak stiskněte tlačítko OK. 13. V zobrazeném dialogu zvolte kategorii Rámeček.Do pole Width (šířka) napište 365 a stiskněte klávesu Tab. Z roletky Float (plovoucí umístění) vyberte volbu left" (doleva). Pak stiskněte tlačítko OK. 137

138 Jednou z klíčových technik tvorby sloupců pomocí CSS je použití vlastnosti float. Jak si možná vzpomínáte, plovoucí element se posune do určené strany obsahového elementu a umožňuje tak okolnímu obsahu jej obtékat. Je to způsob, jakým zarovnat doprava nebo doleva obrázky a také sloupce. V tomto návrhu jsou oba sloupce podobné, takže duplikování jednoho pravidla v druhé bude nejrychlejší. 14. V panelu Styly CSS klepněte pravým tlačítkem na selektor #sloupec-levy a v místní nabídce zvolte Duplikovat.Jakmile se zobrazí dialog, napište do pole Název selektoru #sloupec-pravy. Pak stiskněte tlačítko OK. 15. V části Všechna pravidla panelu Styly CSS vyberte selektor #sloupec-pravy. V části Vlastnosti změňte hodnotu vlastnosti f1oat na right. 138

139 Už jste téměř hotoví! Posledními kroky v této časti cvičení je přidání stylované značky <d i v> do stránky. 16. V panelu Vložit klepněte na Vložit tag Div. V zobrazeném dialogu vyberte z roletky Vložit volbu Za začátek tagu" a z roletky vpravo vyberte značku <divid="obsah">. Z roletky Identifikátor vyberte sloupec-levy". Pak stiskněte klávesu OK. Podobně jako značka <div> s identifikátorem #logo je i značka <div> s identifikátorem #sloupecpravý vnořená do jí nadřazené značky <div> s identifikátorem #obsah. Následuje ji značka <div> s identifikátorem #sl oupec-levy. 17. V panelu Vložit klepněte na Vložit tag Div.V zobrazeném dialogu vyberte z roletky Vložit volbu Za tag" a z roletky vpravo vyberte <divid="sloupec-1evy">.z roletky Identifikátor vyberte sloupec-pravy". Pak stiskněte klávesu OK. Jediné, co nyní zbývá, je trochu poklidit. 18. Vyberte výplňový text Sem patří obsah pro id obsah" a stiskněte klávesu Delete. 139

140 19. Zvolte Soubor (File) -> Uložit (Save). 26. lekce SAMOSTATNÁ PRÁCE VYTVOŘENÍ LAYOUTU STRÁNKY, 4.ČÁST Vkládání výplní V tomto cvičení váš návrh layoutu (rozvržení) zhmotníte pomocí dvou druhů výplní: výplně pro obrázek a výplňového textu. 1. Otevřete soubor layout-start.html. 2. Vyberte výplňový text Sem patří obsah pro id logo" a stiskněte klávesu Delete. V panelu Vložit vyberte kategorii Běžné. V ní klepněte na ikonu Obrazy. Z nabídky zvolte Vyhrazené místo pro obraz. 3. V zobrazeném dialogu napište do pole Název Logo, do pole Šířka napište 760 a do pole Výška napište 71. V ostatních polích nechte vyplněné výchozí hodnoty. Pak stiskněte tlačítko OK. 140

141 Stejný postup použijte pro vytvoření výplní pro značky <div> s identifikátory #nav a #banner. 4. Zopakujte kroky 2 a 3 k výměně výplňového textu ve značce < div > s identifikátorem #nav za výplň pro obrázek s názvem Navigace, která bude mít šířku 760 pixelů a výšku 28 pixelů. 5. Zopakujte kroky 2 a 3 ještě jednou a vyměňte výplňový text ve značce <div > s identifikátorem #banner za výplň pro obrázek s názvem Banner, která bude mít šířku 760 pixelů a výšku 200 pixelů. Nyní, když máte vložené grafické výplně, přidejte základní výplňový text, začínající nadpisem, který se roztáhne přes oba sloupce. 6. Ukazatel myši umístěte do výplňového textu Sem patří obsah pro id sloupec-levy" a v selektoru značek vyberte <div#sloupec-levy>. V okně dokumentu stiskněte klávesu s levou šipkou, čímž se 141

142 posunete na místo hned před značku <div#sloupec-levy>. Napište Hlavní nadpis. Text se objeví ve značce <div> s identifikátorem #obsah, ale první značkou <div> postranního panelu. Zvolte Okno Vlastnosti, čímž tento panel zobrazíte. V roletce Formát vyberte Nadpis1. 7. Vyberte výplňový text Sem patří obsah pro id sloupec-levy" a napište Podnadpis. V roletce Formát vyberte Nadpis 2". Ukazatel myši umístěte hned za vložený text a stiskněte Enter, čímž vytvoříte pod nadpisem prázdný řádek. Abychom vás ušetřili psaní odstavců výplňového textu, vytvořili jsme pro vás příslušný soubor s takovým textem, takže jej stačí pouze zkopírovat a vložit do vaší stránky. 8. V panelu Soubory rozbalte složku lekce07 a poklepejte na soubor výplňový_text. html. Zvolte Upravit Kopírovat nebo stiskněte klávesovou zkratku Ctrl + C, pak zvolte Soubor Zavřít. Vraťte se do souboru layout-start.html a vložte sem zkopírovaný text pomocí klávesové zkratky Ctrl +V (Windows). Úplně stejný obsah můžete vložit do pravého sloupce, a to zkráceným postupem. 9. Umístěte ukazatel myši do levého sloupce a zvolte Upravit Vybrat vše. Všimněte si, že se vybral text pouze v levém sloupci. Stiskněte klávesovou zkratku Ctrl + C, čím text zkopírujete. Vyberte 142

143 výplňový text Sem patří obsah pro id sloupec-pravy" a stiskněte klávesovou zkratku Ctrl + V, čímž zkopírovaný text vložíte na určené místo. V Dreamweaveru příkaz vybrat vše okamžitě vybere veškerý obsah v daném elementu, například text v buňce tabulky nebo obsah ve značce <div>. Tento příkaz vám umožňuje rychle zkopírovat nebo přesunout obsah z jednoho místa na druhé. Použijte příkaz Vybrat vše znovu, abyste vybrali obsah celého nadřazeného elementu, a potřetí, abyste vybrali obsah celé stránky. 10. Zvolte Soubor Uložit. Nyní je váš návrh layoutu strukturovaný a přehledný. 143

144 Práce v zobrazení Kód V Dreamweaveru můžete bez problémů pracovat v zobrazení Kód stejně jako v zobrazení Návrh. Často je jednodušší něco udělat v zobrazení Kód nebo Kód a návrh než v zobrazení Návrh. V lekci 1 jste použili zobrazení Kód a návrh, abyste viděli dvě verze vaší stránky na obrazovce, která byla rozdělena vodorovně i svisle. V tomto cvičení se naučíte více o kódu použití navigace v kódu. 1. Otevřete soubor layout-dokonceno.html v Dreamweaveru. Jeho součástí je externí šablona stylů potřebná pro toto cvičení. 2. Klepněte na tlačítko Kód, abyste si prohlédli kód. 3. Zvolte Zobrazení Volby zobrazení kódu a postupně zatrhněte volby Zalamování řádků Čísla řádků a Barevné zvýraznění syntaxe, pokud již nejsou zatržené. 4. K výběru části kódu klepněte kamkoliv na značku < div id= sloupec-levy > 5. V selektoru značek klepněte na <div#sloupec-levy>. Celý <div> je vybraný a můžete jej zkopírovat, přesunout nebo sbalit. Označovač vedle čísel řádků označuje, že jste vybrali řádky a můžete s celou částí manipulovat. Části kódu jsou často sbalené. A to ve chvíli, kdy se vývojáři dívají na určitý element nebo část stránky a chtějí dočasně skrýt nepotřebné části kódu. Použijte příslušné ikony pro sbalení nebo rozbalení kódu, které najdete na nástrojovém panelu nalevo. 6. Klepněte na ikonu Sbalit výběr ke sbalení vybrané značky <div>. Řádky se sbalí. Klepněte na ikonu Rozbalit vše (Expand All) k obnovení zobrazení řádků. V zobrazení Kód lze kód vkládat nebo upravovat. 7. Najděte některou ze značek </div> 144

145 8. Značku vymažte. 9. Napište </. Všimněte si, že Dreamweaver implementuje funkci dokončení kódu, jež za vás dokončuje uzavírací značku, v tomto případě </div>. 10. Zvolte Upravit Zpět, pokud potřebujete vrátit provedené změny, abyste se vrátili k původnímu stavu. 11. Klepněte kamkoliv do značky <div id="zahlavi ">. V panelu nástrojů vlevo od okna dokumentu klepněte na ikonu Zobrazit navigaci v kódu Vidět můžete informaci o připojených stylech CSS určených pro tuto značku rovnou v aktuálním zobrazení. Všimněte si světle šedého podtržení položek, které jsou odkazy na další informace. 12. Abyste navigaci v kódu zrušili, klepněte kamkoliv mimo zobrazený blok. 13. Opět klepněte na ikonu Zobrazit navigaci v kódu. Ukazatel myši umístěte nad podtrženou položku a zobrazí se nápovědná bublina s více informacemi. 14. Klepněte na odkaz a přeskočíte přímo na daný propojený soubor - v tomto případě na hlavnidokonceno.css. 15. Klepněte na tlačítko Zdrojový kód v horní části okna dokumentu, čímž se vrátíte k původnímu kódu. Použili jste množství technik, abyste s kódem mohli pracovat jednodušeji a efektivněji. Sbalili jste kód, změnili jste použité značky HTML a zkusili jste si navigaci v kódu. 27. lekce SAMOSTATNÁ PRÁCE VYTVOŘENÍ LAYOUTU STRÁNKY, 5.ČÁST Exportování stylů CSS Rozvržení stránky, na němž jste pracovali v souboru layout-start.html, je nyní kompletní. Nicméně, ještě než se pustíte do tvorby obsahu, je dobré přesunout styly CSS z hlavičky dokumentu za značkou <head> do externí šablony CSS. Interní šablona stylů bude totiž platit pouze na jedinou stránku. Externí šablonu 145

146 lze naproti tomu propojit s více stránkami. Dreamweaver nabízí příkaz, jímž tento úkol zvládnete rychle a jednoduše. 1. Otevřete soubor layout-start.html. 2. V panelu Styly CSS vyberte prvně definovaný styl pro selektor body. Podržte klávesu Shift a vyberte poslední styl pro selektor #sloupec - pravy. 3. V panelu Styly CSS klepněte na ikonu v pravém horním rohu a v nabídce klepněte na příkaz Přemístit pravidla CSS. Na vybranou oblast pravidel můžete k dosažení stejného efektu taktéž klepnout pravým tlačítkem. 4. V dialogu Přesunout do externího seznamu stylů vyberte volbu Nový seznam styl". Pak stiskněte tlačítko OK. 5. V zobrazeném dialogu najděte složku lekce07 a do pole pro název napište hlavni.css. 6. Stiskněte tlačítko Uložit. Dreamweaver přesune vybrané styly z oblasti za značkou <head> do nově vytvořené externí šablony stylů a zároveň do aktuálního dokumentu vloží propojení s touto šablonou. Posledním krokem je odstranění nyní nepotřebné značky <style>. 7. V panelu Styly CSS klepněte na značku <style> a stiskněte klávesu Delete nebo klepněte na ikonu koše. 146

147 8. Zvolte Soubor Uložit. V dalším cvičení použijete pravítko a vodicí linky Dreamweaveru k provedení úprav vašeho layoutu. Použití pravítka a vodicích linek Návrhy bývají málokdy neměnné. Změna může přijít odkudkoli - od klienta, uměleckého ředitele nebo může vzejít z vašeho kreativního impulzu. Dreamweaver poskytuje množství nástrojů rozvržení stránky, jež vám mají pomoci přizpůsobit design rychle a jednoduše. V tomto cvičení použijete pravítko a vodicí linky k vizuálnímu srovnání sloupců obsahu s grafickými částmi. 1. Otevřete soubor layout-start.html. 2. Stiskněte klávesu F4 k zavření jakýchkoli otevřených panelů a maximálnímu rozšíření vašeho pracovního prostoru. 3. Poklepejte na výplň pro banner. V zobrazeném dialogu Vyberte zdroj obrazu najděte složky Lekce obrázky a vyberte soubor lavicka.jpg. Stiskněte tlačítko OK. Obrázek obsahuje širokou lavičku a pohled poutající žlutý barel. Prostor mezi těmito dvěma objekty lze použít jako linku", kolem níž se zarovná text do sloupců. 147

148 Stejně jako to je u mnoha grafických programů, například Photoshopu nebo Fireworks, abyste mohli zobrazit vodicí linky, je třeba zobrazit pravítko. 4. Zvolte Zobrazení Pravítka Zobrazit a poté zvolte Zobrazení Pravítka Obnovit počátek. Počátek pravítka můžete změnit potažením myší za jeho levý horní roh do nového umístění na stránce. Na roh můžete taktéž poklepat myší, čímž počátek pravítka obnovíte do pozice levého horního rohu okna dokumentu. Vodicí linky vytvoříte jejich vytažením z vodorovného nebo svislého pravítka podle potřeby. 5. Klepněte na svislé pravítko na levém okraji okna dokument a táhněte myší se stisknutým tlačítkem. Zobrazí se zelená vodicí linka. Potáhněte ji tak daleko, abyste ji zarovnali s pravým okrajem lavičky. 148

149 V zobrazené nápovědné bublině vidíte vzdálenost od počátku svislého pravítka (osy Y) v pixelech. Pozici vodicí linky můžete vyladit umístěním ukazatele myši na linku, a jakmile se zobrazí ukazatel ve formě dvou šipek, potáhněte linkou do nového umístění. Poznámka: Toto cvičení používá pouze svislé vodicí linky; vodorovné vodicí linky na stránku vytáhnete vodorovného pravítka u horního okraje okna dokumentu. 6. Tažením se stisknutou klávesou Ctrl ze svislého pravítka vytvořte další vodicí lištu. Sledujte nápovědnou bublinu, v níž se ukazují hodnoty v pixelech. Vodicí linku potáhněte do místa, v němž budou obě linky od sebe vzdálené 30 pixelů. Těchto 30 pixelů se použije k vytvoření prázdného prostoru mezi oběma sloupci textu. Zobrazené rozměry odpovídají vzdálenosti mezi oběma vodícími linkami a taktéž vzdálenosti od okraje okna dokumentu. Abyste dosáhli přesného měření, budete muset k pravému a levému okraji layoutu přidat další vodicí linky. Poznámka: Vodicí linku odstraníte tak, že ji potáhnete ze stránky v jakémkoliv směru. 7. Potáhněte další svislou vodicí linku k pravému okraji layoutu. Všimněte si, že se vodicí linka přichytí k danému místu. K levému okraji layoutu vytáhněte další linku. Jakmile máte všechny vodicí linky na svém místě, jste připraveni zjistit potřebné rozměry. 8. Ukazatel myši umístěte mezi linku zcela vlevo a vedlejší linku a stiskněte tlačítko Ctrl. Všimněte si zobrazeného rozměru, jenž by měl odpovídat hodnotě 489 pixelů. 9. Ukazatel myši posuňte mezi linku zcela vpravo a vedlejší linku vlevo (u pravého okraje lavičky). Zobrazený rozměr by měl odpovídat hodnotě 241 pixelů. 149

150 Nyní vylaďte odpovídající vlastnosti CSS. 10. Zvolte Okno Styly CSS. Pokud bude třeba, rozbalte šablonu hlavni.css, takže uvidíte jednotlivé styly. V režimu Vše vyberte selektor #sloupec-pravy a v části Vlastnosti poklepejte na aktuální hodnotu v pravém sloupci a místo 365 napište 241. Pak stiskněte klávesu Enter. 11. Vyberte selektor #sloupec-levy a v části Vlastnosti poklepejte na aktuální hodnotu v pravém sloupci a místo 365 napište 489. Pak stiskněte klávesu Enter. Vyladěním šířky obou sloupců společně s jejich zarovnáním na stranu jste získali prázdnou mezeru o velikosti 30 pixelů mezi oběma sloupci. 12. Zvolte Zobrazení Vodítka Odstranit vodítka a poté zvolte Soubor Uložit. Stiskněte klávesu F4 k přechodu do celoobrazovkového režimu. 150

151 Vytvořili jste layout od úplných základů, na stránku jste přidali množství elementů <d i v> tvořících části layoutu a pomocí výplní pro obrázky a grafiku jste naznačili, jak bude návrh vypadat. Použili jste vodicí linky k umístění sloupců, v nichž jsou srovnány s položkami na grafickém banneru. Layout je připravený k použití pro další stránky a nový obsah. Ještě než ho použijete, je vhodné zkontrolovat, zda po vaší práci nezůstaly nějaké chyby. To provedete v následujícím cvičení. Kontrola layoutu Váš layout zatím nebyl testován na kompatibilitu s prohlížeči ani neprošel testem validity. Než tento layout použijete k tvorbě stránek nového webu, je dobré zkontrolovat validitu provedené práce. 1. Otevřete v Dreamweaveru soubor layout-start.html. 2. Zvolte Soubor Zkontrolovat stránku Kompatibilita s prohlížečem V tuto chvíli by se neměl zobrazit seznam žádných chyb. 3. K uzavření karty použijte ikonu v pravém horním rohu panelu. V nabídce klepněte na příkaz Zavřít skupinu karet. 4. Zvolte Soubor Ověřit Značky. Jakmile se otevře příslušná karta, uvidíte dvě chyby hlásící problém s uvozovkami ve výplňovém textu značek <d i v>, v nichž máte frázi Sem patří obsah id zapati". Jelikož tento text bude odstraněn v průběhu vývoje stránky, můžete tyto chyby ignorovat. 151

152 5. Kartu s výsledkem kontroly zavřete. Layout je kompatibilní s prohlížeči a neobsahuje žádné chyby ve zdrojovém kódu. Poznámka: Dokud nemáte na stránce žádný skutečný obsah, kontrola přístupnosti není nutná. Začali jste z ničeho a vytvořili jste layout pomocí značek <d i v> a prezentačních pravidel CSS, který nyní můžete použít k tvorbě webu. Duplikovali jste a změnili pravidla CSS, zarovnali layout pomocí pravítek, naučili jste se něco málo o nástrojích kódu a zkontrolovali jste kompatibilitu stránky s prohlížeči a její validitu. Layout můžete změnit pro jiné účely stejným způsobem, jako jste se naučili měnit stránky pomocí nástrojů Dreamweaveru pro rozvržení pomocí CSS při tvorbě webu cestovní agentury. 28. lekce SAMOSTATNÁ PRÁCE TVORBA FORMULÁŘŮ Prohlédnutí dokončeného souboru Abyste si udělali představu o projektu, na němž budete pracovat v této lekci, prohlédněte si dokončenou stránku v prohlížeči. 1. V panelu Soubory rozbalte složku lekce Vyberte soubor kontakt-dokonceno.html a stiskněte klávesu F12, abyste si jej prohlédli ve vašem primárním prohlížeči. 152

153 * Poznámka: Pokud je primárním prohlížečem Internet Explorer a u horního okraje zobrazovací oblasti se zobrazí pruh upozorňující, že bylo zabráněno spuštění skriptu, klepněte na tento pruh a z nabídky zvolte Povolit zablokovaný obsah. Stránka obsahuje řadu formulářových prvků. Vyzkoušejte, jak fungují. 3. Klepněte na pole Jméno" a napište vaše jméno. Pak stiskněte klávesu Tab. Jméno se zobrazí v datovém poli. 4. Klepněte do pole " a stiskněte klávesu Tab, aniž byste cokoliv napsali. 153

154 Formulářový ovládací prvek Spry poskytuje validaci tohoto pole a zobrazí chybovou zprávu v případě, že bude pole prázdné. 5. V poli " napište honza@mojespolecnost a schválně zapomeňte napsat část cz. Pak stiskněte klávesu Tab. Formulářový ovládací prvek Spry zobrazí chybovou zprávu, aby upozornil na to, že informace nebyla zadána správně. 6. Klepněte do pole " a dopište část cz za první část ové adresy. Stiskněte klávesu Tab. Nyní, když jste adresu zapsali správně, se žádná chybová zpráva nezobrazuje. 7. Klepněte do pole Uživ. jméno" a napište přezdívku s méně než šesti znaky. Stiskněte klávesu Tab. A zobrazí se další chybová zpráva, která upozorňuje na to, že jste nenapsali minimální počet znaků, které toto pole vyžaduje. 8. Klepněte do pole Uživ. jméno" a napište vaše uživatelské jméno nebo přezdívku, která se bude skládat z minimálně šesti znaků. Stiskněte klávesu Tab. 9. V poli Heslo" napište heslo o osmi znacích, pouze písmenech. Stiskněte klávesu Tab. Opět se zobrazí chybová zpráva. 154

155 10. Klepněte do pole Heslo" a napište heslo alespoň o osmi znacích, z nichž musí dvě být číslice. Pak stiskněte klávesu Tab. 11. V poli Zopakujte heslo" napište jiné heslo, než jste zapsali v předchozím kroku. Stiskněte klávesu Tab. 12. Ověřovací ovládací prvek Spry detekuje, zda jsou obě zadaná hesla shodná. Stiskněte klávesu Tab. 13. Klepněte do textové oblasti Plán cesty" a napište něco málo o cestě. Pak stiskněte klávesu Tab. 14. Použijte přepínače k výběru počtu cestujících. 15. V seznamu Služby" vyberte, jaké služby požadujete. 16. V seznamu Doba" zvolte, na kdy cestu plánujete. 17. Klepněte na tlačítko Potvrdit. Odezvou je zobrazení děkující stránky. Poznámka: V tomto případě se žádná data neukládají. 155

156 18. Jakmile skončíte, zavřete okno prohlížeče a vraťte se do Dreamweaveru. Ještě než začnete vytvářet vaše vlastní formulářové prvky, zastavme se na chvíli, ujistěme se, že rozumíte tomu, jak formuláře fungují. Jak fungují formuláře Formuláře, v papírové nebo webové podobě, sbírají informace. V obou případech se každá informace vkládá do své datové oblasti, aby jí bylo lépe rozumět. Formuláře jsou dobře strukturované: tištěné formuláře často používají k odlišení oddělené stránky nebo rámečky, zatímco webové formuláře používají značku <FORM>. Výhodou formuláře online je nakonec také to, že nechají uživatele pracovat s předvyplněnými poli, čímž redukují nutnou práci a možnost chyb, která je běžná u papírových formulářů. Webové formuláře zahrnují množství formulářových prvků, přičemž každý z nich má svůj účel: Textová pole - umožňují vkládat text a čísla, až na určitá čísla a znaky. Textová pole navržená jako pole pro zadávání hesel maskují vkládané znaky ve chvíli. Textové oblasti - jsou stejné jako textová pole, ale slouží k zadávání většího množství textu, třeba vět nebo celých odstavců. Přepínače - umožňují výběr jedné z více položek. Výběr nové položky ve skupině zruší výběr jiné položky Zaškrtávací pole - umožňují výběr typu ano-ne. Zaškrtávací pole můžete seskupit dohromady; nicméně, na rozdíl od přepínačů umožňují výběr více položek ve skupině. Seznamy - zobrazují pole ve formě roletek (rozevíracích seznamů). Seznamy (taktéž nazývané jako nabídky nebo výběrové seznamy) mohou umožňovat výběr pouze jedné položky, nebo výběr více položek. Skrytá pole - slouží k uchování dat k dalšímu zpracování formuláře ve formě, kterou uživatel nevidí. Skryté formulářové prvky se využívají zvláště v dynamických aplikacích. Tlačítka - potvrzují data ve formuláři nebo je odesílají ke zpracování či slouží k jakékoli další interakci, jako je třeba obnovení výchozích dat formuláře. Webové formuláře se pošlou elektronickou formou nebo zpracují. Značka <f ORM> zahrnuje parametr ACTION, jehož hodnota se provede po stisknutí potvrzovacího tlačítka. Hodnotou je často webová adresa jiné stránky nebo skript na straně serveru, který formulář zpracuje. 156

157 Přidání formuláře do stránky Postupujte následovně: 1. V panelu Soubory rozbalte složku lekce08 a poklepejte na soubor kontakt-start.html. 2. Zvolte Soubor Uložit jako. Do pole pro název napište kontakt.html. A stiskněte tlačítko Uložit. Pokud se budete chtít později vrátit k původnímu souboru kontakl-start.html budete ho mít stále na svém pevném disku v nezměněné podobě. Značka <f orm> musí obklopovat všechny prvky formuláře, takže je nejlepší ji na stránku přidat jako první. Pokud budete chtít formulář vložit bez značky < f orm>, Dreamweaver značku vloží sám. 3. V elementu div s identifikátorem maincontent, klepněte za znak otazníku v nadpisu, čímž zvolíte místo, kam chcete vložit znaku <form>. 4. V panelu Vložit vyberte kategorii Formulář. Zde klepněte na Formulář. Dreamweaver vloží značku <form> do vámi zvoleného místa a označí jej pomocí červené přerušované čáry. Poznámka: Pokud se obrys kolem formuláře nezobrazí, vyberte volbu Neviditelné elementy" z nabídky Vizuální pomůcky na panelu Dokument. Nabídka je označená ikonou oka. Dále nastavíte parametr action ve značce <form>. 5. Pokud je třeba, zvolte Okno Vlastnosti, čímž zobrazíte panel Vlastnosti. V panelu klepněte na ikonu složky vedle pole Akce. V zobrazeném dialogu najděte složku lekce08 a zvolte soubor zpracovani_formulare.html. Klepněte na tlačítko OK. Poznámka: U ostatních parametrů můžete nechat vyplněné výchozí hodnoty. Parametry method a enctype závisejí na typu kódu na straně serveru použitého ke zpracování dat z formuláře. Jak už bylo zmíněno, odkaz na tento kód je možné přidat jako hodnotu parametru action. 157

158 Pole Akce uvádí cílovou stránku, která se zobrazí po potvrzení formuláře. Zpracováním může být například uložení dat do databáze, vytvoření dynamického obsahu, generování odezvy nebo provedení jiné akce. V tomto cvičení je onou akcí pouze načtení děkující stránky do prohlížeče po potvrzení vyplnění formuláře. 6. Zvolte Soubor (File) > Uložit (Save). Vytvořili jste element f orm. Dále budete vkládat formulářová pole, počínaje poli textovými. 29. lekce SAMOSTATNÁ PRÁCE TVORBA FORMULÁŘŮ, 2.ČÁST Vkládání textových formulářových prvků Textové prvky formuláře jsou základními formulářovými prvky. Používají značku <input> a v selektoru značek se zobrazují jako <input>. Textová pole jsou základním nástrojem sběru nestrukturovaných dat pomocí krátkých frází a jen těžko si lze bez nich formulář představit. Mnoho formulářů se vlastně skládá pouze z textových polí. V dalším cvičení vložíte základní textová pole, testová pole Spry, pole pro heslo, potvrzovací pole pro heslo a textové oblasti. Ještě než začnete, ujistěte se, že je Dreamweaver nastaven k přidávání prvků formuláře v přístupném formátu. Nastavení předvoleb přístupného formuláře Technologie přístupnosti klade na prvky formuláře zvláštní požadavky. Technologie asistenčních zařízení, jako je třeba čtečka obrazovky, vyžadují precizní kód, jenž umožňuje správné čtení formulářů a jednotlivých formulářových prvků. Dreamweaver poskytuje volbu, která zajistí výstupní kód formuláře ve správném formátu. Možná jste toto nastavení provedli dříve; pokud ano, pouze zkontroluje, že volby jsou nastaveny pro přístupné formuláře. 158

159 1. Zvolte Upravit > Předvolby. 2. Jakmile se zobrazí dialog Předvolby, vyberte kategorii Usnadnění přístupu. 3. V této kategorii se ujistěte, že máte zatrženou volbu Objekty formuláře". Pak stiskněte tlačítko OK. Jak uvidíte v následujícím cvičení, když je tato volba zatržená, zobrazí se dialog ještě před tím, než vložíte samotný prvek formuláře. Tento dialog poskytuje řadu voleb, jež zahrnují popis formuláře stejně jako jiné speciální parametry. Použití textových polí Do textových polí je možné psát abecedně-číslicové znaky - písmena a číslice - s omezeným počtem znaků. Aktuální limit znaků textového pole je 255 znaků, ale většina textových polí používá pro vkládání mnohem kratší textové řetězce, jako jsou jména nebo adresy. 1. Pokud je potřeba, poklepejte v panelu Soubory na soubor kontakt.html, čímž ho otevřete. 2. Klepněte do červeného obrysu formuláře. 3. Z kategorie Formulář v panelu Vložit vyberte Textové pole. 4. V zobrazeném dialogu v poli Identifikátor (ID) napište jméno a stiskněte klávesu Tab. V poli Popis napište Jméno: a stiskněte klávesu Tab. Název identifikátoru je malými písmeny a bez diakritiky, neboť jde o kód. Popis Jméno začíná velkým písmenem a obsahuje diakritiku, protože tento nápis si přečte člověk, který bude formulář vyplňovat, a bude se zobrazovat vedle samotného textového pole. 5. Z části Styl vyberte volbu Přiložit tag popisu s použitím atributu 'for'". Ujistěte se, že máte v části Poloha vybranou volbu Před položkou formuláře". Pak stiskněte tlačítko OK. 159

160 Dreamweaver poté vloží takovýto kód: <label for="jmeno">jméno</label> <input type="text" name="jmeno" id="jmeno" /> Tento kód zajistí, že se ke značce <input> připojí značka <label > s popisem prvku. Poznámka: Popis textového pole se většinou umisťuje před pole samotné. Jak uvidíte později v této lekci, popisy přepínače a zatrhávacího pole se běžně umísťují za jejich formulářové pole. Tyto konvence činí formuláře použitelnější a přístupnější. 6. Zvolte Soubor Uložit. První z vašich formulářových objektů je na svém místě. Vložení podobných textových polí je velmi podobné. V dalším cvičení přidáte speciální verzi textového pole, textové pole Spry. 160

161 Vložení textového pole Spry Již dříve jste se dozvěděli o frameworku Spry používajícím Ajax a pracujícím s různými nástroji Spry, jako jsou Spry data nebo Spry skládačka. Dreamweaver taktéž osahuje Spry objekty pro formuláře. Každý ovládací prvek Spry kombinuje elementy formuláře se sofistikovaným JavaScriptem, aby vytvořil jednoduše použitelné formulářové objekty se zabudovanou validací (ověřením). Validace je proces ověření, zda byla do formulářového prvku vložena odpovídající data. Tím se zajistí integrita a kvalita dat vkládaných do formuláře. Jestliže by návštěvník stránek vložil například neúplnou nebo špatně zapsanou ovou adresu do textového pole pro , formulářová data by byla bezcenná. Validace může taktéž zajistit, že budou před odesláním formuláře vyplněna všechna pole, která potřebujete mít vyplněná. Formulářové ovládací prvky Spry poskytují několik typů formulářových prvků: textová pole, textové oblasti, zatrhávací pole hesla, potvrzení hesel, skupiny přepínačů a seznamy voleb. Každý ovládací prvek pracuje v podstatě stejně: Ovládací prvek vložíte a poté vyladíte jeho parametry pomocí panelu Vlastnosti. Poznámka: Každý ovládací prvek přidává odkaz na soubory s JavaScriptem a CSS. V tomto cvičení jste již oba soubory zkopírovali na váš pevný disk z CD přiloženého k této knize. Nicméně pokud budete vytvářet svůj vlastní formulář, Dreamweaver vás upozorní na to, že tyto soubory přidá k vašemu webu. Nezapomeňte nahrát složku SpryAssets a složku Scripts spolu s ostatními soubory na Internet; jinak by se totiž ovládací prvky nezobrazily a nefungovaly správně. Nyní vložíte ovládací prvek Ověření textového pole Spry, abyste zajistili, že váš formulář přijme pouze správně napsanou ovou adresu. 1. Otevřete soubor kontakt.html. 2. Klepněte za dříve vložené pole Jméno" a stiskněte klávesovou zkratku Shift + Enter čímž zalomíte řádek. 3. Z kategorie Formulář panelu Vložit vyberte nástroj Ověření textového pole. 4. V zobrazeném dialogu napište do pole identifikátor a stiskněte klávesu Tab. 161

162 V poli Popis napište a stiskněte klávesu Tab. Z části Styl vyberte volbu Přiložit tag popisu s použitím atributu 'for'".a v části Poloha vyberte Před položkou formuláře". Pak stiskněte tlačítko OK. 5. Zvolte Soubor Uložit. Pokud vás Dreamweaver bude informovat o připojení externího JavaScriptu, stiskněte tlačítko OK. Nyní můžete vložený ovládací prvek upravit. 6. Pokud nevidíte záložku Textové pole Spry, umístěte ukazatel myši nad pole, dokud se záložka nezobrazí. Pak na ni klepněte, čímž objekt vyberete. 7. Pokud je třeba, zvolte Okno Vlastnosti, čímž se zobrazí panel Vlastnosti. Z roletky Typ vyberte volbu ová adresa". Panel zobrazuje mnoho informací a několik nastavitelných parametrů. Jak můžete vidět, nabízí se řada typů validace, od Celé číslo až po Vlastní. Typ ová adresa zajistí kontrolu přítomnosti znaku zavináče následovaného názvem domény. Nyní nastavte spuštění validace. 162

163 8. V panelu Vlastnosti zatrhněte volbu onblur". Ujistěte se taktéž, že máte zatrženou volbu Vyžadováno". Pokud je vyplnění pole vyžadováno, uživatel jej musí před potvrzením formuláře vyplnit. Ve výchozím nastavení se všechny validace provedou při potvrzení formuláře. Ve většině případů můžete přidat kontrolu dříve. V tomto příkladu se pole otestuje na platný ový formát, jakmile uživatel stiskne klávesu Tab nebo klepne myší mimo pole. To poskytuje mnohem rychlejší reakci a lepší uživatelskou zkušenost. Pokud uživatel pole přeskočí, chybová zpráva se zobrazí při potvrzení celého formuláře. V tomto cvičení vám postačí výchozí chybové hlášení. Nicméně je velmi jednoduché tuto zprávu upravit pomocí roletky Náhled stavů. Vyberte jakýkoli náhled stavu a napište vlastní text v okně dokumentu. Pokud nebudete chtít, aby se při práci toto hlášení zobrazovalo v okně dokumentu, pak v roletce zvolte Výchozí". 30. lekce SAMOSTATNÁ PRÁCE TVORBA FORMULÁŘŮ, 3.ČÁST Vytvoření sady polí První dvě textová pole lze uspořádat do bloku s rámečkem s názvem nebo frází (nazývanou legenda) pomocí značky <fieldset>. 1. Vyberte popisky Jméno a a textová pole. To nemusí být v okně dokumentu tak jednoduché. Abyste si mohli být jistí, že jste vybrali vše, klepněte na tlačítko Rozdělit (Split), čímž se přepnete do zobrazení Kód a návrh. 163

164 Ujistěte se, že jste vybrali tento celý blok kódu: <label for="jmeno">jméno</label> <input type="text" name="jmeno" id="jmeno" /> <br /> <span id="sprytextfield1"> <label for=" "> </label> <input type="text" name=" " id=" " /> <span class="textfieldrequiredmsg">je vyžadována hodnota.</span><span class="textfieldinvalidformatmsg">neplatný formát.</span></span> 2. V kategorii Formulář v panelu Vložit klepněte na ikonu Sada polí 3. V zobrazeném dialogu napište do pole Popisy text Vaše kontaktní informace. Pak stiskněte tlačítko OK. 4. Zvolte Soubor Uložit. Sada polí není v návrhovém zobrazení patrná, nicméně uvidíte alespoň popisek (legendu). Abyste si mohli prohlédnout, jak sada polí aktuálně vypadá, použijte Živé zobrazení nebo si stránku prohlédněte v prohlížeči. 5. Klepněte na tlačítko Živé zobrazení (Live View) nebo zavřete prohlížeč a vraťte se do Dreamweaveru. Tvorba pole pro uživatelské jméno Některá textová pole nevyžadují data v určitém formátu, ale mohou vyžadovat, aby uživatel vložil určité znaky nebo čísla. To je zcela běžné u webových uživatelských jmen. V dalším cvičení přidáte do stránky textové pole Spry, jež vyžaduje určité minimální množství zadaných znaků. 164

165 1. Klepněte za přidanou sadu polí, ale stále dovnitř červeného rámečku kolem formuláře, čímž určíte místo vložení. Pokud je třeba, vyberte sadu polí a stiskněte šipku doprava, abyste se posunuli za sadu polí. Pak stiskněte klávesu Enter, čímž vytvoříte prázdný odstavec. 2. V kategorii Formulář panelu Vložit klepněte na Ověření textového pole Spry. 3. V zobrazeném dialogu napište do pole Identifikátor text uzivjmeno a stiskněte klávesu Tab. Do pole Popis napište Uživ. jméno:. Ujistěte se, že máte v části Styl vybranou volbu Přiložit tag popisu s použitím atributu for'. A v části Pozice nechte vybranou volbu Před položkou formuláře". Pak stiskněte tlačítko OK. 4. Pokud je třeba, ukazatel myši umístěte nad textové pole uzivjmeno a počkejte, dokud se nezobrazí záložka Textové pole Spry. Klepnutím na záložku objekt vyberete. 5. V panelu Vlastnosti vyberte v části Ověřit při volbu onblur". Dále v poli Min. počet znaků napište 6. Ujistěte se taktéž, že máte zatrženou volbu Vyžadováno". 165

166 Pokud se v návrhovém zobrazení objeví chybové hlášení na červeném pozadí, můžete jej deaktivovat v panelu Vlastnosti vybráním volby Výchozí" v roletce Náhled stavů. 6. Zvolte Soubor Uložit. Tvorba pole pro heslo Pole pro heslo je na Internetu běžným jevem. Běžně se v textových polích zobrazují znaky, které píšete. Nicméně v případě textového pole pro heslo jsou napsané znaky ihned nahrazovány hvězdičkami nebo puntíky. Podoba záleží na prohlížeči. Důvodem je samozřejmě bezpečnost. 1. Stiskněte klávesovou zkratku Shift + Enter, čímž vytvoříte zalomení řádku za polem pro uživatelské jméno. 2. V kategorii Formulář panelu Vložit klepněte na Heslo ověření sady Spry. 3. V zobrazeném dialogu napište do pole Identifikátor text heslo a stiskněte klávesu Tab. Do pole Popis napište Heslo: a stiskněte klávesu Tab. V částech Styl a Pozice nechte vybrané volby Přiložit tag popisu s použitím atributu 'for', respektive Před položkou formuláře". Pak stiskněte tlačítko OK. 4. Klepněte na záložku Heslo sady Spry. V panelu Vlastnosti zatrhněte volbu Vyžadováno" a volbu onblur" v části Ověřit při. V poli Min. počet písmen napište 8. V poli Min. počet čísel napište

167 Pokud se v návrhovém zobrazení objeví chybové hlášení na červeném pozadí, můžete jej deaktivovat v panelu Vlastnosti vybráním volby Výchozí" v roletce Náhled stavů. 5. Stiskněte klávesu s šipkou doprava, abyste se posunuli za pole pro heslo. Pak stiskněte klávesovou zkratku Shift + Enter, čímž za polem pro heslo zalomíte řádek. 6. V kategorii Formulář panelu Vložit klepněte na Potvrzení ověření sady Spry. 7. V zobrazeném dialogu napište do pole Identifikátor text potvrdheslo a do Popis napište Zopakujte heslo:. V částech Styl a Pozice nechte vybrané volby Přiložit tag popisu s použitím atributu 'for', respektive Před položkou formuláře". Pak stiskněte tlačítko OK. 167

168 8. V panelu Vlastnosti zatrhněte volbu Vyžadováno". V roletce Ověřit platnost podle vyberte volbu heslo" ve formuláři form1". 9. Klepněte do místa hned za pole pro potvrzení hesla a stiskněte klávesu Enter. Protože webový uživatel neví, podle jakých pravidel je třeba tvořit uživatelské jméno a heslo, je vhodné k polím připojit také odstavec s vysvětlením. Vraťme se nyní zpátky k prázdným odstavcům přítomným nad polem pro uživatelské jméno a napišme sem nějaké instrukce. Pokud zde prázdné odstavce nejsou, vyberte pole pro uživatelské jméno a stiskněte klávesu s šipkou doleva, abyste se posunuli před pole pro uživatelské jméno, a zde stiskněte klávesu Enter, čímž se odstavec vytvoří. 168

169 10. Klepněte do vytvořeného prázdného odstavce a napište následující 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živatelské jméno musí obsahovat alespoň 6 znaků a heslo musí obsahovat alespoň 8 znaků obsahujících alespoň 2 čísla. Odstavec s instrukcemi a tři textová pole je nyní možné uzavřít do sady polí. 11. Vyberte odstavec a tři textová pole. I když se možná pro správný výběr bloku kódu nebudete muset přepnout do zobrazení Kód, neváhejte to udělat, pokud si nebudete výběrem jistí. 12. V kategorii Formulář panelu Vložit zvolte Sada polí. Do pole Popis napište Online nástroje. Pak stiskněte tlačítko OK. 13. Zvolte Soubor Uložit. Pole pro heslo umožňuje uživateli webu vytvořit heslo pomocí pravidel, která jste zvolili. Pole pro potvrzení hesla vyžaduje, aby uživatel heslo přesně opsal. Tím usnadníte uživatelům kontrolu překlepů v zápisu hesla a nechtěného potvrzení zadání hesla, jehož zápis spletli. 169

170 31. lekce SAMOSTATNÁ PRÁCE TVORBA FORMULÁŘŮ, 4.ČÁST Vložení textové oblasti Textové oblasti umožňují vložení většího množství textu do textového pole. Textové oblasti dovolují zápis na více řádků a také jejich zalamování. Pokud vložený text přesáhne fyzický prostor textové oblasti na webové stránce, automaticky se zobrazí posuvník. 1. Otevřete soubor kontakt.html. Jiným způsobem, jak vytvořit sadu polí, je vytvořit nejprve ji a poté do ní vložit elementy formuláře. Při tvorbě několika dalších formulářů použijeme tuto metodu. 2. Ukazatel myši umístěte za poslední sadu polí, ale stále do formuláře ohraničeného červeným rámečkem. Pokud je třeba, klepněte dovnitř poslední sady polí, pak klepněte na značku <fieldset> v selektoru značek a stiskněte klávesu s šipkou doprava, čímž se posunete dále. V kategorii Formulář panelu Vložit klepněte na Sada polí. V zobrazeném dialogu napište do pole Popisy text Vaše cesta a stiskněte tlačítko OK. Nyní můžete do sady polí vložit další elementy formuláře. 3. V kategorii Formulář panelu Vložit klepněte na Textová oblast. 4. V zobrazeném dialogu napište do pole Identifikátor text plánované a stiskněte klávesu Tab. Do pole Popis napište Cestovní plány: a opět stiskněte klávesu Tab. V částech Styl a Pozice nechte - vybrané volby Přiložit tag popisu s použitím atributu 'for'", respektive Před položkou formuláře". Pak stiskněte tlačítko OK. 170

171 5. Textová oblast se zobrazí hned za jejím popisem. Klepněte za popis a stiskněte klávesovou zkratku Shift + Enter, čímž zalomíte řádek. 6. Klepněte dovnitř prázdné oblasti. Někdy je dobré použít pole Poč. hodnota k zobrazení textu, jenž uživateli napovídá, jaký záznam se od něj očekává. Počáteční hodnota není vyžadovaná a její užití záleží na popisku a na tom, jak jasně formulář instruuje uživatele k jeho vyplnění. 171

172 Poznámka: Panel Vlastnosti můžete také použít ke změně šířky a výšky (počtu řádků) textové oblasti na stránce. Taktéž můžete nastavit, aby bylo možné text v oblasti pouze číst, ale nikoliv sem cokoli zapisovat. 7. Do pole napište: Stručně popište, kam byste chtěli jet a na jak dlouho. Jakmile uživatel začne do textové oblasti psát, počáteční hodnota hned zmizí. 8. Zvolte Soubor Uložit. Textová oblast umožňuje webovým uživatelům napsat dlouhý popis (vy jste sice žádali stručný zápis, ale do textové oblasti se bez problémů vejde několik odstavců textu). Vytvoření přepínačů Pokud chcete, aby si lidé vybrali z několika možností, použijete přepínací tlačítka neboli přepínače. Na rozdíl od jiných prvků formuláře vyžaduje každý přepínač jedinečné jméno; nebo lépe: všechna přepínací tlačítka v jedné skupině mají jedno jméno. Abyste přepínací tlačítka ve skupině rozlišili, každému přidělíte jinou hodnotu. Dreamweaver poskytuje dvě metody, jak přidat přepínače na stránku. Buď můžete každý přepínač vložit samostatně, nebo můžete vložit celou skupinu přepínačů najednou použitím ovládacího prvku Přepínač ověření sady Spry. Pokud přepínače vložíte samostatně, budete muset každý z nich přejmenovat, abyste zajistili, že všechny budou mít stejné jméno. Pokud je přidáte jako Přepínač ověření sady Spry, budou mít automaticky stejné jméno a připojený kód JavaScriptu a CSS vám umožní nastavit vlastní hlášení o chybách a jejich styl. V tomto cvičení použijete právě tento zmíněný ovládací prvek. 1. Otevřete soubor kontakt.html. 2. Klepněte za textovou oblast, ale stále uvnitř sady polí s popiskem Vaše cesta. Stiskněte klávesu Enter, čímž se posunete na další řádek. Napište: Kolik vás bude cestovat? Pak stiskněte klávesu Enter. 3. V kategorii Formulář panelu Vložit klepněte na Přepínač ověření sady Spry. 4. Klepněte třikrát na tlačítko se znaménkem plus v části Přepínače, čímž k současným dvěma přepínačům přidáte další tři. Nyní přidáte popisky a hodnoty těchto tlačítek. 172

173 5. Klepněte do horního řádku seznamu a napište Jeden do sloupce Popis. Stiskněte klávesu Tab a napište jeden do sloupce Hodnota. Stiskněte klávesu Tab a napište Dva, po opětovném stisku klávesy Tab napište dva. Stejně pokračujte na dalších řádcích a vložte zde popisy Tři, Čtyři a Víc a k nim přiřaďte hodnoty tri, ctyri a vic. V části Rozvrhnout s použitím vyberte volbu Zalomení řádku". Pak stiskněte tlačítko OK. 6. V okně dokumentu, pokud nejsou přepínače vybrané, klepněte do modré zálo, čímž ovládací prvek vyberete. Nechte dalšíi volby nastavené, jak ukazuje následující obrázek. 7. Zvolte Soubor Uložit. Vytvořili jste sadu přepínacích tlačítek, jež umožňují vybrat pouze jednu možnost. Použitím ovládacího prvku Spry jste byli schopni ze sady přepínačů udělat vyžadovaný prvek. Pokud uživatel nevybere jednu z možností, jakmile formulář potvrdí, zobrazí se chybové hlášení. 173

174 Vkládání zaškrtávacích polí Zaškrtávací pole poskytují množství voleb, které je možné zvolit v jakékoli kombinaci. Podobně jako přepínače, i zaškrtávací pole jsou součástí pojmenované skupiny. Každé zaškrtávací pole má svou vlastní hodnotu a jedinečný identifikátor. 1. Klepněte za skupinu přepínačů a stiskněte klávesu Enter. V zobrazení Kód a návrh může kód prozkoumat, abyste se ujistili, že jste se skutečně posunuli před uzavírací značku </p>, a jste tedy mezi touto značkou a značkou </span> která ukončuje chybovou hlášku, jež se zobrazí, pokud uživatel přepínače přeskočí. V zobrazení Návrh napište Jaké služby chcete zařídit? a stiskněte klávesu Enter. Dreamweaver vloží zaškrtávací pole najednou, pokaždé když stiskněte tlačítko Zaškrtávací pole. Touto metodou musíte ručně vložit název skupiny u každé sady zaškrtávacích polí. Podobně jako v případě přepínačů, Dreamweaver nabízí jiný způsob vložení celé skupiny zaškrtávacích polí se stejným jménem. Každé ze zaškrtávacích polí bude mít různý popisek a hodnotu. 2. V kategorii Formulář panelu Vložit klepněte na Skupina zaškrtávacích polí. 3. V zobrazeném dialogu klepněte na tlačítko se znaménkem plus v části Zaškrtávací pole, čímž vytvoříte třetí zaškrtávací pole. První popis změňte na Výlety a stiskněte klávesu Tab. Poté do pole Hodnota napište výlety. Pokračujte popisem Doprava s hodnotou doprava a dále popisem Hotely s hodnotou hotely. V části Rozvrhnout s použitím vyberte volbu Konců řádků". Pak stiskněte tlačítko OK. 174

175 Díky použití skupiny zaškrtávacích polí nemusíte nastavovat žádné další volby v panelu Vlastnosti. Rychlý pohled na kód odhalí hodnotu použití Skupiny zaškrtávacích polí. 4. Klepněte na tlačítko Rozdělit, čímž se přepnete do zobrazení Kód a návrh. Vidíte, že každé zaškrtávací pole má svůj parametr se jménem: name="skupina zaškrtávacích polí1". Poznámka: Všeobecná jména navrhovaná Dreamweaverem, jako je Skupina zaškrtávací polil, lze změnit v panelu Vlastnosti v poli s názvem. Jiné pojmenování vám může sedět víc, neboť vy pak budete výsledný formulář s daty prohlížet. Použití vlastních jmen spíše než jmen všeobecných, jež navrhuje Dreamweaver, většinou vede k mnohem kvalitnější informaci pro příjemce formuláře. Pokud zaškrtávací pole vložíte naráz, budete muset ručně přidat jména a hodnoty každého zaškrtávacího pole. Ovládací prvek Zaškrtávací pole Spry šetří čas zautomatizováním této činnosti. 5. Zvolte Soubor Uložit. Vytvořili jste skupinu zaškrtávacích polí. Ve výchozím stavu lze do skupiny vybrat více než jedno pole. Jak už bylo zmíněno dříve, výchozí pozice značky <1 a bel > je jak u přepínačů, tak u zaškrtávacích polý, za formulářovým prvkem. Zbývá nám už jen jeden formulářový prvek, který přidáme do našeho formuláře. Dále se naučíte, jak zobrazit více možností v jediném celistvém seznamu. 32. lekce SAMOSTATNÁ PRÁCE TVORBA FORMULÁŘŮ, 5.ČÁST Tvorba seznamů Roletové seznamy jsou flexibilní metodou uvedení nabídky více voleb. Běžně seznamy nabízí jednu nebo více výlučných voleb, podobně jako skupina přepínačů. Nicméně jakmile aktivujete možnost vybrání více 175

176 voleb, chová se seznam jako sada zaškrtávacích polí. V tomto cvičení vložíte standardní seznam se třemi volbami. 1. Otevřete soubor kontakt.html. Pak klepněte za popisek posledního zaškrtávacího pole a stiskněte klávesu Enter. 2. Napište Kdy chcete cestovat? a stiskněte klávesu Enter. 3. V kategorii Formulář panelu Vložit klepněte na Seznam/Nabídka. 4. V zobrazeném dialogu napište do pole Identifikátor text cas a stiskněte klávesu Tab. Ponechte pole Popis prázdné a v části Styl vyberte volbu Žádný tag popisu". A stiskněte tlačítko OK. Popis není v tomto případě potřeba, neboť text elementu formuláře poskytuje potřebný popis. Nyní jste připraveni na vložení položek seznamu, Dreamweaver poskytuje zvláštní dialog k provedení tohoto úkolu a je přístupný z panelu Vlastnosti. 5. Vyberte seznam, který jste právě vložili. Pokud je třeba, zvolte Okno Vlastnosti. V panelu klepněte na tlačítko Hodnoty seznamu. 176

177 6. V zobrazeném dialogu ve sloupci Popis napište Ihned a stiskněte klávesu Tab. Do sloupce Hodnota napište ihned. Stiskněte klávesu Tab. 7. Seznam dokončete následovně: Popis položky: V příštích dvou měsících, hodnota: dvamesice. Popis položky: Někdy letos, hodnota: letos. 8. Klepněte na tlačítko OK. Nyní vyberete, která položka seznamu se bude zobrazovat ve chvíli, kdy se stránka načte; běžně jde o první položku seznamu. 9. V panelu Vlastnosti vyberte v nabídce Na začátku vybrané volbu Ihned". V části Typ zvolte volbu Nabídka". Pokud je tento element formátován jako nabídka, neumožňuje vybrat více položek. Abyste uživatelům tuto možnost povolili, změňte typ na Seznam" a poté zatrhněte volbu Povolit vícenásobné". Ve formátování jako seznam můžete po uživateli například chtít, aby vybral tři volby pro ten který týdenní výlet. Jakmile si prohlédnete volby seznamu, vraťte se k typu Nabídka", abyste mohli cvičení dokončit. 10. Zvolte Soubor Uložit. 177

178 Seznam může obsahovat volby - například výběr z krajů - a tak přidat množství voleb pro uživatele, a přitom takový element zabere jen málo místa na webové stránce. Váš formulář je téměř dokončený - posledním krokem bude přidání tlačítka pro potvrzení všech vložených informací ve formuláři. Přidání potvrzovacího tlačítka Potvrzovací tlačítko je potřebné ke spuštění akce navázané na potvrzení formuláře. Jak název tlačítka napovídá, tento formulářový objekt potvrzuje celý formulář k odeslání ke zpracování, a jde tedy o základní prvek formuláře. Ve výchozím stavu je objekt tlačítka v Dreamweaveru nastaven tak, že potvrzuje formulář, ačkoliv jsou zde ještě jiné možnosti. Například byste mohli zahrnout tlačítko k obnovení výchozích hodnot formuláře. 1. Pokud je třeba, poklepejte na soubor kontakt.html v panelu Soubory. 2. Pak klepněte na jakýkoli element formuláře v poslední sadě polí. V panelu Vlastnosti vyberte značku <fie1dset>. Dále umístíte potvrzovací tlačítko mimo sadu polí. 3. Stiskněte klávesu s šipkou doprava, abyste se posunuli mimo vybranou sadu polí. Pak stiskněte klávesu Enter, čímž vytvoříte prostor pro tlačítko. 4. V kategorii Formulář panelu Vložit klepněte na Tlačítko. 5. V zobrazeném dialogu napište do pole Identifikátor text odeslat. V části Styl vyberte volbu Žádný tag popisu". A stiskněte tlačítko OK. 178

179 6. V panelu Vlastnosti nechte v části Akce zvolenou výchozí volbu Odeslat formulář a v části Hodnota nechte Odeslat. Text tlačítka byste mohli jednoduše změnit třeba na Potvrdit namísto Odeslat, a to změnou textu v poli Hodnota. 7. Zvolte Soubor Uložit. Právě jste dokončili tvorbu formuláře, který by měl sesbírat jméno, ovou adresu, uživatelské jméno, heslo a další informace potřebné k sjednání cesty na výlet. Umístili jste skripty ověřující, že byla vyplněna potřebná pole a další potřebné údaje, například že je zapsán ve správném tvaru nebo že uživatelské jméno obsahuje minimální počet znaků. Pole jste seskupili do sady polí a přidali jste potvrzovací tlačítko. Se skriptem zajišťujícím zpracování formuláře zapsaného do pole Akce je tento formulář připravený k práci. Formátování formulářů I když je formulář, na němž jste v této lekci pracovali, funkční, není ještě vůbec naformátovaný. Dobře stylovaný formulář zvyšuje jeho čitelnost a pochopení, a taktéž se snáze používá. V následujícím cvičení přidáte vašemu formuláři styly. Použití pravidel CSS Ačkoliv máte k dispozici velké množství typů formulářových elementů, je pro ně všechny běžná jistá věc - značka <1abel >. Tyto formulářové elementy můžete formátovat pomocí CSS. V tomto cvičení vytvoříte novou šablonu stylů obsahující formátování vašeho formuláře a přidáte pravidla pro elementy popisku a sady polí. 1. Otevřete soubor kontakt.html v panelu Soubory. 2. Zvolte Okno Styly CSS. Vytvoříte novou šablonu stylů pouze se styly pro formulář. Tato šablona se připojí k této stránce, ale není třeba ji připojovat k jiným stránkám webu cestovní kanceláře. Oddělením pravidel CSS pro formulář od pravidel v hlavní šabloně stylů snížíte množství kódu, které se bude muset při 179

180 načtení každé stránky stáhnout, a vytvoříte tak mnohem úspornější stránky. Méně kódu znamená rychlejší načítání a lepší uživatelskou zkušenost. Navíc si vyzkoušíte, jak se vytváří nová šablona stylů. 3. U spodního okraje panelu Styly CSS klepněte na ikonu Připojit seznam stylů. 4. V zobrazeném dialogu napište do pole Soubor/URL formular.css. V části Přidat jako vyberte volbu Odkaz" a v roletce u pole Média zvolte screen". Pak stiskněte tlačítko OK. 5. Dreamweaver vás upozorní, že šablona se zadaným názvem neexistuje. Přesto klepněte na tlačítko Ano. 6. V panelu Styly CSS v části Všechna pravidla vyberte formular.css. Poté klepněte na ikonu Přidat nové pravidlo. 7. V zobrazeném dialogu v roletce Typ selektoru vyberte volbu Tag (Předefinuje element HTML). Do pole Název selektoru napište legend nebo použijte k výběru elementu roletku u tohoto pole. Ujistěte se, že máte v roletce Definice pravidla vybraný soubor formular.css. Pak stiskněte tlačítko OK. 180

181 8. Dreamweaver vás upozorní, že vybraná šablona stylů neexistuje. Přesto stiskněte tlačítko Ano. 9. V zobrazeném dialogu vyberte kategorii Typ. Do pole Font-size (velikost písma) napište 110 a vpravo zvolte %". V roletce u pole Font-weight (síla písma) zvolte bold" (tučné). Do pole Color (barva) napište #345FA3. Pak stiskněte tlačítko OK. 181

182 10. V panelu Styly CSS klepněte na ikonu Přidat nové pravidlo. 11. V zobrazeném dialogu v roletce Typ selektoru vyberte volbu Tag (Předefinuje element HTML). Do pole Název selektoru (Selector Name) napište fieldset nebo použijte k výběru elementu roletku u tohoto pole. Ujistěte se, že máte v roletce Definice pravidla vybraný soubor formular.css. Pak stiskněte tlačítko OK. 12. V zobrazeném dialogu vyberte kategorii Rámeček. V části Padding (vnitřní okraj) napište do pole Top (horní) číslo 10, které se použije pro všechny strany. V části Margin (vnější okraj) zrušte zatržení volby Stejné pro všechny" (Same for all) a do pole Bottom (spodní) napište 5. V roletce vpravo vyberte volbu px". 182

183 13. Vyberte kategorii Okraj. V části Style (styl rámečku) vyberte z roletky horního pole volbu solid" (nepřerušovaná čára). V části Width (šířka) vyberte z roletky volbu thin" (tenký). Do pole v části Color (barva) napište #345FA3. (Hodnoty se vždy přenesou i do dalších polí.) Pak stiskněte tlačítko OK. 14. Zvolte Soubor Uložit. 183

184 Styly popisku a sady polí se správně zobrazí bud'v Živém zobrazení nebo v prohlížeči. 15. Klepněte na tlačítko Živé zobrazení nebo si stránku prohlédněte v prohlížeči. 16. Klepněte znovu na tlačítko Živé zobrazení nebo zavřete okno prohlížeče a vraťte se do Dreamweaveru. V této lekci jste vytvořili kompletní formulář s mnoha formulářovými elementy a řadou ověřovacích ovládacích prvků Spry. Formulář jste naformátovali pomocí stylů, abyste trochu oživili jeho vzhled, a připojili jste a vytvořili novou šablonu stylů. 33. lekce SAMOSTATNÁ PRÁCE PUBLIKOVÁNÍ STRÁNEK NA INTERNETU Definování vzdáleného webového místa Dreamweaver je založen na systému dvou webových míst. Jedním webovým místem je složka na pevném disku vašeho počítače a nazývá se místní webové místo. Všechnu práci v předchozích lekcích jste prováděli v rámci vašeho místního webového místa. Druhým webovým místem, nazývaným vzdálené webové místo, je složka na webovém serveru, který běží na jiném počítači. Vzdálené webové místo je obecně připojeno k Internetu a umožňuje publikování webových stránek. Dreamweaver podporuje více metod, jimiž se lze ke vzdálenému webovému místu připojit: FTP (File Transfer Protocol) - standardní metoda pro připojení k hostovaným webovým stránkám. Místní/síťový (Local/Network) - místní nebo síťové spojení je nejčastěji používané v případě webových serverů, které sloveso prostředníky, takzvané pracovní servery. Soubory z těchto zastupujících serverů se případně publikují na webových serverech připojených k Internetu. WebDav (Distributed Authoring and Versioning) - na webu založený systém taktéž známý uživatelům Windows XP jako Webové složky. RDS (Remore Development Services) - vyvinuté společností Adobe a určené pro ColdFusion a používané především, pokud pracujete se stránkami založenými na ColdFusion. 184

185 Microsoft Visual SourceSafe - vision kontrol systém umožňuje vstupní a výstupní správu a možnosti převinutí. V následujících cvičeních nastavíte vzdálené webové místo pomocí dvou nejběžnějších metod: FTP a Místní/síťový. Poznámka: Následující dvě cvičení jsou na sobě nezávislá. Pokud máte vlastní hosting a informace potřebné k připojení pomocí FTP, pak se věnujte cvičení Nastavení vzdáleného webového místa s připojením pomocí FTP. Pokud máte přímý přístup k webovému serveru, pak se věnujte cvičení Vytvoření webového místa na místním nebo síťovém serveru. Nastavení vzdáleného webového místa s připojením pomocí FTP Poznámka: Abyste mohli provést toto cvičení, potřebujete mít přístup ke vzdálenému serveru pomocí FTP, včetně adresy FTP, uživatelského jména a hesla. Většina webových vývojářů spoléhá při publikování a správě svých webů na FTP. FTP je zavedeným protokolem a na Internetu najdete mnoho z jeho podob. Většinu z nich Dreamweaver podporuje. 1. Spusťte Adobe Dreamweaver CS4. 2. Pokud je třeba, stiskněte klávesu F8, čímž se otevře panel Soubory. 3. Zvolte Web Správa webů. 4. V otevřeném dialogu uvidíte seznam všech webů, které jste dříve definovali.stiskněte tlačítko Upravit. 5. V zobrazeném dialogu klepněte na záložku Další volby a ze seznamu kategorií vyberte Vzdálené informace. 6. Z roletky Přístup vyberte FTP". 185

186 7. V poli Hostitel FTP napište URL adresu vašeho FTP serveru. Obvykle vypadá FTP adresa nějak takto: ftp.mojestranky.cz; pokud si nejste jisti správnosti FTP adresy, kontaktujte vašeho poskytovatele hostingu. 8. Do pole Složka hostitele napište, pokud bude třeba, název složky, jejíž obsah se publikuje na Internetu. Někteří poskytovatelé hostingu poskytují přístup pomocí FTP přímo do kořenové složky, která obsahuje složky s nepublikovaným obsahem - například cgi-bin, jež se používá k ukládání CGI (Common Gateway Interface) nebo binárních skriptů, stejně tak jako složky s veřejně přístupným obsahem. V takových případech napište název složky - například public_html, wwwroot nebo www. V případě jiných poskytovatelů hostingu může být FTP adresa shodná s veřejnou složkou. Pak byste pole nechali nevyplněné. 9. Do pole Přihlášení napište vaše uživatelské jméno pro přístup pomocí FTP a do pole Heslo heslo k tomuto přístupu. Obě pole jsou obvykle citlivá na velikost písmen, takže buďte opatrní v tom, co píšete. 10. Klepněte na tlačítko Testovat, abyste ověřili, že připojení pomocí FTP funguje správně. 186

187 11. Dreamweaver zobrazí hlášku oznamující, zda bylo připojení úspěšné nebo ne. Dialog s hlášením ukončíte stisknutím tlačítka OK. 12. Pokud nechcete zadávat uživatelské jméno a heslo pokaždé, když se Dreamweaver bude připojovat k serveru, zatrhněte volbu Uložit". Ujistěte se, že máte heslo zaznamenané ještě někde jinde, neboť z pole jej znovu nepřečtete. 13. S vaším poskytovatelem hostingu konzultujte instrukce ke správnému nastavení připojení k FTP serveru. Ve většině případů je dobrou volbou Použít zabezpečený FTP". Volby nastavení jsou následující: Volba Použít pasivní režim FTP" - umožňuje počítačům připojit se k hostujícímu počítači a obejít omezení ťirewallu; často se používá ve spojení s volbou Použít firewall. Volba Použít režim přenosu IPv6" - umožňuje připojení k serverům používajícím IP protokol verze 6, čímž využijí nejnovější verzi internetového přenosového protokolu. Volba Použít firewall" - umožňuje vašemu počítači připojit se k hostujícímu počítači zpoza firewallu. Pokud vyberete tuto volbu, klepněte na tlačítko Nastavení firewallu, abyste definovali předvolby firewallu, jako je třeba číslo portu nebo hostitel firewallu. Použít zabezpečený FTP (SFTP) - umožňuje připojení k hostiteli pomocí SFTP. 14. Pokud se k FTP serveru nechcete připojit, klepněte na tlačítko Kompatibilita serveru. Když se zobrazí dialog, zrušte zatržení volby Použít optimalizaci výkonu FTP", stiskněte tlačítko OK a poté znovu tlačítko Testovat. 15. Zatrhněte jakékoli další požadované volby pro vzdálené webové místo: Volba Udržovat informace o synchronizaci" - automaticky hlídá, které soubory se změnily v místním a vzdáleném webovém místě, takže je lze rychle synchronizovat. Tato funkce vám pomáhá sledovat provedené změny a může se hodit pro nahrávání na Internet, pokud změníte více stránek. Volba Při uložení automaticky odesílat soubory na server" - přenáší soubory u místního do vzdáleného webového místa, když soubory uložíte. Tato volba může obtěžovat, pokud ukládáte soubory příliš často a ve chvíli, když ještě nejsou připravené pro nahrání na Internet. 187

188 Volba Zapnout zpřístupňování a vyhrazování souborů" - zahajuje systém zpřístupňování a vyhrazování pro týmovou spolupráci na tvorbě stránek mezi členy týmu. Pokud vyberete tuto volbu, budete muset vložit uživatelské jméno pro účely vyhrazování, a pokud chcete, též ovou adresu. Pokud pracujete sami, pak tuto volbu používat nebudete. Je možné nechat všechny tři volby nezatržené. 16. Stiskněte tlačítko OK. Zobrazí se dialog informující vás, že byla znovu vytvořená vyrovnávací paměť, neboť jste změnili nastavení webového místa. Stiskněte tlačítko OK. Jakmile Dreamweaver dokončí aktualizace vyrovnávací paměti, stiskněte tlačítko Hotovo, čímž dialog zavřete. 34. lekce SAMOSTATNÁ PRÁCE PUBLIKOVÁNÍ STRÁNEK NA INTERNETU, ČÁST 2 Vytvoření webového místa na místním nebo síťovém serveru Poznámka: K provedení tohoto cvičení budete potřebovat přístup k lokálnímu nebo síťovému webovému serveru, včetně uživatelského jména a hesla. Pokud vaše společnost nebo organizace používá pracovní server jako prostředníka" mezi webovým designérem a webem online, je samozřejmé, že se budete potřebovat připojit k vašemu vzdálenému webovému místu pomocí místního nebo síťového serveru. Taktéž můžete použít tento typ připojení ve svém vlastním systému, pokud obsahuje webový server. 1. Spusťte Adobe Dreamweaver CS4. 2. Pokud je třeba, stiskněte klávesu F8, čímž se otevře panel Soubory. 3. Zvolte Web Správa webů. 4. V otevřeném dialogu se ujistěte, že máte vybrán správný web. Stiskněte tlačítko Upravit. 188

189 Tip: Pro přímý přístup k definici webového místa aktuálního webu můžete poklepat na DW OVK v roletce v horní části, kde je seznam všech webů. 5. V zobrazeném dialogu klepněte na záložku Další volby a ze seznamu kategorií vyberte Vzdálené informace. 6. Z roletky Přístup vyberte Místní/síťový". Pokud používáte webový server na svém vlastním systému jako vzdálenou složku, klepněte na ikonu složky a vyhledejte uvedenou složku. Adresa bude podobná této: [disk]:\inetpub\www-root. Pokud používáte síťový server, přejděte k tomuto serveru ve vaší síti. 7. Vyberte vhodné volby pro práci se vzdáleným webovým místem: Volba Udržovat informace o synchronizaci" - automaticky hlídá, které soubory se změnily v místním a vzdáleném webovém místě, takže je lze rychle synchronizovat. Tato funkce vám pomáhá sledovat provedené změny a může se hodit pro nahrávání na Internet, pokud změníte více stránek. Volba Při uložení automaticky odesílat soubory na server" - přenáší soubory u místního do vzdáleného webového místa, když soubory uložíte. Tato volba může obtěžovat, pokud ukládáte soubory příliš často a ve chvíli, když ještě nejsou připravené pro nahrání na Internet. Volba Zapnout zpřístupňování a vyhrazování souborů" - zahajuje systém zpřístupňování a vyhrazování pro týmovou spolupráci na tvorbě stránek mezi členy týmu. Pokud vyberete 189

190 tuto volbu, budete muset vložit uživatelské jméno pro účely vyhrazování, a pokud chcete, též ovou adresu. Pokud pracujete sami, pak tuto volbu používat nebudete. Je možné nechat všechny tři volby nezatržené. 8. Stiskněte tlačítko OK. Maskování souborů a složek Pokud zatrhnete volbu Udržovat informace o synchronizaci" v případě připojení ke vzdálenému webovému místu pomocí FTP nebo místního/síťového serveru, možná budete chtít některé místní materiály maskovat. Všechny soubory v kořenové složce webu se obvykle nemusí nahrávat na vzdálený server. Není vůbec důvod k tomu, abyste zaplňovali prostor na vzdáleném serveru soubory, ke kterým stejně nebude mít webový uživatel přístup. Například může jít o složky s předlohami a položkami knihovny. Zdrojové soubory Photoshopu {.psd) nebo Flashe (.fla) či jiné soubory, které jste použili při tvorbě webu, také není třeba nahrávat na vzdálený server. Jednotlivé položky proto můžete zamaskovat, takže Dreamweaver nebude tyto místní položky synchronizovat s položkami na vzdáleném webovém místě. Maskované složky, typy souborů a jednotlivé soubory jsou ze synchronizačního procesu vyloučeny. 1. Pokud je třeba, stiskněte klávesu F8, čímž se otevře panel Soubory. Zde vyberte ze seznamu web. 2. Zvolte Web Správa webů. 3. V otevřeném dialogu se ujistěte, že máte vybrán správný web. Stiskněte tlačítko Upravit. 4. V zobrazeném dialogu klepněte na záložku Další volby a ze seznamu kategorií vyberte Maskování (Cloaking). Zatrhněte volby Povolit maskování" (Enable cloaking) a Zamaskovat soubory zakončené na" (Cloak files ending with). Pak stiskněte tlačítko OK. Dreamweaver by měl aktualizovat vyrovnávací paměť. Pokud ano, pak po dokončení aktualizace stiskněte tlačítko Hotovo, čímž dialog zavřete. 190

191 Dreamweaver navrhuje maskovat soubory s příponami.fla A.psd. Další přípony můžete přidat do pole u volby Zamaskovat soubory zakončené na" (Cloak files ending with), pokud používáte některé další typy pomocných souborů, jako je třeba Adobe Illustrator (.ai). Maskované soubory jsou označené pomocí červeného přeškrtnutí v panelu Soubory (Files). Maskovat můžete také konkrétní soubory nebo složky. 5. Ze seznamu souborů a složek vyberte složku Library. 6. Klepněte pravým tlačítkem na vybranou složku a zvolte Maskování (Cloaking) Zamaskovat (Cloak). Zobrazí se dialog upozorňující, že zamaskování předlohy nebo souborů knihovny ovlivní pouze příkazy odeslání nebo získání, ale ne jakoukoli dávkovou operaci pro web". Pak stiskněte tlačítko OK. 191