1
Dreamweaver CS6 in vogelvlucht
Beknopte geschiedenis en enkele basisbegrippen
Enkele achtergronden – basiskennis internet
De rol van HTML, CSS en JavaScript
Browsers: de stand van zaken
Belangrijke begrippen in Dreamweaver CS6
2
Kennismaken met de interface van Dreamweaver
Onderdelen van het Dreamweaver-venster
Geïntegreerde visuele en code-editor
Eigenschappen van elementen aanpassen
De gereedschapskist: het palet Invoegen
Uitgebreide CSS-mogelijkheden
Meer CS6-eigenschappen en nieuwe functies
3
Workshop: Uw eerste site in Dreamweaver CS6
Stap 1 – De lokale hoofdmap maken
Stap 2 – Een sjabloon maken
Stap 3 – De sjabloon opslaan
Stap 4 – De homepage maken
Een tweede pagina toevoegen
4
Workshop: Een site publiceren
Stap 1 – Servergegevens instellen
Stap 2 - De site uploaden
Stap 3 – De site bekijken
De site aanpassen en opnieuw synchroniseren
Teksten typen en importeren
Tekst opmaken met de eigenschappencontrole
Lijsten en opsommingen maken
Sublijsten en tekst inspringen
Doel van CSS: uiterlijk van elementen beheren
Hoe Dreamweaver met stijlen omgaat
Voorbeeld 1 – een CSS-stijl definiëren
Voorbeeld 2 – een CSS-klasse definiëren
CSS-eigenschappen (tijdelijk) uitschakelen
Een CSS-regel verwijderen voor een tekstdeel
CSS-regels verplaatsen naar extern stijlblad
Meer stijlen koppelen aan één element
Een beknopt overzicht van CSS-instellingen
7
Workshop: CSS3-overgangen
Voorbeeld 1 – een geanimeerd menu
Voorbeeld 2 – een fotopagina
8
Workshop: Paginaopmaak met CSS-AP-elementen
Stap 1 – Een nieuwe pagina maken
Stap 2 - Raster en hulplijnen instellen
Stap 5 - Inhoud voor de pagina invullen
Stap 6 - Gevorderd CSS – het menu vormgeven
Stap 7 - Suggesties – de site verder uitbouwen
Overwegingen bij het gebruik van afbeeldingen
Meer over grafische bestandstypen
Afbeeldingen invoegen op een pagina
Een afbeelding selecteren op de pagina
Eigenschappen van afbeeldingen aanpassen
Miniworkshop – Photoshop-bestanden invoegen in Dreamweaver
Miniworkshop – megapixelfoto’s invoegen
Tijdelijke aanduidingen voor afbeeldingen
Achtergrondafbeeldingen gebruiken
Enkele belangrijke richtlijnen voor achtergronden
Achtergronden een vaste positie geven
10
Workshop: Werken met weblettertypen
Achtergronden bij het werken met webletter typen
Stap 1 – Lettertypen downloaden
Stap 2 – Lettertype in Dreamweaver installeren
Stap 3 – Dreamweavers lettertypelijst uitbreiden
Stap 4 – Nieuwe CSS-klasse maken
Stap 5 – Een kijkje achter de schermen
11
Geavanceerde typen hyperlinks
De verschillende typen hyperlinks op een rijtje
Werken met benoemde ankers
Zelf bestanden aanbieden om te downloaden
Een nieuw browservenster openen
Koppelingen op de site valideren
12
Workshop: Een Spry-menu maken
Stap 1 – De Spry-menubalk invoegen
Stap 2 - Het basismenu instellen
Stap 3 – Het menu aanpassen
Stap 4 – CSS-code verkennen en aanpassen
Stap 5 – Achtergrondinformatie: het menu in HTML-code
13
Workshop: Meer Spry-onderdelen
Inklapbaar Spry-deelvenster
Tot slot – enkele aanbevelingen
De structuur van een formulier in HTML
De informatie verzenden met knoppen
Achtergrondinformatie – het formulier door een script laten verwerken
Meer typen invoervelden voor formulieren
Formulieren opmaken met tabellen
Praktijk: het contactformulier in een tabel zetten
Spry-gegevensvalidatie in formulieren
15
Workshop: Mobiele websites maken
Achtergronden bij mobiel webdesign
Stap 1 – een nieuwe site maken
Stap 2 – Werken met de mobiele starterpagina’s
Stap 3 – Inhoud toevoegen
Stap 4 – Code aanpassen en de site testen in de browser
Stap 5 – Vormgeving van de mobiele site met thema’s
Stap 6 – De site uploaden en testen op een mobiele telefoon
16
Dreamweaver CS6 en contentmanagementsystemen
WordPress downloaden en installeren
De WordPress-site in Dreamweaver maken
De site openen in Dreamweaver
Bestanden in het CMS selecteren
