Open-Source-CMS Typolight

62 Extra: Website

ANWENDUNGEN

T ypolight (www.typolight.org, kostenlos)bietet eine Menge interessanter Funk-

tionen und darüber hinaus eine bediener-freundliche Oberfläche. Dies gilt auch fürdie Bereiche Design, Layout und Seiten-struktur. Im Gegensatz zu vielen anderenCMS, die dafür in der Regel Kenntnisse inHTML und CSS voraussetzen, kommtman mit Typolight dank der interaktivenUnterstützung auch als HTML- und CSS-Laie zu durchaus ansehnlichen Ergebnis-sen.

Zu den Highlights dieses Content-Ma-nagement-Systems zählt auf jeden Falldie Online-Update-Funktion. Das kenntman bisher allenfalls von Windows-Pro-grammen. Damit kann man die eigene Ty-polight-Installation mit einem Mausklickauf den jeweils aktuellsten Stand bringen,ohne die Projektseite besuchen zu müs-sen und umständliche Down- und Uplo-ad-Operationen durchführen zu müssen.Allerdings handelt es sich dabei um einenkostenpflichtigen Service.

Auch mit der benutzerfreundlichenOberfläche des Administrator-Bereichs(Backend) mit zahlreichen Web-2.0-Attributen kann Typolight punkten. SelbstCMS-Laien dürften damit auf Anhieb zu-rechtkommen. Abgerundet wird der positi-ve Eindruck in Sachen Usability auchdurch Hilfestellungen, die man auf derProjektseite in Form eines mehrsprachi-gen Forums, eines guten Tutorials und ei-nes Wikis findet.

Installation per SkriptDass sich die Entwickler stark auf eine ein-fache Bedienung fokussiert haben, machtsich auch bei der Installation bemerkbar.Diese läuft über ein Installationsskript, dasnur wenige Eingaben benötigt. Die norma-le Vorgehensweise bei einem Shared-Ho-sting-Paket läuft in etwa so ab: Man ent-packt das Skript-Archiv nach dem Downlo-ad auf dem lokalen PC und überträgt dieFiles in ein Verzeichnis auf dem Webspa-ce. Dann startet man die Setup-Routinemit dem Aufruf des Skripts „install.php“.

Einige Voraussetzungen müssen zu-nächst natürlich erfüllt sein. So ist zum

polight“ gesetzt und muss als Erstes ge -ändert werden. Damit Typolight Daten ver -schlüsselt speichern kann, müssen Sie imnächsten Schritt einen Encryption-Key er -stellen. Einmal verschlüsselte Dateienkönnen nur mit diesem Key wieder ent -schlüsselt werden. Wenn Sie das Feld leerlassen, wird automatisch ein zufälligerSchlüssel generiert. Enthält Ihre Daten -bank bereits verschlüsselte Daten, kön -nen Sie den dazu passenden Key hier ein -geben. Schließlich müssen noch die Zu -gangsparameter für die MySQL-Daten -bank hinterlegt werden.

Darüber hinaus haben Sie sich noch zuentscheiden, ob die mitgelieferte Beispiel-Site (Bild A) eingerichtet werden soll odernicht. Bei Typolight steht eine nahezukomplette Demo-Site namens Music Aca -demy zur Verfügung. Gerade für den An-fänger ist es von Vorteil, wenn er sofortnach der Installation erste Erfahrungen

Website mit TypolightTypolight ist kein Typo-3-Abkömmling, sondern ein komplett neu in PHP 5 programmiertes CMS mit vielenFunktionen und einer hervorragenden Bedienerführung.

Beispiel die Version PHP 5 erforderlich.Diese Option dürfte zwar bei den meistenProvidern verfügbar sein, die Frage ist je-doch, wie. Wo man den PHP-Interpreterglobal oder auf Verzeichnisse bezogenumstellen kann, gibt es keine Probleme.Falls die Steuerung jedoch über die Datei-Extension (PHP5) wie zum Beispiel bei1&1 erfolgt, hat man schlechte Karten. DieVerfügbarkeit einer MySQL-Datenbank abVersion 4.1 dürfte dagegen keine Schwie-rigkeiten bereiten.

