Handboek Annuleren

Creative Cloud Libraries 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

 

 

Zoek, beheer en gebruik creatieve middelen in Dreamweaver-projecten met Adobe Stock en andere Adobe-apps.

Met Creative Cloud Libraries hebt u overal toegang tot uw favoriete middelen. U kunt in de verschillende Creative Cloud-desktop- en mobiele apps afbeeldingen, kleuren, tekststijlen en meer maken en vastleggen en deze vervolgens eenvoudig gebruiken in andere desktop- en mobiele apps voor een naadloze creatieve workflow.

U hebt rechtstreeks vanuit Dreamweaver toegang tot CC Libraries, zodat u kleuren en illustraties op uw webpagina's opnieuw kunt gebruiken. Ook kunt u de ingevoegde illustraties up-to-date houden met uw illustraties in de cloud door ze als 'gekoppelde' assets in te voegen.

Lees verder voor meer informatie over het gebruik van CC Libraries in Dreamweaver.

Het deelvenster CC Libraries

Het deelvenster CC Libraries (Venster > CC Libraries) is het belangrijkste toegangspunt voor uw assets die op Creative Cloud zijn opgeslagen. In het deelvenster kunt u ook zoeken naar assets in Adobe Stock.

Het deelvenster CC Libraries
Het deelvenster CC Libraries

Met dit deelvenster kunt u:

  • Naar een specifieke bibliotheek bladeren voor de elementen die in de bibliotheek zijn opgeslagen
  • Een bibliotheek maken
  • Een voorbeeld van de assets weergeven in de geselecteerde bibliotheek
  • Assets verslepen of kopiëren om deze op uw webpagina in te voegen
  • Een trefwoord invoeren, zoals een volledige of gedeeltelijke naam van een afbeelding waarnaar u wilt zoeken op Adobe Stock

Aan de slag

Een site definiëren in Dreamweaver

Een site in Dreamweaver is een map waarin alle afbeeldingen, video's, scripts, stijlpagina's en andere bestanden die verwant zijn aan uw webpagina's worden opgeslagen. Door meteen een site te definiëren, kunt u eenvoudig de assets opslaan die u vanaf CC Libraries importeert in de site. Zorg ervoor dat de webpagina waarin u assets uit CC Libraries wilt importeren, ook in de sitemap wordt opgeslagen.

Zie Een lokale versie van uw site instellen voor meer informatie over het maken van sites.

Middelen toevoegen aan CC Libraries

Door ervoor te zorgen dat alle vereiste middelen beschikbaar zijn in Creative Cloud, kunt u de middelen snel in uw webpagina in Dreamweaver importeren.

Als u op zoek bent naar stockafbeeldingen, is Adobe Stock het ideale startpunt. Zie Middelen ophalen uit Adobe Stock voor gedetailleerde informatie.

De afbeeldingen en de kleuren die u vastlegt of maakt met verschillende mobiele en desktop-apps van Adobe, kunnen in Creative Cloud worden opgeslagen en in uw webpagina's worden geïmporteerd. U kunt bijvoorbeeld een vectorafbeelding importeren die met Adobe Shape CC is gemaakt of een afbeelding die met Photoshop is verwerkt. Met Creative Cloud kunnen u en uw team samenwerken en middelen delen, zodat u ook middelen die door anderen zijn gemaakt, kunt hergebruiken.

Zie Creative Cloud Libraries voor meer informatie over Creative Cloud Libraries.

Middelen ophalen uit Adobe Stock

Adobe Stock is nauw geïntegreerd met Creative Cloud Libraries. U kunt met de volgende methoden afbeeldingen zoeken en toevoegen aan CC Libraries:

  • Rechtstreeks via de website van Adobe Stock.
  • Met het deelvenster CC Libraries in Dreamweaver.
  • Met het deelvenster CC Libraries in andere Adobe-toepassingen, zoals Photoshop en Illustrator.

