Příručka uživatele Zrušit

O předlohách aplikace Dreamweaver

  1. Příručka uživatele aplikace Dreamweaver
  2. Úvod
    1. Základy navrhování responzivních webů
    2. Co je nového v aplikaci Dreamweaver
    3. Vývoj webu v aplikaci Dreamweaver – přehled
    4. Dreamweaver / Běžné otázky
    5. Klávesové zkratky
    6. Systémové požadavky aplikace Dreamweaver
    7. Přehled funkcí
  3. Dreamweaver a Creative Cloud
    1. Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud
    2. Knihovny Creative Cloud v aplikaci Dreamweaver
    3. Používání souborů Photoshop v aplikaci Dreamweaver
    4. Práce s aplikací Adobe Animate a Dreamweaver
    5. Extrahujte soubory SVG optimalizované pro web z knihoven
  4. Pracovní plochy a zobrazení aplikace Dreamweaver
    1. Pracovní plocha aplikace Dreamweaver
    2. Optimalizace pracovní plochy aplikace Dreamweaver pro vizuální vývoj
    3. Hledání souborů podle názvu nebo obsahu | Mac OS
  5. Nastavení webů
    1. O webech aplikace Dreamweaver
    2. Nastavení lokální verze webu
    3. Připojení k publikačnímu serveru
    4. Nastavení testovacího serveru
    5. Import a export nastavení webu aplikace Dreamweaver
    6. 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
    7. Funkce usnadnění přístupu v aplikaci Dreamweaver
    8. Rozšířená nastavení
    9. Nastavení předvoleb webového místa pro přenos souborů
    10. Úprava nastavení serveru proxy v aplikaci Dreamweaver
    11. Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud
    12. Používání systému Git v aplikaci Dreamweaver
  6. Správa souborů
    1. Vytváření a otevírání souborů
    2. Správa souborů a složek
    3. Získání souborů ze serveru a odeslání souborů na server
    4. Zpřístupnění/vyhrazení souborů
    5. Synchronizace souborů
    6. Porovnání souborů a nalezení rozdílů
    7. Maskování souborů a složek ve webu aplikace Dreamweaver
    8. Povolení poznámek k návrhu pro weby Dreamweaver
    9. Předcházení potenciálnímu zneužití modulu Gatekeeper
  7. Rozvržení a návrh
    1. Používání vizuálních pomůcek pro rozvržení
    2. O používání souborů CCS k rozvržení stránky
    3. Navrhování responzivních webů pomocí nástroje Bootstrap
    4. Vytvoření a používání multimediálních dotazů v aplikaci Dreamweaver
    5. Zobrazení obsahu pomocí tabulek
    6. Barvy
    7. Responzivní návrh s využitím rozvržení s plovoucí mřížkou
    8. Funkce Extrakt v aplikaci Dreamweaver
  8. CSS
    1. Vysvětlení kaskádových seznamů stylů
    2. Rozvržení stránek pomocí panelu CSS Designer
    3. Použití preprocesorů CSS v aplikaci Dreamweaver
    4. Postup nastavení předvoleb stylu CSS v aplikaci Dreamweaver
    5. Přesunutí pravidel CSS v aplikaci Dreamweaver
    6. Převedení inline CSS na pravidlo CSS v aplikaci Dreamweaver
    7. Práce s tagy div
    8. Použití přechodů na pozadí
    9. Vytváření a úprava efektů přechodů v aplikaci Dreamweaver
    10. Formátování kódu
  9. Obsah stránky a datové zdroje
    1. Nastavení vlastností stránky
    2. Nastavení vlastností nadpisů CSS a vlastností odkazu CSS
    3. Práce s textem
    4. Vyhledání a nahrazení textu, tagů a atributů
    5. Panel DOM
    6. Úpravy v živém zobrazení
    7. Kódování dokumentů v aplikaci Dreamweaver
    8. Výběr a zobrazení elementů v okně dokumentu
    9. Nastavení vlastností textu v Inspektoru vlastností
    10. Kontrola pravopisu webové stránky
    11. Pomocí vodorovných linek v aplikaci Dreamweaver
    12. Přidání a úprava kombinací písma v aplikaci Dreamweaver
    13. Práce s datovými zdroji
    14. Vložení a aktualizace dat v aplikaci Dreamweaver
    15. Vytvoření a správa oblíbených datových zdrojů v aplikaci Dreamweaver
    16. Vložení a úprava obrázků v aplikaci Dreamweaver
    17. Přidání multimediálních objektů
    18. Přidání videa v aplikaci Dreamweaver
    19. Vložení videa HTML 5
    20. Vložit soubory SWF
    21. Přidání zvukových efektů
    22. Vložte zvuk HTML5 v aplikaci Dreamweaver
    23. Práce s položkami knihoven
    24. Používání arabského a hebrejského textu v aplikaci Dreamweaver
  10. Odkazy a navigace
    1. O odkazech a navigaci
    2. Vytváření odkazů
    3. Obrazové mapy
    4. Odstraňování problémů s odkazy
  11. Ovládací prvky a efekty jQuery
    1. Používání widgetů jQuery UI a jQuery Mobile v aplikaci Dreamweaver
    2. Používání efektů jQuery v aplikaci Dreamweaver
  12. Kódování webových stránek
    1. Informace o psaní kódu v aplikaci Dreamweaver
    2. Prostředí pro psaní kódu v aplikaci Dreamweaver
    3. Nastavení předvoleb kódování
    4. Přizpůsobení barevného zvýraznění kódu
    5. Psaní a úprava kódu
    6. Našeptávání kódu a dokončování kódu
    7. Sbalení a rozbalení kódu
    8. Opakované použití kódu v podobě výstřižků
    9. Linting kódu
    10. Optimalizace kódu
    11. Úprava kódu v zobrazení Návrh
    12. Práce s obsahem hlavičky stránek
    13. Vložení zahrnutí na straně serveru v aplikaci Dreamweaver
    14. Používání knihoven tagů v aplikaci Dreamweaver
    15. Import vlastních tagů do aplikace Dreamweaver
    16. Práce s funkcemi JavaScriptu (obecné pokyny)
    17. Použití vestavěných chování jazyka JavaScript
    18. O XML a XSLT
    19. Provádění transformace XSL na straně serveru v aplikaci Dreamweaver
    20. Provádění transformace XSL na straně klienta v aplikaci Dreamweaver
    21. Přidání entit znaku pro XSLT v aplikaci Dreamweaver
    22. Formátování kódu
  13. Pracovní postupy pro různé produkty
    1. Instalace a používání rozšíření v aplikaci Dreamweaver
    2. Aktualizace v rámci aplikace v aplikaci Dreamweaver
    3. Vkládání dokumentů sady Microsoft Office v aplikaci Dreamweaver (jen ve Windows)
    4. Práce s aplikacemi Fireworks a Dreamweaver
    5. Úprava obsahu na webech Dreamweaver za pomoci aplikace Contribute
    6. Integrace mezi aplikacemi Dreamweaver a Business Catalyst
    7. Vytváření e-mailových kampaní na míru
  14. Šablony
    1. O předlohách aplikace Dreamweaver
    2. Rozpoznání předloh a dokumentů založených na předloze
    3. Vytvoření předlohy aplikace Dreamweaver
    4. Vytváření upravitelných oblastí v šablonách
    5. Vytváření opakovaných oblastí a tabulek v aplikaci Dreamweaver
    6. Použijte volitelné oblasti v předlohách
    7. Definování upravitelných atributů tagu v aplikaci Dreamweaver
    8. Postup vytvoření vnořených šablon v aplikaci Dreamweaver
    9. Úprava, aktualizace nebo odstranění předloh
    10. Export a import obsahu XML v aplikaci Dreamweaver
    11. Aplikace nebo odstranění předlohy z existujícího dokumentu.
    12. Úprava obsahu v předlohách Dreamweaver
    13. Pravidla syntaxe pro tagy předloh v aplikaci Dreamweaver
    14. Nastavení předvoleb zvýraznění pro oblasti předlohy
    15. Výhody používání předloh v aplikaci Dreamweaver
  15. Mobilní zařízení a zařízení s více displeji
    1. Vytvoření multimediálních dotazů
    2. Změna orientace stránky pro mobilní zařízení
    3. Vytvoření webových aplikací pro mobilní zařízení pomocí aplikace Dreamweaver
  16. Dynamické weby, stránky a webové formuláře
    1. Informace o webových aplikacích
    2. Nastavení počítače pro vývoj aplikací
    3. Řešení problémů s připojením databází
    4. Odstranění skriptů připojení v aplikaci Dreamweaver
    5. Návrh dynamických stránek
    6. Přehled zdrojů dynamického obsahu
    7. Definice zdrojů dynamického obsahu
    8. Přidání dynamického obsahu na stránky
    9. Změna dynamického obsahu v aplikaci Dreamweaver
    10. Zobrazení záznamů databáze
    11. Zajišťování a řešení potíží s živými daty v aplikaci Dreamweaver
    12. Přidání uživatelského chování serveru v aplikaci Dreamweaver
    13. Vytváření formulářů pomocí aplikace Dreamweaver
    14. Shromažďování informací od uživatelů pomocí formulářů
    15. Vytváření a povolení formulářů ColdFusion v aplikaci Dreamweaver
    16. Vytváření webových formulářů
    17. Rozšířená podpora formátu HTML5 pro elementy formuláře
    18. Vytváření formuláře pomocí aplikace Dreamweaver
  17. Vizuální vytváření aplikací
    1. Vytváření hlavních a podrobných stránek v aplikaci Dreamweaver
    2. Vytváření vyhledávacích stránek a stránek s výsledky
    3. Vytvoření stránky vložení záznamu
    4. Vytvoření stránky pro aktualizaci záznamu v aplikaci Dreamweaver
    5. Budování stránek pro odstranění záznamu v aplikaci Dreamweaver
    6. Používání příkazů ASP k úpravě databáze v aplikaci Dreamweaver
    7. Vytvoření registrační stránky
    8. Vytvoření přihlašovací stránky
    9. Vytvoření stránky, na kterou mají přístup pouze autorizovaní uživatelé
    10. Zabezpečení složek ve službě ColdFusion pomocí aplikace Dreamweaver
    11. Používání komponent ColdFusion v aplikaci Dreamweaver
  18. Testování, náhled a publikování webových stránek
    1. Náhled stránek
    2. Náhled webových stránek Dreamweaver na více zařízeních
    3. Testování webu aplikace Dreamweaver

 