Damit das Live-Update korrekt funktio-niert, muss Typolight über Schreibrechteverfügen, um die zu aktualisierenden Filesauch überschreiben zu können. Das soll-te man daher nach der Übertragung derDateien auf den Webspace in jedem Fallprüfen.

Die Setup-Routine verlangt als Einga-beparameter ein Install-Passwort. Das istbei einer jungfräulichen Installation auf „ty-

Demosite: Bei der Installation können Sie die Demo-Website Music Academy mit installieren (Bild A)

über [Alt]-Tastenkombinationen. EineÜbersicht über die verfügbaren Tastatur-kürzel wird Ihnen auf der Backend-Start-seite angezeigt. Eine Vorschau auf dieaktuelle Site ist jederzeit über den Button„Frontend Vorschau“ in der Kopfleiste desBackend-Screens möglich.

Haben Sie sich mit dem Layout des Bak-kends einigermaßen vertraut gemacht,können Sie mit dem Entwurf Ihrer Site be-ginnen. Dazu müssen Sie sich mit den Mo-dulen näher auseinandersetzen, die Ihnenim Bereich „Layout“ der Navigation ange-boten werden.

SeitenlayoutZuerst braucht Ihre Site eine Struktur, dieSie über den entsprechenden Menüpunktaufbauen können. Es handelt sich dabeium einen Baum, der später einmal durchdas Navigationsmenü dem Besucher derWebsite präsentiert wird. Haben Sie die-sen Schritt abgeschlossen, müssen Siesich Gedanken darüber machen, wie dieSite später einmal aussehen soll. Dazubenötigen Sie Module und ein Seitenlay-out.

Module sind bei Typolight Funktionen,

die für die Darstellung eines bestimmtenBereichs im Frontend zuständig sind. Soist zum Beispiel ein Modul für die Darstel -lung des Navigationsmenüs zuständigund ein anderes Modul für die Präsentati -on von Bildern. Die verfügbaren Modulekönnen Sie sich über den entsprechendenMenüpunkt anzeigen lassen.

Einen Spezialfall stellt das Artikelmoduldar. Es steht immer zur Verfügung undmuss nicht explizit angelegt werden. An -ders als die anderen Module hat das Arti-kelmodul nicht immer den gleichen Inhalt,sondern zeigt die Artikel der jeweils aufge -rufenen Seite an.

Bleibt noch die Aufgabe, zu definieren,wo auf der Seite welches Modul in Aktiontreten soll. Die Basis dafür bildet eineTemplate-Datei in Form eines HTML-Do-kuments, mit dem Sie jedoch nicht direktin Berührung kommen. Sie legen die Sei -tenstruktur ebenfalls über ein interaktivesFormular fest, das Sie über die Menü-punkte „Seitenlayout“ und „Neues Layout“aufrufen. Auch dieses Formular ist wiedersehr umfangreich und erfordert einigenScroll-Aufwand. Obligatorisch ist die Ver -gabe eines eindeutigen Namens. Danachdefinieren Sie eine Standard-Vorlage IhrerWahl. Es handelt sich dabei um das er -wähnte HTML-Dokument. Wenn Sie keinebesonders ausgefallenen Layout-Vorstel -lungen realisieren wollen, können Sie mitder Standard-Vorlage namens „fe_page“arbeiten. Natürlich basiert auch das Lay -out bei Typolight auf der klassischen Kom-bination von Template- und CSS-Dateien.Das CMS bietet jedoch einen CSS-Fra -mework-Builder, der automatisch einbrowserübergreifendes Grundgerüst auseinem Seitenlayout erstellt, also eine Auf -teilung in Kopfzeile, Fußzeile und Spalten.Sie müssen lediglich festlegen, wie vieleSpalten das Layout haben und welche

63Extra: Website

mit dem CMS in einem fertigen Webauftrittmachen kann.

