Mit TYPOlight Webseiten erfolgreich gestalten: Konzeption, Umsetzung, Beispielprojekte

Thomas Weitzel Mit tYPOlight Webseiten erfOlgreich gestalten Konzeption, Umsetzung, Beispielprojekte ADDISON-WESLEY E...

Author: Thomas Weitzel

19 downloads 622 Views 17MB Size Report

This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Report copyright / DMCA form

DOWNLOAD PDF

Thomas Weitzel

Mit tYPOlight Webseiten erfOlgreich gestalten Konzeption, Umsetzung, Beispielprojekte

ADDISON-WESLEY Ein Imprint von Pearson Education München • Boston • San Francisco • Harlow, England Don Mills, Ontario • Sydney • Mexico City Madrid • Amsterdam

Bibliografische Information Der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar. Die Informationen in diesem Produkt werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar. Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig. Fast alle Hardware- und Softwarebezeichnungen und weitere Stichworte und sonstige Angaben, die in diesem Buch verwendet werden, sind als eingetragene Marken geschützt. Da es nicht möglich ist, in allen Fällen zeitnah zu ermitteln, ob ein Markenschutz besteht, wird das -Symbol in diesem Buch nicht verwendet.

®

Umwelthinweis: Dieses Buch wurde auf chlor- und säurefreiem PEFC-zertifiziertem Papier gedruckt. Um Rohstoffe zu sparen, haben wir auf Folienverpackung verzichtet. Alle Rechte vorbehalten. Kein Teil des Buches darf ohne Erlaubnis der Pearson Education Inc. in fotomechanischer oder elektronischer Form reproduziert oder gespeichert werden.

10   9   8   7   6   5   4   3   2   1 12   11   10

ISBN 978-3-8273-2892-2

© 2010 Addison-Wesley Verlag, ein Imprint der PEARSON EDUCATION DEUTSCHLAND GmbH, Martin-Kollar-Str. 10-12, 81829 München/Germany Alle Rechte vorbehalten Lektorat: Boris Karnikowski, [email protected] Korrektorat: Brigitte Hamerski, Willich Fachlektorat: Angie Radtke, www.der-auftritt.de Herstellung: Claudia Bäurle, [email protected] Satz: Ulrich Borstelmann, Dortmund (www.borstelmann.de) Einbandgestaltung: Marco Lindenbeck, webwo GmbH, [email protected] Druck und Verarbeitung: Firmengruppe APPL, aprinta-druck, Wemding Printed in Germany

Inhaltsverzeichnis Einleitung Ziele dieses Buches Was können Sie von diesem Buch erwarten? Und nach dem Buch?

Über mich Kapitel 1

Kapitel 2

7

Konzeption und Planung der Website 1.1 1.1.1 1.1.2 1.1.3 1.1.4 1.1.5 1.2 1.2.1 1.2.2 1.3 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.3.10

Grundüberlegungen Anforderungen an eine Website Umfang einer Website Zielgruppen Prozess Prozessablauf – Entscheidungskompetenzen Methoden der Konzeption und Planung Skizzen Moodboards Wireframes Was sind Wireframes? Welche Ziele haben Wireframes? Skizzen Karten/Haftetiketten Digitale Vorlagen Programme & Websites für die Erstellung von Wireframes Mockingbird Balsamiq Pencil Schlussfolgerungen

Hilfstools bei der Webentwicklung 2.1 2.2 2.2.1 2.2.2 2.2.3

1 2 3 5

Web Developers Toolbar Firebug für Firefox-Browser Seitenelemente untersuchen CSS-Definitionen in Echtzeit bearbeiten Ladezeiten ermitteln und optimieren

11 12 12 13 13 13 14 14 14 16 20 20 20 21 21 22 23 24 24 25 25 27 28 32 33 33 34

IV

Inhaltsverzeichnis

2.3 2.3.1 2.3.2 2.3.3 2.3.4 2.3.5 2.3.6 2.3.7 2.3.8 2.3.9 2.3.10 2.3.11

Kapitel 3

Das CSS-Framework von TYPOlight 3.1 3.1.1 3.1.2 3.1.3 3.1.4

Kapitel 4

41 43 43 45 46 47

51 Das Modul Navigationsmenü 53 Anwendungsbeispiele für Navigationen 54 Beispiel für eine horizontale Navigation (eine Ebene) 54 Beispiel für eine vertikale Navigation (eine Ebene) 60 Beispiel für eine Kombination von horizontaler und vertikaler Navigation 64

Menüs mit Spritegrafiken erstellen 5.1 5.2 5.2.1 5.2.2 5.3 5.3.1

Kapitel 6

CSS-Dokumente bearbeiten Über den integrierten CSS-Editor im TYPOlight-Backend Externe CSS-Dokumente in TYPOlight integrieren Externe CSS-Dateien in die Seitenvorlage einbinden Kombination der Erweiterung CssEditor und Firebug

34 35 35 36 36 36 37 38 38 38 39 39

Navigationen in TYPOlight erstellen 4.1 4.2 4.2.1 4.2.2 4.2.3

Kapitel 5

Weitere nützliche Helfer CacheStatus Quick Locale Switcher Palette Grabber MeasureIt HTML Validator GridFox 960 Gridder Fireshot Copy Plain Text ColorZilla HTML Help

Vorarbeiten – Erstellen der Menügrafiken Ein Bild pro Menüpunkt Übersicht der Seitenstruktur CSS-Definitionen Ein Bild für alle Menüpunkte CSS-Definitionen

Unterschiedliche Headerbilder pro Seite anzeigen 6.1 6.2

Mit CSS-Definitionen Mit Insert-Tags

71 72 73 73 74 76 77 81 82 84

Inhaltsverzeichnis

Kapitel 7

Aufbau einer Website mit TYPOlight 7.1 7.2 7.3 7.4 7.5 7.6 7.7 7.7.1 7.7.2 7.7.3 7.8 7.9 7.10 7.11 7.11.1 7.11.2 7.11.3 7.11.4 7.11.5 7.11.6 7.11.7 7.11.8 7.11.9 7.12 7.12.1 7.13 7.14 7.14.1 7.14.2 7.14.3 7.14.4 7.14.5 7.15

Kapitel 8

Schritt-für-Schritt-Umsetzung der Website Aufbau der Seitenstruktur Seitenlayout anlegen Seitenlayouts der Seitenstruktur zuweisen Erstellen der CSS-Dateien CSS-Dateien ins Seitenlayout einbinden Module erstellen Modul für die Hauptnavigation anlegen Modul für die Unternavigation anlegen Modul für Zufallsbilder erstellen Module in das Seitenlayout einbinden Ein Modul für die Fußzeile erstellen Artikel anlegen Inhaltselemente in die Artikel einfügen Seite Portfolio mit Inhalten füllen Inhaltselemente werden nebeneinander positioniert Bildgalerie für einzelne Portfolioseiten einrichten Verzeichnisse/Verzeichnisstruktur vorbereiten Bilder vorbereiten Grafiken und Texte des MooTools-Skriptes Mediabox anpassen Visuelles Feintuning der Bildergalerie Schlagschatten den Vorschaubildern hinzufügen Meta-Datei für Bildergalerie verwenden Ein Kontaktformular erstellen Formularfunktionen erweitern Reflexionen Besonderheiten der Fotografen-Website Transparente PNG-Grafiken auch im Internet Explorer 6 Dynamische Schriftersetzung durch Image Replacement-Technik erstellen Image Replacement-Technik Cufón in TYPOlight einbinden Stapellauf oder: Das wäre auch noch schön … Die Erweiterung Slideshow2 in TYPOlight verwenden Ein Blick auf die CSS-Definitionen

Arbeiten mit Rastern (Grids) 8.1 8.2 8.3 8.3.1 8.3.2 8.3.3

Aufbau und Konzept des Rastersystems Seitenstruktur anlegen Module für die Website erstellen Das Modul Zufallsbild einrichten Modul für die Kopfzeile erstellen Modul für die Fußzeile erstellen

V

87 92 94 102 104 106 107 109 109 110 111 112 113 116 119 123 127 130 130 131 136 138 139 140 142 152 153 154 154 156 158 160 160 166 177 178 180 181 182 182 183

VI

Inhaltsverzeichnis

8.4 8.4.1 8.4.2 8.4.3 8.5 8.6 8.7 8.7.1

Kapitel 9

Suchmaschinenoptimierung 9.1 9.1.1 9.1.2 9.2 9.3 9.4 9.5 9.6 9.6.1 9.6.2 9.7 9.7.1 9.7.2

Kapitel 10

Anlegen eines Nachrichtenarchivs Das Modul Nachrichtenliste anlegen Das Modul Nachrichtenleser anlegen Nachrichtentemplates anpassen Aufbau des Seitenlayouts Grid-Stylesheets importieren CSS-Grid anwenden Mehrere Inhaltselemente in einer Spalte anordnen

Suchmaschinenrelevante Einstellungen Seitentitel und Beschreibung der Seite Schlüsselworte vergeben Auszeichnungen überprüfen URLs umschreiben Eine Sitemap in TYPOlight erzeugen Die Sitemap bei Google anmelden Empfohlene Erweiterungen Die Erweiterung Keywords Die Erweiterung Google Sitemap Webstatistiken Google Analytics in TYPOlight verwenden Piwik in TYPOlight verwenden

Veröffentlichung einer Website – Checkliste 10.1 10.2 10.3 10.3.1 10.4 10.5 10.6 10.7 10.8 10.9 10.10

TYPOlight in einem Unterverzeichnis Anpassung in den Einstellungen und der .htaccess-Datei Suchmaschinenrelevante Einträge vorgenommen? Seitentitel und Beschreibung der Seite Sprachen-Fallback eingerichtet? Validieren des Quellcodes und der CSS-Dateien Interne und externe Links überprüfen E-Mail-Adressen im Backend kontrollieren Testen der Webseiten mit den gängigsten Browsern Workflow zum Abschluss eines Projektes Code-Snippets Sammlung

184 185 186 187 190 191 193 199 203 204 204 205 206 206 207 208 211 211 212 212 212 213 215 216 216 218 218 219 219 220 220 221 222 223

Inhaltsverzeichnis

Kapitel 11

Tipps & Tricks zu TYPOlight 11.1 11.1.1 11.1.2 11.2 11.2.1 11.2.2 11.2.3 11.3 11.4 11.5

Einzelne Sprachlabels anpassen Weiterlesen-Link verändern Sprachabhängige Bezeichnungen definieren Einzelne DCA-Werte anpassen HTML-Tags im Seitentitel erlauben HTML-Tags in Überschriften erlauben Felder der Mitgliederregistrierung anpassen WYSIWYG-Editor auch für Teasertexte Individuelle WYSIWYG-Editoreinstellungen Fußzeile über die gesamte Browserbreite verwenden

Stichwortverzeichnis

VII

225 226 226 226 227 227 227 228 228 229 231 235

Einleitung

2

Einleitung

Die ersten Gedanken zu einem Buch über TYPOlight hatte ich bereits Anfang des Jahres 2008. Nachdem Projektgründer und Hauptentwickler Leo Feyer auf dem ersten TYPOlight-Usertreffen in Würzburg im April 2008 bekannt gab, dass er aktuell an einem Buch schreibt (das inzwischen beim Addison-Wesley-Verlag erschienen ist, s.u.), wurde der Gedanke erst einmal vertagt – ein erstes Buch zu TYPOlight vom Entwickler des Systems ist ein guter Start. Durch das tägliche Lesen des TYPOlight-Forums1, die vielen Fragen der Benutzer und zahlreichen Erfahrungen aus Projekten mit TYPOlight reifte der Gedanke an das Buch erneut. Während des 2. TYPOlight-Usertreffens im Mai 2009 in Frankfurt/Main sprach ich mit Leo Feyer über die Buchidee. Das Buch sollte auf Benutzer zugeschnitten sein, die eine Website mit TYPOlight aufbauen wollen – inhaltlich sollte der Schwerpunkt auf Umsetzungsbeispielen und nicht auf den Entwicklerdetails liegen. Leo Feyer unterstützte die Buchidee und stellte den Kontakt zum Addison-Wesley Verlag her. Meine inhaltliche Konzeption wurde verlagsseitig freigegeben und so entstand dieses Buch.

Ziele dieses Buches Wie kann man jemandem das System TYPOlight näher bringen? Wie lässt es sich anders – praxisbezogen – erklären? Welche Herangehensweise ist die beste? Kernziel ist die Vermittlung, wie Sie ein Webdesign in eine Website mit TYPOlight umsetzen. Dazu erfahren Sie, wie einzelne Module und Komponenten innerhalb TYPOlight „verdrahtet“ sind. Gleich vorausgeschickt: TYPOlight nimmt Ihnen viel Arbeit ab, ein funktionierendes Konzept und Design vorausgesetzt. Um das volle Potenzial auszuschöpfen, ist es empfehlenswert, sich intensiv mit Cascading Style Sheets, kurz CSS, zu beschäftigen. Die Gestaltungsmöglichkeiten sind enorm und wenn Sie erst einmal aus einer spröde klingenden Liste ein elegantes Navigationsmenü erstellt haben, verliert der Begriff Liste seine Nüchternheit. Die Praxisbeispiele ersetzen nicht die Auseinandersetzung mit Webtechnologien – sie sollen anregen und bei der Umsetzung Ihrer Websites als Ausgangspunkt und zum Verständnis beitragen. Häufig wurde die Frage gestellt, warum TYPOlight kein Templatesystem wie viele andere CMS hat. Hat es, es wird nur anders genutzt. TYPOlight besitzt keine Fertig-Klick-Lösungen, was das Erscheinungsbild und die Funktionen einer Website angehen. Aus meiner Sicht von Vorteil, denn die Websites sehen in der Regel auch nicht von-der-Stange aus. Klarer Vorteil ist die

1 http://www.typolight-community.de/

Einleitung

Flexibilität des Systems – sowohl was den technischen Aufbau als auch die Design anforderungen betrifft.

Was können Sie von diesem Buch erwarten? Dieses Buch soll Ihnen den Einstieg und die erfolgreiche Umsetzung Ihrer Websites in TYPOlight ermöglichen. Sie finden Praxisbeispiele zu den Themen Navigation, Darstellung von Bildergalerien sowie den Aufbau von zwei Websites, die Ihnen Schritt für Schritt die Erstellung einer Website zeigen. Dieses Buch ersetzt nicht die Auseinandersetzung mit CSS und das Allgemeinwissen über Webdesign. Mit einem Grundwissen zu CSS und der Bereitschaft, Neues dazu zu lernen, ist die Umsetzung Ihrer Websites mit TYPOlight jedoch hervorragend zu meistern. Das Kapitel 1, Konzeption und Planung der Website, beschäftigt sich mit Themen „vor der Umsetzung“ einer Website. Es zeigt Methoden und Herangehensweisen, wie erste Gedanken, konzeptionelle Ideen und Ansätze auf unterschiedliche Weise für die spätere Umsetzung einer Website erstellt werden können. Dazu gehören Techniken wie Wireframes, Moodboards und Mockups, die zeigen, wie die Überlegungen visualisiert werden können. Die einzelnen Techniken werden Ihnen detailliert erläutert und geben einen Einblick in die Arbeit und den Entwicklungsprozess vor der konkreten Umsetzung einer Website mit TYPOlight. Wie so oft gilt auch hier: Die genaue Beschreibung des Problems/der Aufgabenstellung ist Teil der Lösung. In Kapitel 2, Hilfstools bei der Webentwicklung, lernen Sie Werkzeuge kennen, die Sie bei der Entwicklung einer Website erfolgreich unterstützen. Dazu zählen in erster Linie Erweiterungen – AddOns – für den Browser Firefox. Wenn Sie sich schon etwas mit TYPOlight beschäftigt haben, dann sind die nächsten vier Kapitel für Sie interessant. In Kapitel 3, Das CSS-Framework von TYPOlight, erfahren Sie mehr über das CSSFramework von TYPOlight. Neben dem grundlegenden Aufbau des CSS-Frameworks bekommen Sie Einblicke, wie Sie auf unterschiedliche Weise CSS-Dateien erstellen, bearbeiten und verwalten können. In Kapitel 4, Navigationen in TYPOlight erstellen, lesen Sie, wie Sie Navigationen in TYPOlight realisieren. Anhand von Praxisbeispielen erfahren Sie unter anderem, wie Sie eine horizontale und vertikale Navigation erstellen und diese einsetzen. Ergänzend lesen Sie in Kapitel 5, Menüs mit Spritegrafiken erstellen, was Sprite grafiken sind und wie Sie grafische Menüs damit erstellen und in TYPOlight verwenden.

3

4

Einleitung

Das Kapitel 6, Unterschiedliche Bilder pro Seite anzeigen, zeigt Ihnen Möglichkeiten auf, wie Sie dynamisch für einzelne Webseiten unterschiedliche Bilder einbinden. Zwei Methoden – die Verwendung von CSS und der Einsatz von Insert-Tags – werden vorgestellt. Wenn Sie gerne anhand einer Beispiel-Website TYPOlight besser kennen lernen möchten, dann lesen Sie das größte Kapitel 7, Aufbau einer Website mit TYPOlight. Am Beispiel einer fiktiven Website für einen Fotografen lernen Sie den kompletten Ablauf der Umsetzung nach der Installation von TYPOlight. Kurz: vom Briefing bis zur fertigen Website. Dabei werden Einstellungen von TYPOlight, der Aufbau der Seitenstruktur, das Erstellen des Seitenlayouts sowie das Anlegen von Artikeln und der benötigten Module detailliert erklärt. Hier erfahren Sie mehr darüber, wie Sie Bilder präsentieren und mit welcher Methode Sie individuelle Schriften für Elemente verwenden können. Im Anschluss daran finden Sie im Kapitel 8, Arbeiten mit Rastern (Grids), den Aufbau einer Website unter Einsatz eines Rastersystems (Grids). Sie lernen, wie Sie Inhalte durch die Verwendung des Rastersystems strukturieren und diese mehrspaltig darstellen können. Grids erleichtern den kontrollierten Aufbau einer Website und führen zu einem registerhaltigen Erscheinungsbild. Anders ausgedrückt: Eine Website folgt klaren Regeln im Aufbau und in der Struktur. In Kapitel 9, Suchmaschinenoptimierung, erfahren Sie mehr über die Möglichkeiten, wie Sie Ihre Website mit TYPOlight für Suchmaschinen einstellen und ergänzen. Dazu zählt auch das Erstellen einer Sitemap-Datei und deren Anmeldung bei den Google Webmaster Tools. In Kapitel 10, Veröffentlichung einer Website, erhalten Sie eine Checkliste, mit der Sie wichtige Punkte vor der Veröffentlichung einer Website überprüfen können. Dazu gehören Themen wie Browsertests, Validierung Ihrer Website und das Überprüfen von Einstellungen in TYPOlight. Am Ende des Buches finden Sie in Kapitel 11, Tipps & Tricks zu TYPOlight, noch einige nützliche Infos zur Anpassung von Funktionen in TYPOlight: vom updatesicheren Anpassen einzelner Texte des CMS TYPOlight bis zur individuellen Einstellung des WYSIWYG-Editors. Die Website zum Buch unter http://www.think-typolight.de/ liefert Ihnen weiterführende Links und Informationen zu den im Buch genannten Themen.

Einleitung

5

Und nach dem Buch? Wenn Sie nach dem Lesen dieses Buches TYPOlight-infiziert sind oder es werden wollen: Planen Sie für das nächste TYPOlight-Usertreffen Ihre Teilnahme ein. Zwei TYPOlight-Usertreffen haben bisher stattgefunden (2008 in Würzburg und 2009 in Frankfurt/Main), bei denen neben zahlreichen interessanten Workshops auch die Möglichkeit des Kennenlernens und Gedankenaustauschs genutzt wurde. Wenn Sie einmal persönlich Anwender, Modul-Entwickler und den Kopf von TYPOlight, Leo Feyer, kennen gelernt haben, ist das Arbeiten mit TYPOlight und im Forum ganz anders. Bleiben Sie neugierig! Und viel Erfolg mit diesem Buch bei Ihrer Entdeckungstour durch TYPOlight!

Ergänzend empfehle ich Ihnen das Offizielle TYPOlight-Handbuch von Leo Feyer (ISBN 9783-8273-2913-4), das TYPOlight-Videotraining von Harry Boldt (ISBN 978-3-8273-6252-0) sowie Nina Gerlings TYPOlight für Redakteure (ISBN 978-3-8273-2893-9). Alle drei Titel sind ebenfalls im Addison-Wesley-Verlag erschienen bzw. erscheinen in Kürze.

Über mich

8

Über mich

