Overzicht van nieuwe functies

De 2015-versie van Dreamweaver CC is gericht op responsieve ontwerpen, verbeteringen in de functies voor het bewerken van code, voorvertoningen van webpagina’s op apparaten en het batchgewijs extraheren van voor het web geoptimaliseerde afbeeldingen met meerdere resoluties vanuit Photoshop-composities. Dankzij de integratie met het Bootstrap-framework kunt u responsieve websites maken die zijn gericht op mobiele apparaten. Visuele mediaquery’s vormen een verdere aanvulling op de responsieve webontwerpervaring omdat u het ontwerp op verschillende onderbrekingspunten kunt visualiseren en aanpassen. 

Deze versie bevat ook verschillende verbeteringen voor bewerkingsfuncties in Live View en CSS ontwerpen. Deze nieuwe functies en verbeteringen worden in dit artikel geïntroduceerd. Daarnaast bevat het artikel koppelingen naar hulp- en informatiebronnen.

U kunt nu met Dreamweaver op meerdere apparaten tegelijk webpagina's testen die klaar zijn voor productie. U kunt zien hoe de webpagina in verschillende vormfactoren wordt herschikt. Daarnaast kunt u de interactieve functies op de pagina's testen. Dit kunt u allemaal doen zonder mobiele apps te installeren of apparaten fysiek aan te sluiten op uw computer. Scan de automatisch gegenereerde QR-code met uw apparaten en bekijk een voorvertoning van de webpagina's op de apparaten.

Wanneer de functie voor live-inspectie wordt geactiveerd op uw computer, kunt u alle aangesloten apparaten en verschillende elementen inspecteren en het ontwerp waar nodig aanpassen.

Zie Webpagina's voorvertonen en inspecteren op meerdere apparaten voor meer informatie.

De visuele-mediaquerybalken vormen een visuele voorstelling van de mediaquery's op een pagina. Met deze balken kunt u uw webpagina op verschillende onderbrekingspunten visualiseren en bekijken hoe de verschillende componenten van uw webpagina worden herschikt in de verschillende viewports. Wanneer u uw pagina bekijkt in verschillende viewports, kunt u specifieke ontwerpwijzigingen voor een viewport aanbrengen zonder dat dit invloed heeft op het paginaontwerp in andere viewports.

Visuele mediaquery's omvatten drie horizontale balken die elk een categorie met mediaquery's aangeven:

•  Groen: mediaquery's met max-width-voorwaarden
•  Blauw: mediaquery's met min-width- en max-width-voorwaarden
•  Paars: mediaquery's met min-width-voorwaarden

Zie Visuele mediaquery's voor meer informatie.

Met deze nieuwe versie van Dreamweaver kunt u nu veelvoorkomende fouten in code opsporen met linting. Linting is het proces waarbij code wordt geanalyseerd om mogelijke fouten of verdacht gebruik van code te markeren. 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.

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 uitgebreide informatie.

Als u in de gesplitste weergave werkt, kunt u wijzigingen voor afbeeldingen of kleuren direct bekijken in Live View of de ontwerpweergave. Als u liever alleen in de codeweergave werkt, worden afbeeldingen alleen weergegeven als bestandsnamen, die meestal niet intuïtief zijn. Kleuren (tenzij er voorgedefinieerde kleuren worden gebruikt) worden doorgaans ook alleen met een onduidelijke reeks cijfers aangegeven. In deze versie van Dreamweaver kunt u snel een voorvertoning van kleuren en afbeeldingen weergeven in de codeweergave. Met deze functie kunt u een visuele koppeling maken tussen de bestandsnamen van afbeeldingen en kleurnotaties met de daadwerkelijke afbeelding of kleur die ze vertegenwoordigen. Zo kunt u sneller ontwerpbeslissingen nemen en de ontwikkeltijd aanzienlijk inkorten.

Zie Voorvertoningen van afbeeldingen en kleuren in de codeweergave voor meer informatie.