Layout und StrukturNach der erfolgreichen Installation solltenSie sich zuerst mit dem Aufbau und Lay-out des Backends vertraut machen. Sieerreichen das Backend entweder per Linkdirekt aus der letzten Seite der Setup-Routine oder über das Unterverzeichnis„typolight“, also zum Beispiel „www.mei-ne-domain.de/installationsverzeichnis/typolight“.

Die Anmeldung als Administrator ist üb-rigens mit einem Zeitverzögerungsme-chanismus gegen Hacker-Attacken ge-schützt. Wird mehr als dreimal hinterein-ander ein falsches Passwort eingegeben,wird das Benutzerkonto automatisch fürfünf Minuten gesperrt. Auf diese Weisewird verhindert, dass ein Hacker eine gro-ße Anzahl Passwörter nacheinander aus-probiert, bis er das richtige Passwort ge-funden hat.

Aufgebaut ist der Administrations-bereich durchgängig so, dass sich auf derlinken Seite die Navigation befindet, überdie die einzelnen Module aufgerufen wer-den (Bild B). Welche Module dort angezeigtwerden, hängt von der Vergabe der ent-sprechenden Rechte ab, wobei der Adminnatürlich Zugriff auf alle Ressourcen hat.Was andere Mitarbeiter oder Redakteure,die mit Typolight arbeiten, zu sehen be-kommen, legen Sie als Admin individuellüber die Benutzerverwaltung fest.

Auf der rechten Seite befindet sich dereigentlicheArbeitsbereich. Hier werden je-weils die Listen oder Formulare angezeigt,die das aufgerufene Modul benötigt. Siekönnen bestimmte Grundfunktionen imBackend wie zum Beispiel das Speichernnicht nur über Mausklicks auf entspre-chende Buttons auslösen, sondern auch

Auf CDDas komplette Installationsarchiv von Typolightund einige interessante Zusatzmodule finden Sieauf Heft-CD in der Rubrik „Anwendungen, CMS“.

Weitere Infosn www.typolight.org

Die Projektseite des CMS Typolight

Kompakt Inhaltn Installation per Skript S.62n Layout und Struktur S.63n Seitenlayout S.63n Neues Seitenlayout S.64n Stylesheets auswählen S.64n Eingebundene Module S.65n CSS-Stile bearbeiten S.66n Seitenstruktur S.66n Inhalte eingeben S.67n Benutzerverwaltung S.67

Das CMS Typolight zeichnet sich durch einen soli-den Leistungsumfang und einfache Bedienung aus.

In dem Workshop erfahren Sie Schritt für Schritt,wie Sie mit dem CMS eigene Templates für IhrenWebauftritt definieren.

Steckbrief: Website mit Typolight

Backend: Links befindet sich die Navigationsleiste mit den zur Verfügung stehenden Modulen (Bild B)

s

Open-Source-CMS Typolight ANWENDUNGEN

Module in diesen Spalten angezeigt wer-den sollen. Danach können Sie das auto-matisch erstellte Layout mit Hilfe von CSSformatieren (Bild C).

Wenn Sie das Standardlayout anpas-sen wollen, wählen Sie den Punkt „DefaultLayout“ zum Bearbeiten aus. Analog kön-nen Sie auch mit den anderen vorhandenLayouts verfahren. Wenn Sie ein Layoutneu erstellen wollen, wählen Sie den Link„Neues Layout“ oberhalb der Liste.

Neues SeitenlayoutAuf der folgenden Seite erscheint nun dasFormular, über das Sie interaktiv das neueDesign entwerfen können. Im ersten Feldmüssen Sie einen Namen für das Layoutvergeben. Das Feld ist obligatorisch undder Name muss eindeutig sein. ViaCheckbox können Sie das Design, an demSie gerade arbeiten, als Standard-Layoutdefinieren.

