Website-Kopfleiste gestalten (Teil 1)

aus: Drupal 7 - Theming

Kaufen

Über dieses Video

Die ersten, einfacheren Anpassungen an unserem neuen Theme passieren in der Kopfleiste. Hierzu fügen wir dem Theme-Ordner erste CSS-Dateien hinzu. Dabei hilft vor allem die Browser-Erweiterung "Firebug".

Auszug aus: Drupal 7 - Theming

Dieses Video-Training baut auf den Grundlagen auf und fokussiert die Oberflächen-Designs von Drupal, die so genannten „Themes“. Das Theming von Drupal beginnt bei einfachen Anpassungen mit Hilfe des Administrations-Interfaces und geht weiter zu einem tieferen Verständnis der funktionellen Struktur, die hinter einem Theme steckt. Dieses Wissen ermöglicht Ihnen, eigene Looks und Funktionen in Ihr Drupal-System zu integrieren und das CMS genau auf Ihre Bedürfnisse abzustimmen.

EUR 39,95

5½ Stunden

Kaufen

Ähnliche Video-Trainings

Bevor die eigentliche Arbeit an der (Weiter-)Entwicklung einer Drupal-Website beginnt, sind Vorbereitungen zu treffen. Thomas Bredenfeld zeigt Ihnen die wichtigsten Dinge, die Ihre weitere Arbeit mit Drupal 7 einfacher, bequemer und schneller machen.

Einführung / Werkzeuge
- Der Umgang mit einem CMS und dessen Anpassung erfordern einen gewissen Umfang an Werkzeugen. Thomas Bredenfeld stellt Ihnen hier eine spezielle Drupal-Entwicklungsumgebung mit einem lokalen Webserver, empfehlenswerte Code-Editoren und einige nützliche Browser-Erweiterungen vor.
  
  Einführung
  
  05:13
- In diesem Film bekommen Sie eine Auswahl an lokalen Webservern präsentiert, die Ihnen als freie Software zur Verfügung stehen.
  
  Server-Umgebungen
  
  05:31
- Für die Entwicklung von Drupal-basierten Websites bietet sich als speziell dafür entwickelte Lösung der "Acquia Dev Desktop" an, der sowohl auf dem Mac als auch auf Windows bequem zu installieren ist. Sehen Sie hier, wie Sie ihn aufsetzen.
  
  Acquia Dev Desktop installieren
  
  07:56
- Der Dev Desktop bringt bereits eine fertige Drupal-7- Installation mit. Diese ist jedoch eine Art "Sonderanfertigung". Deswegen empfiehlt es sich, ein sauberes eigenes Setup zu machen, hier mit einem deutschsprachigen Drupal-7-Paket, das wir auf einer Sub-Domain unseres lokalen Servers installieren.
  
  Dev Desktop Setup
  
  07:07
- Für feinere Anpassungen von Drupal 7 an unsere Bedürfnisse müssen wir bei fortgeschritteneren Arbeiten Eingriffe in den Code von Drupal vornehmen oder eigene Dateien erstellen. Thomas Bredenfeld stellt Ihnen eine Auswahl an gängigen Werkzeugen vor.
  
  Editoren für die Code-Entwicklung
  
  07:34
- Wie bei allen Arbeiten an Websites ist natürlich auch bei Drupal 7 die Kontrolle der Ergebnisse im Webbrowser unumgänglich. Zusätzlich stehen für die verschiedenen Browser und Plattformen diverse Browser-Erweiterungen zur Verfügung, die die Arbeit, die Kontrolle und die Fehlersuche erleichtern.
  
  Browser- und Testwerkzeuge
  
  14:45
- Bevor man beginnt, sich mit den verschiedenen Aspekten von Drupal zu beschäftigen, ist ein kleiner Satz an Zusatzmodulen empfehlenswert, die z.B. der Entwicklung oder dem Datenbank-Backup dienen. In diesem Film werden diese Zusatzmodule und deren Installation vorgestellt.
  
  Wichtige grundlegende Zusatzmodule
  
  14:32
Das "Theming" ist die visuelle Anpassung der Drupal-Oberfläche an die eigenen Wünsche. Es gibt hier fertige Designs ebenso wie die Möglichkeit, vollkommen eigenständige grafische Lösungen zu entwickeln. Mehr zu diesem Thema erfahren Sie in diesem Kapitel.