Nadat u afbeeldingen hebt toegevoegd aan een CC-bibliotheek, volgt u de instructies in het onderwerp Illustraties hergebruiken in CC Libraries om deze afbeeldingen in uw webpagina's te gebruiken.

Als u liever niet meteen Stock-afbeeldingen aanschaft, kunt u Stock-afbeeldingen met een watermerk (voorvertoningen) toevoegen aan uw bibliotheken en deze gebruiken als tijdelijke aanduidingen. Wanneer u besluit om de afbeeldingen aan te schaffen, kunt u dit doen via het deelvenster CC Libraries in Dreamweaver en andere apps of op de website van Adobe Stock. 

Zoeken naar afbeeldingen op Adobe Stock met het deelvenster CC Libraries
Zoeken naar afbeeldingen op Adobe Stock met het deelvenster CC Libraries

Wanneer u een licentie voor een afbeelding aanschaft, worden in uw geopende documenten alle exemplaren van het middel met watermerk bijgewerkt naar de gelicentieerde afbeeldingsversie met hoge resolutie.

Opgeslagen kleuren en kleurenthema's in CC Libraries hergebruiken

Kleuren en kleurenthema's in Live View hergebruiken

U kunt kleuren en kleurenthema's opslaan in Creative Cloud Libraries vanuit apps zoals Illustrator, Photoshop of Adobe Color CC. De kleuren en kleurenthema's kunt u als volgt in uw webpagina's importeren met het deelvenster CC Libraries in Dreamweaver:

  1. Voer een van de volgende stappen uit in het deelvenster CC Libraries:

    • Klik op de kleur of het kleurenthema dat u nodig hebt. De HEX-waarde van de kleur of het kleurenthema wordt naar het klembord gekopieerd.
    • Klik met de rechtermuisknop op de kleur of het kleurenthema en klik vervolgens op RGB kopiëren of HEX kopiëren. 
  2. Plak de kleurwaarde in de codeweergave of in CSS ontwerpen.

Kleuren hergebruiken in de codeweergave

Kleuren die u in Creative Cloud hebt opgeslagen, zijn als coderingstips beschikbaar in de codeweergave. U kunt de gewenste kleuren via de coderingstips selecteren wanneer u op codes zoekt in de codeweergave. Het Creative Cloud-pictogram naast de kleur in de coderingstips geeft aan dat deze kleuren in Creative Cloud zijn opgeslagen.

Kleuren in een Creative Cloud-bibliotheek weergegeven in de coderingstips
Kleuren in een Creative Cloud-bibliotheek weergegeven in de coderingstips

Met de coderingstips worden kleuren gekozen uit de bibliotheek die is geopend in het deelvenster CC Libraries. In de bovenstaande afbeelding zijn de kleuren in de bibliotheek 'Mijn bibliotheek' beschikbaar als coderingstips. Als u de kleuren in een andere Creative Cloud-bibliotheek wilt gebruiken als coderingstips, opent u de betreffende bibliotheek in het deelvenster CC Libraries en gaat u verder met uw werk in de codeweergave.

Illustraties hergebruiken die in CC Libraries zijn opgeslagen

Met ingang van 16 november 2021 is de Dreamweaver-functie om SVG te extraheren uit een Illustrator-asset beëindigd. We raden u aan om als tijdelijke oplossing de optie Afbeeldingsindeling in te schakelen en Illustrator-assets (.ai) te converteren naar de PNG 32/PNG 24/PNG 8/JPEG-indeling. In plaats daarvan kunnen gebruikers ook Illustrator-assets exporteren naar de SVG-indeling vanuit de Illustrator-app.

U kunt illustraties die u met de Adobe-apps voor mobiele apparaten en desktops hebt gemaakt, zoals Photoshop, Illustrator, Adobe Shape CC of Adobe Sketch CC, in uw Creative Cloud Libraries opslaan. Met behulp van het deelvenster CC Libraries kunt u illustraties invoegen in Live View en met de coderingstips kunt u illustraties rechtstreeks in uw code invoegen.