Sie müssen einer Seite, die Sie mit Ty-polight veröffentlichen wollen, grundsätz-lich ein Layout zuordnen. Wenn Sie sichdiesen Schritt beim Erfassen der Seite er-sparen wollen, wird ihr stets das Standard-Layout zugeordnet. Ein gewisses Maß anVorsicht ist hierbei allerdings geboten. Eskann nämlich logischerweise immer nurein Layout als Standard definiert werden.Wenn Sie die Checkbox aktivieren, wirdsie bei dem bisherigen Standard-Layoutautomatisch deaktiviert. Es erscheint alsokeine Meldung, die Sie darauf hinweist,dass schon ein Standard definiert ist. Die-ser Automatismus könnte unter Umstän-den zu ungewollten Ergebnissen in derFrontend-Darstellung führen.

Im Feld „Layout-Vorlage“ können Sieüber ein Pulldown-Menü eine Template-Datei als Vorlage auswählen. Bei einerStandard-Installation steht Ihnen hier nurdas schon erwähnte Template „fe_file“ zurAuswahl. Als Nächstes taucht etwas un-vermittelt der Begriff „Javascript Mootools“auf. Im Prinzip geht es darum, dass Sieüber diese Option typische Web-2.0-Gim-

micks in Ihre Website einbinden.Mootools ist ein Javascript-Tool, das

wegen seines Akkordeon-Effekts bekanntgeworden ist. Dieser Effekt ist in Typolightals Content-Element integriert. Er benötigtallerdings ein Javascript, das ihn initiali-siert. Drei solcher Javascripts sind in Formvon Templates standardmäßig vorhandenund können hier ausgewählt werden. DieVorlage „moo_default“ initialisiert das Ak-kordeon so, wie es standardmäßig vor-eingestellt ist. Die Vorlage „moo_close_all“ ermöglicht es, alle Knoten zu schlie-ßen, und die Vorlage „moo_modify_fore-ground“ ändert zusätzlich die Schriftfarbeder Überschriften, sofern diese im Style-Attribut oder per Stylesheet festgelegtwurden.

Wenn dies für Sie alles böhmische Dör-fer sind, können Sie diesen Punkt einfachüberspringen. Auf die Funktionalität IhresLayouts hat das keine Auswirkungen.Wenn Sie mehr über Mootools erfahren

wollen, sehen Sie sich einfach die Projekt -seite unter www.mootools.net an. Dort gibt es zahlreicheDemos und Beispiele.

Stylesheets auswählenAls Nächstes müssen Sie noch eine Do-cumenttype-Definition auswählen. ZurAuswahl stehen „XHTML Strict“ und„XHTML Transitional“. Im folgenden Ab-schnitt erscheint eine Liste von CSS-Sty -lesheets, die Sie per Checkbox aktivierenkönnen. Die Liste enthält alle CSS-Files,die sich im Root-Verzeichnis Ihrer Typo -light-Installation befinden. Bei einer Stan-dard-Installation mit aktivierter Music-Academy-Beispiel-Site sind dies „basic“,„music_academy“ und „print“. Über dasModul „Stylesheet“ können Sie jede dieserCSS-Dateien bearbeiten oder bei Bedarfjederzeit auch neue erstellen.Im nächsten Feld definieren Sie bei Bedarfzusätzliche Head-Tags, die am Ende desSeitenkopfes eingefügt werden. Das istzum Beispiel dann von Bedeutung, wennSie mit Google-Webmaster-Tools oderGoogle-Analytics arbeiten wollen. In die -sen Fällen müssen Sie zum Beispiel je -weils ein spezifisches Tag zur Aktivierungdieser Tools eingeben.

Einer der für das Aussehen Ihrer Web-site entscheidenden Punkte folgt jetzt. Eswerden Ihnen vier Symbole angezeigt,über die Sie die grundsätzliche EinteilungIhrer Seite festlegen. Folgende Varianten

64 Extra: Website

Open-Source-CMS TypolightANWENDUNGEN

Stildefinition: Ein interaktiver CSS-Editor unterstützt Sie beim Entwerfen eines Designs (Bild C)

