Start Dreamweaver door de volgende opdracht uit te voeren:
- Windows: <installatiepad> -enableRemoteDebugging
- Mac: open <installatiepad> --args -enableRemoteDebugging
Opmerking: Typ voor de argumenten twee koppeltekens.
De nieuwste updates voor de 2014-versie van Dreamweaver CC bieden integratie met Extract, zodat u rechtstreeks in Dreamweaver sites voor mobiele apparaten en desktopcomputers kunt maken op basis van een PSD-compositie. Met de nieuwe livehulplijnen kunt u HTML-elementen nauwkeurig plaatsen en opnieuw ordenen en met de verbeterde bewerkingsopties in Live View kunt u in realtime wijzigingen aanbrengen.
In dit artikel komen deze nieuwe functies en allerlei andere verbeteringen aan de orde en zijn koppelingen naar bronnen opgenomen voor meer hulp en informatie.
Bent u een nieuwe Dreamweaver-gebruiker? Hebt u Dreamweaver al eerder gebruikt en wilt u uw kennis bijspijkeren? Wilt u weten wat er in de huidige versie is gewijzigd vergeleken met vorige versie? Of u nu een beginnende of een ervaren gebruiker bent of de nieuwe versie van Dreamweaver wilt evalueren, u kunt nu alle essentiële informatiebronnen direct vanuit het welkomstscherm gebruiken.
Het welkomstscherm in de nieuwste update van de Dreamweaver CC 2014-versie van Dreamweaver biedt snel toegang tot video's (onder andere voor nieuwe functies), praktische zelfstudies, tips en technieken en meer.
Dit nieuwe welkomstscherm is alleen beschikbaar voor gebruikers in Engelstalige regio's. Voor gebruikers in andere regio's worden het welkomstscherm en de rondleiding door de nieuwe functies van Dreamweaver CC 2014.1 weergegeven.
Livehulplijnen en het pictogram voor de snelle elementweergave worden nu weergegeven in Live View wanneer u afbeeldingen sleept vanuit het deelvenster Extract. Deze visuele hulpmiddelen kunt u gebruiken om de afbeelding snel en nauwkeurig op de gewenste positie te plaatsen.
U kunt nu elementen in Live View verplaatsen door de gekoppelde tagnaam te slepen. Wanneer u de muisaanwijzer op een tagnaam plaatst, verschijnt het handje dat aangeeft dat u het element kunt slepen. U kunt livehulplijnen gebruiken om een element dat u sleept, neer te zetten. Deze hulplijnen geven aan wat de positie van het element wordt nadat u het hebt neergezet.
Tekst, afbeeldingen of andere elementen in een tag kunt u nu selecteren door te klikken en te slepen in een tag (selectiekader). Met het selectiekader kunt u eenvoudig meerdere elementen binnen een tag selecteren.
U kunt het selectiekader in Live View alleen gebruiken voor de bewerkingen die worden ondersteund door de browser.
In de elementweergave verschijnt nu de tiptekst 'Klasse/id' om aan te geven dat een klasse of id kan worden opgegeven.
Ook worden wijzigingen in de elementweergave opgeslagen wanneer u op '+' klikt. U kunt ook op Enter of Return drukken om wijzigingen op te slaan, net als in eerdere versies van Dreamweaver.
Er zijn tien nieuwe kleurenthema's toegevoegd aan de codeweergave:
Zie Het kleurenthema voor de codeweergave instellen voor meer informatie over thema's voor de codeweergave.
Deze update bevat een aantal wijzigingen in de gebruikersinterface van CSS ontwerpen en een wijziging in de standaardinstelling van het selectievakje Ingesteld tonen.
Tijdens het starten wordt het selectievakje Ingesteld tonen standaard ingeschakeld. Wijzigingen in deze optie worden permanent toegepast op alle Dreamweaver-sessies. Als u deze optie bijvoorbeeld uitschakelt, blijft de instelling behouden tijdens de volgende Dreamweaver-sessie en wordt de optie als uitgeschakeld weergegeven.
In de gebruikersinterface zijn de volgende wijzigingen aangebracht:
Met de hulpprogramma's voor ontwikkelaars van Google Chrome kunt u een externe foutopsporing uitvoeren voor Dreamweaver-documenten die zijn geopend in Live View. In Google Chrome kunt u poort 5471 gebruiken, die u als volgt kunt activeren:
Start Dreamweaver door de volgende opdracht uit te voeren:
Opmerking: Typ voor de argumenten twee koppeltekens.
Klik op OK in het dialoogvenster waarin wordt aangegeven dat poort 5471 is geactiveerd voor foutopsporing.
Dreamweaver wordt gestart.
Open de documenten waarvoor u foutopsporing wilt gebruiken in Live View.
Open Google Chrome en blader naar localhost:5471 om te beginnen met het opsporen van fouten. Er wordt een lijst weergegeven met koppelingen naar alle documenten die zijn geopend in Dreamweaver.
Opmerking: Omdat voor het nieuwe welkomstscherm en het deelvenster Extract het Chromium Embedded Framework (CEF) wordt gebruikt, ziet u ook vermeldingen voor deze functies.
U kunt nu de hulpprogramma's voor ontwikkelaars van Google Chrome gebruiken om foutopsporing uit te voeren voor de vereiste documenten.
Als u de foutopsporing wilt beëindigen en Dreamweaver wilt openen in de normale modus, sluit u Dreamweaver af en start u de toepassing opnieuw.
Wanneer u de voorkeuren opnieuw instelt via de sneltoetsen, maakt Dreamweaver een back-up van de voorkeuren in de map 'Adobe Dreamweaver CC 2014.1 Backups'. Deze map wordt automatisch gemaakt in dezelfde map als de oorspronkelijke map met Dreamweaver-voorkeuren in Windows en Mac.
Het volledige pad van de back-upmap wordt weergegeven in het dialoogvenster voor het opnieuw instellen van de voorkeuren.
Dynamische documenten zoals PHP, CFM en ASP worden niet langer standaard geopend in de codeweergave. De bestanden worden geopend in dezelfde modus (code/Live/gesplitst) als het laatst gesloten document of het laatste document met de focus.
Dankzij de integratie van Extract met Dreamweaver kunnen webontwerpers en -ontwikkelaars ontwerpinformatie toepassen en webmiddelen rechtstreeks extraheren in de coderingsomgeving. Extract biedt een volledige, zelfstandige oplossing voor het extraheren van stijlgegevens en middelen uit PSD-composities, zodat u niet steeds tussen Photoshop en Dreamweaver hoeft te schakelen.
In het deelvenster Extract in Dreamweaver kunt u CSS, afbeeldingen, lettertypen, kleuren, verlopen en afmetingen rechtstreeks naar uw webpagina extraheren. Naast deze primaire functies van Extract biedt Dreamweaver ook de volgende unieke functies:
In de standaardwerkruimte in Dreamweaver (met de naam Extract) wordt het deelvenster Extract links weergegeven, zodat u direct aan de slag kunt. Als u Dreamweaver de eerste keer start, wordt in het deelvenster Extract een eenvoudige zelfstudie weergegeven met informatie over workflows in Extract. U kunt op Aan de slag klikken om met Extract te beginnen.
Zie Integratie van Dreamweaver met Extract voor meer informatie over de Extract-workflows in Dreamweaver.
De 64-bits versie van Dreamweaver is nu beschikbaar en ondersteunt net als de 32-bits versie alle functies. Met deze toevoeging kunt u nu de volgende builds van Dreamweaver downloaden via de Adobe Creative Cloud-applicatie:
Besturingssysteem |
Standaardinstallatielocatie |
Map Toepassingsvoorkeuren |
---|---|---|
Windows 32-bits |
C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 |
%appdata%/Adobe/Adobe Dreamweaver CC 2014.1 |
Windows 64-bits |
C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 |
%appdata%/Adobe/Adobe Dreamweaver CC 2014.1 |
Mac 64-bits |
/Programma's/Adobe Dreamweaver CC 2014.1 |
~/Bibliotheek/Application Support/Adobe/Adobe Dreamweaver CC 2014.1 |
Zorg ervoor dat op uw computer een 64-bits versie van het besturingssysteem draait:
Voer de stappen uit die in de onderstaande artikelen worden beschreven om na te gaan of op uw computer een 64-bits versie wordt uitgevoerd:
Download de 64-bits versie van Dreamweaver van Creative Cloud en installeer deze.
Livehulplijnen bieden visuele feedback in Live View en geven de mogelijke posities aan waar u een element kunt invoegen in de volgende scenario's:
Livehulplijnen worden niet ondersteund in documenten met dynamische rasters.
Livehulplijnen worden weergegeven als u de muisaanwijzer op de verschillende elementen op de pagina plaatst voordat u een element neerzet. Ze kunnen boven, onder, links of rechts worden weergegeven van het element dat u aanwijst.
U kunt naast de livehulplijnen de snelle elementweergave gebruiken om een HTML-element nauwkeuriger in de documentstructuur in te voegen.
Als u even pauzeert voordat u het element neerzet, verschijnt het pictogram Snelle elementweergave (</>). Wanneer u de muis op dit pictogram plaatst, wordt de snelle elementweergave geopend en kunt u het element in de snelle elementweergave neerzetten.
U kunt nu in Live View elementen knippen, kopiëren, plakken en verwijderen via het contextmenu dat u opent door met de rechtermuisknop te klikken. U kunt ook elementen dupliceren of de bovenliggende of onderliggende tag selecteren via het contextmenu in Live View.
U kunt ook de bijbehorende sneltoetsen in Live View gebruiken (bijvoorbeeld in Windows: Ctrl+X, Ctrl+C, Ctrl+V en Delete).
Selecteer eerst een element in Live View om de elementweergave te openen. Klik vervolgens met de rechtermuisknop in het taggebied om de bovenstaande contextmenu-opties weer te geven. De opties zijn functioneel op tagniveau.
U kunt nu niet alleen kiezers op een element toepassen, maar u kunt ook een kiezer in de gewenste CSS-bron selecteren en een mediaquery toewijzen via de elementweergave. Wanneer u een kiezer opgeeft die in geen enkele stijlpagina voorkomt en op Enter drukt, kunt u in de elementweergave een CSS-bron en mediaquery kiezen.
Als u geen CSS-bron of mediaquery wilt kiezen, drukt u op Esc om de opties te sluiten.
U kunt nu ook met de rechtermuisknop op een toegepaste kiezer klikken om naar de bijbehorende code te gaan (de optie Ga naar codeweergave) of om gekopieerde stijlen te plakken (de optie Stijlen plakken).
Met de optie Ga naar codeweergave worden subopties weergegeven als dezelfde kiezer is toegevoegd aan meerdere mediaquery's. Met de optie Stijlen plakken worden subopties weergegeven als de gekopieerde kiezers pseudokiezers of samengestelde kiezers zijn.
Dreamweaver ondersteunt nu ook het verplaatsen van elementen (tagniveau) in Live View. U kunt een element in Live View selecteren, het element slepen en het op een andere plaats neerzetten.
Klik op het element dat u wilt verplaatsen. Zodra de elementweergave (blauw kader rond het element) verschijnt, sleept u het element. Wanneer u met slepen begint, verandert de muisaanwijzer om aan te geven dat het element kan worden verplaatst.
De verwijzingselementen (elementen ten opzichte waarvan u het gesleepte element wilt plaatsen) worden gemarkeerd met een blauwe rand. Er worden livehulplijnen (groen) weergegeven om de mogelijke posities aan te geven waar de elementen kunnen worden neergezet ten opzichte van het verwijzingselement.
In Live View kunnen alleen statische elementen worden verplaatst. Dynamische contenttags, zoals PHP, kunnen niet worden verplaatst.
Als u even pauzeert voordat u het element neerzet, verschijnt het pictogram Snelle elementweergave (</>). Wanneer u de muis op dit pictogram plaatst, wordt de snelle elementweergave geopend en kunt u het element in de snelle elementweergave neerzetten.
Dreamweaver ondersteunt nu navigatie door pagina-elementen via het toetsenbord voor fervente toetsenbordgebruikers en om het webontwerpproces te versnellen. U kunt de volgende toetsen gebruiken:
Zie Toetsenbordnavigatie in Live View voor meer informatie.
Als u op een Windows-computer in Live View op Ctrl+T of op een Mac-computer op Cmd+T drukt, wordt er een Snelle tageditor voor het geselecteerde element weergegeven. De Snelle tageditor heeft drie statussen: Tag bewerken, Tag rondom plaatsen en HTML invoegen. U kunt tussen deze statussen schakelen met Ctrl/Cmd + T.
De documentwerkbalk is gewijzigd en gebruiksvriendelijker gemaakt.
De kant-en-klare werkruimten die in Dreamweaver beschikbaar zijn, zijn als volgt gewijzigd:
De standaardwerkruimte is nu Extract. In deze werkruimte wordt het deelvenster Extract links en de webpagina rechts weergegeven. Als u Dreamweaver de eerste keer start, wordt in het deelvenster Extract een eenvoudige zelfstudie weergegeven met informatie over workflows in Extract. Klik op Aan de slag om met Extract te beginnen.
De standaardweergave voor HTML-documenten is nu de Gesplitste weergave, horizontaal gesplitst om Live View en de codeweergave weer te geven. Dynamische bestanden, zoals de onderstaande bestanden, worden standaard in de volledige codeweergave geopend. Wanneer u de weergave splitst, worden deze documenten in de ontwerpweergave en in de codeweergave weergegeven.
Tip: als u wilt overschakelen naar de ontwerpweergave, klikt u op de vervolgkeuzelijst naast 'Live' en klikt u op Ontwerp. Als u de horizontale splitsing van de weergave wilt wijzigen in een verticale splitsing, selecteert u Weergave > Verticaal splitsen. De Live View/ontwerpweergave wordt nu links weergegeven. Als u de Live View/ontwerpweergave aan de rechterkant wilt hebben, maakt u de selectie van Weergave > Live View links of Ontwerpweergave links ongedaan.
Dreamweaver onthoudt nu de status van Live View die u voor een HTML-document kiest en past dezelfde weergave toe op alle HTML-documenten die u daarna opent. Stel dat HTML1 het document is dat u als eerste opent. De documentweergave wordt gesplitst in de codeweergave en in Live View. Stel dat u de weergave van dit document wijzigt in de volledige Live View. Nu wordt het volgende document dat u opent, bijvoorbeeld HTML2, weergegeven in de volledige Live View.
De nieuwe bewerkingsmogelijkheden in Live View zijn geïntroduceerd in de vorige versie van Dreamweaver CC. In deze versie zijn deze bewerkingsfuncties in Live View nu ook beschikbaar voor documenten met dynamische rasters. Met de bewerkingsmogelijkheden in Live View kunt u sneller een webpagina met dynamische rasters ontwikkelen omdat u wijzigingen kunt aanbrengen en deze wijzigingen direct kunt voorvertonen in dezelfde weergave.
Met de volgende functies kunt u documenten met dynamische rasters in Live View bewerken:
Met behulp van de snelle elementweergave kunt u nu ook de HTML DOM-structuur van een document met een dynamisch raster visualiseren.
Opmerking: Bij snelle elementweergave in dynamische rasterlay-outs kunt u de HTML-elementen niet kopiëren, plakken, dupliceren of opnieuw rangschikken.
De gebruikersinterface voor het weergeven en bewerken van documenten met dynamische rasters is gewijzigd om plaats te maken voor de bewerkingsfuncties in Live View. Wanneer u nu een element in een document met een dynamisch raster selecteert, wordt de elementweergave samen met de andere besturingselementen weergegeven, zoals Elementen verbergen en Begint op nieuwe rij.
Documenten met dynamische rasters kunnen nu ook rechtstreeks in Live View worden geopend. U kunt documenten met dynamische rasters niet meer weergeven of bewerken in de ontwerpweergave.
Zie Responsief ontwerp met dynamische rasterlay-outs voor meer informatie over documenten met een dynamisch raster.
Het dialoogvenster Invoegen voor documenten met dynamische rasters bevat nu assistentie bij het plaatsen van elementen. Met de assistent voor het plaatsen van elementen kunt u het ingevoegde element vóór of na het element plaatsen of nesten in het element met de focus (in Live View). Zie Dynamische rasterelementen invoegen voor meer informatie over het invoegen van dynamische rasterelementen.
De optie Verborgen elementen beheren (de knop met het oog op de documentwerkbalk) is verplaatst naar het contextmenu in een document met een dynamisch raster.
Als u verborgen elementen wilt beheren, klikt u met de rechtermuisknop op de pagina met het dynamische raster en selecteert u Verborgen elementen beheren om de verborgen elementen weer te geven. Als u deze elementen wilt verbergen, klikt u op het oogpictogram in de HUD.
U kunt nu uit een van de volgende direct beschikbare kleurenthema's voor de codeweergave kiezen:
Gebruik de voorkeuren voor codekleuren om een thema voor de codeweergave op te geven. U kunt het thema aanpassen door andere kleurenschema's voor achtergronden, voorgronden en verborgen tekens te kiezen.
Voor elk type document dat wordt vermeld, kunt u de kleuren voor verschillende categorieën tags en code-elementen, zoals formuliertags of JavaScript-id's, aanpassen. Als bijvoorbeeld het thema Raven op alle soorten documenten is toegepast, kunt u ervoor kiezen om alleen in HTML-documenten formuliertags blauw weer te geven.
Alle aangepaste instellingen in een thema worden opgeslagen wanneer u op Toepassen klikt. Het aangepaste thema is nu beschikbaar in alle volgende Dreamweaver-sessies.
U kunt de aangepaste codethema's synchroniseren tussen uw Dreamweaver-exemplaren met behulp van de optie Instellingen synchroniseren in Voorkeuren. Zie Dreamweaver-instellingen synchroniseren met Creative Cloud voor meer informatie.
Met de synchronisatie van de codeweergave naar Live View kunt u direct een voorvertoning weergeven van de wijzigingen die u in Live View in de code aanbrengt. In tegenstelling tot vorige versies van Dreamweaver, hoeft u niet op Vernieuwen te klikken om een voorvertoning van de wijzigingen in Live View weer te geven.
U kunt de synchronisatie van de codeweergave naar Live View in actie zien in de volgende workflows (wanneer de codeweergave de focus heeft):
Voor alle wijzigingen in JavaScript-code moet de pagina volledig worden vernieuwd of opnieuw worden geladen om de wijzigingen in Live View te kunnen zien.
Het deelvenster Middelen (Vensters > Middelen) is nu ook beschikbaar in Live View. In het deelvenster Middelen kunt u de volgende taken eenvoudig beheren:
Opmerking: U kunt middelen van het voorvertoningsvenster alleen slepen op de Mac.
Zie Werken met middelen voor gedetailleerde instructies over het gebruik van het deelvenster Middelen.
Dreamweaver beschikt nu over nieuwe, responsieve eenvoudige sjablonen, zodat u sneller aan de slag kunt met uw responsieve websites. U kunt een van de volgende sjablonen kiezen in het dialoogvenster Nieuw document (Bestand > Nieuw > Eenvoudige sjablonen):
Wanneer u een sjabloon kiest en op Maken klikt in het dialoogvenster Nieuw document, vraagt Dreamweaver u het nieuwe document op te slaan. Als u het document opslaat, maakt u een kopie van de sjabloon die u later aan uw behoeften kunt aanpassen.
Voor het oplossen van problemen met Dreamweaver moet u soms de map met voorkeuren met alle aangepaste instellingen verwijderen. Vóór deze versie moest u handmatig naar de map met voorkeuren op uw computer gaan en de map verwijderen. In deze versie kunt u met één muisklik uw voorkeuren verwijderen via een dialoogvenster:
U kunt het dialoogvenster Voorkeuren opnieuw instellen openen door bij het starten van Dreamweaver de volgende sneltoetsen ingedrukt te houden:
Denk goed na voordat u de optie voor het opnieuw instellen van de voorkeuren gebruikt. Wanneer u de voorkeuren en instellingen opnieuw instelt, gaan alle aangepaste instellingen voor de werkruimte, sneltoetsen, extensies en toepassingsvoorkeuren verloren.
Houd bij het starten van Dreamweaver op een Mac Cmd + Option + Shift ingedrukt (door op het Dreamweaver-pictogram in het Dock te klikken).
Voer op een Windows-computer de volgende stappen uit:
Ga naar de installatiemap, zoek het bestand Dreamweaver.exe en klik erop.
Houd de Windows-toets + Ctrl + Shift ingedrukt en dubbelklik op Dreamweaver.exe.
Zorg ervoor dat u de hierboven genoemde sneltoetsen zelfs ingedrukt houdt wanneer het dialoogvenster Gebruikersaccountbeheer wordt weergegeven.
U kunt nu via het dialoogvenster Voorkeuren de instellingen van uw vorige Dreamweaver-versie importeren die in Creative Cloud zijn opgeslagen. Alle instellingen worden overschreven door de instellingen die vanuit de cloud worden geïmporteerd en worden toegepast wanneer u Dreamweaver de volgende keer start.
Vanaf deze versie worden niet alleen de instellingen die werden gesynchroniseerd in eerdere versies, maar ook de volgende instellingen gesynchroniseerd met Creative Cloud:
Deze versie van Dreamweaver bevat veel gebruiksvriendelijke verbeteringen voor het werken met CSS ontwerpen. Het deelvenster CSS ontwerpen bevat ook een introductie, zodat u snel aan de slag kunt met de workflows.
De optie Sitesjablonen in het welkomstscherm is nu vervangen door Eenvoudige sjablonen. U hebt toegang tot Sitesjablonen via het dialoogvenster Nieuw document (Bestand > Nieuw).
Dreamweaver bevat nu de bijgewerkte jQuery-bibliotheken:
jQuery-startpagina's zijn verwijderd.
Rechtstreekse integratie van Dreamweaver met PhoneGap Build om pakketten met applicaties te maken, wordt niet ondersteund in de nieuwste update voor de 2014-versie van Dreamweaver CC (oktober 2014) en hoger.
U hebt echter rechtstreeks toegang tot de online PhoneGap Build-service en u kunt gebruikmaken van de meest recente functie-updates om uw webapplicaties te verpakken als systeemeigen mobiele applicaties.
Aanmelden bij je account