Ich heiße Thomas Weitzel, bin Jahrgang 1967 und lebe und arbeite als selbstständiger Designer und Webentwickler in Stuttgart. Nach dem Studium des Industriedesigns und Abschluss als Diplom-Designer habe ich mich selbstständig gemacht und zunächst Projekte aus dem Bereich Industriedesign realisiert. Doch es stellte sich bald heraus, dass das Kommunikationsdesign mein Steckenpferd werden würde. Mit dem Internet und dem Erstellen erster Websites gab es erste Berührungen Mitte der 90er-Jahre des letzten Jahrtausends. PageMill und CyberStudio waren die ersten Anwendungen, mit denen die erste Version der Hochschul-Website erstellt wurde. Als visueller Mensch hatte ich das Gefühl: Ja, das kann ich jetzt auch ;-). Nach Umwegen mit dem Nachfolger von CyberStudio, Golive, fand ich dann den Weg zu Dreamweaver. Zunehmend kamen die Content Management Systeme in den Fokus – nicht zuletzt aufgrund von Kundenwünschen und den Möglichkeiten, die mit statischen Seiten nur schwer oder gar nicht zu realisieren waren. Unzählige Versuche und Installationen von Open Source CMS wurden installiert – oder scheiterten schon daran – bis ich im Jahr 2006 auf TYPOlight aufmerksam wurde. Wow – das sieht edel aus und scheint – gerade auch für Designer mit Webkenntnissen – bedienbar zu sein. Kurzum: TYPOlight wurde installiert und der Einstieg begann. Schnell wurde mir klar, das System ist mächtig, ohne im Backend – auch visuell – zu überfordern. Weiterhin wurde mir klar, jetzt heißt es, CSS besser zu verstehen, damit auch optisch ansprechende Resultate mit diesem System entstehen. Bücher und Web sites wurden rauf- und runtergelesen, Quellcodes analysiert und nachgebaut. Im Vergleich zu dem vorher eingesetzten CMS gab es hier positives Feedback im Forum zu Vorschlägen, das System zu verbessern; ebenso gab und gibt es in konstanter Folge Updates, die nicht nur Neues bringen und kleine Korrekturen beinhalten, sondern die Benutzervorschläge ernst nehmen und umsetzen. Seit September 2006 setze ich TYPOlight professionell ein und biete individuelle Websites auf Basis von TYPOlight an – neben den Themen Beratung & Konzep tion, Gestaltung sowie Workshops & Schulungen. Seit Anfang 2010 bin ich außerdem offizielles Mitglied des TYPOlight-Teams.

Ich freue mich über Ihr Feedback – per E-Mail oder auf einem der nächsten TYPOlight-Usertreffen. Im Web finden Sie mich unter http://www.weitzeldesign.de/.

1 Konzeption und Planung der Website

12

K apite l 1

Viele Faktoren definieren die unterschiedliche Vorgehensweise bei der Konzeption und Planung einer Website.

1.1

Grundüberlegungen

Die Methoden für die Konzeption und Planung von Websites variieren je nach: ◆◆ Anforderungen ◆◆ Umfang ◆◆ Zielgruppen ◆◆ Prozess ◆◆ Umfang der an der Entwicklung beteiligten Personen/Gruppen Für eine kleinere Website werden Sie sicher nicht das Budget zur Verfügung haben, den Gestaltungsprozess mit detaillierten Entwurfsmethoden wie zum Beispiel Wireframes zu gestalten. Jedoch ist das Wissen um solche Methoden von Vorteil – je nach Anforderung und Kundenkreis können Sie Teile dieser Methodik verwenden.

1.1.1 Anforderungen an eine Website ◆◆ Welche Anforderungen werden an die Website gestellt? ◆◆ Welche Techniken sollen zum Einsatz kommen? ◆◆ Sind weitere Ausbaustufen in der Zukunft geplant? Im Idealfall haben Sie ein Briefing oder Pflichtenheft bekommen, um Ihre Überlegungen zu starten. Dort sollten die wichtigsten Definitionen für die Website beschrieben werden. In der Regel sind dies inhaltliche und strukturelle Angaben – noch frei von Details für die konkrete Umsetzung. Je nach Budget und Umfang Ihres Auftraggebers können Sie den Gestaltungsprozess definieren. Sind die Vorgaben klar und aus Ihrer Sicht und Erfahrung ausreichend, so können Sie eigenständig das erste Konzept entwickeln. Sind hingegen die Vorgaben noch nicht präzise oder detailliert genug, bietet sich ein Workshop oder ein Gespräch mit Ihrem Kunden an, um gemeinsam die Ziele zu erarbeiten und festzulegen. In diesem Workshop können gemeinsam die Vorgaben erarbeitet werden, die für die Website gewünscht sind. Nachfolgend sind Methoden aufgeführt, die sich besonders gut für einen Präsenz-Workshop mit Ihrem Kunden eignen. Die Praxis hat gezeigt, dass viele Kunden dankbar sind, wenn Sie mit Ihrer Erfahrung und Kompetenz diesen Entscheidungsprozess unterstützen und begleiten. Ein gut vor-

Konzeption und Planung der Website

bereiteter Workshop und eine klare Kommunikation wirken sich erfolgreich auf die Umsetzung der Website aus.

1.1.2 Umfang einer Website Anhand der Vorgaben lässt sich recht schnell der Umfang einer Website erfassen. ◆◆ Wird eine mehrsprachige Website gefordert? ◆◆ Sind viele Bilder und multimediale Inhalte zu integrieren? Gerade eine gut geplante Struktur der Website lässt Sie später den Umfang besser erfassen – und Ihre Kalkulation exakter festlegen.

1.1.3 Zielgruppen Definieren Sie die Zielgruppe(n) zusammen mit Ihrem Kunden, um eine zielgruppengerechte Gestaltung und Umsetzung der Website planen zu können. ◆◆ In welchem Bereich bzw. in welcher Branche ist Ihr Kunde tätig? ◆◆ Welche Produkte oder Dienstleistungen werden präsentiert? ◆◆ Gibt es Erkenntnisse über Altersgruppen? Anhand dieser Definitionen können Sie später sowohl gestalterisch als auch strukturell bessere Vorschläge zur Umsetzung der Website machen.

1.1.4 Prozess Definieren Sie Ihren Entwicklungsprozess in Form einer Übersicht Ihrer Schritte und Tätigkeiten für den gesamten Entwicklungsprozess und besprechen Sie diesen mit Ihrem Kunden. Somit wissen alle Beteiligten, welche Stufen des Entwicklungsprozesses anstehen. Eine verbreitete Methode ist die Definition von „Meilensteinen“, also Schritte der Entwicklung wie ◆◆ Konzeption ◆◆ Designentwürfe/Designvarianten ◆◆ Umsetzung der Inhalte ◆◆ Abnahme und Freigabe der Website/Veröffentlichung Je nach Umfang und Definition in Ihrem Angebot rechnen Sie auch in Meilensteinen des Projekts Ihre Leistungen ab.

13

14

K apite l 1

1.1.5 Prozessablauf – Entscheidungskompetenzen Klären Sie – wenn möglich – am Anfang eines Kundenkontakts bzw. Auftrages, welche Ansprechpartner für Sie während der Entwicklung für welche Phasen und Inhalte, vor allem aber auch für Entscheidungen und Freigaben, zur Verfügung stehen. Verfahren Sie Ihrerseits ebenfalls so, wenn Sie nicht der alleinige Entwickler einer Website sind, und nennen Ihre Ansprechpartner. Machen Sie vor Projektbeginn klar – gerade bei Firmen mit mehreren möglichen Ansprechpartnern –, dass Sie einen Ansprechpartner für das Projekt haben möchten und dass dessen Entscheidungen für Ihre weiteren Schritte maßgeblich sind. Vermeiden Sie somit – im besten Fall – ein Hin-und-Her bzgl. wichtiger Entscheidungen, die Sie für eine erfolgreiche Fortsetzung Ihrer Arbeit benötigen.

1.2

Methoden der Konzeption und Planung

1.2.1 Skizzen Keine Methode ist schneller und ressourcensparender, als die ersten Ideen mit Stift aufs Papier zu bringen. Das hat sich auch im Zeitalter der digitalen Medien nicht geändert. ◆◆ Wird die Website ein-, zwei- oder dreispaltig angelegt? ◆◆ Werden verschiedene Vorlagen (Seitenlayouts) benötigt? ◆◆ Sind produktspezifische Seiten geplant? Solche Fragen lassen sich nicht nur verbal, sondern auch durch eine einfache Skizze schnell erläutern und visualisieren. Mit dem Visualisieren starten Sie einen Prozess, der zur Anregung, Diskussion und aktiven Einbindung Ihres Kunden führt. Gemeinsame Vorstellungen lassen sich so schnell festhalten, Varianten sind zügig erstellt und können für eine Entscheidungsfindung gegenübergestellt werden. Auch Missverständnisse lassen sich so schneller aufdecken und können gleich geklärt werden. Denken Sie daran, dass Sie in dieser Phase inhaltlich und strukturell arbeiten und die visuelle Gestaltung (noch) außen vor bleibt. Sie definieren gemeinsam mit Ihrem Kunden die sinnvollste Struktur der Website und legen fest, an welchen Stellen welche Funktionen und Inhalte angezeigt werden sollen.


Erstellen Sie zum Schluss des Workshops eine Zusammenfassung der erarbeiteten Inhalte und Definitionen und fügen Sie Kopien der Skizzen bei – dieser Prozess ist somit auch visuell für Ihren Kunden nachvollziehbar. Oft erinnert man sich bei der Durchsicht der Skizzen an besprochene Inhalte schneller und detaillierter, als nur über die notierten Stichpunkte. Legen Sie sich für Ihre eigenen Ideen und Skizzen ein kleines Buch zu, in dem Sie immer wieder Notizen und Skizzen machen. Nebenbei entsteht auch eine Sammlung an Ideen für andere Projekte. Ich verwende gerne Skizzenbücher (Abbildung 1.1) im DIN A6-Format, die sich praktisch immer mitnehmen lassen.

Abbildung 1.1 Skizzenbuch: Wireframes

15

16

K apite l 1

Oder fotografieren Sie mit Ihrem Handy Dinge, die Ihnen auffallen, wenn Sie unterwegs sind, und sammeln Sie diese Eindrücke.

1.2.2 Moodboards Der Begriff Moodboard (engl. mood „Stimmung“, board „Tafel“) ist ein wichtiges Arbeits- und Präsentationsmittel in Kommunikations- und Designberufen. Es unterstützt bei der Entwicklung eines visuellen Erscheinungsbildes und dient der Ideenfindung und der Umsetzung visueller oder visuell darstellbarer Ideen. Wenn Sie die erste Phase erfolgreich absolviert haben und die strukturelle Definition entwickelt ist, starten Sie mit dem nächsten Schritt: dem „Look-and-Feel“ der Website – der visuellen Darstellung. Oft erhalten Sie Angaben oder Vorgaben, welche Farben auf einer Website verwendet werden sollen bzw. gewünscht sind. Das Gleiche gilt für Bilder und Schriften. Abhängig von den Anforderungen an eine Website sind diese Vorgaben schon vorhanden oder müssen erarbeitet werden. Besteht die Website Ihres Kunden schon länger und besitzt das Unternehmen eine ausgeprägte CI (Corporate Identity), also ein einheitliches Erscheinungsbild, sind viele Vorgaben schon definiert und können für die Website übernommen bzw. angewendet werden. Haben Sie eine kleine Website zu realisieren, sind meist Signet (Logo), Farbe(n) und Schrift definiert, auf deren Basis Sie nun das Erscheinungsbild der Website entwickeln können. Sind viele Vorgaben noch nicht definiert, können Sie mithilfe von Moodboards visuelle Zusammenstellungen für Ihren Kunden anfertigen und den Findungs- und Entscheidungsprozess voranbringen. Sie können den Begriff Moodboard auch mit Collage ersetzen – der Begriff ist ein feststehender Begriff in der Kreativbranche. Abhängig vom Inhalt bzw. Gegenstand der Website erstellen Sie für Ihren Kunden ein oder mehrere Moodboards, die verschiedene visuelle Ausrichtungen haben. Stöbern Sie in aktuellen Zeitschriften nach Anzeigen, die die passenden Bilder liefern. Fügen Sie alle gesammelten Materialien auf einem festen Karton zusammen. Montieren Sie die Materialien z. B. anhand der Farbe, der Struktur, der möglichen Zuordnung einer Eigenschaft wie elegant, modern oder klassisch. Denken Sie daran, für Präsentationen oder Kundentermine das Format für Ihre Präsentationskartons nicht zu klein zu wählen – DIN A3 sollte die kleinste Größe sein. Vergessen Sie jedoch nicht, dass der persönliche Kontakt in der Entwicklung neuer Ideen und die Präsentation immer wieder Möglichkeiten bieten, direkt und vor Ort Entscheidungen effizienter zu erreichen. Bei kleineren Projekten kommunizieren Sie Ihre Moodboards ggf. nicht nach außen, sondern nutzen diese Methode, um Ihre Ideen für die Umsetzung festzuhalten. Alternativ erstellen Sie das Moodboard an Ihrem Rechner als digitales Composing. Wesentliche Inhalte, die sich über ein Moodboard darstellen lassen, sind:


17

◆◆ Farben ◆◆ Schriften ◆◆ Fotos ◆◆ vorhandene Corporate Identity Elemente (Logo, Farben, Schriften) ◆◆ Kombination verschiedener Erscheinungsbilder (z. B. Farbwirkungen wie kühl – sachlich, warm – sinnlich) Als Beispiel für ein digitales Moodboard verwende ich eine Zusammenstellung für die Beispielumsetzung der Fotografen-Website, die Sie in Kapitel 7, Aufbau einer Website mit TYPOlight, kennen lernen. Abbildung 1.2 Moodboard – Schrift- und Farbbeispiele

Übersichtliche Anordnungen für eine Farb- und Schriftauswahl erleichtern die Entscheidung und Festlegung der designrelevanten Elemente. Im Beispiel (Abbildung 1.2) sehen Sie zwei serifenlose Schriften. Als Vorstellung, wie diese Elemente auf der späteren Website aussehen können, fügen Sie ein Beispiel mit den jeweiligen Schriften ein. So kann sich der Fotograf schnell einen Überblick und einen ersten Eindruck über die visuelle Erscheinung seiner Website machen. Weisen Sie ruhig darauf hin, dass die Darstellung der Schriften später noch variieren kann; gerade dann, wenn Sie in Photoshop die Schriften geglättet anzeigen lassen. Wenn Sie Photoshop einsetzen, verwenden Sie für die Schriftdarstellung in der Einstellpalette für die Kantenglättung (Antialiasing) die Option keine. Dadurch erreichen Sie eine optische Darstellung der Schrift, wie sie später auch im Webbrowser angezeigt wird. Das Gleiche gilt auch für Schriften, die nicht plattformübergreifend (Windows, Mac OS) vorhanden sind. Welche Möglichkeiten es dennoch gibt, beliebige Schriften zu verwenden, erfahren Sie in Kapitel 7, Aufbau einer Website mit TYPOlight.

Erklären Sie Ihren Kunden, dass die Präsentation eine Idee darstellt und keinesfalls verbindlich sein kann, was die Darstellung der Schrift betrifft. Weisen Sie darauf hin, dass Ihre Vorlagen als Grafikdateien (JPG, PNG) oder PDF-Dokument in einem anderen Medium gezeigt werden, als dies später in der Website der Fall ist. Erklären Sie Ihren Kunden zudem, dass die Grafikdateien oder PDF-Dokumente immer in einer 100-Prozent-Ansicht zu betrachten sein sollen, damit die Inhalte ohne Rasterung und „Verpixelung“ dargestellt werden. Gerade solche „Kleinigkeiten“ führen schnell zu Verwirrungen.

18

K apite l 1

Abbildung 1.3 Moodboard – Fotografie – Galerievarianten

Für Farbauswahlen eignet sich zum Beispiel Kuler1 von Adobe – eine Flashanwendung direkt in Ihrem Browser. Neben der Möglichkeit, Farbkombinationen anderer Benutzer anzusehen, haben Sie auch die Möglichkeit, eigene Farbkombinationen anhand einer definierten Basisfarbe anzulegen. Neben der intuitiven Farbauswahl im Farbrad können Sie auch direkt die Farbwerte in verschiedenen Farbmodellen wie RGB, CMYK und Hexadezimal ablesen. Abbildung 1.4 Farbkombinationen mit Adobe Kuler erstellen

1 http://kuler.adobe.com/


19

Ein zweites Online-Werkzeug für Farbkompositionen ist Color Scheme Designer 2 (Abbildung 1.5), der Ihnen neben den Einstellmöglichkeiten von Farbkombinationen auch eine Mustervorschau einer Website anhand der ausgewählten Farben darstellt (Abbildung 1.6). Abbildung 1.5 Farbkombinationen mit Color Scheme Designer erstellen

Abbildung 1.6 Beispielseite mit ausgewählten Farbkombinationen

2 http://colorschemedesigner.com

20

K apite l 1

1.3

Wireframes

1.3.1 Was sind Wireframes? Wireframes helfen sowohl bei der internen wie auch der Kommunikation nach außen mit Ihrem Kunden, die ersten Strukturen für den Aufbau der Website zu ermitteln und zu definieren. Dies erfolgt als schematische Darstellung einer einzelnen Seitenvorlage; mit unter auch mit mehreren Seitenvorlagen, wenn unterschiedliche Seitenlayouts zu erstellen sind. Hierbei werden die grundlegenden Elemente der Website festgehalten. Ein konzeptuelles Layout sollte erkennbar sein – wie die Aufteilung der Inhaltsbereiche für Navigationen, Seiteninhalte, Suchfunktion etc. Ein vollendetes Design ist in dieser Phase nicht notwendig und nicht vorgesehen. Es ist ausreichend, die grafischen Komponenten nur sehr rudimentär abzubilden, da es bei einer Wireframe-Darstellung in erster Linie um die Konzeption der Website geht. Das Design spielt zu diesem Zeitpunkt keine bzw. eine sehr untergeordnete Rolle.

1.3.2 Welche Ziele haben Wireframes? Wireframes ermöglichen eine schnelle Entwicklung des strukturellen Aufbaus und der Organisation inhaltlicher Elemente – ohne die Berücksichtigung gestalterischer Elemente und deren Darstellung. Gerade während des Entwicklungsprozesses mit mehreren Personen ermöglicht die Wireframe-Methode eine spontane und zeitnahe Festlegung von Strukturen und Inhaltsbereichen. Wireframes eignen sich unter anderem für: ◆◆ die Entwicklung eines Prototypen unabhängig vom Design ◆◆ das schnellere Prototyping der Grundstruktur einer Website ◆◆ die Ideenfindungsphase ohne visuelle Ablenkung (Design) ◆◆ Übersicht der Techniken Ein kurzer Überblick über die am häufigsten eingesetzten Wireframe-Methoden – dazu zählen im Wesentlichen: ◆◆ Skizzen ◆◆ Karten/Haftetiketten ◆◆ digitale Vorlagen ◆◆ spezielle Programme zur Erstellung von Wireframes


1.3.3 Skizzen Die Skizze ist – wie schon in Abschnitt 1.2.1 beschrieben – die einfachste und ressourcenschonendste Methode, erste Lösungsansätze in einem Team festzuhalten. Ein wesentlicher Vorteil liegt in der unmittelbaren Verfügbarkeit der Mittel; es bedarf keiner Vorbereitung in der Beschaffung von geeigneten „Werkzeugen“ – innerhalb eines Termins mit Ihrem Kunden können Sie sofort loslegen. Es lassen sich schnell viele Grundvarianten erstellen und variieren. Alternativ lässt sich dies auch an einem Flipchart realisieren, mit der Einschränkung, dass das Format später weniger kopietauglich ist ;-).

1.3.4 Karten/Haftetiketten Eine weitere Methode ist das Arbeiten mit Karten, die auf einem skizzierten oder vorgedruckten „Browser“ angeordnet werden. Karten bieten sich an, wenn Sie diese Methode öfters in der Praxis einsetzen. Karten mit Platzhaltern können Sie gut und einfach vorbereiten – auch bei niedrigen Budgets ist diese Methode sinnvoll nutzbar. Sie können auch die Skizzentechnik mit den Karten kombinieren. Alternativ sind auch verschiedenfarbige Haftetiketten wie Postit®-Kleber für eine Aufteilung und Kennzeichnung von Funktionen verwendbar. Abbildung 1.7 Wireframes mit Postit®Aufklebern

Die Interaktion aller Teilnehmer schafft eine Identifikation mit dem Projekt Website und aktiviert Ideen.

21

22

K apite l 1

1.3.5 Digitale Vorlagen Gerade bei kleineren Projekten ist die Umsetzung von Strukturen direkt am Computer vermutlich die geläufigste Methode. Hierbei wird ebenfalls auf eine visuelle Darstellung verzichtet – Struktur und funktionale Aufteilung werden dargestellt. Die Umsetzung können Sie frei wählen, z. B. in einem pixelbasierten Bildbearbeitungsprogramm wie Adobe Photoshop oder Adobe Fireworks. Wenn Ihnen die Methode der Wireframe-Methode zusagt und Sie diese später öfters verwenden möchten, können Sie sich eine Bibliothek mit den Grundbausteinen anlegen, auf die Sie dann bequem zurückgreifen können. Hierbei sind Sie flexibel, wie Sie die Darstellung vornehmen. Abbildung 1.8 Digitales Wireframe in Photoshop

Kennzeichnen Sie die jeweiligen Flächen durch Farben. Hier im Beispiel ist das Layout blau, die Funktionsbereiche sind gelb und die Inhaltsbereiche grün dargestellt. Fügen Sie die Beschriftung entweder direkt ein – wie in Abbildung 1.8 zu sehen ist – oder legen Sie in der Ansicht eine Legende an, die die Bedeutung und Funktion der farbigen Flächen erläutert. Eine reduzierte Darstellung nur mit Grautönen ist ebenfalls denkbar; oft ermöglichen Farben jedoch ein besseres Verständnis der Abstraktionsebene.


Abbildung 1.9 Wireframe-Varianten

