Der Block „Text“ ist auf den ersten Blick einfach aufgebaut. Er enthält eine Textbearbeitungsleiste und darunter ein Feld, in das man seinen Text schreiben oder kopieren kann.

Die Textbearbeitungsleiste überrascht dann aber mit Dropdownmenüs.

Eingabesymbol

Wenn man auf das Eingabesymbol – das 1. Symbol in der Leiste – klickt, erhält man die Möglichkeit, die Schriftgröße zu verändern.

Zur Auswahl stehen:

Normaler Text

Überschrift 2

Überschrift 3

Um die Schriftgröße zu verändern, markiert man den entsprechenden Text und wählt im Menü die gewünschte Schriftgröße aus.

Schriftarten

Alle Schriftarten kann man darüber hinaus verändern durch:

B = Fettschrift

I = kursive Schrift

Linksymbol

Link zu einem Eintrag

Diese Linkoption nutzt man, wenn man auf eine Seite im eigenen Auftritt verlinken möchte. Nach dem Klick auf den Menüpunkt öffnet sich eine Liste mit allen erstellten Einträgen. Man kann das Eintragsdatum so einstellen, dass der neueste Eintrag oben steht.

Um die Liste einzuschränken, kann man links im Menü die Art des gesuchten Eintrags wählen. Über der Liste gibt es zudem eine Suchfunktion.

Wenn man den gewünschten Eintrag gefunden hat, doppelklickt man auf den Namen oder markiert den Namen und geht dann unten rechts auf „Auswählen“. Der Eintrag wird daraufhin mit Überschrift in unserem Text verlinkt.

Es kommt vor, dass man beim Schreiben eines Textes denkt, "hier müsste ich eine Seite verlinken", aber diese Seite wurde noch nicht erstellt. Für diesen Fall steht links unterhalb der Liste mit den Einträgen die Option „Neuer Eintrag in …“ zur Verfügung. Hier kann man wählen, in welcher Rubrik der Eintrag erscheinen soll und anschließend zumindest eine Überschrift eingeben. Nach dem Klick auf „Speichern“ erscheint die Seite in der Eintragsliste und kann verlinkt werden.

Link zu einer Datei

Hier kann man den Link zu einem Bild einfügen. Das bietet sich besonders bei sehr großen Bildern an, etwa bei Pressefotos von Abgeordneten.

Link einfügen

Diese Option bezieht sich auf externe Links. Es öffnet sich ein Fenster, in dem man die URL der verlinkten Seite einträgt. Anschließend muss man den Link noch benennen und kann zudem anklicken, ob er sich in einer neuen Seite öffnen soll.

Hier werden auch E-Mail-Adressen verlinkt.

Wenn man den Text für die Bennennung des Links bereits in das Textfeld geschrieben hat, markiert man diesen Text und klickt dann auf "Link einfügen". Der Text wird automatisch übernommen, sodass man nur noch die URL bzw. Mail-Adresse eintragen muss.

Link entfernen

Wenn man einen bestehenden Link markiert, kann man die Verlinkung mit dieser Option entfernen.

Dateisymbol

Diese Option ermöglicht es innerhalb des Textes Dateien wie z.B. pdf-Dateien, aber auch Bilder, zu verlinken. Man scheibt den Text, den man verlinken möchte, markiert ihn und klickt auf das Dateisymbol. Jetzt öffnen sich die Dateiordner, man wählt die gewünschte Datei aus und fügt sie ein.

Aufzählung

Es werden die Aufzählungstypen mit Punkt und Nummerierung angeboten. Die als Aufzählung erstellte Liste wird eingerückt.

Man kann für einzelne Punkte (nicht ganze Blöcke) den Einzug verkleinern oder vergrößern.

Wenn man den Einzug verkleinert, wird der Listenpunkt bzw. die Nummerierung entfernt. Danach beginnt die Nummerierung wieder mit 1.

Wenn man den Einzug eines Eintrags in einer Punktliste vergrößert, erhält man einen mit Punkt versehenen Unterpunkt.

Beim Vergrößern des Eintrags in einer nummerierten Liste wird aus der Zahl ein Buchstabe, sodass man strukturierte Listen erstellen kann.

Linie

Die letzte Formatierungsoption ist die Linie, wie sie zum Abschluss gezogen ist.

Wie heißt es so schön „Bilder sagen mehr als tausend Worte.“

Deshalb sind Bilder ein fester Bestandteil jedes Internetauftritts.

