Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
Vorwort
1 Einleitung
2 Installation
3 Frontend
4 Backend
5 Inhalte erstellen und verändern
6 Eine erste Webseite
7 Das Website-Design
8 Benutzer und Bereiche
9 Module, Plug-ins, Komponenten
10 Pflege der Webseite
11 Eine Site aufbauen
12 Was macht ein Template aus?
13 Tools zur Template-Erstellung
14 Barrierefreiheit
15 Aus der Trickkiste
16 Joomla! als professionelle Geschäftsplattform
17 Online-Shop: VirtueMart
18 Formulare: BreezingForms und ChronoForms
19 Dokumentenverwaltung: Docman und Attachments
20 Kalender: JEvent und iWebCal
21 Bildergalerien: Zoom Media Gallery und JoomGallery
22 Joomla! als Community-Treff
23 Weblogs: IDoBlog und MMS Blog
24 Wiki: JoomlaWiki
25 Forum: FireBoard
26 Gästebücher
27 Noch mehr Kommunikation
28 Installation beim Webhost
29 Backup und Upgrade
30 Tools
31 Standard-Erweiterungen
32 Mehrsprachigkeit
33 Suchmaschinenoptimierung
34 Statistik
35 Performance
36 Datentransfer und FTP-Modus
37 Sicherheit
38 Troubleshooting
39 Mein erstes Modul
40 Die Joomla!-API
41 Plug-ins erstellen
42 Eine eigene Komponente
A Parameter der unterschiedlichen Menütypen
B Die Joomla!-API
C Glossar
D Inhalt der DVD
Stichwort
Ihre Meinung?

Spacer
<< zurück
Joomla! 1.5 von Anja Ebersbach, Markus Glaser, Radovan Kubani
Das umfassende Handbuch
Buch: Joomla! 1.5

Joomla! 1.5
geb., mit DVD
820 S., 34,90 Euro
Rheinwerk Computing
ISBN 978-3-89842-881-1
Pfeil 13 Tools zur Template-Erstellung
Pfeil 13.1 Browsertools
Pfeil 13.1.1 Firebug und Web Developer Toolbar
Pfeil 13.1.2 Developer Toolbar
Pfeil 13.1.3 Chrome
Pfeil 13.2 YAML (Yet Another Multicolumn Layout)
Pfeil 13.2.1 JYAML – YAML für Joomla!
Pfeil 13.2.2 Framework
Pfeil 13.2.3 YAML-Builder, das Online-Tool
Pfeil 13.3 Dreamweaver Extension
Pfeil 13.4 KompoZer
Pfeil 13.4.1 Die Seite aufbauen

»Es gehört mehr zum Tanz als rote Schuh'.« Sprichwort

13 Tools zur Template-Erstellung

Sie konnten bereits einen ausführlichen Eindruck davon gewinnen, wie umfangreich und aufwendig die Erstellung eines Templates werden kann. Je nachdem, ob Sie bestehende Templates anpassen möchten oder komplett eine eigene Vorlage erstellen möchten, wird es hilfreich sein, auf Werkzeuge zurückzugreifen, die Sie dabei unterstützen.


Rheinwerk Computing - Zum Seitenanfang

13.1 Browsertools Zur nächsten ÜberschriftZur vorigen Überschrift

Zunächst haben wir einige Tools, die uns bei der Analyse bestehender Seiten behilflich sind. Im Entstehungsprozess Ihres Templates können Sie damit immer die tatsächlichen Auswirkungen und das Zusammenspiel Ihrer index.php mit den dazugehörigen CSS-Dateien prüfen. Wir haben die Tools schon öfter angesprochen. Es handelt sich hierbei um Werkzeuge, die Sie in Ihrem Browser installieren müssen und auch dort verwenden werden.


Rheinwerk Computing - Zum Seitenanfang

13.1.1 Firebug und Web Developer Toolbar Zur nächsten ÜberschriftZur vorigen Überschrift

Das stärkste Werkzeug für Webentwickler bietet der Firebug für Firefox. Ähnlich umfangreich und hilfreich ist die Web Developer Toolbar. Wir werden stärker auf den Firebug eingehen, da er etwas übersichtlicher ist und nicht nur eine Toolbar darstellt. Bevorzugen Sie allerdings Tools mit reichlich Funktionalität, die kompakt verpackt ist, ist die Web Developer Toolbar perfekt. Sie bietet tatsächlich etwas mehr Features als der Firebug und lässt sich wunderbar mit Firefox verschmelzen.

Abbildung 13.1 Die Firefox Web Developer Toolbar – kompakt und sehr wirkungsvoll

Firebug zeigt Ihnen nicht nur sämtliche HTML-, CSS- und Skriptelemente an, Sie haben zudem die Möglichkeit, temporärere Änderungen am Code vorzunehmen, um die Auswirkungen »live« im Browser zu beobachten.

Abbildung 13.2 Die Firebug-Ansicht zu La Joomla

Sie können den Firebug direkt im aktuellen Browserfenster andocken lassen oder in einem eigenen Fenster öffnen. Über die zwei Menüzeilen haben Sie Zugriff auf alle Auswertungen und Seitenelemente.

Abbildung 13.3 Die Menüzeilen von Firebug