De codeweergave bevat ook een voorvertoning van fouten. De regel met de codefout is rood gemarkeerd. Wanneer u de muisaanwijzer op het nummer plaatst, wordt een korte beschrijving van de fout weergegeven.

Opmerking: Alleen de eerste fout in de regel wordt weergegeven. Als de regel slechts één waarschuwing bevat, wordt de beschrijving van de waarschuwing weergegeven. Als de regel een waarschuwing en een fout bevat, wordt alleen de beschrijving van de fout weergegeven.

Fragmenten zijn delen van code die u opnieuw kunt gebruiken in uw projecten. Deze versie 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.

Ook kunt u nu codefragmenten up-to-date houden in al uw Dreamweaver-installaties met de functie voor cloudsynchronisatie. Zie Dreamweaver-instellingen synchroniseren met Creative Cloud voor informatie over het synchroniseren van codefragmenten met Creative Cloud en uw andere Dreamweaver-installatie.

Bootstrap is het meestgebruikte gratis HTML-, CSS- en JavaScript-framework voor het ontwikkelen van responsieve websites voor mobiel gebruik. Het framework bevat responsieve CSS- en HTML-sjablonen voor knoppen, tabellen, navigatie, afbeeldingscarrousels en andere elementen die u op uw webpagina kunt gebruiken. Er zijn ook een aantal optionele JavaScript-insteekmodules beschikbaar die ontwikkelaars in staat stellen om fantastische responsieve websites te ontwikkelen, zelfs als ze alleen over basiskennis beschikken.

Met Dreamweaver kunt u Bootstrap-documenten maken en bestaande webpagina's bewerken die zijn gemaakt met Bootstrap. U kunt een van de eenvoudige Bootstrap-sjablonen in het dialoogvenster Nieuw document (Eenvoudige sjablonen > Bootstrap-sjablonen) gebruiken om te beginnen met het ontwerpen van uw Bootstrap-website. 

• Bootstrap-Bureau
  
• Bootstrap-E-commerce
• Bootstrap-Portfolio
• Bootstrap-Product
• Bootstrap-Vastgoed
• Bootstrap-Cv
  

U kunt ook een aangepast Bootstrap-document maken via het dialoogvenster Nieuw document (Nieuw document > Bootstrap). Gebruik het deelvenster Invoegen in Dreamweaver vervolgens om de website stapsgewijs op te bouwen met Bootstrap-componenten, zoals accordeons en carrousels. Of gebruik in het geval van Photoshop-composities Extract om bijvoorbeeld afbeeldingen, lettertypen, stijlen en tekst aan het Bootstrap-document toe te voegen.

Of u nu een volledig ontworpen Bootstrap-bestand of een conceptontwerp hebt, u kunt in Dreamweaver zowel de code bewerken als wijzigingen in het ontwerp aanbrengen met visuele bewerkingsfuncties als Bewerken met Live View, CSS ontwerpen, Visuele mediaquery's en Extract. 

Zie Werken met Bootstrap-bestanden voor meer gedetailleerde informatie.

In Live View kunt u snel en eenvoudig tabellen bewerken met één of een combinatie van de volgende opties:

Zie Het formaat van tabellen wijzigen en Tabellen en cellen opmaken voor meer informatie.

De bewerkingsmogelijkheden in Live View zijn verbeterd en u beschikt nu over de volgende menu's:

• Wijzigen
• Opmaak
• Opdrachten
• Site
• De optie 'Plakken speciaal' in het menu Bewerken en in contextmenu's

U kunt met het deelvenster Invoegen nu rechtstreeks jQuery-widgets in Live View invoegen. Sleep het vereiste element van het deelvenster Invoegen naar Live View en houd de muisknop ingedrukt om een van de volgende functies voor invoegen te gebruiken:

• Livehulplijnen: Deze hulplijnen verschijnen als u de muisaanwijzer op de elementen in Live View plaatst nadat u het vereiste element uit het deelvenster Invoegen hebt gesleept. U kunt de livehulplijnen gebruiken om elementen boven, onder, links of rechts van een element dat de focus heeft, in te voegen.

