Handboek Annuleren

Extract in Dreamweaver

Zoeken

Laatst bijgewerkt op 30 dec. 2021

Meer informatie over het snel omzetten van uw PSD's in op HTML-gebaseerde ontwerpen voor mobiele apparaten en computers. Extraheer CSS, afbeeldingen, afmetingen, lettertypen, kleuren, verlopen en nog veel meer uit Photoshop rechtstreeks in Dreamweaver.

Opmerking:

Met ingang van 1 juli 2022 wordt de ondersteuning voor de functies in het deelvenster Extract beëindigd in Dreamweaver 21.2 en eerdere versies. U kunt Adobe Photoshop gebruiken om stijlinformatie en assets uit PSD-componenten te extraheren en opnieuw te gebruiken in Dreamweaver.

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:

Rechtstreeks toegang tot uw PSD-bestanden in Creative Cloud en tot de PSD-bestanden die anderen met u delen in een gezamenlijke map
Contextafhankelijke coderingstips om eenvoudig lettertypen, kleuren en verlopen in uw CSS te definiëren
Ondersteuning voor slepen en neerzetten om afbeeldingstags van PSD-lagen te maken
Stijlen rechtstreeks in Live View plakken (bijvoorbeeld CSS ontwerpen en de elementweergave)

Aan de slag met Extract

CSS extraheren

Voorkeuren voor Extract instellen

Tekst kopiëren

Afbeeldingen extraheren

Lettertypen, kleuren en verlopen extraheren

Afmetingen extraheren

Aan de slag met Extract

Via Extract in Dreamweaver hebt u rechtstreeks toegang tot uw PSD-bestanden vanuit het deelvenster Extract in Dreamweaver. Lees de volgende onderwerpen voor meer informatie over het deelvenster en de werkruimte van Extract en over het laden van uw PSD-bestanden in het deelvenster Extract:

Het deelvenster en de werkruimte van Extract

De werkruimte van Extract is ontworpen om u te helpen bij een effectief gebruik van Extract met Dreamweaver. In deze werkruimte wordt het deelvenster Extract links en uw webpagina rechts weergegeven in de gesplitste weergave (Live View en codeweergave). U kunt de werkruimte aanpassen door deelvensters te slepen, te koppelen, samen te vouwen of uit te vouwen, zodat de werkruimte aan uw wensen voldoet. U kunt de aangepaste werkruimte ook opslaan voor toekomstig gebruik.

Opmerking:

Als u het deelvenster Extract sluit, kunt u de sneltoets Ctrl + K (Win) of Cmd + K (Mac) gebruiken of Venster > Extract selecteren om het deelvenster opnieuw te openen.

Als u Dreamweaver voor de eerste keer start, wordt in het deelvenster Extract een interactieve zelfstudie weergegeven, zodat u direct aan de slag kunt met de workflows. U kunt de vervolgkeuzelijst boven in het deelvenster gebruiken om tussen de verschillende zelfstudies te schakelen.

Nadat u de zelfstudie hebt doorlopen, kunt u op Aan de slag klikken om met Extract in Dreamweaver te beginnen. In het deelvenster Extract wordt een miniatuurweergave van mappen en PSD-bestanden in uw Creative Cloud-account weergegeven. Dit zijn de bestanden die zijn geüpload of gesynchroniseerd vanaf uw computer, of bestanden die anderen met u delen in een gezamenlijke map op Creative Cloud.

Het deelvenster Extract met de PSD-bestanden die op Creative Cloud zijn opgeslagen

Opmerking:

Als u de zelfstudie opnieuw wilt starten, klikt u op het pop-upmenu in de rechterbovenhoek van het deelvenster en selecteert u Zelfstudie starten.

PSD-bestanden uploaden naar Creative Cloud

Als u een PSD-bestand naar Creative Cloud wilt uploaden, kiest u Venster > Extract en klikt u op PSD uploaden. Als de PSD-composities door een andere persoon of een ander team zijn ontwikkeld, kunt u ze in Creative Cloud delen. U kunt de bestanden vervolgens downloaden en ze direct uploaden naar uw account door u bij Creative Cloud aan te melden of via het deelvenster Extract in Dreamweaver.