Die ideale Größe für Bilder in SPDplus ist das Seitenverhältnis 16:9 oder auch 3:2. Hochformat ist eher ungünstig.
Im Seitenverhältnis 16:9 sind dies beispielsweise 1600 x 900 Pixel oder 800 x 450 Pixel.
Im Seitenverhältnis 3:2 sind dies beispielsweise: 1500 x 1000 Pixel oder 900 x 600 Pixel.

Bilder im Block "Personen" müssen quadratisch sein (mindestens 350 x 350 px).

Die Bühne hat das Format 1240 x 340 Pixel.

Das Portalbild sollte ein Format von mindestens 1920 x 1200 Pixel haben.

Um ein Bild in einen Text einzubauen, wählt man den Block „Bild“. Wenn man möchte, dass neben dem Bild Text erscheint, muss der Bildblock vor dem Textblock stehen.

Der Block „Bild“ hat die einzige Option „Datei einfügen“. Wenn man daraufklickt, öffnet sich der Dateiordner.

Bei migrierten Auftritten enthält der Dateiordner alle Ordner und Unterordner von Imperia mit den dort gespeicherten Bildern und Dateien. Bei neuen Auftritten ist der Dateiordner leer und kann mit eigenen Bildern und Dateien gefüllt werden.

Der Ordner, in dem man sich gerade befindet, ist dunkelgrau unterlegt. Durch klicken auf den Pfeil links kann man Ordner öffnen oder schließen. Wenn man mit der rechten Maustaste auf einen Ordnernamen klickt, kann man zu diesem Ordner Unterordner anlegen.

Man kann jetzt ein bestehendes Bild auswählen und mit einem Doppelklick in den Bildblock laden oder es markieren und mit einem Klick auf „Auswählen“ laden. Alternativ ist es möglich, Bilder hochzuladen. Das Hochladen mehrerer Bilder in einem Arbeitsgang ist möglich, dazu werden die Bilder auf der Festplatte ausgewählt und mit Klick auf „Öffnen“ startet der Upload.

Bildinformationen

Zum Einfügen der Bildinformationen „Alternativtext“, „Beschreibung“, „Copyright“, "Quell-URL" und eines evtl. Ablaufdatums (zu diesem Datum wird das Bild vom Netz genommen), doppelklickt man im Block auf das Bild und trägt die Daten in dem sich öffnenden Fenster ein. Mit einem Klick auf „Speichern“ werden die Informationen gesichert und man wird zum Bild zurückgeführt.

Alternativtext

Kann das Bild nicht geladen werden oder wird das Format vom Webbrowser nicht unterstützt, wird stattdessen der ALT-Text angezeigt. Dies soll sehbehinderten Menschen oder Websitebesuchern, deren Browser das Bild nicht darstellen können, den Inhalt des Bildes vermitteln. Es gilt gemäß der offiziellen HTML-Spezifikation als Mangel, bei Bildern auf diesen Alt-Text zu verzichten.Mittlerweile gilt dieser Alt-Text auch als ein Kriterium in der Onpage-Suchmaschinenoptimierung, denn die Suchmaschinen erfassen über diesen Text ebenfalls den Inhalt von Bildern.

Beschreibung

Hier trägt man die Bildunterschrift ein, die später im Frontend unter dem Bild zu sehen ist.

Copyright

Hier wird eingetragen, wer die Rechte an dem hochzuladenden Asset hat.

Jedes Bild, jeder Text ist urheberrechtlich geschützt und unterliegt dem urheberrechtlichen Schutz, egal ob einfacher Schnappschuss, Gruppenfoto oder Zeitungsartikel. Sind Personen abgebildet, so müssen die Persönlichkeitsrechte berücksichtigt werden. Grundsätzlich bedarf es bei der Veröffentlichung fremden Bild- bzw. Textmaterials immer der Zustimmung des Urhebers oder einer entsprechenden Lizenz.“ Rechtsgrundlage ist das Urheberrechtsgesetz (UrhG).

Quell-URL

Manche Rechteinhaber verlangen, dass auf ihre Seite verlinkt wird. Hier kann man die URL der zu verlinkenden Seite eingeben. Nach einem Klick auf den Coypright-Inhaber wird man zu dieser Adresse geführt.

Ablaufdatum

Sollte die Nutzungserlaubnis zeitlich begrenzt sein, kann man hier ein Datum einfügen. Nach Ablauf der Nutzungsfrist wird das Bild automatisch von den Seiten entfernt.