• DOM-pictogram: Het DOM-pictogram wordt weergegeven wanneer u een korte pauze inlast wanneer de livehulplijnen worden weergegeven. Klik op het pictogram om de DOM-structuur in een pop-upvenster te bekijken en sleep het element naar de exacte locatie in de documentstructuur.

• Hulp voor plaatsing: Met de hulpfunctie voor plaatsing kunt u het element voor, achter of in het element met de focus plaatsen (in Live View).

Zie Elementen rechtstreeks in Live View invoegen voor meer informatie.

Snelle elementweergave is nu gewijzigd in het deelvenster DOM (Venster > DOM). Het deelvenster DOM biedt alle functies van Snelle elementweergave en meer. Het deelvenster is beschikbaar in alle werkruimten en is persistent. Dit betekent dat u twee documenten kunt openen en de bijbehorende DOM-deelvensters tegelijkertijd kunt openen en gebruiken.

U kunt het deelvenster DOM gebruiken voor het volgende:

• Elementen uit het deelvenster Invoegen slepen om ze op de exacte locatie in de documentstructuur in te voegen.
• Structurele elementen in het document kopiëren, plakken, dupliceren, verplaatsen of verwijderen.
• Elementen op de pagina in de context van de documentstructuur bekijken. Het element met de focus is gemarkeerd in het deelvenster DOM.

Zie Het deelvenster DOM voor gedetailleerde informatie over het gebruik van het deelvenster DOM en het bewerken van de HTML-structuur met het deelvenster.

Coderingstips voor alle SVG-elementen en -kenmerken worden nu ondersteund in HTML-documenten. U kunt deze coderingstips net als voor SVG-documenten gebruiken om SVG-elementen toe te voegen in de codeweergave van HTML-documenten.

Vanaf deze versie verstrekt het Dreamweaver-team voorvertoningen van bepaalde functies om feedback van klanten te verzamelen. Op basis van de feedback worden deze functies verder verbeterd waarna ze worden opgenomen als kernfuncties van Dreamweaver. Deze functies zijn toegankelijk via de categorie Experimentele functies in het dialoogvenster Voorkeuren.

De experimentele functie in deze versie is Code markeren. Met deze functie kunt u alle instanties markeren van de tekst die u in de codeweergave selecteert.

Als u deze functie wilt gebruiken, voert u de volgende stappen uit:

U kunt de volgende sneltoetsen gebruiken om tussen de gemarkeerde tekst te navigeren:

• Volgende instantie selecteren: F3 (Win); Cmd+G (Mac)
• Vorige instantie selecteren: Shift+F3 (Win); Cmd+Shift+G (Mac)

In deze versie van Dreamweaver kunt u een pop-upvenster met een aangepaste voorvertoning genereren dat wordt weergegeven wanneer u in de codeweergave de muiswijzer op de code plaatst. Voor het implementeren van aangepaste voorvertoningen kunt u de nieuwe API ShowPreview gebruiken in combinatie met de bestaande API mm:browsercontrol. Met deze API's kunt u bijvoorbeeld een voorvertoning weergeven van alle parameters van een JavaScript-functie wanneer u de muisaanwijzer op de naam van de functie plaatst.

Zie Referentie voor Dreamweaver API: functies van codeweergave voor meer informatie.

In eerdere versies van Dreamweaver moest u codeblokken selecteren in de codeweergave en deze vervolgens samenvouwen. In deze versie en latere versies kunt u codeblokken samenvouwen door de muisaanwijzer op de regelnummers te plaatsen en te klikken op het driehoekje dat verschijnt.

Code invouwen (samenvouwen) is nu beschikbaar in HTML-, CSS-, LESS-, Sass-, SCSS-, JS-, PHP-, XML- en SVG-bestanden en is gebaseerd op tagblokken.

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.

In tegenstelling tot de eerdere functionaliteit voor code samenvouwen bevat de samengevouwen content in HTML-bestanden nu de afsluitende tag. Ook wordt de content anders weergegeven. Het aantal tekens dat wordt weergegeven in een samengevouwen blok, is nu ook verhoogd. Dit helpt u bij de voorvertoning van de oorspronkelijke kenmerken, indien aanwezig.