Module: Hier legen Sie fest, welche Komponenten an welchen Stellen auf der Seite aktiv sein sollen (Bild D)

stehen zur Auswahl: Einspaltig, zwei Spal-ten mit der Hauptspalte auf der rechtenSeite, zwei Spalten mit der Hauptspalteauf der linken Seite und drei Spalten mitder Hauptspalte in der Mitte. Die ge-wünschte Einteilung wählen Sie aus, in-dem Sie den entsprechenden Radio-But-ton aktivieren.

Die folgenden Optionen variieren in Ab-hängigkeit vom gewählten Grundlayout.Haben Sie ein zweispaltiges Grundlayoutgewählt, müssen Sie im folgenden Felddie Breite der linken beziehungsweiserechten Randspalte definieren. Bei einemdreispaltigen Grundlayout müssen Sie ei-ne Breite für beide Randspalten bestim-men.

Anschließend legen Sie fest, ob Ihr Lay-out mit einer Kopf- und Fußleiste versehenwerden soll. Wenn Sie dies tun, müssenSie auch noch deren Höhe definieren.

Eingebundene ModuleMit dem Modulassistenten können Sienun Module den einzelnen Layoutberei-chen zuordnen (Bild D). Zu beachten ist,dass Änderung an Layoutbereichen zu-erst gespeichert werden müssen, bevordie entsprechenden Spalten im Modulas-sistenten verfügbar sind. Sie können ei-nem Bereich auch mehrere Module zuord-nen. Diese werden dann innerhalb jederSpalte der Reihe nach dargestellt. WennSie also zum Beispiel in der linken Spalteoben die Navigation platzieren wollen unddarunter ein Google-Adsense-Feld, defi-nieren Sie für die linke Spalte diese beidenModule und bringen sie in die gewünsch-te Reihenfolge. Der Modulassistent ver-wendet Javascript, funktioniert aber eben-so ohne. Wenn Sie allerdings auf Java-script-Unterstützung verzichten, solltenSie Ihre Änderungen an eingebundenenModulen immer zuerst speichern, bevorSie auf eines der Navigati-onssymbole klicken. Dabeikönnen Sie auch mit denverfügbaren Tastaturkürzelnarbeiten und auf diese Wei-se Ihre Aktionen etwas be-schleunigen (Bild F).

Wenn Sie also an dem ge-wählten Beispiel-Layout mitKopfleiste, linker Spalte undrechter Hauptspalteweiterarbeiten wollen, defi-nieren Sie mit dem Modulas-sistenten via Plus-Symbolzwei weitere Bereiche. Nurzwei deshalb, weil das Arti-kelmodul immer zur Verfü-

gung steht und nicht extra vorher angelegtwerden muss. Eine weitere Besonderheitdieses Moduls ist, dass es in verschiede-nen Spalten unterschiedliche Artikel ein-fügt. Binden Sie dieses Modul daher in je-der Spalte ein, die später Artikel darstellensoll.

Haben Sie also zwei weitere Bereicheangelegt, geht es an die Zuordnung vonModulen zu den einzelnen Bereichen. Da-bei sind in der ersten Spalte die Moduleangeordnet und in der weiteren die Berei-che. Um das Beispiel-Layout zu vervoll-ständigen, wählen Sie in der ersten Spal-te per Pulldown-Menü das Modul „Image“aus und in der zweiten Spalte den Bereich.Wählen Sie hier die Spalte „header“. DieAktion bewirkt, dass im Kopfbereich der

Seite später das Logo erscheint. Die ei -gentliche Einbindung der Grafik oder derBilddatei erfolgt im Modul „Image“ (Bild E).Vom Typ her handelt es sich dabei um dieVariante „Eigener HTML-Code“ und indem Modul steht nur die Zeile mit der Ver -linkung zum Logo-Bild:1 <img src="tl_files/logo.png"

id="top_image" width="400"height="231" alt=

