Suche

Um nun eine neue Website in Contenido zu erstellen, führen Sie die hier folgenden Punkte durch. Die Screenshots und die Erklärungen sind hierbei nur beispielhaft an der Website http://www.contenido-das-buch.de aufgezeigt, sie dienen dennoch als Vorlage. Auf die einzelnen Steuerbefehle in HTML und CSS wird hier ebenfalls nicht eingegangen.

HTML Gerüst erstellen
Um überhaupt eine Seite anzeigen zu können, ist der Aufbau der Website vorab in HTML zu erstellen. Den HTML-Code können Sie von Hand in einem beliebigen Editor oder mit einem Programm wie Microsoft® Frontpage, Dreamweaver® oder anderen beliebigen Programmen erstellen.

Der HTML-Code - der später bei Aufruf der Website ausgegeben wird - sollte bei Prüfung über das W3C (World Wide Web Consortium) validiert werden. Eine direkte Prüfung des HTML-Codes wäre nicht validiert, da in diesem Code die TAGs <contenido></contenido> samt aller Attribute id, name, default und mode eingetragen sind, die dem W3C nicht bekannt sind. Diese sind allerdings nur nicht im Standard des W3C. Daher wären diese Meldungen unerheblich, da die TAGs bei Aufruf der Website von Contenido durch validen Code ersetzt werden.

CSS Datei
Bei dem verwendeten HTML Grundgerüst wird eine Stylesheet-Datei (CSS) benötigt. Diese wird entweder automatisch von einem der o.g. Programme oder manuell angelegt. Es ist jedoch keine Voraussetzung, dass eine Stylesheet-Datei verwendet wird.

Stylesheet anlegen
Damit bei der Erstellung des Layouts (HTML Grundgerüst) die Funktion Vorschau verwendet werden kann, legen Sie vorab einen Stylesheet an. Dies geschieht über die Navigation "Style › Styleeditor". Nach dem Klicken auf den Navigationspunkt, erscheint eine Übersicht über die vorhandenen Stylesheets. Es sollte bereits eine Datei style.css existieren. Ist dies nicht der Fall, legen Sie durch einen Klick auf "Style erstellen" einen neuen Stylesheet an, das Vorgehen ist danach in beiden Fällen gleich. Nach dem Klicken auf den Dateinamen fügen Sie Ihren CSS-Code ein.


Danach speichern Sie den neuen Stylesheet mit dem grünen Bestätigungshaken rechts unten. Die Datei ist dann gespeichert. Ist dies nicht der Fall, wird eine Fehlermeldung ausgegeben. Wenn auf der Website irgendwelche Bilddateien für die Anzeige benötigt werden, werden diese entweder über FTP oder über die Dateiverwaltung übertragen. In jedem Fall ist der Pfad zu den Bilddateien zu prüfen, damit diese später auf der Website aufgerufen werden können.

Die zwei Dateien style_print.css und style_tiny.css werden nur dann benötigt, wenn Sie als Installationsart "Mandant mit Beispielmodulen und -inhalten" verwendet haben.

Wichtig ist, dass im HTML-Code der richtige Link für die Stylesheet-Datei eingefügt wird. Wird es wie in dieser Arbeit mit der Datei style.css über das Backend von Contenido durchgeführt, so sollte der Link im HTML-Code folgendermaßen lauten und zwischen <head></head> stehen:

<link href="css/style.css" type="text/css" rel="stylesheet" />

HTML Grundgerüst in Contenido als Layout einbinden
Um nun das HTML Grundgerüst in Contenido einzubinden, klicken Sie im Backend auf "Style › Layouts".


In dieser Ansicht klicken Sie nun auf "Neues Layout". Nun können Sie auf der rechten Seite dem Layout einen Name, eine Beschreibung und den Quelltext zuweisen.


Die drei Felder folgendermaßen ausfüllen:

Name: Beliebig, hier Standard
Beschreibung: Beliebig, hier leer
Quelltext: HTML Grundgerüst

Die Seite sieht dann ähnlich dem obigen Screenshot aus. In diesem wurde bereits auf der Seite ganz nach unten gescrollt, damit der grüne Bestätigungshaken sichtbar ist.

