TVORBA 5 NAVIGACE 124
|
|
- Bohuslav Ludvík Hruda
- před 8 lety
- Počet zobrazení:
Transkript
1 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 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
2 Dreamweaver zvládá mnoho různých odkazů od hypertextových k odkazům na , a to s lehkostí a flexibilností. 125
3 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 ového klienta, klepněte na odkazy s ovými adresami jednotlivých pracovníků. Jakmile se zobrazí okno pro novou zprávu, zavřete jej. Stránka obsahuje odkazy na stránky v rámci jednoho webu, stejně tak jako odkazy na externí stránky a ové adresy. 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 HTML. Klepněte na tlačítko Procházet (Browse) vpravo od pole Odkaz (Link). Jakmile se zobrazí dialog, najděte složku lekce05 a v ní vyberte soubor kontakt.html. Ujistěte se, že máte 126 LEKCE 5 Tvorba navigace
4 v roletce Relativně k (Relative to) zvolenou volbu Dokument (Document). Pak stiskněte tlačítko OK (Windows) nebo Choose (Mac). Poznámka: Některé webové servery mohou pracovat s odkazy, které jsou relativní ke kořenové složce webu spíše než k danému dokumentu. Jestliže si nejste jisti, jak váš server v tomto ohledu funguje, zvolte raději volbu Dokument. 5 Klepněte kamkoliv do okna dokumentu, abyste zrušili výběr textu odkazu. Výchozím formátováním odkazů je modrý text s modrým podtržením. Proto je text nově vytvořeného odkazu formátovaný modře na modrém pozadí. To lze změnit a zvýšit tak jeho čitelnost. 6 V selektoru značek vyberte <a> a klepněte na ikonu Nové pravidlo CSS (New CSS Rule) v panelu Styly CSS (CSS Styles). Odkaz tvoří právě značka <a>. Dreamweaver navrhuje volbu Složený prvek (Compound selector). 7 Klepněte na Méně specifické (Less Specific) tolikrát, dokud nedostanete selektor #footer p a. Pak stiskněte tlačítko OK. 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 127
5 Text odkazu je nyní bílý. Jakékoli značce <a> 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 LEKCE 5 Tvorba navigace
6 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 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 (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 129
7 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 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 ovou adresu Jiným oblíbeným typem odkazu je odkaz na . Jakmile na něj uživatel klepne, zobrazí se okno s novou zprávou a vyplněnou ovou adresou, což je vhodné, pokud chcete získat rychlou zpětnou vazbu například od svých zákazníků. Kód se odlišuje od standardního odkazu na stránce. Dreamweaver dokáže automaticky vytvořit správný kód pro jakýkoli odkaz na . 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 ový odkaz ( 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 napište elaine@mojeadresa.cz. Pak stiskněte tlačítko OK. 130 LEKCE 5 Tvorba navigace
8 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 ové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ý ový odkaz. Jakmile se zobrazí okno s novou zprávou, všimněte si pole Komu, v němž je vyplněná ová adresa zadaná v Dreamweaveru. 7 Zavřete jak okno se zprávou, tak okno prohlížeče nebo stiskněte tlačítko Živé zobrazení (Live View) a vraťte se do Dreamweaveru. Funkce textového odkazu je závislá na existenci ového klienta instalovaného v počítači uživatele, jako je třeba Outlook či Thunderbird. Odkaz nebude fungovat, pokud uživatel používá k odesílání ů službu na Internetu, jako je třeba Seznam nebo Gmail. 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 131
9 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 LEKCE 5 Tvorba navigace
10 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 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 133
11 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 LEKCE 5 Tvorba navigace
12 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. 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 135
13 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 Vy pnout 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 LEKCE 5 Tvorba navigace
14 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. 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 <a>. 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 137
15 ž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 LEKCE 5 Tvorba navigace
16 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 styl (Edit Rule). Zobrazí se dialog pro úpravu stylu. 5 Vyberte kategorii Rámeček (Box) a do pole Width (šířka) napište 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 139
17 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. Poznámka: Pokud budete chtít změnit polohu vyskakující podnabídky, upravte hodnotu vlastnosti margin v pravidle se selektorem ul.menubarvertical ul. Namísto barvy pozadí byste mohli použít obrázek na pozadí, a to úpravou pravidel pro značku <a>, včetně pravidla se selektorem ul.menubarvertical a.menubaritemhover. 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 LEKCE 5 Tvorba navigace
18 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. 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 141
19 7 Ukazatel myši umístěte kamkoliv do profilu Elaine. Pak ze selektoru značek vyberte <div.profil>, abyste vybrali celou značku <div>. 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 <div.profil> s popisem Elaine se nyní zobrazuje jako obsah první záložky. Protože informace o Elaine byly vyjmuty z předchozího umístění, profil Lindy se posunul nahoru a do strany. 10 Zopakujte kroky 5 až 9, abyste změnili názvy záložek s profilem Lindy, Jasona, Lin a Charlieho. A zároveň vyjměte z jejich profilů elementy <div.profil> 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 LEKCE 5 Tvorba navigace
20 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 143
21 Pravidly CSS, jimiž jste změnili v souboru SpryTabedPanel.css barvu ovládacího prvku na modrou, jsou.tabbedpanelstab,.tabbedpanelstabhover,.tabbedpanelstabselected a.tabbed- PanelsContentGroup. 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 pro blé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) ve sloupci nalevo. 144 LEKCE 5 Tvorba navigace
Zemětřesení a sopečná činnost
Zemětřesení a sopečná činnost V tomto cvičení vytvoříte interaktivní webovou mapu, která bude zobrazovat výskyt zemětřesení a sopečné činnosti a dávat je do souvislosti s hranicemi litosférických desek.
VíceFormuláře. Téma 3.2. Řešený příklad č Zadání: V databázi formulare_a_sestavy.accdb vytvořte formulář pro tabulku student.
Téma 3.2 Formuláře Formuláře usnadňují zadávání, zobrazování, upravování nebo odstraňování dat z tabulky nebo z výsledku dotazu. Do formuláře lze vybrat jen určitá pole z tabulky, která obsahuje mnoho
VíceSestavy. Téma 3.3. Řešený příklad č Zadání: V databázi zkevidence.accdb vytvořte sestavu, odpovídající níže uvedenému obrázku.
Téma 3.3 Sestavy Sestavy slouží k výstupu informací na tiskárnu. Tisknout lze také formuláře, ale v sestavách má uživatel více možností pro vytváření sumárních údajů. Pokud všechna pole, která mají být
VíceWEBOVÉ STRÁNKY
WEBOVÉ STRÁNKY www.krestanskevanoce.cz Domovská stránka Křesťanských Vánoc je založena na databázi, která vedle běžných funkcí redakčního systému internetové prezentace umožňuje též uložit údaje o jednotlivých
VíceModul 6. Multimediální prezentace
Multimediální prezentace Obsah MODUL 6... 1 MULTIMEDIÁLNÍ PREZENTACE... 1 Obsah... 3 Úvod... 3 POWER POINT 2003... 3 POSTUP PRÁCE NA PREZENTACI... 3 Šablona návrh... 4 Rozložení snímku... 4 Prohlížení
Více1. VSTUP do e-learningu
! 1 1. VSTUP do e-learningu Při vstupu na stránky klikněte na tlačítko PRO STUDENTY zde kliknete a vyberete si - E-learning. Otevře se stránka, zde vidíte obrázky učebnic s názvy jazyků. Vpravo je modrý
VícePřipojení ke vzdálené aplikaci Target 2100
Připojení ke vzdálené aplikaci Target 2100 Pro úspěšné připojení ke vzdálené aplikaci Target 2100 je nutné připojovat se ze stanice s Windows XP SP3, Windows Vista SP1 nebo Windows 7. Žádná VPN není potřeba,
VícePoužití Office 365 na iphonu nebo ipadu
Použití Office 365 na iphonu nebo ipadu Úvodní příručka Kontrola e-mailů iphone nebo ipad si můžete nastavit tak, aby odesílal a přijímal poštu z vašeho účtu Office 365. Kontrola kalendáře z libovolného
VíceWEBOVÉ STRÁNKY www.krestanskevanoce.cz
WEBOVÉ STRÁNKY www.krestanskevanoce.cz Domovská stránka Křesťanských Vánoc je založena na databázi, která vedle běžných funkcí redakčního systému internetové prezentace umožňuje též uložit údaje o jednotlivých
VíceMísto úvodu. Čeho se vyvarovat. Mazání znaků
Místo úvodu Proč používat program pro psaní a úpravy textu? Můžete v něm snadno nejenom psát, ale i opravovat libovolné části textu. Přitom ovládání programu vychází z práce v prostředí Windows (práce
VícePrvní kroky s aplikací ActivInspire
První kroky s aplikací ActivInspire Výukový program 1 Otevření předváděcího sešitu 1. Klikněte na tlačítko Hlavní nabídka. 2. Klikněte na položku Soubor. 3. Klikněte na položku Otevřít. 4. Vyhledejte umístění
VíceÚvodní příručka. Správa souborů Kliknutím na kartu Soubor můžete otevřít, uložit, vytisknout a spravovat své soubory Wordu.
Úvodní příručka Microsoft Word 2013 vypadá jinak než ve starších verzích, proto jsme vytvořili tuto příručku, která vám pomůže se s ním rychle seznámit. Panel nástrojů Rychlý přístup Příkazy tady umístěné
VíceGoogle Apps. kontakty. verze 2011
Google Apps kontakty verze 0 Obsah Obsah... Úvod... Popis prostředí... Přidání kontaktu mezi Moje kontakty... Výběr ze skupiny Všechny kontakty... Ruční přidání kontaktu... Import kontaktů... Úprava kontaktu...
Více1. Obsah. 2. Úvod. 1. Obsah... 1. 2. Úvod... 1. 3. Přihlášení... 2. 4. Přizpůsobení prostoru... 3. 5. Sdílení fotografií... 5. 6. Moduly...
1. Obsah 1. Obsah... 1 2. Úvod... 1 3. Přihlášení... 2 4. Přizpůsobení prostoru... 3 5. Sdílení fotografií... 5 6. Moduly... 11 7. Popis některých modulů... 12 8. Rozložení modulů... 14 2. Úvod Vlastní
VíceMicrosoft Visio 2013 vypadá jinak než ve starších verzích, proto jsme vytvořili tuto příručku, která vám pomůže se s ním rychle seznámit.
Úvodní příručka Microsoft Visio 2013 vypadá jinak než ve starších verzích, proto jsme vytvořili tuto příručku, která vám pomůže se s ním rychle seznámit. Aktualizované šablony Šablony vám pomáhají při
Více1. Začínáme s FrontPage 2003 11
Úvod 9 1. Začínáme s FrontPage 2003 11 Instalace programu 12 Spuštění a ukončení programu 15 Základní ovládání 16 Hledání souborů 30 Najít a nahradit 31 Tisk 32 Schránka sady Office 34 Nápověda 36 Varianty
Vícesloučení dokumentů Zadání: TÉMA: Sledování změn a komentářů, revize, porovnání dokumentů,
TÉMA: Sledování změn a komentářů, revize, porovnání dokumentů, sloučení dokumentů Sekretářka společnosti Naše Zahrada napsala článek věnovaný kompostování a nechala jej zkontrolovat majitelce společnosti.
VíceAdministrace webu Postup při práci
Administrace webu Postup při práci Obsah Úvod... 2 Hlavní menu... 3 a. Newslettery... 3 b. Administrátoři... 3 c. Editor stránek... 4 d. Kategorie... 4 e. Novinky... 5 f. Produkty... 5 g. Odhlásit se...
Více3 Formuláře a sestavy Příklad 1 Access 2007
TÉMA: Vytváření formulářů Správce databáze Naše zahrada předpokládá, že bude s vytvořenou databází pracovat více uživatelů. Je třeba proto navrhnout a vytvořit formuláře pro přístup k datům. Zadání: Otevřete
VícePoužívání u a Internetu
Používání e-mailu a Internetu Je pro vás systém Windows 7 nový? I když má tento systém mnoho společného s verzí systému Windows, kterou jste používali dříve, můžete potřebovat pomoc, než se v něm zorientujete.
VíceModul 2. Druhá sada úkolů:
Zadání Druhá sada úkolů: Modul 2 Všechny potřebné složky a soubory pro splnění následující sady úkolů se nachází ve složce sada2. 1. Ve složce Ulohy vytvořte šest nových složek (podle obrázku) a pojmenujte
VíceZMODO NVR KIT. Instalační příručka
ZMODO NVR KIT Instalační příručka KROK 1 1. Zkontrolujte si obsah balení ZMODO NVR Kitu: NVR server 4 x IP kamera Napájecí adaptéry pro IP kamery LAN kabel CD se softwarem Příručka ( ke stažení na www.umax.cz)
VíceManuál k editoru TinyMCE
Manuál k editoru TinyMCE Popis ovládacích prvků UPOZORNĚNÍ: Některé tlačítka nemusí být k dispozici. Styl písma Dolní a horní index Zarovnání textu Může se aplikovat na označený text. B - tučné písmo,
VíceSpisová služba Řešení problémů při připojení klienta k webové službě
Řešení problémů při připojení klienta k webové službě 1. Úvod Dokument popisuje kroky, které je třeba provést v okamžiku, kdy po pokusu o přihlášení do Spisové služby dojde k následující chybě: Dokument
VícePráce se soubory a složkami
Práce se soubory a složkami Co jsou soubory a složky? Soubor je něco jako vytištěný dokument, jaký můžete najít na svém psacím stole nebo v deskách. Mezi příklady souborů v počítači patří textové dokumenty,
VícePRACUJEME S TSRM. Modul Samoobsluha
PRACUJEME S TSRM Modul Samoobsluha V této kapitole Tato kapitola obsahuje následující témata: Téma Na straně Přehled kapitoly 6-1 Užití modulu Samoobsluha 6-2 Přihlášení k systému 6-3 Hlavní nabídka TSRM
VíceINFORMAČNÍ A KOMUNIKAČNÍ TECHNOLOGIE -ADOBE DREAMWEAVER-
Název projektu: Registrační číslo projektu: Zlepšení podmínek pro využívání ICT ve výuce CZ.1.07/1.1.02/01.0135 INFORMAČNÍ A KOMUNIKAČNÍ TECHNOLOGIE -ADOBE DREAMWEAVER- Zpracoval: Ing. David Adamovský
VíceSTRUČNÝ PŘEHLED MS OFFICE 2007 ANEB CO JE NOVÉHO
STRUČNÝ PŘEHLED MS OFFICE 2007 ANEB CO JE NOVÉHO Obsah MS WORD... 1 Pás karet... 1 Co je na pásu karet... 1 Ikony pro otevření dialogových oken ve skupinách... 2 Zobrazení dalších karet... 2 Minipanel
VíceVYÚČTOVÁNÍ DANĚ ZE ZÁVISLÉ ČINNOSTI, SRÁŽKOVÉ DAŃE
, VYÚČTOVÁNÍ DANĚ ZE ZÁVISLÉ ČINNOSTI, SRÁŽKOVÉ DAŃE Návod lze analogicky použít i pro ostatní podání na Českou daňovou správu (DPH, výpis z evidence 92, souhrnné hlášení, ). 1) Postavte se do firmy roku,
VíceABRA Software a.s. ABRA on- line
ABRA Software a.s. ABRA online ÚVOD 2 2.1 ABRA on-line - úvod 1 ČÁST 1 2 1.1 ABRA on-line - připojení do vzdálené aplikace z prostředí OS MS Windows 1 ČÁST 2 11 2.1 ABRA on-line - připojení do vzdálené
VíceWEBOVÉ STRÁNKY WWW.NOCKOSTELU.CZ
WEBOVÉ STRÁNKY WWW.NOCKOSTELU.CZ Zpracováno na základě podkladů poskytnutých organizátory akce Lange Nacht der Kirchen, Rakousko. Domovská stránka Noci kostelů je založena na databázi, která vedle běžných
VíceGoogle Apps. weby 1. verze 2012
Google Apps weby verze 0 Obsah Obsah... Úvod... Zahájení práce... Nastavení webu... Úprava stránky... Popis prostředí... Rozložení stránky... Nadpis stránky... Úprava textu... Vložení odkazu... 8 Vložení
VíceSpuštění a ukončení databázové aplikace Access
Spuštění a ukončení databázové aplikace Access Aplikaci Access spustíte tak, že vyhledáte její ikonu v nabídce "Start" a klepnete na ní. Najdete ho v Sekci Všechny programy/mircosoft Office. Po výběru
VíceKapitola 1 První kroky v tvorbě miniaplikací 11
Obsah Úvodem 9 Komu je kniha určena 9 Kapitola 1 První kroky v tvorbě miniaplikací 11 Co je to Postranní panel systému Windows a jak funguje 12 Co je potřeba vědět před programováním miniaplikací 16 Vaše
VíceUživatelská příručka 6.A6. (obr.1.)
Uživatelská příručka 6.A6 Na stránky se dostanete zadáním URL adresy: http://sestasest.tym.cz do vašeho prohlížeče. Teď jste se dostali na úvodní stránku, na které vidíte fotku, přivítání, odkaz na Uživatelskou
VíceSnadná úprava stránek, nemusím umět HTML, tvořím obsah téměř jako ve Wordu. Jak změnit obsah nástěnky: vpravo nahoře Nastavení zobrazených informací
Školení Wordpress Nainstalované pluginy: WPML Multilingual CMS Adminize Capability Manager Contact Form 7 Wordpress Download Monitor Google Analytics for WordPress Simple Google Sitemap XML Seznámení s
VícePRÁCE S TEXTOVÝM EDITOREM 6.4 TEXTOVÉ POLE
6.4 TEXTOVÉ POLE Při tvorbě dokumentů je někdy třeba vkládat texty do rámců, kterým říkáme Textová pole. Tato textová pole, ale nemusí mít vždy pravidelný tvar (obdélník). Pomocí textových polí můžeme
Více3 Formuláře a sestavy Příklad 1 Access 2010
TÉMA: Vytváření formulářů Správce databáze Naše zahrada předpokládá, že bude s vytvořenou databází pracovat více uživatelů. Je třeba proto navrhnout a vytvořit formuláře pro přístup k datům. Zadání: Otevřete
VíceÚvod do email systému
Úvod do email systému Základní informace Toto emailové prostředí je rozloženo do tří hlavních částí - rámců. Levý rámec zobrazuje aktuálně přihlášené složky. V pravé části strany se realizuje veškerá činnost
VíceWebové stránky. 4. Tvorba základní HTML webové stránky. Datum vytvoření: 25. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.
Webové stránky 4. Tvorba základní HTML Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 25. 9. 2012 Webové Strana: 1/9 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická
VíceZADÁNÍ: Informatika B Příklad 10 MS Access. TÉMA: Formuláře. OPF v Karviné, Slezská univerzita v Opavě. Ing. Kateřina Slaninová
TÉMA: Formuláře Sekretářka společnosti Naše zahrada, a.s. předpokládá, že bude s vytvořenou databází pracovat více uživatelů. Je třeba proto navrhnout a vytvořit formuláře pro přístup k datům. ZADÁNÍ:
VíceProzkoumání příkazů na pásu karet Každá karta na pásu karet obsahuje skupiny a každá skupina obsahuje sadu souvisejících příkazů.
Úvodní příručka Microsoft Excel 2013 vypadá jinak než ve starších verzích, proto jsme vytvořili tuto příručku, která vám pomůže se s ním rychle seznámit. Přidání příkazů na panel nástrojů Rychlý přístup
VíceGrafický návrh. Co se naučíte. Vítá vás aplikace CorelDRAW, komplexní profesionální program pro grafický návrh a práci s vektorovou grafikou.
Grafický návrh Vítá vás aplikace CorelDRAW, komplexní profesionální program pro grafický návrh a práci s vektorovou grafikou. V tomto kurzu vytvoříte plakát propagující smyšlenou kavárnu. Výsledný návrh
Vícez aplikace Access 2003
V tomto průvodci Microsoft Aplikace Microsoft Access 2010 vypadá velmi odlišně od aplikace Access 2003, a proto jsme vytvořili tohoto průvodce, který vám pomůže se s ní rychle seznámit. Dozvíte se o klíčových
Více1 Tabulky Příklad 3 Access 2010
TÉMA: Vytvoření tabulky v návrhovém zobrazení Pro společnost Naše zahrada je třeba vytvořit databázi pro evidenci objednávek o konkrétní struktuře tabulek. Do databáze je potřeba ještě přidat tabulku Platby,
Více1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce.
2. lekce Čtení dokumentů 1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce. 3. Přecházení mezi stránkami v dokumentu:
VíceManuál k tvorbě absolventské práce
Manuál k tvorbě absolventské práce VLOŽENÍ ČÍSLA STRÁNKY... 2 OBRÁZKOVÝ NÁVOD PRO VKLÁDÁNÍ ČÍSEL STRÁNEK... 2 ŘÁDKOVÁNÍ 1,5... 3 OBRÁZKOVÝ NÁVOD PRO ŘÁDKOVÁNÍ... 3 ZAROVNÁNÍ TEXTU DO BLOKU... 4 OBRÁZKOVÝ
VíceJak přizpůsobit logo stránky na prázdném formuláři
Jak přizpůsobit logo stránky na prázdném formuláři Pro hodnotitele: Gold INGOT Celek 2 Užitečný návod naleznete také zde. Přizpůsobení loga stránky Svou stránku můžete přizpůsobit tím, že k ní přidáte
VíceManuál k administraci
Manuál k administraci webových stránek WeWeb WeWeb řešení pro každého WeWeb řešení pro každého V tomto podrobném návodu se dozvíte, jakým způsobem upravovat vaše webové stránky, pomocí administračního
VíceInternetové technologie, cvičení č. 5
Internetové technologie, cvičení č. 5 Náplň cvičení Obsahem 5. cvičení předmětu Internetové technologie je ukázka a procvičení XHTML značek a atributů používaných při vytváření hypertextových odkazů a
VíceMS Excel 3: Pokročilý kurz
MS Excel 3: Pokročilý kurz Materiály ke kurzu Lektor: Jiří Benedikt 09.10.17 www.jiribenedikt.com 1 Úvod Dobrý den, jsem rád, že jste se rozhodli se vzdělávat a věřím, že se v Excelu brzy stanete profíkem!
Více742 Jak prohlížet seznam dat pomocí formuláře. další záznamy pomocí formuláře
Formuláře 742 Jak prohlížet seznam dat pomocí formuláře pokročilý Pokud si přejete prohlížet seznam dat po jednotlivých záznamech ve formulářovém zobrazení, pak postupujte takto: Klepněte myší kamkoliv
VíceJak spravovat stránku
Jak spravovat stránku Pro hodnotitele: Gold INGOT Celek 2 Krok 1. Tento postup slouží k ilustraci, jak efektivně řídit vaše stránky. Nejprve se přihlašte do vašeho Gmail účtu a přejděte na stránky Google.
VíceVýkresy. Projekt SIPVZ D Modelování v SolidWorks. Autor: ing. Laďka Krejčí
Výkresy Projekt SIPVZ 2006 3D Modelování v SolidWorks Autor: ing. Laďka Krejčí 2 Obsah úlohy Otevření šablony výkresu Vlastnosti, úprava a uložení formátu listu Nastavení detailů dokumentu Vytvoření výkresu
VíceSrovnání v T4C 3 (LELY Benchmark Social Network)
Srovnání v T4C 3 (LELY Benchmark Social Network) Sociální síť uživatelů T4C Srovnání v T4C umožňuje vstoupit do zabezpečené webové aplikace, kde si uživatelé mohou porovnávat své výsledky stáda i robota
VíceSoubory, složky a hledání ve Windows
Kapitola 3 Soubory, složky a hledání ve Windows 3 Soubory a složky jsou základními organizačními jednotkami vašich dat. Souborem jednoduše rozumíme například textový dokument, obrázek či hudební skladbu.
VíceProhlížení a editace externích předmětů
Prohlížení a editace externích předmětů 1. Spuštění modulu Externí předměty 2. Popis prostředí a ovládacích prvků 2.1. Rozbalovací seznamy 2.3. Seznamy 2.3.1. Definice předmětů 2.3.2. Vypsané předměty
Více1. Obsah 2. Úvod Zdarma poštovní klient od společnosti Microsoft přímo v PC
1. Obsah 1. Obsah... 1 2. Úvod... 1 3. Instalace... 2 4. Vytvoření účtu... 5 5. Pošta... 7 6. Kontakty... 11 7. Informační kanály... 11 8. Nastavení zobrazení... 12 2. Úvod Zdarma poštovní klient od společnosti
VícePoužití Office 365 na telefonu s Androidem
Použití Office 365 na telefonu s Androidem Úvodní příručka Kontrola e-mailů Telefon s Androidem si můžete nastavit tak, aby odesílal a přijímal poštu z vašeho účtu Office 365. Kontrola kalendáře z libovolného
VíceGrid 2. Krok za krokem. Jednoduchý manuál pro základní úpravy mřížek v programu
Grid 2 Krok za krokem Jednoduchý manuál pro základní úpravy mřížek v programu Kopírování sady mřížek (uživatele) Chceme-li si vyzkoušet práci s programem Grid 2, je nejlepší upravit si již vytvořené mřížky
VíceOsnova, hlavní a vnořené dokumenty
Osnova, hlavní a vnořené dokumenty 912 K čemu slouží osnova dokumentu Osnovu lze použít pro zobrazení struktury dokumentu, ale také například pro přesouvání bloků textu nebo změnu úrovně nadpisů. Strukturu
VícePomocí filtrů dokážete změnit obrázek k nepoznání. Z fotografie dokážete udělat umělecké dílo, které bude vypadat jako mozaika, náčrtek, sítotisk
Obsah 1. Ga a a jejich h dia a a a 2. Použití filtru Pattern Marker (V řit vzorek) 3. Použití filtru Vanishing Point (Úběžný bod) Pomocí filtrů dokážete změnit obrázek k nepoznání. Z fotografie dokážete
VíceZdokonalování gramotnosti v oblasti ICT. Kurz MS Excel kurz 2. Inovace a modernizace studijních oborů FSpS (IMPACT) CZ.1.07/2.2.00/28.
Zdokonalování gramotnosti v oblasti ICT Kurz MS Excel kurz 2 1 Obsah Práce s listy v MS Excel 2010... 4 Výběr (volba) listu... 4 Skrýt/zobrazit listy... 5 Klik na záložky... 5 Skrýt list (využítí pásu
VíceMigrace na aplikaci Outlook 2010
V tomto průvodci Microsoft Aplikace Microsoft Outlook 2010 vypadá velmi odlišně od aplikace Outlook 2003, a proto jsme vytvořili tohoto průvodce, který vám pomůže se s ní rychle seznámit. Dozvíte se o
VíceNápověda k redakčnímu systému InstantWeb.cz
Nápověda k redakčnímu systému InstantWeb.cz Přihlášení na adrese www.vasedomena.cz/admin naleznete přihlašovací pole se jménem a přiděleným heslem. Toto heslo je zpočátku přiděleno poskytovatelem programu,
VíceOFF - LINE. PRO ZAČÁTEČNÍKY Zdroje textů a obrázků
TVORBA WEBOVÉ STRÁNKY OFF - LINE 10 BODŮ VYTVOŘ SI WEB PRO ZAČÁTEČNÍKY Zdroje textů a obrázků 1.Vytvořte si na disku novou složku například C:/DT2_WEB nebo C:/POKUS a přejděte do ní. Dvojklikem na ikoně
VíceConnect Genius V2. Instalace programu.
Connect Genius V2 Program připojíte k PC přes RS 232. Instalace programu. Vložte CD do PC a automaticky se nabídne instalační program. Otevřete instalační program a klikněte dvojklikem na setup.exe a program
VíceÚvodní příručka. Získání nápovědy Kliknutím na otazník přejděte na obsah nápovědy.
Úvodní příručka Microsoft Access 2013 vypadá jinak než ve starších verzích, proto jsme vytvořili tuto příručku, která vám pomůže se s ním rychle seznámit. Změna velikosti obrazovky nebo zavření databáze
Víceje aplikace určená k editaci videozáznamu, funguje v operačních systémech Windows Vista a Windows7
Live Movie Maker je aplikace určená k editaci videozáznamu, funguje v operačních systémech Windows Vista a Windows7 Importovat video Klepněte na prozatím jediné aktivní tlačítko Přidat videa a fotografie
VíceDOKUMENTACE REDAKČNÍHO SYSTÉMU PINYA
DOKUMENTACE REDAKČNÍHO SYSTÉMU PINYA Obsah Obsah... 4 Pinya CMS... 5 Přihlášení do systému... 6 Položky v menu administrace... 7 Uživatelé... 8 Správa uživatelů... 8 Nový uživatel... 9 Role... 10 Vytvoření
VíceNástrojová lišta v editačním poli
Nástrojová lišta v editačním poli Název projektu PŘEJÍT NA konkrétní sekci webu ZOBRAZIT zobrazí a) pracovní verzi webu (tj. nepublikovanou) b) publikovanou verzi webu a) Odstranit odstraní zobrazenou
VíceProces editace JOSM. Tato příručka může být stažena jako josm_more-about-josm_en.odt or josm_more-aboutjosm_en.pdf
Proces editace JOSM Tato příručka může být stažena jako josm_more-about-josm_en.odt or josm_more-aboutjosm_en.pdf Zkontrolováno 12.7.2015 V předchozí části jste nainstalovali JOSM a začali kreslit své
VíceZákladní nastavení systému Windows 7
Základní nastavení systému Windows 7 Ing. Miroslava Trusková 2012 1 Dobrý den, vítejte v lekci Systémová nastavení. Dnes si vysvětlíme, jak si přizpůsobit nastavení počítače tak, aby vyhovoval Vašim požadavkům.
VíceV kartě Informace o dokumentu můžete vyplnit údaje o dokumentu, které budou uloženy v PDF souboru. Jsou to:
Zahájení činnosti pdffactory je tiskový ovladač, který použijete při tisku z Vaší aplikace podobně, jako ovladač jakékoliv jiné tiskárny. Většina aplikací obsahuje v nabídce Soubor položku Tisk, která
VícePřepínání zobrazení Použijte zobrazení kalendáře, které nejlépe vyhovuje vašemu pracovnímu postupu. Přepínejte tak často, jak chcete.
Kalendář Úvodní příručka Naplánování schůzky v Lyncu Setkejte se tváří v tvář a ušetřete si cestu díky online schůzce v Lyncu 2013. Přepínání zobrazení Použijte zobrazení kalendáře, které nejlépe vyhovuje
VíceGymnázium Ostrava Hrabůvka, příspěvková organizace Františka Hajdy 34, Ostrava Hrabůvka
Gymnázium Ostrava Hrabůvka, příspěvková organizace Františka Hajdy 34, Ostrava Hrabůvka Projekt Využití ICT ve výuce na gymnáziích, registrační číslo projektu CZ.1.07/1.1.07/02.0030 MS Power Point Metodický
VíceJednoduché stříhání videa
Pátek 23. listopadu Jednoduché stříhání videa Máte-li v projektu vložený alespoň jeden videozáznam, objeví se pod náhledem ovládací tlačítka pro spuštění (respektive zastavení) přehrávání a posun vpřed
VíceJak se orientovat ve světě ESTOFANu verze 3.0.3?
Jak se orientovat ve světě ESTOFANu verze 3.0.3? Systém ESTOFAN je určen pro administraci a editaci webových stránek, které jsou provozovány reklamní agenturou PANKREA. 1. Přihlášení Po objednávce a vytvoření
VíceZSF web a intranet manuál
ZSF web a intranet manuál Verze pro školení 11.7.2013. Návody - Jak udělat...? WYSIWYG editor TinyMCE Takto vypadá prostředí WYSIWYG editoru TinyMCE Jak formátovat strukturu stránky? Nadpis, podnadpis,
VíceGoogle Apps. weby 2. verze 2012
Google Apps weby 2 verze 2012 Obsah Obsah... 2 Úvod... Přidání nové stránky... 4 Úprava postranního panelu... 2 Úvod V dnešní době chce mít každý své informace po ruce. Díky Internetu a online aplikacím
VíceMicrosoft Office Word 2003
Microsoft Office Word 2003 Školení učitelů na základní škole Meteorologická Maturitní projekt SSPŠ 2013/2013 Vojtěch Dušek 4.B 1 Obsah 1 Obsah... 2 2 Seznam obrázků... 3 3 Základy programu PowerPoint...
VíceWinFAS. Agenda ÚČTO Založení nové knihy, číselné řady a šablony
Agenda ÚČTO Založení nové knihy, číselné řady a šablony poslední úpravy 16. 3. 2006 O PROBLEMATICE - Níže uvedené postupy slouží pro vytvoření nových knih, číselných řad a šablon - Postup platí pro závazky,
VíceMS OFFICE, POWERPOINT
Škola: Autor: DUM: Vzdělávací obor: Tematický okruh: Téma: Masarykovo gymnázium Vsetín Mgr. Petr Koňařík MGV_VT_SS_1S2-D15_Z_OFF_PP.docx Informatika MS Office Powerpoint MS OFFICE, POWERPOINT ÚVOD PowerPoint
VíceM E T O D I K A W I K I
M E T O D I K A W I K I STŘEDNÍ ŠKOLY INFORMATIKY A SPOJŮ, BRNO, ČICHNOVA 23 NÁPOVĚDA OBSAH Webové stránky Střední školy informatiky a spojů, Brno, Čichnova 23... 3 Moje stránka... 6 Přihlášení... 6 Po
VíceEvidence přítomnosti dětí a pečovatelek. Uživatelský manuál
Evidence přítomnosti dětí a pečovatelek Uživatelský manuál Obsah První spuštění, přihlašování... 3 První spuštění... 3 Přihlášení... 5 Agenda Osoby... 6 Vytvoření nové osoby... 6 Tabletová aplikace...
Více6. Formátování: Formátování odstavce
6. Formátování: Formátování odstavce Obrázek 1: Formát / Odstavec Odstavec je text mezi dvěma znaky konce odstavce. Konec odstavce je skrytý znak a vkládáme jej během psaní při každém stisknutí klávesy
VíceInternetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN BASIC
Internetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN BASIC Modul FADN BASIC je určen pro odbornou zemědělskou veřejnost bez větších zkušeností s internetovými aplikacemi a bez hlubších
VíceTabulkový procesor Microsoft Excel
Tabulkový procesor Microsoft Excel Úvod Tabulkový procesor Microsoft Excel spolu s Microsoft Word, Access, Outlook, PowerPoint a FrontPage tvoří programový balíku Microsoft Office. Tabulkový procesor Microsoft
VíceRedakční systém Joomla. Prokop Zelený
Redakční systém Joomla Prokop Zelený 1 Co jsou to red. systémy? Redakční systémy (anglicky Content Management System - CMS) jsou webové aplikace používané pro snadnou správu obsahu stránek. Hlavním cílem
VíceNÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE. Ataxo Czech s.r.o.
NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE Ataxo Czech s.r.o. ÚVOD Internetové stránky vytvořené společností Ataxo v rámci produktu Mini web můžete jednoduše a rychle upravovat prostřednictvím on-line administrace.
Víceapilot - První kroky Publikační platforma apilot První kroky
Publikační platforma apilot První kroky Přihlášení https://domena.apilot.cz Po přihlášení Po přihlášení Nástěnka - aktualizace platformy novinky - tipy, triky (nastavení poštovních klientů) - aktivita
VíceInternet - internetové prohlížeče
Název školy: Střední odborná škola stavební Karlovy Vary Sabinovo náměstí 16, 360 09 Karlovy Vary Autor: Ing. Hana Šmídová Název materiálu: VY_32_INOVACE_09_INTERNET_P2 Číslo projektu: CZ 1.07/1.5.00/34.1077
Více1 Tvorba WWW stránek pomocí programu Microsoft FrontPage
1 Tvorba WWW stránek pomocí programu Microsoft FrontPage Pomocí tohoto programu můžete vytvářet WWW stránky s minimální znalostí HTML kódu. Bohužel takto vytvořené stránky obsahují množství chyb a nejsou
VícePRÁCE S APLIKACÍ Evidence městských knih
PRÁCE S APLIKACÍ Evidence městských knih Po prvním spuštění Aplikace založení databází... 2 Založení prefixu, číslování záznamů... 7 Popis navigačních tlačítek... 8 Založení nového záznamu městské knihy...
VíceÚdržbové prostředí Rebeca44
Údržbové prostředí Rebeca44 ÚVOD STRUKTURA VZNIKAJÍCÍCH WEB-STRÁNEK SPRÁVCE STRÁNEK Přihlášení Odhlášení POPIS PRVKŮ ÚDRŽBY Titulek Cestička Základní popis práce s modulem Menu Navigace Na úvodní stránku
VíceGoogle Apps. kontakty 1. verze 2012
Google Apps kontakty verze 0 Obsah Obsah... Úvod... Popis prostředí... Přidání kontaktu mezi Moje kontakty... Výběr ze skupiny Další kontakty... Ruční přidání kontaktu... Import kontaktů... Úprava kontaktu...
Více8. E-mail, kalendář a kontakty kdekoliv a kdykoliv. Verze dokumentu: 1.0 Autor: Marián Henč, Microsoft Časová náročnost: 25 minut
8. E-mail, kalendář a kontakty kdekoliv a kdykoliv Verze dokumentu: 1.0 Autor: Marián Henč, Microsoft Časová náročnost: 25 minut Úvod Pro úspěšnou realizaci tohoto scénáře budete pracovat jako uživatel
VíceNávod k aplikaci DPH Kontrol
Návod k aplikaci DPH Kontrol Obsah I. O aplikaci... 2 II. Jak používat DPH Kontrol... 3 1. Kontrola spolehlivosti plátců DPH... 3 2. Kontrola zveřejněných účtů... 5 III. Další práce s databází záznamů...
VícePrezentace. Prezentace. 5. InDesign vzory, znakové styly. Vytvořil: Tomáš Fabián vytvořeno 10. 11. 2012. www.isspolygr.cz
5. InDesign vzory, znakové styly www.isspolygr.cz Vytvořil: Tomáš Fabián vytvořeno 10. 11. 2012 Strana: 1 Škola Ročník 4. ročník (SOŠ, SOU) Název projektu Interaktivní metody zdokonalující proces edukace
Více