Naučte se používat předlohy aplikace Dreamweaver při návrhu „pevného“ rozvržení stránky a vytváření dokumentů založených na této předloze, které zdědí její rozvržení stránky.

Předloha (předloha) je speciální typ dokumentu, který se používá při návrhu „pevného“ rozvržení stránky. Pak můžete vytvářet dokumenty, založené na této předloze, které zdědí její rozvržení stránky. Když navrhujete předlohu, určíte obsah, který mohou v dokumentu, založeném na této předloze uživatelé upravovat, jako „upravitelný“. Předlohy umožňují autorům řídit, které prvky stránky mohou uživatelé předlohy – jako jsou autoři textu, grafici nebo jiní weboví vývojáři – upravovat. Existuje několik typů oblastí předlohy, které může autor předlohy do dokumentu zahrnout.

Poznámka:

Předlohy umožňují řídit velkou oblast návrhu a opakovaně používat kompletní rozvržení stránky. Pokud chcete opakovaně používat jednotlivé prvky návrhu, jako jsou informace o autorských právech k webovému místu nebo logo, vytvořte položky knihovny.

Předlohy umožňují aktualizovat najednou více stránek. Dokument, který je vytvořen z určité předlohy, zůstává s touto předlohou spojený (pokud tento dokument později neodpojíte). Můžete změnit určitou předlohu a tím okamžitě aktualizovat návrh všech dokumentů, které jsou na ní založené.

