Adobe Dreamweaver umožňuje vizuálně vytvářet a upravovat webové stránky, aniž byste se museli starat o zdrojový kód. Někdy je však vhodné s kódem pracovat, neboť získáte větší kontrolu nad výsledkem a můžete řešit případné problémy s webovou stránkou. Dokumenty a soubory vytváříte a manipulujete s nimi pomocí různých prvků, jako například panely, lišty a okna. Jakékoli uspořádání těchto prvků se nazývá pracovní plocha.
Základní prvky pracovní plochy Dreamweaveru
Pracovní plocha aplikace Dreamweaver umožňuje zobrazovat dokumenty a vlastnosti objektů. Na úvodní obrazovce uvidíte soubory, na kterých jste v poslední době pracovali. Pomocí ikony Hledat v pravé horní části této obrazovky můžete využít také funkci hledání. Po kliknutí na možnost Vytvořit nový můžete začít vytvářet nové soubory aplikace Dreamweaver. Pokud už ve svém systému nějaké soubory máte, klikněte na tlačítko Otevřít.
Následující seznam popisuje hlavní komponenty pracovní plochy:
- Aplikační panel: Obsahuje přepínač pracovní plochy, nabídky (pouze Windows) a další ovladače aplikace.
- Panel nástrojů dokumentu: Umožňuje rychlé přepínání mezi různými zobrazeními.
- Okno dokumentu: Zobrazuje aktuální dokument. Když je okno Dokument maximalizované (výchozí zobrazení), na horním okraji okna Dokument se objeví záložky zobrazující názvy všech otevřených dokumentů.
- Přepínač pracovní plochy: Umožňuje výběr z několika přednastavených pracovních ploch nebo vytvoření vlastní plochy.
- Panely: Pomáhají monitorovat a upravovat práci. Mezi příklady patří panel Vložit, panel CSS Designer a panel Soubory. Panely mohou být seskupeny, svázány nebo ukotveny.
- Zobrazení kódu: Slouží pro přímou práci se zdrojovým kódem.
- Stavový řádek: Zobrazuje aktuální rozměry okna dokumentu v obrazových bodech a hierarchii tagů.
- Selektor tagů: Zobrazuje hierarchii tagů, které jsou spojeny s aktuálním výběrem. Umožňuje vybrat, upravit nebo odstranit tagy, aniž byste opustili zobrazení návrhu.
- Živé zobrazení: Nabízí realističtější náhled na to, jak by dokument vypadal v prohlížeči, a umožňuje interakci s dokumentem snadnou jako v prohlížeči. Přímo v Živém zobrazení je možné měnit elementy HTML a okamžitě prohlížet náhled změn.
- Panel nástrojů: Je umístěn svisle na levé straně okna dokumentu a je viditelný v každém ze zobrazení.
Inspektor vlastností
Inspektor vlastností (Okno > Vlastnosti) umožňuje prohlížení a úpravy většiny běžných vlastností aktuálně vybraného elementu stránky, například textu nebo vloženého objektu. Obsah Inspektoru vlastností se mění podle vybraného elementu. Přejděte na další vlastnost stiskem klávesy Tab.
Jak Inspektor tagů, tak inspektor Vlastnosti umožňují zobrazit a upravovat atributy tagu. Inspektor tagů umožňuje zobrazit a upravovat každý atribut spojený s daným tagem. Pod oknem dokumentu se objeví inspektor Vlastnosti textu nebo objektu.
Čtěte také: Jak na montáž střešního okna?
Panel Vložit
Panel Vložit (Okno > Vložit) obsahuje tlačítka pro vytváření a vkládání objektů, jako jsou tabulky, obrázky a odkazy. Některé kategorie mají tlačítka s rozbalovacími nabídkami. Když vyberete volbu z rozbalovací nabídky, stane se z ní výchozí akce tohoto tlačítka. Například kliknutím na tlačítko Tabulka na panelu Vložit můžete vložit tabulku.
Panel Vložit nabízí různé kategorie:
- Běžné: Umožňuje vytvářet a vkládat nejběžněji používané elementy HTML.
- Formuláře: Obsahuje tlačítka pro vytváření formulářů a vkládání prvků formuláře.
- jQuery Mobile: Obsahuje tlačítka pro vytváření webů, které používají rozhraní jQuery Mobile.
- jQuery UI: Umožňuje vkládat elementy jQuery UI.
Panel DOM
Panel DOM nabízí přístup k interaktivnímu stromu HTML se statickým i dynamickým obsahem. Toto zobrazení lze použít k vizuálnímu mapování elementů v živém zobrazení doplněném o značky HTML a použité selektory v nástroji CSS Designer. Panel DOM otevřete výběrem příkazu Okna > DOM. Na panelu DOM lze měnit výhradně statický obsah. Element či uzel můžete vybrat tak, že na něj kliknete. Jestliže budete chtít element nebo uzel kopírovat, klepněte na něj pravým tlačítkem a poté klepněte na možnost Kopírovat. Budete-li chtít element či uzel vložit, klepněte na element nebo uzel, do kterého chcete zkopírované elementy vnořit.
Důležité: Pokud stránka obsahuje skript v jazyce JavaScript, nabídka dostupná po kliknutí pravým tlačítkem na panelu DOM se na chvíli zobrazí a poté bude nedostupná. Podle potřeby můžete upravovat tagy, třídy a ID dvojitým kliknutím na tyto objekty na panelu DOM. Můžete také přidávat další třídy a ID oddělené mezerou. Rady při psaní kódu se zobrazí, jakmile začnete psát název tagu, třídy nebo ID. Pokud budete chtít omezit rady pouze na třídy, začněte slovo psát tečkou.
Přizpůsobení pracovní plochy
Svoji pracovní plochu můžete přizpůsobit přidáním nebo odebráním panelů podle vašich požadavků. V přepínači pracovní plochy na pruhu Aplikace vyberte položku Správa pracovních ploch a otevřete tak dialogové okno Spravovat pracovní plochy.
Čtěte také: Vše o černé dekorační liště na okno: Design a funkčnost
Správa panelů
Panely můžete sbalit do ikon a omezit tím přeplnění pracovní plochy. Chcete-li změnit ikony panelů tak, aby se zobrazovaly pouze ikony (a nikoli popisky), upravte šířku ukotvení, dokud text nezmizí. Chcete-li panel ukotvit, přetáhněte ho za jeho záložku do zásuvky, nad, pod nebo mezi ostatní panely. Chcete-li ukotvit skupinu panelů, přetáhněte ji za její titulní pruh (prázdný pruh nad záložkami) do zásuvky. Chcete-li odstranit panel nebo skupinu panelů, přetáhněte je mimo zásuvku za záložku nebo titulní pruh. Když přetahujete panel mimo ukotvení, ale jinam než do cílové zóny přetažení, panel volně plave. Plovoucí panel lze umístit kdekoli na pracovní ploše. Poklepejte na záložku, chcete-li minimalizovat nebo maximalizovat panel, skupinu panelů nebo svázané panely.
Při přemísťování panelů uvidíte modře zvýrazněné cílové zóny přetažení, což jsou oblasti, kam můžete panel přemístit. Můžete například posunout panel nahoru nebo dolů v zásuvce jeho přetažením do úzké modré cílové zóny přetažení nad nebo pod jiným panelem. Stiskněte klávesu Ctrl (Windows) nebo Command (Mac OS), pokud nechcete, aby se panel při přemísťování ukotvil.
Vytváření a úprava pracovních ploch
Můžete vytvořit vlastní pracovní plochu přesouváním oken a panelů dokumentu a manipulací s nimi. Můžete také ukládat pracovní plochy a přepínat mezi nimi. V aplikaci Dreamweaver zvolte možnosti Okno > Rozvržení pracovní plochy > Nová pracovní plocha. V přepínači pracovní plochy v pruhu Aplikace vyberte položku Správa pracovních ploch, vyberte pracovní plochu a klikněte na tlačítko Odstranit. Chcete-li obnovit jednotlivé pracovní plochy, klikněte na položky Okna > Pracovní plocha > Obnovit název pracovní plochy.
Vizuální pomůcky a mřížka
Aplikace Dreamweaver poskytuje několik typů vizuálních pomůcek, které vám pomohou navrhovat dokumenty a přibližně předvídat, jak se zobrazí v prohlížečích. Pomocí pravítek můžete měřit, uspořádat a naplánovat rozvržení. Vodítka jsou čáry, které přetáhnete do dokumentu z pravítek. Pomáhají přesněji umístit a zarovnat objekty. Mřížka zobrazuje v okně dokumentu systém vodorovných a svislých čar. Je užitečná pro přesné umísťování objektů. Můžete určit, aby se absolutně polohované elementy stránky při přesunutí automaticky přitahovaly na mřížku, a změnit mřížku nebo řídit chování přitáhnutí pomocí nastavení mřížky.
Můžete také použít obkreslovaný obraz jako vodítko, například pro znovu vytvoření návrhu stránky vytvořeného v grafické aplikaci. Obkreslovaný obraz je viditelný pouze v aplikaci Dreamweaver (není viditelný při otevření stránky v prohlížeči). Chcete-li přesně zadat polohu obkreslovaného obrazu, zadejte hodnoty souřadnic do textových polích X a Y. Chcete-li přesunout obraz o 1 obrazový bod, použijte kurzorové klávesy. Chcete-li přesunout obraz o 5 obrazových bodů, stiskněte klávesu Shift a kurzorovou klávesu.
Čtěte také: Moderní interiér s posuvnými dveřmi
Práce s kódem v zobrazení Návrh
Dreamweaver umožňuje upravovat kód při práci v zobrazení Návrh. Abyste si mohli rychle prohlédnout, vložit nebo upravit tagy HTML, aniž byste museli opustit zobrazení Návrh, použijte Rychlý editor tagů. Pokud zadáte v Rychlém editoru tagů neplatný kód HTML, Dreamweaver se pokusí kód opravit; doplní podle potřeby koncové uvozovky a hranaté závorky. Abyste nastavili volby Rychlého editoru tagů, otevřete Rychlý editoru tagů tak, že stisknete kombinaci kláves Ctrl-T (Windows) nebo Apple-T (Macintosh). Můžete se přepínat mezi jednotlivými režimy stisknutím kombinace kláves Ctrl+T (Windows) nebo Cmd+T (Macintosh), zatímco Rychlý editor tagů zůstává aktivní.
Rychlý editor tagů zahrnuje nabídku rad k atributům, která obsahuje všechny platné atributy tagu, který upravujete nebo vkládáte. Nabídku rad můžete také vypnout nebo změnit zpoždění, se kterým se nabídka v Rychlém editoru tagů rozbaluje. Začněte zadávat název tagu nebo atributu. Výběr v nabídce Rady při psaní kódu skočí na první položku, která začíná písmeny, které jste zadali. Použijte klávesy se šipkami nahoru a dolů, abyste vybrali položku. Použijte posuvník, abyste nalezli položku.
Správa skriptů
Napište pro vaši stránku skript JavaScript nebo VBScript, aniž byste opustili zobrazení Návrh. Vytvořte v dokumentu odkaz na externí soubor skriptu, aniž byste opustili zobrazení Návrh. Upravte skript, aniž byste opustili zobrazení Návrh. Dříve než začnete, vyberte volbu Zobrazení > Vizuální pomůcky > Neviditelné elementy, abyste se ujistili, že značky skriptu se na stránce objeví. Skript se objeví v dialogovém okně Vlastnosti skriptu. Můžete snadno připojit chování jazyka JavaScript (na straně klienta) k elementům stránky, když použijete záložku Chování v Inspektoru tagů.
Práce se sadami dat Spry
Widgety Spry jsou v aplikaci Dreamweaver CC a novější nahrazeny widgety jQuery. Spry sada dat je v podstatě objekt JavaScript, který obsahuje množinu vámi zadaných dat. Pomocí aplikace Dreamweaver můžete takový objekt rychle vytvořit a načíst do něj data z datového zdroje (jako je soubor XML nebo HTML). Výsledná sada dat obsahuje pole dat, které má podobu standardní tabulky s řádky a sloupci. Sadu dat si můžete představit jako virtuální úložný kontejner, jehož struktura je tvořena řádky a sloupci. Při tvorbě Spry sady dat v aplikaci Dreamweaver můžete také zadat, jak mají být data zobrazena na webové stránce. Můžete zobrazit veškerá data v kontejneru nebo můžete zobrazit pouze vybrané části těchto dat.
Vytvoření sady dat z HTML zdroje
Při prvním vytvoření sady dat je výchozí název ds1. V místní nabídce Vyberte datový typ vyberte volbu HTML. Zadejte název nové sady dat. Zadejte prvky HTML, které má aplikace Dreamweaver ve zdroji dat vyhledat. Zadejte cestu k souboru, který obsahuje zdroj dat HTML. Můžete zadat relativní cestu k lokálnímu souboru ve svém webovém místě (např. data/html_data.html) nebo absolutní adresu URL webové stránky (pomocí zápisu HTTP nebo HTTPS). Aplikace Dreamweaver vykreslí obsah zdroje dat HTML v okně Výběr dat a zobrazí vizuální značky vedle prvků, které lze použít jako kontejnery pro sadu dat. Prvek, který chcete použít, musí mít přiřazen jedinečné ID.
Po dokončení nastavení na obrazovce Zadat zdroj dat klepněte na tlačítko Hotovo, chcete-li vytvořit sadu dat ihned, nebo klepněte na tlačítko Další, chcete-li přejít na obrazovku Nastavit možnosti dat. (Volitelně) Typy sloupců sady dat můžete nastavit tak, že vyberete sloupec a v místní nabídce Typ zvolíte typ sloupce. (Volitelně) Způsob třídění dat můžete zadat tak, že v místní nabídce Uspořádat sloupce kliknete na sloupec, podle něhož má být třídění prováděno. (Volitelně) Chcete-li mít vždy přístup k nejaktuálnějším datům v sadě dat, vyberte volbu Zakázat ukládání dat do mezipaměti. Po dokončení nastavení na obrazovce Nastavit možnosti dat klikněte na tlačítko Hotovo, chcete-li vytvořit sadu dat ihned; nebo klikněte na tlačítko Další, chcete-li přejít na obrazovku Vyberte možnosti vložení.
Vytvoření sady dat z XML zdroje
Zadejte název nové sady dat. Při prvním vytvoření sady dat je výchozí název ds1. Zadejte cestu k souboru, který obsahuje zdroj dat XML. Můžete zadat relativní cestu k lokálnímu souboru ve svém webovém místě (např. datafiles/data.xml) nebo absolutní adresu URL webové stránky (pomocí zápisu HTTP nebo HTTPS). Aplikace Dreamweaver vykreslí obsah zdroje dat XML v okně Elementy řádku a zobrazí strom datových prvků XML, které je možné vybrat. Vyberte prvek obsahující data, která chcete zobrazit. Jakmile vyberete kontejnerový prvek pro sadu dat, aplikace Dreamweaver zobrazí náhled sady dat v okně Datový náhled.
Po dokončení nastavení na obrazovce Zadat zdroj dat klikněte na tlačítko Hotovo, chcete-li vytvořit sadu dat ihned; nebo klikněte na tlačítko Další, chcete-li přejít na obrazovku Nastavit možnosti dat. (Volitelně) Typy sloupců sady dat můžete nastavit tak, že vyberete sloupec a v místní nabídce Typ zvolíte typ sloupce. (Volitelně) Způsob třídění dat můžete zadat tak, že v místní nabídce Uspořádat sloupec klepnete na sloupec, podle něhož má být třídění prováděno. (Volitelně) Chcete-li ze sady dat vyloučit duplikátní řádky, vyberte volbu Odfiltrovat duplikátní řádky. (Volitelně) Chcete-li mít vždy přístup k nejaktuálnějším datům v sadě dat, vyberte volbu Zakázat ukládání dat do mezipaměti. Chcete-li, aby byla data obnovována automaticky, vyberte volbu Automaticky obnovit data a zadejte čas obnovení v milisekundách.
Možnosti vložení sady dat
Na obrazovce Vyberte možnosti vložení máte možnost zadat, jak budou hodnoty v sadě dat na stránce zobrazeny. Data můžete zobrazit pomocí dynamické Spry tabulky, hlavního/podrobného rozvržení, rozvržení s překrývajícími se kontejnery (jeden sloupec) nebo pomocí rozvržení s překrývajícími se kontejnery s oblastí Spotlight (dva sloupce).
Dynamická Spry tabulka
Tuto volbu vyberte, chcete-li zobrazit data v dynamické Spry tabulce. Spry tabulky nabízejí dynamické třídění sloupců a jiné interaktivní funkce. Chcete-li sloupec z tabulky odstranit, vyberte jeho název a klepněte na symbol mínus (-). Chcete-li sloupec do tabulky přidat, klepněte na symbol plus (+) a vyberte název sloupce. Chcete-li sloupec přesunout, vyberte jeho název a klepněte na šipku nahoru či dolů. Pořadí tříd lichý řádek, sudý řádek, kurzor-nad a výběr v seznamu stylů je velmi důležité.
Hlavní/podrobné rozvržení
Tuto volbu vyberte, chcete-li zobrazit data v rozvržení Hlavní/podrobné. Rozvržení Hlavní/podrobné umožňuje uživatelům klepnout na položku v hlavní (levé) oblasti, čímž dojde k aktualizaci údajů v oblasti podrobností (vpravo). Chcete-li sloupec z hlavní oblasti odstranit, vyberte jeho název a klepněte na symbol mínus (-). Předchozí kroky zopakujte také pro panel Sloupce podrobností. (Volitelně) Pro data v oblasti podrobností nastavte různé typy kontejnerů. Vyberte název sloupce podrobností a v místní nabídce Typ kontejneru vyberte kontejner, který pro tento sloupec chcete použít.
Rozvržení s opakujícími se kontejnery
Tuto volbu vyberte, chcete-li pro zobrazení dat na stránce použít strukturu s opakujícími se kontejnery. Chcete-li sloupec z překrývajících se kontejnerů odstranit, vyberte jeho název a klepněte na symbol mínus (-). (Volitelně) Pro data v kontejneru nastavte různé typy kontejnerů. Vyberte název sloupce sady dat a v místní nabídce Typ kontejneru vyberte kontejner, který pro tento sloupec chcete použít.
Rozvržení s opakujícími se kontejnery s oblastí Spotlight
Tuto volbu vyberte, chcete-li pro zobrazení dat na stránce použít strukturu s opakujícími se kontejnery a s oblastí Spotlight v každém kontejneru. Oblast Spotlight obvykle obsahuje obrázek. Rozvržení s oblastí Spotlight se podobá rozvržení s překrývajícími se kontejnery. Rozdíl je v tom, že při použití oblasti Spotlight je zobrazení dat rozděleno do dvou sloupců (v rámci jednoho kontejneru). Chcete-li sloupec z oblasti Spotlight odstranit, vyberte jeho název a klepněte na symbol mínus (-). Předchozí kroky zopakujte také pro panel Vrstvené sloupce. (Volitelně) Pro data v oblasti Spotlight nastavte různé typy kontejnerů. Vyberte název sloupce sady dat a v místní nabídce Typ kontejneru vyberte kontejner, který pro tento sloupec chcete použít.
Nevkládat kód HTML
Vyberte volbu Nevkládat kód HTML. Pokud tuto volbu vyberete, aplikace Dreamweaver vytvoří sadu dat, ale nepřidá na stránku žádný kód HTML. Sada dat bude přístupná na panelu Svázání (Okno > Svázání) a vy budete moci ručně přetahovat části dat ze sady na stránku. I když vytvoříte sadu dat bez vložení rozvržení, můžete do ní kdykoli vložit jedno z dostupných rozvržení HTML.
Aplikace Dreamweaver vytvoří sadu dat, a pokud jste vybrali volbu rozvržení, zobrazí na stránce rozvržení a vyhrazená místa pro data. Podíváte-li se do zobrazení Kód, zjistíte, že aplikace Dreamweaver přidala do hlavičky odkazy na soubory SpryData.js a SpryHTMLDataSet.js nebo xpath.js a SpryData.js. Tyto soubory jsou důležité součásti frameworku Spry, jejichž funkce je svázána se stránkou. Pokud tento kód ze stránky odstraníte, sada dat nebude fungovat.
tags: #adobe #dreamweaver #jak #pridat #okno #na