"Mein Logo" />Das gewählte Beispiel ist zugegeben sim-pel, soll jedoch in erster Linie das Zusam-menspiel von Layout und Modulen de -monstrieren.Weiter geht es mit der Zuordnung von Mo-dulen zu Anzeigenbereichen. Für die linkeSpalte wählen Sie als vordefiniertes Modul„Navigation“ und für die Hauptspalte dasModul „Artikel“. Damit ist die Definition Ih -res neuen Layouts weitgehend abge -schlossen. Was noch zu tun ist, ist dieFestlegung, ob das Layout statisch oder li -quid sein soll.

Während das statische Design festeBreitenangaben in Pixeln enthält und imBrowserfenster zum Beispiel zentriertausgerichtet werden kann, passt das Li -quid-Design seine Breite an die Größe desaktuellen Browserfensters an. Alle Anga -ben in einem Liquid-Design sind daher inProzent.

Für das Beispiel-Layout wählen wir einstatisches, zentriertes Layout mit einer fe -sten Breite. Die entsprechenden Maß-

65Extra: Website

Open-Source-CMS Typolight ANWENDUNGEN

Tastaturkürzel: Indem Sie Tastaturkürzel verwenden, beschleunigenSie die Arbeit im Backend (Bild F)

Module bearbeiten: Einen Editor gibt Ihnen die Möglichkeit, eigene Module zu entwerfen (Bild E)

s

pen aufgeteilt, die Sie je nach Bedarf öff-nen oder schließen.

Die Formatdefinition „h1“ für Hauptüber-schriften verwendet zum Beispiel dieGruppen „Margin“, „Padding“ und Ausrich-tung“ sowie die Gruppe „Schrift“. Falls Siespezielle CSS-Befehle benutzen wollen,können Sie diese als CSS-Code am Endeeingeben.

Auf diese Weise bearbeiten Sie sukzes-sive alle Stile, bis die Ausgabe Ihren Wün-schen entspricht. Wollen Sie eine zusätz-liche Formatdefinition erstellen, wählenSie im oberen Bereich der Seite den Link„Neue Formatdefinition“.

SeitenstrukturWenn Sie die Vorarbeiten in Sachen De-sign abgeschlossen haben, können Siesich um den Inhalt Ihrer Site kümmern. DieBasis dafür bietet das Backend-Modul„Seitenstruktur“ (Bild H). Darin definierenSie die Seiten Ihres Webauftritts.

Die einzelnen Seitenkönnen in einer hierar-chischen Beziehung zu-einander stehen und ei-ne übergeordnete Seitekann bestimmte Ein-stellungen an die je-weils untergeordnetenSeite vererben, zumBeispiel das zugeord-nete Seitenlayout oderdie Cache-Verfallszeit.

Mit einem Klick auf„Neue Seite“ beginnenSie mit dem Aufbau Ih-

rer Site. Im folgenden Schritt legen Siefest, in welcher Hierarchie-Ebene dieseSeite platziert werden soll. Als Nächsteserscheint dann ein Formular, in dem Siedie Parameter für die Seite festlegen. Ob-ligatorisch ist ein Seitentitel. Dieser bildetspäter den Text für die Frontend-Navigati -on und sollte nicht länger als 65 Zeichensein. Ein Seitenalias ist zwar kein Muss,sollte aber im Hinblick auf suchmaschi -nenfreundliche URLs, die Typolight unter -stützt, genutzt werden.

Wichtig und obligatorisch ist dieDefinition des Seitentyps, den Sie über einPulldown-Menü auswählen. Hierfür ste -hen Ihnen die folgenden Varianten zurAuswahl:n Eine reguläre Seite verhält sich wie eine

statische HTML-Seite und dient dazu,Artikel, Inhalte und Module darzustellen.

n Eine Seite vom Typ „Weiterleitung“ zeigtkeine Inhalte an, sondern leitet einenBesucher auf eine andere Seite weiter.Erfolgt diese Weiterleitung zu einer ex-ternen URL, gelangt der Besucher aufeine Internetseite, die nicht über IhreDomain aufgerufen werden kann.