Poznámka:

Předlohy v aplikaci Dreamweaver se liší od předloh v některém jiném softwaru Adobe Creative Cloud v tom, že oddíly stránek v předlohách aplikace Dreamweaver jsou standardně pevné (neupravitelné).

Typy oblastí předlohy

Když uložíte dokument jako předlohu, většina oblastí dokumentu je zamknutá. Jako autor předlohy určíte, které oblasti dokumentu založeného na předloze bude možné upravovat, vložením upravitelných oblastí nebo upravitelných parametrů do předlohy.

Při vytváření předlohy můžete provádět změny v upravitelných i zamknutých oblastech. V dokumentu, založeném na předloze může ovšem uživatel předlohy dělat změny pouze v upravitelných oblastech; zamknuté oblasti nemůže měnit.

Existují čtyři typy oblastí předlohy:

Upravitelná oblast: Odemknutá oblast v dokumentu založeném na předloze – oddíl, který může uživatel předlohy upravit. Autor předlohy může určit jakoukoli oblast předlohy jako upravitelnou. Aby byla předloha efektivní, měla by obsahovat alespoň jednu upravitelnou oblast; jinak by nebylo možné upravovat stránky založené na této předloze. Podrobné informace o upravitelných oblastech naleznete v tématu Vytváření upravitelných oblastí v předlohách.