In Abbildung 1.9 sehen Sie Varianten der möglichen Aufteilung von Layout (blau), Funktionen (gelb) und Inhalten (grün). Anhand solcher Aufstellungen sind schnell Raster und Strukturen erkennbar – oder auch nicht. Designdetails würden in dieser Konzeptionsphase den Blick auf die Gesamtstruktur der Website vernachlässigen.

1.3.6 Programme & Websites für die Erstellung von Wireframes Mittlerweile ist ein Softwaremarkt für die Umsetzung von Wireframes entstanden. Sie finden im Internet eine Bandbreite von Open Source-Programmen bis hin zu umfangreichen kommerziellen Angeboten bis in den fünfstelligen Europreis! Stellvertretend sind einige aufgeführt – weitere finden Sie in den Weblinks. Kostenpflichtige Programme sind zum Beispiel: ◆◆ Axure ◆◆ iPlotz ◆◆ OmniGraffle ◆◆ Mockupscreens ◆◆ Pidoco ◆◆ ProtoShare ◆◆ FlairBuilder Lizenzfreie Programme sind unter anderem: ◆◆ Balsamiq ◆◆ Gliffy

23

24

K apite l 1

◆◆ Mockingbird ◆◆ Pencil

1.3.7 Mockingbird Mit Mockingbird (Abbildung 1.10) können Sie direkt online im Browser (Safari, Firefox, Chrome) Wireframes und Strukturen erstellen. Fertige Vorlagen lassen sich im PDF- und PNG-Format abspeichern. Abbildung 1.10 Wireframes mit Mockingbird

1.3.8 Balsamiq Balsamiq (Abbildung 1.11) ist ebenfalls ein Online-Werkzeug zur Erstellung von Wireframes. Hier werden die Inhaltselemente skizzenhaft präsentiert. Auch hier lassen sich die Ergebnisse als PDF- oder PNG-Dateien speichern. Abbildung 1.11 Wireframes mit Balsamiq


25

1.3.9 Pencil Pencil (Abbildung 1.12) ist ein Wireframe-Werkzeug, das sich im Firefox-Browser als Erweiterung verwenden lässt oder sich unter Windows und Linux auch lokal auf Ihrem Rechner installieren lässt. Abbildung 1.12 Wireframes mit Pencil

1.3.10 Schlussfolgerungen Wireframes eignen sich insbesondere in gruppenorientierten Entwicklungsprozessen, bei denen sich unter dem Nenner „Struktur und Inhalt ohne Design“ zielgerichtet, termingerecht, effizient und ressourcenschonend Lösungsansätze für eine Website finden lassen. Wireframes eignen sich meist erst für umfangreichere Websites mit vielen Strukturen und Funktionen. Bei kleinen bzw. kleineren Web sites steht der Kosten-Nutzen-Faktor immer in Frage, womit Wireframes hier nicht das Mittel der Wahl sind.

CD

Eine Auswahl von Links zum Thema Wireframes – die Websites sind zum Teil in englischer Sprache – finden Sie als Lesezeichen auf der beiliegenden CD-ROM.

2 Hilfstools bei der Webentwicklung

28

K apite l 2

Während der Entwicklung einer Website werden Sie sich permanent mit dem Webbrowser beschäftigen, indem Sie sich immer wieder die Darstellung und den Quellcode ansehen. Entwickeln Sie eine Website immer „top to bottom“ – das heißt, die Entwicklung wird in einem standardkonformen Browser überprüft, und erst am Ende der Umsetzung überprüfen Sie die Darstellung in weniger standardkonformen „Sorgenkindern“ (Internet Explorer 6) und passen den Code entsprechend an. Standardkonform bedeutet, dass eine Website nach den Vorgaben des W3C 1 umgesetzt ist. Das W3C definiert Regeln und Standards, die eine Website erfüllen muss, um den Kriterien der Standardkonformität zu entsprechen. Wesentliche Merkmale dieser Standards sind die Validität, der Verzicht veralteter Elemente und Methoden sowie eine Umsetzung des Layouts ohne Tabellen. Dabei wird auch auf eine strikte Trennung von Inhalt und Darstellung (Design) geachtet. Entwickeln Sie also am besten mit dem Firefox-Browser und passen Sie später die nötigen Änderungen für die Browser aus dem Hause Microsoft an. Für jeden Webentwickler gibt es Hilfstools, die die tägliche Arbeit erleichtern. Nachfolgend werden nützliche Werkzeuge für die Entwicklung kurz vorgestellt.

2.1

Web Developers Toolbar

Diese Erweiterung für den Firefox-Browser von Chris Pederick 2 ist zu Recht das „Schweizer Taschenmesser“ für den Webentwickler. Es bietet sehr viele Funktionen bei der Entwicklung einer Website, so z. B.: ◆◆ Editieren bestehender CSS-Dokumente mit Echtzeitanzeige ◆◆ das Abschalten aller CSS-Dokumente zur reinen Textansicht ◆◆ das Umschalten für die Darstellungen der Druckansicht ◆◆ die Möglichkeit, Cookies und den Cache zu löschen ◆◆ die Untersuchung von Grafiken wie Pfade, Größen etc. ◆◆ die Möglichkeit, die Fenstergröße des Browserfensters einzustellen ◆◆ die Möglichkeit, (X)HTML und CSS direkt an den Validator zu schicken Nach der Installation wird die Web Developers Toolbar im Browserfenster unter der Adressleiste angezeigt (Abbildung 2.1).

1 http://w3c.org/ 2 http://chrispederick.com/work/web-developer/

Hilfsto ols b ei der Web ent wick lung

Abbildung 2.1 Firefox-Browser nach der Installation der Web Developers Toolbar

Wenn Sie nun eine Website aufrufen, können Sie die Funktionen der Web Developers Toolbar gleich anwenden – dargestellt an einer Beispiel-Website (Abbildung 2.2). Abbildung 2.2 Untersuchen einzelner Elemente der Website

Klicken Sie auf den Menüpunkt Hervorheben und dann auf den Menüpunkt Aktuelles Element hervorheben. Wenn Sie diese Einstellung ausgewählt haben, dann können Sie die einzelnen Elemente untersuchen (Abbildung 2.3) – hier die Überschrift.

29

30

K apite l 2

Abbildung 2.3 Inhaltselemente untersuchen

Unterhalb der Web Developers Toolbar wird Ihnen nun der gesamte Strukturpfad zu diesem Element angezeigt (Abbildung 2.4). Abbildung 2.4 Strukturpfad

Die Darstellung von links nach rechts entspricht dem Quellcode (Abbildung 2.5) von oben nach unten. Abbildung 2.5 Quellcode der untersuchten Seite

Anhand des oben dargestellten Pfades (Abbildung 2.4) und des Quellcodes (Abbildung 2.5) lässt sich Folgendes ablesen: Dem body-Element auf dieser Seite wurde


die CSS-Klasse .startseite zugewiesen. Damit lässt sich dann explizit diese Seite mit der CSS-Definition steuern: body.startseite #main .ce_text h1