n Eine Weiterleitung zu einer externenURL ist vergleichbar mit einem direktenLink auf eine externe URL.

Um mehrere Webseiten innerhalb desSeitenbaums zu betreiben, müssen Siefür jede Webseite eine Startseite vom TypStartpunkt einer neuen Webseite anlegen.Diesen Startseiten können Sie eine Spra -che und einen optionalen Domain-Namenzuweisen, damit Besucher automatisch zuder Startseite weitergeleitet werden, diemit der aufgerufenen Domain oder der im

Open-Source-CMS Typolight

66 Extra: Website

ANWENDUNGEN

und Positionsangaben müssen abschlie-ßend noch definiert werden.

Wenn Sie Ihre Arbeit überprüfen wollen,klicken Sie einfach auf den Link „FrontendVorschau“ ganz oben auf der Seite. In ei-nem neuen Browserfenster können Siesich einen Eindruck davon verschaffen,wie Ihre Seite später einmal aussehenwird. Vermutlich wird der Anblick IhrenVorstellungen nicht ganz entsprechen, danoch ein entscheidender Part Ihrer Arbeitfehlt, nämlich das Festlegen der CSS-Sti-le.

Wenn Sie übrigens einmal nicht weiter-kommen, weil Ihnen ein Begriff unklar ist,klicken Sie einfach auf das Icon, das einkleines Verkehrszeichen darstellt. Siekönnen damit einen Help-Wizard aufru-fen, der Ihnen kontextbezogene Hilfetexteanzeigt (Bild G).

CSS-Stile bearbeitenIn den interaktiven Editor zur Bearbeitungder CSS-Files gelangen Sie über das Mo-dul „Stylesheet“. Auch hier erscheint alsErstes wieder eine alphabetisch geordne-te Liste aller vorhandenen CSS-Files.Wenn Sie die Music-Academy-Beispiel-seite mit installiert haben, sollten Sie ein-fach dieses CSS-File aufrufen, um sich einBild vom Aufbau und von der Arbeitsweisedes in Typolight integrierten CSS-Editorszu machen.

Bei diesem Editor brauchen Sie nämlichkeine CSS-Anweisungen zu kodieren,sondern auch hier werden die einzelnenStile über ein interaktives Formular defi-niert. Nach dem Aufruf des CSS-Files er-scheint der Inhalt des Files im Browserfen-ster.

Wollen Sie eine bestimmte Stildefinitionbearbeiten, klicken Sie einfach auf dasIcon „Bearbeiten“, das durch einen Blei-stift symbolisiert wird. Daraufhin erscheintdas interaktive Formular zur Bearbeitungdieses Stils. Es ist in verschiedene Grup-

Seitenstruktur: Hier legen Sie fest, wie Ihre Website aufgebaut ist (Bild H)

Hilfe: An kritischen Stellen können Sie über ein Icon den Help-Wizardaufrufen, der Ihnen Informationen zum Thema anzeigt (Bild G)

Browser gespeicherten Sprache überein-stimmt.

Neben diesen Kernparametern könnenSie einer Seite noch zahlreiche weitere At-tribute mit auf den Weg geben. Dazu zäh-len die Definition einer Sprache, eineKurzbeschreibung sowie ein Layout, dasvom Standard abweicht. Weiterhin könnenSie bestimmen, ob die Seite im Menü er-scheinen soll.

Schließlich legen Sie noch fest, ob dieSeite überhaupt veröffentlicht werden sollund gegebenenfalls über welchen Zeit-raum. Nach Abschluss der Operation er-scheint die neue Seite in der Übersicht.Ein Symbol am Beginn der Zeile zeigtIhnen den Status der Seite an.