Opakovaná oblast: Oddíl rozvržení dokumentu, který je nastavený tak, aby uživatel předlohy mohl podle potřeby přidávat nebo odstraňovat kopie opakované oblasti v dokumentu založeném na této předloze. Můžete například nastavit řádek tabulky tak, aby se opakoval. Opakované oblasti jsou upravitelné tak, že uživatel předlohy může upravit obsah opakujícího se prvku, zatímco vlastní návrh je pod kontrolou autora předlohy.

Existují dva typy opakovaných oblastí, které můžete vložit do předlohy: opakovanou oblast a opakovanou tabulku. Postup práce s opakovanými oblastmi naleznete v tématu Vytváření opakovaných oblastí a tabulek v aplikaci Dreamweaver.

Volitelná oblast: Oddíl předlohy, kde se nachází obsah (jako je text nebo obraz), který se může nebo nemusí objevit v dokumentu. Ve stránce založené na předloze uživatel obvykle určuje, zda se tento obsah zobrazí. Další informace naleznete v tématu Volitelná oblast.

Upravitelný atribut tagu: Umožňuje odemknout určitý atribut tagu v předloze, aby bylo možné tento atribut upravit ve stránce založené na předloze. Můžete například „zamknout“, který obraz se objeví v dokumentu, ale nechat uživatele předlohy nastavit zarovnání doleva, doprava nebo na střed. Další informace naleznete v tématu Definování upravitelných atributů tagu v aplikaci Dreamweaver.

Odkazy v předlohách

Když vytvoříte soubor předlohy tak, že uložíte existující stránku jako předlohu, nová předloha ve složce Předlohy a všechny odkazy v tomto souboru se aktualizují, aby jejich Cesty relativní k dokumentu byly správné. Později, když vytvoříte dokument založený na této předloze a uložíte ho, všechny odkazy relativní k dokumentu se znovu aktualizují tak, aby stále odkazovaly na správné soubory.

Když do souboru předlohy přidáte nový odkaz relativní k dokumentu, je snadné zadat špatnou cestu, pokud napíšete cestu přímo do textového pole odkazu v inspektoru Vlastnosti. Správná cesta v souboru předlohy je cesta ze složky Předlohy k odkazovanému dokumentu, ne cesta ze složky dokumentu založeného na předloze k odkazovanému dokumentu. Když vytváříte odkazy v předlohách, zkontrolujte pomocí ikony složky nebo ikony Ukázat na soubor v panelu Vlastnosti, že existují správné cesty pro odkazy.