Opmerking:

Als u Dreamweaver 21.2 of een latere versie gebruikt op een apparaat met macOS, schakelt u het bestandstype PSD in vanuit het Finder-venster en uploadt u uw bestand.

Voor macOS

Volg de onderstaande stappen om het PSD-bestand in te schakelen en te uploaden:

Klik in het deelvenster Extract op PSD uploaden.
Klik in het Finder-venster op Opties en selecteer *.psd in de vervolgkeuzelijst die verschijnt.
Selecteer een PSD-bestand en klik op Openen om het bestand te uploaden.

PSD-bestanden openen in het deelvenster Extract

Klik op de miniatuurafbeelding van het gewenste PSD-bestand in het deelvenster Extract. Als er een bijgewerkte versie van het PSD-bestand op Creative Cloud beschikbaar is nadat u het bestand hebt geopend, laadt u het PSD-bestand opnieuw in het deelvenster Extract. Hiertoe klikt u op de naam van het PSD-bestand of klikt u op PSD opnieuw laden in het pop-upmenu rechtsboven. Als u wilt terugkeren naar de miniatuurweergave om een ander bestand te selecteren, klikt u op het Creative Cloud-pictogram in de linkerbovenhoek van het deelvenster.

Als u de weergave wilt vergroten om het ontwerp nog eens goed te bekijken, wijzigt u het zoomniveau boven in het deelvenster Extract of gebruikt u Alt +/-. Gebruik het tabblad Lagen of de vervolgkeuzelijst Laagsamenstelling om elementen in het PSD-bestand weer te geven of te verbergen.

U kunt nu de PSD-compositie omzetten naar een website.

Voorkeuren voor Extract instellen

Met de voorkeuren voor Extract kunt u de standaardbestandsindeling opgeven waarin de afbeeldingen moeten worden geëxtraheerd en kunt u ook de standaardlettertypen kiezen die in het deelvenster Extract moeten worden weergegeven.

Selecteer Bewerken > Voorkeuren (Win) of Dreamweaver > Voorkeuren (Mac).
Selecteer Extract in de lijst Categorie.
(Optioneel) Wijzig de standaardindeling waarin de afbeeldingen moeten worden geëxtraheerd.

Indeling van geëxtraheerde afbeelding
(Optioneel) Selecteer de gewenste resoluties in de sectie Extract voor apparaten. Deze instellingen worden gebruikt wanneer u ervoor kiest om een afbeelding op te slaan in meerdere versies met verschillende resoluties.
- Als u de versies wilt opslaan met een achtervoegsel, klikt u op de overeenkomende rij in de kolom Achtervoegsel en typt u de tekst.
- Als u meerdere versies met verschillende resoluties wilt opslaan in afzonderlijke uitvoermappen, klikt u op de overeenkomende rij in de kolom Map en geeft u het relatieve pad op.
Extract voor apparaten
(Optioneel) Klik op Cache wissen om de gegevens in de cache door het gebruik van Extract te verwijderen.
Klik op Toepassen en sluit vervolgens het dialoogvenster Voorkeuren.
Als u de wijzigingen in het deelvenster Extract wilt weergeven, laadt u het PSD-bestand opnieuw (pop-upmenu > PSD opnieuw laden).

De optie voor het opnieuw laden van het PSD-bestand in het deelvenster Extract

CSS uit PSD-bestanden extraheren

U kunt alle of bepaalde CSS-eigenschappen van elementen in een PSD-compositie kopiëren en de stijlen rechtstreeks in CSS ontwerpen, in Live View of in uw code (CSS-bron of HTML-document) plakken.

Coderingstips worden ook automatisch gevuld met de CSS-eigenschappen van het element dat u selecteert in de PSD-compositie. Als u liever code gebruikt, kunt u deze coderingstips gebruiken om de CSS-eigenschappen naar de code te extraheren.

