Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5

Transkript

1

2 Einleitung 1 Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5 Über mich 7 Kapitel 1 Konzeption und Planung der Website 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 25 Kapitel 2 Hilfstools bei der Webentwicklung Web Developers Toolbar Firebug für Firefox-Browser Seitenelemente untersuchen CSS-Definitionen in Echtzeit bearbeiten Ladezeiten ermitteln und optimieren 34

3 Mit Contao Webseiten erfolgreich gestalten - PDF Mit Contao Webseiten erfolgreich gestalten - Konzeption, Umsetzung, Beispielprojekte Einleitung Über mich 1 Konzeption und Planung der Website 2 Hilfstools bei der Webentwicklung 3 Themes Organisation in Contao 4 Das CSS-Framework von Contao 5 Navigationen in Contao erstellen 6 Menüs mit Spritegrafiken erstellen 7 Unterschiedliche Headerbilder pro Seite anzeigen 8 Aufbau einer Website mit Contao 9 Arbeiten mit Rastern (Grids) 10 Suchmaschinenoptimierung 11 Veröffentlichung einer Website Checkliste 12 Tipps & Tricks zu Contao Stichwortverzeichnis Einleitung Ziele dieses Buches Was können Sie von diesem Buch erwarten? Und nach dem Buch? Über mich 1 Konzeption und Planung der Website 1.1 Grundüberlegungen Anforderungen an eine Website Umfang einer Website Zielgruppen Prozess Prozessablauf Entscheidungskompetenzen 1.2 Methoden der Konzeption und Planung Skizzen Moodboards 1.3 Wireframes Was sind Wireframes? Welche Ziele haben Wireframes?

4 1.3.3 Skizzen Karten/Haftetiketten Digitale Vorlagen Programme & Websites für die Erstellung von Wireframes Mockingbird Balsamiq Pencil Schlussfolgerungen 2 Hilfstools bei der Webentwicklung 2.1 Web Developers Toolbar 2.2 Firebug für Firefox-Browser Seitenelemente untersuchen CSS-Definitionen in Echtzeit bearbeiten Ladezeiten ermitteln und optimieren 2.3 Weitere nützliche Helfer CacheStatus Quick L ocale Switcher Palette Grabber MeasureIt HTML Validator GridFox Gridder Fireshot Copy Plain Text ColorZilla HTML Help 3 Themes Organisation in Contao 3.1 Theme-Manager Theme-Einstellungen 3.2 Exportieren und Importieren eines Theme Export eines Theme Import eines Theme Stylesheet für WYSIWYG-Editor TinyMCE Social Networks Twitter und Facebook Bedienung durch Rechtsklick (Parent View) 4 Das CSS-Framework von Contao 4.1 CSS-Dokumente bearbeiten Über den integrierten CSS-Editor im Contao-Backend Externe CSS-Dokumente in Contao integrieren Externe CSS-Dateien in die Seitenvorlage einbinden

5 4.1.4 Kombination der Erweiterung CssEditor und Firebug 5 Navigationen in Contao erstellen 5.1 Das Modul Navigationsmenü 5.2 Anwendungsbeispiele für Navigationen Beispiel für eine horizontale Navigation (eine Ebene) Beispiel für eine vertikale Navigation (eine Ebene) Beispiel für eine Kombination von horizontaler und vertikaler Navigation 6 Menüs mit Spritegrafiken erstellen 6.1 Vorarbeiten Erstellen der Menügrafiken 6.2 Ein Bild pro Menüpunkt Übersicht der Seitenstruktur CSS-Definitionen 6.3 Ein Bild für alle Menüpunkte CSS-Definitionen 7 Unterschiedliche Headerbilder pro Seite anzeigen 7.1 Mit CSS-Definitionen 7.2 Mit Insert-Tags 8 Aufbau einer Website mit Contao 8.1 Schritt-für-Schritt-Umsetzung der Website 8.2 Aufbau der Seitenstruktur 8.3 Seitenlayout anlegen 8.4 Seitenlayouts der Seitenstruktur zuweisen 8.5 Erstellen der CSS-Dateien 8.6 CSS-Dateien ins Seitenlayout einbinden 8.7 Module erstellen Modul für die Hauptnavigation anlegen Modul für die Unternavigation anlegen Modul für Zufallsbilder erstellen 8.8 Module in das Seitenlayout einbinden 8.9 Ein Modul für die Fußzeile erstellen 8.10 Artikel anlegen 8.11 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