Serverové skripty v předlohách a v dokumentech založených na předlohách

Některé serverové skripty se vkládají úplně na začátek nebo na konec dokumentu (před tag <html> nebo za tag </html>). Takové skripty vyžadují v předlohách a v dokumentech založených na předlohách zvláštní přístup. Pokud změníte v předloze kód skriptu před tagem <html> nebo za tagem </html>, tyto změny se normálně nekopírují do dokumentů založených na této předloze. To může způsobit chyby serveru, pokud ostatní serverové skripty v hlavním těle předlohy závisely na skriptech, které se nezkopírovaly. Výstraha vás upozorní, pokud v předloze změníte skripty před tagem <html> nebo za tagem </html>.

Pokud se chcete tomuto problému vyhnout, můžete vložit následující kód do sekce head předlohy:

<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->

Když je tento kód v předloze, změny ve skriptech před tagem <html> nebo za tagem </html> se zkopírují do dokumentů založených na této předloze. Nebudete ale už pak mít možnost upravit tyto skripty v dokumentech založených na této předloze. Můžete si tedy vybrat a buď upravovat tyto skripty v předloze, nebo v dokumentech založených na této předloze, ale ne v obou zároveň.

Parametry předlohy

Parametry předlohy označují hodnoty pro řízení obsahu v dokumentech založených na předloze. Použijte parametry předlohy pro volitelné oblasti nebo upravitelné atributy tagů nebo k nastavení hodnot, které chcete předat do připojeného dokumentu. Pro každý parametr vyberete název, typ dat a výchozí hodnotu. Každý parametr musí mít jedinečný název, ve kterém se rozlišují velká a malá písmena. Musí to být jeden z pěti povolených typů dat: text, boolovská hodnota, barva, URL nebo číslo.

Parametry předlohy se předají do dokumentu jako parametry instance. Ve většině případů může uživatel předlohy upravit výchozí hodnotu parametru, pokud chce přizpůsobit, co se objeví v dokumentu založeném na předloze. V ostatních případech může autor předlohy určit, co se objeví v dokumentu, na základě hodnoty výrazu předlohy.

Výrazy předlohy

Výrazy předlohy jsou příkazy, které vypočítají nebo vyhodnotí určitou hodnotu.

Výraz můžete použít k uložení určité hodnoty a jejímu zobrazení v dokumentu. Výraz může být například tak jednoduchý, jako hodnota parametru, například @@(Param)@@, nebo dost složitý na to, aby vypočítal hodnoty, podle kterých se střídavě mění barva pozadí řádků tabulky, například @@((_index & 1) ? červená : modrá)@@.

Můžete také definovat výrazy pro jednoduché a vícenásobné podmínky if. Když je výraz použitý v podmíněném příkazu, aplikace Dreamweaver ho vyhodnotí jako true nebo false. Pokud je podmínka pravdivá (true), volitelná oblast se v dokumentu založeném na předloze zobrazí; pokud je nepravdivá (false), nezobrazí se.

Výrazy můžete definovat v zobrazení Kód nebo v dialogovém okně Volitelná oblast, když vkládáte volitelnou oblast.

V zobrazení Kód jsou dva způsoby, jak definovat výrazy předlohy: použít komentář <!-- TemplateExpr expr="váš výraz"--> nebo @@(váš výraz)@@. Když vložíte výraz do kódu předlohy, objeví se v zobrazení Návrh značka výrazu. Když použijete tuto předlohu, aplikace Dreamweaver vyhodnotí výraz a zobrazí jeho hodnotu v dokumentu založeném na předloze.

Jazyk výrazů předlohy

Jazyk výrazů předlohy je malá část jazyka JavaScript a používá syntaxi a pravidla priority jazyka JavaScript. Použijte operátory jazyka JavaScript k zápisu výrazů, jako je tento výraz:

@@(firstName+lastName)@@