Klik in het deelvenster Extract (Venster > Extract) op het gewenste PSD-bestand. De miniatuurweergave van het PSD-bestand wordt uitgevouwen, zodat u de compositie goed kunt bekijken.
Klik in het PSD-bestand op het gewenste element of middel. Er wordt een pop-upvenster met een lijst met CSS-stijlen van het element weergegeven. U kunt deze eigenschappen selecteren en kopiëren. U kunt de breedte en hoogte van het geselecteerde element weergeven in pixels of in percentages.

Opmerking: Als u hier kiest voor percentages, worden de afmetingen ook in percentages weergegeven.

De optie CSS kopiëren in het deelvenster Extract

Als u CSS wilt kopiëren, selecteert u de eigenschappen die u wilt kopiëren en klikt u op CSS kopiëren.
Plak de CSS-eigenschappen via een van de volgende methoden in uw document:
- Als u de CSS-eigenschappen in CSS ontwerpen wilt plakken, klikt u met de rechtermuisknop op de gewenste kiezer en klikt u op Stijlen plakken.
- Als u de CSS-eigenschappen wilt plakken via de Elementweergave, klikt u met de rechtermuisknop op een kiezer en klikt u op Stijlen plakken.
- Als u de CSS-eigenschappen in de code wilt plakken, plaatst u de invoegpositie op de gewenste positie, klikt u met de rechtermuisknop en klikt u op Plakken.

Als u coderingstips wilt gebruiken voor het extraheren van CSS, doet u het volgende:

Open een CSS-bron die aan uw document is gekoppeld of schakel over naar de codeweergave van een HTML-document.
Klik in het deelvenster Extract op het gewenste PSD-bestand en vervolgens op het gewenste element in de compositie.
Plaats in uw document de invoegpositie op de gewenste positie in de code.
Typ de naam van een CSS-eigenschap om coderingstips weer te geven met de CSS-eigenschappen van het geselecteerde element in de PSD-compositie. Klik op de gewenste CSS-eigenschap om de code in te voegen.

Coderingstips met een CSS-eigenschap van een element in een PSD-bestand
Als u meerdere CSS-eigenschappen wilt extraheren, selecteert u de gewenste eigenschappen in het deelvenster Extract. Klik vervolgens in de coderingstips op Selectie invoegen.

CSS-eigenschappen als batch invoegen

Tekst uit PSD-bestanden kopiëren

U kunt tekst of inhoud in uw PSD-composities met één klik in uw webpagina invoegen. Als u tekst in uw PSD-compositie naar het deelvenster Extract wilt kopiëren, selecteert u een tekstelement en klikt u op Tekst kopiëren. De tekst wordt naar het klembord gekopieerd. U kunt de tekst vervolgens op elke gewenste positie plakken.

De optie Tekst kopiëren in het deelvenster Extract

Opmerking:

Nadat u de tekst hebt geëxtraheerd, kunt u eigenschappen extraheren die aan de tekst zijn gekoppeld, zoals lettertypen en kleuren. Zie Lettertypen, kleuren en verlopen uit PSD-bestanden extraheren voor meer informatie.

Afbeeldingen uit PSD-bestanden extraheren

U kunt elke laag in uw PSD-compositie gewoon vanuit het deelvenster Extract naar een exacte locatie in Live View voor uw webpagina slepen. De visuele hulpmiddelen in Live View, zoals Livehulplijnen en het pictogram DOM, kunt u gebruiken om een element te slepen en te plaatsen. Als u even pauzeert voordat u het element neerzet, verschijnt het pictogram DOM (</>). De DOM-structuur wordt weergegeven wanneer u de muis op het pictogram </> plaatst zodat u het element in de structuur kunt neerzetten. Als u liever code gebruikt, kunt u de contextafhankelijke coderingstips gebruiken en afbeeldingen extraheren. Met coderingstips kunt u kleuren en verlopen extraheren als afbeeldingen.

Opmerking:

