een elektronische nieuwsbrief maken

Je maakt hier een elektronische nieuwsbrief, je weet wel: een nieuwsbrief, die je via de e-mail binnenkrijgt. De opbouw is een soort HTML-pagina. Het resultaat voor je gaat verzenden ziet er zo uit.

stap 1: een ontwerp in Photoshop maken (00:04:28)

Vanuit Photoshop kun je met de standaardinstellingen diect een HTML-pagina genereren. Deze is dan wel in tabelopmaak, maar dat is voor een elektronische nieuwsbrief juist een goede optie.
In deze tutorialreeks is gewerkt met een formaat van 560 bij 600 pixels.

 

stap 2: de tabel in het midden plaatsen (00:03:32)

In Dreamweaver de site definiëren, daarna de tabel in het midden plaatsen en de tabel van een achtergrond voorzien zodat de lengte van de nieuwsbrief zich aanpast aan de inhoud.

stap 3: twee tekstkolommen maken (00:07:15)

In Dreamweaver kun je de tekst met gebruik van extra tabellen in de tabel vormgeven.
Tabellen binnen tabellen maken de code soms wat onoverzichtelijk. Je bent dan wel verzekerd van de juiste afstanden van de teksten tot elkaar en de randen.
Door gebruik te maken van 'uitgebreide tabelweergave' kun je beter overzicht krijgen en de juiste tabel of cel selecteren..
Nieuwsbrieven worden gelezen met email-cliënts. Dit zijn programma's waarmee je mail leest zoals Hotmail, Gmail, Outlook, Outlook Express, Thunderbird, webmail en Entourage. Omdat deze programma's niet allemaal gemaakt zijn om de laatste internetstandaarden te ondersteunen, moet de HTML pagina, die wij aanbieden redelijk primitief zijn.
Tabellen
Het positioneren gebeurde vroeger met tabellen. Dit is niet de geschiktste methode voor het maken van websites. Tegenwoordig maken we immers gebruik van DIV's en CSS. Met deze technieken wordt de opmaak consistenter en overzichtelijker. Dat is beter, zowel voor de ontvanger als voor de ontwerper en ook voor de zoekmachines op internet.
Maar omdat je zoveel mogelijk de e-mail-cliënts wil ondersteunen gebruik je tabellen, zelfs tabellen binnen tabellen. Door met tabellen binnen tabellen te werken, maak je het lay-outen wat eenvoudiger: de grootte van de buitenkant van een tabel is goed vast te zetten, de grootte van de verschillende cellen in een tabel willen nogal eens verschuiven.

stap 4: tekstopmaak (00:05:59)

Voor de tekstopmaak maken we gebruik van een interne stylesheet.
Dit ook weer om de mail-cliënts goed van dienst te zijn.

stap 5: afbeeldingen toevoegen (00:02:58)

Je kunt eenvoudig afbeeldingen toevoegen met Dreamweaver.

stap 6: verwijs voor slechte weergave naar de webversie (00:03:37)

er wordt in Dreamweaver een extra rij toegevoegd, hier zelfs in de code weergave. Hierin staat een verwijzing naar de webversie van de nieuwsbrief voor het geval deze niet goed in de mailclient wordt weergegeven.

stap 7: de afmeld-regel maken (00:06:03)

Bij een nieuwsbrief is het vereist dat de gebruiker zich kan afmelden. Dit staat meestal in de footer.
Hier wordt de afbeelding op de achtergrond van een tabel geplaatst en wordt de afmeldregel vormgegeven met CSS en gepositioneerd.
Ook wordt de unsubscribe tag toegevoegd en een stijlregel gemaakt voor '#afmelden' en '#afmelden a'.

stap 8: de webversie maken (00:02:11)

Voor het geval de email-cliënt de webpagina niet goed weergeeft, maken we een webversie van de nieuwsbrief. dit is gelijk aan de nieuwsbrief, hij bevat alleen de eerste regel niet.

stap 9: de webpagina's online zetten (00:03:03)

Het is nu van belang dat de webpagina online komt te staan en dat je de URL van de webpagina hebt. Bij N@Tschool is dat nogal omslachtig en komt er een lang webadres uit, maar je kunt hem natuurlijk ook bij een andere webhoster online zetten.

stap 10: de externe link aanpassen (00:01:45)

Vanuit de email-cliënt werkt de link niet, omdat het naar een bestand op het internet is. Daarom openen we de webversie op het internet, kopiëren het adres en zetten dat in de link.
De link wordt zo een 'absolute link'. Dit moet ook voor eventuele andere koppelingen naar webpagina's vanuit de nieuwsbrief.
Hierna moet de webpagina weer opgeslagen worden en de site opnieuw gecomprimeerd worden.

stap 11: de nieuwsbrief verzenden (00:10:04)

de nieuwsbrief wordt verzonden met CampaignMonitor:

Verstuur je trainings-nieuwsbrief naar t.denblanken@ma-web.nl, theo_dblanken@hotmail.nl en naar jezelf.

De nieuwsbrief in het project ook naar de adressen sturen.
Je zult bij de presentatie de nieuwsbrief vanaf je eigen computer moeten presenteren.