Mit einem Klick auf den grünen Bestätigungshaken wird das Template gespeichert und wird dann in der linken Bildhälfte als "Standard" angezeigt.


Dieses Layout hat insgesamt drei Container:

  1. <container id="10" name="Hauptnavigation" default="Hauptnavigation" mode="fixed"></container>
  2. <container id="11" name="Login" default="Login" mode="fixed"></container>
  3. <container id="30" name="Content" default="Text (HTML)"></container>

Der erste Container stellt die Hauptnavigation dar. Die Navigation ist auf der Website auf der linken Seite zu sehen. Auch diesem Container ist bereits ein Modul zugewiesen (Hauptnavigation) und kann in den Templates ebenfalls nicht geändert werden (mode="fixed").

Der zweite Container beinhaltet das Modul Login und dient dazu, dass sich Frontenduser auf der Website einloggen können.

Der dritte Container stellt den Inhaltsbereich dar, der auf der rechten Seite zu sehen ist. Diesem Container ist ebenfalls ein Modul zugewiesen (Text (HTML)), das aber in den einzelnen Templates geändert werden kann.

Alle drei verwendeten Module werden mit Contenido installiert und müssen folglich nicht mehr manuell in das System eingepflegt werden. Nach dem Speichern des Layouts gibt es die Möglichkeit, dieses vorab zu betrachten. Dies geschieht in der rechten Bildhälfte über den Navigationspunkt "Vorschau".

Neues Template anlegen
Um nun durch das Template dem im vorigen Kapitel angelegten Layout die Module zuzuweisen oder zu ändern, klicken Sie in der Navigation auf "Style › Templates".


Die Liste auf der linken Seite sollte nach einer Neuinstallation von Contenido leer sein. Nachdem Sie auf "Neues Template" geklickt haben, wird ein neues Template angelegt. Die Einstellungen werden im rechten Teil des Bildschirms aufgezeigt.


In die Felder diese Daten eintragen:

Name: Beliebig, hier zur besseren Kennzeichnung „Standard"

Beschreibung: Beliebig, hier leer

Standard: Ein Haken in diese Checkbox bewirkt, dass dieses Template immer
als Standard voreingestellt wird. Diese Option ist besonders sinnvoll bei dem Template, das am häufigsten auf der Website eingesetzt werden soll. Dies ist z.B. ein Template mit Modulen für Navigation und Inhalt; hier: aktiviert.

Layout: Es sollte bisher nur eine Auswahlmöglichkeit bestehen. Hier lautet diese „Standard", da das im vorigen Kapitel angelegte Layout mit "Standard" benannt wurde. Wurde das Layout anders benannt oder gibt es mehrere Layouts, muss das passende Layout ausgewählt werden.

Layoutbeschreibung: Hier wird die Beschreibung des Layouts angezeigt, vorausgesetzt, dass diese bei der Erstellung des Layouts auch ausgefüllt wurden.

Nachdem alle Felder ausgefüllt sind und ein Layout im Drop-Down-Feld ausgewählt ist, verändert sich die Anzeige folgendermaßen:


Die Beschreibungen "Navigation", "Login" und "Content" sind im Layout in den TAGs <container></container> festgelegt. Ebenso ist dort festgelegt, dass die Module Navigation und Content fix sind und nicht verändert werden können. Nur das Modul bei "Content" kann geändert werden, hier bleibt jedoch das voreingestellte Modul Text (HTML) ausgewählt.

Nach einem Klick auf den Bestätigungshaken wird das Template gespeichert. Der Unternavigationspunkt "Voreinstellungen" wird später erläutert, da dazu noch andere Einstellungen vorzunehmen sind. Der Punkt "Visuelles editieren" wird hier nicht weiter vertieft. Hier könnten Sie im Layout der Website den Containern sozusagen "live" die Module zuweisen. Damit ist zu erkennen, an welcher Stelle welches Modul verwendet wird.

Da die Website nach der Erstellung der Screenshots erweitert wird ist es nicht ausgeschlossen, dass diese Übersicht weniger Templates aufzeigt, als die spätere Website benutzt. Daher ist auch diese Übersicht über die Templates nur beispielhaft.

