Vizuální multimediální dotazy

Podpora pro linting kódu

V této nové verzi aplikace Dreamweaver můžete ladit svůj kód a vyhledávat v něm pomocí lintingu běžné chyby. Linting představuje proces, kdy dojde ke spuštění programu a označení potenciálních chyb v kódu. Aplikace Dreamweaver dokáže linting používat u souborů HTML, CSS a JavaScript při jejich načtení, uložení nebo upravení. Chyby a varování jsou poté uvedeny na novém panelu výstupu.

Další informace naleznete v tématu Linting kódu.

Podpora doplňku Emmet

Jste vášnivým vývojářem, který v aplikaci Dreamweaver vytváří nejeden řádek kódu? Ušetřete čas při psaní kódu díky zkratkám Emmet. Tyto zkratky se snadno pamatují a píší a po stisknutí klávesy Tab se v zobrazení kódu rozbalí do úplného kódu.

Podrobné informace naleznete v části Vložení kódu pomocí doplňku Emmet.

Preprocesory CSS

Náhled obrázku a barvy v zobrazení kódu

Náhled obrazu

Aplikace Dreamweaver nově umožňuje zobrazení náhledu obrázku v zobrazení kódu umístěním kurzoru na jeho adresu URL.

Náhledy obrázků jsou nyní dostupné i pro cesty ke vzdáleným obrázkům, jako např. <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" />.

Pokud aplikace Dreamweaver nedokáže zobrazit náhled u vzdálených umístění, zobrazí se zpráva „Nelze načíst obrázek“.

Náhled je možné zobrazit u následujících typů obrázku:

JPEG
JPG
PNG
GIF
BMP
SVG

Zobrazení náhledu obrázku umístěním kurzoru myši nad adresu URL je dostupné v následujících případech:

• url( );
• data-uri( )
• Hodnota atributu src tagu img

Náhled barvy

Byl dále zdokonalen náhled datového zdroje v zobrazení kódu. Aplikace Dreamweaver nově umožňuje zobrazení náhledu barev v zobrazení kódu umístěním kurzoru na jejich hodnoty. Podporovány jsou následující formáty:

Hexadecimální hodnoty barvy s 3 a 6 číslicemi: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
Předem definované názvy barev: Olivová, Modrozelená, Červená atd.

Nové výstřižky kódu

Výstřižky představují části kódu, které můžete ve svém projektu používat opakovaně. V této verzi aplikace Dreamweaver naleznete nové a aktualizované výstřižky kódu:

• Boostrap_Snippets
• CSS_Animation_And_Transitions
• CSS_Effects
• CSS_Snippets
• HTML_Snippets
• Výstřižky kódu JavaScript (aktualizováno)
• PHP_Snippets
• Preprocessor_Snippets
• Responsive_Design_Snippets

Informace o použití výstřižků kódu naleznete v části Práce s výstřižky kódu.

Integrace nástroje Bootstrap

Nově můžete v aplikaci Dreamweaver otevírat webové stránky vytvořené ve frameworku Bootstrap (verze 3 a novější) a stránky upravit s využitím kódu nebo funkcí pro vizuální úpravy návrhu. Pokud názvy souborů obsahují text „bootstrap“, aplikace Dreamweaver dokáže rozpoznat přidružené soubory CSS. 

Komponenty Bootstrap můžete připojit také v rámci aplikace Dreamweaver (panel Vložit) a prostřednictvím snadné a rychlé úpravy mřížky svůj design přizpůsobit jednotlivým portům zobrazení.

Podrobné informace naleznete v části Práce se soubory Bootstrap.

Výchozí šablony nástroje Bootstrap

Aplikace Dreamweaver nově nabízí šablony nástroje Bootstrap, které vám urychlí práci při vytváření responzivních návrhů. Následující šablony nástroje Bootstrap naleznete v dialogovém okně Nový dokument:

• Bootstrap-eCommerce
• Bootstrap-One PageBootstrap-Portfolio
• Bootstrap-The Agency
• Bootstrap-The Grid

Skládání kódu

Skládání kódu je nově dostupné u souborů HTML, CSS, LESS, SASS, SCSS, JS, PHP, XML a SVG a využívá bloky tagů. Pokud v zobrazení kódu umístíte kurzor myši na sloupec s číslem řádku, zobrazí se u čísel řádku malý trojúhelník. Kliknutím na tento trojúhelník můžete sbalit a rozbalit bloky kódu. Tato nová funkce skládání kódu nahrazuje stávající funkci, která využívala výběr.

Ikony pro skládání kódu (převrácené trojúhelníky) se v zobrazení kódu zobrazí u všech bloků tagů, které obsahují více než dva řádky kódu.

U funkcí Kopírovat / Vyjmout / Vložit a přetažení se zachová stav skládaní kódu. Například při kopírování sbaleného bloku kódu bude zkopírovaný text vložen také jako sbalený blok.

Skládání kódu v souborech HTML

Na rozdíl od dřívější funkce si sbalený kód nově zachová závěrečný tag a jeho vykreslení proběhne ve srovnání s předchozí implementací odlišně.

Byl zvýšen počet znaků, které lze zobrazit ve sbaleném bloku kódu. Díky tomu je vám k dispozici náhled případných výchozích atributů ve sbaleném bloku kódu. Pokud jsou například sbalenému tagu Div přiděleny atributy „id“ a „class“, sbalený blok bude vypadat následovně:

V systému Windows můžete zobrazit náhled kódu ve sbaleném bloku umístěním kurzoru na tento sbalený kód. Sbalený blok se automatický rozbalí v případě, že se kód ve sbaleném bloku aktivuje skrze funkce Selektor tagů, Najít a nahradit, Přejít na řádek, Rychlé zobrazení elementu, Živé zobrazení nebo Vrácení zpět / Opětovné provedení. Po aktivaci oblasti mimo blok kódu se tento blok opět automaticky sbalí.

Skládání kódu v souborech CSS, LESS, SASS, SCSS a JS

Nově můžete sbalit i bloky kódu v souborech CSS, LESS, SASS, SCSS a JS uzavřené složenými závorkami.

Umístěte kurzor na oblast pro sbalení kódu na libovolném řádku obsahujícím úvodní složenou závorku „{“.

Kliknutím na možnost Sbalit sbalíte obsah uvnitř páru složených závorek a vytvoříte náhled ve tvaru „{...}“

Skládání kódu v souborech PHP

V souborech PHP je možné společně s bloky kódu PHP sbalit také elementy HTML a bloky kódů JS a CSS.

Sbalit je možné každý blok PHP uvnitř parametrů „<?php“ a „?>“.

Umístěním kurzoru na oblast pro sbalení kódu v libovolném řádku s parametrem „<?php“ a kliknutím na ikonu pro sbalení můžete celý blok kódu sbalit.