Rechtliche Freigabe.

In dieses Kästchen muss ein Häkchen gesetzt werden, ansonsten funktioniert die Übernahme der Datei in die Vorlage nicht.

Die Angaben müssen für jede Datei gemacht werden, die in Seiten eingebunden sind.

Wenn die Daten eingegeben sind, klickt man auf „speichern“ und kann die Datei veröffentlichen. Ohne diese Angaben ist ein Speichern der Seite nicht möglich.

Foto: SPD-Bezirk Hannover

Darstellung

Rechts im Block geht man anschließend auf den Reiter Darstellung, um die Bildposition im Text und die Bildgröße festzulegen. Vollansicht über die gesamte Textbreite ist voreingestellt. Man kann das Bild durch Klick auf die entsprechende Position auch links oder rechts im Text platzieren. Der Text läuft dann um das Bild herum.

Bei der Bildgröße, die nur bei rechts oder links positionieren Bildern angewandt werden kann, ist die halbe Textbreite voreingestellt. Man kann das Bild durch einen Klick auf die entsprechende Größenangabe verkleinern. Die Angaben beziehen sich auf die Bildbreite bezogen auf die Seitenbreite. Im Vorschaumodus kann man das Ergebnis anschauen.

Verlinkung des Bildes

Als letztes gibt es die Möglichkeit das Bild zu verlinken.

Wenn man auf URL klickt, öffnet sich ein Aufklappmenü mit folgenden Optionen:

Asset
E-Mail
Eintrag
Telefon
URL

(siehe Verlinkungen)

Mit dem Block "Bild" können auch zwei Bilder nebeneinander dargestellt werden.

Für diese Darstellung werden nacheinander zwei Bildblöcke geöffnet und Bilder eingefügt. Wenn man für das erste Bild die Darstellung "links" wählt und für das zweite Bild die Darstellung "rechts" erscheinen die beiden Bilder nebeneinander. Man kann die Reihenfolge durch ein Verschieben der Blöcke mit dem Anfasser verändern.

Der Block "Externer Inhalt" ermöglicht es, einen Tweet, ein YouTube- oder Vimeo-Video einzubinden.

Zunächst kann man einen Titel für den externen Inhalt vergeben.

Für die Einbindung eines Tweets gibt man die URL des Tweets ein, z.B. https://twitter.com/spdndsweb<... ein YouTube- und Vimeo-Video klickt man bei dem gewünschten Video auf "Teilen" und kopiert den erzeugten Link in das Feld "Externer Inhalt".

Der externe Inhalt wird anschließend unter "Preview" (Vorschau) abgezeigt.

Nach einem Klick auf "Optionen" rechts kann man die Darstellung links- bzw. rechtsbündig oder vollflächig wählen.

Mit dem Block "Links" kann man bequem eine Linkliste aufbauen. Nachdem man den Titel der Linkliste eingetragen hat, klickt man in dem Feld darunter auf das Pluszeichen neben "Link" und ein Eintragsfeld öffnet sich. Das kann man so oft wiederholen, wie man einen Link benötigt.

Mit dem Rädchen-Werkzeug "Add block above" kann man über einen bestehenden Link einen neuen einfügen oder man benutzt den Anfasser, um die Linkliste zu sortieren.

In das Feld URL trägt man den gewünschen Link ein und benennt ihn anschließend in dem Feld "Eigener Linktext"

Man kann in dieser Liste aber nicht nur URLs verlinken. Wenn man auf URL klickt, öffnet sich ein Aufklappmenü mit folgenden Optionen:

Asset. Mit dieser Option verlinkt man eine Datei aus der Dateiliste, z.B. das Originalbild, um es groß anzuzeigen oder eine pdf-Datei mit z.B. der Einladung zu einer Veranstaltung. Nach dem Klick auf Asset wird man zur Dateiliste geführt und kann eine Datei auswählen oder hochladen.

E-Mail. Ermöglicht die Verlinkung einer Mail-Adresse. Sie wird rechts vom Text "E-Mail" eingetragen. Das Feld „Eigener Linktext“ ist hier ohne Funktion.

Eintrag. Mit Klick auf „Auswählen“ öffnet sich die Liste mit allen erstellten Einträgen. Mit einem Doppelklick oder Markieren und anschließendem Klick auf „Auswählen“ fügt man den Eintrag als Link ein.