Das bedeutet, dass sich die CSS-Definitionen nur auf dieser Seite auswirken, während für andere Seiten ohne diese body-Klasse die Hauptspalte (#main) anders durch die CSS-Definitionen dargestellt werden kann. Im Inhaltselement Text (.ce_text) wurde hier eine Überschrift in der Größe h1 gewählt (h1). TYPOlight verwendet unterschiedliche Inhaltselemente, die mit den jeweiligen CSS-IDs und CSS-Klassen ausgestattet sind – z. B. das Inhaltselement Text mit der CSS-Klasse .ce_text. Mit dieser Methode können Sie sehr einfach die richtige CSS-ID oder CSS-Klasse – zum Beispiel eines Inhaltselements – ermitteln; anschließend können Sie dann die Eigenschaften für das Inhaltselement defi nieren. Neugierig auf die CSS-Definitionen? Dann klicken Sie auf den Menüpunkt Keine CSS-Fehler – das ist das Menü, um CSS-Eigenschaften temporär zu ändern. Aktivieren Sie den Menüpunkt CSS bearbeiten (Abbildung 2.6). Abbildung 2.6 Ein bestehendes CSSDokument in Echtzeit bearbeiten

Je nach Einstellung der Web Developers Toolbar wird Ihnen das Editierfenster links oder wie im Beispiel unter (Abbildung 2.7) dem Website-Inhalt angezeigt.

31

32

K apite l 2

Abbildung 2.7 Darstellung des CSSEditierfensters

Wenn Sie nun innerhalb des Editierfensters die Angaben einer CSS-Definition ändern, wird Ihnen diese Änderung im Browserfenster gleich angezeigt. Somit können Sie schnell und komfortabel die Eigenschaften testen, bevor Sie diese in das CSS-Dokument von TYPOlight übernehmen.

2.2

Firebug für Firefox-Browser

Mit Firebug 3 ist ein weiteres und im Entwicklungsalltag nicht mehr wegzudenkendes AddOn verfügbar, welches Sie gleich installieren sollten. Mithilfe des Firebug lassen sich u. a. folgende Funktionen im Alltag nutzen: ◆◆ Seiteninhalte untersuchen ◆◆ CSS in Echtzeit editieren ◆◆ JavaScript debuggen ◆◆ die Ladezeiten für einzelne Webseiten zur Optimierung ermitteln ◆◆ … und vieles mehr Die Funktionen des Firebugs überschneiden sich in einigen Bereichen mit denen der Web Developer Toolbar, andere hingegen ergänzen sich – beide AddOns lassen sich parallel nutzen. Nachfolgend werden einige nützliche Funktionen im Überblick (Abbildung 2.8) kurz erklärt. 3 http://getfirebug.com


33

2.2.1 Seitenelemente untersuchen Abbildung 2.8 Einzelne Inhalte gezielt untersuchen

Mit einer weiteren Funktion (inspect) können Sie gezielt einzelne Inhalte einer Webseite untersuchen und analysieren (Abbildung 2.8). Sie rufen diese Funktion durch einen Klick auf das Inspect-Icon (roter Kreis) auf und navigieren dann mit dem Mauszeiger über die Inhalte der Webseite – sowohl der Inhalt unter dem Mauszeiger als auch die entsprechende Codezeile werden Ihnen angezeigt. So finden Sie z. B. schnell die benötigten CSS-IDs und CSS-Klassen heraus, wenn Sie ein neues Modul oder Inhaltselement in das Seitenlayout oder einen Artikel platziert haben. Im oben gezeigten Beispiel sehen Sie, dass die Überschrift durch eine h1-Auszeichnung definiert ist.

2.2.2 CSS-Definitionen in Echtzeit bearbeiten Abbildung 2.9 CSS-Definitionen in Echtzeit verändern

34

K apite l 2

Wenn Sie Firebug aktivieren, können Sie unter dem Menüpunkt CSS alle in dieser Seite geladenen CSS-Dateien aufrufen und die Werte temporär überschreiben. Wählen Sie zuerst das zu ändernde CSS-Dokument aus und klicken dann links daneben auf Bearbeiten. Anschließend können Sie die bestehenden CSS-Definitionen des ausgewählten CSS-Dokuments ändern – Sie sehen die Auswirkungen sofort im Browserfenster. Diese Funktion ist sehr hilfreich – sowohl beim Studium bestehender Websites als auch beim Finden von Fehlern und natürlich der Entwicklung einer Website.

2.2.3 Ladezeiten ermitteln und optimieren Abbildung 2.10 Ladezeiten zur Optimierung von Inhalten ermitteln

Wenn Sie auf den Menüpunkt Netzwerk klicken (Abbildung 2.10) und die Seite neu laden, dann werden Ihnen die Ladezeiten aller Elemente auf dieser Webseite angezeigt – eine Möglichkeit, bei umfangreicheren Inhalten nach möglichen Einsparpotenzialen zu suchen. Gerade bei Bildern oder interaktiven Inhalten wie Flash wird dies sehr deutlich. Im gezeigten Beispiel wird die gesamte Webseite mit 201 Kilobyte bei einer durchschnittlichen DSL-6000-Verbindung in 2,17 Sekunden geladen. Seit Kurzem spielen die Ladezeiten einer Website auch beim GoogleRanking eine Rolle.

CD

Sie finden alle Links zu den AddOns auch auf der beiliegenden CD-ROM.

2.3

Weitere nützliche Helfer

Neben der Web Developer Toolbar und Firebug sind noch einige weitere Helfer für den Arbeitsalltag während der Webentwicklung für den Firefox-Browser sinnvoll und werden nachfolgend kurz vorgestellt.


35

2.3.1 CacheStatus Mit diesem AddOn sparen Sie sich den immer wiederkehrenden Weg durch die Menüs im Firefox, um den Browsercache zu löschen, wenn Sie z. B. Änderungen an Stylesheets vorgenommen haben. Das AddOn integriert sich nach der Installation in der Statuszeile des Firefox-Browsers; mit einem Rechtsklick können Sie einfach und schnell den gesamten Browsercache leeren (Abbildung 2.11). Abbildung 2.11 CacheStatus anwenden

https://addons.mozilla.org/de/firefox/addon/1881

2.3.2 Quick Locale Switcher Dieses AddOn hilft Ihnen bei Entwicklungen von mehrsprachigen Websites mit TYPOlight. Das AddOn integriert sich nach der Installation auch in der Statuszeile des Firefox-Browsers: mit einem Linksklick auf die Länderflagge wählen Sie eine andere Sprache aus, Firefox beendet sich und startet mit der ausgewählten Sprache neu. Sie können damit einen richtig eingestellten Sprachen-Fallback testen, ohne weitere anderssprachige Browser oder Testumgebungen installieren zu müssen (Abbildung 2.12). Abbildung 2.12 AddOn Quick Locale Switcher

http://www.captaincaveman.nl/firefox-extensions-quick-locale-switcher.aspx

36

K apite l 2

2.3.3 Palette Grabber Dieses AddOn ist dann nützlich, wenn Sie eine Website finden, deren Farbkompositionen Ihnen gefallen und Sie diese Farben als Farbpalette z. B. in Photoshop, PaintShop Pro oder Fireworks übernehmen wollen. http://www.gusprevas.com/palettegrabber/

2.3.4 MeasureIt Abbildung 2.13 MeasureIt – ein digitales Maßband

Ein digitales Maßband, das nützlich ist, wenn Sie Websites untersuchen und einen schnellen Überblick über die Breite und Höhe von Inhalten auf einer Website erhalten möchten (Abbildung 2.13). http://www.kevinfreitas.net/extensions/measureit/

2.3.5 HTML Validator Abbildung 2.14 HTML Validator – Fehlerdiagnosetool


Ein unverzichtbares AddOn, welches Ihnen jederzeit eine Rückmeldung zur Validität einer Website (Abbildung 2.14) gibt – unabhängig davon, ob die Webseite behauptet, sie sei W3C-valide. Ein Doppelklick auf das Icon zeigt Ihnen Hinweise zur Behebung der Nicht-Validität im Quellcode. Wenn Sie dieses AddOn installiert haben und auf eine valide Seite surfen, wird Ihnen in der Statuszeile ein grüner Haken angezeigt; validiert die Seite nicht, wird Ihnen ein gelbes Warndreieck angezeigt. http://users.skynet.be/mgueury/mozilla/

2.3.6 GridFox Abbildung 2.15 GridFox – Spaltenraster visualisieren

Ein AddOn, das Sie temporär aktivieren können, um die Registerhaltigkeit bei Verwendung von Grids (Rastern) visuell zu überprüfen (Abbildung 2.15). http://www.puidokas.com/gridfox-20-alpha-release/

37

38

K apite l 2

2.3.7 960 Gridder Abbildung 2.16 960 Gridder Bookmarklet

Eine Alternative zu GridFox; als Bookmarklet (JavaScript) können Sie diese Funktion z. B. in Ihre Lesezeichenleiste ziehen und dann per Klick aktivieren (Abbildung 2.16). http://gridder.andreehansson.se

2.3.8 Fireshot Hin und wieder ist es bei der Entwicklung sinnvoll, Websites in Teilbereichen oder komplett als Bilddatei zur Ideensammlung oder Verwendung im eigenen Entwurfsprozess zu speichern. Mit Fireshot können Sie auch Webseiten aufnehmen, die wesentlich länger sind als Ihr Monitor anzeigen kann. http://screenshot-program.com/fireshot/

2.3.9 Copy Plain Text Ein AddOn, das hilfreich bei einer Portierung bestehender Texte ist. Markieren Sie den Text und wählen dann durch Rechtsklick die Funktion Copy as Plain Text aus dem Menü aus – der Text wird ohne Formatierungen und HTML-Code kopiert. Anschließend können Sie diesen Text dann z. B. in ein Inhaltselement Text einfügen. http://mozmonkey.com/copyplaintext/


2.3.10 ColorZilla

39

Abbildung 2.17 ColorZilla – Farben einfach ermitteln

ColorZilla (Abbildung 2.17) ermöglicht es Ihnen, mit einem Klick eine Farbe auf einer Webseite zu ermitteln. Den Farbwert können Sie dann in verschiedenen Farbmodi (RGB und hexadezimal) kopieren und in Ihr Stylesheet einfügen. Eine Zoomfunktion bis 1000% hilft Ihnen, auch Details wie Farbübergänge einfach zu erfassen. http://www.colorzilla.com/firefox/

2.3.11 HTML Help Abbildung 2.18 Website HTML Help – HTML validieren

Kein AddOn, aber mindestens genauso nützlich, wenn Sie eine gesamte Website auf HTML-Validität überprüfen möchten (Abbildung 2.18). http://htmlhelp.com/tools/validator

3 Das CSS-Framework von TYPOlight

42

K apite l 3

Mit dem CSS-Framework von TYPOlight lassen sich nahezu alle Webdesigns umsetzen. Sie müssen in der Regel keine eigenen Seitenvorlagen erstellen, sondern können allein mit Bordmitteln valide Websites entwickeln. Gerade wenn Sie TYPOlight neu kennen lernen, sollten Sie auf das CSS-Framework zurückgreifen. Das CSS-Framework von TYPOlight ist für jeden Webdesigner eine enorme Erleichterung bei der täglichen Arbeit, da es Lösungen für die gängigsten Probleme unterschiedlicher Browser bereithält und ein solides Grundgerüst für nahezu jede Website ist, die Sie mit TYPOlight realisieren. Das CSS-Framework bietet Ihnen für das Erstellen von Websites bereits die gängigsten Spaltenaufteilungen für das Seitenlayout an. Folgende Spaltenkonfigurationen sind direkt wählbar: Kopf- (#header) und Fußzeile (#footer) sowie die Unterteilung in 3 Spalten (#left, #main, #right). Je nach Designvorgabe für das Seitenlayout entscheiden Sie sich für eine der möglichen Kombinationen der Spaltenkonfiguration. Abbildung 3.1 Spaltenkonfigurationen für das Seitenlayout

Abbildung 3.1 zeigt die möglichen Spaltenkonfigurationen für das Seitenlayout, die das CSS-Framework von TYPOlight zur Verfügung stellt (Layout → Seitenlayouts). Listing 3.1 Schematischer Aufbau der Seitenvorlage fe_page

Im Gegensatz zu vielen anderen Content Management Systemen müssen Sie in TYPOlight kein Template und keine Platzhalter für die dynamischen Inhalte wie Navigationen, die Ausgabe der Inhalte in Spalte etc. manuell definieren. In TYPOlight bestimmen Sie das „Template“ durch das Anlegen eines Seitenlayouts und die Definition der Spaltenkonfiguration und den darin zugewiesenen Modulen. Innerhalb der Module sorgt die dynamische Ausgabe für die Darstellung der jeweiligen Funktion im Frontend.

Das CSS-Framework von T YPOlight

43

Für alle Module, die Sie später in das Seitenlayout oder innerhalb von Artikeln einbinden, liefert TYPOlight eindeutige CSS-IDs und CSS-Klassen. Module werden immer mit der CSS-Klasse .mod_selector (mod = module) ausgegeben; Inhalts elemente mit der CSS-Klasse .ce_selector (ce = content element). Wenn Sie z. B. ein Modul für eine Nachrichtenliste erstellen und dieses im Seitenlayout platzieren, können Sie es mit .mod_newslist per CSS ansprechen. Wenn Sie z. B. als Inhaltselement Text verwenden, können Sie es mit .ce_text per CSS ansprechen. Ebenso ermöglicht TYPOlight das Anlegen eigener Layoutbereiche und deren Ausgabe an drei Positionen: nach der Kopfzeile, in der Hauptspalte und oberhalb der Fußzeile. Durch diesen modularen Aufbau ist TYPOlight sehr flexibel und sehr gut anpassbar.

3.1

CSS-Dokumente bearbeiten

Das Bearbeiten von CSS-Dokumenten kann auf unterschiedliche Weise geschehen; jeder Entwickler hat mit der Zeit seine eigene Arbeitsweise gefunden. Ich zeige Ihnen vier Möglichkeiten, wie Sie CSS-Dateien und -definitionen und TYPOlight verbinden können.

3.1.1 Über den integrierten CSS-Editor im TYPOlight-Backend Das Erstellen von CSS-Definitionen erfolgt über den internen CSS-Editor von TYPOlight. Rufen Sie dazu im Backend von TYPOlight unter Layout → Stylesheets den CSS-Editor auf (Abbildung 3.2). Klicken Sie auf das Editier-Icon, um eine bestehende CSS-Datei zu bearbeiten (Abbildung 3.3). Abbildung 3.2 Aufruf Layout → Stylesheets

44

K apite l 3

Abbildung 3.3 CSS-Definitionen bearbeiten

Abbildung 3.4 CSS-Definitionen im Detail bearbeiten

Mit dem internen CSS-Editor von TYPOlight können Sie bei geringen CSS-Kenntnissen alle wesentlichen CSS-Definitionen eingeben (Abbildung 3.4). Für CSSDefinitionen, die nicht über die Maske vergeben werden können, finden Sie unter der Rubrik Eigener Code ein Eingabefeld, in dem Sie diese CSS-Definitionen


45

eingeben können. Wenn Sie eine bestehende lokale CSS-Datei – die CSS-IDs und CSS-Klassen des CSS-Frameworks von TYPOlight enthält – importieren möchten, um diese dann mit dem internen CSS-Editor von TYPOlight zu arbeiten, gehen Sie so vor: Laden Sie die externe CSS-Datei in das Verzeichnis tl_files hoch. Öffnen Sie den internen CSS-Editor von TYPOlight im Backend unter Layout → Stylesheets und klicken auf CSS-Import. Wählen Sie dann aus dem Dateiverzeichnis Ihre CSS-Datei aus und klicken auf CSS-Import. Bestätigen Sie den Hinweis, dass gleichnamige CSS-Dateien überschrieben werden. Beim ersten Import können Sie den Hinweis vernachlässigen, da noch keine gleichnamige CSS-Datei besteht; bei einem späteren Import lokal geänderter CSS-Dateien überlegen Sie vor dem Import, ob die neu zu importierende CSS-Datei die bestehende CSS-Datei überschreiben soll.

3.1.2 Externe CSS-Dokumente in TYPOlight integrieren Sie nutzen lieber einen externen CSS- oder Texteditor zum Bearbeiten der CSSDateien? Diese Methode lässt sich einfach mit TYPOlight verbinden. Erstellen Sie Ihre CSS-Dateien extern und binden diese dann wie folgt in TYPOlight ein: Legen Sie im Verzeichnis tl_files ein Unterverzeichnis – z. B. css-extern – an und speichern Sie dort Ihre lokal erstellten CSS-Dateien ab. Damit die CSS-Dateien auch in das Seitenlayout eingebunden werden, können Sie die CSS-Dateien nun mit der Pfadangabe im Seitenlayout in der Rubrik Experten-Einstellungen angeben (Abbildung 3.5).

TYPOlight speichert die CSS-Definitionen in der Datenbank und generiert daraus die CSS-Dateien, die Sie im Root-Verzeichnis Ihrer TYPOlight-Installation finden. Wenn Sie diese CSS-Dateien lokal bearbeiten und wieder in das RootVerzeichnis hochladen, werden diese CSS-Dateien spätestens beim nächsten TYPOlight-Cronjob neu aus der Datenbank generiert und überschreiben somit die manuell hochgeladenen CSS-Dateien. Auch manuell abgelegte CSS-Dateien im Root-Verzeichnis werden von TYPOlight dort gelöscht.

Abbildung 3.5 Extern erstellte CSS-Dateien in das Seitenlayout ein binden

46

K apite l 3

Listing 3.2 Einfügen einer extern erstellten CSS-Datei

Sie können über diese Methode externe CSS-Dateien in das Seitenlayout einbinden. Bei Änderungen Ihrer lokalen CSS-Datei(en) laden Sie diese via FTP einfach in das Verzeichnis – hier als Beispiel das Verzeichnis css-extern – und überschreiben die gleichnamige(n) CSS-Datei(en). Der Nachteil dieser Methode ist, dass Benutzer – mit geringen CSS-Kenntnissen – Änderungen nicht mehr im internen CSS-Editor von TYPOlight ausführen können. Je nach vorliegendem Fall ist dies absichtlich gewünscht, sodass nur Administratoren oder Personen, die mit CSS vertraut sind, Änderungen vornehmen können. Auch Administratoren müssen bei dieser Lösung immer zuerst Änderungen lokal durchführen und die CSS-Datei wieder hochladen. Je nach Provider und verwendeter FTP-Software lassen sich CSS-Dateien auch im FTP-Programm öffnen und werden beim Speichern direkt auf dem Server gespeichert. Alle über den internen Template-Editor von TYPOlight erstellten und geänderten Templates werden updatesicher im Verzeichnis /templates gespeichert. Wenn Sie bestehende Templates umbenennen, vergessen Sie nicht, diese aus den entsprechenden Vorlagen auszuwählen und zuzuweisen (z. B. Seitenlayouts, Nachrichtenarchive).

3.1.3 Externe CSS-Dateien in die Seitenvorlage einbinden Eine weitere Möglichkeit besteht darin, die Pfade zu den extern erstellten CSSDateien direkt in der Seitenvorlage fe_page einzutragen. Um die Änderungen updatesicher einzutragen, nehmen Sie die Änderungen an der Seitenvorlage durch den integrierten Template-Editor von TYPOlight (Abbildung 3.6) vor. Klicken Sie dazu im Backend auf Layout → Templates und dann auf Neues Template. Wählen Sie nun aus dem Menü Originaltemplates das Template fe_page.tpl aus der Kategorie Frontend aus und speichern das Template durch Klick auf Template erstellen.

Abbildung 3.6 Template-Editor

Öffnen Sie das Template zum Bearbeiten durch Klick auf das Editier-Icon (Abbildung 3.6).


47

Abbildung 3.7 Seitenvorlage fe_page bearbeiten

Fügen Sie anschließend die Angaben zu den einzubindenden CSS-Dateien (Abbildung 3.7) nach dieser Zeile ein:

Fügen Sie nun Ihre externen CSS-Dateien mit den richtigen Pfadangaben ein:

Speichern Sie das Template und rufen die Frontendansicht auf, um zu überprüfen, ob alle eingebundenen CSS-Dateien geladen und die Inhalte entsprechend formatiert ausgegeben werden.

3.1.4 Kombination der Erweiterung CssEditor und Firebug Meine persönliche Lieblingsvariante ist die Kombination aus der Erweiterung CssEditor 1 (von Cyril Ponce) und Firebug. Die oben beschriebenen Möglichkeiten habe ich ebenso ausprobiert und längere Zeit damit gearbeitet. Sie sehen: Alles bleibt anders oder der Workflow passt sich an :-). Noch komfortabler ist es mit zwei Bildschirmen: Auf dem linken Bildschirm die Website und auf dem rechten Bildschirm das Editierfenster von Firebug. Installie1 http://www.typolight.org/erweiterungsliste/view/csseditor.20000029.de.html

Listing 3.3 Pfadangabe Slimbox

Listing 3.4 Einfügen der Pfade zu den externen CSS-Dateien

48

K apite l 3

ren Sie zunächst die Erweiterung CssEditor aus dem Extension Repository 2. Wenn Sie nach der abgeschlossenen Installation im Backend auf Layout → Stylesheets klicken, sehen Sie in der Reihe der Icons ein neues Icon (Abbildung 3.8) – damit lassen sich die CSS-Dateien nun mit dem CssEditor bearbeiten. Abbildung 3.8 CSS über die Erweiterung CssEditor bearbeiten

Nach dem Anlegen der benötigten CSS-Dateien, z. B. standard.css für das Layout und Design der Website, navigation.css für alle Navigationen sowie einer print.css für die Druckausgabe, werden diese CSS-Dateien in das Seitenlayout eingebunden. Nun können Sie die Frontendansicht Ihrer zu entwickelnden Webseite aufrufen, dann Firebug aus der Statuszeile aktivieren und die entsprechende CSS-Datei auswählen und auf Bearbeiten klicken. Danach schreiben Sie Ihre CSSDefinitionen in das Editierfeld von Firebug und sehen – bei schon eingebundenen Modulen und Inhalten –, wie sich der Inhalt der Seite formatiert und das Design Gestalt annimmt. Haben Sie nun einige CSS-Definitionen geschrieben oder verändert, markieren Sie alle Zeilen im Editierfeld von Firebug und kopieren diese in die Zwischenablage mit (Strg)(C) – am Mac mit (ï)(C). Öffnen Sie dann im Backend von TYPOlight Layout → Stylesheets und klicken auf das Icon zur Bearbeitung der CSS-Dateien mit dem CssEditor. Sobald dieser geladen ist (Abbildung 3.9), fügen Sie die aus Firebug kopierten CSS-Definitionen in das Feld des CssEditors mit (Strg)(V) ein – am Mac mit (ï)(V). Speichern und schliessen Sie die CSS-Datei.

2 http://www.typolight.org/erweiterungsliste.html


Abbildung 3.9 CSS mit der Erweiterung CssEditor bearbeiten

Sie können auch im Backend direkt im Eingabefeld des CssEditors Ihre CSSDefinitionen schreiben – auch hier bleibt stets die Möglichkeit erhalten, die CSSDefinitionen mit dem internen CSS-Editor von TYPOlight zu bearbeiten. Kurz gesagt: Die Erweiterung CssEditor ermöglicht es Ihnen, konform und parallel zum internen CSS-Editor von TYPOlight ganze CSS-Definitionen auf einmal per Kopieren und Einfügen (Copy&Paste) zu übernehmen. Einzelne CSS-Definitionen können Sie dann auch weiterhin durch das Editieren einzelner Einträge im internen Stylesheet-Editor von TYPOlight bearbeiten. Es steht Ihnen somit als Entwickler ein schnellerer und effizienterer Weg zur Bearbeitung von CSS-Dateien zur Verfügung; Benutzern mit geringen CSS-Kenntnissen steht weiterhin die Bearbeitung im internen CSS-Editor von TYPOlight zur Verfügung.

49

4 Navigationen in TYPOlight erstellen

52

K apite l 4

Die Navigation einer Website ist zentrales Element – dient sie doch der Orientierung für den Benutzer und bildet im besten Fall sinnvoll die Struktur einer Website ab. Eine gut durchdachte und positionierte Navigation erleichtert allen Besuchern Ihrer Website das Auffinden von Informationen. Nichts ist frustrierender, als wenn eine Navigation die Benutzung einer Website erschwert oder sogar unmöglich macht. Achten Sie daher darauf, eine Navigation sinnvoll aufzubauen; wie z. B. keine zu kleinen Schriften und Flächen einzusetzen, die schwer les- und klickbar sind. Achten Sie zudem auf ausreichenden Kontrast bei Farben und darauf, eine sinnvolle und klare Gliederung der Seiteninhalte abzubilden und gängige Bezeichnungen für Menüpunkte anstatt exotischer Rätselbezeichnungen einzusetzen. Für das Erstellen von Navigationen bietet TYPOlight unterschiedliche Modul typen an: ◆◆ Navigationsmenü Dieser Modultyp erzeugt eine hierarchisch abhängige Navigation, die alle veröffentlichten und nicht versteckten Seiten inklusive Unterseiten ausgibt. Dieses Modul erkläre ich Ihnen im Folgenden genauer. ◆◆ Individuelle Navigation Dieser Modultyp erzeugt eine Navigation aus beliebigen Seiten ohne hierarchische Abhängigkeiten. Zum Beispiel geeignet für Meta-Navigationen. Meta-Navigationen enthalten in der Regel Orientierungslinks, die auf allen Unterseiten immer gleich angezeigt werden, wie z. B. Impressum, Kontakt, Sitemap oder einen Link zur Startseite. Oft werden in dieser Navigation auch Hilfe- und Suchfunktion integriert. ◆◆ Navigationspfad Das Modul erzeugt eine – auch unter dem Namen Brotkrümel-Navigation bekannte – Navigation, die von der aktiven Seite ausgehend alle übergeordneten Seiten bis zur obersten Ebene anzeigt. Hilfreich bei umfangreichen Seiten zur zusätzlichen Orientierung für den Benutzer. ◆◆ Quicknavigation Der Modultyp Quicknavigation fügt ein Drop-Down-Menü der Website hinzu, mit dem der Benutzer direkt zu einer bestimmten Seite navigieren kann. Sehr platzsparende Möglichkeit einer Navigation. ◆◆ Quicklink Der Modultyp Quicklink unterscheidet sich vom Modultyp Quicknavigation darin, dass nur ausgewählte Seiten per Drop-Down-Menü ausgewählt werden können. Das Modul verhält sich ähnlich wie das Modul Individuelle Navigation.

Navigationen in TYPOlight erstellen

Im Wesentlichen lassen sich die meisten Navigationen mit dem Modul Navigationsmenü darstellen. Ich stelle Ihnen einige Beispiele für Navigationen vor, die Sie dann erweitern und anpassen können.

4.1

Das Modul Navigationsmenü

Um ein Modul Navigationsmenü zu erstellen, klicken Sie im Backend auf Layout-> Module und auf den Menüpunkt Neues Modul. In der Standardauswahl wird Ihnen gleich das Modul Navigationsmenü angezeigt: Abbildung 4.1 Modul Navigationsmenü

Geben Sie dem Modul einen aussagekräftigen Namen, z. B. Hauptnavigation, wenn das Hauptmenü abgebildet werden soll. Als nächsten Schritt definieren Sie in der Rubrik Menü-Konfiguration den Start- und Stoplevel. Für ein besseres Verständnis der Start- und Stoplevel hilft Abbildung 4.2.

53

54

K apite l 4

Abbildung 4.2 Darstellung Seitenstruktur

Die erste Menüebene ist die im Quellcode (Abbildung 4.3) ausgegebene Bezeichnung level_1, jede weitere Menüebene dann entsprechend level_x, wobei x für die Seitenbaumebene/-tiefe steht. Abbildung 4.3 Quellcodeansicht Navigationsmenü

4.2

Anwendungsbeispiele für Navigationen

4.2.1 Beispiel für eine horizontale Navigation (eine Ebene) Für ein horizontales Navigationsmenü erstellen Sie zuerst ein neues Modul mit dem Modultyp Navigationsmenü. Klicken Sie dazu im Backend von TYPOlight auf Layout → Module und dann auf Neues Modul.


55

Abbildung 4.4 Navigationsmodul für das horizontale Menü

Benennen Sie das Modul z. B. mit Navigation horizontal und speichern Sie es. Im nächsten Schritt binden Sie das Modul in das Seitenlayout ein. Öffnen Sie dazu im Backend unter Layout → Seitenlayouts das entsprechende Seitenlayout durch Klick auf das Editier-Icon. Unter der Einstellung Frontend-Module wählen Sie unter Modul das eben erstellte Modul Navigation horizontal aus; unter Spalte wählen Sie Kopfzeile aus und Speichern und schliessen das Seitenlayout. Abbildung 4.5 Einbinden des Moduls Navigation horizontal

Wenn Sie nun die Frontendansicht öffnen und sich die Website ansehen, sehen Sie – ohne angelegte CSS-Definitionen – das Navigationsmenü (Abbildung 4.6).

56

K apite l 4

Abbildung 4.6 Frontendansicht des Navigationsmenüs, ohne CSS-Definitionen

Der Quellcode für das Navigationsmodul sieht so aus (Abbildung 4.7): Abbildung 4.7 Quellcode Navigationsmenü innerhalb der Kopfzeile (#header)

Der Link Navigation überspringen dient der Navigation für Screenreader und ist mit der CSS-Klasse invisible markiert, also in der Frontendansicht unsichtbar, da er durch die CSS-Definitionen aus dem sichtbaren Bereich verschoben wird. Von einem Screenreader kann er jedoch erfasst und vorgelesen werden. Für das Modul Navigationsmenü wird die Klasse .mod_navigation ausgegeben. Ganz ohne Gestaltung ist die Navigation nicht wirklich schön anzusehen – also gleich zu den CSS-Definitionen. Legen Sie als Erstes eine CSS-Datei für die Navigation an, indem Sie im Backend unter Layout → Stylesheets auf Neues Stylesheet klicken. Benennen Sie es für das Beispiel in navigation_menu_horizontal um und wählen als Medientyp screen aus. Speichern und schliessen Sie die CSSDatei.


Mit CSS können Sie Angaben zu unterschiedlichen Medientypen machen. Dazu zählen: ◆ die normale Bildschirmausgabe (screen) ◆ die Ausgabe auf Projektoren und Beamern (projection) ◆ die Druckausgabe (print) ◆ die Ausgabe auf PDAs und anderen Geräten mit kleinem Display (handheld) ◆ die Ausgabe auf Textgeräten mit fester Zeichenbreite, z. B. Fernschreiber oder Textbrowser (tty) ◆ die Ausgabe auf TV-Geräten (tv) ◆ die Sprachausgabe (aural) ◆ die Ausgabe über Braillezeilen (braille) ◆ die Ausgabe für Brailledrucker (embossed) ◆ und die Ausgabe für alle Medientypen (all)

Eine CSS-Datei mit dem Medientyp print (z. B. print.css) enthält andere Definitionen für die Darstellung der Inhalte als eine CSS-Datei vom Medientyp screen (z. B. layout.css) und wird erst aktiviert, wenn der Benutzer die Druckausgabe startet. Die CSS-Datei layout.css wird nicht von den Angaben der CSS-Datei print.css beeinflusst – und umgekehrt. So lässt sich die Ausgabe und Darstellung von Inhalten an die unterschiedlichsten Anwendungsfälle anpassen.

Nun binden Sie das CSS-Dokument noch in das Seitenlayout ein. Klicken Sie dazu im Backend auf Layout → Seitenlayout und wählen das Seitenlayout durch Klicken auf das Editier-Icon aus. Unter den Einstellungen Head-Bereich werden Ihnen nun alle angelegten CSS-Dokumente angezeigt. Wählen Sie hier das CSSDokument navigation_menue_horizontal aus (Abbildung 4.8) und Speichern und schliessen Sie das Seitenlayout. Abbildung 4.8 Einbinden des CSSDokuments in das Seitenlayout

57

58

K apite l 4

Achten Sie darauf, nach dem Erstellen eines CSS-Dokuments dieses auch in das – richtige – Seitenlayout einzubinden. Hilfreich ist es dabei, die Bezeichnung für die CSSDokumente einheitlich zu benennen. Arbeiten Sie z. B. nicht alleine an einer Website, ist es sinnvoll, eindeutige Bezeichnungen zu verwenden und auf Kurzschreibweisen – z. B. nav_01 oder nav_hor – zu verzichten.

Listing 4.1 CSS-Definition für die horizontale Navigation

Wenn Sie erneut die Frontendansicht aufrufen, werden Sie noch keine Änderung sehen, da noch keine Definitionen im CSS-Dokument hinterlegt sind. Das CSSDokument selbst ist jedoch mit dem Seitenlayout verbunden. Das Menü soll an fester Stelle in der Kopfzeile (#header) positioniert werden. Der Wert position:absolute; definiert dabei die feste Positionierung, der Wert top:120px; den Abstand von oben. Für das CSS-Dokument navigation_menu_horizontal werden folgende CSSDefinitionen angewendet (Listing 4.1):

/* horizontale navigation */ #header .mod_navigation { position:absolute; top:120px; width:960px; font-family:verdana,arial,sans-serif; font-size:1.2em; background:#666; }

Für die unsortierte Liste wird der Außenabstand auf Null gesetzt und der Innenabstand von links um 20 Pixel eingerückt. Die Auflistungspunkte werden abgeschaltet (Listing 4.2). Listing 4.2 CSS-Definition für das Element ul

#header .mod_navigation ul { margin:0px; padding:0px 0px 0px 20px; list-style-type:none; }

Für die einzelnen Listenpunkte wird eine feste Breite definiert; die Eigenschaft float:left; zeigt die einzelnen Listenelemente (Menüpunkte) nebeneinander an. Außen- und Innenabstand werden auf Null gesetzt; der Text (Linktext) wird zentriert. Auf der rechten Seite wird noch ein senkrechter (Trenn-)strich eingefügt (Listing 4.3).


#header .mod_navigation li { width:120px; float:left; margin:0; padding:0; text-align:center; border-right:1px solid #ccc; }

59

Listing 4.3 CSS-Definition für das Element li

Für die Links im „Normalzustand“ wird nun die Höhe definiert; die Eigenschaft display:block; setzt die gesamte Breite des Listenelements als klickbaren Bereich fest – und nicht nur den Linktext. Mit der Eigenschaft text-decoration:none; wird die Unterstreichung aufgehoben (Listing 4.4). #header .mod_navigation a, #header .mod_navigation a:link, #header .mod_navigation a:visited { height:22px; display:block; text-decoration:none; color:#fff; padding:8px 0 0 0; }

Listing 4.4 CSS-Definition für das Element a und die PseudoKlassen

Für den Zustand hover – Mauszeiger über dem Linktext – wird ein Wechsel der Hintergrundfarbe definiert (Listing 4.5). #header .mod_navigation a:hover { background:#DFAB2A; }

Listing 4.5 CSS-Definition für den hover-Zustand

Für den jeweils aktiven Menüpunkt wird definiert (Listing 4.6): #header .mod_navigation li.active { height:22px; margin:0; padding:8px 0px 0px 0px; background-color:#DFAB2A; border-top:0px solid #cccccc; border-right:1px solid #cccccc; border-bottom:0px solid #cccccc; border-left:0px solid #cccccc; }

Nachdem die CSS-Definitionen im CSS-Dokument navigation_menu_horizontal definiert wurden, öffnen Sie die Website in der Frontendansicht. Die Darstellung sollte nun wie folgt (Abbildung 4.9) aussehen:

Listing 4.6 CSS-Definition des aktiven Menüpunktes

60

K apite l 4

Abbildung 4.9 Frontendansicht horizontales Menü

Es ist immer wieder faszinierend, wie man aus einer einfachen Liste ein ansprechendes Navigationsmenü erzeugen kann. Selbstverständlich können Sie in Ihrer Website andere Farben, Schriften oder Abstände verwenden.

4.2.2 Beispiel für eine vertikale Navigation (eine Ebene) Für die Darstellung eines vertikalen Navigationsmenüs ändern sich gegenüber dem horizontalen Navigationsmenü folgende Punkte: ◆◆ Platzierung des Menüs in der linken Spalte (#left) anstatt in der Kopfzeile (#header) ◆◆ Anpassungen der CSS-Definitionen (Links untereinander anstatt neben einander) Klicken Sie dazu wieder im Backend auf Layout → Module und auf Neues Modul. Wählen Sie wieder den Modultyp Navigationsmenü aus und geben dem Modul einen Titel, z. B. Navigation vertikal (Abbildung 4.10). Abbildung 4.10 Modul Navigationsmenü für vertikales Menü

Sie können auch das schon vorhandene Modul für die horizontale Navigation verwenden und dieses anstatt in die Kopfzeile in die linke Spalte platzieren. Die korrekte Darstellung wird dann später über die CSS-Definitionen getroffen.


61

Fügen Sie das Modul dem Seitenlayout hinzu (Abbildung 4.11): Abbildung 4.11 Einbindung des Moduls für die vertikale Navigation

Wählen Sie unter der Rubrik Frontend-Module das Modul Navigation vertikal aus; für die Spalte wählen Sie Linke Spalte aus. Somit findet die Ausgabe im Frontend in der linken Spalte statt. Wechseln Sie in die Frontendansicht, um sich das Navigationsmenü – ohne CSSDefinitionen – anzusehen (Abbildung 4.12): Abbildung 4.12 Frontendansicht vertikales Menü, linke Spalte

Der Blick in den Quellcode zeigt folgendes (Abbildung 4.13):

62

K apite l 4

Abbildung 4.13 Quellcode Navigationsmenü, linke Spalte

Bis auf die Platzierung in der linken Spalte ist im Aufbau des Quelltextes kein wesentlicher Unterschied zu sehen zwischen dem Navigationsmenü in der linken Spalte oder in der Kopfzeile. neues CSS-Dokument und benennen dies, z. B. navigation_ menu_vertikal und weisen diesem den Medientyp screen zu. Speichern Sie das

Erstellen Sie ein

CSS-Dokument ab und binden es in das Seitenlayout (Abbildung 4.14) ein: Abbildung 4.14 Einbindung des CSSDokuments

Für das CSS-Dokument navigation_menu_vertikal werden folgende CSSRegeln definiert (Listing 4.7): Listing 4.7 CSS-Definition für vertikale Navigation

/* navigation vertikal */ #left .mod_navigation { width:240px; font-family:verdana,arial,sans-serif; font-size:1.2em; background:#666; } #left .mod_navigation ul { margin:0px; padding:0px; list-style-type:none; } #left .mod_navigation li { margin:0; padding:0; text-align:center; border-bottom:1px solid #ccc; } #left .mod_navigation a, #left .mod_navigation a:link,


63

#left .mod_navigation a:visited { height:22px; display:block; text-decoration:none; color:#fff; padding:8px 0 0 0; } #left .mod_navigation a:hover { background:#DFAB2A; } #left .mod_navigation li.active { height:22px; margin:0; padding:8px 0px 0px 0px; background-color:#DFAB2A; border-top:0px solid #cccccc; border-right:0px solid #cccccc; border-bottom:1px solid #cccccc; border-left:0px solid #cccccc; }

Mit diesen CSS-Definitionen betrachten Sie nun die Website wieder in der Front endansicht – Sie sollten nun Folgendes (Abbildung 4.15) angezeigt bekommen: Abbildung 4.15 Frontendansicht vertikales Menü in der linken Spalte

64

K apite l 4

4.2.3 Beispiel für eine Kombination von horizontaler und vertikaler Navigation Eine der häufig verwendeten Navigationsanordnungen ist die horizontale Auflistung der Hauptnavigation im Kopfbereich und die Auflistung der jeweiligen Unternavigation vertikal in der linken Spalte. Nach den vorherigen Beispielen ahnen Sie sicher schon, welche Module für diese Navigation benötigt werden? Genau – zwei Module für die Navigation: ein Modul für die Hauptnavigation und ein Modul für die Unternavigation. Erstellen Sie zunächst das Modul für die Hauptnavigation (Abbildung 4.16). Abbildung 4.16 Modul für die Hauptnavigation

Geben Sie dem Modul einen Namen, z. B. Hauptnavigation. Für den Startlevel verwenden Sie 0 und setzen den Stoplevel auf 1 und aktivieren Sie die Option Hard Limit. Speichern und schliessen Sie das Modul. Durch diese Einstellungen (Stoplevel und Hard Limit) werden Menüpunkte größer der ersten Ebene (level 1) nicht angezeigt. Erstellen Sie nun noch das zweite Modul für die Unternavigation (Abbildung 4.17).


65

Abbildung 4.17 Modul für die Unternavigation

Benennen Sie das Modul, z. B. Unternavigation – linke Spalte, und geben Sie dem Startlevel den Wert 1. Damit werden nur Menüpunkte größer und gleich der Ebene 1 (level 1, level 2 etc.) angezeigt. Speichern und schliessen Sie das Modul. Erstellen Sie ein neues Seitenlayout im Backend durch Klick auf Layout → Seitenlayouts. In diesem Beispiel habe ich das Seitenlayout des Beispiels der horizontalen Navigation dupliziert und ändere hier nur die Einstellungen (Abbildung 4.18) für die Spalten in der Rubrik Spaltenkonfiguration:

Wenn Sie schon mehrere Seitenlayouts erstellt haben und sich das neue Seitenlayout nur durch wenige Änderungen von einem bestehenden Seitenlayout unterscheidet, können Sie ein bestehendes Seitenlayout duplizieren und dieses unter einem neuen Namen speichern. So sparen Sie sich die restlichen Einstellungen. Denken Sie in jedem Fall daran, dieses neue Seitenlayout dann auch der/den entsprechenden Seiten in der Seitenstruktur zuzuordnen.

Abbildung 4.18 Einstellungen der Spaltenkonfiguration im Seitenlayout

Sie sehen, es wurde nun die Auswahl Linke Spalte und Hauptspalte ausgewählt. Platzieren Sie nun noch die beiden Navigationsmodule im Seitenlayout (Abbildung 4.19):

66

K apite l 4

Abbildung 4.19 Platzierung der Navigationsmodule im Seitenlayout

Das Modul Hauptnavigation wählen Sie unter Modul aus und platzieren es unter Spalte in die Kopfzeile. Das Modul Unternavigation – linke Spalte unter Modul platzieren Sie unter Spalte in die Linke Spalte. Speichern und schliessen Sie nun das Seitenlayout ab. Für das Beispiel wird noch ein CSS-Dokument benötigt, welches Sie im Backend unter Layout → Stylesheets definieren. Auch hier können Sie ein bestehendes CSS-Dokument duplizieren und unter einem neuen Namen abspeichern. Binden Sie das neue CSS-Dokument nun noch im Seitenlayout (Abbildung 4.20) in der Rubrik Head-Bereich ein:

Abbildung 4.20 Einbinden des CSSDokuments

Wechseln Sie in die Frontendansicht und schauen sich die Seite an. Wenn Sie den Hauptmenüpunkt Menüpunkt 4 anklicken, sehen Sie (Abbildung 4.21) folgende Darstellung: Abbildung 4.21 Frontendansicht


67

Sie sehen die Hauptnavigation im Kopfbereich (#header) und die Unternaviga tion in der linken Spalte (#left). Noch sieht die Navigation optisch nicht schön aus – die CSS-Definitionen fehlen noch. Das kommt im folgenden Schritt. Zunächst ein Blick auf den Quellcode (Abbildung 4.22): Abbildung 4.22 Quellcodeansicht Kopfzeile #header und linke Spalte #left

Die Hauptnavigation wird horizontal in der Kopfzeile angeordnet. Dafür ist dieser Abschnitt im CSS-Dokument verantwortlich (Listing 4.8): /* hauptnavigation */ #header .mod_navigation { background:#666; font-family:verdana,arial,sans-serif; font-size:1.2em; position:absolute; top:89px; width:960px; } #header .mod_navigation ul { margin:0; padding:0; list-style-type:none; } #header .mod_navigation li { margin:0; padding:0;

Oft ist es sinnvoll, die Module für die Navigation zu erstellen und diese entsprechend im Seitenlayout zu platzieren und dann die richtige bzw. gewünschte Funktionsweise zu testen. Erst wenn alles stimmt, erstellen Sie die CSSDefinitionen dafür. Gerne verzettelt man sich schon in Details der visuellen Erscheinung einer Navigation und muss dann feststellen, dass die grundsätzliche Funktion noch nicht stimmt.

Listing 4.8 CSS-Definition für die horizontal ausgerichtete Navigation

68

K apite l 4

border-right:1px solid #CCCCCC; float:left; text-align:center; width:120px; } #header .mod_navigation a, #header .mod_navigation a:link, #header .mod_navigation a:visited { color:#FFFFFF; display:block; height:22px; padding:8px 0 0; text-decoration:none; } #header .mod_navigation a:hover { background:#DFAB2A; } #header .mod_navigation li.active, #header .mod_navigation .trail a { background-color:#DFAB2A; border:1px solid #CCC; height:22px; margin:0; padding:8px 0 0; }

Haben Sie noch die CSS-Definitionen für die horizontale oder vertikale Navigation in Erinnerung? Sie können auch nachgucken ;-). Vergleichen Sie diese mit den CSS-Definitionen im Listing 4.8, dann sehen Sie eine weitere Definition: #header .mod_navigation .trail a. Dies macht die Kennzeichnung eines übergeordneten Menüpunktes in der Hauptnavigation möglich, wenn ein Untermenüpunkt ausgewählt wurde. Dies erleichtert dem Besucher die Orientierung. Für die Unternavigation ist dann dieser Teil der CSS-Definitionen zuständig (Listing 4.9): Listing 4.9 CSS-Definition für die Unternavigation

/* unternavigation */ #left .mod_navigation { font-family:verdana,arial,sans-serif; font-size:1.2em; position:absolute; top:20px; } #left .mod_navigation ul { list-style-type:none; margin:0; padding:0 0 0 10px; }


#left .mod_navigation li { padding:5px 0; } #left .mod_navigation a, #left .mod_navigation a:link, #left .mod_navigation a:visited { color:#000000; display:block; padding:0; text-decoration:none; } #left .mod_navigation a:hover { color:#DFAB2A; } #left .mod_navigation li.active { color:#DFAB2A; padding:5px 0; }

Sind alle CSS-Definitionen erstellt, wechseln Sie in die Frontendansicht und schauen sich das Ergebnis (Abbildung 4.23) an: Abbildung 4.23 Frontendansicht Navigation Haupt- und Untermenüpunkte

69

5 Menüs mit Spritegrafiken erstellen

72

K apite l 5

Neben der Ausgabe der Menüpunkte als CSS-formatierter HTML-Code lassen sich Menüpunkte auch als Grafiken einbinden. Ich zeige Ihnen in diesem Kapitel die Verwendung sogenannter Spritegrafiken für Menüs mit Grafiken. Eine Spritegrafik beinhaltet alle Menüzustände (normal, hover, active) für alle Menüpunkte in einer einzigen Grafik (Abbildung 5.1). Abbildung 5.1 Spritegrafik für fünf Menüpunkte und die Menüzustände normal und hover

Zu den Vorteilen des Einsatzes von Spritegrafiken gehört das Reduzieren der Seitenaufrufe (HTTP-Requests), anstatt der Verwendung von Einzelgrafiken, da für die Zustände (normal, hover, active) des gesamten Menüs nur eine Grafik geladen wird, anstatt für jeden einzelnen Menüpunkt eine eigene Grafik. Das sogenannte Aufblitzen eines Menüpunktes wird so verhindert. Websites wie Google und Yahoo! bedienen sich zum Beispiel dieser Technik. Die Verwendung von Schriftgrafiken für die Menübezeichnungen erlaubt es Ihnen, Schriften zu nutzen, die unabhängig von Browser- und Plattformkompatibilität eingesetzt werden können. Der Einsatz von plattformübergreifenden Schriften ist sonst auf einige wenige Schriften reduziert. Nachteile sind das zusätzliche Erstellen von Grafiken, sobald neue Menüpunkte hinzukommen, sowie eine größere Datenmenge, die zu laden ist, wenn die Seite aufgerufen wird. Hier hilft dann oft die Optimierung der Grafiken hinsichtlich der Dateigrößen. Im erweiterten Beispiel erfahren Sie, wie Sie alle Menüpunkte innerhalb einer Grafik definieren und diese gezielt mit CSS-Definitionen ansprechen.

5.1

Vorarbeiten – Erstellen der Menügrafiken

Alle Bilder, die für die Navigation benötigt werden – also alle Menüpunkte inklusive dem Hover-Zustand – müssen in einem Bildbearbeitungsprogramm erstellt werden. Alle Menüpunktgrafiken sollten die gleiche Größe besitzen – ebenso ist pixelgenaues Arbeiten im Bildbearbeitungsprogramm wichtig. Sinnvoll ist es auch, die Bezeichnung der Menügrafiken wie den Menüpunkt zu benennen. Beispiel: Menüpunkt Startseite → Menügrafik startseite.gif.

Menüs mit Spritegrafiken erstellen

5.2

Ein Bild pro Menüpunkt

Für die Navigation mit zwei Zuständen wird die sogenannte Spritegrafik eingesetzt. Hier werden die beiden Menüzustände innerhalb einer Grafik erstellt. Wird nun der Menüpunkt mit der Maus berührt (mouseover/rollover), verschiebt man durch die CSS-Definitionen nur die Koordinaten der Grafik, um den geänderten Menüzustand sichtbar zu machen. Der Vorteil dabei ist, dass nur eine Grafik je Menüpunkt geladen werden muss und der Rollover-Zustand sofort zur Verfügung steht. Das verhindert das Flackern – durch das verzögerte Nachladen der Grafiken beim Rollover-Zustand –, wenn für den Normal- und den Rollover-Zustand einzelne Grafiken geladen werden. Am einfachsten erstellt man die Grafiken nach dem immer gleichen Prinzip, d. h. die Grafiken für die unterschiedlichen Menüpunktzustände werden entweder neben- oder untereinander angeordnet. Die Grafik für den Menüpunkt Startseite sieht im Beispiel so aus (Abbildung 5.2): Abbildung 5.2 Menügrafik startseite.gif

Die Grafik ist 150 Pixel breit und 60 Pixel hoch (30 + 30 Pixel = Normal- plus Hoverzustand). Der obere Teil ist der Normalzustand, der untere Teil der Hoverzustand.

5.2.1 Übersicht der Seitenstruktur Für alle Seiten innerhalb der Seitenstruktur werden entsprechende CSS-Klassen eingesetzt. Abbildung 5.3 Seitenstruktur

In der Seitenstruktur vergibt man für jeden Eintrag die CSS-Klasse entsprechend der Menübezeichnung. Somit kann jedem Menüpunkt eine eigene Grafik zugewiesen werden.

73

74

K apite l 5

Abbildung 5.4 Definition der CSS-Klasse (hier Seite Portfolio)

Legen Sie zur besseren Übersicht ein Unterverzeichnis nur für die Menügrafiken an; hier im Beispiel menue im Verzeichnis tl_files.

5.2.2 CSS-Definitionen Das Menü wird im Beispiel in der linken Spalte (#left) ausgegeben; die dafür nötigen CSS-Definitionen lesen Sie in Listing 5.2. Nachfolgend finden Sie zunächst die Angaben, die für alle Elemente gelten (Listing 5.1): Listing 5.1 CSS-Definitionen für alle Elemente

/* Definition Menue */ #left .mod_navigation { width:150px; } #left .mod_navigation ul { margin:0; padding:0; list-style-type:none; } #left .mod_navigation li { margin:0; padding:0; } #left .mod_navigation a, #left .mod_navigation span { height:30px; display:block; text-indent:-3000px; background-repeat: none; } #left .mod_navigation a:link, #left .mod_navigation a:visited { background-position: top left; } #left .mod_navigation a:hover, #left .mod_navigation a:focus, #left .mod_navigation a:active, #left .mod_navigation span { background-position: 0 -30px; }


Für jeden Link wird die Höhe des Elements (hier im Beispiel: 30px) definiert. Mit der Eigenschaft text-indent:-3000px; wird der normale Textlink 3000 Pixel nach links außerhalb des Browserfensters verschoben und somit optisch unsichtbar. Für Suchmaschinen ist der Menüpunkt weiterhin als indizierbarer Textlink vorhanden. Für den Normalzustand des Menüpunktes sitzt die Hintergrundgrafik auf den Koordinaten 0 0 (dies entspricht left top).

Eine feste Höhe in Pixel sollte vermieden werden, wenn Sie z. B. Websites erstellen, die Anforderungen an Skalierbarkeit (Zoom) stellen.

Für den Hover- und Aktivzustand wird die Hintergrundgrafik um 30 Pixel nach oben (-30px) verschoben, da die Grafik so angelegt wurde, dass der Bereich der Grafik für den Aktivzustand unter dem Bereich des normalen Zustandes angeordnet ist. Die CSS-Definitionen für die einzelnen Menüpunkte sehen Sie in Listing 5.2: /* Definition Menuepunkte */ #left .mod_navigation .startseite a, #left .mod_navigation .startseite a:link, #left .mod_navigation .startseite a:visited { background:url(tl_files/menue/menue.gif) no-repeat } #left .mod_navigation .startseite a:hover, #left .mod_navigation .startseite a:focus, #left .mod_navigation .startseite a:active, #left .mod_navigation .startseite span { background:url(tl_files/menue/menue.gif) no-repeat } #left .mod_navigation .referenzen a, #left .mod_navigation .referenzen a:link, #left .mod_navigation .referenzen a:visited { background:url(tl_files/menue/menue.gif) no-repeat } #left .mod_navigation .referenzen a:hover, #left .mod_navigation .referenzen a:focus, #left .mod_navigation .referenzen a:active, #left .mod_navigation .referenzen span { background:url(tl_files/menue/menue.gif) no-repeat } #left .mod_navigation .portfolio a, #left .mod_navigation .portfolio a:link, #left .mod_navigation .portfolio a:visited { background:url(tl_files/menue/menue.gif) no-repeat } #left .mod_navigation .portfolio a:hover, #left .mod_navigation .portfolio a:focus, #left .mod_navigation .portfolio a:active, #left .mod_navigation .portfolio span { background:url(tl_files/menue/menue.gif) no-repeat

Listing 5.2 CSS-Definitionen für die einzelnen Menüpunkte top left;

0 -30px;

-150px 0;

-150px -30px;

-300px 0;

-300px -30px;

75

76

K apite l 5

} #left .mod_navigation .kontakt a, #left .mod_navigation .kontakt a:link, #left .mod_navigation .kontakt a:visited { background:url(tl_files/menue/menue.gif) no-repeat -450px 0; } #left .mod_navigation .kontakt a:hover, #left .mod_navigation .kontakt a:focus, #left .mod_navigation .kontakt a:active, #left .mod_navigation .kontakt span { background:url(tl_files/menue/menue.gif) no-repeat -450px -30px; }

Wenn Sie nun in die Frontendansicht wechseln und die Website aufrufen, wird das Menü mit den Grafiken dargestellt (Abbildung 5.5). Abbildung 5.5 Frontendansicht Menü

5.3

Ein Bild für alle Menüpunkte

Um eine einzige Spritegrafik für das Menü zu nutzen, wird eine Grafik erstellt, die die Zustände aller Menüpunkte enthält. Diese Grafik sieht dann so aus (Abbildung 5.6): Abbildung 5.6 Spritegrafik für Menübezeichnung

Abbildung 5.7 Koordinaten der Grafik

Die Grafik ist nun 750 Pixel breit (5 x 150px) und 60 Pixel hoch (30 + 30 Pixel = Normal- plus Hoverzustand). Die jeweiligen Zustände der Menüpunkte werden erneut durch das Verschieben der Koordinaten erreicht.


Beispiel Menüpunkt Referenzen: (normaler Zustand): -150px (nach links), 0px (nach oben) (Hover-/Aktiv-Zustand): -150px (nach links), -30px (nach oben)

5.3.1 CSS-Definitionen Die CSS-Definitionen für das Navigationsmenü mit einer Grafik für alle Menüpunkte (Listing 5.3) lauten so: /* Definition Menue */ #left .mod_navigation { width:150px; } #left .mod_navigation ul { margin:0; padding:0; list-style-type:none; } #left .mod_navigation li { margin:0; padding:0; } #left .mod_navigation a, #left .mod_navigation span { height:30px; display:block; text-indent:-3000px; background-repeat: none; } #left .mod_navigation .startseite a, #left .mod_navigation .startseite a:link, #left .mod_navigation .startseite a:visited { background:url(tl_files/menue/menue.gif) no-repeat top left; } #left .mod_navigation .startseite a:hover, #left .mod_navigation .startseite a:focus, #left .mod_navigation .startseite a:active, #left .mod_navigation .startseite span { background:url(tl_files/menue/menue.gif) no-repeat 0 -30px; } #left .mod_navigation .referenzen a, #left .mod_navigation .referenzen a:link, #left .mod_navigation .referenzen a:visited {

Listing 5.3 CSS-Definitionen für alle Menüpunkte

77

78

K apite l 5

background:url(tl_files/menue/menue.gif) no-repeat } #left .mod_navigation .referenzen a:hover, #left .mod_navigation .referenzen a:focus, #left .mod_navigation .referenzen a:active, #left .mod_navigation .referenzen span { background:url(tl_files/menue/menue.gif) no-repeat } #left .mod_navigation .portfolio a, #left .mod_navigation .portfolio a:link, #left .mod_navigation .portfolio a:visited { background:url(tl_files/menue/menue.gif) no-repeat } #left .mod_navigation .portfolio a:hover, #left .mod_navigation .portfolio a:focus, #left .mod_navigation .portfolio a:active, #left .mod_navigation .portfolio span { background:url(tl_files/menue/menue.gif) no-repeat } #left .mod_navigation .kontakt a, #left .mod_navigation .kontakt a:link, #left .mod_navigation .kontakt a:visited { background:url(tl_files/menue/menue.gif) no-repeat } #left .mod_navigation .kontakt a:hover, #left .mod_navigation .kontakt a:focus, #left .mod_navigation .kontakt a:active, #left .mod_navigation .kontakt span { background:url(tl_files/menue/menue.gif) no-repeat } #left .mod_navigation .impressum a, #left .mod_navigation .impressum a:link, #left .mod_navigation .impressum a:visited { background:url(tl_files/menue/menue.gif) no-repeat } #left .mod_navigation .impressum a:hover, #left .mod_navigation .impressum a:focus, #left .mod_navigation .impressum a:active, #left .mod_navigation .impressum span { background:url(tl_files/menue/menue.gif) no-repeat }

-150px 0;

-150px -30px;

-300px 0;

-300px -30px;

-450px 0;

-450px -30px;

-600px 0;

-600px -30px;


79

Um das Menü horizontal anzuordnen, ergänzen bzw. ändern Sie folgende Definitionen ab (Listing 5.4): #left .mod_navigation { width:750px; }

Und für das Listenelemente li noch (Listing 5.5): #left .mod_navigation li { margin:0; padding:0; float:left; }

Mit der Anweisung float:left; werden die Menüs nebeneinander dargestellt. Für die richtige Darstellung der Grafiken verschieben Sie nun die Koordinaten entsprechend.

Listing 5.4 Die Eigenschaft float:left; für die horizontale Anordnung der Menüpunkte

Listing 5.4 Anpassung des Listen elementes li für die horizontale Anordnung der Menüpunkte

Drucken Sie sich die Grafik des gesamten Menüs aus oder skizzieren Sie sich auf ein Blatt Papier das Menü und die jeweiligen Koordinaten – das erleichtert die Zuordnung beim Erstellen der CSS-Definitionen.

6 Unterschiedliche Headerbilder pro Seite anzeigen

82

K apite l 6

Oft wünscht man sich auf einer Website etwas Abwechslung für den Besucher, ohne jedoch diese Dynamik von Hand anzulegen. Die erste, naheliegendste Lösung ist das Einbinden eines Bildes auf jeder Seite. Dazu müssten Sie in jedem Artikel ein Inhaltselement Bild anlegen – eine statische Angelegenheit. TYPOlight bietet hier das Inhaltselement Zufallsbild an. Mit diesem Inhaltselement ist es möglich, mehrere Bilder aus einem vorgegebenen Ordner per Zufall anzeigen zu lassen. Es wird zufällig pro Seitenaufruf ein Bild geladen. Sie möchten das Ganze aber noch dynamischer gestalten? Und die Bilder nicht manuell für jeden Artikel einer Seite anlegen und auch nicht zufällig anzeigen lassen? Sondern für jede Seite ein spezielles Bild anzeigen? Ich zeige Ihnen zwei Möglichkeiten, wie Sie das erreichen.

6.1

Mit CSS-Definitionen

Werfen Sie zunächst einen Blick auf die Seitenstruktur und die einzelnen Seiten. Öffnen Sie dazu im Backend die Seitenstruktur und klicken auf das Editier-Icon für die Seite Portfolio. Unter der Einstellung Experten-Einstellungen finden Sie ein Eingabefeld für die CSS-Klasse. Dort tragen Sie nun portfolio ein und speichern die Seite (Abbildung 6.1). Abbildung 6.1 Definition einer CSS-Klasse (body class)

Ab sofort besitzt die Seite Portfolio eine sogenannte body class. Schauen Sie sich den Quellcode der Seite portfolio.html an und suchen Sie im Quellcode den öffnenden body-Tag (Abbildung 6.2): Abbildung 6.2 body class im Quellcode

Durch die Ergänzung der CSS-Klasse für die Seite Portfolio wird exakt diese Seite durch die CSS-Klasse portfolio ansprechbar. Alle CSS-Definitionen, die für Elemente nur auf dieser Seite gelten sollen, schreiben Sie nun immer mit vorangestellter body class (Listing 6.1): Listing 6.1 Beispiel body class für die Seite Portfolio

body.portfolio .ce_text { color:#000; }

Unterschiedliche Headerbilder pro Seite anzeigen

Diese Formatierung definiert für das Inhaltselement Text die Farbe Schwarz auf der Seite Portfolio. Mit der Vergabe einer body class lassen sich schnell seitenspezifische Formatierungen anlegen. Ein Beispiel: Sie möchten auf jeder Seite im Kopfbereich (#header) ein anderes Bild anzeigen lassen. Definieren Sie dazu für die Seiten Startseite, Fotograf, Portfolio, Kontakt und Impressum die entsprechenden CSS-Definitionen (Listing 6.2). body.startseite #header { background:url(tl_files/kopfbilder/startseite.jpg) no-repeat left top; } body.fotograf #header { background:url(tl_files/kopfbilder/fotograf.jpg) no-repeat left top; } body.portfolio #header { background:url(tl_files/kopfbilder/portfolio.jpg) no-repeat left top; } body.kontakt #header { background:url(tl_files/kopfbilder/kontakt.jpg) no-repeat left top; } body.impressum #header { background:url(tl_files/kopfbilder/impressum.jpg) no-repeat left top; }

Anhand der CSS-Definitionen können Sie erkennen, dass die jeweilige bodyKlasse das Element #header durch die Verlinkung zu einem spezifischen Hintergrundbild definiert. Ich habe im Beispiel dazu im Verzeichnis tl_files ein Unterverzeichnis kopfbilder angelegt, in dem alle Bilder für den Kopfbereich gespeichert werden. Am sinnvollsten ist es, eine Reihenfolge beim Erstellen einzuhalten – aus der Praxis hat sich folgender Workflow bewährt: 1. Erstellen aller benötigten Bilder in gleicher Breite und Höhe 2. Anlegen eines neuen Verzeichnisses innerhalb des Verzeichnisses tl_files und entsprechende Benennung 3. Hochladen der Bilder in das Unterverzeichnis

83

Sinnvollerweise ver geben Sie die Klasse(n) gleich beim Anlegen neuer Seiten.

Listing 6.2 CSS-Definitionen für unterschiedliche Kopfbilder pro Seite

Achten Sie darauf, dass alle Bilder die gleiche Größe haben, um ein einheitliches Erscheinungsbild zu gewährleisten.

84

K apite l 6

Wenn Sie eine Unterseite zu einer Seite haben, können Sie auch hier individuelle Kopfbilder per CSS definieren, indem Sie diesen Unterseiten entsprechend eine eigene CSS-Klasse vergeben. Sollen auch die Unterseiten einer Seite das gleiche Kopfbild verwenden, so definieren Sie für diese Unterseiten die gleiche CSS-Klasse wie für die übergeordnete Seite; im Beispiel p ortfolio.

4. Hinzufügen der CSS-Definitionen im CSS-Dokument 5. Testen der Seiten

6.2

Mit Insert-Tags

Gegenüber der ersten Methode zur Einbindung unterschiedlicher Bilder pro Seite, lassen sich die Bilder auch über Insert-Tags 1 einbinden. Insert-Tags sind Platzhalter, die bei der Ausgabe durch bestimmte Werte ersetzt werden. Während im ersten Beispiel alle Seiten durch die Vergabe der body class und der CSS-Definitionen ein Kopfbild zugewiesen bekommen, werden in diesem Beispiel die Bilder über Insert-Tags eingebunden. Der Unterschied: Die Dateinamen sind entsprechend dem Seitenalias zu benennen, da der Code den Namen des Seiten alias mit dem Dateinamen des Bildes vergleicht. Um die Bilder auf den jeweiligen Seiten anzeigen zu können, definieren Sie ein neues Modul. Klicken Sie dazu im Backend auf Layout → Module und auf den Link Neues Modul. Vergeben Sie einen Modulnamen, z. B. Kopfbilder. Als Modultyp wählen Sie hier Eigener HTML-Code. Fügen Sie nun folgenden Code (Listing 6.3) ein:

Listing 6.3 Code für die dynamische Einbindung von Bildern

Abbildung 6.3 Definieren eines Moduls für die Kopfbilder

1 http://www.typolight.org/typolight-insert-tags.html

Unterschiedliche Headerbilder pro Seite anzeigen

Die Angaben schreiben Sie bei allen Modulen vom Modultyp Eigener HTML-Code dazu; TYPOlight schließt alle dazwischen befindlichen HTML-Auszeichnungen von der Suche aus. Der Code ruft die Bilder auf. Das Modul ist soweit erstellt. Im nächsten Schritt laden Sie die Bilder in das Unterverzeichnis kopfbilder. Um die Bilder auf der Website anzuzeigen, platzieren Sie das Modul in das Seitenlayout im Kopfbereich. Klicken Sie dazu im Backend in Layout → Seitenlayouts und wählen Sie das Seitenlayout zum Bearbeiten durch Klicken auf das Editier-Icon aus. Scrollen Sie bis zur Rubrik Frontend-Module und klicken dort auf das grüne Plus-Icon im obersten Eintrag und wählen für Modul das eben erstellte Modul Kopfbilder und für die Spalte Kopfzeile aus (Abbildung 6.4). Speichern und schliessen Sie das Seitenlayout.

Wichtig ist bei dieser Methode die Benennung der Bilder nach Seitenalias und das Abspeichern aller Bilddateien im JPG-Format. Bei Änderungen der Seitenaliase müssen Sie auch die Bildnamen entsprechend anpassen! Kommen neue Seiten hinzu, vergessen Sie nicht, ein entsprechendes Bild in das Verzeichnis kopfbilder zu legen! Wenn Sie ein gleiches Bild für eine Unterseite verwenden wollen, duplizieren Sie das Bild und benennen es dem Seitenalias ent sprechend.

Abbildung 6.4 Einbinden des Moduls Kopfbilder in das Seitenlayout

Wechseln Sie nun in die Frontendansicht, klicken Sie auf die einzelnen Menüpunkte und kontrollieren Sie, ob pro unterschiedlicher Seite die jeweiligen Bilder richtig ausgegeben werden. Nun haben Sie dynamische Kopfbilder in Ihrer Website über Insert-Tags eingebunden.

85

7 Aufbau einer Website mit TYPOlight

88

K apite l 7

Anhand einer fiktiven Website für einen Fotografen möchte ich Ihnen zeigen, wie Sie eine Website erfolgreich Schritt für Schritt mit TYPOlight erstellen. Zunächst zur Ausgangssituation: Sie erhalten einen Anruf eines Fotografen, der seine Bilder einfach und selbstständig zeitnah auf seiner Website präsentieren möchte. Die Bedienung soll einfach und nachvollziehbar sein – schließlich ist sein Kerngeschäft die Fotografie und nicht Webdesign und -Programmierung. Sie sammeln im Gespräch mit dem Fotografen weitere Stichpunkte für die Website, wie: ◆◆ Farben ◆◆ visuell reduzierte Darstellung ◆◆ kein Logo ◆◆ einfache Gliederung der einzelnen Seiten ◆◆ ein Kontaktformular Sie machen sich nach dem Gespräch weitere Notizen und erste Ideenskizzen und erstellen ein Angebot. Nach wenigen Tagen erhalten Sie die Freigabe, die Website auf Basis Ihres Angebots und mit TYPOlight umzusetzen. Die Zugangsdaten zum Hoster des Fotografen haben Sie erhalten, alle Voraussetzungen für eine erfolgreiche Installation überprüft und TYPOlight daraufhin installiert. Sie machen sich in den nächsten Tagen an die Ideenfindung und halten die ersten Überlegungen mit kleinen Skizzen fest; detaillierte Darstellungen werden hier nicht benötigt. Abbildung 7.1 Ideenfindung für die Website

Aufbau einer Website mit T YPO light

Was sich herauskristallisiert: Die Website soll ◆◆ immer horizontal zentriert im Browserfenster angezeigt werden, ◆◆ ein wechselndes Bildmotiv soll im Kopfbereich angezeigt werden und ◆◆ die Navigation soll horizontal über den Bildern im Kopfbereich platziert werden. Abbildung 7.2 Skizzen zur Navigation

Die Navigation könnte elegant aussehen, wenn sie „schwebend“ über den Kopfbildern platziert wäre … Transparenz würde die Navigation beispielsweise noch eleganter und schwebend aussehen lassen. Über die konkrete technische Umsetzung machen Sie sich später Gedanken; kleine Notizen diesbezüglich halten Sie auf den Skizzen jedoch schon fest. Weitere Überlegungen zur Darstellung der Bilder folgen.

89

90

K apite l 7

Abbildung 7.3 Bildergalerie Anordnungen und Details

Erste skizzierte Ideen (Abbildung 7.3) zur Aufteilung und Anordnung der Bildergalerien und Überlegungen zu kleinen visuellen Details werden notiert: ◆◆ Vorschaubilder nicht zu klein darstellen ◆◆ ggf. einen Hover-Effekt für die Vorschaubilder ◆◆ einen Schlagschatten einfügen Sobald Sie diese Überlegungen skizziert haben, folgt das Design in präziserer Darstellung z. B. in Form eines Photoshop-Composings, das folgendermaßen aus sehen könnte (Abbildungen 7.4 und 7.5):


91

Abbildung 7.4 Screendesign in Photoshop

Dieses Design findet die Zustimmung des Fotografen, sodass Sie mit der Umsetzung der Website in TYPOlight starten können. Abbildung 7.5 Startseite der FotografenWebsite

92

K apite l 7

7.1

Schritt-für-Schritt-Umsetzung der Website

Nachdem Sie gleich nach der Auftragserteilung TYPOlight erfolgreich installiert1 haben, nehmen Sie die grundsätzlichen Einstellungen von TYPOlight vor. Rufen Sie dazu die Seite für den Zugang zum Backend auf. In der Regel lautet der Aufruf www.ihredomain.tld/typolight. Haben Sie TYPOlight in einem Unterverzeichnis installiert, geben Sie den Pfad entsprechend ein: www.ihredomain.tld/ unterverzeichnis/typolight. Abbildung 7.6 Login in das Backend von TYPOlight

Geben Sie nun Ihre Zugangsdaten (Administratordaten, die Sie bei der Installation im letzten Schritt angegeben haben) ein und melden sich im Backend von TYPOlight an:

1 http://www.typolight.org/installationsanleitung.html


93

Abbildung 7.7 Backend nach dem Anmelden

Nehmen Sie im ersten Schritt nach der Anmeldung im Backend die Einstellungen vor, die systemübergreifend sind, wie Titel der Website, Datum, Uhrzeit und Zeitzone. Der folgende Ablauf hat sich in der Praxis bewährt: Öffnen Sie im Backend unter System den Menüpunkt Einstellungen und geben unter Titel der Website den Titel der Website ein. Aus diesen Angaben wird später auch der Websitename im Titel gebildet – vorangestellt wird der Seitenname. Beispiel für die Seite Portfolio: Portfolio (Seitentitel) – Fotograf Hänk Hüperle (Titel der Website) Im Browserfenster wird dies dann so angezeigt: Abbildung 7.8 Seitentitel und WebsiteName im Firefox

Der Seitentitel und der Titel der Website sind aus folgenden Gründen wichtig: ◆◆ Suchmaschinen werten diese Angaben aus (Ranking, Suchergebnisse) ◆◆ Benutzer, die ein Lesezeichen (Bookmark) setzen, finden dieses in den Lesezeichen wieder

Ändern Sie dies am besten gleich am Anfang; viele Websites im Internet, die mit TYPOlight erstellt und deren Standardeintrag nicht geändert wurde, sind unter „TYPOlight CMS“ zu finden.

94

K apite l 7

Abbildung 7.9 Systemrelevante Einstellungen vornehmen

Überprüfen Sie einmal durch eine Suche bei Google nach „Untitled Document“, wie viele Websites nicht auf diesen wichtigen Punkt achten: Über 25 Millionen Websites, denen der Seitentitel egal zu sein scheint – erstaunlich oder?

Im nächsten Schritt definieren Sie Datum- und Zeitformat2 sowie die Zeitzone. Für eine deutschsprachige Website mit Serverstandort Deutschland tragen Sie Folgendes ein: Datumsformat: d.m.Y – ergibt dann in der Ausgabe: 22.02.2010 Zeitformat: H:i – ergibt dann in der Ausgabe: 14:34 Beides kombiniert geben Sie dann unter Datums- und Zeitformat ein: d.m.Y H:i – ergibt dann in der Ausgabe: 22.02.2010 14:34

Für die Zeitzone wählen Sie Europe/Berlin aus. Somit haben Sie die im Moment wichtigsten Einstellungen vorgenommen und können die Einstellungen Speichern und schliessen.

7.2

Aufbau der Seitenstruktur

Als Nächstes bauen Sie die Seitenstruktur auf; auf dieser basieren die Menüpunkte und Sie können darin Artikel anlegen und diese mit Inhalten füllen. Klicken Sie dazu unter Layout auf Seitenstruktur und dann im Kopfbereich auf Neue Seite. Es erscheint ein erster Eintrag, benannt nach dem Titel der Website, den Sie im vorherigen Schritt angelegt haben. Abbildung 7.10 Aufbau der Seitenstruktur – Anlegen einer neuen Seite

2 http://www.php.net/date


95

Auf der rechten Seite sehen Sie nun das – blinkende – Icon zum Einfügen einer neuen Seite. Klicken Sie darauf, um eine neue Seite zu erstellen. Abbildung 7.11 Anlegen einer neuen Seite

Wie in Abbildung 7.11 abgebildet, sehen Sie die Eingabemaske für eine neue Seite. Die erste Seite, die Sie immer zuerst anlegen, ist eine Seite vom Seitentyp Startpunkt einer Website. Wählen Sie diese Option aus dem Menü Seitentyp aus. Die nun angezeigte Seite wird eingerichtet (Abbildung 7.12). Abbildung 7.12 Startpunkt einer Website

Vergeben Sie anschließend unter der Rubrik Name und Typ einen eindeutigen Seitennamen – der für den Seitentyp Startpunkt einer Website gleich lautend wie die Website (Domain) heißen kann. Der Seitenalias wird beim Speichern automatisch vergeben. Der Seitenalias bildet später beim Aufruf Ihrer Website im Browser den Seitennamen. TYPOlight wandelt Umlaute und Sonderzeichen des Seitennamens automatisch um. Sie können auch den Seitenalias manuell eingeben. TYPOlight

96

K apite l 7

weist Sie auch durch eine Meldung darauf hin, wenn Sie einen gleichen Seiten alias zweimal vergeben wollen. Wenn Sie im Bereich Meta-Informationen einen Seitentitel vergeben, wird dieser Seitentitel anstatt des Seitennamen verwendet. Lassen Sie den Seitentitel leer, wird der Seitenname verwendet. Füllen Sie nun die Felder im Bereich Meta-Informationen aus. Sie erkennen aus dem vorherigen Schritt der Einstellungen einige Felder (Datumsformat, Zeitformat und Datums- und Zeitformat) wieder; tragen Sie hier wiederum die gleichen Werte ein. Abbildung 7.13 Sprachen-Fallback und Seite veröffentlichen

Da Suchmaschinen wie Google bzw. deren Spider (Suchroboter) englischsprachig sind, wird Ihre Website ohne diese Einstellung keine großen Chancen haben, in die Trefferlisten zu gelangen – da auch diese Suchroboter keinen Inhalt angezeigt bekommen, wenn die Option Sprachen-Fallback nicht aktiviert wurde.

Im Bereich DNS-Einstellungen aktivieren Sie (Abbildung 7.13) die Option Sprachen-Fallback. TYPOlight kann mehrere Websites innerhalb einer Installation verwalten. Diese können sich z. B. anhand unterschiedlicher Sprachen oder unabhängiger Domains unterscheiden. Seiten vom Seitentyp Startpunkt einer Website dienen zur Abgrenzung der einzelnen Websites in der Seitenstruktur. TYPOlight versteht sich auf mehrsprachige Websites und unterscheidet anhand der Browsersprache, auf welche Seiten der Benutzer geleitet wird, wenn er Ihre Website aufruft. Selbst wenn Sie nur eine einsprachige (z. B. deutschsprachige) Website erstellen, aktivieren Sie den Sprachen-Fallback. Die Option SprachenFallback ist notwendig, damit Benutzer aus anderen Ländern, auf jeden Fall mit anderssprachigen Browsern, die Inhalte Ihrer Website angezeigt bekommen. Anderenfalls bekommen Besucher Ihrer Website ein schlichtes No pages found angezeigt.


Im Bereich Veröffentlichung aktivieren Sie die Option Seite und Speichern und schliessen die Seite.

97

veröffentlichen

Die Seitenstruktur sieht nun so aus (Abbildung 7.14): Abbildung 7.14 Seitenstruktur mit Seitentyp Startpunkt einer Website

Die soeben angelegte Seite wird später nicht im Menü angezeigt, sondern dient der internen Organisation von Optionen wie Sprachen-Fallback und Datums- und Zeitformat. Alle nun zu erstellenden Seiten werden innerhalb der soeben angelegten Seite angelegt – erscheinen also nach rechts eingerückt in der Ansicht der Seitenstruktur (Abbildung 7.18). Legen Sie jetzt die weiteren Seiten Startseite, Vita, Portfolio, Kontakt und Impressum an. Ich zeige Ihnen dies im Beispiel exemplarisch für die Startseite. Alle anderen Seiten legen Sie dann nach dem gleichen Prinzip an. Klicken Sie dazu wieder im Kopfbereich auf Neue Seite. Sie erhalten dann folgende Darstellung (Abbildung 7.15): Abbildung 7.15 Neue Seite hinzufügen

Sie sehen nun zwei – blinkende – Icons zum Einfügen der neuen Seite. Klicken Sie innerhalb der Seite vom Seitentyp Startpunkt einer Website auf das Icon mit dem nach rechts zeigenden Pfeil. Das bedeutet, die neue Seite wird innerhalb dieser Seite angelegt. Sie erhalten wieder die Eingabemaske für eine neue Seite (Abbildung 7.16). Hier lassen Sie den Standardeintrag für den Seitentyp auf Reguläre Seite und geben den Seitenname Startseite ein und aktivieren unter Veröffentlichung Seite veröffentlichen und Speichern und schliessen die Seite.

98

K apite l 7

Abbildung 7.16 Anlegen der Seite Startseite

Die Ansicht der Seitenstruktur sieht nun wie folgt aus (Abbildung 7.17): Abbildung 7.17 Ansicht Seitenstruktur

Die eben erstellte Seite Startseite ist innerhalb der Seite Fotograf Hänk Hüperle angelegt; klicken Sie nun links auf das vorangestellte Icon mit dem PlusZeichen, um die Seitenstruktur mit aufgeklappten Seiten anzuzeigen. Alternativ klicken Sie oben rechts auf Alle öffnen/schliessen. Die Darstellung ändert sich (Abbildung 7.18). Abbildung 7.18 Seitenstruktur mit sichtbarer Seitendarstellung


99

Fügen Sie nachfolgend alle weiteren Seiten ein. Achten Sie dabei darauf, dass Sie die folgenden Seiten durch Klick auf das Icon mit dem Pfeil nach unten einfügen. Nach dem Anlegen aller weiteren Seiten sollte ein Blick auf die Seitenstruktur so aussehen (Abbildung 7.19): Abbildung 7.19 Ansicht Seitenstruktur nach Anlegen weiterer Seiten

Zwei weitere Seiten sind Ihnen in der Übersicht (Abbildung 7.19) sicher aufgefallen: Zugriff verweigert und Seite nicht gefunden. Für beide Seitentypen können Sie einen Artikel innerhalb dieser Seiten anlegen und darauf hinweisen, dass keine Zugriffsrechte für die Seite bestehen oder die aufgerufene Seite nicht mehr existiert. Alternativ können Sie auch auf eine andere Seite innerhalb der TYPOlight-Installation – hier im Beispiel auf die Startseite – verlinken. Die Seite Zugriff verweigert (Fehler 403) wird dann aufgerufen, wenn für eine Webseite keine Zugriffsrechte bestehen (z. B. bei Verwendung von Frontendbenutzern wie Mitglieder einer Website). Legen Sie die Seite mit dem Seitentyp 403 Zugriff verweigert an und wählen in der Rubrik Auto-Weiterleitung die Option Zu einer anderen Seite weiterleiten aus. Im Menü des Weiterleitungstyp wählen Sie die Option 301 Permanente Weiterleitung aus, wenn es sich um eine permanente Weiterleitung handelt oder die Option 302 Temporäre Weiterleitung, wenn die Weiterleitung nur vorübergehend eingerichtet wird. Für die Weiterleitungsseite wählen Sie, hier im Beispiel, die Seite Startseite aus. Aktivieren Sie in der Rubrik Veröffentlichung die Option Seite veröffentlichen und Speichern und schliessen die Seite (Abbildung 7.20).

100

K apite l 7

Abbildung 7.20 Seitentyp 403 Zugriff verweigert

Die Seite Seite nicht gefunden (Fehler 404) wird aufgerufen, wenn ein Benutzer z. B. eine URL nicht richtig in der Adresszeile eingegeben hat oder einem veralteten und nicht mehr gültigen Link einer Suchmaschine folgte. Richten Sie die Seite vom Seitentyp 404 Seite nicht gefunden analog zur Seite vom Seitentyp 403 Zugriff verweigert ein (Abbildung 7.21).


101

Abbildung 7.21 Seitentyp 404 Seite nicht gefunden

Nachdem Sie die Seitenstruktur erstellt haben, werden Sie im folgenden Schritt das Einrichten des Seitenlayouts kennen lernen. Im Seitenlayout legen Sie die Aufteilung der Inhalte Ihrer Website und die Platzierung der Module fest und binden die CSS-Dokumente ein.

102

K apite l 7

7.3

Seitenlayout anlegen

Klicken Sie im Backend unter Layout auf Seitenlayouts und im Kopfbereich auf Neues Layout (Abbildung 7.22). Abbildung 7.22 Ein neues Seitenlayout erstellen

Das Seitenlayout wird als Standardlayout definiert und im Beispiel auch so benannt. Geben Sie im Bereich Titel und Standard den Titel für das Seitenlayout ein und aktivieren Sie Standardlayout (Abbildung 7.23). Abbildung 7.23 Definitionen des Seitenlayouts

Wenn Sie ein Seiten layout als Standardlayout definieren, ermöglicht Ihnen dies die Zuordnung für alle Seiten der Website. Sie müssen somit nicht mehr jeder einzelnen Seite ein Seitenlayout zuweisen, sondern nur noch den Seiten, für die Sie ein abweichendes Seitenlayout verwenden möchten.

Fügen Sie im Bereich Kopf- und Fusszeile jeweils die Höhe in Pixeln ein, da das Design auf festen Größen basiert.


103

Abbildung 7.24 Spaltenkonfiguration

Im Bereich Spaltenkonfiguration gibt Ihnen TYPOlight vier Standardvorschläge für die Aufteilung der Website vor, die dem Großteil typischer Webseitenlayouts entsprechen (Abbildung 7.24). Für das Beispiel verwenden Sie die zweite Version mit linker Spalte und Hauptspalte. Für die Breite der linken Spalte definieren Sie ein Breite von 200 Pixel. Das TYPOlight-Framework erstellt aus den Angaben des Seitenlayouts die CSS-Definitionen, die Sie dann in der Codeansicht im Head-Bereich sehen (Listing 7.1): <style type="text/css" media="screen">

Da die Angaben aus den Einstellungen des Seitenlayouts als Inline-Style im Quellcode der Webseite ausgegeben werden, wird durch die Verwendung der CDATA-Anweisung3 dem Browser mitgeteilt, dass das Markup unterbrochen wird und normaler Text folgt. Somit bleibt der Code valide.

Da noch keine CSS-Dateien angelegt wurden, erscheint in der Rubrik HeadBereich für die Stylesheets Keine Einträge gefunden. Das folgt nun im nächsten Schritt – zunächst vervollständigen Sie noch die Angaben für das Seitenlayout (Abbildung 7.25).

3 http://de.wikipedia.org/wiki/CDATA

Listing 7.1 CSS-Definitionen aus Angaben im Seitenlayout

104

K apite l 7

Zum Bereich Frontend-Module kommen Sie später noch einmal zurück, wenn Sie die einzelnen Module erstellt haben und Sie diese dann in diesem Bereich einbinden. Den Bereich Experten-Einstellungen lassen Sie für diesen Schritt einmal so, wie er ist. Für diesen Schritt ist noch die letzte Rubrik Statisches Layout wichtig; setzen Sie die Gesamtbreite in diesem Beispiel auf 960 Pixel und wählen unter Ausrichtung Zentriert aus. Speichern und schliessen Sie das Seitenlayout. Abbildung 7.25 Seitenlayout konfigurieren

7.4

Seitenlayouts der Seitenstruktur zuweisen

Bevor Sie nun die CSS-Dokumente erstellen, wird noch das soeben erstellte Seitenlayout der Seitenstruktur zugewiesen, damit alle Seite das gleiche Seitenlayout verwenden. Seitenlayouts, die einer übergeordneten Seite zugewiesen werden, werden auf die darunter liegenden Seiten vererbt. Klicken Sie dazu im Backend auf Layout und wählen dort Seitenstruktur aus (Abbildung 7.26) und klicken auf das Editier-Icon des Seitentyp Startpunkt einer Website:


Abbildung 7.26 Zuweisen des Seitenlayouts (1)

Öffnen Sie die Rubrik Layout-Einstellungen und wählen das gewünschte Seitenlayout aus (Abbildung 7.27); da nur dieses eine Seitenlayout existiert, wird es in der Auswahl direkt angezeigt. Speichern und schliessen Sie die Seite. Abbildung 7.27 Zuweisen des Seitenlayouts (2)

105

106

K apite l 7

Jetzt haben Sie allen Seiten das Standardlayout zugewiesen. Alle Änderungen und Ergänzungen, die Sie nun im Seitenlayout vornehmen, wirken sich auf alle Seiten aus.

7.5

Erstellen der CSS-Dateien

Um später die Module und Inhaltselemente mit CSS definieren zu können, benötigt die Website nun noch die CSS-Dateien, die das Aussehen und die Platzierung der einzelnen Elemente festlegen. Diesen Elementen können durch die CSSDefinitionen Farbwerte und Schriften zugeordnet, Zeilenabstände definiert, Navigationen horizontal oder vertikal ausgerichtet werden und vieles mehr. Durch die strikte Trennung von Code (Struktur/Semanik) und Design können alle Elemente durch CSS visuell verändert und „angesteuert“ werden, ohne dass in den Quellcode eingegriffen werden muss. Wie Sie beim Erstellen des Seitenlayouts schon gesehen haben, werden die CSSDateien dort eingebunden. Zum Erstellen der CSS-Dateien öffnen Sie im Backend unter Layout Stylesheets. Im Kopfbereich klicken Sie auf Neues Stylesheet (Abbildung 7.28). Abbildung 7.28 Ein neues Stylesheet erstellen

Ich verwende in der Regel drei CSS-Dateien: standard.css für Layout und alle Elemente, navigation.css für die Navigationen und print.css, wenn auch die Druckausgabe erforderlich ist.


107

Abbildung 7.29 Definition der CSS-Datei standard.css

Geben Sie dem neuen Stylesheet (Abbildung 7.29) den Namen standard. Da diese CSS-Datei die Ausgabe auf dem Bildschirm steuern soll, wählen Sie unter Medientypen screen und Speichern und schliessen die CSS-Datei. Erstellen Sie eine zweite CSS-Datei mit Namen navigation und wählen dafür ebenfalls unter Medientyp screen aus und Speichern und schliessen die CSS-Datei.

7.6

CSS-Dateien ins Seitenlayout einbinden

Binden Sie nun die beiden erstellten CSS-Dateien in das Seitenlayout ein. Rufen Sie dazu im Backend unter Layout Seitenlayouts auf und klicken auf das Editier-Icon Ihres Standardlayouts (Abbildung 7.30).

108

K apite l 7

Abbildung 7.30 Einbinden der CSS-Dateien in das Seitenlayout

In der Rubrik Head-Bereich werden Ihnen nun die beiden erstellten CSS-Dateien angezeigt, die Sie aktivieren. Speichern und schliessen Sie das Seitenlayout. Ein kurzer Blick in den Quelltext der Frontendansicht (Abbildung 7.31) zeigt Ihnen, dass die beiden CSS-Dateien eingebunden sind. Abbildung 7.31 Quellcode Frontendansicht

Ab diesem Moment wirken sich Definitionen in den CSS-Dateien auf die Darstellung im Frontend aus. Die Inhalte für die beiden CSS-Dateien werden später eingegeben. Bis jetzt haben Sie das Grundgerüst für Ihre Website eingerichtet, in dem wesentliche Einstellungen vorgenommen wurden. Um nun die Inhalte an den richtigen Stellen auszugeben, geht es gleich weiter mit dem Erstellen der Module.


7.7

Module erstellen

TYPOlight bringt von Haus aus viele unterschiedliche Modultypen für vielfältigste Aufgaben wie Navigationen, Suchfunktion, Nachrichten, Kalender etc. mit. Diese Module werden anschließend in das Seitenlayout eingebunden. Eines der wichtigsten Module ist das Modul für die Navigationen, das Sie zuerst erstellen (Abbildung 7.32). Für die Beispielseite werden zwei Module für die Navigation angelegt: eines für die Haupt- und eines für die Unternavigation.

7.7.1 Modul für die Hauptnavigation anlegen Klicken Sie dazu im Backend auf Layout → Module und im Kopfbereich auf Neues Modul. Abbildung 7.32 Erstellen des Moduls Hauptnavigation

Standardmäßig gibt TYPOlight beim Erstellen eines neuen Moduls den Modultyp Navig ationsmenü vor – genau diesen Modultyp verwenden Sie jetzt (Abbildung 7.33). Abbildung 7.33 Definition des Moduls Navigationsmenü – Hauptnavigation

109

110

K apite l 7

Gerade wenn mehrere Personen an der Erstellung einer Website arbeiten, sind eindeutige Namensbezeichnungen sinnvoll. Auf jeden Fall ist eine gute Kommunikation wichtig. Dokumentieren Sie Ihre Bezeichnungen für alle Beteiligten.

Geben Sie einen aussagekräftigen und sinnvollen Titel für das Modul ein; hier Hauptnavigation. Speichern und schliessen Sie das Modul.

7.7.2 Modul für die Unternavigation anlegen Das Modul für die Unternavigation unterscheidet sich lediglich in zwei Angaben vom Modul für die Hauptnavigation: dem Startlevel sowie der Zuweisung einer CSS-Klasse (Abbildung 7.34).

Abbildung 7.34 Definition des Moduls Navigationsmenü – Unternavigation

Weisen Sie dem Modul in der Rubrik Titel und Typ einen sinnvollen Namen zu, z. B. Unternavigation, und wählen als Modultyp Navigationsmenü aus. In der Rubrik Menü-Konfiguration setzen Sie den Startlevel auf 1. Unter CSS-Id/ Klasse in der Rubrik Experten-Einstellungen tragen Sie die CSS-Klasse sub ein. Speichern und schliessen Sie das Modul.


111

Details zu Konfigurationsmöglichkeiten des Navigationsmenüs finden Sie in Kapitel 4, Navigationen in TYPOlight erstellen.

7.7.3 Modul für Zufallsbilder erstellen In der Kopfzeile sollen zufällig Bilder angezeigt werden. TYPOlight bietet für diese Funktion das Modul Zufallsbild an, das aus einem vorgegebenen Verzeichnis pro Seitenaufruf ein Bild zufällig anzeigt. Legen Sie das Modul vom Modultyp Zufallsbild an. Abbildung 7.35 Modul Zufallsbild erstellen

Geben Sie dem Modul unter der Rubrik Titel und Typ im Feld Titel einen passenden Namen und unter Modul-Konfiguration eine Bildbreite und Bildhöhe ein und wählen den Skaliermodus Proportional aus.

Es ist sinnvoll, die Bilder, die Sie per Zufall anzeigen lassen wollen, vor dem Hochladen in die Dateiverwaltung in der richtigen Bildgröße abzuspeichern. In diesem Fall können Sie die Felder für die Bildbreite und Bildhöhe leer lassen. Verwenden Sie größere Bilder, dann können Sie die Bildgrösse und Bildhöhe festlegen und den Skaliermodus auf Exaktes Format einstellen; die Bilder werden entsprechend beschnitten.

112

K apite l 7

Erstellen Sie vorher alle Bilder mit gleichen Abmessungen, damit diese in einheitlicher Größe angezeigt werden. Legen Sie dazu einen Ordner in der Dateiverwaltung an, in den Sie die Bilder hochladen. In diesem Beispiel heißt der Ordner Zufallsbilder. TYPOlight übernimmt für den alternativen Text standardmäßig den Dateinamen; wenn Sie eine Meta-Datei verwenden, wird der dort definierte Alternativtext genommen.

Wählen Sie anschließend unter der Rubrik Dateien und Ordner den Ordner Zufallsbilder aus, der die Bilder enthält, die Sie per Zufall anzeigen lassen möchten. Der Name des Verzeichnisses ist nicht festgelegt und kann beim Anlegen in der Dateiverwaltung von Ihnen frei benannt werden. Speichern und schliessen Sie dann das Modul.

7.8

Module in das Seitenlayout einbinden

Damit die Module auf der Website ausgegeben und angezeigt werden, müssen diese noch im Seitenlayout platziert werden. Öffnen Sie zur Bearbeitung des Seitenlayouts im Backend unter Layout → Seitenlayout durch Klick auf das Editier-Icon Ihres Standardlayouts. Im Bereich Frontend-Module nehmen Sie die Einstellungen (Abbildung 7.36) vor und Speichern und schliessen das Seitenlayout.

Abbildung 7.36 Einbinden von Modulen

Achten Sie darauf, dass Sie nicht aus Versehen ein Modul in der gleichen Spalte mehrfach angeben; der Inhalt des Moduls wird dann im Frontend auch mehrfach angezeigt.

Sobald Sie Module erstellt und gespeichert haben, werden Ihnen diese in der linken Spalte unter Modul angezeigt; hier das Modul Hauptnavigation. Unter Spalte wählen Sie nun den Bereich aus, in dem das Modul angezeigt werden soll; hier in der Kopfzeile. Sie sehen, dass das Modul Zufallsbild auch der Spalte Kopfzeile zugeordnet wird. Für die Spalte Hauptspalte ist das Modul Artikel vorgegeben. Das heißt, es werden in diesem Bereich alle Inhalte, die sich später in einem Artikel befinden, angezeigt. Rufen Sie jetzt einmal die Frontendansicht auf (Abbildung 7.37).

Abbildung 7.37 Ansicht Frontend – nur Navigation

Sie sehen die Ausgabe des Navigationsmenüs im Kopfbereich. Natürlich sieht dies noch nicht sehr ansprechend aus; dafür ist ab sofort die CSS-Datei navigation.


css zuständig. Wichtig ist im Moment, dass das Navigationsmenü richtig einge-

bunden ist und funktioniert.

7.9

Ein Modul für die Fußzeile erstellen

In der Fußzeile soll das Aktualisierungsdatum, ein Hinweis auf Urheberrechte an den Inhalten sowie eine Datumsausgabe angezeigt werden. Dazu lernen Sie nachfolgend einen weiteren Modultyp kennen: Eigener HTML-Code. Klicken Sie im Backend auf Layout Module und im Kopfbereich auf Neues Modul. Wählen Sie dann unter Modultypen Eigener HTML-Code aus. Sobald Sie die Auswahl getroffen haben, weist Sie TYPOlight darauf hin, einen Titel für das Modul zu vergeben. Vergeben Sie den Titel Fußzeile (Abbildung 7.38).

113

Je nach Herangehens weise und benötigten Funktionen kann es sinnvoll sein, erst alle Module zu erstellen, diese im Seitenlayout einzubinden und erst danach die CSS-Dateien mit den Definitionen anzulegen. Gerne „verzettelt“ man sich in dieser Stufe schon mit Details der CSSDefinitionen – dabei ist es durchaus sinnvoll, zuerst die Module und deren Funktion zu testen und im Anschluss daran erst mit der CSS-Umsetzung zu beginnen.

Abbildung 7.38 Modultyp Eigener HTMLCode

114

K apite l 7

Für die Ausgabe des Aktualisierungsdatums wird ein Insert-Tag 4 verwendet, der das Datum dann aktualisiert, wenn Inhaltselemente, Nachrichtenbeiträge oder Events verändert wurden. Der Insert-Tag dazu lautet: {{last_update}} bzw. {{last_update::*}}.

Der erste Insert-Tag wird mit dem Datum des globalen Datumsformates ersetzt, beim zweiten Insert-Tag kann ein individuelles Datumsformat gesetzt werden. Listing 7.2 Insert-Tag für die letzte Aktualisierung

Listing 7.3 Text für die Fußzeile

In diesem Beispiel verwenden Sie folgenden Insert-Tag (Listing 7.2): {{last_update::d.m.Y}}

Der gesamte Text für das Fußzeilen-Modul lautet (Listing 7.3): Letzte Aktualisierung: {{last_update::d.m.Y}} | Alle Rechte vorbehalten | © {{date::Y}}

Ergänzen Sie bei allen Modulen vom Modultyp Eigener HTML-Code noch folgende zwei Zeilen:

Mit den beiden Zeilen 8) && el.rel. match(relsize[1])); }); }; window.addEvent("domready", Mediabox.scanPage); //-->

