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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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ů
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 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110 před obrázkem až k uzavírající značce za druhým vybraným seznamem. Jde o řádky 39-60. nebo
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
.
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... 11. Text zkopírujte do schránky, jak jste to provedli v kroku 5. 12. 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 8. 15. 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ů - ,
,
,
a
- 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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ě (). 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
Fráze Místa se nyní formátuje jako nadpis třetí úrovně, neboli jako značka .. 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 . Odrážkový, tedy neuspořádaný seznam označuje značka
. Jednotlivé položky seznamu pak v obou případech představuje značka
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 lekce03. 2. 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 , 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 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 určenou tabulkovým datům. Jiné elementy tabulky uvidíte v selektoru značek včetně . Tabulku samotnou můžete vybrat pomocí 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
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
59 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 lekce03. 2. Najděte tabulku, která se na stránce vyskytuje dole. 3. Klepněte kamkoliv do tabulky. A poté v selektoru značek vyberte
60 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 lekce04. 3. 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 . 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 40.
69 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 e-mailového klienta, klepněte na odkazy s e-mailový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 e-mailové 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
Poznámka: 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 klepněte na ikonu Nové pravidlo CSS v panelu Styly CSS . Odkaz tvoří právě značka 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
Text odkazu je nyní bílý. Jakékoli značce 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 http://mapy.google.cz/ 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 http:// 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 e-mailovou adresu Jiným oblíbeným typem odkazu je odkaz na e-mail. Jakmile na něj uživatel klepne, zobrazí se okno s novou zprávou a vyplněnou e-mailovou 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 e-mail. 1. 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
3. Vyberte napsaná slova. 4. V kategorii Běžné na panelu Vložit klepněte na ikonu E-mailový 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 E-mail napište [email protected]. 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 e-mailového klienta, použijte tlačítko Živé zobrazení nebo stiskněte klávesu F12 a poté klepněte na právě vytvořený emailový odkaz. Jakmile se zobrazí okno s novou zprávou, všimněte si pole Komu, v němž je vyplněná e-mailová 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 e-mailové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í e-mailů 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
•
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 . 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 . Poté klepněte na paletu barev u vlastnosti co1or a kapátkem vyberte tmavě modrou barvu s
O
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
5. Vyberte kategorii Rámeček a do pole Width (šířka) napište 200. 6. 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 , včetně pravidla se selektorem ul . MenuBarVertical a . MenuBarItemHover.
97 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 . 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
Značka
100 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 .TabbedPanelsContentGroup.
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 .
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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ě:
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
<společnost>společnost Anon 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 společnosti . ]] 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 . 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
113 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 2. 114 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 , 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 1. 2. 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 s textem Doporučené hotely společně s fotografií a tabulkou do panelu Obsah 3. 5. 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
5. Zvolte kategorii Pozadí . V poli Background-color změňte barvu #CCC na #345FA3. To je barva použitá na text ve značce
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 lekce07. 2. 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 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 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 . 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
121 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
vlastnosti text - a1ign přidělit hodnotu center u značky . 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 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 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 . 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 , všechny elementy umístěné do značky 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
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
Dreamweaver do stránky přidá novou značku
Pokud nevidíte obrys ve formě přerušované čáry okolo nové značky 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
Účelem obalové značky 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
127 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 . Není nutné deklarovat šířku, neboť ve výchozím nastavení se blokový element, jako je 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 . Z roletky Identifikátor (ID) vyberte „zahlavi". Pak stiskněte klávesu OK.
131 Integrovaná střední škola polygrafická, Brno, Šmahova 110
Vložením značky < div > s identifikátorem #zahlavi za začátek značky s identifikátorem #obal vnořujete značku dovnitř nadřazeného elementu a váš kód by měl vypadat následovně: Nyní přidejte další dvě značky Sem patří obsah pro id "obsah" , každou do značky 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 . 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
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 , 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 , kterou umístíte do značky 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
Protože jste do elementu 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
Nyní přidejte do značky 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 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 s identifikátorem #nav se vnoří do značky s identifikátorem #zahlavi, ale také - což je důležitější - přímo za značku 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
Ne všechny oblasti s obsahem jsou vnořené do hlavní značky 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
10. V části Všechna pravidla panelu Styly CSS vyberte selektor #banner.V části Vlastnosti změňte hodnotu vlastnosti height z 28 na 200.
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
136 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
Už jste téměř hotoví! Posledními kroky v této časti cvičení je přidání stylované značky
Podobně jako značka s identifikátorem #logo je i značka s identifikátorem #sloupecpravý vnořená do jí nadřazené značky s identifikátorem #obsah. Následuje ji značka 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
139 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
Stejný postup použijte pro vytvoření výplní pro značky 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 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
posunete na místo hned před značku s identifikátorem #obsah, ale první značkou
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 . 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Celý je vybraný a můžete jej zkopírovat, přesunout nebo sbalit. Označovač vedle čísel řádků označuje, že jste vybrali řádky 20-25 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
. Řádky 20-25 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 144 Integrovaná střední škola polygrafická, Brno, Šmahova 110
8. Značku vymažte. 9. Napište . 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 . 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 do externí šablony CSS. Interní šablona stylů bude totiž platit pouze na jedinou stránku. Externí šablonu 145 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
Vytvořili jste layout od úplných základů, na stránku jste přidali množství elementů
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
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
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 lekce08. 2. 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
* 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 „E-mail" a stiskněte klávesu Tab, aniž byste cokoliv napsali.
153 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 „E-mail" 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 „E-mail" a dopište část cz za první část e-mailové 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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Sign In
Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close