Telefon. Um einem Anwender, der beispielsweise mit seinem Smartphone die Website besucht, die Kontaktaufnahme so einfach wie möglich zu machen, kann hier eine Telefonnummer nach internationalem Standard eingegeben werden. Wenn ein Besucher auf dem Handy den Link anklickt, öffnet sich die Telefon-App. Hier können nun je nach Betriebssystem verschiedene Optionen ausgewählt werden.

URL. An dieser Stelle, die standardmäßig voreingestellt ist, kann man eine externe URL (mit http bzw. https) verlinken. Dazu gibt oder kopiert man die URL in das dafür vorgesehene Feld ein und setzt ein Häkchen bei „In neuem Fenster?“, falls die URL in einem neuen Fenster geöffnet werden soll. Anschließend füllt ihr „Eigener Linktext“ aus. Das ist der Text, auf den der Besucher im Frontend klickt, um die URL zu öffnen.

Mit "Vorschau" (rechts oben) hat man die Möglichkeit, seine Einträge zeitnah zu kontrollieren.

Wie der Name des Blocks vermuten lässt, kann man damit eine Bildergalerie anlegen. Man klickt dazu auf Bild hinzufügen und wird automatisch in die Dateiliste geführt, in der man das Bild auswählen oder hochladen kann. Dies kann man so oft wiederholen, wie man möchte. (Nähere Erläuterungen dazu findet ihr hier.)

In der Dateiliste werden die Bilder, die bereits verwendet wurden, mit einer verringerten Deckkraft angezeigt, um das doppelte Einfügen zu verhindern.

In der fertigen Galerie sieht man in einer Reihe vier auf ein quadratiches Maß skalierte Bilder. Beim Klick auf das Vorschaubild wird es groß mit Bildunterschrift (falls die Beschreibung ausgefüllt ist) angezeigt. Beim Klick auf das große Bild springt man zur Galerie zurück.

Unser SPDplus bietet für die Seitengestaltung eine einfach aufzubauende Tabelle an.

Nach der Auswahl des Blocks "Tabelle" sieht man folgendes Bild:

In das Feld "Titel" wird der Name der Tabelle eingetragen. Es folgt der Eintrag "Spalten". Hier trägt man die Überschrift (Heading) der ersten Spalte ein. Mit einem Klick auf das Feld left kann man die Ausrichtung der Spaltenüberschrift festlegen.

Nach einem Klick auf "+ Neue Spalte" kann man eine weitere Spaltenüberschrift einfügen. Das macht man für alle Spalten, die man benötigt.

Auf die Spalten folgen die Zeilen, die jetzt schon mit der eingetragenen Spaltenüberschrift versehen sind. Hier muss man nur seine Einträge machen und kann mit +Neue Zeile neue Zeilen anfügen.

Die Zeilen und Spalten können mit dem Anfasser umsortiert oder mit einem Klick auf das x rechts daneben gelöscht werden.

Eine fertige Tabelle sieht dann beispielsweise wie folgt aus.

Für die Experten unter euch: Der Inhalt der Zeilen kann mit html formatiert und Verlinkungen können mit html eingefügt werden.

Mit der Downloadliste können alle Arten von Dateien (z.B. Bilder, doc-Dateien oder pdf) zum Download zur Verfügung gestellt werden. In der Regel werden hier jedoch pdf-Dateien verlinkt.

Die Handhabung ist denkbar einfach. Nach der Auswahl des Moduls öffnet sich ein Feld mit der Option "+ Eintrag hinzufügen".

Nach dem Klick darauf wird man zu den Dateien geführt und wählt die gewünschte Datei aus bzw. lädt sie hoch, um sie dann einzubinden. Falls man eine Liste erstellen möchte, klickt man für die nächste Datei wieder auf "Eintrag zufügen" usw. Mit dem Anfasser können die Einträge sortiert werden.

Eine kleine Liste mit dem Link zu einem Bild und einer pdf-Datei sieht wie folgt aus:

Die Akkordeonbox ist ein hilfreiches Modul, wenn man lange, gegliederte Texte - auch mit Bildern - veröffentlichen möchte. Statt einer endlos langen Datei sieht man mit der Akkordeonbox nur die Kapitelüberschriften, die man bei Interesse aufklicken kann, um mehr zu lesen.

Nach der Auswahl des Blocks Akkordeonbox erscheint folgendes Feld:

