Artikelaktionen

    Sie sind hier: Startseite Plone4 - Das CMS der … Die erste Seite

    Die erste Seite

    Wenn Sie Ihr Portal erfolgreich eingerichtet haben, können Sie anfangen, dieses mit Inhalten zu füllen. Hierzu gibt es verschiedene Möglichkeiten. Im folgenden Dokument wird gezeigt, wie Sie den Inhaltsobjekttyp Seite mit Texten und Bildern anlegen und diese veröffentlichen.

    Eine Seite, auch Artikel genannt, lässt sich überall innerhalb der Portalstruktur anlegen. Im folgenden Beispiel wird die Seite ohne eine vorhandene Portalstruktur im Ordner Startseite hinterlegt. Dieser Ordner ist quasi das Hauptverzeichnis der Webseite. Hierhin wird der Nutzer geführt, wenn er das Portal öffnet. Sie können natürlich auch in jedem anderen Ordner im Portal eine Seite anlegen. Ebenso können Sie Seiten aus anderen Ordnern als Startseite festlegen.

    Seite anlegen

    Um Artikel bearbeiten zu können, müssen Sie sich zuerst Einloggen.
    Danach wählen Sie den Ordner aus, in dem sich die Seite befinden soll, klicken auf Hinzufügen und wählen Seite aus.

    ABB_1neue_seite.jpg

    Abbildung 1: Seite hinzufügen

    Der Menüpunkt Hinzufügen finden Sie unter den Tabs Inhalte und Anzeigen.

     ABB_2registerkarten.png

    Abbildung 2: Tabs und Anzeigen

    Es öffnet sich der Editor für die Webseite. Dieser ist in drei Bereiche unterteilt:

     ABB_3seiteneditor_üsicht.png

    Abbildung 3: Übersicht Seiteneditor

    Im Titelbereich (Abb. 3 Nr. 1) wird der Titel der Seite eingetragen. Dieser ist oben auf der Seite hervorgehoben zu finden.

    Die Zusammenfassung (Abb. 3 Nr. 2) ist nicht auf der Seite selbst zu sehen, sondern nur als Vorschau in Listen und Suchergebnissen. Hier sollten die Inhalte der Seite kurz beschrieben sein.

    Im Haupttext (Abb. 3 Nr. 3) schließlich wird der Hauptinhalt angelegt. Im Textfeld (Abb. 3 Nr. 4) wird der Text hinein geschrieben oder kopiert. Außerdem können Medien hinzugefügt werden.

    Text einfügen

    Um Text hinzuzufügen gibt es verschiedene Möglichkeiten. Durch Klicken in das Textfeld im Haupttextfeld  (Abb. 3 Nr. 4) erscheint dort ein Cursor. Nun kann direkt Text eingetippt werden. Sie können hier auch Texte mit der Tastenkombination STRG+V aus der Zwischenablage einfügen. Texte können auch mit vorhandener Formatierung aus Word übernommen werden (Abb. 4 Nr. 1).

     ABB_4haupttext_edit.png

    Abbildung 4: Editor Haupttext

    Hierzu öffnet sich ein eigenes Fenster, in dem Texte aus Word eingefügt werden können.

    Hinweis: Diese Funktion sollte nur genutzt werden, um Texte ohne Bilder einzufügen. Wollen Sie Bilder einfügen, tun Sie dies mit der Funktion Bild einfügen/verändern (Abb. 4 Nr. 2).

    Bilder einfügen

    Um Bilder einzufügen, wird die Schaltfläche Bild einfügen/verändern benutzt (Abb. 4 Nr. 2). Nun öffnet sich das Fenster Einfügen/Editieren (Abb. 5). Sie können wählen, ob ein Bild aus einer internen oder externen Quelle eingefügt werden soll (Abb. 5 Nr. 1)

     ABB_5bildeinfügen.png

    Abbildung 5: Einfügen/Editieren von Bildern

    In der Übersicht (Abb. 5 Nr. 2) werden alle Bilder und Ordner gezeigt, die bisher angelegt bzw. hochgeladen wurden. Sie können auch den Verzeichnisbaum nach einem Stichwort oder Ordnernamen durchsuchen (Abb. 5 Nr. 2).
    Die Anzeige der Bilder und Ordner kann als Listen- oder Galerieansicht erfolgen (siehe Abb. 5 Nr. 5). Falls schon Bilder hochgeladen wurden, können diese hier ausgewählt werden.
    Mit dem Sternchen haben Sie die Möglichkeit, sich ein Schnellzugriffsfeld einblenden zu lassen (Abb. 5 Nr. 6).Soll ein neues Bild hinzugefügt werden, muss dies mit der Funktion Upload geschehen (siehe Abb. 5 Nr. 3). Nun öffnet sich rechts ein neuer Bereich (siehe Abb.6) zum Hochladen der Bilder.

    ABB_6upload_bilder.png

    Abbildung 6: Upload von Bildern

    Durch die Schaltfläche Datei auswählen (siehe Abb. 6 Nr.1) öffnet sich ein neuer Dialog, in dem ein Bild von der lokalen Festplatte ausgewählt werden kann. Anschließend kann ein Titel und eine Beschreibung hinzugefügt werden (siehe Abb.6 Nr. 2). Der Titel des Bildes wird angezeigt, wenn sich die Maus längere Zeit über diesem befindet. Die Beschreibung wird von Suchmaschinen genutzt oder als Beschreibung für Menschen mit Sehbehinderung.

    Schließlich wird durch die Schaltfläche Upload das Bild hochgeladen und der Übersicht hinzugefügt. Das Bild ist anschließend farblich markiert und rechts öffnet sich der Detail-Bereich für dieses Bild. Im Detailbereich lassen sich noch einmal Änderungen vornehmen (siehe Abb. 7).

    ABB_7.png

    Abbildung 7: Bilddetails festlegen

    Die zuvor angelegte Beschreibung kann hier verändert werden (siehe Abb. 7 Nr. 1).

    Außerdem lässt sich noch festlegen,

    • wie sich das Bild in den Text einpasst (siehe Abb. 7 Nr. 2),
    • welche Größe es haben soll (siehe Abb. 7 Nr. 3)
    • ob ein Link eingefügtwerden soll (siehe Abb. 7 Nr. 4)
    • ob dieser im selben oder einem neuen Fenster geöffnet werden soll (siehe Abb. 7 Nr. 5)
    • ob ein bestimmter CSS Style ausgewählt werden soll (siehe Abb. 7 Nr. 6)

     

    Das Auswahlfenster stellt die Optionen Inline, Links und Rechts zur Einpassung in den Text zur Verfügung (siehe Abb. 7 Nr. 2 und Abb. 8).

    abb8-inline.png

    Abbildung 8: Bildoptionen

    Bei der voreingestellten Option Inline wird das Bild an genau der Stelle im Text platziert, an der sich gerade der Cursor befindet. Die Zeile, in der sich das Bild befindet, wird bezüglich der Zeilenhöhe an das Bild angepasst (siehe Abb. 9).

    ABB_9inline.png

    Abbildung 9: Bild als Inline

    Bei den Optionen Links und Rechts wird das Bild entsprechend links- oder rechtsbündig angeordnet. Der Text fließt dann daneben weiter (siehe Abb. 10 u. 11).

      abb-10links.png

    Abbildung 10: linksbündiges Bild

      abb-11rechts.png

    Abbildung 11: rechtsbündiges Bild

    Direkt unter der Angabe zur Bildposition lässt sich die Größe des Bildes einstellen (siehe Abb. 7 Nr. 3). Hier stehen einige Größen zur Auswahl (siehe Abb. 12). Die Größen werden im Format Höhe mal Breite angezeigt, dabei wird die Breite als tatsächliche Breite übernommen, die Höhe wird proportional angepasst. Wenn das Bild zuvor die Maße 1760x800 Pixel hatte, wird es danach die Maße 176x80 haben. So ist sichergestellt, dass Bilder nicht verzerrt dargestellt werden. Die Bilder werden bereits beim Hochladen von Plone umgewandelt und in der angegebenen Größe gespeichert. Bilder können also nur in der hochgeladenen Größe angezeigt oder herunter geladen werden.

    Mit der OK-Schaltfläche wird das Bild schließlich eingefügt (siehe Abb. 5 und 7 jeweils Nr. 7).

    Links einfügen  

    Um aus dem Inhaltsobjekt auf andere Seiten zu verweisen, können Links eingefügt werden. Links können Texte oder Bilder sein, die angeklickt werden, und damit zu weiteren Inhalten führen.

    Um einen Link innerhalb des Textes zu erstellen, wird zunächst die entsprechende Textstelle markiert. Um den Text in einen Link zu verwandeln, muss die Schaltfläche Link einfügen/verändern gedrückt werden (siehe Abb. 12 Nr. 1).
    Soll ein Link entfernt werden, passiert das mit Klick auf die Schaltfläche Link entfernen (siehe Abb. 12 Nr. 2).

     abb-12link-einfugen.png

    Abbildung 12: Arbeiten mit Links

    Daraufhin öffnet sich das Fenster Einfügen/Editieren (siehe Abb.13).

     abb-13link-einfugen-editi-2.png

    Abbildung 13: Links einfügen/entfernen

    Es können vier verschiedene Arten von Links eingefügt werden.

    Interner Link

    Interne Links sind Links innerhalb des Portals/der Webseite. Hier können alle Artikel, Ordner und sonstige Dateien eingebunden werden, die sich innerhalb der Webseite befinden (siehe Abb. 13 Nr. 1). Die verfügbaren Dateien werden angezeigt und können per Mausklick ausgewählt werden. Um die angezeigten Ergebnisse einzuschränken, lässt sich die Suchmaske nutzen (siehe Abb. 13 Nr. 5). Hierbei ist zu beachten, dass nur nach dem Dateinnamen-Anfang gesucht werden kann. Wenn der Artikel „Willkommen“ gesucht wird, muss "Will" eingegeben werden. Das funktioniert nicht, wenn Sie "kommen" eingeben.

    Externer Link

    Durch das Klicken auf den Tab Extern  (siehe Abb. 13 Nr. 2) wird das Fenster zum Erzeugen eines externen Links geöffnet (siehe Abb. 14).

    abb-14extern-link.png

    Abbildung 14: Externe Links einfügen

    Ein externer Link verweist auf Inhalte außerhalb der Webseite. Hierzu kann das Protokoll ausgewählt werden (siehe Abb. 14 Nr. 1), mit dem die externe Seite angezeigt wird. In der Regel ist dies „https://“,  also eine gesicherte Verbindung. Diese Auswahl ist auch voreingestellt. Bei einigen wenigen alten Seiten ist nur die Option „http://“ möglich. Da dies in bestimmten Fällen ein Sicherheitsrisiko ist, sollte davon abgesehen werden. Zudem steht noch die Option „ftp://“ zur Verfügung. Diese ist zu wählen, wenn man auf FTP-Downloads verweisen möchte.
    Fügen Sie eine komplette URL-Webseitenadresse in das Textfeld (siehe Abb. 13 Nr. 2) ein, die bereits das Protokoll enthält, wird dieses automatisch in das Protokoll-Textfeld (siehe Abb. 13 Nr. 1) übernommen.

    Im Bereich Link Title (siehe Abb. 14 Nr. 3) kann ein Titel für den Link vergeben werden.

    Zuletzt lässt sich noch einstellen, ob die verlinkte Seite im gleichen Fenster oder in einem neuen Fenster geöffnet wird (siehe Abb. 14 Nr. 4).

    Zum Abschluss wird die OK-Schaltfläche gedrückt, um den Vorgang abzuschließen. Nun ist der Text farblich unterlegt. Im Gegensatz zum internen Link findet sich noch ein kleines Symbol direkt hinter dem Linktext, das darauf hinweist, das die Seite verlassen wird (2019-03-19-13h14-44.png).

    E-Mail-Link

    Unter dem Tab Email kann eine E-Mail-Adresse verlinkt werden (siehe Abb. 13 Nr. 3). Sie tragen die gewünschte E-Mail-Adresse ein (siehe Abb. 15 Nr. 1) und den gewünschten Betreff (siehe Abb. 15 Nr. 2).

    Wird der Link vom Nutzer angeklickt, öffnet sich automatisch das voreingestellte Mailprogramm des Nutzers und generiert eine neue Email. In dieser Email stehen dann schon als Empfänger die hinterlegte E-Mail-Adresse sowie der entsprechende Betreff. Der Link-Titel wird angezeigt, wenn der Nutzer mit dem Cursor über dem Link verbleibt.

     abb-15email.png

    Abbildung 15: Verlinkung E-Mail 

    Auch hier wird per OK-Schaltfläche bestätigt. Der Link hat dann ein kleines E-Mail-Symbol (2019-03-20-11h54-41.png), um dem Nutzer zu zeigen, dass dies eine Verlinkung zu einer Mailadresse ist.

    Anker-Link

    Unter dem Tab Anker wird ein Link zu einer Textstelle gesetzt (siehe Abb. 13 Nr. 4). Dazu setzen Sie den Cursor an eine beliebige Stelle im Text und klicken anschließend die Anker-Schaltfläche(2019-03-21-11h17-33.png). Im neuen Fenster kann ein Name für den Anker festgelegt werden. Mit der Schaltfläche Einfügen schließen Sie den Vorgang ab.
    Bei Klick auf den Link springt der Nutzer dann an die festgelegte Textstelle.

    Der Anker ist nur im Bearbeitungsmodus zu sehen. Alle erstellten Anker erscheinen in einer Liste und können von dort ausgewählt werden.

    Bild verlinken

    Um ein Bild als Link zu benutzen, wird das Bild mit Rechtsklick ausgewählt und im aufkommenden Dialogfeld die Option Link einfügen/verändern gewählt (siehe Abb.16).

     abb-16bild-link.png

    Abbildung 16: Bild als Link

    Im Anschluss erscheint dasselbe Dialogfeld, wie bei anderen Links auch. Das Vorgehen ist also analog wie im letzten Abschnitt.

    Textformatierung

    Plone bietet die gängigen Optionen zur Formatierung von Texten. Diese Schaltflächen finden sich über dem Texteingabefeld. Die meisten kennen Sie in ähnlicher Weise auch von anderen Textverarbeitungprogrammen (z.B.:Word oder Writer). Im Folgenden werden diese kurz vorgestellt:

    2019-03-29-11h20-54.png Ist diese Schaltfläche aktiviert, wird die Schrift fett gedruckt.
    2019-03-29-11h29-36.png

    Ist diese Schaltfläche aktiviert, wird die Schrift kursiv gedruckt.

    2019-03-29-11h29-41.png

    Ist diese Schaltfläche aktiviert, wird die Schrift als Fußnote dargestellt.so wie hier!

    2019-03-29-11h29-46.png

    Ist diese Schaltfläche aktiviert, wird die Schrift als Hochzeichen dargestellt.so wie hier!

    2019-03-29-11h29-51.png

    Der Text wird nach links ausgerichtet.

    2019-03-29-11h29-56.png

    Der Text wird mittig ausgerichtet.

    2019-03-29-11h30-08.png

    Der Text wird nach rechts ausgerichtet.

    2019-03-29-11h30-13.png

    Der Text wird auf die Seitenbreite ausgedehnt. Dadurch können größere Lücken zwischen den Wörtern entstehen.

    2019-03-29-11h30-18.png

    Jeder neue Absatz beginnt mit einem Punkt. So lassen sich Aufzählungen erstellen.

    2019-03-29-11h30-26.png

    Jeder neue Absatz beginnt mit einer aufsteigenden Zahl. So lassen sich durchnummerierte Listen erstellen.

    2019-03-29-11h30-35.png

    Definitionslisten werden genutzt, um ein Glossar anzulegen.

    2019-03-29-11h30-55.png

    Der Textanfang wird nach links verschoben.

    2019-03-29-11h31-04.png

    Der Textanfang wird nach rechts verschoben.

     

    Wenn ein Text markiert wurde, bevor die entsprechende Schaltfläche gedrückt wird, wird die Formatierung für die Markierung wirksam. Ansonsten wirkt sich die Aktivierung der jeweiligen Schaltfläche auf den Text aus, der als nächstes geschrieben wird.

    Sonderzeichen und andere Elemente einfügen

    Über die folgenden Schaltflächen lassen sich Sonderzeichen und weitere Elemente einfügen:

     2019-03-29-11h31-24.png Sonderzeichen: Es öffnet sich eine Auswahl mit Sonderzeichen.

      2019-03-29-11h31-31.png Horizontale Linie: Eine horizontale Trennlinie wird eingefügt.

     2019-03-29-11h31-35.pngDatum einfügen: Das aktuelle Datum wird eingefügt.

     2019-03-29-11h31-39.pngZeit einfügen: Die aktuelle Uhrzeit wird eingefügt.

    Weitere Optionen des Texteditors

    Der Texteditor bietet noch weitere Optionen zur Ansicht und Bearbeitung:

     2019-03-29-11h31-45.pngVorschau: Zeigt in einem neuen Fenster eine Vorschau des fomratierten Texts.

     2019-03-29-11h31-52.pngFormatierung zurücksetzen: Löscht alle Formatierungen des markierten Bereichs.

     2019-04-10-11h25-35.pngQuellcode aufräumen: Bereinigt den HTML-Code, den Plone erzeugt.

     2019-04-10-11h25-43.png Attribute einfügen: Erlaubt, die Schriftrichtung zu ändern. Dies wird z.B. bei arabischen Texten notwendig.

     2019-04-10-11h25-57.pngHTML-Quellcode: Zeigt den Text als HTML-Code. Dies ist nur für fortgeschrittene Nutzer mit HTML-Kenntnisse empfohlen. Hinweis: Nicht alle HTML-Elemente und Attribute werden von Plone erlaubt.

     2019-04-10-11h26-01.png Vollbildschirm: Öffnet den Editor im Vollbildschirm.

     2019-04-10-11h26-05.pngInhalte aus Vorlage: Hier können Inhalte aus Vorlagen übernommen werden.

    Arbeiten mit Tabellen

    Innerhalb eines Artikels können auch Tabellen eingesetzt werden. Hierdurch können Inhalte übersichtlich strukturiert werden. Um eine Tabelle einzufügen, muss zunächst die Schaltfläche „Tabelle erstellen“(2019-04-10-12h15-58.png) betätigt werden. Diese befindet sich oberhalb des Textfeldes bei den weiteren Formatierungsoptionen. Zudem lässt sich die Schaltfläche auch mit einem Rechtsklick im Textfeld auswählen. Nun erscheint ein Fenster mit Optionen:

     abb-17tab-labeled.png

    Abbildung 17: Tabelle einfügen/bearbeiten

    Die Tabelle kann beliebig viele Spalten und Zeilen haben (siehe Abb. 17 Nr. 2). Zudem kann man hier eine CSS-Klasse auswählen (siehe Abb. 17 Nr. 1). Die CSS-Klassen legen die Darstellung der Tabelle fest. Hierbei gibt es mehrere Optionen (siehe Abb. 18):

     abb-18tab-css.png

    Abbildung 18: CSS-Klassen bei Tabellen

    Je nach Auswahl sehen die Tabellen unterschiedlich aus. In der folgenden Abbildung sind die verschiedenen Varianten aufgezeigt:

    abb-19tabellen-cssusich.png 

    Abbildung 19: Tabellen mit CSS-Klassen

    Im Textfeld Zusammenfassung (siehe Abb. 17 Nr. 3) kann man eine Beschreibung festlegen, die dann im HTML-Code hinterlegt wird.

    Optional lässt sich auch eine Kopfzeile zur Beschriftung einfügen. Hierzu wird die Schaltfläche Erweitert im Eigenschaftenfenster ausgewählt (siehe Abb. 17 Nr. 4).

    Um die Eigenschaften einer bereits erstellten Tabelle zu bearbeiten, klickt man mit der rechten Maustaste in eine beliebige Zelle der Tabelle. In dem erscheinenden Fenster wählt man dann die Option Eigenschaften der Tabelle aus und erhält das gleiche Eigenschaftsfenster (siehe Abb. 17).

    Weitere Optionen von Tabellen

    Wenn der Cursor in einer beliebigen Zelle der Tabelle ist, werden automatisch weitere Funktionen über dem Texteingabefeld freigegeben. Diese sind im Folgenden kurz erklärt:

     2019-04-30-10h45-07-1.png Eigenschaften der Zeile: Hier lassen sich erweiterte Eigenschaften festlegen. Hierzu zählen die Zeilenhöhe, Textausrichtung, Schriftrichtung sowie Hintergrundfarbe und –bild.

     2019-04-30-10h45-24-1.pngEigenschaften der Zelle: Hier lässt sich eine feste Breite und Höhe für eine Zelle festlegen.

      2019-04-30-10h45-28-1.png Mit dieser Schaltfläche wird eine neue Zeile oberhalb der aktuellen Zelle eingefügt.

      2019-04-30-10h45-35-1.pngMit dieser Schaltfläche wird eine neue Zeile unterhalb der aktuellen Zelle eingefügt.

     2019-04-30-10h45-44-1.png Mit dieser Schaltfläche wird die aktuelle Zeile gelöscht.

      2019-04-30-10h45-49-1.pngMit dieser Schaltfläche wird eine neue Spalte links neben der aktuellen Zelle eingefügt.

      2019-04-30-10h45-53-1.pngMit dieser Schaltfläche wird eine neue Spalte rechts neben der aktuellen Zelle eingefügt.

      2019-04-30-10h45-58-1.pngMit dieser Schaltfläche wird die aktuelle Spalte gelöscht.

     2019-04-30-10h46-06-1.png Mit dieser Schaltfläche werden verbundene Zellen getrennt.

      2019-04-30-10h46-14-1.png Mit dieser Schaltfläche können Zellen miteinander verbunden werden.

    Die meisten Schaltflächen können auch über Rechtsklick in einer beliebigen Zelle der Tabelle aufgerufen werden.