Modul-Templates editieren
Unter "Style › Modul-Templates" sind noch (falls erforderlich) die Modul-Templates für die verwendeten Module anzupassen, damit das Layout z.B. der Navigation später auch wunschgemäß dargestellt werden kann. Diese Templates dürfen nur reines HTML (auch mit CSS) verwenden, PHP oder JS (JavaScript) werden nicht interpretiert. Der Code in einem HTML-Template wird von einem Modul an den erforderlichen Stellen im Modul-Code automatisch eingefügt.

Da in dieser Installation ein eigenes Navigationsmodul verwendet wird, müssen keine der mitgelieferten Modul-Templates bearbeitet werden. Auch die anderen Modul-Templates kommen hier nicht zum Einsatz und werden daher nicht weiter erläutert. Generell sind diese Modul-Templates dazu da, das Layout von bestimmten Bereichen in Modulen grafisch zu bearbeiten und zu formatieren.

Kategorien/Navigation anlegen
Damit später das Modul Hauptnavigation die Navigationsstruktur bilden kann, muss erst die Kategorie angelegt werden, aus denen das Modul die Navigation erstellen kann.

Dazu klicken Sie auf "Content › Kategorie". In dieser Ansicht werden neue Kategorien angelegt. Hier wird eine Navigation verwendet, für die das Modul einen Baum benötigt, aus dem die Navigationspunkte ausgelesen werden. Nach dieser Neuinstallation sollten keine Kategorien existieren. Ein neuer Baum wird durch einen Klick auf "Neuen Baum anlegen" hinzugefügt. In dem folgenden Bildschirmausschnitt wird dann der Name der Kategorie, bzw. des Baumes eingetragen. Hier wird zur besseren Übersicht eine sprechende Bezeichnung Hauptnavigation verwendet. So kann eine spätere Zuweisung leicht erfolgen.

Nachdem der Baum gespeichert wurde, sollte folgendes angezeigt werden:


Nun klicken Sie auf das graue Symbol , um die Kategorie online zu schalten, da diese später benötigt wird. Das Symbol wird dann blau .

Die Erklärung der weiteren Symbole erhalten Sie später.

Nun müssen Sie einen Zwischenschritt tätigen. Bei der Erstellung von Templates gibt es die Möglichkeit, die Templates vorzukonfigurieren. Hierbei werden den Modulen des Templates Einstellungen (für jedes Modul separat; falls erforderlich) statisch zugewiesen, damit diese später nicht für jede einzelne Kategorie und jeden Artikel manuell eingetragen werden müssen. In diesem Beispiel wird das Modul Hauptnavigation verwendet. Diesem ist eine Kategorie - die online ist - zuzuweisen, aus der die Navigation erstellt wird. Da die Kategorie existieren und online sein muss ist es notwendig, dass zuerst diese Kategorie angelegt und dann das Template vorkonfiguriert wird. Nun wechseln Sie in den Bereich "Style › Templates" und klicken auf den Templatename des zu konfigurierenden Templates. In diesem Fall nennt es sich "Standard". Anschlie-ßend auf den Untermenüpunkt "Vorkonfiguration" klicken, es sollte dann nachstehendes angezeigt werden:


Im Drop-Down-Feld im Bereich "Hauptnavigation" können Sie die entsprechende Kategorie auswählen (muss online sein) und das Template speichern. Somit ist jedem Artikel und jeder Kategorie, die das Template "Standard" verwenden automatisch die eingestellte Kategorie vorgegeben, aus der die Navigation erstellt werden soll.

Da als erste Kategorie die Hauptnavigation angelegt wurde ist diese die Kategorie mit der ID 1. Um nachzuprüfen, welche ID die Kategorie hat, können Sie unter "Content › Artikel" links in der Auflistung der Kategorien mit der Maus über die Kategorie fahren. Dann erscheint ein kleines PopUp am Mauszeiger, das die ID der Kategorie anzeigt.


Damit der eben angelegten Kategorie nun auch ein Template zugewiesen wird, wechseln Sie erneut in den Bereich "Content › Kategorie" und konfigurieren die Kategorie. Dazu klicken Sie auf das Symbol  neben dem Kategoriename. Es erscheint eine Übersicht mit einem Drop-Down-Feld, in dem nun das passende Template ausgewählt wird (hier Standard).