Jsou podporovány následující vlastnosti a operátory:

  • číselné literály, řetězcové literály (pouze syntaxe dvojitých uvozovek), boolovské literály (true nebo false),

  • odkaz na proměnnou (viz seznam definovaných proměnných dále v této sekci),

  • odkazy do pole („tečkový“ operátor),

  • unární operátory: +, -, ~, !,

  • binární operátory: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !,=, <<, >>,

  • podmíněný operátor: ?:,

  • závorky: ().

    Používají se následující typy dat: boolovský, 64bitový IEEE s plovoucí čárkou, řetězec a objekt. Předlohy aplikace Dreamweaver nepodporují používání typů jazyka JavaScript „null“ nebo „undefined“. Ani neumožňují, aby byly skalární typy implicitně převedeny na objekt; výraz "abc".length by proto způsobil chybu, místo aby vrátil hodnotu 3.

    K dispozici jsou pouze objekty, definované modelem objektu výrazu. Jsou definovány následující proměnné:

    _document

    Obsahuje data předlohy na úrovni dokumentu s polem pro každý parametr v předloze.

    _repeat

    Definován pouze pro výrazy, které se objevují uvnitř opakované oblasti. Poskytuje vestavěné informace o oblasti.

    _index

    Číselný index (od 0) platné položky

    _numRows

    Celkový počet položek v této opakované oblasti

    _isFirst

    Pravdivý, když je platná položka první položkou ve své opakované oblasti.

    _isLast

    Pravdivý, když je platná položka poslední položkou ve své opakované oblasti.

    _prevRecord

    Objekt _repeat pro předchozí položku. Je chyba použít tuto vlastnost pro první položku v oblasti.

    _nextRecord

    Objekt _repeat pro následující položku. Je chyba použít tuto vlastnosti pro poslední položku v oblasti.

    _parent

    Ve vnořené opakované oblasti vrátí objekt _repeat pro uzavírající (vnější) opakovanou oblast. Je chyba pokoušet se použít tuto vlastnost mimo vnořenou opakovanou oblast.

    Při vyhodnocování výrazu jsou implicitně dostupná všechna pole objektu _document a objektu _repeat. Například pokud chcete použít parametr titulu dokumentu, můžete zadat title místo _document.title.

    V případech, kde dojde ke konfliktu polí, pole objektu _repeat mají přednost před poli objektu _document. Nemělo by tedy být nutné výslovně odkazovat na _document nebo _repeat kromě případu, kdy by _document mohl být potřeba uvnitř opakované oblasti, aby odkazoval na parametry dokumentu, které jsou skryté parametry opakované oblasti.

    Když jsou použity vnořené opakované oblasti, jsou k dispozici implicitně pouze pole z nejvnitřnějších opakovaných oblastí. Na vnější oblasti se musí výslovně odkazovat pomocí _parent.

Vícenásobná podmínka if v kódu předlohy

Můžete také definovat výrazy předlohy pro jednoduché a vícenásobné podmínky if. Tento příklad ukazuje definici parametru s názvem „Dept“, nastavení jeho počáteční hodnoty a definici vícenásobné podmínky if, která určuje, které logo se zobrazí.

Následující příklad kódu, který by bylo možné zadat do sekce head v předloze:

<!-- TemplateParam name="Dept" type="number" value="1" -->

Následující podmíněný příkaz kontroluje hodnotu, přiřazenou parametru Dept. Když je podmínka pravdivá nebo souhlasí, zobrazí se příslušný obraz.

<!-- TemplateBeginMultipleIf --> 
<!-- checks value of Dept and shows appropriate image--> 
<!-- TemplateBeginIfClause cond="Dept == 1" --> <img src=".../sales.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../support.gif"> <!-- TemplateEndIfClause--> 
<!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../spacer.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateEndMultipleIf -->

Když vytváříte dokument založený na předloze, automaticky se do něho předají parametry předlohy. Uživatel předlohy určí, který obraz se zobrazí.

Logo Adobe

Přihlaste se ke svému účtu.