Drupal Theming - Einstieg
- Es gibt verschiedene Ansätze, wie man den Look einer Drupal-Website verändern kann. Hier zeigen wir Ihnen, wo die Eingriffsmöglichkeiten liegen und welche Anforderungen dabei auf Entwickler bzw. Designer zukommen. Die strikte Trennung von Design und Inhalt macht diese Arbeit bei Drupal jedoch relativ einfach.
  
  Grundlegende Aufgaben
  
  07:14
- Für die spätere Arbeit an der Oberfläche einer Drupal-Website brauchen wir zunächst zumindest ein paar Inhalte. Auch einige wichtige Zusatzmodule sind bereits installiert. Diese Musterinstallation wird hier beschrieben.
  
  Muster-Website erstellen
  
  08:48
- Aus der riesigen Auswahl an Themes, also fertigen Website-Designs für Drupal, stellt Ihnen Thomas Bredenfeld hier einige mit ihren Vorzügen und Nachteilen vor. Die Installation eines solchen Themes ist relativ einfach und geht schnell.
  
  Fertige Themes auswählen und installieren
  
  11:29
- Themes können unterschiedlich komplex sein. Manche bieten eine Reihe von Einstellmöglichkeiten, mit denen Sie das Design und das Layout ändern können, ohne in den Code eingreifen zu müssen. Ebenfalls in diesem Film erhalten Sie einen Überblick über Regions und Blöcke, die beiden wichtigsten Vokabeln im Zusammenhang mit dem Layout einer Drupal-Website.
  
  Themes konfigurieren
  
  11:57
- In diesem Film sehen Sie einige Beispiele für sehr vielseitige Themes, die vielfältig auf der Benutzeroberfläche von Drupal anpassbar sind.
  
  Vielseitige Themes
  
  13:43
"Drupal Gardens" ist eine spezielle Drupal-7-Installation, die von der Firma Acquia gehostet wird und einen freien Zugang hat. Dort gibt es eine spezielle Engine, die das Theming für die eigene Website vereinfachen kann - wie Sie in diesem Kapitel erfahren.

Drupal Gardens
- In diesem Tutorial stellen wir Ihnen "Drupal Gardens" vor, mit dem Sie ohne eigenen Webserver oder Webspace eine komplette Drupal-Website bekommen können.
  
  Was ist Drupal Gardens?
  
  04:53
- In Drupal Gardens stehen Ihnen eine nicht allzu große Anzahl von Themes zur Verfügung, die sich allerdings weitgehend optisch anpassen lassen, ohne z.B. CSS-Code ändern zu müssen. So geht's.
  
  Themes in Drupal Gardens
  
  03:32
- Eine Spezialität in Drupal Gardens ist der sogenannte "Theme Builder", bei dem man mit einfachen Klicks Elemente auswählen und verändern kann. Wie Sie diesen verwenden, zeigt dieses Video.
  
  Theme Builder (Teil 1)
  
  09:29
- Der Theme Builder erlaubt sogar Online-Änderungen von CSS-Code, die dauerhaft im Theme gespeichert werden. Sehen Sie selbst.
  
  Theme Builder (Teil 2)
  
  04:17
- Auch wenn man selbst gar keine Drupal Gardens-Website haben möchte, ist der Theme Builder ein gutes Werkzeug für die eigene Drupal-Website, weil man in Drupal Gardens gestaltete Themes exportieren und in der eigenen Website installieren kann.
  
  Theme exportieren und installieren
  
  06:37
Die Architektur, die hinter den Themes von Drupal steckt, ist logisch, wohldurchdacht und erlaubt es, mit überschaubarem Aufwand den Look der eigenen Website zu ändern. Hierbei können Sie sogar für bestimmte Inhaltstypen z.B. ein anderes Layout wählen als für den Rest der Website. Lernen Sie mehr zu diesem Thema in diesem Kapitel.

Theme verändern
- Je nach Komplexität eines Themes kann man direkt in einem bestehenden Theme Änderungen vornehmen. Hier ist es empfehlenswert, ein einfacher aufgebautes Theme als Ausgangspunkt zu wählen. Sehen Sie in diesem Film, wie Sie ein Theme modifizieren können.
  
  Theme modifizieren
  
  04:03
- Ein bestehendes Theme direkt zu ändern, ist keine sehr gute Idee, weil man beim nächsten Update alle eigenen Änderungen verliert. Hier erklären wir, warum das so ist.
  
  Wie sollte man Themes verändern?
  
  04:00