U kunt illustraties uit de CC Libraries invoegen als:

  • Gekoppelde assets: Wanneer u illustraties als gekoppelde assets invoegt, wordt in Live View een klein cloudpictogram weergegeven in de rechterbenedenhoek van het asset. Dit pictogram geeft aan dat het asset aan het oorspronkelijke asset in de cloud is gekoppeld. Het cloudpictogram wordt ook naast het middel weergegeven in het deelvenster Middelen.
  • Niet-gekoppelde middelen: U kunt een middel als een lokale kopie invoegen in uw webpagina's. Klik in Live View met de rechtermuisknop op het gewenste asset in het deelvenster CC Libraries en selecteer 'Niet-gekoppelde invoegen'. Wanneer u een kopie van een illustratie invoegt, wordt het middel naar uw lokale apparaat gekopieerd en niet gekoppeld met het oorspronkelijke middel in de cloud. Dit betekent dat elke wijziging of update van het asset in de cloud niet in Dreamweaver wordt doorgevoerd.

U kunt ook assets in een batch downloaden en op uw computer opslaan voor later gebruik.

Illustraties hergebruiken in Live View

  1. Voer een van de volgende stappen uit:

    1. Sleep de illustratie vanuit het deelvenster CC Libraries naar de pagina in Live View.

      Opmerking:Als u illustraties vanuit het deelvenster CC Libraries naar Live View sleept, wordt de illustratie als een 'gekoppelde' illustratie ingevoegd (als u een site hebt gedefinieerd).

      De Illustrator-bestanden worden standaard ingevoegd als voor het web geoptimaliseerde SVG-bestanden. Als u de eigenschappen van SVG-bestanden wilt aanpassen, kunt u de voorkeuren in het bestand options.json bewerken. Zie Voor het web geoptimaliseerde SVG-bestanden uit CC Libraries extraheren voor meer informatie.

    2. Klik met de rechtermuisknop op het gewenste middel in het deelvenster CC Libraries en selecteer:

      • 'Gekoppelde invoegen' om de illustratie als een gekoppeld asset in te voegen. Dit betekent dat het asset aan het bijbehorende asset in de cloud blijft gekoppeld. Elke wijziging van het asset in de cloud wordt meteen in het gekoppelde asset in Dreamweaver doorgevoerd.
      • 'Niet-gekoppelde invoegen' om de illustratie als een niet-gekoppeld middel in te voegen.
  2. Geef in het dialoogvenster Sampling dat wordt weergegeven de bestandsnaam en de afmetingen van de afbeelding op. Zie De samplingopties voor illustraties opgeven voor meer informatie.

Illustraties hergebruiken in de codeweergave

Illustraties die u in Creative Cloud Libraries hebt opgeslagen, zijn als coderingstips beschikbaar in de codeweergave. Open eerst de benodigde bibliotheek door deze te selecteren in het deelvenster CC Libraries. Schakel vervolgens over naar de codeweergave en selecteer tijdens het coderen de benodigde illustratie in de coderingstips. Het Creative Cloud-pictogram naast de illustratie in de coderingstips geeft aan dat de illustratie in Creative Cloud is opgeslagen.

Illustraties in CC Libraries weergegeven als coderingstips
Illustraties in CC Libraries weergegeven als coderingstips

Opmerking: Als u illustraties invoegt met coderingstips, worden de illustraties als 'niet-gekoppelde' illustraties ingevoegd.

Als u de kleuren in een andere Creative Cloud-bibliotheek wilt gebruiken als coderingstips, opent u de betreffende bibliotheek in het deelvenster CC Libraries en gaat u verder met uw werk in de codeweergave.

De samplingopties voor illustraties opgeven

