Handboek Annuleren

Bestanden maken en openen

Zoeken
Dreamweaver

Dreamweaver

App openen
  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

 

 

Bestanden maken, openen, bewerken, opslaan en herstellen in Dreamweaver. Sjablonen maken en bijbehorende bestanden openen.

Dreamweaver biedt een flexibele omgeving voor het werken met diverse webdocumenten. Naast HTML-documenten kunt u ook diverse tekstdocumenten maken en openen, waaronder JavaScript-documenten, PHP-documenten en CSS-stijlpagina's (Cascading Style Sheets).

Dreamweaver biedt verscheidene opties voor het maken van een nieuw document. U kunt elk van de volgende documenten maken:

  • Een nieuw, leeg document of een nieuwe, lege sjabloon

  • Een document dat is gebaseerd op een van de vooraf ontworpen pagina-indelingen die worden geleverd bij Dreamweaver, waaronder 30 op CSS gebaseerde pagina-indelingen.

  • Een document dat is gebaseerd op een van uw bestaande sjablonen

    U kunt ook documentvoorkeuren instellen. Als u bijvoorbeeld vaak werkt met een bepaald type document, kunt u dat als standaarddocumenttype instellen voor de nieuwe pagina's die u maakt.

    U kunt zowel in de ontwerpweergave als de codeweergave gemakkelijk documenteigenschappen definiëren, zoals metatags, de documenttitel, achtergrondkleuren en verscheidene andere pagina-eigenschappen.

Dreamweaver-bestandstypen

U kunt in Dreamweaver met allerlei verschillende bestandstypen werken. U zult het meest werken met HTML-bestanden. HTML-bestanden (Hypertext Markup Language) bevatten codetaal die verantwoordelijk is voor de weergave van een webpagina in een browser. U kunt HTML-bestanden opslaan met de extensie .html of .htm. In Dreamweaver worden bestanden standaard opgeslagen met de extensie .html.

Met Dreamweaver kunt u op HTML5 gebaseerde webpagina's maken en bewerken. Er zijn ook startlay-outs beschikbaar waarmee u helemaal zelf HTML5-pagina's kunt samenstellen.

Hier volgen enkele andere veelvoorkomende bestandstypen die u kunt gebruiken wanneer u werkt in Dreamweaver:

CSS

Cascading Style Sheet-bestanden hebben de extensie .css. Deze worden gebruikt om de HTML-inhoud op te maken en om de positie van de verschillende pagina-elementen te bepalen.

GIF

Graphics Interchange Format-bestanden hebben de extensie .gif. De GIF-indeling is een populaire grafische webindeling voor cartoons, logo's, afbeeldingen met transparante gebieden en animaties. GIF-bestanden bevatten maximaal 256 kleuren.

JPEG

Joint Photographic Experts Group-bestanden (genoemd naar de organisatie die de indeling heeft gemaakt) hebben de extensie .jpg en zijn vaak foto's of afbeeldingen met vele kleuren. De JPEG-indeling kan het best worden gebruikt voor digitale of gescande foto's, afbeeldingen met structuren, afbeeldingen met kleurverloop en afbeeldingen waarvoor meer dan 256 kleuren nodig zijn.

XML

Extensible Markup Language-bestanden hebben de extensie .xml. Deze bestanden bevatten gegevens in onbewerkte vorm die kunnen worden opgemaakt met XSL (Extensible Stylesheet Language).

Het dialoogvenster Nieuw document

Het dialoogvenster Nieuw document geeft alle ondersteunende documentbestandstypen weer, waaronder PHP, XML en SVG.

U kunt ook vooraf gedefinieerde lay-outs, sjablonen en frameworks openen via dit dialoogvenster.

Opmerking:

Alle weergegeven startlay-outs zijn ontworpen om responsieve websites te ondersteunen en zijn compatibel met HTML-5.

Een HTML-lay-out maken met een lege pagina

