View Source

Korrespondenzen, die als E-Mail versendet werden können aus verschiedenen Elementen zusammengestellt werden.

Im einfachsten Fall enthält eine Korrespondenz nur ein Textelement. Dieses wird dann mit dem folgenden HTML-Code zu eine Multipart-Nachricht verarbeitet.

In der E-Mail ist die Struktur ähnlich dem abgebildeten Code vorhanden. Manche Element sind nicht in jeder Nachricht.

<body>
	<div class="sdw_head"></div>
	<div class="sdw_plain">
		Beispieltext für die ganze Breite
		<div class="sdw_right">Beispieltext rechtsbündig</div>
		<h1>Uberschriften Ebene 1</h1>
		<h2>Uberschriften Ebene 1</h2>
		<h3>Uberschriften Ebene 1</h3>
	</div>
	<div class="sdw_row">
		<div class="sdw_cell sdw_colstyle_w20"><em>Label-Spalte</em></div>
		<div class="sdw_cell sdw_colstyle_w80">Inhaltsspalte</div>
	</div>
	<div class="sdw_row">
	<!-- weitere Zeilen möglich -->
	</div>
 
	<div class="sdw_foot">Verweis auf die Anwendung</div>
</body>

Das Design der Nachricht ist durch ein Standard Style-Sheet definiert.

Im Bereich der Voreinstellungen kann dieses durch ein eigenes Styl-Sheet ersetzt werden.

  body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	background-image:
		url("data:image/svg+xml;utf8,<svg>[Bildinformationen]</svg>");
	background-attachment: fixed;
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 30%;
	margin-left: 2em;
	margin-right: 4em;
	max-width: 900px;}

.sdw_row { display: flex;}

.sdw_cell {
	border-color: grey;
	border-style: solid;
	padding: 3px}

.sdw_colstyle_w10 { flex-basis: 10%}

.sdw_colstyle_w20 { flex-basis: 20%}

.sdw_colstyle_w30 { flex-basis: 30%}

.sdw_colstyle_w40 { flex-basis: 40%}

.sdw_colstyle_w50 { flex-basis: 50%}

.sdw_colstyle_w60 { flex-basis: 60%}

.sdw_colstyle_w70 { flex-basis: 70%}

.sdw_colstyle_w80 { flex-basis: 80%}

.sdw_colstyle_w90 { flex-basis: 90%}

.sdw_right { text-align: right;}

.sdw_foot {
	text-align: center;
	font-size: 0.8em;
	margin-top: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	background-color: #cccccc;}

.sdw_foot a {
	text-decoration: none;
	color: #d36f16}

Schritt-für-Schritt-Anleitung

Fügen Sie die erforderlichen Schritte hinzu:

Fügen Sie Ihre Schritte ein.
Zudem können Sie Bilder in Ihre Anleitungen kopieren oder ziehen.

Zudem können Sie Grafikbereiche zur Bereitstellung zugehöriger Informationen, Tipps oder Hinweise für Benutzer verwenden.

Schritt-für-Schritt-Anleitung

Verwandte Artikel