6 Visuelles Feintuning der Bildergalerie Schlagschatten den Vorschaubildern hinzufügen Meta-Datei für Bildergalerie verwenden 8.12 Ein Kontaktformular erstellen Formularfunktionen erweitern 8.13 Reflexionen 8.14 Besonderheiten der Fotografen-Website Transparente PNG-Grafiken auch im Internet Explorer Dynamische Schriftersetzung durch Image Replacement-Technik erstellen Image Replacement-Technik Cufón in Contao einbinden Stapellauf oder: Das wäre auch noch schön Die Erweiterung Slideshow2 in Contao verwenden 8.15 Ein Blick auf die CSS-Definitionen 9 Arbeiten mit Rastern (Grids) 9.1 Aufbau und Konzept des Rastersystems 9.2 Seitenstruktur anlegen 9.3 Module für die Website erstellen Das Modul Zufallsbild einrichten Modul für die Kopfzeile erstellen Modul für die Fußzeile erstellen 9.4 Anlegen eines Nachrichtenarchivs Das Modul Nachrichtenliste anlegen Das Modul Nachrichtenleser anlegen Nachrichtentemplates anpassen 9.5 Aufbau des Seitenlayouts 9.6 Grid-Stylesheets importieren 9.7 CSS-Grid anwenden Mehrere Inhaltselemente in einer Spalte anordnen 10 Suchmaschinenoptimierung 10.1 Suchmaschinenrelevante Einstellungen Seitentitel und Beschreibung der Seite Schlüsselworte vergeben 10.2 Auszeichnungen überprüfen 10.3 URLs umschreiben 10.4 Eine Sitemap in Contao erzeugen 10.5 Die Sitemap bei Google anmelden 10.6 Empfohlene Erweiterungen Die Erweiterung Keywords Die Erweiterung Google Sitemap

7 10.7 Webstatistiken Google Analytics in Contao verwenden Piwik in Contao verwenden 11 Veröffentlichung einer Website Checkliste 11.1 Contao in einem Unterverzeichnis 11.2 Anpassung in den Einstellungen und der.htaccess-datei 11.3 Suchmaschinenrelevante Einträge vorgenommen? Seitentitel und Beschreibung der Seite 11.4 Sprachen-Fallback eingerichtet? 11.5 Validieren des Quellcodes und der CSS-Dateien 11.6 Interne und externe L inks überprüfen Adressen im Backend kontrollieren 11.8 Testen der Webseiten mit den gängigsten Browsern 11.9 Workflow zum Abschluss eines Projektes Code-Snippets Sammlung 12 Tipps & Tricks zu Contao 12.1 Einzelne Sprachlabels anpassen Weiterlesen-Link verändern Sprachabhängige Bezeichnungen definieren 12.2 Einzelne DCA-Werte anpassen HTML-Tags im Seitentitel erlauben HTML-Tags in Überschriften erlauben Felder der Mitgliederregistrierung anpassen 12.3 WYSIWYG-Editor auch für Teasertexte 12.4 Individuelle WYSIWYG-Editoreinstellungen 12.5 Fußzeile über die gesamte Browserbreite verwenden 12.6 Medien in Contao verwenden Bildgalerien Audio, Video und Links in der Mediabox Stichwortverzeichnis Symbole A B C D E F G

8 H I J K L M N O P Q R S T U V W X Z Ins Internet: Weitere Infos zum Buch, Downloads, etc. Copyright

9 Copyright Daten, Texte, Design und Grafiken dieses ebooks, sowie die eventuell angebotenen ebook-zusatzdaten sind urheberrechtlich geschützt. Dieses ebook stellen wir lediglich als persönliche Einzelplatz-Lizenz zur Verfügung! Jede andere Verwendung dieses ebooks oder zugehöriger Materialien und Informationen, einschliesslich der Reproduktion, der Weitergabe, des Weitervertriebs, der Platzierung im Internet, in Intranets, in Extranets, der Veränderung, des Weiterverkaufs und der Veröffentlichung bedarf der schriftlichen Genehmigung des Verlags. Insbesondere ist die Entfernung oder Änderung des vom Verlag vergebenen Passwortschutzes ausdrücklich untersagt! Bei Fragen zu diesem Thema wenden Sie sich bitte an: Zusatzdaten Möglicherweise liegt dem gedruckten Buch eine CD-ROM mit Zusatzdaten bei. Die Zurverfügungstellung dieser Daten auf unseren Websites ist eine freiwillige Leistung des Verlags. Der Rechtsweg ist ausgeschlossen. Hinweis Dieses und viele weitere ebooks können Sie rund um die Uhr und legal auf unserer Website herunterladen