Über Joomla!/layout
[Bearbeiten] Design/Layout
Auch hier sollten Sie wieder auseinander halten:
[Bearbeiten] Struktur
Mit HTML (Hypertext Markup Language) wird das Frontend strukturiert. Das geschieht mit der templates/IhrTemplate/index.php). Hier die einfachste Form für eine fast leere HTML-Seite:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
Beschreibung der Seite
Einbinden CSS, Javascript
</head>
<body>
Inhalt der Seite
</body>
</html>
Die Beschreibung der Seite erfolgt durch den Titel und die Meta-Angaben. Diese werden im Backend unter Site-Konfiguration-Site festgelegt.
Im head werden außerdem Bezüge zu ausgelagerten Teilen hergestellt.
Der Inhalt der Seite wird meist mit DIV's strukturiert. Beim Aufruf der Seite baut Joomla!, je nach Seitenaufruf, die Seite anhand dieser Vorlage und der angeforderten Inhalte dynamisch neu auf, so dass nicht tausende von Seiten mit entsprechenden Inhalten auf dem Server abgelegt und gepflegt werden müssen.
Weitere Informationen: HTML und PHP
[Bearbeiten] Aussehen
Mit css wird das Frontend gestaltet. Bei css handelt sich um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Hiermit werden Hintergrund, Farbe, Schriftart, Schriftgröße usw. definiert. Solche Eigenschaften werden z. B. in der /templates/IhrTemplate/css/template.css festgelegt. Erweiterungen haben oft ihre eigenen css-Dateien.
body { background-color: #0000CD; /* Hintergrundfarbe */ color:Black; /* Schriftfarbe */ font-family:Verdana,Generis,Anal,Helvetica,sans-serif; /* Schrift-Familie */ font-size:10pt; /* Schrifttgröße */ } #container { border:thin solid #0000CD; /* Rand um container, hilfreich beim Aufbau der Seite */ margin:5px auto; /* Abstand rundherum und Platzierung horizontal in der Mitte */ width:1000px; /* Breite */ } #header { background-color: #00BFFF; border:thin solid #0000CD; /* zum Aufbau besser verschiedene Farben verwenden */ . . .