Suchen Sie die Stelle /* Put custom options here */. Innerhalb der geschweiften Klammern können Sie nun die Anpassungen vornehmen. Um die möglichen Befehle zu kennen, öffnen Sie die Datei mediabox_src.js mit einem Texteditor. Dort finden Sie die Befehle, die Sie dann zur Anpassung im Template angeben können. In diesem Beispiel fügen Sie an dieser Stelle den Befehl für den CounterText ein: {counterText:"({x} / {y})"}. Speichern und schliessen Sie das Template und schauen sich die Seite in der Frontendansicht an (Abbildung 7.67). Die Navigationsgrafiken wurden ersetzt und die Anzeige der Anzahl an Bilder ist nun sprachneutral geändert.

Listing 7.6 Template moo_mediabox.tpl

Protokollieren Sie am besten alle Änderungen, die Sie gegenüber den Originaldateien machen. Dies verringert das mühsame Suchen und Anpassen von Codeänderungen; z. B. nach einem Update.

138

K apite l 7

Abbildung 7.67 Aktivierte Großansicht der Bildergalerie mit angepasster Navigation

7.11.7 Visuelles Feintuning der Bildergalerie Nun haben Sie das Inhaltselement Galerie erfolgreich eingerichtet und die Anpassungen für die Großansicht vorgenommen. Um die Bildergalerie mit den Vorschaubildern optisch noch etwas zu verfeinern, fügen Sie einen Rand um die einzelnen Vorschaubilder hinzu. Wenn der Benutzer den Mauszeiger über einem Vorschaubild bewegt, wird die Farbe des Randes verändert – und der Benutzer erhält dadurch ein visuelles Feedback. Nutzen Sie dazu wieder die Funktionen des AddOns Firebug, um die richtigen CSS-Klassen aufzuspüren. Die CSS-Definition für das Vorschaubild lautet (Listing 7.7): Listing 7.7 CSS-Definition Vorschaubilder