Zie Code samenvouwen voor meer informatie.

• Extract voor apparaten
• Ondersteuning voor percentages

Niet alleen de grootte, maar ook de resolutie kan per apparaat verschillen. Wanneer u een responsief webontwerp plant, moet u er rekening mee houden dat u afbeeldingen met verschillende resoluties gebruikt zodat deze op alle apparaten correct worden weergegeven. Het kan echter een hele klus zijn om voor alle afbeeldingen in uw project allemaal versies met verschillende resoluties te maken.

Met Extract in Dreamweaver wordt echter veel gemakkelijker. Bij het extraheren van een afbeelding uit uw Photoshop-compositie biedt de 2015-versie van Dreamweaver u de mogelijkheid versies met verschillende resoluties van de desbetreffende afbeelding te extraheren. De afbeelding in Photoshop wordt tijdens het extraheren automatisch geschaald naar verschillende, vooraf gedefinieerde resoluties.

U kunt deze afbeeldingen vervolgens aanroepen met JavaScript of mediaquery's zodat ze worden weergegeven op basis van het apparaat waarop ze worden bekeken. Voor Retina-displays met een hoge resolutie kunt u bijvoorbeeld de 2X-versie van de afbeelding gebruiken. 

Zie Afbeeldingen extraheren uit PSD-bestanden voor meer informatie.

In het deelvenster Extract kunt u de hoogte en breedte van afbeeldingen zowel in pixels als in percentages weergeven. U kunt ook de afmetingen in percentages bekijken.

Wanneer u in het deelvenster Extract op een middel klikt, kunt u met een optie het pop-upvenster schakelen tussen pixels en percentages. De eenheid die u in dit pop-upvenster selecteert, wordt ook gebruikt wanneer u de afmetingen van andere middelen bekijkt.

U kunt in Live View nu elementen invoegen in andere elementen. Wanneer u elementen uit het deelvenster Invoegen, het deelvenster Middelen of binnen Live View sleept en de muisaanwijzer op de verschillende elementen op de pagina plaatst, ziet u dat er naast de hulplijnen (vóór en achter) visuele feedback wordt gegeven voor het nesten van elementen.

• Hulplijnen (vóór/achter): wanneer u de muisaanwijzer op de bovenste of onderste 30% van het element plaatst.
• Visuele feedback voor nesten: wanneer u de muisaanwijzer op de middelste 40% van het element plaatst.

U kunt nu gewoon op de naam van de kiezer in de elementweergave klikken om de kiezer te bewerken. De wijzigingen kunt u doorvoeren door ergens op de pagina te klikken.

De volgende opties voor het samenvouwen van code zijn verwijderd van de werkbalk Codering:

• Volledige tag samenvouwen
• Selectie samenvouwen

• Ongeldige code markeren
• Syntaxisfoutwaarschuwingen in Infobalk

• Modi Alles en Huidig
• Tips voor de waarden van eigenschappen
• Kleurcodering voor mediaquery's
• Andere wijzigingen

CSS ontwerpen biedt nu twee modi voor het weergeven en bewerken van CSS-eigenschappen:

• Alles: Alle CSS, mediaquery's en kiezers in het huidige document worden weergegeven in deze modus. Deze modus is niet gevoelig voor de selectie in de ontwerpweergave of in Live View.

Dit is de ideale modus als u CSS, mediaquery's of kiezers wilt maken.

• Huidig: Berekende stijlen voor een element dat is geselecteerd in de ontwerpweergave of in Live View, worden in deze modus weergegeven. Als in een CSS-bestand een kiezer de focus heeft, worden in deze modus de eigenschappen voor de betreffende kiezer weergegeven.

Dreamweaver geeft nu coderingstips voor het instellen van nieuwe eigenschappen weer in CSS ontwerpen (vergelijkbaar met de codeweergave).

Mediaquery's in het deelvenster CSS ontwerpen hebben nu kleurcodering die overeenkomt met visuele mediaquery's.

