====== Schnelleinstieg Tutorial - Die erste Sefrengo Webseite erstellen ====== Das folgende {{:handbuch:redaktion:tutorial_vorgefertigtes_design_einbinden.pdf|Tutorial kann hier}} auch als PDF herunter geladen werden. Hier wird ein möglicher Weg beschreiben, wie in Sefrengo ein vorgefertigtes Design in das CMS eingearbeitet wird. Normalerweise werden diese vorgefertigten Designs unter dem Begriff „Template" behandelt. Da in Sefrengo der Begriff „Template" das zentrale Verbindungselement von Sefrengo bezeichnet, das die Module mit dem Layout verbindet, wird im Folgenden der Begriff „Design" für das vorgefertigte HTML-Template verwendet. Zunächst muss noch erwähnt werden, dass der Administrator eine Gliederung der gewünschten Seiteninhalte hinsichtlich Struktur und gewünschtem Funktionsumfang erstellt haben sollte, bevor sie/er sich an die Arbeit macht eine Internetseite in ein CMS einzuarbeiten. =====Inhalte dieses Tutorials:===== * Anlegen eines Layouts mit CMS-Containern * Import und Installation von Modulen * Einfügen von Modulen in Templates * Zuweisung von Templates auf Seiten und Ordner * CSS und Grafiken hochladen * Unterschiedliche Einbindung von CSS ======Vorgefertigtes Design herunterladen====== Als Einstiegsbeispiel wird hier ein vorgefertigtes Template von www.oswd.org verwendet. Bei diesem Layout verwendet der Autor eine HTML-Seite mit
-Layern, die über CSS gestaltet werden. Darüber hinaus werden auch weitere Tags mit diesem zentralen CSS formatiert. (Quelle: http://www.oswd.org/design/preview/id/2996). Das Template kann auch {{:handbuch:administration:night_city.zip|hier}} im Wiki herunter geladen werden. =====Seitenstruktur des vorgefertigten Designs analysieren===== Als erstes öffnet man die HTML-Seite des vorgefertigten Designs und analysiert die Struktur des vorgegebenen Designs. Dabei hat sich die Extension „Web-Developer-Bar" des Browsers „Firefox" als sehr hilfreiches Werkzeug erwiesen. {{:handbuch:redaktion:tut_001_Night_template.png}} =====Das Seitendesign enthält drei Navigationsbereiche:===== * Die Hauptnavigation oben, * eine Pfad-Navigation darunter und * eine weitere Navigation mit den Hauptmenüpunkten im sog. „Footer". Des Weiteren ist der Hauptbereich in 2 Spalten aufgeteilt. Die linke Spalte enthält Texte, die später mit Textfeldern bestückt werden sollen bzw. für Seitenbereiche mit mehr Ebenen eine Unternavigation bereitstellen soll. Der rechte Bereich soll verschiedene Inhalte aufnehmen. Hier stehen später Texte und Bilder – je nach Bedarf. Betrachtet man den HTML-Code, so werden diese Bereiche mit
-Layer erzeugt. Die Positionierung und Formatierung geschieht über die CSS-Datei „Styles.css" im Ordner „Images" des downgeloadeten Pakets. Diese Dateien sollen hier nur als exemplarisches Beispiel verstanden werden. =====Struktur des vorgefertigten Designs:===== Betrachtet man den Quellcode des HTML-Gerüsts näher, fällt eine lineare Struktur von DIV-Layern auf: …