Ganz rechts finden Sie außerdem eine Suche für die jeweilige Ansicht. Darunter befinden sich in der HTML-Ansicht die aktiven CSS-Formatierungen des jeweiligen HTML-Elements.

Sobald Sie die Ansicht ändern, z. B. Netzwerk (Abbildung 13.4), erscheinen in der oberen Menüzeile weitere Optionen. Sie können auch mit der Maus im Ansichtsfenster einzelne Elemente auswählen, um weitere Informationen zu erhalten. Das ist besonders praktisch, wenn Sie die Verschachtelung verschiedener CSS-Klassen erfahren möchten. Klicken Sie dazu einfach in der HTML-Ansicht auf eines der HTML-Tags, und Sie erhalten in der rechten Ansicht die einzelnen CSS-Formatierungen mit ihren Vererbungen.

Abbildung 13.4 Die Netzwerk-Ansicht verschiedenen Auswertungen

In der oberen Menüzeile befinden sich zudem zwei Buttons: Untersuchen und Bearbeiten (Abbildung 13.3). Dabei ist besonders der Button Untersuchen praktisch. Sobald Sie diesen aktivieren, können Sie mit der Maus über Ihre Website fahren. Dabei werden die aktiven Elemente farbig umrandet, und gleichzeitig wird in der HTML- und der CSS-Ansicht der entsprechende Code hervorgehoben. So finden Sie schnell und einfach Positionen einzelner Elemente im Code. Über den Button Bearbeiten wechseln Sie in den Bearbeitungsmodus und können direkt Änderungen am HTML vornehmen.


Rheinwerk Computing - Zum Seitenanfang

13.1.2 Developer Toolbar Zur nächsten ÜberschriftZur vorigen Überschrift

Für den Microsoft Internet Explorer wurde mittlerweile ein ähnliches Tool wie Firebug entwickelt. Die Developer Toolbar ermöglicht Ihnen im Internet Explorer vergleichbare Analyse- und Bearbeitungsoptionen, wenn auch nicht in so großem Umfang, wie sie bei Firebug vorhanden sind.

Abbildung 13.5 Die IE Developer Toolbar

In der Standardansicht erhalten Sie drei Spalten. Die erste Spalte zeigt Ihnen die HTML-Struktur der Webseite. In der zweiten Spalte finden Sie die Attribute zum ausgewählten Element und können diese auch im »Live«-Modus bearbeiten. Die dritte Spalte listet die CSS-Formatierungen des jeweiligen Elements auf. Diese lassen sich allerdings nicht ändern.

Über die Menüzeile haben Sie Zugriff auf weitere Funktionen.

Abbildung 13.6 Die Menüzeile des Developers

So können Sie z. B. Elemente wie Bilder, DIVs oder Tabellen direkt in der dargestellten Seite hervorheben lassen. Außerdem bietet Ihnen das Menü Tools ein nützliches Bildschirmlineal und eine Pipettenfunktion zum schnellen Bestimmen von Farbwerten.


Rheinwerk Computing - Zum Seitenanfang

13.1.3 Chrome topZur vorigen Überschrift

Seit September 2008 tummelt sich ein weiterer Browser auf dem Web-Markt. Google hat den Browser Chrome in der Beta-Fassung herausgegeben. Hier sollte man noch etwas abwarten, bevor man diesen Browser allzu intensiv verwendet: nicht allein wegen der Gefahren einer Beta-Version, sondern auch aufgrund der unklaren Lage der Datensicherheit. Es gibt jedoch einige Merkmale, die Chrome interessant machen. So handelt es sich nicht nur um einen schlanken und wirklich schnellen Browser, sondern er beinhaltet schon in der Standardinstallation ein Analyse-Tool.

Sie starten das Tool einfach mit einem rechten Mausklick auf die Webseite und den Menüpunkt Element untersuchen. Die Funktionen sind deutlich weniger umfangreich, aber zumindest müssen Sie keine extra Erweiterung installieren, sondern bekommen die Analysefunktion mit dem Browser geliefert. Das Untersuchungsfenster ist in zwei Spalten geteilt. Links erhalten Sie die HTML-Struktur. Sobald Sie mit der Maus über die einzelnen Elemente fahren, wird der entsprechende Bereich in der Website gelb hinterlegt. In der rechten Spalte erhalten Sie detaillierte Informationen und die Formatierungen der HTML-Elemente. Sie können allerdings keine Änderungen vornehmen, um eine »Live«-Ansicht der neuen Formatierung zu erhalten. Es handelt sich also im Prinzip in dieser Beta-Version des Chrome um eine bessere Quelltextansicht der aktuellen Webseite.

Abbildung 13.7 Das Analyse-Tool von Google Chrome



Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen. >> Zum Feedback-Formular
<< zurück
  Zum Katalog
Zum Katalog: Joomla! 1.5 - Das umfassende Handbuch





Joomla! 1.5 -
Das umfassende Handbuch

Jetzt bestellen


 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: Joomla! 3.5






 Joomla! 3.5


Zum Katalog: Top-Rankings bei Google und Co






 Top-Rankings bei
 Google und Co


Zum Katalog: Erfolgreiche Websites






 Erfolgreiche Websites


Zum Katalog: WordPress 4






 WordPress 4


Zum Katalog: Webseiten erstellen für Einsteiger






 Webseiten erstellen
 für Einsteiger


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2009
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de