Nach dem Klick auf "Kapitel" sieht man die Titelzeile, sowie die Blöcke für die Box-Gestaltung.

Der Titel ist später im Live-Auftritt zu sehen und dort mit einem Pfeil zum Aufklappen versehen.

Die weitere Gestaltung der Akkordeonbox entspricht der normalen Seitengestaltung.

Wenn man mehrere Kapitel hintereinander schaltet - jeweils durch Klick auf "Kapitel" - kann ein langer, gegliederter Text ansprechend präsentiert werden. Diese Seite im Handbuch ist teilweise mit der Akkordeonbox gestaltet.

Die Infobox bietet die Möglichkeit, ein Bild mit einem Text hervorzuheben. Die Infobox erhält einen kleinen Rahmen und die Überschrift ist rot.

Nach dem Klick auf Infobox öffnet sich ein Block, um die Box zu gestalten.

Zunächst kann man den Titel - also die Überschrift – ausfüllen.

Als nächster Schritt wird das Hinzufügen eines Bildes angeboten und zum Schluss wird der Text für die Box eingefügt.

Nach einem Klick auf "Optionen" (Menüleiste rechts) kann man bei einer einzelnen Box ihre Lage innerhalb der Seite bestimmen. Die mittige Darstellung zeigt die Infobox in nahezu Seitenbreite mit dem Text neben dem Bild, bei den Einstellungen rechts und links rutscht der Text unter das Bild und man kann mit seinem Text neben der Box fortfahren.

Darüber hinaus kann man das Bild unter "Optionen" verlinken. Dafür gibt man in dem Feld "Bild-Link" die gewünschte URL und optional einen Text für den Link ein. Zusätzlich kann unten in der Box mit "+ Link" ein sichtbarer Link erzeugt werden.

Aber das ist noch nicht alles.

Eine einzelne, mittig platziere Infobox erstreckt sich nahezu über die Breite der Seite, aber wenn man mehrere Infoboxen nebeneinanderstellt, kann man damit bis zu drei Spalten erzeugen und hat Elemente, die der Teaser-Leiste ähneln.

Weitere Infoboxen werden in einer nächsten Reihe veröffentlicht.

Da Infoboxen in der Akkordeonbox nicht dargestellt werden köönen, kommt hier ein Link zur Ansicht der Boxen.

Das Applikationsmodul haben wir für unsere "Freaks" entwickelt. Es nimmt umfangreiche HTML-Befehle sowie html-basierte Scripts auf, so dass es - mit einer optionalen Überschrift - entsprechend genutzt werden kann - zum Beispiel für den iframe des Vorwärts-Banner, eine Uhr und sogar ein Wetterbericht sind möglich (siehe Beispiele). Der Kreativität sind keine Grenzen gesetzt.

Der Block „Personen“ ist dafür konzipiert, eine größere Anzahl von Personen – Vorstände, Fraktionen, Kandidat*innen etc. – übersichtlich zu präsentieren. Zwei Darstellungsweisen stehen zur Auswahl: Liste und Kacheln. Die Darstellung lässt sich jederzeit ändern.

Nach dem Klick auf „Personen“ öffnet sich eine Eingabemaske, die aus zwei Teilen besteht: Inhalt und Text.

In „Inhalt“ fügt man das Bild der Person ein, dann folgt der „Name“ und – optional – eine Kurzbeschreibung, z.B. Fraktionssprecher oder Wahlbereich I, Platz 3 …

Das Bild sollte quadratisch sein, ansonsten wird es vom Programm eingepasst und das kann zu abgeschnittenen Köpfen führen. In der Bildbearbeitung kann man das Bild auf ein Quadrat zuschneiden. (Dateien | Bilder bearbeiten)

Der Tab „Text“ bietet die Möglichkeit, in gewohnter Art mehr über die Person zu schreiben.

Wenn man fertig ist, klickt man erneut auf Person und kann die nächste Person einfügen. Die einzelnen Blöcke kann man auch wie gewohnt verschieben und neu sortieren.

Wenn man „Liste“ als Darstellung wählt, werden die Personen links untereinander dargestellt und der Text erscheint rechts von ihnen. Hierbei sollte man möglichst auf eine einheitliche Textlänge achten.

Bei der Kacheldarstellung werden drei Köpfe nebeneinander gezeigt. Wenn man auf den Kopf klickt (hierzu kommt noch ein Hinweis), öffnet sich ein Fenster mit den in „Text“ eingegebenen Informationen.