Sobald Sie das Template ausgewählt haben, ändert sich die Ansicht und es werden die Einstellungen des Templates aufgezeigt.


Hier sollte bereits der Baum "Hauptnavigation" im Bereich Hauptnavigation eingestellt sein, da Sie dies über die Vorkonfiguration bereits eingestellt haben. Ist dies nicht der Fall, sollten Sie die Voreinstellung des gewählten Templates überprüfen. Speichern Sie dieses Formular abschließend. Nun ist der konfigurierten Kategorie das ausgewählte Template zugewiesen.

Nun fehlen noch die einzelnen Unterkategorien, also die eigentlichen Navigationspunkte. Diese werden mit einem Klick auf das Symbol  angelegt. Dieser Vorgang wird hier nicht ausführlich erklärt, da sich die Aufteilung jeder Website unterscheidet. Die Unterkategorien sollten die Template-Einstellungen (Standard) der Oberkategorie erben. Zusätzlich sollten alle angelegten Kategorien mit einem Klick auf das graue Symbol  online gestellt werden, da zu Beginn der Erstellung einer Website für gewöhnlich alle angelegten Kategorien verwendet werden. Kategorien die offline sind werden nicht von den Navigationsmodulen ausgelesen. Diese Einstellung kann aber jederzeit geändert werden.

Nach dem Anlegen aller Kategorien, sollte die Übersicht in etwa so aussehen:


Es ist nicht ausgeschlossen, dass diese Übersicht weniger Kategorien aufzeigt als die spätere Website, da sich eine Website nach der Erstellung ständig weiter entwickelt. Daher ist auch diese Übersicht nur beispielhaft.

Für die Unterkategorie "Kontakt" ist ein neues Template verfügbar, da hier ein Kontaktformular benötigt wird. Das neue Template ist unter "Style › Templates" neu mit diesen Einstellungen angelegt:


Unter dem Navigationspunkt "Vorkonfiguration" müssen erneut Einstellungen vorgenommen werden:


Tragen Sie anstatt "email@domain.tld" eine gültige E-Mail-Adresse ein. Bei "Mailer" wählen Sie den Wert mail aus, da dies bei PHP die Standardmethode zum Versand von E-Mails ist und daher funktionieren sollte.

Ist eine Kategorie angelegt, wird diese nicht sofort in der Navigation der Website angezeigt. Eine Kategorie muss dazu mehrere Voraussetzungen erfüllen:

  1. Kategorie muss online sein
  2. Kategorie muss mindestens einen Artikel beinhalten
  3. Dieser Artikel muss online sein
  4. Dieser Artikel muss Startartikel sein

Der Startartikel ist genau der Artikel einer Kategorie, der bei Klick auf den Navigationspunkt der Website aufgerufen wird. Wie ein Artikel mit diesen Eigenschaften erstellt wird, ist im nächsten Kapitel beschrieben.


Damit später nicht jeder Artikel einzeln konfiguriert werden muss, empfiehlt es sich unter "Content › Artikel" jede Kategorie auszuwählen (anzuklicken), dann auf "Kategorie konfigurieren" zu klicken - ggf. Einstellungen vorzunehmen - und das Formular zu speichern. Somit wird allen Artikeln, die in dieser Kategorie angelegt werden, automatisch das entsprechend eingestellte und konfigurierte Template zugewiesen. Dennoch kann jeder Artikel weiterhin individuell angepasst werden.

Artikel anlegen
Um einen Artikel anzulegen, wechseln Sie in den Bereich "Content › Artikel" klicken Sie auf die Kategorie, in der der Artikel erstellt werden soll.


Legen Sie nun einen neuen Artikel über den Link "Neuen Artikel erstellen" an. Nun sehen Sie die Artikeleigenschaften. Es werden hier nur die notwendigen Felder ausgefüllt, alle weiteren Felder kommen hier nicht zur Anwendung. Weitere Informationen hierzu können Sie im Contenido Handbuch für Redakteure (2005) ab S. 7 nachlesen.

