Een digitale handtekening

met Dreamweaver

stap 1: een digitale handtekening (00:02:23)

Je kunt je email voorzien van een digitale handtekening.
Dit is feitelijk een kopie van een online html-document.
Die kun je kopiƫren uit je webbrowser en plakken in Outlook of Mail-app.
De komende reeks laat zien hoe dit met Draemweaver in html opgebouwd wordt.

stap 2: opmaak in tabellen (00:05:06)

Opmaak voor html gebeurd bijna nooit meer in tabellen.
De scheiding van html en opmaak en semantiek hebben daar teveel van te lijden. voor maillezers, die HTML maar wisselend ondersteunen gebruik je deze verouderde techniek juist wel.
Dreamweaver is heel handig in het bewerken van tabellen. Zowel het maken als aanpassen kan met de juiste selectie gemakkelijk gedaan worden in de eigenschappenbalk.

stap 3: met 'spacer' werken (00:03:48)

Om de afmetingen in tabellen af te dwingen, kun je de minimale breedte (of hoogte) afdwingen met een afbeelding die die breedte heeft: een spacer.
Maak in photoshop een transparante afbeelding met een gewenste breedte en een hoogte van 1 pixel. Als je die als gif opslaat en in een tabel cel opneemt, dan kan de cel niet smaller worden. Het is natuurlijk niet de bedoeling dat je iets van de spacer ziet. Vandaar dat die transparant was.

stap 4: typografisch werken (00:07:56)

De mogelijkheden voor typografie zijn beperkter dan met gewone html5 en CSS3.
Je kunt beperkt uit fonts kiezen. Stel wel de grootte, de regelafstand de marges en paddings in. Zo ben je minder afhankelijk van de standaardwaarden van de mail-clients.
Maak daarvoor id's en klassen aan en werk met een intern stijlblad.

stap 5: een strakkere lay-out (00:06:39)

Met tabellen, kun je in Dreamweaver een strakkere layout maken. Hier wordt de inhoud van het middelste deel zowel boven als onder uitgelijnd met de afbeeldingen.
Om de bovenkant uit te lijnen moeten we ervoor zorgen dat de tabelcel geen verticale padding krijgt: padding: 9px; wordt aangepast naar padding: 0 9px;
Er wordt voor de onderkant een tweede rij toegevoegd. De middelste cel wordt met social-media icons gevuld. Pas de id van de cel aan naar 'icons'. Je kunt de inhoud dan naar rechts en beneden uitlijnen. De rij moet ook tussen de plaatjes vallen. Dat kun je doen door cellen samen te voegen. Tot slot kun je de tabel heel strak maken, door de cellen ook afmetingen mee te geven.
Dat gaat in Dreamweaver heel eenvoudig: als je in de design-weergave boven de tabel gaat, verschijnen er groene afmetingen onder de tabel. Klik op de onderste afmeting en kies 'Alle breedten consistent maken'. Doe dit wel als laatste.
Moet je daarna toch nog iets willen aanpssen, ga dan op dezelfde manier 'Alle breedte wissen'. Dan kun je weer vrij in de tabel aan de slag.

inleveren

Kijk nu weer de eerste video en stuur mij een mail, die je digitaal hebt ondertekend. Zet ook je Public link van de Dropbox in jouw bericht.