- 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ů
Získejte informace o podpoře různých kódovacích jazyků v aplikaci Dreamweaver, které se používají k vytváření webových stránek.
Nejoblíbenější programovací jazyky pro návrh a vývoj plně funkčních webových stránek pro front-endové využití je HTML, HTML5 a CSS, zatímco pro back-endové využití jsou to PHP, JavaScript, Java a jQuery.
Vzhled webové stránky můžete pomocí jazyka CSS navrhovat pro celé weby (včetně prvků, jako jsou například písma nebo barvy). Poté pomocí jazyka HTML můžete společně vkládat obrázky, text, videa, formuláře a jiné části obsahu a vytvářet tak celistvé webové stránky.
Společným použitím jazyků CSS a HTML můžete vytvářet statické stránky. Většina webových stránek však vyžaduje určitou formu interakce (například po zákazníkovi vyžaduje vyplnění formuláře nebo provedení platby) a databázi k ukládání všech dat z webové stránky.
Při vytváření těchto back-endových komunikačních kanálů potřebujete programovací jazyk na straně serveru (jako je PHP), který bude komunikovat s databází.
Programovací jazyky podporované aplikací Dreamweaver
Kromě možností úprav textu poskytuje aplikace Adobe Dreamweaver různé funkce, jako třeba rady při psaní kódu, aby vám pomohl kódovat v následujících jazycích:
- HTML
- PHP
- CSS
- JavaScript
Další jazyky, jako je například Perl, nejsou jazykově specifickými funkcemi kódování v aplikaci Dreamweaver podporovány; například můžete vytvářet a upravovat soubory Perl, ale rady při psaní kódu pro tento jazyk nefungují.
Změna automatického kódu
Můžete nastavit volby, které nařizují aplikaci Dreamweaver, aby automaticky vyčistila ručně napsaný kód podle kritérií, která určíte. Ale váš kód nebude nikdy přepsán, pokud nejsou povoleny volby přepsání kódu nebo pokud neprovedete činnost, která kód změní. Například aplikace Dreamweaver nezmění vaše mezery ani nezmění velikost písmen atributů, pokud nepoužijete příkaz Aplikovat formátování zdroje.
Několik z těchto voleb přepsání kódu je standardně povoleno.
Možnosti zpětného převodu HTML v aplikaci Dreamweaver umožňují přesouvat dokumenty tam a zpět mezi textovým editorem HTML a aplikací Dreamweaver s minimálním nebo žádným efektem na obsah a strukturu původního zdrojového kódu HTML dokumentu. Mezi tyto volby patří:
Používání textového editoru třetí strany k úpravě aktuálního dokumentu.
Aplikace Dreamweaver standardně neprovádí změny v kódu, vytvořeném nebo upraveném v jiných HTML editorech, ani když je kód neplatný, pokud nepovolíte volby přepisování kódu.
Aplikace Dreamweaver nemění tagy, které nerozezná – včetně tagů XML – protože nemá kritéria, podle kterých by je posoudila. Pokud nějaký nerozpoznaný tag překrývá jiný (například <MujNovyTag><em>text</MujNovyTag></em>), aplikace Dreamweaver ho označí jako chybu, ale kód nepřepíše.
Volitelně můžete nastavit, aby aplikace Dreamweaver zvýraznila neplatný kód v okně zobrazení kódu (žlutě). Pokud vyberete zvýrazněnou oblast, inspektor Vlastnosti zobrazí informace o tom, jak chybu opravit.
Kód XHTML
Aplikace Dreamweaver vygeneruje nový kód XHTML a vyčistí existující kód XHTML způsobem, který vyhovuje většině požadavků XHTML. Nástroje, které potřebujete k tomu, abyste vyhověli několika zbývajícím požadavkům XHTML, jsou také k dispozici.
Některé z těchto požadavků jsou také požadovány v různých verzích HTML.
Následující tabulka popisuje požadavky XHTML, kterým aplikace Dreamweaver automaticky vyhovuje:
Požadavek XHTML |
Činnosti, které aplikace Dreamweaver provádí |
---|---|
V dokumentu musí před kořenovým elementem existovat deklarace DOCTYPE a tato deklarace musí odkazovat na jeden ze tří souborů DTD (Definice typu dokumentu) pro XHTML (přísný, přechodný nebo sada rámců). |
Přidá XHTML DOCTYPE do dokumentu XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Nebo, pokud dokument XHTML obsahuje sadu rámců: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
Kořenový element dokumentu musí být html a html element musí stanovit jmenný prostor XHTML. |
Přidá atribut namespace do elementu html následujícím způsobem: <html xmlns="http://www.w3.org/1999/xhtml"> |
Standardní dokument musí obsahovat elementy struktury head, title a body. Dokument obsahující sadu rámců musí obsahovat elementy struktury head, title a frameset. |
Do standardního dokumentu zahrne elementy head, title a body. Do dokumentu se sadou rámců zahrne elementy head, title a frameset. |
Všechny elementy v dokumentu musí být správně vnořené: <p>Toto je <i>špatný příklad.</p></i> <p>Toto je <i>dobrý příklad.</i></p> |
Generuje správně vnořený kód, a pokud čistí XHTML, opraví vnoření v kódu, který nebyl vygenerován aplikací Dreamweaver. |
Všechny názvy elementů a atributů musí obsahovat pouze malá písmena. |
Vynutí, aby názvy elementů a atributů HTML byly malými písmeny v kódu XHTML, který vygeneruje, a když čistí XHTML, a to bez ohledu na váš tag a předvolby velikosti písmen atributů. |
Všechny elementy musí mít zavírací tag, pokud není v DTD deklarován jako PRÁZDNÝ. |
Vloží uzavírací tagy do kódu, který generuje, a také při čištění XHTML. |
Prázdné elementy musí mít zavírací tag, nebo počáteční tag musí končit />. Například <br> není platný tag; správná forma je <br></br> nebo <br/>. Následuje seznam prázdných elementů: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta a param. A pro zpětnou kompatibilitu s prohlížeči, které nepodporují XML, musíme použít mezeru před /> (například <br />, ne <br/>). |
Vloží prázdné elementy s mezerou před uzavíracím lomítkem u prázdných tagů v kódu, který vygeneruje, a při čištění XHTML. |
Atributy nesmí být minimalizovány; například <td nowrap> není platný, správná podoba je <td nowrap="nowrap">. To ovlivňuje následující atributy: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly a selected. |
Vloží kompletní páry atribut-hodnota do kódu, který vygeneruje, a také při čištění XHTML. Poznámka: Pokud HTML prohlížeč nepodporuje HTML 4, nemusí se mu podařit interpretovat booleovské atributy, pokud se objeví v plné podobě. |
Všechny hodnoty atributů musí být ohraničeny uvozovkami. |
Vloží uvozovky kolem hodnot atributů v kódu, který vygeneruje, a také při čištění XHTML. |
Následující elementy musí mít atribut id a atribut name: a, applet, form, frame, iframe, img a map. Například <a name="intro">Úvod</a> není platný, správná forma je <a id="intro">Úvod</a> nebo <a id="section1" name="intro"> Úvod</a>. |
Nastaví atributy name a id na stejnou hodnotu, kdykoliv je atribut name nastaven v inspektoru Vlastnosti, v kódu, který aplikace Dreamweaver generuje, a při čištění XHTML. |
Pro atributy s hodnotami výčtového typu musí být hodnoty uvedeny malými písmeny. Hodnota výčtového typu je hodnota z určeného seznamu povolených hodnot; například atribut align má následující povolené hodnoty: center, justify, left a right. |
Vynutí malá písmena v hodnotách výčtového typu v kódu, který generuje, a při čištění XHTML. |
Všechny elementy skriptů a stylů musí mít atribut type. (Atribut type elementu script je vyžadován od verze HTML 4, kdy byl zavržen atribut language.) |
Nastaví atributy type a language v elementech script a atribut type v elementech style v kódu, který generuje, a při čištění XHTML. |
Všechny elementy img a area musí mít atribut alt. |
Nastaví tyto atributy v kódu, který generuje, a v případě čištění XHTML vytvoří zprávu o chybějících atributech alt. |
Regulární výraz
Regulární výrazy jsou vzorky, které popisují kombinace znaků v textu. Použijte je při hledání v kódu, abyste usnadnili popis takových hledaných prvků, jako jsou například řádky začínající „var“ a hodnoty atributů, které obsahují číslo.
Následující tabulka obsahuje seznam speciálních znaků pro regulární výrazy, jejich významy a příklady použití. Chcete-li vyhledat text obsahující jeden ze speciálních znaků z této tabulky, označte speciální znak tím, že před ním uvedete zpětné lomítko. Například pokud hledáte skutečnou hvězdičku ve frázi některé podmínky platí*, mohl by vzorec pro vyhledávání vypadat následovně: platí\*. Pokud hvězdičku neoznačíte zpětným lomítkem, najdete všechny výskyty slova „platí“ (stejně jako kterékoliv ze slov „plat“, „platíí“ nebo „platííí“), nejen ty, po kterých následuje hvězdička.
Znak |
Odpovídá |
Příklad |
---|---|---|
^ |
Začátek vstupu nebo řádku |
^T odpovídá „T“ ve spojení „This good earth“, ale ne tomu ve spojení „Uncle Tom's Cabin“. |
$ |
Konec vstupu nebo řádku |
h$ odpovídá „h“ ve slově „teach“ ale ne ve slově „teacher“. |
* |
Žádný nebo více výskytů předcházejícího znaku |
um* odpovídá „um“ ve slově „rum“, „umm“ a „yummy“ a „u“ ve slově „huge“. |
+ |
Jeden nebo více výskytů předcházejícího znaku |
um+ odpovídá „um“ ve slově „rum“ a „umm“ ve slově „yummy“, ale ne ve slově „huge“. |
? |
Předcházející znak nanejvýš jednou (předcházející znak je tedy volitelný) |
st?on odpovídá slovu „son“ v „Johnson“ a slovu „ston“ v „Johnston“, ale ničemu v „Appleton“ nebo „tension“. |
. |
Jakýkoliv znak kromě znaku nové řádky |
.an odpovídá „ran“ a „can“ ve frázi „bran muffins can be tasty“. |
x|y |
Buď x, nebo y |
FF0000|0000FF odpovídá „FF0000“ v bgcolor="#FF0000" a „0000FF“ v font color="#0000FF". |
{n} |
Přesně n výskytů předcházejícího znaku |
o{2} odpovídá „oo“ v „loom“ a prvním dvěma o ve slově „mooooo“, ale ničemu ve slově „money“. |
{n,m} |
Minimálně n a maximálně m výskytů předcházejícího znaku |
F{2,4} odpovídá „FF“ v „#FF0000“ a prvním čtyřem F v #FFFFFF. |
[abc] |
Libovolný ze znaků zadaných v závorkách. Určete rozsah znaků pomocí pomlčky (například [a-f] je ekvivalentem [abcdef]). |
[e-g] odpovídá „e“ ve slově „bed“, „f“ ve „folly“ a „g“ ve slově „guard“. |
[^abc] |
Libovolný znak, kromě znaků zadaných v závorkách. Určete rozsah znaků pomocí pomlčky (například [^a-f] je ekvivalentem [^abcdef]). |
[^aeiou] jako první vyhledá „r“ ve slově „orange“, „b“ v „book“ a „k“ ve slově „eek!“. |
\b |
Hranice slova (například mezera nebo konec odstavce) |
\bb najde „b“ ve slově „book“, ale nenajde nic ve slově „goober“ nebo „snob“. |
\B |
Cokoliv jiného než hranice slov |
\Bb najde „b“ ve slově „goober“, ale nenajde nic ve slově „book“. |
\d |
Jakýkoliv číselný znak. Ekvivalent k zápisu [0-9]. |
\d odpovídá „3“ ve slově „C3PO“ a „2“ v „apartment 2G“. |
\D |
Jakýkoliv nečíselný znak. Ekvivalent k zápisu [^0-9]. |
\D odpovídá „S“ ve slově „900S“ a „Q“ v „Q45“. |
\f |
Vysunutí stránky |
|
\n |
Zalomení řádku |
|
\r |
Zalomení odstavce |
|
\s |
Jakýkoliv jeden znak prázdného místa, včetně mezery, tabulátoru, vysunutí stránky nebo zalomení řádku |
\sbook odpovídá „book“ ve slově „blue book“ a ničemu ve slově „notebook“. |
\S |
Jakýkoliv jeden znak kromě znaku prázdného místa |
\Sbook odpovídá „book“ ve slově „notebook“, ale ničemu v „blue book“. |
\t |
Tabulátor |
|
\w |
Jakýkoliv alfanumerický znak, včetně podtržítka. Ekvivalent k zápisu [A-Za-z0-9_]. |
b\w* najde „barking“ ve slově „the barking dog“ a „big“ i „black“ v „the big black dog“. |
\W |
Jakýkoliv jiný než alfanumerický znak. Ekvivalent k zápisu [^A-Za-z0-9_]. |
\W odpovídá „&“ ve slově „Jake&Mattie“ a „%“ v „100%“. |
Ctrl+Enter nebo Shift+Enter (Windows) nebo Ctrl+Return nebo Shift+Return nebo Apple+Return (Macintosh) |
Znak Return. Ujistěte se, zda jste odznačili volbu Ignorovat rozdíly typů mezer při hledání tohoto znaku, pokud nepoužíváte regulární výrazy. Všimněte si, že volba hledá konkrétní znak, ne obecné zalomení řádku; například takto nenajdete tag <br> nebo tag <p>. Znaky Return se v zobrazení Návrh zobrazují jako mezery, ne jako zalomení řádků. |
Používejte závorky, chcete-li nastavit seskupení uvnitř regulárního výrazu, na které budete později odkazovat. Pak použijte v poli Nahradit čím $1, $2, $3 a tak dále, abyste odkázali na první, druhé, třetí a další seskupení v závorkách.
V poli Najít, chcete-li se odkázat na seskupení v závorkách zadané dříve v regulárním výrazu, použijte \1, \2, \3 a tak dále, místo $1, $2, $3.
Například vyhledávání (\d+)\/(\d+)\/(\d+) a nahrazení nalezeného řetězcem $2/$1/$3, nahradí den a měsíc v datu odděleném lomítky, a tím převede veškerá data uváděná v americkém formátu na data ve formátu evropském.
Kód chování serveru
Pokud vyvíjíte dynamickou stránku a vyberete serverové chování z panelu Serverová chování, aplikace Dreamweaver vloží jeden nebo více bloků kódu do stránky, aby umožnila fungování serverového chování.
Pokud ručně změníte kód uvnitř bloku kódu, nemůžete už dále používat panely jako Svázání a Serverová chování k úpravě serverového chování. Aplikace Dreamweaver hledá specifické vzorky v kódu stránky, aby našla serverové chování a zobrazila ho v panelu Serverová chování. Pokud změníte jakýmkoliv způsobem kód bloku kódů, aplikace Dreamweaver již nemůže najít serverové chování a zobrazit ho v panelu Serverová chování. Ale serverové chování je stále na stránce přítomné a vy ho můžete upravovat v prostředí pro psaní kódu v aplikaci Dreamweaver.