•  Groen: mediaquery's met max-width-voorwaarden
•  Blauw: mediaquery's met min-width- en max-width-voorwaarden
•  Paars: mediaquery's met min-width-voorwaarden

• Optie Set tonen: Het selectievakje Set tonen in de sectie Eigenschappen is nu standaard ingeschakeld wanneer u Dreamweaver voor de eerste keer start. Wijzigingen voor deze optie (inschakelen of uitschakelen) blijven behouden in alle volgende Dreamweaver-sessies.

• Het deelvenster wordt verschoven om Eigenschap toevoegen in het midden weer te geven: Wanneer u in de sectie Eigenschappen op + klikt, wordt de sectie verschoven zodat de rij Eigenschap toevoegen in het midden van het deelvenster wordt weergegeven. Als de sectie Eigenschappen te klein is, wordt de rij Eigenschap toevoegen onder aan het deelvenster weergegeven.

• Achtergrond markeren bij toevoegen van nieuwe eigenschap: Als de focus op het tekstvak Nieuwe eigenschap toevoegen is geplaatst, wordt de rij gemarkeerd met een grijze achtergrond.

• Gewijzigde positie voor de knoppen + en -: De knoppen + en - in elke sectie van het deelvenster CSS ontwerpen zijn verplaatst van uiterst rechts naar uiterst links om ze beter zichtbaar te maken.

• Aangepaste categorie is hernoemd: De naam van de categorie voor aangepaste eigenschappen is gewijzigd in Meer.

De verbeteringen in deze versie voor de workflow van de testserver zijn bedoeld om ervoor te zorgen dat u eenvoudig en naadloos documenten met code op de server in Live View kunt bewerken.

In tegenstelling tot eerdere versies van Dreamweaver kunt u nu een specifieke server uitsluitend als testserver of als externe server toewijzen, niet als beide. De selectievakjes in de gebruikersinterface van de serverinstellingen zijn vervangen door keuzerondjes om de selectie van specifieke servers af te dwingen.

Als u een site opent die in een eerdere Dreamweaver-versie is gemaakt of instellingen van een dergelijke site importeert, wordt een dubbele vermelding van de server gemaakt wanneer voor de betreffende site de testserver en externe server zijn ingesteld op dezelfde server. Vervolgens wordt de ene vermelding gemarkeerd als externe server (met het achtervoegsel _remote) en de andere als testserver (met het achtervoegsel _testing).

Dreamweaver synchroniseert nu automatisch dynamische documenten naar uw testserver wanneer u dynamische documenten opent, maakt of wijzigingen opslaat. Tijdens het testen van serverworkflows wordt het dialoogvenster voor het bijwerken en de testserver of het pushen van afhankelijke bestanden niet meer weergegeven in Dreamweaver.

Zie Automatisch pushen van dynamische bestanden voor meer informatie.

De Business Catalyst-extensie is buiten gebruik gesteld en is niet beschikbaar voor gebruik met de Dreamweaver CC 2015-versie en hogere versies. Dreamweaver CC 2014.1.1 is de laatste versie die compatibel is met de Business Catalyst-extensie.

Als u Business Catalyst wilt gebruiken met Dreamweaver CC 2015 en hoger, moet u de verbindingsoptie SFTP in Dreamweaver gebruiken. Zie voor meer informatie de documentatie van Business Catalyst.

Hier is de officiële aankondiging over deze wijziging op de Business Catalyst-website. 

• Het deelvenster Invoegen is opnieuw ingedeeld waarbij alle opties in de categorieën Algemeen, Lay-out en Media zijn gegroepeerd in een meer logische categorie: HTML.

• De korte rondleidingsvideo's en de koppeling om de video's te starten vanuit het menu Help, zijn verwijderd. Deze optie is ook niet beschikbaar voor niet-Engelse regio's.

• De opties in de vervolgkeuzelijst van de documentwerkbalk onder aan een pagina zijn opgeschoond: alleen de opties Oriëntatie, Volledige grootte en Grootten bewerken zijn nu nog beschikbaar.