In de vakken Hoogte en Breedte wordt resampling op het asset toegepast met behulp van de Dreamweaver-engine voor afbeeldingsoptimalisatie. U kunt ook het indelingstype selecteren waarin u het asset wilt plaatsen. Het ingeschakelde cloudpictogram geeft aan dat het asset als gekoppeld asset wordt geplaatst. Nadat u de bestandsnaam en samplingopties hebt opgegeven, drukt u op Enter om het asset in te voegen.

Resampling toepassen op afbeeldingen
Resampling toepassen op afbeeldingen

 Opmerking:

  • De optie SVG is alleen beschikbaar voor Illustrator-bestanden (.ai) en wordt als standaardwaarde ingesteld voor dergelijke bestanden. U kunt de indeling voor dergelijke bestanden wijzigen in JPEG met de vervolgkeuzelijst in het dialoogvenster met resamplingopties.
  • Een JPEG-bestand kan alleen als een JPEG-bestand worden ingevoegd en voor dergelijke bestanden is dan ook geen andere indelingsoptie beschikbaar.

Afbeeldingen bewerken

Met het deelvenster CC Libraries kunt u middelen van InDesign en Illustrator openen en bewerken in de systeemeigen toepassingen. Klik met de rechtermuisknop op het middel in het deelvenster CC Libraries en klik op Bewerken.

Zorg dat de systeemeigen applicatie (InDesign of Illustrator) is geïnstalleerd op dezelfde computer als het exemplaar van Dreamweaver dat u gebruikt. Zorg ook dat u de nieuwste updates voor deze toepassingen hebt geïnstalleerd vanaf Creative Cloud.

Gekoppelde illustraties loskoppelen, de naam ervan wijzigen of resampling toepassen

U kunt een van de volgende opties gebruiken om voor afbeeldingen die u via CC Libraries hebt geïmporteerd in uw webpagina, de naam of grootte te wijzigen of resampling toe te passen:

  • Klik op het middel in Live View en klik vervolgens op het cloudpictogram. 
  • Klik met de rechtermuisknop op het middel en klik op Opties voor gekoppeld middel.
  • Dubbelklik in het deelvenster Middelen op het cloudpictogram naast het middel.

In het dialoogvenster met resamplingopties kunt u de vereiste eigenschappen wijzigen. Klik in het dialoogvenster met resamplingopties op het cloudpictogram om het middel los te koppelen van de bijbehorende bron in CC Libraries.

Wanneer u een middel loskoppelt, worden wijzigingen in het bronbestand in Creative Cloud niet doorgevoerd in de afbeelding op uw webpagina.

Illustraties downloaden

U kunt de gewenste illustraties in bulk als gekoppelde middelen downloaden vanuit CC Libraries en deze op een later moment in uw project invoegen. Wanneer u deze middelen in uw projecten gebruikt, blijven ze gekoppeld aan het bijbehorende bibliotheekitem. 

  • Gekoppeld: Als u illustraties als gekoppelde assets wilt downloaden, klikt u met de rechtermuisknop op het asset in het deelvenster CC Libraries en selecteert u Gekoppelde downloaden. Het pop-upvenster met de bestandsnaam en de resamplingopties wordt weergegeven. Geef de bestandsnaam en samplingopties op en druk op Enter om het middel in uw sitemap op te slaan.
  • Niet gekoppeld: Als u illustraties als niet-gekoppelde assets wilt downloaden, klikt u met de rechtermuisknop op het gewenste asset in het deelvenster CC Libraries en selecteert u Kopie downloaden. Het pop-upvenster met de bestandsnaam en de resamplingopties wordt weergegeven. Geef de bestandsnaam en samplingopties op en druk op Enter om het middel in uw sitemap op te slaan.

 Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

14-16 oktober Miami Beach en online

Adobe MAX 2024

Adobe MAX

The Creativity Conference

14-16 oktober Miami Beach en online