Als uw PSD-bestand meerdere tekengebieden bevat, wordt elk tekengebied weergegeven als een map in het deelvenster Lagen. U kunt de map uitvouwen of samenvouwen om de inhoud ervan weer te geven of te verbergen. Als u wilt inzoomen op een bepaald tekengebied, houdt u Alt ingedrukt en klikt u op de naam van het tekengebied. Als u wilt uitzoomen, klikt u op een willekeurige plaats buiten het tekengebied en klikt u op PASSEND.

Voordat u de geëxtraheerde afbeelding invoegt, geeft Dreamweaver de naam van de afbeelding weer. U kunt deze naam wijzigen. Standaard wordt de afbeelding in de hoofdmap van de site opgeslagen. Als u de afbeelding op een andere locatie wilt opslaan, kunt u het volledige pad naar de map samen met de bestandsnaam opnemen.

Opmerking: Als u een afbeelding extraheert naar een document dat niet tot de gedefinieerde site behoort, wordt de afbeelding geëxtraheerd naar de map waarin zich het document bevindt. Als de documenten nog niet zijn opgeslagen, wordt u gevraagd om het document eerst op te slaan.

U kunt de afbeelding tevens opslaan op uw lokale schijf en deze op een later tijdstip aanroepen in uw webpagina. Wanneer u een responsieve website ontwerpt, kunt u ook met één klik meerdere afbeeldingsversies met verschillende resoluties opslaan voor apparaten.

Klik in het deelvenster Extract op het PSD-bestand waarvan u de afbeeldingen wilt downloaden.
Klik op de gewenste afbeelding in het PSD-bestand.

Opmerking:

Gebruik het tabblad Lagen en de vervolgkeuzelijst Laagsamenstellingen in het deelvenster Extract om afbeeldingen in de PSD-compositie weer te geven of te verbergen. Als een afbeelding uit meerdere lagen bestaat, kunt u een afzonderlijke laag in de afbeelding selecteren en extraheren.

De coderingstips worden in de codeweergave rechts in de werkruimte weergegeven.
Als u meerdere afbeeldingen wilt importeren, houdt u de Shift- of Command-toets ingedrukt en klikt u op de gewenste afbeeldingen. De geselecteerde afbeeldingen worden geëxtraheerd als één afbeelding.
Voer een van de volgende stappen uit:
- Klik op in het pop-upvenster dat wordt weergegeven wanneer u op een afbeelding klikt. Geef het pad, de bestandsnaam, de bestandsindeling en de schaalfactor (indien nodig) op. Voer vervolgens een van de volgende stappen uit:
  
  Klik op Opslaan om de afbeelding met een resolutie van 1x op te slaan. Als u de afbeelding wilt schalen, selecteert u Schalen op en geeft u de schaalfactor op.
  
  Klik op Meerdere opslaan om meerdere afbeeldingsversies met verschillende resoluties op te slaan. Het PSD-bestand hoeft deze versies niet noodzakelijkerwijs te bevatten. Tijdens het extraheren kan de afbeelding in meerdere resoluties worden opgeslagen met Dreamweaver.
U kunt de versies met de gewenste resoluties en de overeenkomende uitvoermap opgeven bij Voorkeuren.
Een afbeelding extraheren via het pictogram Middel extraheren
- Sleep de afbeelding naar de Live View van uw document. Er worden livehulplijnen in Live View weergegeven om u te helpen bij het plaatsen van de afbeelding.
Wanneer u de afbeelding neerzet, geeft Dreamweaver de naam van de afbeelding weer. U kunt niet alleen de naam, maar ook de extensie van de afbeelding wijzigen en op Enter drukken om de afbeelding op te slaan. De afbeelding wordt standaard in de hoofdmap van de site opgeslagen. Als u de afbeelding op een andere locatie wilt opslaan, voert u het pad samen met de bestandsnaam in.
Optie om de bestandsnaam en de extensie te bewerken wanneer u een afbeelding vanuit het deelvenster Extract sleept
- Wanneer u op de afbeelding klikt, worden contextuele coderingstips in Dreamweaver gevuld. Plaats in de codeweergave van uw HTML-document of in uw CSS-document de cursor op de invoegpositie. Nadat u de naam van de eigenschap van de achtergrondafbeelding of de tag <img> hebt getypt, wordt de naam van de geselecteerde afbeelding in de coderingstips weergegeven. Selecteer de afbeelding, wijzig indien nodig de naam en de extensie en druk op Enter.
Standaard wordt de afbeelding in de hoofdmap van de site opgeslagen. Als u de afbeelding op een andere locatie wilt opslaan, voert u dit pad samen met de bestandsnaam in.
Afbeeldingen extraheren via coderingstips