- Eine sehr gute Lösung für eigene Designs ist das Erstellen eines sogenannten "Sub Themes", das von einem Theme abgeleitet wird, das einem bereits recht gut gefällt oder sonst irgendwie für die eigenen Zwecke gut geeignet scheint. So kann man logisch und sauber arbeiten.
  
  Sub-Theme anlegen
  
  10:09
- Die einfachste und häufigste Anpassungsarbeit beim Design einer Drupal-Website ist das Verändern von CSS-Dateien und das Erstellen eigener Styles. In diesem Film sehen Sie, wie man dabei am besten vorgeht.
  
  Design per CSS ändern
  
  13:30
- Ein wichtiges Hilfsmittel bei der Arbeit an Themes ist der "Theme Developer" aus dem Paket der Entwicklungs-modulreihe "Devel". Er liefert sehr nützliche Informationen aus dem "Maschinenraum von Drupal".
  
  Devel Theme Developer
  
  05:49
- Neben der Anpassung und Erstellung von CSS-Styles ist die Manipulation an sogenannten "Template"-Dateien die andere wichtige Eingriffsmöglichkeit in die Darstellung der Inhalte von Drupal. Hier erklären wir Ihnen die Logik hinter der Ordnung der Template Engine von Drupal.
  
  Templates: Grundlegende Funktionsweise
  
  06:34
- Wenn man in den Code von Template-Dateien eingreift, kann man z.B. mit ein wenig HTML- und PHP-Kenntnissen leicht das Layout einer Seite umstellen. So geht's.
  
  Node-Template ändern
  
  05:33
Die "Hohe Schule" im Umgang mit Drupal-Templates ist die Entwicklung eines Website-Designs von Grund auf. Dieses Kapitel zeigt den Weg und seine einzelnen Schritte. Wir gehen von Überlegungen zum Layoutraster über eine einfache und nackte HTML-Seite hin zur Integration in ein komplett neues Drupal-Theme.

Eigenes Theme bauen
- Ein Drupal-Theme muss einige wenige technische Grundvoraussetzungen erfüllen, damit es überhaupt von Drupal erkannt wird. Dann ist es wichtig, zu verstehen, wie Drupal Inhalte ausgibt und wie man an diese Inhalte per PHP herankommt. Sehen Sie sich dazu diesen Abschnitt an.
  
  Grundlayout und -struktur
  - Für das Erstellen eines eigenen Themes ist das Verständnis von Drupals Template-Architektur nötig. Daraus werden sich später die notwendigen Dateien ergeben, die zu erstellen sind. Sehen Sie selbst.
    
    Drupals Template-Struktur
    
    05:56
  - Für den Entwurf eines HTML-Layouts gibt es sehr viele Wege. Besonders einfach geht das mit Hilfe von Layoutrastern, wie dem bekannten "960 Grid System", das mit sehr wenig HTML- und CSS-Code auskommt.
    
    Was ist ein CSS-Framework?
    
    09:38
  - In diesem Tutorial sehen Sie, wie man eine HTML-Datei erstellt, in der die verschiedenen Bereiche im Layout vorgesehen werden, die Drupal später mit Inhalt füllen wird.
    
    HTML-Layout mit Grid 960 erstellen
    
    06:47
  - Ein zentraler Begriff bei der Zuordnung von Drupals Inhalten zum Layout der Website sind die sogenannten "Regions". Wie Sie damit arbeiten, erfahren Sie in diesem Video.
    
    Regions
    
    02:38
  - In diesem Video lernen Sie die ".info"-Datei kennen, in der neben den Regions auch die wichtigsten Kenndaten eines Themes definiert werden. Diese kleine Datei ist die "Schaltzentrale" des Themes.
    
    Datei ".info" anlegen
    
    09:00
  - Als erstes funktionales Bauteil unseres neuen Themes werden wir in diesem Beispiel ein eigenes Seiten-Template erstellen. Sehen Sie selbst.
    
    Template zusammenbauen (Teil 1)
    
    05:13
  - In diesem Film werden wir die Drupal-Inhaltsvariablen und Ausgabeanweisungen in das HTML-Gerüst unserer Vorlage einfügen.
    
    Template zusammenbauen (Teil 2)
    
    09:19
  - Das neue Theme hat die Minimalanforderung erreicht, die ein Thema zu erfüllen hat, und kann nun installiert werden.
    
    Neues Theme installieren
    
    03:41
  - Nach der Installation kann das neue Theme konfiguriert werden. So geht's.
    
    Neues Theme einrichten
    
    10:17