U kunt een pagina maken die een vooraf ontworpen CSS-lay-out bevat, maar u kunt ook een volledig lege pagina maken en vervolgens zelf uw eigen lay-out maken.

  1. Selecteer Bestand > Nieuw.

  2. Selecteer in de categorie Nieuw document het type pagina dat u wilt maken uit de kolom Documenttype. Selecteer bijvoorbeeld HTML om een gewone HTML-pagina te maken.

  3. Selecteer een documenttype in het pop-upmenu Documenttype. In de meeste gevallen kunt u de standaardoptie HTML5 gebruiken.

  4. Selecteer aanvullende opties afhankelijk van het type pagina dat u wilt maken.

    • Geen: Selecteer deze optie als u een eenvoudige webpagina wilt maken zonder een framework te gebruiken.
    • Bootstrap: De Bootstrap-sjablonen zijn vooraf gedefinieerde lay-outs die het Bootstrap-framework gebruiken. Selecteer deze optie als u responsieve webpagina's wilt maken met het Bootstrap-framework. Standaard wordt een Bootstrap 4.0.0-document gemaakt.
    Opmerking:

    Selecteer het Bootstrap-framework als u van plan bent om responsieve webpagina´s te maken.

  5. Als u geen framework gebruikt:

    • Documenttitel: Voer uw documenttitel in dit veld in, dan voegt Dreamweaver deze automatisch toe aan de sectie <head> van het document.
    • Documenttype: Selecteer een documenttype in het pop-upmenu Documenttype. In de meeste gevallen kunt u de standaardoptie HTML5 gebruiken.

    Als u een van de XHTML-documenttypedefinities in het menu Documenttype selecteert, wordt de pagina XHTML-compatibel. U kunt bijvoorbeeld een HTML-document maken dat voldoet aan de XHTML-standaard, door in het menu de optie XHTML 1.0 Transitional of XHTML 1.0 Strict te selecteren. XHTML (Extensible Hypertext Markup Language) is een herformulering van HTML als een XML-toepassing. Gewoonlijk biedt het gebruik van XHTML u de voordelen van XML, terwijl tegelijkertijd de compatibiliteit van uw webdocumenten met oudere, hedendaagse en toekomstige browsers is gegarandeerd.

    Opmerking:

    Voor meer informatie over XHTML gaat u naar de website van het World Wide Web Consortium (W3C). Hier vindt u de specificatie voor XHTML 1.1 - Op module gebaseerd XHTML (www.w3.org/TR/xhtml11/) en XHTML 1.0 (www.w3c.org/TR/xhtml1/) en ook XHTML-validatiesites voor bestanden op het web (http://validator.w3.org/) en lokale bestanden (http://validator.w3.org/file-upload.html).

    • CSS koppelen: Koppel een bestaande CSS-lay-out aan de pagina. Klik hiervoor op het pictogram Stijlpagina koppelen naast het deelvenster CSS-bestand koppelen en selecteer een CSS-stijlpagina.
    Een nieuwe HTML-pagina maken zonder een framework te gebruiken
    Een nieuwe HTML-pagina maken zonder een framework te gebruiken

    Als u een nieuwe pagina wilt maken op basis van uw Photoshop-compositie, selecteert u Gebruik Extract om uw pagina te maken met Photoshop-composities. 

    Als u deze optie selecteert, wordt het deelvenster Extract geopend waar u een PSD-bestand kunt uploaden en kunt beginnen met het maken van uw HTML-pagina.

  6. Als u een responsieve webpagina wilt maken met het Bootstrap-framework:

    • Bootstrap CSS: Overweeg om een nieuwe Bootstrap CSS te maken of gebruik een bestaand CSS-bestand. Als u een bestaand CSS-bestand gebruikt, moet u het pad naar het bestand opgeven. Zorg ervoor dat het CSS-bestand zich binnen de hoofdmap van de site bevindt.
    • CSS koppelen: Koppel een bestaande CSS-lay-out aan de pagina. Klik hiervoor op het pictogram Stijlpagina koppelen naast het deelvenster CSS-bestand koppelen en selecteer een CSS-stijlpagina.
    • Voorgedefinieerde lay-out opnemen: Selecteer deze optie als u al een lay-out hebt. Klik op Aanpassen om het raster en waarden voor onderbrekingspunten te bewerken.
    Een nieuwe HTML-pagina maken met gebruik van het Bootstrap-framework
    Een nieuwe HTML-pagina maken met gebruik van het Bootstrap-framework

    Als u een nieuwe pagina wilt maken op basis van uw Photoshop-compositie, selecteert u Gebruik Extract om uw pagina te maken met Photoshop-composities. 

    Als u deze optie selecteert, wordt het deelvenster Extract geopend waar u een PSD-bestand kunt uploaden en kunt beginnen met het maken van uw HTML-pagina.

  7. Klik op Voorkeuren als u uw voorkeuren voor het standaarddocument wilt instellen, zoals documenttype, codering en bestandsextensie.

  8. Klik op de knop Maken.

  9. Sla het nieuwe document op (Bestand > Opslaan).

  10. Blader in het dialoogvenster dat wordt weergegeven naar de map waarin u het bestand wilt opslaan.
    Opmerking:

    U kunt uw bestand het beste opslaan op een Dreamweaver-site.

  11. Typ in het vak Bestandsnaam een naam voor het bestand.

    Gebruik geen spaties en speciale tekens in bestands- en mapnamen en begin een bestandsnaam niet met een cijfer. Gebruik vooral geen speciale tekens (zoals é, ç of ¥) of leestekens (zoals dubbele punten, schuine strepen of punten) in de namen van bestanden die u op een externe server wilt plaatsen. Door veel servers worden deze tekens tijdens het uploaden gewijzigd, waardoor koppelingen naar de bestanden niet meer werken.

Een lege sjabloon maken

U kunt het dialoogvenster Nieuw document gebruiken om Dreamweaver-sjablonen te maken. Sjablonen worden standaard opgeslagen in de map Sjablonen op uw site.

Opmerking:

U kunt geen sjabloon maken zonder eerst een site te maken. Voor informatie over sites en over hoe u een site kunt maken, raadpleegt u Over Dreamweaver-sites.

  1. Selecteer Bestand > Nieuw.

  2. Selecteer in het dialoogvenster Nieuw document de categorie Sitejablonen.

  3. Selecteer een documenttype in het pop-upmenu Documenttype. In de meeste gevallen kunt u de standaardoptie die is geselecteerd, ongewijzigd laten: XHTML 1.0 Transitional.

    Als u een van de XHTML-documenttypedefinities in het menu DocType (DTD) selecteert, wordt de pagina XHTML-compatibel. U kunt bijvoorbeeld een HTML-document maken dat voldoet aan de XHTML-standaard, door in het menu de optie XHTML 1.0 Transitional of XHTML 1.0 Strict te selecteren. XHTML (Extensible Hypertext Markup Language) is een herformulering van HTML als een XML-toepassing. Gewoonlijk biedt het gebruik van XHTML u de voordelen van XML, terwijl tegelijkertijd de compatibiliteit van uw webdocumenten met oudere, hedendaagse en toekomstige browsers is gegarandeerd.

    Opmerking:

    Voor meer informatie over XHTML gaat u naar de website van het World Wide Web Consortium (W3C). Hier vindt u de specificatie voor XHTML 1.1 - Op module gebaseerd XHTML (www.w3.org/TR/xhtml11/) en XHTML 1.0 (www.w3c.org/TR/xhtml1/) en ook XHTML-validatiesites voor bestanden op het web (http://validator.w3.org/) en lokale bestanden (http://validator.w3.org/file-upload.html).

  4. Selecteer Pagina bijwerken wanneer sjabloon wordt gewijzigd als u wilt dat de pagina automatisch wordt bijgewerkt als u het sjabloon bewerkt.

  5. Klik op de knop Maken.

  6. Sla het nieuwe document op (Bestand > Opslaan). Als u nog geen bewerkbare gebieden aan de sjabloon hebt toegevoegd, wordt er een dialoogvenster weergegeven waarin wordt vermeld dat er geen bewerkbare gebieden in het document aanwezig zijn. Klik op OK om het dialoogvenster te sluiten.

  7. Selecteer in het dialoogvenster Opslaan als een site waarin de sjabloon moet worden opgeslagen.

  8. Typ in het vak Bestandsnaam een naam voor de nieuwe sjabloon. U hoeft geen bestandsextensie aan de naam van de sjabloon toe te voegen. Wanneer u op Opslaan klikt, wordt de extensie .DWT aan de nieuwe sjabloon toegevoegd en wordt de sjabloon in de map Sjablonen van uw site opgeslagen.

    Gebruik geen spaties en speciale tekens in bestands- en mapnamen en begin een bestandsnaam niet met een cijfer. Gebruik vooral geen speciale tekens (zoals é, ç of ¥) of leestekens (zoals dubbele punten, schuine strepen of punten) in de namen van bestanden die u op een externe server wilt plaatsen. Door veel servers worden deze tekens tijdens het uploaden gewijzigd, waardoor koppelingen naar de bestanden niet meer werken.

Een pagina maken op basis van een sjabloon

U kunt een nieuw document selecteren, voorvertonen en maken met een van uw bestaande sjablonen of de eenvoudige sjablonen van Dreamweaver. U kunt het dialoogvenster Nieuw document gebruiken om een sjabloon te selecteren vanuit een van uw Dreamweaver-sites. U kunt ook het deelvenster Middelen gebruiken om een nieuw document te maken op basis van een bestaande sjabloon.

Een document maken op basis van een sjabloon

  1. Selecteer Bestand > Nieuw.

  2. Selecteer in het dialoogvenster Nieuw document de categorie Pagina uit voorbeeld.

  3. Selecteer in de kolom Site de Dreamweaver-site met de sjabloon die u wilt gebruiken. Selecteer vervolgens een sjabloon in de lijst aan de rechterkant.

  4. Schakel de optie Pagina bijwerken wanneer sjabloon wordt gewijzigd uit als u niet wilt dat deze pagina telkens wordt bijgewerkt wanneer u wijzigingen aanbrengt in de sjabloon waarop deze pagina is gebaseerd.

  5. Klik op Voorkeuren als u uw voorkeuren voor het standaarddocument wilt instellen, zoals documenttype, codering en bestandsextensie.

  6. Klik op Meer inhoud ophalen als u Dreamweaver Exchange wilt openen, waarin u meer inhoud voor het pagina-ontwerp kunt downloaden.

  7. Klik op Maken en sla het document op (Bestand > Opslaan).

Een document maken vanuit het deelvenster Middelen

  1. Open het deelvenster Middelen (Venster > Middelen), als dit nog niet geopend is.

  2. Klik in het deelvenster Middelen op het pictogram Sjablonen aan de linkerkant om de lijst met sjablonen op de huidige site weer te geven.

    Opmerking:

    Als u zojuist de sjabloon hebt gemaakt die u wilt toepassen, moet u mogelijk op de knop Vernieuwen klikken om deze sjabloon weer te geven.

  3. Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op de sjabloon die u wilt toepassen, en selecteer vervolgens Nieuw van sjabloon.

    Het document wordt in het documentvenster geopend.

  4. Sla het document op.

Een pagina maken op basis van een eenvoudige Dreamweaver-sjabloon

Bij Dreamweaver worden verschillende professioneel ontworpen startbestanden voor mobiele toepassingen geleverd. U kunt deze voorbeeldbestanden gebruiken als uitgangspunt voor het ontwerpen van de pagina's van uw sites.

Wanneer u een document maakt op basis van een eenvoudige sjabloon, maakt Dreamweaver een kopie van het bestand, dus u overschrijft de startbestanden niet.

U kunt in het dialoogvenster Nieuw document een voorbeeldbestand voorvertonen en een korte beschrijving lezen van de ontwerpelementen van een document.

  1. Selecteer Bestand > Nieuw.

  2. Selecteer in het dialoogvenster Nieuw document de categorie Eenvoudige sjablonen.

    Eenvoudige sjablonen in Dreamweaver
    Eenvoudige sjablonen in Dreamweaver

    U kunt de details van de voorbeeldpagina en de visualisatie aan de rechterkant van het deelvenster zien terwijl u de verschillende opties selecteert.

  3. Klik op de knop Maken.

    Het nieuwe document en alle bijbehorende bestanden worden geopend in het documentvenster.

  4. Sla het document op (Bestand > Opslaan).

Nieuwe codebestanden maken voor verschillende codetalen

U kunt codebestanden voor een aantal codetalen maken in Dreamweaver.

Zie Over coderen in Dreamweaver voor meer informatie over ondersteuning van codering in Dreamweaver.

Volg de volgende instructies om een nieuw codebestand in Dreamweaver te maken:

  1. Selecteer Bestand > Nieuw document.

  2. Onder Documenttype selecteert u het codebestand dat u wilt maken.

  3. Selecteer het type document dat u wilt maken in de kolom Documenttype (bijvoorbeeld een PHP-bestand).

    Een nieuwe PHP-pagina maken
    Een nieuwe PHP-pagina maken

  4. Afhankelijk het bestandstype dat u selecteert, zijn er extra opties beschikbaar wanneer u een document maakt. 

    Als u bijvoorbeeld een PHP-bestand maakt, kunt u DocType-opties en sommige CSS-opties selecteren.

  5. Klik op de knop Maken. Sla vervolgens het document op (Bestand > Opslaan).

Documenten opslaan en de vorige versie ervan herstellen

U kunt een document opslaan met de huidige naam en locatie, of een kopie van het document opslaan met een andere naam en locatie.

Opmerking:

Gebruik als u bestanden een naam geeft geen spaties en speciale tekens in bestands- en mapnamen. Gebruik vooral geen speciale tekens (zoals é, ç of ¥) of leestekens (zoals dubbele punten, schuine strepen of punten) in de namen van bestanden die u op een externe server wilt plaatsen. Door veel servers worden deze tekens tijdens het uploaden gewijzigd, waardoor koppelingen naar de bestanden niet meer werken. Begin een bestandsnaam ook niet met een cijfer.

Een document opslaan

  1. Voer een van de volgende stappen uit:
    • Als u de huidige versie op de schijf wilt overschrijven en wijzigingen wilt opslaan die u hebt aangebracht, selecteert u Bestand > Opslaan.
    • Als u het bestand wilt opslaan in een andere map of met een andere naam, selecteert u Bestand > Opslaan als.
  2. Blader in het dialoogvenster Opslaan als dat verschijnt naar de map waarin u het bestand wilt opslaan.

  3. Typ in het tekstvak Bestandsnaam een naam voor het bestand.

  4. Klik op Opslaan om het bestand op te slaan.

Alle geopende documenten opslaan

  1. Selecteer Bestand > Alles opslaan.

  2. Als er niet-opgeslagen documenten zijn geopend, wordt het dialoogvenster Opslaan als weergegeven voor elk niet-opgeslagen document.

    Blader in het dialoogvenster dat wordt weergegeven naar de map waarin u het bestand wilt opslaan.

  3. Typ in het tekstvak Bestandsnaam een naam voor het bestand en klik op Opslaan.

Laatst opgeslagen versie van een document herstellen

  1. Selecteer Bestand > Vorige versie.

    Er wordt een dialoogvenster weergegeven waarin u wordt gevraagd of u uw wijzigingen wilt negeren en wilt terugkeren naar de vorige opgeslagen versie.

  2. Klik op Ja om terug te keren naar de vorige versie. Klik op Nee als u uw wijzigingen wilt behouden.

    Opmerking:

    Als u een document opslaat en vervolgens Dreamweaver afsluit, kunt u niet terugkeren naar de vorige versie van het document als u Dreamweaver opnieuw start.

Standaardocumenttype en coderingsvoorkeuren instellen

Als de meeste pagina's op uw site pagina's van een specifiek type zijn (zoals HTML, PHP of JavaScript), kunt u documentvoorkeuren instellen om automatisch nieuwe documenten van dat bestandstype aan te maken.

  1. Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

    Opmerking:

    U kunt ook op de knop Voorkeuren in het dialoogvenster Nieuw document klikken om uw voorkeuren voor nieuwe documenten in te stellen wanneer u een nieuw document maakt.

  2. Klik in de lijst met categorieën aan de linkerkant op Nieuw document.

  3. Stel de gewenste voorkeuren in of wijzig deze als dat nodig is en klik op OK om de voorkeuren op te slaan.

    Standaarddocument

    Selecteer een documenttype dat moet worden gebruikt voor de pagina's die u maakt.

    Standaardextensie

    Geef de gewenste bestandsextensie op (.htm of .html) voor de nieuwe HTML-pagina's die u maakt.

    Opmerking: Deze optie is uitgeschakeld voor andere bestandstypen.

    Standaarddocumenttype (DDT)

    Selecteer een van de XHTML-documenttypedefinities (DTD) om ervoor te zorgen dat de nieuwe pagina's voldoen aan de XHTML-standaard. U kunt bijvoorbeeld een HTML-document maken dat voldoet aan de XHTML-standaard door in het menu de optie XHTML 1.0 Transitional of XHTML 1.0 Strict te selecteren.

    Standaardcodering

    Geef de codering op die moet worden gebruikt als er een nieuwe pagina wordt gemaakt en die ook moet worden gebruikt als er een document wordt geopend waarvoor geen enkele codering is opgegeven.

    Als u Unicode (UTF-8) selecteert als documentcodering, is eenheidscodering niet nodig, omdat UTF-8 zonder problemen alle tekens kan vertegenwoordigen. Als u een andere documentcodering selecteert, hebt u mogelijk eenheidscodering nodig voor het vertegenwoordigen van bepaalde tekens. Zie www.w3.org/TR/REC-html40/sgml/entities.html voor meer informatie over tekenentiteiten.

    Als u Unicode (UTF-8) selecteert als standaardcodering, kunt u een BOM (Byte Order Mark) in het document opnemen door de optie Unicode-handtekening (BOM) opnemen te selecteren.

    Een BOM bestaat uit de 2 tot 4 bytes aan het begin van een tekstbestand waarmee het bestand kan worden geïdentificeerd als een Unicode-bestand en waarmee ook de bytevolgorde van de volgende bytes wordt aangegeven. Omdat UTF-8 geen bytevolgorde heeft, is het toevoegen van een UTF-8 BOM optioneel. Voor UTF-16 en UTF-32 is het verplicht.

    Unicode-formulier

    Selecteer een van deze opties als u Unicode (UTF-8) als standaardcodering selecteert.

    Er zijn vier UNF's. De belangrijkste procedure is normalisatieprocedure C omdat deze het vaakst wordt gebruikt in het tekenmodel voor internet. Voor de volledigheid biedt Adobe de drie andere UNF's ook aan.

    Dialoogvenster Nieuw document tonen wanneer Control+N wordt ingedrukt

    Schakel deze optie uit (voor Command+N voor Macintosh) als u wilt dat er automatisch een document van het standaarddocumenttype wordt gemaakt wanneer u deze toetsencombinatie gebruikt.

    In Unicode worden tekens gebruikt die er op het oog precies eender uitzien, maar binnen het document op verschillende manieren kunnen zijn opgeslagen. De letter 'ë' (e-umlaut) kan bijvoorbeeld worden vertegenwoordigd door één teken, de e-umlaut, of door twee tekens, de normale Latijnse 'e' plus de umlaut. Een Unicode-combinatieteken is een teken dat samen met het voorgaande teken wordt gebruikt. In dit geval zou de umlaut dus worden weergegeven boven de Latijnse 'e'. Beide vormen hebben dezelfde visuele typografie als resultaat, maar voor elke vorm wordt iets anders opgeslagen in het bestand.

    Normalisatie is het proces dat ervoor zorgt dat de tekens die in verschillende vormen kunnen worden opgeslagen, allemaal in een en dezelfde vorm worden opgeslagen. In dit geval betekent dat dat alle 'ë'-tekens in een document zijn opgeslagen als één e-umlaut of als 'e' plus de umlaut en dat niet beide vormen in één document zijn opgeslagen.

    Meer informatie over Unicode-normalisatie en de specifieke vormen die kunnen worden gebruikt, vindt u op de Unicode-website op www.unicode.org/reports/tr15.

Bestaande documenten openen en bewerken

U kunt bestaande webpagina's of tekstdocumenten, die al dan niet in Dreamweaver zijn gemaakt, openen en in de ontwerpweergave of codeweergave bewerken.

Als het document dat u opent een Microsoft Word-bestand is dat als een HTML-document is opgeslagen, kunt u de opdracht Extra > Word-HTML opruimen gebruiken om de extra opmaakcodes die Word in HTML-bestanden invoegt, te verwijderen.

Als u HTML- of XHTML-code wilt opschonen die niet door Microsoft Word is gegenereerd, gebruikt u de opdracht Extra > HTML opruimen. Zie HTML-bestanden uit Microsoft Word opschonen voor meer informatie.

U kunt ook tekstbestanden openen die geen HTML bevatten, zoals JavaScript-bestanden, XML-bestanden, CSS-stijlpagina's of tekstbestanden die in tekstverwerkingsprogramma's of teksteditors zijn opgeslagen.

  1. Selecteer Bestand > Openen.

    Opmerking:

    U kunt ook het deelvenster Bestanden gebruiken om bestanden te openen.

  2. Ga naar het bestand dat u wilt openen en selecteer dit bestand.
    Opmerking:

    Het is verstandig om bestanden die u wilt openen en bewerken, op een Dreamweaver-website te plaatsen, in plaats van deze te openen vanaf een andere locatie. Ga voor meer informatie over Dreamweaver-sites naar Over Dreamweaver-sites.

  3. Klik op Openen.

    Het document wordt in het documentvenster geopend. JavaScript-bestanden, tekstbestanden en CSS-stijlpagina's worden standaard in de codeweergave geopend. U kunt het document bijwerken terwijl u in Dreamweaver werkt en alle wijzigingen in het bestand opslaan.

Met Dreamweaver kunt u bestanden bekijken die aan uw hoofddocument zijn gekoppeld, zonder de focus van het hoofddocument weg te halen. Als u bijvoorbeeld CSS- en JavaScript-bestanden aan een hoofddocument hebt gekoppeld, kunt u deze verwante bestanden met Dreamweaver in het documentvenster bekijken en bewerken terwijl het hoofddocument zichtbaar blijft.

Voor meer informatie over dynamisch verwante bestanden leest u Dynamisch verwante bestanden openen.

Opmerking:

Als u tijdens het werken met HTML-bestanden snel wijzigingen in verwante CSS-, JavaScript- of PHP-bestanden wilt maken zonder naar die bestanden te navigeren, kunt u Snel bewerken gebruiken. Zie Snel bewerken voor meer informatie.

Standaard worden de namen van alle bestanden die verwant zijn aan een hoofddocument, weergegeven op een werkbalk Verwante bestanden, onder de titel van het hoofddocument. De volgorde van de knoppen op de werkbalk komt overeen met de volgorde van de koppelingen naar verwante bestanden in het hoofddocument.

Opmerking:

Als een verwant bestand ontbreekt, wordt de corresponderende knop toch weergegeven op de werkbalk Verwante bestanden. Als u echter op de knop klikt, wordt niets in Dreamweaver weergegeven.

Dreamweaver ondersteunt de volgende typen verwante bestanden:

  • Scriptbestanden aan clientzijde
  • Includes aan serverzijde
  • Externe CSS-stijlbladen (waaronder geneste stijlbladen)

Voer een van de volgende stappen uit:

  • Klik op de werkbalk Verwante bestanden, boven in het document, op de bestandsnaam van het gerelateerde bestand dat u wilt openen.

  • Klik met de rechtermuisknop op de werkbalk Verwante bestanden op de bestandsnaam van het verwante bestand dat u wilt openen, en kies Als afzonderlijk bestand openen in het contextmenu. Wanneer u een verwant bestand op deze manier opent, blijft het hoofddocument niet zichtbaar.

  1. Plaats de invoegpositie op een regel of in een gebied waaraan een bestand is gerelateerd.

  2. Wacht tot het symbool van de codenavigator wordt weergegeven, en klik vervolgens om de codenavigator te openen.

  3. Houd de muis boven de items in de codenavigator om meer informatie over de items weer te geven. Als u bijvoorbeeld een bepaalde CSS-kleureigenschap wilt wijzigen maar niet weet in welke regel deze eigenschap is opgeslagen, kunt u de eigenschap vinden door de muis boven de beschikbare regels in de codenavigator te houden.

  4. Klik op het item waarin u bent geïnteresseerd om het bijbehorende verwante bestand te openen.

Terugkeren naar de broncode van het hoofddocument

  1. Klik op de knop Broncode op de werkbalk Verwante bestanden.

Wanneer u een verwant bestand opent vanuit de Ontwerpweergave of de Code- en ontwerpweergaven (gesplitste weergave), wordt het verwante bestand weergegeven in een gesplitste weergave.

U kunt Weergave > Splitsen selecteren en kiezen uit de verschillende opties voor de gesplitste weergave als u de gesplitste weergave wilt aanpassen.

Als u de verwante bestanden alleen in de codeweergave wilt weergeven, selecteert u Code boven in de werkbalk.

Opmerking:

Met de standaardcodeweergave kunt u verwante documenten niet tegelijkertijd met de broncode van het hoofddocument weergeven.

Opmerking:

De codeweergave in de weergaveoptie verwijst naar de broncode van het hoofddocument. Als u bijvoorbeeld Beeld > Codeweergave boven selecteert, geeft Dreamweaver de broncode van het hoofddocument weer in de bovenste helft van het documentvenster. Als u Weergave > Codeweergave links selecteert, geeft Dreamweaver de broncode van het hoofddocument links van het documentvenster weer.

Als u een HTML-bestand opent, geeft Dreamweaver standaard de verwante bestanden weer in afzonderlijke tabbladen. U kunt deze functie uitschakelen in het deelvenster Voorkeuren.

  1. Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

  2. Schakel in de categorie Algemeen de optie Verwante bestanden inschakelen uit.

De functie Dynamisch verwante bestanden is een uitbreiding van de functie Verwante bestanden waarmee de verwante bestanden van dynamische pagina's kunnen worden weergegeven op de werkbalk Verwante pagina's. Met de functie Dynamisch verwante bestanden kunt u met name de grote hoeveelheid include-bestanden weergeven die vereist zijn voor het genereren van de runtimecode voor veelgebruikte open-source frameworks voor PHP-inhoudsbeheersystemen, zoals WordPress, Drupal and Joomla!

Als u de functie Dynamisch verwante bestanden wilt gebruiken, moet u toegang hebben tot een lokale of externe PHP-toepassingsserver waarop WordPress, Drupal of Joomla! wordt uitgevoerd. Een veelgebruikte methode voor het testen van pagina's is het instellen van een lokale host met een PHP-toepassingsserver waarop de pagina's lokaal worden getest.

U moet de volgende stappen uitvoeren voor u pagina's kunt testen:

  • Stel een Dreamweaver-site in en zorg dat u een waarde opgeeft in het tekstvak URL van het dialoogvenster Site-instelling.

  • Stel een PHP-toepassingsserver in.

    Opmerking: De server moet actief zijn voordat u in Dreamweaver kunt gaan werken met dynamisch verwante bestanden.

  • Installeer WordPress, Drupal of Joomla! op de toepassingsserver. Zie voor meer informatie:

  • Stel in Dreamweaver een lokale map in waarin u de bestanden voor het inhoudsbeheersysteem kunt downloaden en bewerken.

  • Geef de locatie van de geïnstalleerde WordPress-, Drupal- of Joomla-bestanden op als uw externe map en testmap.

  • Download de bestanden voor het inhoudssysteem uit de externe map (Ophalen).

Als u een pagina opent die is gekoppeld met dynamisch verwante bestanden, kunnen de bestanden automatisch worden gedetecteerd met Dreamweaver. U kunt de bestanden ook handmatig detecteren (hiervoor klikt u op een koppeling op de balk Info boven de pagina). De standaardinstelling is handmatige detectie.

  1. Kies Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh OS).

  2. Controleer of in de categorie Algemeen de optie Verwante bestandeen inschakelen is geselecteerd.

  3. Selecteer Handmatig of Automatisch in het pop-upmenu Dynamisch verwante bestanden. U kunt de detectie ook volledig uitschakelen door Uitgeschakeld te selecteren.

  1. Open een pagina waaraan dynamisch verwante bestanden zijn gekoppeld, bijvoorbeeld de pagina index.php in de hoofdmap van een WordPress-, Drupal- of Joomla!- site.

  2. Als de detectie van dynamisch verwante bestanden is ingesteld op handmatig (standaardinstelling), klikt u op de koppeling Discover op de balk Info die wordt weergegeven boven de pagina in het documentvenster.

    Als de detectie van dynamisch verwante bestanden automatisch wordt uitgevoerd, wordt een lijst met dynamisch verwante bestanden weergegeven op de werkbalk Verwante bestanden.

Voor de verwante en dynamisch verwante bestanden op de werkbalk Verwante bestanden geldt deze volgorde:

  • Statische verwante bestanden (verwante bestanden waarvoor geen dynamische verwerking nodig is)
  • Externe verwante bestanden (CSS- en JS-bestanden) die zijn gekoppeld aan include-bestanden op de server met een dynamisch pad
  • Include-bestanden op de server met een dynamisch pad (PHP-, INC- en MODULE-bestanden)

Omdat er vaak veel verwante en dynamisch verwante bestanden zijn, kunt u de verwante bestanden filteren in Dreamweaver, zodat alleen de bestanden worden weergegeven waarmee u wilt werken.

  1. Open een pagina waaraan verwante bestanden zijn gekoppeld.

  2. Voer zo nodig detectie van dynamisch verwante bestanden uit.

  3. Klik op het pictogram Verwante bestanden filteren aan de rechterkant van de werkbalk Verwante bestanden.

  4. Selecteer de bestandstypen die u wilt weergeven op de werkbalk Verwante bestanden. Standaard worden in Dreamweaver alle verwante bestanden geselecteerd.

  5. Als u een aangepast filter wilt maken, klikt u op het pictogram Verwante bestanden filteren en kiest u Aangepast filter.

    In het dialoogvenster Aangepast filter kunt u filteren op exacte bestandsnamen (style.css) en bestandsextensies (.php) of u kunt jokertekenexpressies met sterretjes gebruiken (*menu*). Als u wilt filteren op meerdere jokertekenexpressies, moet u de expressies scheiden met een puntkomma (bijvoorbeeld style.css;*.js;*tpl.php).

Opmerking:

de filterinstellingen blijven niet behouden als u het bestand sluit.

HTML-bestanden uit Microsoft Word opschonen

U kunt documenten die in Microsoft Word (Microsoft Word 97 of later) )als HTML-bestanden zijn opgeslagen, openen en vervolgens de opdracht Extra > Word-HTML opruimen gebruiken om de externe HTML-codes die door Word zijn gegenereerd, te verwijderen.

