Vytvoření proměnné nazvané department a přiřazení řetězce "Sales" této proměnné.
- 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ů
Uživatelské rozhraní v aplikaci Dreamweaver CC a jejích novějších verzích bylo zjednodušeno. Výsledkem je skutečnost, že některé možnosti uvedené v tomto článku nemusí být v aplikaci Dreamweaver CC a jejích novějších verzích k dispozici. Další informace najdete v tomto článku.
O webových aplikacích
Webová aplikace je webové místo, které obsahuje stránky s částečně nebo úplně neurčeným obsahem. Konečný obsah stránky se určí až tehdy, když návštěvník požádá o stránku z webového serveru. Protože konečný obsah stránky se pro různé požadavky liší a závisí na akcích návštěvníka, říká se takové stránce dynamická stránka.
Webové aplikace se vytvářejí proto, aby vyřešily nejrůznější úkoly a problémy. Tato sekce popisuje běžná využití webových aplikací a uvádí jednoduchý příklad.
Běžná využití webových aplikací
Webové aplikace mají řadu využití pro návštěvníky webových míst i vývojáře, včetně následujících:
Umožnit návštěvníkům snadno a rychle najít informace ve webovém místě s bohatým obsahem.
Tento druh webových aplikací dává návštěvníkům možnost podle libosti prohledávat, organizovat a procházet obsah. Mezi příklady patří interní sítě společností, Microsoft MSDN (www.msdn.microsoft.com) a Amazon.com (www.amazon.com).
Shromažďovat, ukládat a analyzovat data, která poskytli návštěvníci webového místa.
V minulosti se údaje zadané do formulářů HTML posílaly ke zpracování jako e‑mailové zprávy zaměstnancům nebo aplikacím CGI. Webová aplikace může ukládat data z formuláře přímo do databáze, vyjímat data a vytvářet webové zprávy pro analýzu. Mezi příklady patří stránky internetového bankovnictví, objednávací stránky obchodů, ankety a formuláře pro zpětnou odezvu od uživatelů.
Aktualizovat webová místa s neustále se měnícím obsahem.
Webová aplikace zbaví návrháře webu nutnosti neustále aktualizovat HTML webového místa. Poskytovatelé obsahu, například redaktoři zpráv, dodávají webové aplikaci obsah, a webová aplikace automaticky aktualizuje webové místo. Mezi příklady patří The Economist (www.economist.com) a CNN (www.cnn.com).
Příklad webové aplikace
Janet je profesionální návrhářka webu a dlouholetá uživatelka aplikace Dreamweaver, která odpovídá za udržování intranetových a internetových míst středně velké firmy s 1000 zaměstnanci. Jednoho dne za ní přijde Chris z personálního oddělení s problémem. Personální oddělení řídí fitness program pro zaměstnance, ve kterém zaměstnanci sbírají body za každý kilometr, který ujdou, uběhnou nebo ujedou na kole. Každý zaměstnanec musí Chrisovi e‑mailem nahlásit celkový počet svých kilometrů za měsíc. Na konci měsíce Chris shromáždí všechny e‑mailové zprávy a udělí zaměstnancům malé peněžní ceny podle celkového počtu získaných bodů.
Chrisův problém je, že fitness program se stal příliš úspěšný. Účastní se už tolik zaměstnanců, že na konci každého měsíce je Chris zaplaven e‑maily. Chris se ptá Janet, zda existuje webové řešení.
Janet navrhne webovou aplikaci na intranetu, která bude provádět následující úkoly:
umožní zaměstnancům zadat své kilometry na webové stránce pomocí jednoduchého formuláře HTML;
uloží kilometry zaměstnanců do databáze;
podle kilometráže spočítá fitness body;
umožní zaměstnancům sledovat, jak si v každém měsíci vedou;
Chrisovi umožní jedním klepnutím na konci každého měsíce přistupovat k součtům bodů.
Pomocí aplikace Dreamweaver, která nabízí všechny potřebné nástroje pro snadné a rychlé vytváření takovýchto typů aplikací, Janet aplikaci zprovozní ještě před obědem.
Jak funguje webová aplikace
Webová aplikace je kolekcí statických a dynamických webových stránek. Statická webová stránka se nemění, když o ni návštěvník webového místa požádá: webový server odešle stránku webovému prohlížeči, který o ni požádal, beze změny. Naproti tomu dynamickou webovou stránku server modifikuje před odesláním prohlížeči, který o ni požádal. Proměnlivá povaha stránky je důvodem, proč se jí říká dynamická.
Můžete například navrhnout stránku pro zobrazení výsledků fitness programu a ponechat určení některých informací (například jména zaměstnance a výsledku) až na okamžik, kdy si stránku vyžádá konkrétní zaměstnanec.
Následující sekce podrobněji popisují, jak webové aplikace fungují.
Zpracování statických webových stránek
Statické webové místo se skládá z množiny souvisejících stránek HTML a souborů hostovaných v počítači, na kterém běží webový server.
Webový server je software, který odesílá webové stránky na základě požadavků od webových prohlížečů. Požadavek na stránku se generuje, když návštěvník ve webovém prohlížeči klepne na odkaz na webové stránce, vybere záložku nebo zadá adresu URL do textového pole pro adresu.
Konečný obsah statické webové stránky určuje návrhář stránky a obsah se nemění, když se o stránku požádá. Tady je příklad:
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> </body> </html>
Každý řádek kódu HTML této stránky napsal návrhář předtím, než byla stránka umístěna na server. Protože se HTML po uložení na server nemění, říká se takovéto stránce statická stránka.
Striktně řečeno, „statická“ stránka vůbec nemusí být statická. Například obraz s efektem přechodu (rollover) nebo obsah Flash (soubor SWF) mohou statickou stránku oživit. V této dokumentaci se nicméně stránka nazývá statickou, pokud se posílá prohlížeči beze změn.
Když webový server přijme požadavek na statickou stránku, přečte si ho, stránku vyhledá a pošle prohlížeči, který o ni požádal, jak ukazuje následující příklad:
A. Webový prohlížeč požádá o statickou stránku. B. Webový server vyhledá stránku. C. Webový server pošle stránku prohlížeči, který o ni požádal.
U webových aplikací jsou v okamžiku, kdy návštěvník požádá o stránku, některé řádky kódu neurčeny. Tyto řádky musí nějaký mechanismus určit předtím, než může být stránka poslána prohlížeči. O tomto mechanismu pojednává následující sekce.
Zpracování dynamických stránek
Když webový server přijme požadavek na statickou webovou stránku, pošle ji přímo prohlížeči, který o ni požádal. Když ale webový server přijme požadavek na dynamickou stránku, reaguje jinak: Předá stránku zvláštnímu softwaru, který odpovídá za dokončení stránky. Tento speciální software se nazývá aplikační server.
Aplikační server si přečte kód na stránce, dokončí stránku podle instrukcí v kódu a pak odstraní kód ze stránky. Výsledkem je statická stránka, kterou aplikační server předá zpátky webovému serveru, který ji pak pošle prohlížeči, který o ni požádal. Všechno, co prohlížeč dostane, když stránka dorazí, je čisté HTML. Tady je zobrazení tohoto procesu:
A. Webový prohlížeč požádá o dynamickou stránku. B. Webový server stránku vyhledá a předá ji aplikačnímu serveru. C. Aplikační server najde na stránce případné instrukce a dokončí ji. D. Aplikační server předá dokončenou stránku zpátky webovému serveru. E. Webový server pošle dokončenou stránku prohlížeči, který o ni požádal.
Přistupování k databázi
Aplikační server vám umožňuje pracovat s prostředky na straně serveru, jako jsou například databáze. Dynamická stránka například může dát pokyn aplikačnímu serveru, aby vyjmul data z databáze a vložil je do kódu HTML na stránce. Více informací najdete na adrese www.adobe.com/go/learn_dw_dbguide_cz.
Využitím databáze k uložení obsahu můžete návrh webu oddělit od datového obsahu, který chcete zobrazovat. Místo vytváření HTML souborů jednotlivých stránek vytvoříte jen jednu stránku – nebo šablonu – pro každý typ informací, které chcete zobrazovat. Obsah pak můžete nahrát do databáze a webová stránka si na žádost uživatele vyžádá obsah z databáze. Můžete také informace aktualizovat na jednom místě a změny se projeví na webu, aniž byste museli ručně upravovat všechny stránky. Aplikaci Adobe Dreamweaver můžete využít k návrhu webových formulářů umožňujících vkládání dat do databáze, aktualizaci a mazání dat z databáze.
Instrukce pro získání dat z databáze se nazývá databázový dotaz. Dotaz se skládá z kritérií hledání vyjádřených v databázovém jazyku nazývaném SQL (Structured Query Language, jazyk strukturovaných dotazů). Dotaz SQL se na stránce napíše do tagů nebo skriptů na straně serveru.
Aplikační server nemůže s databází komunikovat přímo, protože proprietární formát databáze činí data nečitelná, podobně jako může být nečitelný dokument aplikace Microsoft Word otevřený v Poznámkovém bloku nebo v programu BBEdit. Aplikační server může s databází komunikovat pouze prostřednictvím databázového ovladače: softwaru, který se chová jako tlumočník mezi aplikačním serverem a databází.
Poté, co ovladač naváže komunikaci, se dotaz provede proti databázi a vytvoří se sada záznamů. Sada záznamů je množina dat získaných z jedné nebo více tabulek v databázi. Sada záznamů se vrátí aplikačnímu serveru, který data použije k dokončení stránky.
Tady je jednoduchý databázový dotaz napsaný v SQL:
SELECT lastname, firstname, fitpoints FROM employees
Tento příkaz vytvoří sadu záznamů se třemi sloupci a naplní ji řádky, které budou obsahovat příjmení, jména a fitness body všech zaměstnanců v databázi. Více informací najdete na adrese www.adobe.com/go/learn_dw_sqlprimer_cz.
Následující příkaz ukazuje proces dotázání databáze a vrácení dat prohlížeči:
A. Webový prohlížeč požádá o dynamickou stránku. B. Webový server stránku vyhledá a předá ji aplikačnímu serveru. C. Aplikační server najde na stránce případné instrukce. D. Aplikační server pošle dotaz databázovému ovladači. E. Ovladač provede dotaz proti databázi. F. Ovladači se vrátí sada záznamů. G. Ovladač předá sadu záznamů aplikačnímu serveru. H. Aplikační server vloží data do stránky a pak předá stránku webovému serveru. I. Webový server pošle dokončenou stránku prohlížeči, který o ni požádal.
Pro svou webovou aplikaci můžete použít téměř jakoukoliv databázi, pokud je na serveru nainstalovaný příslušný databázový ovladač.
Pokud plánujete vytvářet malé a levné aplikace, můžete použít souborovou databázi, například databázi vytvořenou v programu Microsoft Access. Pokud plánujete vytvářet robustní aplikace kritické pro činnost podniků, můžete použít serverovou databázi, například databázi vytvořenou v softwaru Microsoft SQL Server, Oracle 9i nebo MySQL.
Pokud se vaše databáze nachází na jiném systému než váš webový server, zkontrolujte, zda je mezi těmito systémy rychlé propojení, aby vaše webová aplikace mohla pracovat svižně a efektivně.
Vytváření dynamických stránek
Vytvoření dynamické stránky znamená nejdříve napsat HTML a pak doplnit do HTML skripty nebo tagy na straně serveru, díky kterým se stránka stane dynamickou. Když si zobrazíte výsledný kód, jazyk se jeví jako vložený do HTML dané stránky. Proto se těmto jazykům říká programovací jazyky vložené do HTML. Následující jednoduchý příklad používá jazyk CFML (ColdFusion Markup Language):
Poznámka: V aplikaci Dreamweaver CC a jejích novějších verzích je odebrána podpora CFML.
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> <!--- embedded instructions start here ---> <cfset department="Sales"> <cfoutput> <p>Be sure to visit our #department# page.</p> </cfoutput> <!--- embedded instructions end here ---> </body> </html>
Vložené instrukce na této stránce provedou následující akce:
-
-
Vložení hodnoty proměnné, to znamená "Sales", do kódu HTML.
Aplikační server vrátí webovému serveru následující stránku:
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> <p>Be sure to visit our Sales page.</p> </body> </html>
Webový server pošle stránku prohlížeči, který o ni požádal a který ji zobrazí takto:
About Trio Motors
Trio Motors is a leading automobile manufacturer.
Be sure to visit our Sales page.
Skriptovací jazyk nebo jazyk využívající tagy si zvolíte podle serverové technologie, která je k dispozici na vašem serveru. Tady jsou nejpopulárnější jazyky pro serverové technologie, které aplikace Dreamweaver podporuje:
Serverová technologie |
Jazyk |
ColdFusion |
CFML (ColdFusion Markup Language) |
Active Server Pages (ASP) |
VBScript JavaScript |
PHP |
PHP |
Aplikace Dreamweaver může skripty na straně serveru nebo tagy potřebné k fungování vašich stránek vytvořit, nebo je můžete napsat ručně v prostředí aplikace Dreamweaver pro psaní kódu.
Terminologie webových aplikací
Tato sekce definuje často používané termíny, které se týkají webových aplikací.
Aplikační server
Software, který pomáhá webovému serveru zpracovat webové stránky obsahující skripty nebo tagy na straně serveru. Když webový server přijme požadavek na takovou stránku, předá stránku aplikačnímu serveru ke zpracování, než ji pošle prohlížeči. Další informace viz část Jak funguje webová aplikace.
Mezi běžné aplikační servery patří ColdFusion a PHP.
Databáze
Kolekce dat uložených v tabulkách. Každý řádek tabulky představuje jeden záznam a každý sloupec představuje pole v záznamu, jak ukazuje následující příklad:
Databázový ovladač
Software, který funguje jako tlumočník mezi webovou aplikací a databází. Data jsou v databázi uložena v proprietárním formátu. Databázový ovladač umožňuje webové aplikaci číst a upravovat data, která by jinak byla nečitelná.
Systém pro správu databází
(DBMS nebo databázový systém) Software, který se používá pro vytváření databází a manipulaci s nimi. Mezi běžné databázové systémy patří Microsoft Access, Oracle 9i a MySQL.
Databázový dotaz
Operace, která získá sadu záznamů z databáze. Dotaz se skládá z kritérií hledání vyjádřených v databázovém jazyku, který se nazývá SQL. Dotaz může například určit, že se do sady záznamů mají zahrnout pouze určité sloupce nebo pouze určité řádky.
Dynamická stránka
Webová stránka, kterou aplikační server přizpůsobí před tím, než se stránka pošle do prohlížeče.
Sada záznamů
Sada dat získaných z jedné nebo více tabulek v databázi, jako v následujícím příkladu:
Relační databáze
Databáze, která obsahuje více než jednu tabulku, přičemž tyto tabulky sdílejí data. Následující databáze je relační, protože dvě tabulky sdílejí sloupec DepartmentID.
Serverová technologie
Technologie, kterou aplikační server používá pro změny dynamických stránek za běhu.
Vývojové prostředí aplikace Dreamweaver podporuje následující serverové technologie:
Adobe® ColdFusion®,
Microsoft Active Server Pages (ASP),
PHP: Hypertext Preprocessor (PHP).
Prostředí aplikace Dreamweaver pro psaní kódu můžete ale také použít k vývoji stránek pro jakoukoliv jinou serverovou technologii, která na seznamu není.
Statická stránka
Webová stránka, kterou aplikační server před odesláním do prohlížeče neupravuje. Další informace viz část Zpracování statických webových stránek.
Webová aplikace
Webové místo, které obsahuje stránky s částečně nebo úplně neurčeným obsahem. Konečný obsah těchto stránek se určí, až když návštěvník požádá o nějakou stránku z webového serveru. Protože konečný obsah stránky se pro různé požadavky liší a závisí na akcích návštěvníka, říká se takové stránce dynamická stránka.
Webový server
Software, který posílá webové stránky na základě požadavků od webových prohlížečů. Požadavek na stránku se generuje, když návštěvník ve webovém prohlížeči klepne na odkaz na webové stránce, vybere záložku nebo zadá adresu URL do textového pole pro adresu.
Známé webové servery zahrnují Microsoft Internet Information Server (IIS) a Apache HTTP Server.