Inhalte eingebenWenn die Struktur und das Layout stehen,können Sie mit dem Eingeben von Inhal-ten beginnen. Für diese Aktionen steht derBereich „Inhalt“ in der Backend-Navigati-on zur Verfügung. Um einen neuen Artikelinnerhalb der vorgegebenen Seitenstruk-tur anzulegen, klicken Sie auf „Artikel“ unddann auf „Neuer Artikel“. Auf der nächstenSeite müssen Sie den neuen Artikel ir-gendwo in die Struktur einbauen. Das er-ledigen Sie über die Pfeil-Symbole amZeilenende. Dann können Sie in den ei-gentlichen Erfassungsprozess einsteigen,der in zwei Schritte unterteilt ist. Zuerstmüssen Sie in einem Formular die Artikel-Parameter definieren. Dazu gehören einTitel, eine Autorenangabe sowie der Be-reich auf der Seite, in dem der Ar-tikel angezeigt werden soll. Wich-tig ist die Checkbox „Veröffent-licht“. Erst wenn diese aktiviert ist,erscheint der Artikel auch imBrowser eines Besuchers.

Den eigentlichen Inhalt gebenSie im zweiten Schritt ein. Dazunutzen Sie einfach die Option„Speichern und bearbeiten“ amEnde des Formulars. Auf der fol-genden Seite wählen Sie die Opti-on „Neues Element“.

Damit kommen Sie zur eigentli-chen Erfassung, in deren Mittel-punkt natürlich ein Wysiwyg-Editorsteht. Mit dessen Hilfe können Sieden Artikel verfassen. Vorher müs-sen Sie jedoch noch den Typ desElements via Pulldown-Liste aus-wählen. Davon hängt es ab, wel-che weiteren Optionen Ihnen an-gezeigt werden. Ein häufig ver-wendeter Typ wird sicher „Text“sein. Optional können Sie hier

noch eine Headline eingeben und derenStil definieren. Eine weitere Option außer-halb des eigentlichen Wysiwyg-Editors istdie Integration von Bildern (Bild I).

Neben der Option „Artikel“ gibt es nochdas Modul „Nachrichten“. Es dient dazu,Nachrichtenbeiträge zu verschiedenenThemen zu verfassen, die dann mit einemNachrichtenmodul auf der Webseite dar-gestellt werden. Die Funktionsweise äh-nelt der des Artikelmoduls, nur werdenNachrichtenbeiträge nicht anhand derSeitenstruktur, sondern in Form von Nach-richtenarchiven organisiert. Das Moduleignet sich also gut für Teaser-Sammlun-gen, von denen aus dann auf die komplet-ten Artikel verwiesen wird.

BenutzerverwaltungBleibt noch, einen Blick auf die Benutzer-verwaltung zu werfen (Bild J). Hier unter-scheidet das CMS zwischen Frontend- undBackend-Benutzern, also den Besuchernder Website einerseits und den Moderato-ren und Redakteuren andererseits. FürErstere stehen die Module „Mitglieder“ und„Mitgliedergruppen“ und für Letztere dieModule „Benutzer“ und „Benutzergrup-pen“ im Administrationsbereich zur Verfü-gung. Eine Anmeldung für Frontend-Be-nutzer müssen Sie als Administrator aus-drücklich vorsehen, etwa dann, wenn Siepasswortgeschützte Bereiche auf IhrerSite einrichten oder Newsletter versendenwollen. Wichtig für die Arbeit im Team istdie Rechtevergabe im Backend-Bereich.

Mit diesem Thema müssen Sie sich je-doch nur dann befassen, wenn Sie die mitTypolight erstellte Website nicht aus -schließlich selbst pflegen. Ein typischesSzenario dafür wäre die Einrichtung einerVereins-Homepage. Da kann es vorkom-men, dass Sie für die Vereinsmitglieder ei -nen geschlossenen Bereich einführenwollen und mehrere Vereinsmitglieder ander Homepage mitarbeiten wollen. n

Max Boldsonderheft@com-magazin.de

Open-Source-CMS Typolight

67Extra: Website

ANWENDUNGEN

Benutzerverwaltung: Sie können mit Typolightpasswortgeschützte Bereiche einrichten (Bild J)

Inhalte: Neben reinem Text lassen sich auch Illustrationen als Inhalts-elemente einfügen (Bild I)