De codes die Dreamweaver verwijdert, worden door Word voornamelijk gebruikt om de documenten in Word op te maken en weer te geven en zijn niet nodig om het HTML-bestand weer te geven.

Bewaar een kopie van het oorspronkelijke Word-bestand (.doc) als reservekopie, want mogelijk kunt u het HTML-bestand niet meer openen in Word nadat het HTML-bestand is opgeschoond.

Opmerking:

Als u HTML- of XHTML-code wilt opschonen die niet door Microsoft Word is gegenereerd, gebruikt u de opdracht Extra > HTML opruimen.

  1. Sla uw Microsoft Word-document op als een HTML-bestand.
    Opmerking:

    Als u in Windows werkt, moet u het bestand in Word sluiten om te voorkomen dat er een fout optreedt, want het bestand kan niet worden gedeeld.

  2. Open het HTML-bestand in Dreamweaver.

    Als u de HTML-code wilt zien die door Word is gegenereerd, schakelt u over naar de codeweergave (Beeld > Code).

  3. Selecteer Extra > Word-HTML opruimen.

    Opmerking:

    Als Dreamweaver niet kan vaststellen welke versie van Word is gebruikt om het bestand op te slaan, selecteert u de juiste versie in het pop-upmenu.

  4. Schakel de gewenste opschoonopties in of uit. De voorkeuren die u opgeeft, worden als standaard opschooninstellingen opgeslagen.

    Dreamweaver past de opschooninstellingen toe op het HTML-document en er verschijnt een logboek met de aangebrachte wijzigingen (tenzij u die optie in het dialoogvenster hebt uitgeschakeld).

    Opties voor het opruimen van HTML-bestanden uit Microsoft Word
    Opties voor het opruimen van HTML-bestanden uit Microsoft Word

    Alle Word-specifieke opmaakcodes verwijderen

    Hiermee verwijdert u alle Microsoft Word-specifieke HTML-code, inclusief XML uit HTML-tags, aangepaste Word-metagegevens en koppelingstags in de kop van het document, XML-opmaakcodes van Word, voorwaardelijke tags en hun inhoud, en lege alinea's en marges uit stijlen. U kunt elk van deze opties afzonderlijk selecteren op het tabblad Gedetailleerd.

    CSS opschonen

    Hiermee verwijdert u alle Word-specifieke CSS-stijlen, waaronder inline CSS-stijlen als dat mogelijk is (als de bovenliggende stijl dezelfde stijleigenschappen heeft), stijlkenmerken die beginnen met 'mso', declaraties van niet-CSS-stijlen, CSS-stijlkenmerken uit tabellen en alle ongebruikte stijldefinities uit de kop. U kunt deze opties verder aanpassen op het tabblad Gedetailleerd.

    <font>-tags opschonen

    Hiermee verwijdert u HTML-tags en converteert u de standaardhoofdtekst naar HTML-tekst van grootte 2.

    Onjuist geneste tags corrigeren

    Hiermee verwijdert u opmaaktags voor lettertypen die door Word zijn ingevoegd buiten de alinea- en koptags (op blokniveau).

    Bronopmaak toepassen

    Hiermee past u de opties voor bronopmaak, die u als voorkeuren voor HTML-opmaak en in het bestand SourceFormat.txt hebt opgegeven, toe op het document.

    Logboek tonen bij voltooiing

    Toont een waarschuwingsvenster met informatie over de wijzigingen die in het document zijn aangebracht nadat de oprruimbewerking is voltooid.

  5. Klik op OK of ga naar het tabblad Gedetailleerd als u de opties voor het verwijderen van alle Word-specifieke opmaakcodes en het opschonen van CSS-stijlen verder wilt aanpassen en klik vervolgens op OK.

Verwante informatie

 Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?

Snelle koppelingen

Al je lidmaatschappen weergeven Je lidmaatschappen beheren
Snelle koppelingen weergeven
Snelle koppelingen verbergen
Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Nu registreren

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online

Nu registreren
Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Nu registreren

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online

Nu registreren

Juridische kennisgeving    |    Online privacybeleid