- Příručka uživatele aplikace Dreamweaver
- Úvod
- Dreamweaver a Creative Cloud
- Pracovní plochy a zobrazení aplikace Dreamweaver
- Nastavení webů
- O webech aplikace Dreamweaver
- Nastavení lokální verze webu
- Připojení k publikačnímu serveru
- Nastavení testovacího serveru
- Import a export nastavení webu aplikace Dreamweaver
- Přenos stávajících webových stránek ze vzdáleného serveru do kořenové složky lokálního webového místa
- Funkce usnadnění přístupu v aplikaci Dreamweaver
- Rozšířená nastavení
- Nastavení předvoleb webového místa pro přenos souborů
- Úprava nastavení serveru proxy v aplikaci Dreamweaver
- Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud
- Používání systému Git v aplikaci Dreamweaver
- Správa souborů
- Vytváření a otevírání souborů
- Správa souborů a složek
- Získání souborů ze serveru a odeslání souborů na server
- Zpřístupnění/vyhrazení souborů
- Synchronizace souborů
- Porovnání souborů a nalezení rozdílů
- Maskování souborů a složek ve webu aplikace Dreamweaver
- Povolení poznámek k návrhu pro weby Dreamweaver
- Předcházení potenciálnímu zneužití modulu Gatekeeper
- Rozvržení a návrh
- Používání vizuálních pomůcek pro rozvržení
- O používání souborů CCS k rozvržení stránky
- Navrhování responzivních webů pomocí nástroje Bootstrap
- Vytvoření a používání multimediálních dotazů v aplikaci Dreamweaver
- Zobrazení obsahu pomocí tabulek
- Barvy
- Responzivní návrh s využitím rozvržení s plovoucí mřížkou
- Funkce Extrakt v aplikaci Dreamweaver
- CSS
- Vysvětlení kaskádových seznamů stylů
- Rozvržení stránek pomocí panelu CSS Designer
- Použití preprocesorů CSS v aplikaci Dreamweaver
- Postup nastavení předvoleb stylu CSS v aplikaci Dreamweaver
- Přesunutí pravidel CSS v aplikaci Dreamweaver
- Převedení inline CSS na pravidlo CSS v aplikaci Dreamweaver
- Práce s tagy div
- Použití přechodů na pozadí
- Vytváření a úprava efektů přechodů v aplikaci Dreamweaver
- Formátování kódu
- Obsah stránky a datové zdroje
- Nastavení vlastností stránky
- Nastavení vlastností nadpisů CSS a vlastností odkazu CSS
- Práce s textem
- Vyhledání a nahrazení textu, tagů a atributů
- Panel DOM
- Úpravy v živém zobrazení
- Kódování dokumentů v aplikaci Dreamweaver
- Výběr a zobrazení elementů v okně dokumentu
- Nastavení vlastností textu v Inspektoru vlastností
- Kontrola pravopisu webové stránky
- Pomocí vodorovných linek v aplikaci Dreamweaver
- Přidání a úprava kombinací písma v aplikaci Dreamweaver
- Práce s datovými zdroji
- Vložení a aktualizace dat v aplikaci Dreamweaver
- Vytvoření a správa oblíbených datových zdrojů v aplikaci Dreamweaver
- Vložení a úprava obrázků v aplikaci Dreamweaver
- Přidání multimediálních objektů
- Přidání videa v aplikaci Dreamweaver
- Vložení videa HTML 5
- Vložit soubory SWF
- Přidání zvukových efektů
- Vložte zvuk HTML5 v aplikaci Dreamweaver
- Práce s položkami knihoven
- Používání arabského a hebrejského textu v aplikaci Dreamweaver
- Odkazy a navigace
- Ovládací prvky a efekty jQuery
- Kódování webových stránek
- Informace o psaní kódu v aplikaci Dreamweaver
- Prostředí pro psaní kódu v aplikaci Dreamweaver
- Nastavení předvoleb kódování
- Přizpůsobení barevného zvýraznění kódu
- Psaní a úprava kódu
- Našeptávání kódu a dokončování kódu
- Sbalení a rozbalení kódu
- Opakované použití kódu v podobě výstřižků
- Linting kódu
- Optimalizace kódu
- Úprava kódu v zobrazení Návrh
- Práce s obsahem hlavičky stránek
- Vložení zahrnutí na straně serveru v aplikaci Dreamweaver
- Používání knihoven tagů v aplikaci Dreamweaver
- Import vlastních tagů do aplikace Dreamweaver
- Práce s funkcemi JavaScriptu (obecné pokyny)
- Použití vestavěných chování jazyka JavaScript
- O XML a XSLT
- Provádění transformace XSL na straně serveru v aplikaci Dreamweaver
- Provádění transformace XSL na straně klienta v aplikaci Dreamweaver
- Přidání entit znaku pro XSLT v aplikaci Dreamweaver
- Formátování kódu
- Pracovní postupy pro různé produkty
- Instalace a používání rozšíření v aplikaci Dreamweaver
- Aktualizace v rámci aplikace v aplikaci Dreamweaver
- Vkládání dokumentů sady Microsoft Office v aplikaci Dreamweaver (jen ve Windows)
- Práce s aplikacemi Fireworks a Dreamweaver
- Úprava obsahu na webech Dreamweaver za pomoci aplikace Contribute
- Integrace mezi aplikacemi Dreamweaver a Business Catalyst
- Vytváření e-mailových kampaní na míru
- Šablony
- O předlohách aplikace Dreamweaver
- Rozpoznání předloh a dokumentů založených na předloze
- Vytvoření předlohy aplikace Dreamweaver
- Vytváření upravitelných oblastí v šablonách
- Vytváření opakovaných oblastí a tabulek v aplikaci Dreamweaver
- Použijte volitelné oblasti v předlohách
- Definování upravitelných atributů tagu v aplikaci Dreamweaver
- Postup vytvoření vnořených šablon v aplikaci Dreamweaver
- Úprava, aktualizace nebo odstranění předloh
- Export a import obsahu XML v aplikaci Dreamweaver
- Aplikace nebo odstranění předlohy z existujícího dokumentu.
- Úprava obsahu v předlohách Dreamweaver
- Pravidla syntaxe pro tagy předloh v aplikaci Dreamweaver
- Nastavení předvoleb zvýraznění pro oblasti předlohy
- Výhody používání předloh v aplikaci Dreamweaver
- Mobilní zařízení a zařízení s více displeji
- Dynamické weby, stránky a webové formuláře
- Informace o webových aplikacích
- Nastavení počítače pro vývoj aplikací
- Řešení problémů s připojením databází
- Odstranění skriptů připojení v aplikaci Dreamweaver
- Návrh dynamických stránek
- Přehled zdrojů dynamického obsahu
- Definice zdrojů dynamického obsahu
- Přidání dynamického obsahu na stránky
- Změna dynamického obsahu v aplikaci Dreamweaver
- Zobrazení záznamů databáze
- Zajišťování a řešení potíží s živými daty v aplikaci Dreamweaver
- Přidání uživatelského chování serveru v aplikaci Dreamweaver
- Vytváření formulářů pomocí aplikace Dreamweaver
- Shromažďování informací od uživatelů pomocí formulářů
- Vytváření a povolení formulářů ColdFusion v aplikaci Dreamweaver
- Vytváření webových formulářů
- Rozšířená podpora formátu HTML5 pro elementy formuláře
- Vytváření formuláře pomocí aplikace Dreamweaver
- Vizuální vytváření aplikací
- Vytváření hlavních a podrobných stránek v aplikaci Dreamweaver
- Vytváření vyhledávacích stránek a stránek s výsledky
- Vytvoření stránky vložení záznamu
- Vytvoření stránky pro aktualizaci záznamu v aplikaci Dreamweaver
- Budování stránek pro odstranění záznamu v aplikaci Dreamweaver
- Používání příkazů ASP k úpravě databáze v aplikaci Dreamweaver
- Vytvoření registrační stránky
- Vytvoření přihlašovací stránky
- Vytvoření stránky, na kterou mají přístup pouze autorizovaní uživatelé
- Zabezpečení složek ve službě ColdFusion pomocí aplikace Dreamweaver
- Používání komponent ColdFusion v aplikaci Dreamweaver
- Testování, náhled a publikování webových stránek
- Odstraňování problémů
Toto téma vám pomůže vysvětlit, jak použít vestavěné chování jazyka JavaScript v aplikaci Adobe Dreamweaver.
Aplikování zabudovaných chování
Chování dodávaná s aplikací Dreamweaver byla vytvořena tak, aby fungovala v moderních prohlížečích. Ve starších prohlížečích chování nefungují, ale nevyvolají chybu.
Akce aplikace Dreamweaver byly pečlivě navrženy tak, aby fungovaly v co nejvíce prohlížečích. Pokud ručně odstraníte kód akce aplikace Dreamweaver nebo ho nahradíte vlastním kódem, můžete přijít o kompatibilitu s různými prohlížeči.
Přestože byly akce aplikace Dreamweaver napsány tak, aby byly kompatibilní s co nejvíce prohlížeči, některé prohlížeče vůbec nepodporují jazyk JavaScript a řada lidí, kteří procházejí web, má jazyk JavaScript v prohlížeči vypnutý. V zájmu co nejlepších výsledků na různých platformách nabídněte i alternativní rozhraní uzavřené mezi tagy <noscript> tak, aby webové místo mohli používat i lidé bez jazyka JavaScript.
Aplikování chování Zavolat JavaScript
Chování Zavolat JavaScript spustí uživatelskou funkci nebo řádek kódu JavaScript, když nastane událost. (Skript můžete napsat sami nebo použít kód z volně dostupných knihoven JavaScript na webu.)
-
Vyberte objekt a z nabídky Přidat chování v panelu Chování vyberte volbu Zavolat JavaScript.
-
Zapište přesně kód JavaScript, který má být spuštěn, nebo zapište název funkce.
Například tlačítko Zpět můžete vytvořit zapsáním kódu if (history.length > 0){history.back()}. Pokud jste kód zabalili do funkce, zapište jen název funkce (například, hJitZpet()).
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Aplikování chování Změnit vlastnost
Chování Změnit vlastnost použijte ke změně hodnoty jedné z vlastností objektu (například barvy pozadí prvku div nebo akce prvku form).
Toto chování použijte jen pokud dobře znáte jazyky HTML a JavaScript.
-
Vyberte objekt a z nabídky Přidat chování v panelu Chování vyberte volbu Změnit vlastnost.
-
Z nabídky Typ prvku vyberte typ prvku, abyste zobrazili všechny identifikované prvky daného typu.
-
Vyberte prvek z nabídky Identifikátor prvku.
-
Vyberte vlastnost z nabídky Vlastnost nebo zadejte název vlastnosti do pole.
-
Zadejte novou hodnotu nové vlastnosti do pole Nová hodnota.
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Aplikování chování Kontrola zásuvného modulu
Chování Kontrola zásuvného modulu použijte k přesměrování uživatelů na různé stránky podle toho, zda mají instalován zadaný zásuvný modul. Například můžete chtít, aby uživatelé přešli na určitou stránku, pokud mají Shockwave, a na jinou, pokud ho nemají.
V prohlížeči Internet Explorer nelze pomocí jazyka JavaScript detekovat konkrétní zásuvné moduly. Výběrem volby Flash nebo Director ale do stránky přidáte kód VBScript, který zajistí detekci těchto zásuvných modulů v prohlížeči Internet Explorer v systému Windows. V prohlížeči Internet Explorer pro systém Mac OS detekce zásuvných modulů nefunguje.
-
Vyberte objekt a z nabídky Přidat chování v panelu Chování vyberte volbu Kontrola zásuvného modulu.
-
Vyberte zásuvný modul z nabídky Zásuvný modul nebo klepněte na tlačítko Zadat a zadejte do sousedního pole přesný název zásuvného modulu.
Musíte zadat přesný název zásuvného modulu tak, jak je uveden tučným písmem na stránce O zásuvných modulech v prohlížeči Netscape Navigator. (V systému Windows v prohlížeči Navigator vyberte volbu Nápověda > O zásuvných modulech, v systému Mac OS vyberte volbu O zásuvných modulech z nabídky Apple.)
-
V poli Při nalezení jít na URL zadejte adresu URL, kam mají přejít návštěvníci, kteří zásuvný modul mají.
Pokud zadáte vzdálenou adresu URL, musíte zadat i prefix http://. Pokud toto pole necháte prázdné, návštěvníci zůstanou na stejné stránce.
-
V poli Jinak jít na URL zadejte URL, kam mají přejít návštěvníci, kteří zásuvný modul nemají. Pokud toto pole necháte prázdné, návštěvníci zůstanou na stejné stránce.
-
Určete, co se má stát, pokud přítomnost zásuvného modulu detekovat nelze. Standardně, pokud detekce nefunguje, je návštěvník přesměrován na adresu URL uvedenou v poli Jinak. Pokud chcete návštěvníka v tomto případě přesměrovat na první adresu URL (Při nalezení), vyberte volbu Pokud není zjištění možné, vždy jít na první URL. Když je tato volba vybraná, prakticky to znamená „předpokládejme, že návštěvník zásuvný modul má, pokud prohlížeč výslovně neuvede, že ho nemá“. Tuto volbu vyberte, pokud je obsah zásuvného modulu pro stránku nezbytný; pokud tomu tak není, tuto volbu nevybírejte.Poznámka:
Tato volba se týká jen prohlížeče Internet Explorer; prohlížeč Netscape Navigator vždy umožní detekci zásuvných modulů.
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Aplikování chování Přetažení AP elementu
Chování Přetažení AP elementu umožňuje návštěvníkovi stránky přetažení absolutně polohovaného (AP) elementu. Toto chování použijte k vytváření skládaček, posuvníků a dalších pohyblivých prvků rozhraní.
Můžete určit, kterým směrem může návštěvník AP element posunout (vodorovně, svisle nebo libovolným směrem), určit cílovou polohu, kam bude AP element přetažen, to, zda se má AP element přitahovat do cílové polohy, pokud se přiblíží na zadaný počet obrazových bodů od cíle, co se má stát při umístění AP elementu do cílové polohy a podobně.
Vzhledem k tomu, že přetažení AP elementu funguje až poté, co je vyvoláno chování Přetažení AP elementu, měli byste Přetažení AP elementu připojit k objektu body (pomocí události onLoad).
-
Vyberte volbu Vložit > Objekty rozvržení > AP Div nebo klepněte na tlačítko Přetažení AP Div na panelu Vložit a přetáhněte objekt AP Div do zobrazení Návrh v okně dokumentu.
-
Klepněte na text <body> v elektoru tagů v levém dolním rohu okna dokumentu.
-
Z nabídky Přidat chování v panelu Chování vyberte volbu Přetažení AP elementu.
Pokud Přetažení AP elementu není k dispozici, nejspíš máte vybraný AP element.
-
V rozbalovací nabídce AP element vyberte AP element.
-
V rozbalovací nabídce Pohyb vyberte volbu S omezením nebo Bez omezení.
Pohyb Bez omezení je vhodný u skládaček a dalších her používajících přetahování. Při vytváření posuvníků a ovladačů scén, například zásuvek souborů, závěsů a minirolet vyberte pohyb typu S omezením.
-
U pohybu S omezením zadejte do polí Nahoru, Dolů, Vlevo a Vpravo hodnoty (v obrazových bodech).
Hodnoty jsou relativní vůči výchozí poloze AP elementu. Pokud chcete pohyb omezit na oblast ve tvaru obdélníku, zadejte do všech čtyřech polí kladné hodnoty. Pokud chcete umožnit jen pohyb nahoru a dolů, zadejte kladné hodnoty do polí Nahoru a Dolů a 0 do polí Vlevo a Vpravo. Pokud chcete umožnit jen pohyb vlevo a vpravo, zadejte kladné hodnoty do polí Vlevo a Vpravo a 0 do polí Nahoru a Dolů.
-
Zadejte hodnoty (v obrazových bodech) cíle přetažení do polí Levý a Horní.
Cíl přetažení je místo, kam chcete, aby návštěvník stránky AP element přetáhl. AP element je považován za přesunutý na cíl přetažení, pokud jeho levá a horní souřadnice odpovídají hodnotám zadaným do polí Levý a Horní. Hodnoty se vztahují k levému hornímu rohu okna prohlížeče. Klepnutím na volbu Získat aktuální polohu se pole automaticky vyplní hodnotami aktuální polohy AP elementu.
-
Zadejte hodnotu (v obrazových bodech) do pole Přitahovat pokud je do, a tím určete, jak blízko k cíli přetažení musí uživatel AP element přetáhnout, než se automaticky přitáhne k cíli přetažení.
Při zadání větší hodnoty návštěvník snáze najde cíl přetažení.
-
U jednodušších skládaček a manipulací se scénami už nemusíte dělat nic dalšího. Pokud chcete definovat táhlo pro AP element, sledovat pohyb AP elementu během tažení a spustit akci při uvolnění AP element, klepněte na záložku Další volby.
-
Pokud chcete zadat, že uživatel musí klepnout na určitou část AP elementu, aby ho mohl přetáhnout, vyberte z nabídky Táhlo přetažení volbu Oblast uvnitř prvku a zadejte souřadnice horního a levého okraje a šířku a výšku táhla přetažení.
Tato volba se hodí, pokud obraz v AP elementu obsahuje prvek, který vyzývá k tažení, například titulkový panel nebo táhlo přetažení. Tuto volbu nenastavujte, pokud chcete, aby mohl návštěvník AP element přetáhnout po klepnutí na jeho libovolnou část.
-
Vyberte volby Během přetažení, které chcete použít:
Vyberte volbu Posunout element dopředu, pokud chcete AP element během přetahování přesunout dopředu v pořadí překrývání. Pokud vyberete tuto volbu, vyberte z rozbalovací nabídky, zda má AP element zůstat v popředí nebo má být obnovena jeho poloha v pořadí překrývání.
Zadejte kód JavaScript nebo název funkce (například monitorAPelement()) do pole Zavolat JavaScript, pokud chcete opakovaně spouštět kód nebo funkci během přetahování AP elementu. Můžete například vytvořit funkci, která sleduje souřadnice AP elementu a zobrazuje v textovém poli tipy, například „přihořívá“ nebo „samá voda“.
-
Zadejte kód JavaScript nebo název funkce (například monitorAPelement()) do druhého pole Zavolat JavaScript, pokud chcete opakovaně spouštět kód nebo funkci během přetahování AP elementu. Vyberte volbu Pouze při přitažení, pokud má být jazyk JavaScript spuštěn, jen pokud se AP element dostal k cíli přetažení.
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Získání informací o AP elementu, který lze přetáhnout
Při připojení chování Přetažení AP elementu k objektu aplikace Dreamweaver vloží funkci MM_dragLayer() do sekce head dokumentu. (Funkce dodržuje starou konvenci názvu AP elementů [to znamená „Vrstva“] tak, aby bylo i nadále možné upravovat vrstvy vytvořené ve starších verzích aplikace Dreamweaver.) Kromě toho, že tato funkce registruje AP element jako přetáhnutelný, definuje u každého přetáhnutelného AP elementu také tři vlastnosti – MM_LEFTRIGHT, MM_UPDOWN a MM_SNAPPED – které můžete použít ve vlastních funkcích JavaScript k určení relativní vodorovné polohy AP elementu, relativní svislé polohy AP elementu a ke zjištění, zda byl AP elementu přetažen do cíle přetažení.
Zde popsané informace jsou určeny jen zkušeným programátorům v jazyce JavaScript.
Například následující funkce zobrazuje hodnotu vlastnosti MM_UPDOWN (aktuální svislá poloha AP elementu) v poli formuláře nazvaném curPosField. (Pole formuláře se hodí k zobrazování průběžně aktualizovaných údajů, protože jsou dynamická – to znamená, že jejich obsah můžete měnit i po načtení stránky.)
function getPos(layerId){ var layerRef = document.getElementById(layerId); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; }
Hodnoty MM_UPDOWN nebo MM_LEFTRIGHT nemusíte jen zobrazovat v poli formuláře, ale můžete je použít mnoha dalšími způsoby. Můžete například napsat funkci, která zobrazí v poli formuláře hlášení podle toho, jak blízko k cíli přetažení element je, nebo můžete zavolat další funkci, která podle této hodnoty AP element zobrazí nebo skryje.
Je velmi užitečné číst vlastnost MM_SNAPPED, pokud máte na stránce více AP elementů, které musí být všechny v cíli přetažení, dříve než může návštěvník přejít na další stránku nebo úlohu. Můžete například napsat funkci, která počítá, kolik AP elementů má vlastnost MM_SNAPPED s hodnotou true a volat ji při každém spuštění AP elementu. Poté, co počet přitažených prvků dosáhne požadované hodnoty, můžete návštěvníka přesměrovat na další stránku nebo zobrazit gratulaci.
Aplikování chování Jít na URL
Chování Jít na URL otevře v aktuálním okně nebo ve vybraném rámci novou stránku. Toto chování se hodí ke změně obsahu dvou a více rámců jedním klepnutím.
-
Vyberte objekt a z nabídky Přidat chování v panelu Chování vyberte volbu Jít na URL.
-
Vyberte cíl URL ze seznamu Otevřít v.
Seznam Otevřít v automaticky zobrazuje názvy všech rámců aktuální sady rámců i název hlavního okna. Pokud neexistují rámce, je hlavní okno jedinou volbou.
Poznámka:Toto chování může vést k nečekaným výsledkům, pokud se některý z rámců jmenuje top, blank, self nebo parent. Prohlížeče tyto názvy někdy omylem pokládají za vyhrazené názvy cílů.
-
Klepnutím na tlačítko Procházet vyberte dokument, který chcete otevřít, nebo do pole URL zadejte název souboru dokumentu.
-
Opakováním kroků 2 a 3 otevřete další dokumenty v jiných rámcích.
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Aplikování chování Nabídka odkazů
Pokud vytvoříte nabídku odkazů výběrem volby Vložit > Formulář > Nabídka odkazů, aplikace Dreamweaver vytvoří objekt nabídky a připojí k němu chování Nabídka odkazů (nebo Nabídka odkazů – Přejít). Obvykle nemusíte připojovat chování Nabídka odkazů k objektu ručně.
Existující nabídky odkazů můžete upravovat dvěma způsoby:
Můžete upravit a přerovnat položky nabídky, změnit soubory, na které se přechází, a změnit okno, v němž se tyto soubory otvírají, pokud poklepete na existující chování Nabídka odkazů v panelu Chování.
Položky nabídky můžete upravovat stejně jako položky jakékoli jiné nabídky, pokud nabídku vyberete a použijete tlačítko Hodnoty seznamu v inspektoru Vlastnosti.
-
Vytvořte objekt Nabídka odkazů, pokud zatím v dokumentu chybí.
-
Vyberte objekt a z nabídky Přidat chování v panelu chování vyberte volbu Nabídka odkazů.
-
V dialogovém okně Nabídka odkazů proveďte požadované změny a pak klikněte na tlačítko OK.
Aplikování chování Nabídka odkazů – Přejít
Chování Nabídka odkazů – Přejít úzce souvisí s chováním Nabídka odkazů; Nabídka odkazů – Přejít umožňuje spojení tlačítka Přejít s Nabídkou odkazů. (Před použitím tohoto chování musí již v dokumentu existovat Nabídka odkazů.) Klepnutím na tlačítko Přejít se otevře odkaz vybraný v Nabídce odkazů. Nabídka odkazů v běžných případech nemusí mít tlačítko Přejít; výběrem položky se otevře adresa URL, aniž by uživatel musel dělat cokoli dalšího. Pokud ale návštěvník stránky vybere položku, která již je v Nabídce odkazů vybraná, odkaz se neotevře. Obvykle to nevadí, ale pokud je Nabídka odkazů zobrazena v rámci a položky odkazují na stránky v jiných rámcích, často se tlačítko Přejít hodí, protože návštěvníkům umožní znovu vybrat položku, která je v Nabídce odkazů již vybraná.
Pokud s nabídkou odkazů použijete tlačítko Přejít, bude toto tlačítko jedinou možností, jak může uživatel „přeskočit“ na adresu URL spojenou s výběrem v nabídce. Výběr položky nabídky v nabídce odkazů již nepřesměruje uživatele na jinou stránku nebo rámec.
-
Vyberte objekt, který bude sloužit jako tlačítko Přejít (obvykle obraz tlačítka), a vyberte volbu Nabídka odkazů – Přejít z nabídky Přidat chování v panelu Chování.
-
V nabídce Vybrat nabídku odkazů vyberte nabídku, kterou má aktivovat tlačítko Přejít, a klikněte na tlačítko OK.
Aplikování chování Otevřít okno prohlížeče
Chování Otevřít okno prohlížeče použijte k otevření stránky v novém okně. Můžete zadat vlastnosti nového okna, například velikost, atributy (zda lze měnit jeho velikost, zda má mít pruh nabídky a podobně) a název. Například poté, co uživatel klepne na náhled obrazu, můžete tímto chováním nastavit velikost nového okna přesně odpovídající velikosti obrazu.
Pokud nezadáte atributy okna, otevře se nové okno s vlastnostmi a velikostí původního okna, z něhož bylo otevřeno. Zadáním jakéhokoli atributu okna se všechny ostatní atributy, které nejsou výslovně zapnuty, vypnou. Pokud například nenastavíte žádné atributy okna, může se okno otevřít ve velikosti 1024 x 768 bodů a bude mít navigační pruh (s tlačítky Zpět, Vpřed, Domů a Obnovit), pruh nástrojů umístění (zobrazuje adresu URL), stavový pruh (zobrazuje stavová hlášení, dole) a pruh nabídek (zobrazuje nabídky Soubor, Úpravy, Zobrazit a tak dále). Pokud nastavíte šířku 640 a výšku 480 a žádné jiné atributy nenastavíte, okno se otevře ve velikosti 640 x 480 bez pruhů nástrojů.
-
Vyberte objekt a z nabídky Přidat chování v panelu Chování vyberte volbu Otevřít okno prohlížeče.
-
Klepnutím na tlačítko Procházet vyberte soubor nebo zadejte adresu URL stránky, kterou chcete zobrazit.
-
Nastavte šířku a výšku okna (v obrazových bodech) a to, zda se mají nebo nemají zobrazit pruhy nástrojů, posuvníky, táhla změny velikosti a podobně. Zadejte název okna (nesmí obsahovat mezery a speciální znaky), pokud chcete, aby bylo cílem odkazů nebo ho bylo možno ovládat pomocí jazyka JavaScript.
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Aplikování chování Rozbalovací zpráva
Chování Rozbalovací zpráva zobrazí upozornění jazyka JavaScript s textem, který zadáte. Protože upozornění jazyka JavaScript mají jen jedno tlačítko (OK), použijte toto chování k předání informací uživateli, ale nepožadujte rozhodnutí.
Do textu můžete vložit jakékoli platné volání funkce, vlastnost, globální proměnnou nebo jiný výraz jazyka JavaScript. Chcete-li vložit výraz jazyka JavaScript, umístěte ho do složených závorek ({}). Složenou závorku zobrazíte tak, že před ni umístíte zpětné lomítko (\{).
Například:
The URL for this page is {window.location}, and today is {new Date()}.
Vzhled upozornění určuje prohlížeč. Pokud požadujete větší kontrolu nad vzhledem, uvažujte o použití chování Otevřít okno prohlížeče.
-
Vyberte objekt a z nabídky Přidat chování v panelu Chování vyberte volbu Rozbalovací zpráva.
-
Do pole Zpráva zadejte text zprávy.
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Aplikování chování Načíst obrazy předem
Chování Načíst obrazy předem zkracuje dobu zobrazení tím, že obrazy načte při načtení stránky (obrazy, které budou zaměněny například pomocí chování nebo skriptů).
Chování Zaměnit obraz automaticky nahraje všechny obrazy předem, pokud vyberete volbu Načíst obrazy předem v dialogovém okně Zaměnit obraz, takže při použití chování Zaměnit obraz nemusíte ručně přidávat chování Načíst obrazy předem.
-
Vyberte objekt a z nabídky Přidat chování v panelu Chování vyberte volbu Načíst obrazy předem.
-
Klepnutím na tlačítko Procházet vyberte soubor obrazu nebo zadejte cestu a název souboru do pole Zdrojový soubor obrazu.
-
Klepnutím na tlačítko plus (+) na horním okraji dialogového okna přidejte obraz do seznamu Načíst obrazy předem.
-
Kroky 2 a 3 opakujte pro všechny další obrazy, které chcete pro aktuální stránku načíst předem.
-
Soubor ze seznamu Načíst obrazy předem odstraníte tak, že ho vyberete a klepnete na tlačítko minus (-).
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Aplikování chování Nastavit text rámce
Chování Nastavit text rámce umožňuje dynamické nastavení textu rámce, náhradu obsahu a změnu formátování podle toho, co zadáte. Obsah může být včetně jakéhokoliv validního kód HTML. Toto chování použijte k dynamickému zobrazení informací.
I když chování Nastavit text rámce nahrazuje formátování rámce, můžete vybrat volbu Zachovat barvu pozadí, abyste zachovali atributy barvy pozadí stránky a textu.
Do textu můžete vložit jakékoli platné volání funkce, vlastnost, globální proměnnou nebo jiný výraz jazyka JavaScript. Chcete-li vložit výraz jazyka JavaScript, umístěte ho do složených závorek ({}). Složenou závorku zobrazíte tak, že před ni umístíte zpětné lomítko (\{).
Například:
The URL for this page is {window.location}, and today is {new Date()}.
-
Vyberte objekt a z nabídky Přidat chování v panelu Chování vyberte volbu Nastavit text > Nastavit text rámce.
-
Z nabídky Rámec v dialogovém okně Nastavit text rámce vyberte cílový rámec.
-
Klepnutím na tlačítko Získat aktuální HTML zkopírujte aktuální obsah sekce body cílového rámce.
-
Do pole Nový HTML zadejte hlášení.
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Aplikování chování Nastavit text kontejneru
Chování Nastavit text kontejneru nahradí obsah a formátování stávajícího kontejneru (tedy jakéhokoli prvku, který může obsahovat text nebo jiné prvky) na stránce obsahem, který zadáte. Obsahem může být jakýkoli platný zdrojový kód HTML.
Do textu můžete vložit jakékoli platné volání funkce, vlastnost, globální proměnnou nebo jiný výraz jazyka JavaScript. Chcete-li vložit výraz jazyka JavaScript, umístěte ho do složených závorek ({}). Složenou závorku zobrazíte tak, že před ni umístíte zpětné lomítko (\{).
Například:
The URL for this page is {window.location}, and today is {new Date()}.
-
Vyberte objekt a z nabídky Přidat chování v panelu Chování vyberte volbu Nastavit text > Nastavit text kontejneru.
-
V dialogovém okně Nastavit text kontejneru vyberte v nabídce Kontejner cílový kontejner.
-
Do pole Nový HTML zadejte nový text nebo HTML.
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Aplikování chování Nastavit text stavového řádku
Chování Nastavit text stavového řádku zobrazí hlášení ve stavovém řádku v levém dolním rohu okna prohlížeče. Toto chování můžete použít například k popisu cílového místa odkazu ve stavovém řádku místo zobrazení související adresy URL. Návštěvníci webu zprávy ve stavovém řádku často přehlédnou nebo ignorují (a navíc ne všechny prohlížeče plně podporují nastavení textu ve stavovém řádku); pokud je zpráva důležitá, zvažte, zda není lepší zobrazení formou rozbalovacích zprávy nebo textu AP elementu.
Pokud v aplikaci Dreamweaver použijete chování Nastavit text stavového řádku, není zaručeno, že se text ve stavovém řádku v prohlížeči změní, protože některé prohlížeče při změně textu ve stavovém řádku vyžadují speciální nastavení. Například Firefox vyžaduje, abyste přepnuli rozšířenou volbu, která jazyk JavaScript umožní změnu textu ve stavovém řádku. Další informace najdete v dokumentaci k prohlížeči.
Do textu můžete vložit jakékoli platné volání funkce, vlastnost, globální proměnnou nebo jiný výraz jazyka JavaScript. Chcete-li vložit výraz jazyka JavaScript, umístěte ho do složených závorek ({}). Složenou závorku zobrazíte tak, že před ni umístíte zpětné lomítko (\{).
Například:
The URL for this page is {window.location}, and today is {new Date()}.
-
Vyberte objekt a z nabídky Přidat chování v panelu Chování vyberte volbu Nastavit text > Nastavit text stavového pruhu.
-
V dialogovém okně Nastavit text stavového řádku zadejte svou zprávu do pole Zpráva.
Zpráva musí být stručná. Pokud se zpráva do stavového pruhu nevejde, prohlížeč ji zkrátí.
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Aplikování chování Nastavit text textového pole
Chování Nastavit text textového pole nahradí obsah textového pole formuláře obsahem, který zadáte.
Do textu můžete vložit jakékoli platné volání funkce, vlastnost, globální proměnnou nebo jiný výraz jazyka JavaScript. Chcete-li vložit výraz jazyka JavaScript, umístěte ho do složených závorek ({}). Složenou závorku zobrazíte tak, že před ni umístíte zpětné lomítko (\{).
Například:
The URL for this page is {window.location}, and today is {new Date()}.
Vytvoření pojmenovaného textového pole
-
Vyberte volbu Vložit > Formulář > Textové pole.
Pokud vás aplikace Dreamweaver vyzve k vložení tagu formuláře, klikněte na tlačítko Ano.
-
V inspektoru Vlastnosti zadejte název textového pole. Zajistěte, aby byl název na stránce jedinečný (nepoužívejte na stránce stejný název pro více prvků, ani pokud jsou součástí různých formulářů).
Aplikování Nastavit text textového pole
-
Vyberte textové pole a z nabídky Přidat chování v panelu Chování vyberte volbu Nastavit Text > Nastavit text pole.
-
Vyberte z nabídky Textové pole cílové textové pole a zadejte nový text.
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Aplikování chování Zobrazit-skrýt elementy
Chování Zobrazit-skrýt elementy zobrazí, skryje nebo obnoví standardní viditelnost jednoho nebo více elementů stránky. Toto chování se hodí ke zobrazení informací při interakci uživatele se stránkou. Například pokud uživatel umístí kurzor myši na obrázek květiny, můžete zobrazit element stránky s podrobnostmi o době pěstování, regionu, potřebě slunce, možném vzrůstu a podobně. Toto chování příslušný prvek jen zobrazí nebo skryje – při skrytí ho neodstraní ze stránky.
-
Vyberte objekt a z nabídky Přidat chování v panelu Chování vyberte volbu Zobrazit-skrýt elementy.
Pokud volba Zobrazit-skrýt elementy není k dispozici, máte pravděpodobně zvolený AP element. Protože AP elementy v obou prohlížečích verze 4.0 nepřijímají události, musíte vybrat jiný objekt, například tag <body> nebo tag odkazu (<a>).
-
Ze seznamu Elementy vyberte element, který chcete zobrazit nebo skrýt, a klepněte na tlačítko Zobrazit, Skrýt nebo Obnovit (tato volba obnoví výchozí viditelnost).
-
Krok 2 opakujte u všech zbývajících elementů, jejichž viditelnost chcete změnit. (Pomocí jednoho chování můžete změnit viditelnost více elementů.)
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Toto chování je v aplikaci Dreamweaver CS5 zastaralé.
Aplikování chování Zaměnit obraz
Chování Zaměnit obraz zamění jeden obraz za druhý změnou atributu src tagu <img>. Pomocí tohoto chování vytvoříte efekty přechodů tlačítek a další obrazové efekty (včetně záměny více obrazů najednou). Vložení obrazu efektu přechodu na stránku automaticky vloží chování Zaměnit obraz.
Vzhledem k tomu, že toto chování ovlivní jen atribut src, musíte k nahrazení určit obraz se stejnými rozměry (výška a šířka) jako má původní obraz. Jinak se nový obraz zvětší nebo zmenší na rozměr původního obrazu.
Existuje také chování Obnovit zaměněný obraz, které obnoví původní soubory naposledy zaměněné sady obrazů. Toto chování je automaticky vloženo vždy, když k objektu přidáte chování Zaměnit obraz; pokud při připojování Zaměnit obraz necháte zaškrtnutou volbu Obnovit, nemusíte chování Obnovit zaměněný obraz vkládat ručně.
-
Obraz vložíte výběrem položek Vložit > Obraz nebo klepnutím na tlačítko Obraz na panelu Vložit.
-
V inspektoru Vlastnosti zadejte do pole zcela vlevo název obrazu.
Pojmenování obrazů není povinné; pojmenovány budou automaticky při připojení chování k objektu. Obrazy v dialogovém okně Záměna obrazu lépe rozeznáte, pokud předem všechny obrazy pojmenujete.
-
Opakováním kroků 1 a 2 vložte další obrazy.
-
Vyberte objekt (obvykle obraz, který chcete zaměnit) a z nabídky Přidat chování v panelu Chování vyberte volbu Zaměnit obraz.
-
Ze seznamu Obrazy vyberte obraz, jehož zdroj chcete změnit.
-
Klepnutím na tlačítko Procházet vyberte nový obrazový soubor nebo zadejte cestu a název souboru do pole Nastavit zdroj na.
-
Opakujte kroky 5 a 6 pro další obrazy, které chcete změnit. Použijte stejnou akci Zaměnit obraz u všech obrazů, které chcete zaměnit najednou; v opačném případě akce Obnovit zaměněný obraz neobnoví všechny obrazy.
-
Výběrem volby Načíst obrazy předem načtěte obrazy při nahrávání stránky.
To zamezí prodlevám, kvůli stahování, když se mají obrazy zobrazit.
-
Klikněte na tlačítko OK a ověřte, že je výchozí událost v pořádku.
Aplikování chování Ověřit formulář
Chování Ověřit formulář kontroluje obsah zadaných textových polí a zjišťuje, zda uživatel zadal správný typ dat. Toto chování připojte k jednotlivým textovým polím pomocí události onBlur, pokud chcete, aby byla pole ověřována během vyplňování uživatelem, nebo ho připojte k formuláři pomocí události onSubmit, pokud chcete ověřit více polí najednou, když uživatel klepne na tlačítko Odeslat. Připojením tohoto chování k formuláři zabráníte odesílání formulářů s neplatnými daty.
-
Formulář vložíte výběrem položek Vložit > Formulář nebo klepnutím na tlačítko Formulář na panelu Vložit.
-
Textové pole vložíte výběrem položek Vložit > Formulář > Textové pole nebo klepnutím na tlačítko Textové pole na panelu Vložit.
Opakováním tohoto kroku vložíte další textová pole.
-
Vyberte metodu ověření:
Pokud chcete, aby byla jednotlivá pole ověřována během vyplňování uživatelem, vyberte textové pole a vyberte volbu Okna > Chování.
Pokud chcete ověřit více polí najednou, když uživatel formulář odešle, klepněte na tag <form> v selektoru tagů v levém dolním rohu okna dokumentu a vyberte volbu Okna > Chování.
-
Z nabídky Přidat chování vyberte volbu Ověřit formulář.
-
Proveďte jeden z následujících úkonů:
Pokud ověřujete jednotlivá pole, vyberte totéž pole, které jste vybrali v okně dokument ze seznamu Pole.
Pokud ověřujete více polí najednou, vyberte textové pole ze seznamu Pole.
-
Pokud pole musí obsahovat nějaká data, vyberte volbu Povinné.
-
Vyberte jednu z následujících voleb Přijmout:
Použít cokoli
Kontroluje, zda pole obsahuje data; může jít o data libovolného typu.
Použít e‑mailovou adresu
Zkontroluje, zda pole obsahuje symbol @.
Použít číslo
Zkontroluje, zda pole obsahuje jen číslice.
Použít číslo od
Zkontroluje, zda pole obsahuje číslo v zadaném rozmezí.
-
Pokud jste se rozhodli ověřovat více polí, opakujte kroky 6 a 7 u dalších polí, která chcete ověřovat.
-
Klikněte na tlačítko OK.
Pokud ověřujete více polí při odeslání formuláře uživatelem, v nabídce Události se automaticky zobrazí událost onSubmit.
-
Pokud ověřujete jednotlivá pole, zkontrolujte, zda standardní událost je onBlur nebo onChange. Pokud tomu tak není, vyberte jednu z těchto událostí.
Obě události spouštějí chování Ověřit formulář v okamžiku, kdy uživatel pole opustí. Rozdíl je v tom, že událost onBlur nastává nezávisle na tom, zda uživatel změnil obsah pole, zatímco událost onChange nastává jen pokud uživatel změnil obsah pole. Pokud je pole povinné, je lepší použít událost onBlur.