- Nachdem das Theme grundsätzlich aufgesetzt und installiert ist, geht es in diesem Abschnitt um die gestalterischen Elemente und ihren Einbau in die verschiedenen Drupal-Template-Dateien. Hier werden wir in einfachem Rahmen mit HTML-, PHP- und CSS-Code arbeiten.
  
  Styling mit CSS und Templates
  - Die ersten, einfacheren Anpassungen an unserem neuen Theme passieren in der Kopfleiste. Hierzu fügen wir dem Theme-Ordner erste CSS-Dateien hinzu. Dabei hilft vor allem die Browser-Erweiterung "Firebug".
    
    Website-Kopfleiste gestalten (Teil 1)
    
    06:43
  - In einem zweiten Schritt wird in der Kopfleiste ein Hintergrundbild eingefügt, das in Photoshop vorbereitet wurde. Dann folgt ein Logo - sehen Sie selbst.
    
    Website-Kopfleiste gestalten (Teil 2)
    
    05:48
  - Die Verwendung von Schriften im Web ist bekanntlich sehr limitiert. Legt man Wert auf eine eigene typografische Gestaltung, so muss man sich nach entsprechenden Technologien umschauen. In diesem Tutorial stellt Ihnen Thomas Bredenfeld die wichtigsten vor.
    
    Schriften im Web
    
    06:29
  - In diesem Film sehen Sie, wie Sie einen eigenen "@font-face kit" erstellen und ihn in Ihr Drupal-Theme einbauen, um Schriften Ihrer Wahl auf Ihrer Website verwenden zu können.
    
    Eigene Schriften für CSS einbauen
    
    09:09
  - Beim Aufruf einer Drupal-Seite werden eine Vielzahl von inhaltlichen und gestalterischen Elementen zur schließlich ausgegebenen HTML-Seite zusammenmontiert. Da dieser Prozess aufwändig und komplex ist, benutzt Drupal zur Performance-Steigerung einen Cache, der einmal ausgegebene Seiten speichert. Dessen Verständnis ist für die Entwicklung eines Themes wichtig.
    
    CSS und Caching
    
    08:24
  - Eine der mächtigsten Funktionen beim Drupal-Theming ist das sogenannte "Template Overriding". Es gestattet uns z.B., speziell für einen Inhaltstypen eine eigene Vorlage zu erstellen.
    
    Template Override für einen Inhaltstyp
    
    11:22
  - Um in einem Template gezielt auf Teile des Inhalts zugreifen zu können, müssen wir wissen, wie diese von Drupal in die Seite ausgegeben werden. Das Entwicklungsmodul "Devel" bietet mit der "Krumo"-Ansicht hilfreiche Einblicke in die Datenstruktur der Drupal-Ausgabe.
    
    Felder ermitteln
    
    09:09
  - In diesem Film sehen Sie, wie Sie in das HTML-Gerüst des Templates nicht nur layoutmäßig eingreifen können, sondern auch JavaScript-Blöcke für die korrekte Flash-Einbindung einfügen können. Wir benutzen dafür den Industriestandard "swfobject".
    
    Funktionen für einen Inhaltstyp erstellen (Teil 1)
    
    10:36
  - Nach der Einbettung der Flash-Datei in das Template wird nun auch der restliche Inhalt individuell aus den Drupal-Daten entnommen und eingefügt. Sehen Sie selbst.
    
    Funktionen für einen Inhaltstyp erstellen (Teil 2)
    
    03:04
  - Nicht nur Seiten, Nodes oder Blöcke lassen sich mittels Template Override verändern, sondern auch die Ausgaben von verschiedensten Modulen. Wichtigstes Beispiel ist hier sicher das "Views"-Modul. In diesem Film manipulieren wir eine Listenansicht von Panoramabildern.
    
    Views Theming Struktur
    
    08:48
  - Bei Anpassungen im Code von Drupal-Templates brauchen wir oft Hinweise auf die PHP-Variablen, mit denen Drupal die Inhalte auf der Seite ausgibt. Ein "Cheat Sheet" (Schummelzettel) ist dabei eine große Hilfe.
    
    Cheat Sheets
    
    02:53