Die Ansicht einer Kategorie gliedert sich in weitere Untermenüpunkte. "Übersicht" zeigt alle Artikel in dieser Kategorie. "Eigenschaften" bearbeitet die Artikeleigenschaften. "Konfiguration" bearbeitet das Template des Artikels (hier wird allen Artikeln automatisch das bereits definierte Template Standard zugewiesen). "Editor" dient zum Eingeben von Inhalten und "Vorschau" zur Live-Ansicht der Website.

Artikeleigenschaften
Hier werden beispielhaft anhand der Startseite folgende Felder ausgefüllt:


Titel: Startseite (frei wählbar, zur internen Wiedererkennung des Artikels)

Online: Angehakt, Artikel wird beim Speichern direkt veröffentlicht

Startartikel: Angehakt (automatisch), da dies der erste Artikel dieser Kategorie ist. Dieser Artikel wird also bei Aufruf des Navigationspunktes "Startseite" (Kategoriename) angezeigt.

Anschließend die Einstellungen mit dem grünen Button am Ende der Seite speichern.

Konfiguration
Im vorigen Kapitel wurde in allen Kategorien bereits über "Kategorie konfigurieren" das zugewiesene Template "Standard" mit den gegebenen Einstellungen bestätigt. Dieses wird nun für alle angelegten Artikel verwendet. Daher sind in diesem Untermenüpunkt keine Einstellungen vorzunehmen. Dennoch ist es möglich, für jeden Artikel die Einstellungen zu ändern.

Editor
Es gibt zwei Möglichkeiten Inhalt einzupflegen. Erstens das Insite-Editing und zweitens für die erweiterte Texteingabe den WYSIWYG-Editor (What-You-See-Is-What-You-Get). Das Insite-Editing bietet nur einfache Textbearbeitungsfunktionen. Text bearbeiten, aber nicht Farbe, Schriftart o.ä. ändern. Einzige Ausnahme ist die Textformatierung, also fett, kursiv und unterstrichen. Dem markierten Text können Sie durch Tastenkombinationen diese Werte zuweisen:

fett: Strg + B
kursiv: Strg + K
unterstrichen: Strg + U

Auf der folgenden Grafik ist das Insite-Editing zu sehen. Bei diesem Screenshot wurde der linke Frame über den Button  ausgeblendet, damit die gesamte Website auf dem Screenshot zu sehen ist.


Der WYSIWYG-Editor bietet sehr viel mehr Möglichkeiten. Dieser wird mit einem Klick auf den Button  aufgerufen.


Nun kann der Text frei formatiert werden. Auch Tabellen und Bilder, sowie Listen und Aufzählungen können eingebunden werden. Durch einen Klick auf den Button  wird ein weiteres Fenster (PopUp) geöffnet:


Wenn Sie auf den Button  klicken, wird die Dateiverwaltung aufgerufen, über die ein Bild ausgewählt oder auch nachträglich hochgeladen werden kann. Gleiches gilt für Links, falls intern auf einen anderen Artikel oder auf eine Datei verwiesen werden soll.
Weitere Funktionen werden hier nicht erläutert. Allerdings ist der Editor beinahe selbsterklärend und bietet eine Kurzbeschreibung, wenn Sie mit dem Mauszeiger kurz über einem Symbol oder Button verweilen. Ebenso erinnert der WYSIWYG-Editor stark an Microsoft® Word oder ähnliche Textprogramme.
Der WYSIWYG-Editor nennt sich tinyMCE und wird von der Firma Moxiecode entwickelt. Dieser Editor basiert auf JavaScript. Da sich einige PopUps durch den Editor öffnen, sollten Sie vorab unbedingt PopUp-Blocker abschalten.

Vorschau
Die Website kann hier wie für den späteren Benutzer/Betrachter der Website in der Live-Ansicht zu sehen. Der Inhalt kann hier nicht bearbeitet werden, dennoch bleibt der Backenduser im Contenido-Backend eingeloggt.

Anschließend werden alle Kategorien mit Artikeln gefüllt. Letztendlich sollte die Website nach diesem Schritt fertig gestellt sein.

Diskutieren Sie zu diesem Thema im Forum.