Een website maken met Dreamweaver is een uitstekende manier om te leren hoe websites echt in elkaar zitten. Je werkt met gewone HTML- en CSS-bestanden, maar krijgt hulp van een voorvertoning, automatisch aanvullen en een overzichtelijk bestandsbeheer. In dit stappenplan bouw je een eenvoudige site met twee pagina’s, een stijlblad, een afbeelding en een menu.

Je hebt alleen Dreamweaver nodig en een paar minuten tijd per stap. Heb je het programma nog niet? Volg dan eerst de uitleg over Dreamweaver downloaden en installeren. Ervaring met code is niet vereist: elke stap legt uit wat je doet en waarom.

Stap 1: een site definiëren

Het belangrijkste wat je in Dreamweaver kunt doen, gebeurt voordat je ook maar één pagina maakt: een site definiëren. Daarmee vertel je Dreamweaver welke map op je computer bij je project hoort.

1. Maak op je computer een lege map aan, bijvoorbeeld mijn-eerste-site in je map Documenten.
2. Kies in Dreamweaver Site > Nieuwe site (Site > New Site).
3. Vul bij Sitenaam een herkenbare naam in. Die naam zie je alleen zelf, in het paneel Bestanden.
4. Klik bij Map voor lokale site (Local Site Folder) op het mapje en kies de map die je net hebt gemaakt.
5. Klik op Opslaan.

In het paneel Bestanden (Files) zie je nu je lege sitemap. Alles wat je vanaf nu maakt, sla je binnen deze map op. De officiële uitleg vind je ook in de Adobe-handleiding Een lokale versie van je site instellen.

Stap 2: een logische mappenstructuur maken

Een nette mappenstructuur voorkomt later veel gedoe met kapotte links. Een gangbare opzet voor een kleine site is:

• index.html in de hoofdmap: je startpagina;
• css/ voor je stijlbladen;
• images/ voor afbeeldingen;
• js/ voor eventuele JavaScript-bestanden.

Mappen maak je direct in het paneel Bestanden: klik met de rechtermuisknop op je sitemap en kies Nieuwe map (New Folder). Gebruik voor map- en bestandsnamen alleen kleine letters, cijfers en koppeltekens. Spaties en hoofdletters geven op veel webservers problemen.

Stap 3: je startpagina index.html maken

Kies Bestand > Nieuw (File > New). Selecteer in het venster Nieuw document het documenttype HTML en klik op Maken. Sla het bestand meteen op met Bestand > Opslaan als index.html in de hoofdmap van je site. Webservers tonen dit bestand automatisch als iemand je domeinnaam opent.

Schakel naar de weergave Splitsen, zodat je de code en het resultaat naast elkaar ziet. Wat de verschillen tussen de weergaven zijn, lees je in de weergaven Code, Splitsen, Live en Ontwerp uitgelegd. Vervang de code daarna door deze basis:

Welkom op mijn website


Dit is mijn eerste pagina, gemaakt in Dreamweaver.

Let op de regel <html lang="nl">: daarmee weten browsers en zoekmachines dat je pagina Nederlandstalig is. De regel met viewport zorgt ervoor dat je pagina op telefoons goed wordt weergegeven.

Stap 4: een CSS-bestand maken en koppelen

In de <head> van je pagina staat al een verwijzing naar css/style.css. Dat bestand moet je nog maken. Kies Bestand > Nieuw, selecteer het documenttype CSS en sla het op als style.css in de map css. Zet er deze regels in:

body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
color: #222;
}
h1 {
color: #1a5fb4;
}
img {
max-width: 100%;
height: auto;
}

Sla op en kijk naar je pagina: de opmaak is direct zichtbaar. Werk je liever visueel, dan kun je een stijlblad ook koppelen en aanmaken via het paneel CSS Designer. Klik daar bij Bronnen (Sources) op het plusteken en kies om een nieuw CSS-bestand te maken of een bestaand bestand te koppelen. Daar beheer je ook selectors, media queries en eigenschappen zonder alles zelf te typen.

Een apart CSS-bestand heeft een groot voordeel: elke pagina die ernaar verwijst, krijgt dezelfde opmaak. Pas je de kleur van je koppen aan, dan verandert die op de hele site tegelijk.

Stap 5: afbeeldingen toevoegen

Zet de afbeelding die je wilt gebruiken eerst in de map images van je site. Gebruik een duidelijke bestandsnaam zoals fietstocht-veluwe.jpg in plaats van IMG_4023.jpg. Dat is overzichtelijker en beter voor zoekmachines.

1. Klik in je pagina op de plek waar de afbeelding moet komen.
2. Kies Invoegen > Afbeelding (Insert > Image).
3. Selecteer het bestand in de map images.
4. Vul in het paneel Eigenschappen (Properties) een alternatieve tekst in die beschrijft wat er op de afbeelding staat.

Kies je een afbeelding die buiten je sitemap staat, dan vraagt Dreamweaver of het bestand naar je site gekopieerd moet worden. Klik dan op Ja en kies de map images. Zo voorkom je dat een afbeelding online ontbreekt. Houd afbeeldingen ook klein: voor een gewone foto op een webpagina is een breedte van 1200 tot 1600 pixels meestal ruim voldoende.

Stap 6: een tweede pagina en links maken

Maak een tweede pagina op dezelfde manier als index.html en sla die op als over-mij.html. Kopieer de <head> van je startpagina, zodat ook deze pagina het stijlblad gebruikt. Voeg vervolgens op beide pagina’s een eenvoudig menu toe, direct na de openingstag <body>:

Je kunt links ook visueel maken: selecteer een stuk tekst en vul in het paneel Eigenschappen het veld Koppeling (Link) in, of sleep het doelpictogram naast dat veld naar een bestand in het paneel Bestanden. Voor links naar andere websites gebruik je altijd een volledige URL die begint met https://.

Merk je dat je dit menu op elke pagina opnieuw moet plakken? Bij grotere sites gebruik je daar sjablonen voor. Dat komt in een later artikel aan bod.

Stap 7: je website bekijken in de browser

De weergave Live geeft al een goed beeld, maar test je site altijd ook in een echte browser. Sla eerst alle bestanden op. Druk daarna op F12 (Windows) of Option + F12 (macOS) om de pagina in je primaire browser te openen. Je kunt ook de knop voor Realtime voorbeeld (Real-time Preview) rechtsonder in de statusbalk gebruiken en daar een browser kiezen; wijzigingen zie je dan direct terug.

Controleer bij het testen:

• werken alle links in het menu, in beide richtingen?
• worden de afbeelding en de opmaak correct geladen?
• ziet de pagina er op een smal scherm nog goed uit? Maak je browservenster smaller om dat te testen.

Wil je de site echt geschikt maken voor mobiel, kijk dan naar een responsive website bouwen met Bootstrap.

Conclusie

Een website maken met Dreamweaver begint met een goed gedefinieerde site en een logische mappenstructuur. Daarna bouw je stap voor stap verder: een startpagina, een gekoppeld CSS-bestand, afbeeldingen met alt-tekst, een tweede pagina met links en een controle in de browser. Met deze basis kun je je site uitbreiden met meer pagina’s en een mooiere opmaak, en hem uiteindelijk via FTP of SFTP online zetten.

Veelgestelde vragen