Overzicht van nieuwe functies - mei 2015

Visuele mediaquery's

Ondersteuning van linting voor code

Met deze nieuwe versie van Dreamweaver kunt u nu met linting veelvoorkomende fouten in code opsporen. Linting is het proces waarbij een programma wordt uitgevoerd om mogelijke fouten in de code te identificeren. In Dreamweaver kan linting worden uitgevoerd voor HTML-, CSS- en JavaScript-bestanden wanneer de bestanden worden geladen, opgeslagen of bewerkt. De resultaten en fouten worden vervolgens weergegeven in het nieuwe deelvenster Uitvoer.

Zie Linting voor code gebruiken voor meer informatie.

Ondersteuning voor Emmet

Bent u een enthousiaste ontwikkelaar die meerdere regels code in Dreamweaver typt? Bespaar uzelf dan tijd en gebruik Emmet-afkortingen om uw code te schrijven. De afkortingen zijn eenvoudig te onthouden en in te voeren. De afkortingen worden uitgebreid tot volledige code in de codeweergave wanneer u op de Tab-toets drukt.

Zie Code invoegen met Emmet voor meer informatie.

CSS-preprocessors

Voorvertoning van afbeeldingen en kleuren in codeweergave

Voorvertoning van afbeeldingen

In Dreamweaver kunt u nu een voorvertoning van afbeeldingen weergeven in de codeweergave door uw muisaanwijzer op de afbeeldings-URL te plaatsen.

Voorvertoningen van afbeeldingen zijn nu ingeschakeld voor externe afbeeldingspaden zoals <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" />.

Als de voorvertoning voor externe paden niet kan worden weergeven in Dreamweaver, wordt het bericht “Kan afbeelding niet laden” weergegeven.

U kunt een voorvertoning weergeven voor de volgende afbeeldingsbestanden:

JPEG
JPG
PNG
GIF
BMP
SVG

De voorvertoning van de afbeelding wordt in de volgende gevallen weergegeven als u de muisaanwijzer op URL's plaatst:

• url( );
• data-uri( )
• Waarden van kernmerk Src van img-tag

Voorvertoning van kleuren

De voorvertoning van middelen in de codeweergave is verder verbeterd. In Dreamweaver kunt u nu een voorvertoning van kleuren weergeven in de codeweergave door uw muisaanwijzer op de kleurwaarden te plaatsen. De volgende indelingen worden ondersteund:

Hexadecimale kleurwaarden met 3 en 6 cijfers: #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);
Voorgedefinieerde kleurnamen: olijfgroen, groenblauw, rood, etc.;

Nieuwe codefragmenten

Fragmenten zijn delen van code die u opnieuw kunt gebruiken in uw projecten. Deze release van Dreamweaver biedt nieuwe en bijgewerkte codefragmenten:

• Boostrap-fragmenten
• CSS-animatie en -overgangen
• CSS-effecten
• CSS-fragmenten
• HTML-fragmenten
• JavaScript-fragmenten (bijgewerkt)
• PHP-fragmenten
• Preprocessorfragmenten
• Fragmenten voor responsief ontwerp

Zie Werken met codefragmenten voor meer informatie over het gebruik van codefragmenten.

Bootstrap-integratie

U kunt nu websites die zijn gemaakt met het Bootstrap-framework (versie 3 en hoger), openen in Dreamweaver en de pagina's bewerken met functies voor code of visueel ontwerpen. In Dreamweaver worden de gekoppelde CSS-bestanden herkend als de bestandsnamen de tekst 'bootstrap' bevatten. 

U kunt ook Bootstrap-componenten in Dreamweaver toevoegen (deelvenster Invoegen) en het ontwerp van verschillende viewports wijzigen door de rasters snel en eenvoudig te bewerken.

Zie Werken met Bootstrap-bestanden voor meer gedetailleerde informatie.

Eenvoudige Bootstrap-sjablonen

Dreamweaver bevat nu Bootstrap-sjablonen waarmee u snel aan de slag kunt gaan met uw responsieve ontwerpen. U hebt toegang tot de Bootstrap-sjablonen vanuit het dialoogvenster Nieuw document:

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

Code invouwen

Code invouwen is nu mogelijk in HTML-, CSS-, LESS-, SASS-, SCSS-, JS-, PHP-, XML- en SVG-bestanden op basis van tagblokken. Wanneer u de muisaanwijzer op de kolom met het regelnummer plaatst, verschijnt naast de regelnummers in de codeweergave een driehoekje waarop u kunt klikken om de code samen te vouwen/uit te vouwen. Deze nieuwe functie voor code invouwen vervangt de bestaande functie gebaseerd op selectie.

Pictogrammen voor code invouwen (omgekeerde driehoekjes) worden in de codeweergave weergegeven voor alle tagblokken met twee of meer regels code.

Voor de bewerkingen Kopiëren, Knippen, Plakken en slepen en neerzetten blijft de status voor code invouwen behouden. Als u bijvoorbeeld een samengevouwen codeblok kopieert, wordt de gekopieerde tekst als een samengevouwen blok geplakt met de bewerking Plakken.

Code invouwen in HTML-bestanden

In tegenstelling tot de eerdere functionaliteit voor code samenvouwen bevat de samengevouwen inhoud bevat nu de afsluitende tag. Ook wordt de inhoud anders weergegeven in vergelijking met de vorige implementatie.

Het aantal tekens dat wordt weergegeven in een samengevouwen blok, is nu verhoogd. Dit helpt u bij de voorvertoning van de oorspronkelijke kenmerken, indien aanwezig, in het samengevouwen codeblok. Als de samengevouwen div-tag bijvoorbeeld de kenmerken id en class bevat, ziet het samengevouwen blok er als volgt uit:

In Windows kunt u een voorvertoning van de code in een samengevouwen blok weergeven door uw muisaanwijzer op de samengevouwen code te plaatsen. Het samengevouwen blok wordt automatisch uitgevouwen wanneer de code in een samengevouwen blok focus krijgt via Tagkiezer, Zoeken en vervangen, Ga naar regel, Snelle elementweergave, Live View of Ongedaan maken/Opnieuw. Zodra de focus zich niet meer binnen het codeblok bevindt, wordt het blok automatisch samengevouwen.

Code invouwen in CSS-, LESS-, SASS-, SCSS- en JS-bestanden

Codeblokken die zijn ingesloten door accolades kunnen nu worden samengevouwen in CSS-, Less-, Sass-, SCSS- en JS-bestanden.

Plaats in het gebied voor code samenvouwen de muisaanwijzer op een regel met de accolades openen “{“.

Als u op samenvouwen klikt, wordt de inhoud tussen een overeenkomend accoladepaar samengevouwen en weergegeven als “{…}”

Code invouwen in PHP-bestanden

In PHP-bestanden kunnen behalve PHP-codeblokken ook HTML-elementen en CSS- en JS-codeblokken worden samengevouwen.

Elk PHP-blok dat begint met “<?php” en eindigt op “?>” kan worden samengevouwen.

Plaats in het gebied voor code samenvouwen de muisaanwijzer op een regel met <?php en klik op het pictogram voor samenvouwen om het codeblok samen te vouwen.