TVORBA 5 NAVIGACE 124

5

TVORBA NAVIGACE V této lekci použijete různé druhy odkazů pomocí následujících činností:

 

•

Použijete textový odkaz směřující na stránky v rámci stejného webu

•

Vytvoříte navigační panel

•

Vytvoříte záložkovou navigaci

•

Vytvoříte obrázkový odkaz

•

Vytvoříte odkaz na stránku v rámci jiného webu

•

Upravíte odkaz, aby směřoval na e-mail

Dokončení této lekce vám zabere okolo 60 minut. Než začnete, ujistěte se, že jste zkopírovali složku Lekce ¨ lekce05 a Lekce ¨ SpryAssets z CD přiloženého k této knize na pevný disk ve vašem počítači. Ve složce Lekce umístěte složku lekce3 se soubory lekce a obrázky zkopírujte do složky obrazky. Pokud již ve vaší složce s lekcemi máte složku SpryAssets, nahraďte ji tou, která je na CD.

124

K1671.indd 124

5.5.2009 13:27:25

Dreamweaver zvládá mnoho různých odkazů od hypertextových k odkazům na e-mail, a to s lehkostí a flexibilností.

125

K1671.indd 125

5.5.2009 13:27:25

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 Pokud je třeba, stiskněte klávesu F8, abyste otevřeli panel Soubory (Files), a ze seznamu webových míst zvolte složku DW OVK. 3 V panelu Soubory (Files) rozbalte složku lekce05. 4 Vyberte soubor onas-dokonceno.html a stiskněte klávesu F12 (Windows) nebo Option + F12 (Mac). 5 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. 6 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 (Files) rozbalte složku lekce05 a poklepejte na soubor onas-start.html, čímž soubor otevřete. 2 Zvolte Soubor (File) ¨ Save As (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 (Window) ¨ Vlastnosti (Properties) k otevření tohoto panelu. Když vytváříte odkazy, ujistěte se, že máte v panelu Vlastnosti (Properties) stisknuté tlačítko vpravo od pole Odkaz (Link). Jakmile se HTML. Klepněte na tlačítko Procházet (Browse) zobrazí dialog, najděte složku lekce05 a v ní vyberte soubor kontakt.html. Ujistěte se, že máte

126

K1671.indd 126

LEKCE 5

Tvorba navigace

5.5.2009 13:27:26

v roletce Relativně k (Relative to) zvolenou volbu „Dokument“ (Document). Pak stiskněte tlačítko OK (Windows) nebo Choose (Mac).

G 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 (New CSS Rule) v panelu Styly CSS (CSS Styles). Odkaz tvoří právě značka . Dreamweaver navrhuje volbu „Složený prvek“(Compound selector). 7 Klepněte na Méně specifické (Less Specific) tolikrát, dokud nedostanete selektor „#footer a“. Pak stiskněte tlačítko OK.

p

8 V zobrazeném dialogu vyberte kategorii Typ (Type) a klepněte na paletu barvy a pomocí kapátka zvolte bílou barvu: #FFF. Pak stiskněte tlačítko OK.

ADOBE DREAMWEAVER CS4 OFICIÁLNÍ VÝUKOVÝ KURZ

K1671.indd 127

127

5.5.2009 13:27:26

Text odkazu je nyní bílý. Jakékoli značce zobrazené v zápatí stránky se přidělí pravidlo styly 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 (Files), v němž rozbalte složku lekce05. 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 (Properties) přetáhněte ikonu Ukázat na soubor (Point to File) – najdete ji vpravo od pole Odkaz (Link) – na soubor kontakt.html v panelu Soubory (Files).

11 Pokud složka v panelu Soubory (Files) 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.

128

K1671.indd 128

LEKCE 5

Tvorba navigace

5.5.2009 13:27:26

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 (File) ¨ Uložit vše (Save All). 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 (Properties). K nalezení souboru, na který chcete odkázat, jste použili tlačítko Procházet (Browse). A naučili jste se také, jak využít ikonu Ukázat na soubor (Point to File).

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 nebo adresu URL. 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í, tak, že na něj poklepáte v panelu Soubory (Files). 2 V postranním panelu vyberte obrázek New Yorku. 3 V panelu Vlastnosti (Properties) napište do pole Odkaz (Link) adresu http://mapy.google.cz/ a stiskněte klávesu Enter.

G 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 (Link) v panelu Vlastnosti (Properties).

4 Vyberte Soubor (Files) ¨ Uložit (Save) a použijte tlačítko Živé zobrazení (Live View) nebo stiskněte klávesu F12 (Windows) nebo Option + F12 (Mac), 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í (Live View) 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.

ADOBE DREAMWEAVER CS4 OFICIÁLNÍ VÝUKOVÝ KURZ

K1671.indd 129

129

5.5.2009 13:27:27

G 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 obrázkového odkazu, vložte do šablony mojestyly.css nové pravidlo .twoColFixLtHdr #sidebar1 a img {border: 0;}.

6 Vyberte slova se nachází. V panelu Vlastnosti (Properties) v poli Odkaz (Link) napište http:// mapy.google.cz/. Pak stiskněte klávesu Enter (nebo Return). 7 Zvolte Soubor (File) ¨ Uložit (Save). Vytvořit interní nebo externí odkaz pomocí textu nebo obrázku je v Dreamweaveru velmi jednoduché.

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 Pokud je třeba, otevřete soubor onas.html, s nímž jste pracovali v předchozím cvičení, tak, že na něj poklepáte myší v panelu Soubory (Files). 2 Ukazatel myši umístěte za text o Elaine a stiskněte klávesu Enter (nebo Return), čímž vytvoříte nový odstavec. Napište slova Napište Elaine.

3 Vyberte napsaná slova. 4 V kategorii Běžné (Common) na panelu Vložit (Insert) klepněte na ikonu E-mailový odkaz . (Email Link) 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.

130

K1671.indd 130

LEKCE 5

Tvorba navigace

5.5.2009 13:27:27

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 (Link) v panelu Vlastnosti (Properties). 6 Zvolte Soubor (File) ¨ Uložit (Save). Pokud máte ve svém počítači nainstalovaného e-mailového klienta, použijte tlačítko Živé zobrazení (Live View) nebo stiskněte klávesu F12 a poté klepněte na právě vytvořený e-mailový odkaz. Jakmile se zobrazí okno s novou zprávou, všimněte si pole Komu, v němž je vyplněná 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í (Live View) 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. Pokud chcete zvýšit šanci, že vám bude moci napsat co největší množství uživatelů, pak můžete použít formulář, jenž bude sbírat komentáře a náměty od návštěvníků vašich stránek (viz lekce 8, v níž se naučíte vytvářet formuláře).

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 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 tím, že na něj poklepáte v panelu Soubory (Files). 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 (Windows) nebo Return (Mac), abyste vytvořili nový odstavec. 3 Napište Prohlédněte si doporučované hotely. 4 Vyberte slova doporučované hotely. V panelu Vlastnosti (Properties) napište do pole Odkaz (Link) #hotely a stiskněte klávesu Enter (nebo Return).

ADOBE DREAMWEAVER CS4 OFICIÁLNÍ VÝUKOVÝ KURZ

K1671.indd 131

131

5.5.2009 13:27:27

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 (File) ¨ Uložit (Save). Použijte tlačítko Živé zobrazení (Live View) 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í.

Naučte se používat Ajax 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 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.

132

K1671.indd 132

LEKCE 5

Tvorba navigace

5.5.2009 13:27:28

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. S touto sadou budete pracovat v lekci 6.

•

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. S touto sadou budete pracovat v lekci 8.

•

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ů a akordeonů (skládaček). S nástrojem pro tvorbu záložkových panelů a nabídkových panelů budete pracovat později v této lekci. V lekci 6 pak budete pracovat se skládačkami.

•

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.

Pokud budete chtít proniknout do podstaty frameworku Spry a zjistit, jak funguje, navštivte Adobe Labs na adrese http://labs.adobe.com/technologies/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

ADOBE DREAMWEAVER CS4 OFICIÁLNÍ VÝUKOVÝ KURZ

K1671.indd 133

133

5.5.2009 13:27:28

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 Pokud je třeba, otevřete soubor onas.html poklepáním na jeho název v panelu Soubory (Files). 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 (nebo Return) k vytvoření prázdného řádku před obrázkem.

3 V kategorii Spry v panelu Vložit (Insert) klepněte na ikonu Spry pruh nabídek (Spry Menu Bar).

4 Ve stejnojmenném dialogu vyberte volbu „Svisle“ (Vertical) 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.

134

K1671.indd 134

LEKCE 5

Tvorba navigace

5.5.2009 13:27:28

6 Než nabídku upravíte, zvolte Soubor (File) ¨ Uložit (Save). 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 (Properties) 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. název nabídky

přidat smazat

Posun nahoru/dolů

Text tlačítka

Prozkoumat

Texty tlačítek hlavní úrovně nabídky

Texty tlačítek ve 2. úrovni

Texty tlačítek ve 3. úrovni

7 Vyberte položku „Položka 1“ (Item 1) v seznamu tlačítek v hlavní úrovni nabídky. Poté v poli Text napište Úvodem a níže v poli Odkaz (Link) vymažte znak mřížky a napište index.html. Vymažte položky „Položka 1.1“ (Item 1.1), „Položka 1.2“ (Item 1.2) a „Položka 1.3“ (Item 1.3) tak, že klepnete na ikonu minus nad seznamem tlačítek ve druhé úrovni nabídky. 8 Vyberte položku „Položka 2“ (Item 2) v seznamu tlačítek v hlavní úrovni nabídky. Poté v poli Text napište Itálie a níže v poli Odkaz (Link) 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 (Link) vymažte znak mřížky a napište umbria.html. G 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.

ADOBE DREAMWEAVER CS4 OFICIÁLNÍ VÝUKOVÝ KURZ

K1671.indd 135

135

5.5.2009 13:27:28

9 Vyberte položku „Položka 3“ (Item 3). Poté v poli Text napište Řecko a pole Odkaz (Link) nechte, jak je. Vyberte položku „Položka 3.1“ (Item 3.1). Do pole Text napište Santorini a níže do pole Odkaz (Link) vložte místo znaku mřížky santorini.html. 10 Vyberte položku „Položka 3.2“ (Item 3.2). Do pole Text napište Naxos a níže do pole Odkaz (Link) vložte místo znaku mřížky naxos.html. Vymažte položku „Položka 3.3“ (Item 3.3) tak, že ji vyberete a poté klepnete na ikonu se znakem minus. 11 Vyberte položku „Položka 4“ (Item 4). Do pole Text napište O nás. V poli Link napište onas. html.

12 Klepněte 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 (Link) napište kontakt.html. 13 Zvolte Soubor (File) ¨ Uložit (Save). Dokončené odkazy se zobrazí v okně dokumentu.

Jestliže se vám zobrazuje některá z podnabídek otevřená, pak klepnětě v panelu Vlastnosti (Properties) 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 (Properties) klepněte na tlačítko Vypnout styly (Turn Styles Off). V dokumentu nyní vidíte nestylovaný seznam, který jste právě vytvořili pomocí panelu Vlastnosti (Properties). Možná zjistíte, že se vám lépe pracuje v dokumentu než v panelu Vlastnosti (Properties). Klepnutím na tlačítko

136

K1671.indd 136

LEKCE 5

Tvorba navigace

5.5.2009 13:27:28

Vypnout styly (Turn Styles Off) 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. G 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 (Properties) klepněte na tlačítko Zapnout styly (Turn Styles On), čímž seznamu vrátíte styly. 16 Zvolte Soubor (File) ¨ Uložit (Save). 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. Jak na šablony Dreamweaveru, položky knihovny a řešení na straně serveru se naučíte v lekci 10, jež vám poskytne množství jednoduše proveditelných postupů, jak přidat nové navigační nabídky do každé stránky.

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 (CSS Styles) sjeďte v seznamu stylů níže, až najdete soubor SpryMenuBarVertical. css, který rozbalte. Buďte opatrní, abyste nevybrali soubor SpryMenuBarVertical-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. 2 V části Všechna pravidla (All Rules) vyberte selektor ul.MenuBarVerticala. Pravidlo s tím selektorem 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 (CSS Styles), takže se objeví část Vlastnosti (Properties). V této části klepněte na paletu barev u vlastnosti background-color a použijte kapátko k výběru světle

ADOBE DREAMWEAVER CS4 OFICIÁLNÍ VÝUKOVÝ KURZ

K1671.indd 137

137

5.5.2009 13:27:29

žluté barvy s kódem #FF0. Poté klepněte na paletu barev u vlastnosti color a kapátkem vyberte tmavě modrou barvu s kódem #00C. Stiskněte klávesu Enter (nebo Return).

3 V části Všechna pravidla (All rules) vyberte selektor ul.MenuBarVertical ul li. Pravidlo s tímto selektorem ovlivňuje šířka podnabídek. V části Vlastnosti (Properties) 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á.

138

K1671.indd 138

LEKCE 5

Tvorba navigace

5.5.2009 13:27:29

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

5 Vyberte kategorii Rámeček (Box) a do pole Width (šířka) napište 200. 6 Vyberte kategorii Okraj (Border). Zrušte zatržení volby „Stejné pro všechny“ (Same for all) v částech Style (styl), Width (šířka) a Color (barva). V části Style napište 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.

ADOBE DREAMWEAVER CS4 OFICIÁLNÍ VÝUKOVÝ KURZ

K1671.indd 139

139

5.5.2009 13:27:29

7 Zvolte Soubor (File) ¨ Uložit vše (Save All). 8 Použijte tlačítko Živé zobrazení (Live View) 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. G Poznámka: Pokud budete chtít změnit polohu vyskakující podnabídky, upravte hodnotu vlastnosti 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. margin v pravidle se selektorem ul.MenuBarVertical

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 Pokud je třeba, otevřete onas.html poklepáním na jeho název v panelu Soubory (Files). 2 Klepněte za úvodní odstavec na stránce, takže sem vložíte ukazatel myši, a poté stiskněte klávesu Enter (nebo Return), 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 (Insert) klepněte na ikonu Spry panel se záložkami.

140

K1671.indd 140

LEKCE 5

Tvorba navigace

5.5.2009 13:27:30

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.

G 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 (Properties), 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 (+). Název panelu

Přidat/odstranit panely

Posunutí panelů

Název záložky

Panel otevírající se, když se stránka načte

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“ (Tab 1) a napište Elaine.

6 Vyberte text Obsah 1 (Content 1), abyste mohli text smazat pomocí klávesy Delete.

ADOBE DREAMWEAVER CS4 OFICIÁLNÍ VÝUKOVÝ KURZ

K1671.indd 141

141

5.5.2009 13:27:30

7 Ukazatel myši umístěte kamkoliv do profilu Elaine. Pak ze selektoru značek vyberte , abyste vybrali celou značku

.

8 Zvolte Upravit (Edit) ¨ Vyjmout (Cut) nebo použijte klávesovou zkratku Ctrl + X (Windows) či Command + X (Mac). 9 Ukazatel myši umístěte opět do prázdné oblasti v obsahové části panelu. Zvolte Upravit (Edit) ¨ Vložit (Paste) nebo použijte klávesové zkratky Ctrl + V (Windows) či Command + V (Mac).

Značka s popisem Elaine se nyní zobrazuje jako obsah první záložky. Protože informace o Elaine byly vyjmuty z předchozího umístění, profil Lindy se posunul nahoru a do strany. 10 Zopakujte kroky 5 až 9, abyste změnili názvy záložek s profilem Lindy, Jasona, Lin a Charlieho. A zároveň vyjměte z jejich profilů elementy a vložte je do obsahové části v jednotlivých záložkách. Jakmile skončíte, použijte ikonu oka, abyste si prohlédli obsah všech

142

K1671.indd 142

LEKCE 5

Tvorba navigace

5.5.2009 13:27:30

záložek. Pokud budete chtít přidat nějaký další obsah nebo stávající upravit, najděte odpovídající obsah pomocí ikon s okem.

11 Zvolte Soubor (File) ¨ Uložit (Save). 12 Použijte tlačítko Živé zobrazení (Live View) nebo váš prohlížeč, abyste vyzkoušeli, jak záložky fungují. Pak se vraťte zpět stisknutím tlačítka Živé zobrazení nebo zavřením okna prohlížeče do Dreamweaveru.

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.

ADOBE DREAMWEAVER CS4 OFICIÁLNÍ VÝUKOVÝ KURZ

K1671.indd 143

143

5.5.2009 13:27:31

Pravidly CSS, jimiž jste změnili v souboru SpryTabedPanel.css barvu ovládacího prvku na modrou, jsou .TabbedPanelsTab, .TabbedPanelsTabHover, .TabbedPanelsTabSelected a .TabbedPanelsContentGroup.

Kontrola vaší stránky Dreamweaver automaticky kontroluje stránku, zda je kompatibilní s prohlížeči, zda je přístupná a zda všechny odkazy fungují. V tomto cvičení zkontrolujete vaše odkazy a naučíte se, co můžete udělat v případě problému s kompatibilitou prohlížeče. 1 Pokud je třeba, otevřete soubor onas.html poklepáním na jeho název v panelu Soubory (Files).

2 Zvolte Soubor (File) ¨ Zkontrolovat stránku (Check Page) ¨ Odkazy (Links). Otevře se panel Kontrola odkazů (Link Checker). Tento panel hlásí, že v souboru index. html se nachází nefunkční odkaz. Cílovou stránku vytvoříte v lekci 9, takže se nyní nemusíte

o opravu starat. Kontrola odkazů taktéž najde odkazy na externí stránky, pokud nějaké jsou. 3 Poklepejte na záložku Kontrola odkazů, čímž se panel zavře. 4 Zvolte Soubor (File) ¨ Zkontrolovat stránky (Check Page) ¨ Kompatibilita s prohlížečem (Browser Compatiblity). Otevře se panel Kompatibilní prohlížeče (Browser Compatibility). Dreamweaver odhalí množství problémů s kompatibilitou, problémem ale je, že jeden problém nastává na více místech – kde vznikl problém, můžete vidět na výčtu jednotlivých řádků kódu. Naštěstí je Adobe.com připraveno pomoci vám řešit problém pomocí Page Check operation. 5 Vyberte název problému, a to kterýkoli z nich. 6 Jakmile máte název problému vybraný, klepněte na ikonu Více informací (More Info) sloupci nalevo. 144

K1671.indd 144

LEKCE 5

ve

Tvorba navigace

5.5.2009 13:27:31

Zobrazí se stránka Adobe.com. Na této stránce je problém vysvětlen a je vám také nabídnuto řešení, které můžete implementovat do vaší stránky v Dreamweaveru. Některé navrhované opravy jsou určeny určitým prohlížečům nebo zařízením, které nevyužíváte. V takových případech tyto rady prostě ignorujte. Dokud nebude stránka publikovaná na Internetu, nebudeme se jimi vůbec zabývat.

G Poznámka: Můžete zkontrolovat, zda se na vaší straně nevyskytují některé další problémy, a to

pomocí Web (Site) ¨ Zprávy (Reports). Tyto zprávy se hodí, protože uvádějí problémy, jako je chybějící titulek stránky nebo chybějící alternativní text u obrázku, který jste přehlédli.

7 Zavřete prohlížeč a vraťte se do Dreamweaveru. 8 Poklepejte na záložku Kompatibilní prohlížeče (Browser Compatibility). Co se týče vzhledu stránek, provedli jste v této lekci velké změny. Přidali jste navigační nabídku a vytvořili odkazy na specifická místa na stránce, na e-mail a na externí stránky. Taktéž jste vytvořili odkaz používající obrázek jako oblast, na kterou se dá klepnout myší, a přeuspořádali jste obsah stránky do Spry panelů se záložkami. A nakonec jste zkontrolovali, zda na stránce nejsou nefunkční odkazy nebo zda nevykazuje problémy s kompatibilitou s prohlížeči. ADOBE DREAMWEAVER CS4 OFICIÁLNÍ VÝUKOVÝ KURZ

K1671.indd 145

145

5.5.2009 13:27:31

Opakování Otázky 1 Popište dva způsoby, jimiž vložíte odkaz do stránky. 2 Jaké informace se požadují k vytvoření odkazu na externí webovou stránku? 3 Jaký je rozdíl mezi standardními odkazy stránky a odkazy na e-mail? 4 Jaké výhody přináší použití ovládacího prvku Spry pruh nabídek? 5 Jaké jsou výhody použití ovládacího prvku Spry panely se záložkami.

Odpovědi 1 Vyberte text nebo grafiku; poté v panelu Vlastnosti (Properties) klepněte na ikonu Ukázat na soubor (Point to File) vedle pole Odkaz (Link) a zvolení požadované stránky. Druhou metodou je přetažení této ikony do panelu Soubory (Files) na požadovaný soubor. 2 Odkaz na externí stránku vyžaduje napsání nebo zkopírování a vložení plné webové adresy (celé adresy URL) v poli Odkaz (Link) v panelu Vlastnosti (Properties). 3 Standardní odkaz otevírá novou stránku nebo přesunuje na jiné místo na téže stránce. Odkaz na e-mail otevírá prázdné okno se zprávou, pokud má uživatel ve svém počítači nainstalovaného poštovního klienta. 4 Poskytuje pravidla stylů, která za vás zajistí stylování seznamu do podoby svislé nebo vodorovné navigační nabídky. Zajistí pro vás všechnu práci, kterou byste měli se psaním kódu v JavaScriptu, aby se zobrazily potřebné podnabídky. 5 Ovládací prvek Spry panely se záložkami organizuje různé informace do kompaktního, záložkového vzhledu.

146

K1671.indd 146

LEKCE 5

Tvorba navigace

5.5.2009 13:27:32