Handboek Annuleren

Extract in Dreamweaver

  1. Dreamweaver Handboek
  2. Inleiding
    1. Basisbeginselen van responsief webontwerp
    2. Nieuwe functies in Dreamweaver
    3. Webontwikkeling met Dreamweaver: een overzicht
    4. Dreamweaver / Algemene vragen
    5. Sneltoetsen
    6. Systeemvereisten voor Dreamweaver
    7. Functieoverzicht
  3. Dreamweaver en Creative Cloud
    1. Dreamweaver-instellingen synchroniseren met Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Photoshop-bestanden gebruiken in Dreamweaver
    4. Werken met Adobe Animate en Dreamweaver
    5. Voor het web geoptimaliseerde SVG-bestanden uit Libraries extraheren
  4. De werkruimten en weergaven van Dreamweaver
    1. De werkruimte van Dreamweaver
    2. De werkruimte van Dreamweaver optimaliseren voor visuele ontwikkeling
    3. Bestanden zoeken op bestandsnaam of inhoud | Mac OS
  5. Sites opzetten
    1. Over Dreamweaver-sites
    2. Een lokale versie van uw site instellen
    3. Verbinding maken met een publicatieserver
    4. Een testserver instellen
    5. Instellingen van Dreamweaver-sites importeren en exporteren
    6. Bestaande websites overzetten van een externe server naar de hoofdmap van uw lokale site
    7. Toegankelijkheidsfuncties in Dreamweaver
    8. Geavanceerde instellingen
    9. Sitevoorkeuren instellen voor het overzetten van bestanden
    10. Proxyserverinstellingen opgeven in Dreamweaver
    11. Dreamweaver-instellingen synchroniseren met Creative Cloud
    12. Git gebruiken in Dreamweaver
  6. Bestanden beheren
    1. Bestanden maken en openen
    2. Bestanden en mappen beheren
    3. Bestanden van uw server ophalen en op uw server plaatsen
    4. Bestanden inchecken en uitchecken
    5. Bestanden synchroniseren
    6. Bestanden vergelijken om verschillen op te sporen
    7. Bestanden en mappen op uw Dreamweaver-site camoufleren
    8. Ontwerpnotities inschakelen voor Dreamweaver-sites
    9. Potentieel misbruik van Gatekeeper voorkomen
  7. Lay-out en ontwerp
    1. Visuele lay-outhulpmiddelen gebruiken
    2. Uw pagina opmaken met CSS
    3. Responsieve websites ontwerpen met Bootstrap
    4. Mediaquery's maken en gebruiken in Dreamweaver
    5. Inhoud in tabellen presenteren
    6. Kleuren
    7. Responsive design met dynamische rasterlay-outs
    8. Extract in Dreamweaver
  8. CSS
    1. Informatie over CSS (Cascading Style Sheets)
    2. Pagina's opmaken met CSS ontwerpen
    3. CSS-preprocessors gebruiken in Dreamweaver
    4. CSS-stijlvoorkeuren instellen in Dreamweaver
    5. CSS-regels verplaatsen in Dreamweaver
    6. Inline CSS converteren naar een CSS-regel in Dreamweaver
    7. Werken met div-tags
    8. Verlopen toepassen op een achtergrond
    9. CSS3-overgangseffecten maken en bewerken in Dreamweaver
    10. Code opmaken
  9. Pagina-inhoud en assets
    1. Pagina-eigenschappen instellen
    2. Eigenschappen voor CSS-koppen en CSS-koppelingen
    3. Werken met tekst
    4. Tekst, tags en kenmerken zoeken en vervangen
    5. Het deelvenster DOM
    6. Bewerken in Live View
    7. Documenten coderen in Dreamweaver
    8. Elementen selecteren en weergeven in het documentvenster
    9. Teksteigenschappen instellen in de eigenschappencontrole
    10. Spelling op een webpagina controleren
    11. Horizontale lijnen gebruiken in Dreamweaver
    12. Lettertypecombinaties toevoegen en aanpassen in Dreamweaver
    13. Werken met assets
    14. Datums in Dreamweaver invoegen en bijwerken
    15. Favoriete assets maken en beheren in Dreamweaver
    16. Afbeeldingen invoegen en bewerken in Dreamweaver
    17. Mediaobjecten toevoegen
    18. Video's toevoegen in Dreamweaver
    19. HTML5-video invoegen
    20. SWF-bestanden invoegen
    21. Audio-effecten toevoegen
    22. HTML5-audio invoegen in Dreamweaver
    23. Werken met bibliotheekitems
    24. Arabische en Hebreeuwse tekst gebruiken in Dreamweaver
  10. Koppelingen en navigatie
    1. Over koppelingen en navigatie
    2. Koppelingen
    3. Afbeeldingen met hyperlinks
    4. Problemen met koppelingen oplossen
  11. jQuery-widgets en -effecten
    1. De jQuery-gebruikersinterface en mobiele widgets in Dreamweaver gebruiken
    2. jQuery-effecten gebruiken in Dreamweaver
  12. Websites coderen
    1. Over coderen in Dreamweaver
    2. Coderingsomgeving in Dreamweaver
    3. Coderingsvoorkeuren instellen
    4. Codekleuren aanpassen
    5. Code schrijven en bewerken
    6. Coderingstips en codevoltooiing
    7. Code samenvouwen en uitvouwen
    8. Code hergebruiken met codefragmenten
    9. Linting voor code gebruiken
    10. Code optimaliseren
    11. Code bewerken in de ontwerpweergave
    12. Werken met de kopinhoud van pagina's
    13. Include-bestanden op de server invoegen in Dreamweaver
    14. Tagbibliotheken gebruiken in Dreamweaver
    15. Aangepaste tags importeren in Dreamweaver
    16. JavaScript-gedrag gebruiken (algemene instructies)
    17. Ingebouwd JavaScript-gedrag toepassen
    18. Over XML en XSLT
    19. XSL-transformaties op de server uitvoeren in Dreamweaver
    20. XSL-transformaties op de client uitvoeren in Dreamweaver
    21. Tekenentiteiten toevoegen voor XSLT in Dreamweaver
    22. Code opmaken
  13. Productonafhankelijke workflows
    1. Extensies in Dreamweaver installeren en gebruiken
    2. In-app updates in Dreamweaver
    3. Microsoft Office-documenten invoegen in Dreamweaver (alleen Windows)
    4. Werken met Fireworks en Dreamweaver
    5. Inhoud bewerken op Dreamweaver-sites met behulp van Contribute
    6. Integratie van Dreamweaver met Business Catalyst
    7. Persoonlijke e-mailcampagnes maken
  14. Sjablonen
    1. Over Dreamweaver-sjablonen
    2. Sjablonen en op een sjabloon gebaseerde documenten herkennen
    3. Een Dreamweaver-sjabloon maken
    4. Bewerkbare gebieden maken in sjablonen
    5. Herhalingsgebieden en tabellen maken in Dreamweaver
    6. Optionele gebieden in sjablonen gebruiken
    7. Bewerkbare tagkenmerken in Dreamweaver definiëren
    8. Geneste sjablonen maken in Dreamweaver
    9. Sjablonen bewerken, bijwerken en verwijderen
    10. XML-inhoud exporteren en importeren in Dreamweaver
    11. Een sjabloon uit een bestaand document toepassen of verwijderen
    12. Inhoud bewerken in Dreamweaver-sjablonen
    13. Syntaxisregels voor sjabloontags in Dreamweaver
    14. Voorkeuren voor de markering van sjabloongebieden instellen
    15. Voordelen van het gebruik van sjablonen in Dreamweaver
  15. Mobiel en meerdere schermen
    1. Mediaquery's maken
    2. Paginastand voor mobiele apparaten wijzigen
    3. Web-apps voor mobiele apparaten maken met Dreamweaver
  16. Dynamische sites, pagina's en webformulieren
    1. Informatie over web-applicaties
    2. Uw computer instellen voor het ontwikkelen van applicaties
    3. Problemen met databaseverbindingen oplossen
    4. Verbindingsscripts verwijderen in Dreamweaver
    5. Dynamische pagina's ontwerpen
    6. Overzicht van dynamische inhoudsbronnen
    7. Bronnen met dynamische inhoud definiëren
    8. Dynamische inhoud toevoegen aan pagina's
    9. Dynamische inhoud wijzigen in Dreamweaver
    10. Databaserecords weergeven
    11. Livegegevens leveren en problemen oplossen Dreamweaver
    12. Aangepast servergedrag toevoegen in Dreamweaver
    13. Formulieren maken met Dreamweaver
    14. Formulieren gebruiken om informatie van gebruikers te verzamelen
    15. ColdFusion-formulieren maken en inschakelen in Dreamweaver
    16. Webformulieren maken
    17. Verbeterde HTML5-ondersteuning voor formulierelementen
    18. Een formulier ontwikkelen met Dreamweaver
  17. Applicaties visueel samenstellen
    1. Hoofd- en detailpagina's maken in Dreamweaver
    2. Zoekpagina's en resultatenpagina's maken
    3. Een pagina voor het invoegen van records maken
    4. Een pagina voor het bijwerken van records maken in Dreamweaver
    5. Pagina's voor het verwijderen van records maken in Dreamweaver
    6. ASP-opdrachten gebruiken om een database aan te passen in Dreamweaver
    7. Een registratiepagina maken
    8. Een aanmeldingspagina maken
    9. Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben
    10. Mappen beveiligen in ColdFusion met Dreamweaver
    11. ColdFusion-componenten gebruiken in Dreamweaver
  18. Websites testen, voorvertonen en publiceren
    1. Pagina's voorvertonen
    2. Dreamweaver-webpagina's voorvertonen op meerdere apparaten
    3. Uw Dreamweaver-site testen
  19. Problemen oplossen
    1. Opgeloste problemen
    2. Bekende problemen

 

 

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

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
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:
  1. Klik in het deelvenster Extract op PSD uploaden.
  2. Klik in het Finder-venster op Opties en selecteer *.psd in de vervolgkeuzelijst die verschijnt.
  3. 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.

  1. Selecteer Bewerken > Voorkeuren (Win) of Dreamweaver > Voorkeuren (Mac).

  2. Selecteer Extract in de lijst Categorie.

  3. (Optioneel) Wijzig de standaardindeling waarin de afbeeldingen moeten worden geëxtraheerd.

    Geëxtraheerde afbeeldingsindeling in Dreamweaver CC
    Indeling van geëxtraheerde afbeelding

  4. (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
    Extract voor apparaten

  5. (Optioneel) Klik op Cache wissen om de gegevens in de cache door het gebruik van Extract te verwijderen.

  6. Klik op Toepassen en sluit vervolgens het dialoogvenster Voorkeuren.

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

  1. 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.

  2. 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
    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. 

  3. 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:

  1. Open een CSS-bron die aan uw document is gekoppeld of schakel over naar de codeweergave van een HTML-document.

  2. Klik in het deelvenster Extract op het gewenste PSD-bestand en vervolgens op het gewenste element in de compositie.

  3. Plaats in uw document de invoegpositie op de gewenste positie in de code. 

  4. 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
    Coderingstips met een CSS-eigenschap van een element in een PSD-bestand

  5. Als u meerdere CSS-eigenschappen wilt extraheren, selecteert u de gewenste eigenschappen in het deelvenster Extract. Klik vervolgens in de coderingstips op Selectie invoegen.

    Meerdere CSS-eigenschappen tegelijk invoegen in Dreamweaver CSS
    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
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.

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

  2. 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. 

  3. 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.

  4. 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
    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
    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
    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. 

  1. 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
    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.

  2. Klik op de gewenste waarde om deze waarde naar het klembord te kopiëren.

  3. 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.

  1. Klik in het deelvenster Extract op Stijlen.

  2. 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
      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
      Kleuren extraheren

    3. Plak de kleurwaarde waar u die nodig hebt, bijvoorbeeld in de code of in CSS ontwerpen.

  3. 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
    Verloop extraheren

 Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?