#main .ce_gallery .image_container img { margin:0; padding:0; border:1px solid #dfdfdf; }

Für das visuelle Feedback erstellen Sie diese CSS-Definition (Listing 7.8):


#main .ce_gallery .image_container img:hover { margin:0; padding:0; border:1px solid #26A3CF; }

Listing 7.8 CSS-Definition hoverZustand

Sie sehen (Abbildung 7.68) – es wurde die Farbe für den Rand verändert. Abbildung 7.68 Farbiger Rand beim Überfahren des Vorschaubildes mit dem Mauszeiger

Ich habe in dieser Beispielseite mithilfe einer Grafik noch einen subtilen Schlagschatten hinter die Vorschaubilder gesetzt (Abbildung 7.68). Wie das geht, erkläre ich im folgenden Abschnitt.

7.11.8 Schlagschatten den Vorschaubildern hinzufügen Durch die Verwendung eines Hintergrundbildes können Sie einen Schlagschatten unter den Vorschaubildern simulieren. Erstellen Sie hierzu in einem Bildbearbeitungsprogramm wie z. B. Photoshop eine Datei, die eine maximale – sinnvolle – Bildgröße besitzt. Im Beispiel wird eine 200 x 200 große Grafik verwendet (Abbildung 7.69). Somit können Sie die Größe der Vorschaubilder variieren und müssen die Größe der Schlagschatten-Grafik nicht für eine feste Größe erstellen. Die Größe von 200 x 200 Pixel lässt sich also bis zu einer Größe der Vorschaubilder von ca. 190 Pixel verwenden. Sollen größere Vorschaubilder angezeigt werden, passen Sie die Größe der Schlagschatten-Grafik entsprechend an. Der Schlagschatten wird nach unten und rechts um sechs Pixel versetzt platziert. Dazu wird in der Bilddatei die Fläche mit dem Schlagschatten jeweils um sechs Pixel nach links und oben versetzt angeordnet. Die Füllfarbe für das Rechteck mit dem Schlagschatten und die Hintergrundfarbe, auf der das Rechteck platziert ist, ist die gleiche Farbe. Die, die Sie für den Hauptbereich (#main) definiert haben; in diesem Beispiel der Hexadezimalwert #444444.

139

140

K apite l 7

Abbildung 7.69 Schlagschatten-Grafik

Für die Platzierung wird der Bild-Container genutzt. Folgende CSS-Definitionen werden verwendet (Listing 7.9): Listing 7.9 Schattengrafik für den Bild-Container

#main .ce_gallery .image_container { overflow:hidden; margin:0 10px 10px 0; padding:0 0px 6px 0 !important; background:#333 url(tl_files/fotograf/imageshadow.png) no-repeat right bottom; }

Wichtig ist dabei, dass Sie die Abstände zwischen den Vorschaubildern in der CSSDefinition vornehmen und im Inhaltselement Galerie leer lassen oder nur mit 0 versehen (Abbildung 7.70). Abbildung 7.70 Bildabstand auf Null setzen

CD

Die PhotoshopEbenendatei für die Schattengrafik finden Sie zum Anpassen auf der beiliegenden CD-ROM.

Die CSS-Anweisung !important sorgt dafür, dass eingegebene Werte überschrieben werden. Wenn Sie andere Abmessungen und Abstände für die Schattengrafik verwenden möchten, passen Sie auch die CSS-Definitionen entsprechend an.

7.11.9 Meta-Datei für Bildergalerie verwenden Nachdem ich Ihnen im Unterkapitel 7.11.3 schon angekündigt habe, dass Sie die Auflistung der Bilddateien auch über eine Meta-Datei steuern können, zeige ich Ihnen nachfolgend, wie das geht. Mithilfe einer Textdatei – meta.txt genannt – lassen sich Bilddateien individuell sortieren bzw. anlegen. Dazu können Sie einen Alternativtext und einen individuellen Link angeben sowie einen Beschreibungstext hinzufügen. Achten Sie darauf, dass die Datei meta.txt immer im UTF-8-Format erstellt, bearbeitet und gespeichert wird, damit keine Umlaut- und Sonderzeichenprobleme entstehen. Sie können auch eine leere meta.txt-Datei erstellen und in das entsprechende Bild-


141

verzeichnis laden und über die Dateiverwaltung bearbeitet. Da TYPOlight immer das UTF-8-Format verwendet, sind die Texte ebenfalls UTF-8-formatiert. Achten Sie darauf, keine Umbrüche einzufügen. Sie müssen für jedes Bildverzeichnis eine eigene meta.txt-Datei erstellen, wenn Sie die Sortierung mit einer Meta-Datei verwenden wollen. Bei mehrsprachigen Websites erstellen Sie mehrere meta.txt-Dateien, die entsprechend mit dem Länderkürzel im Dateinamen ergänzt werden; z. B. englisch meta_en.txt, französisch meta_fr.txt. TYPOlight durchsucht immer zuerst die Bildverzeichnisse nach länderspezifischen meta.txt-Dateien; wird keine länderspezifische meta.txt-Datei gefunden, wird auf eine ggf. vorhandene meta.txtDatei zurückgegriffen. Der Aufbau einer meta.txt-Datei sieht folgendermaßen aus (Listing 7.10): Bildname.Dateiendung = Alternativtext | Link | Beschreibungstext

Als Beispiel (Listing 7.11): Kaktusbluete.jpg = Kaktusblüte | | Makro-Aufnahme einer Kaktusblüte in den Hochgärten von Saigon

Hier wurde kein Link eingegeben; dazu lassen Sie einfach ein Leerzeichen zwischen den Trennstrichen stehen. Den Trennstrich geben Sie unter Windows mit der Tastenkombination (Strg)(Alt)( Folgendes ein (Listing 11.1): Listing 11.1 Sprachlabel Weiterlesen anpassen

$GLOBALS['TL_LANG']['MSC']['more'] = 'Den gesamten Artikel lesen';

11.1.2 Sprachabhängige Bezeichnungen definieren Wenn Sie eine mehrsprachige Website erstellen, laden Sie sich das entsprechende Sprachpaket von der Website www.typolight.org1 herunter und installieren dieses. Wenn Sie dennoch andere Bezeichnungen verwenden möchten als die in der Übersetzung vorgeschlagenen, dann können Sie durch Eintragung in der langconfig.php die Werte updatesicher überschreiben. Beispiel: Für die Ausgabe einzelner Werte in einer serbischen Website definieren Sie in der Datei langconfig.php vor dem schließenden PHP-Tag ?> folgenden Eintrag (Listing 11.2):

1 http://www.typolight.org/herunterladen.html

T i p p s & Tr i c k s z u T Y P O l i g h t

## Manuelle Anpassungen der Sprache Serbisch if ($GLOBALS['TL_LANGUAGE'] == 'sr'){ ## weiterlesen $GLOBALS['TL_LANG']['MSC']['more'] = 'više informacija'; ## Captcha und Sicherheitsfragen $GLOBALS['TL_LANG']['ERR']['captcha'] = 'Molimo Vas odgovorite na siguronosno pitanje'; $GLOBALS['TL_LANG']['SEC']['question1'] = 'Koliki je zbir brojeva %d i %d.'; $GLOBALS['TL_LANG']['SEC']['question2'] = 'Molimo Vas saberite %d i %d?'; $GLOBALS['TL_LANG']['SEC']['question3'] = 'Molimo Vas saberite %d plus %s.'; ## Nachrichten zurueck-Link $GLOBALS['TL_LANG']['MSC']['goBack'] = 'nazad'; ## Pflichtfelder $GLOBALS['TL_LANG']['ERR']['mandatory'] = 'Molimo Vas unesite "%s"!'; }

227

Listing 11.2 Sprachlabel anpassen

Wichtig ist dabei, dass Sie das Sprachenkürzel – im Beispiel sr für Serbisch – innerhalb der Seitenstruktur auf allen serbischsprachigen Seiten eingetragen haben. Ist dies bei einer Seite vergessen worden, wird dort dann die Ausgabe des Textes – basierend auf dem des Sprachpaketes – ausgegeben.

11.2 Einzelne DCA-Werte anpassen TYPOlight verwendet sogenannte Data Container Arrays zur Speicherung von Tabellen-Metadaten. Die Konfiguration der einzelnen DCAs sind in den dcaOrdnern der verschiedenen Module hinterlegt. Sie können einzelne Werte updatesicher überschreiben, indem Sie diese Änderungen in der Datei dcaconfig.php im Ordner system/config eintragen.

11.2.1 HTML-Tags im Seitentitel erlauben Hin und wieder ist es hilfreich, HTML-Tags wie einen Umbruch in einem Seitentitel zu verwenden. Tragen Sie dazu in der Datei dcaconfig.php vor dem schließenden PHP-Tag ?> Folgendes ein (Listing 11.3): $GLOBALS['TL_DCA']['tl_page']['fields']['title']['eval']['allowHtml'] = true;

11.2.2 HTML-Tags in Überschriften erlauben

Listing 11.3 HTML-Tags in Seitentitel erlauben

Auch in Überschriften kann es hilfreich sein, HTML-Tags zu verwenden. Tragen Sie dazu in der Datei dcaconfig.php vor dem schließenden PHP-Tag ?> Folgendes ein (Listing 11.4): $GLOBALS['TL_DCA']['tl_content']['fields']['headline']['eval'] ['allowHtml'] = true;

Listing 11.4 HTML-Tags in Überschriften erlauben

228

K apite l 1 1

11.2.3 Felder der Mitgliederregistrierung anpassen Genauso können Sie auch Felder in der Mitgliederregistrierung zu Pflichtfeldern machen oder das Pflichtfeld aufheben. Tragen Sie dazu in der Datei dcaconfig .php Folgendes ein (Listing 11.5): Listing 11.5 Sprachlabel Weiterlesen Felder der Mitgliederregistrierung anpassen

$GLOBALS['TL_DCA']['tl_member']['fields']['company']['eval'] ['mandatory'] = true; $GLOBALS['TL_DCA']['tl_member']['fields']['street']['eval'] ['mandatory'] = true; $GLOBALS['TL_DCA']['tl_member']['fields']['city']['eval'] ['mandatory'] = true; $GLOBALS['TL_DCA']['tl_member']['fields']['phone']['eval'] ['mandatory'] = false; $GLOBALS['TL_DCA']['tl_member']['fields']['postal']['eval'] ['mandatory'] = true; $GLOBALS['TL_DCA']['tl_member']['fields']['gender']['eval'] ['mandatory'] = true;

Sie können z. B. das Feld für Telefon phone nicht als Pflichtfeld definieren, wenn Sie anstatt des Wertes true den Wert false einsetzen.

11.3 WYSIWYG-Editor auch für Teasertexte Um auch innerhalb des Feldes Teasertext den WYSIWYG-Editor nutzen zu können, tragen Sie diesen Code in die Datei dcaconfig.php im Verzeichnis /system/config ein (Listing 11.6): Listing 11.6 WYSIWYG-Editor auch für Teasertexte verwenden

## Artikel $GLOBALS['TL_DCA']['tl_article']['fields']['teaser']['inputType'] = 'textarea'; $GLOBALS['TL_DCA']['tl_article']['fields']['teaser']['eval'] = array('rte'=>'tinyMCE'); ## Nachrichten $GLOBALS['TL_DCA']['tl_news']['fields']['teaser']['inputType'] = 'textarea'; $GLOBALS['TL_DCA']['tl_news']['fields']['teaser']['eval'] = array('rte'=>'tinyMCE'); ## Kalender und Events $GLOBALS['TL_DCA']['tl_calendar_events']['fields']['teaser'] ['inputType'] = 'textarea'; $GLOBALS['TL_DCA']['tl_calendar_events']['fields']['teaser']['eval'] = array('rte'=>'tinyMCE');


11.4 Individuelle WYSIWYGEditoreinstellungen Oft ist es hilfreich, den verschiedenen Benutzergruppen unterschiedliche WYSIWYG-Funktionen zur Verfügung zu stellen. Geben Sie Redakteuren den Zugriff auf die wesentlichen Werkzeuge zur Textauszeichnung mit Fett, Kursiv, Sonderzeichen, jedoch z. B. nicht auf die Auszeichnungsformate H1–H6. So stellen Sie etwa sicher, dass nicht plötzlich Texte in bunten Farben auf der Website zu sehen sind. Wenn Sie bereits eine Benutzergruppe angelegt haben, können Sie die ID dieser Benutzergruppe durch Klicken auf das i-Icon erfahren oder indem Sie den Mauszeiger über das i-Icon bewegen – kurz darauf sehen Sie (Abbildung 11.1) die ID. Abbildung 11.1 Benutzergruppen-ID ermitteln

Notieren oder merken Sie sich diese ID. Erstellen Sie eine Kopie der Datei tinyMCE.php im Ordner system/config und benennen Sie diese in tiny_MCE_redakteure.php um. Öffnen Sie nun diese Datei und passen diese Zeilen an (Listing 11.7): theme_advanced_buttons1 : "anchor,separator,typolinks,unlink,separator, image,typobox,separator,sub,sup,separator,abbr,acronym,separator, removeformat,cleanup,separator,code", theme_advanced_buttons2 : "bold,italic,underline,separator,justifyle ft,justifycenter,justifyright,justifyfull,separator,bullist,numl ist,indent,outdent,separator,blockquote,separator,charmap,separa tor,help", theme_advanced_buttons3 : ""

Eine detaillierte Übersicht der Konfigurationsmöglichkeiten finden Sie auf der Website von TinyMCE 2. Speichern Sie nun die Datei tiny_MCE_redakteure.php ab und laden diese via FTP in das Verzeichnis system/config hoch. Damit diese Konfigurationsdatei für die Benutzergruppe Redakteure funktioniert, ergänzen Sie noch einen Eintrag in der Datei dcaconfig.php. Öffnen Sie die Datei dcaconfig.php im Ordner system/config und fügen die folgenden Zeilen vor dem schließenden PHP-Tag ?> ein (Listing 11.8):

2 http://tinymce.moxiecode.com/examples/full.php

Listing 11.7 Anpassung individuelle TinyMCE-Konfiguration

229

230

K apite l 1 1

Listing 11.8 Abfrage des BackendUser und Aufruf der individuellen TinyMCE-Konfiguration

/* WYSIWYG _ Editor Redakteure */ $this->import('BackendUser', 'User'); if ($this->User->isAdmin) { $GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE'; } elseif ($this->User->isMemberOf(1)) { $GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE_redakteure'; }

Mit diesem Eintrag wird überprüft, ob ein Backend-Benutzer als Administrator oder als Benutzer einer bestimmten Benutzergruppe angemeldet ist und einer dieser Benutzergruppen zugeordnet ist. In diesem Beispiel gibt es eine Benutzergruppe Redakteure mit der ID 1, sodass die ID mit dem Wert elseif ($this-> User->isMemberOf(1))eingetragen wird. Für diese Benutzergruppe wird nun die Konfigurationsdatei tinyMCE_redakteure geladen. Loggen Sie sich zunächst als Administrator ein und gehen im Backend auf Inhalte → Artikel und wählen dann einen Artikel durch Klick auf das Editier-Icon aus. Wählen Sie anschließend durch Klick auf das Editier-Icon ein Inhaltselement Text aus und betrachten die Bedienpalette des WYSIWYG-Editors. Anschließend wechseln Sie in den Redakteuraccount und rufen zum Vergleich den gleichen Artikel auf. Abbildung 11.2 Ansicht WYSIWYG-Editor als Administrator


231

Abbildung 11.3 Ansicht WYSIWYG-Editor als Redakteur

Wenn Sie mehrere Benutzergruppen angelegt haben, können Sie die Abfrage natürlich erweitern und für jede Benutzergruppe eine eigene WYSIWYG-EditorKonfiguration anlegen.

11.5 Fußzeile über die gesamte Browserbreite verwenden Wenn Sie ein Design umsetzen möchten, bei dem die Fußzeile über die gesamte Breite des Browserfensters angezeigt werden soll, dann können Sie dies durch eine Anpassung der Seitenvorlage fe_page.tpl erreichen. Die Seitenvorlage der Standard-Seitenvorlage ist schematisch so (Listing 11.9) aufgebaut:

Listing 11.9 Schematischer Aufbau der Seitenvorlage fe_page

232

K apite l 1 1

Das Div #footer ist innerhalb des Divs #wrapper eingebunden und damit maximal so breit wie das Div #wrapper. Um nun die gesamte Breite des Browserfensters ausnutzen zu können, wird das DIV #footer außerhalb und nach dem Div #wrapper platziert – vor den schließenden body-Tag (Listing 11.10): Listing 11.10 Ändern der Reihenfolge in der Seitenvorlage fe_page.tpl

Dazu bearbeiten Sie die Seitenvorlage fe_page.tpl, indem Sie im Backend Layout → Template auswählen und auf den Link Neues Template klicken. Wählen Sie dann aus dem Menü Originaltemplates aus der Rubrik Frontend das Template fe_page.tpl aus und klicken auf Template erstellen. Nun können Sie das Template fe_page.tpl bearbeiten und die Position der Fußzeile ändern. Der geänderte Template-Code sollte dann so (Listing 11.11) aussehen: Listing 11.11 Veränderte Seitenvorlage fe_page.tpl

Mit TYPOlight Webseiten erfolgreich gestalten: Konzeption, Umsetzung, Beispielprojekte

Mit TYPOlight Webseiten erfolgreich gestalten: Konzeption, Umsetzung, Beispielprojekte

Veränderungsprozesse erfolgreich gestalten

Webseiten-Layout mit CSS

Little Boxes: Webseiten gestalten mit CSS. Teil 1: Grundlagen

Praxiswissen Kundenbindungsprogramme: Konzeption und operative Umsetzung

Change Management. Veränderungsprozesse erfolgreich gestalten - Mitarbeiter mobilisieren

Dynamische Webseiten mit Flash und PHP

Webseiten erstellen mit Wordpress: Installieren, Publizieren, Erweitern

Webdesign fur Studium und Beruf: Webseiten planen, gestalten und umsetzen

Webseiten programmieren und gestalten: Das umfassende Handbuch, 3. Auflage

Dynamische Webseiten mit Flash und PHP

Kundenbindung durch Bonusprogramme: Erfolgreiche Konzeption und Umsetzung (German Edition)

Gehaltssysteme erfolgreich gestalten: IT-unterstützte Lohn- und Gehaltsfindung, 3.Auflage

Change Management: Veränderungsprozesse erfolgreich gestalten - Mitarbeiter mobilisieren - 2. Auflage

Mitarbeiterbefragung - was dann...? MAB und Folgeprozesse erfolgreich gestalten (German Edition)

Der leidenschaftliche Programmierer: Wie Programmierer ihre berufliche Laufbahn erfolgreich gestalten

Testautomation mit SAP®: SAP Software erfolgreich einführen

Magento: Erfolgreich mit dem ersten Online-Shop

Webseiten erstellen mit Drupal 7: Content, Layout, Administration

Erfolgreich verhandeln - Erfolgreich verkaufen

Webdesign für Studium und Beruf: Webseiten planen, gestalten und umsetzen (X.Media.Press)

Wissenschaftliche Arbeiten typografisch gestalten: Mit Word und InDesign ans Ziel

Stichproben: Methoden und praktische Umsetzung mit R (Springer-Lehrbuch)

Joomla! - Websites organisieren und gestalten mit dem Open Source-CMS

IT-Management mit ITIL® V3: Strategien, Kennzahlen, Umsetzung

Benutzerfreundliche Online-Hilfen: Grundlagen und Umsetzung mit MadCap Flare GERMAN

Was gute Webseiten ausmacht

Erfolgreich abschleppen.or.flachlegen

Strategie- und Organisationsentwicklung: Konzeption und Umsetzung eines integrierten, dynamischen Ansatzes zum strategischen Management

Mit TYPOlight Webseiten erfolgreich gestalten: Konzeption, Umsetzung, Beispielprojekte