think.Contao! – Beispiele aus dem Buch.

Beispiele aus dem Buch live ansehen und analysieren.

Leseprobe – Das CSS-Framework in Contao

Leseprobe online durchblättern

Aufbau einer Website mit Contao

Website Fotograf

Lernen Sie den Aufbau einer Website in Contao Schritt für Schritt kennen. Erfahren Sie, wie Sie die Seitenstruktur, die Module und das Seitenlayout anlegen bis hin zur Verwendung von Schriftersetzungs-Techniken.

Beispielseite

Rastersysteme (Grids) in Contao

Website ContaoGrid

Analysieren Sie den Aufbau einer Webseite, die auf einem Rastersystem aufgebaut ist und lernen, wie Sie dies auch für Ihre Websites verwenden können.

Beispielseite

Ergänzende Tutorials

Bilder mit abgerundeten Ecken in Contao verwenden

Bilder mit abgerundeten Ecken in Contao verwenden

Für gestalterische Akzente lassen sich auch Bilder mit abgerundeten Ecken oder auch kreisförmige, optisch runde Bilder verwenden - vorausgesetzt, das die Bilder als Hintergrundbilder innerhalb eines Elements über die CSS-Eigenschaft border-radius eingebunden werden.

-> Bilder mit abgerundeten Ecken in Contao verwenden

Optische Unschärfe mit CSS3 in Contao einsetzen

Optische Unschärfe mit CSS3 in Contao einsetzen

Ab und an möchte man innerhalb eines Designs mit den Zuständen von Schärfe und Unschärfe arbeiten. Elemente sollen zuerst reduziert angezeigt werden und dann bei einer Interaktion in den Vordergrund treten.

Für eine Textunschärfe steht die CSS-Eigenschaft text-shadow zur Verfügung. Werden die Werte dafür und für die Textfarbe sinnvoll gewählt, lässt sich damit ein Unschärfeeffekt erreichen.

Für eine Bildunschärfe wird das Bild entsprechend vorab in einem Bildbearbeitungsprogramm „präpariert”; anschließend kann dann mit CSS-Sprites das Bild „ausgetauscht” werden.

-> Optische Unschärfe mit CSS3 in Contao einsetzen

Bildergalerien ohne Tabellen in Contao nutzen

Bildergalerien in Contao ohne Tabellen nutzen

Das Standard-Template für das Inhaltselement Galerie wird in Contao über eine Tabelle gelöst. Oft ist es aber sinnvoll, die Vorschaubilder der Bildergalerie als ungeordnete Liste auszugeben und die weitere Darstellung über CSS abzubilden. Zum Beispiel bei fluiden Layouts und Prozentangaben der Bildbreiten.

-> Bildergalerien ohne Tabellen in Contao nutzen

Schriften von typekit in Contao verwenden

typekit Schriften in die eigene Contao Website einbinden

Es gibt immer mehr Anbieter von Schriftdiensten, mit denen man relativ einfach systemübergreifende Schriften einsetzen kann. Ein weiteres Beispiel wird in diesem Tutorial gezeigt: Der Service von typekit.

Benötigt man bei Schriftersetzungstechnologien wie Cufón eine gültige Lizenz zur Verwendung und Einbettung einer Schrift oder Schriftenfamile und muss diese Schrift zunächst umwandeln, lassen sich die Schrift via typekit einfacher in die eigene Website integrieren.

> Schriften von typekit in Contao verwenden

Farbverläufe mit CSS3 in Contao verwenden

Farbverläufe mit CSS3 in Contao verwenden

Für Farbverläufe benutzt man zur Zeit (noch) kleine Grafiken, die mal wiederholend dem jeweiligen Element zuweist. Mit CSS3 lassen sich diese Farbverläufe per CSS erstellen und anwenden. Reduziert eingesetzt unterstreicht es etwas die visuelle Gesamterscheinung und erreicht subtile Effekte…

> Farbverläufe mit CSS3 in Contao verwenden

Google Webfonts in Contao verwenden

Google Webfonts in Contao verwenden

Es gibt verschiedene Methoden, Schriften, die nicht systemübergreifend auf den Rechner der Besucher einer Website installiert sind, in die eigene Website einzubauen. Neben den Möglichkeiten, Schriftersetzungs-Methoden wie Cufón (siehe dazu auch im Buch ab Seite 168 ff; Kapitel 8.14.3)  zu verwenden, bietet unter anderem Google mit seinem Font-Directory die Möglichkeit, einige Schriften in die eigene Website zu integrieren.

> Google Webfonts in Contao verwenden

Tooltip-Funktion in Contao verwenden

Oft möchte man dem Besucher einer Website die Möglichkeit geben, die Schriftgröße ändern zu können. Früher wurde dies oft auf JavaScript-Basis erreicht. Mit aktuellen und modernen Browsern wie Firefox, Opera, Safari, Chrome und auch dem Internet Explorer ab Version 8 lässt sich diese Funktion mit „Bordmitteln” erreichen. Nur wissen viele Benutzer oft nicht um die - quasi versteckten - Methode.

> Die Tooltip-Funktion in Contao als Hinweis für Vergrößerung von Seiteninhalten verwenden

Beispiel Formulare in Contao mit CSS3

Wenden Sie CSS3 bei Formularen in Contao an.

Formularbeispiel mit Einsatz von CSS3

Beispiele Bildergalerien mit CSS3

Wenden Sie CSS3 bei Bildergalerien in Contao an.

Galeriebeispiele mit Einsatz von CSS3

Den WYSIWYG-Editor für Redakteure konfigurieren

TinyMCE an Benutzergruppen anpassen

Mit wenigen Änderungen lässt sich der WYSIWYG-Editor TinyMCE an einzelne Benutzergruppen anpassen.
Wie das geht lesen Sie hier:

TinyMCE an Benutzergruppen anpassen

twitter
rss-news-feed
weitzeldesign
planepix