Afmetingen uit PSD-bestanden extraheren

Met behulp van het deelvenster Extract kunt u heel eenvoudig de afmetingswaarde tussen twee willekeurige elementen in de PSD-compositie extraheren.

Klik in het PSD-bestand in het deelvenster Extract op de gewenste elementen terwijl u Shift of Command ingedrukt houdt.

In het deelvenster Extract worden de horizontale en verticale afstand tussen de twee elementen weergegeven.

Afmetingen in het deelvenster Extract

Opmerking:

Als u de afmetingen in percentages wilt weergeven, klikt u op een element en klikt u vervolgens op percentage.
Klik op de gewenste waarde om deze waarde naar het klembord te kopiëren.
Plak de waarde waar deze nodig is, bijvoorbeeld in de CSS-eigenschappen van CSS ontwerpen of in uw code.

Lettertypen, kleuren en verlopen uit PSD-bestanden extraheren

Met het deelvenster Extract kunt u de CSS-eigenschappen extraheren van lettertypen, kleuren of verlopen die in uw PSD-compositie worden gebruikt.

Klik in het deelvenster Extract op Stijlen.
Als u lettertypen wilt extraheren, voert u de volgende stappen uit in het gedeelte Lettertypen.
1. Vouw het gewenste lettertype uit.
  
  Klik voor meer informatie over het lettertype op het pictogram Adobe Fonts ().
2. Klik op de opmaak en de grootte die u wilt kopiëren en klik in het pop-upvenster dat verschijnt op CSS kopiëren. Extraheer de tags van de tekstelementen met het lettertype, de opmaak en de grootte waarop u hebt geklikt.
  
  Opmerking:
  
  U kunt in de voorkeuren van Extract het lettertype wijzigen in 'em' of 'rem' (Voorkeuren > Extract). Klik op PSD opnieuw laden in het pop-upmenu in de rechterbovenhoek van het panel Extract om de wijzigingen weer te geven.
  
  Lettertypen extraheren
3. Plak de CSS waar u die nodig hebt, bijvoorbeeld in de code of in CSS ontwerpen.
Als u kleuren wilt extraheren, voert u de volgende stappen uit in het gedeelte Kleuren:
1. Klik op het gewenste kleurstaal. Extraheer de tags van de elementen met de geselecteerde kleur.
  
  Opmerking: U kunt ook een andere kleur in de PSD-compositie kiezen met de kleurkiezer.
2. Selecteer in het pop-upvenster dat wordt weergegeven wanneer u op het kleurstaal klikt, het gewenste kleurmodel (RGB, Hexadecimaal of HSL) en kopieer (Ctrl+c; Cmd+c) vervolgens de kleurwaarde.
  
  Kleuren extraheren
3. Plak de kleurwaarde waar u die nodig hebt, bijvoorbeeld in de code of in CSS ontwerpen.
Als u verlopen wilt extraheren, klikt u op een verloopstaal in het gedeelte Verlopen. Klik in het pop-upvenster dat wordt weergegeven, op CSS kopiëren. Plak de CSS waar u die nodig hebt, bijvoorbeeld in de code of in CSS ontwerpen.

Leveranciersvoorvoegsels die zijn geselecteerd in de voorkeuren (Voorkeuren > CSS-stijlen), worden ook bij de verlopen geplakt. Als u een radiaal verloop extraheert, wordt de bijbehorende CSS ingevoegd zonder een leveranciersvoorvoegsel omdat radiale verlopen niet worden ondersteund.

Verloop extraheren