Wie ändere ich das Layout meiner Seiten manuell?

Wie ändere ich das Layout meiner Seiten manuell?

Im Folgenden wird erklärt, wie man das Layout der jeweiligen Seite anpassen kann. Dazu werden diverse Grafiken benötigt.

Als Ausgangzustand verwenden wir das Standardlayout 2, für die anderen Varianten ist das Vorgehen äquivalent nachvollziehbar.

Grundsätzlich ist jedes Detail des Layouts frei änderbar. Um dies zu erreichen, wurde das Layout vom Inhalt getrennt.

Zum Layouten wird der CSS Standard verwendet.

Empfehlenswert ist die Verwendung des Assistenten um die notwendigen Dateien in Ihrem Layoutverzeichnis zu erstellen, diese können Sie dann manuell ändern.

Dateien und deren Funktion

Um ein Anpassen des Layouts zu ermöglichen, muss im Verzeichnis <Benutzername> (nicht verwechseln mit dem Verzeichnis E: <Benutzername>!) als "Schuladministrator" ein Ordner mit dem Namen "layout" angelegt werden, falls dieser noch nicht existiert.

In diesem Ordner können mehrere Dateien abgelegt werden, die das Layout auf verschiedene Weise beieinflussen.

  • "screen.css" (enthält die Anpassungen für das Layout auf dem Bildschirm)
  • "print.css" (enthält die Anpassungen für das Layout beim Ausdrucken der Seite)

Kopfgrafik tauschen

Die Kopfgrafik müssen Sie in die screen.css manuell als Hintergrundbild eintragen .

Benennung der Elemente

Die Bennenung der Elemente folgt dem CSS-Standard. Um alle Benennungen herauszufinden, genügt ein kurzer Blick in den Quellcode. Für Firefox und Internet Explorer gibt es je eine Extension, die das Herausfinden der ID's und Klassen erheblich erleichtern.

Aus eigener Erfahrung empfehle ich Firefox mit Webdeveloper Toolbar! Die Hauptbereiche sind im folgenden Screenshot benannt und hervorgehoben.

Bildschirmlayout ändern

Um das Bildschirmlayout zu ändern, muss in Ordner "layout" eine Datei mit dem Namen "screen.css" erstellt werden. Diese wird, sobald sie existiert, vom System eingebunden und überschreibt dann etwaige Voreinstellungen. Um zum Beispiel die Farben zu ersetzen, reicht die folgende CSS Datei:

  • "screen.txt" (muss noch in "screen.css" umbenannt werden)

Als Grundlage können Sie unsere Vorlage verwenden:

Print Layout

Die Änderung des Printlayouts erfolgt analog zur Verfahrensweise beim Screenlayout, der einzige Unterschied ist, dass die Einstellungen in der Datei "print.css" erfolgen.

Favicon einfügen

Ein favicon ist ein kleines Bildchen, welches vor dem Lesezeichen , im Tab oder auch vor der URL im Browser angezeigt wird und neben dem Text zur Erkennung einer Webseite führt.

1. Schritt

Erstellen der favicon.ico Datei
Dazu können Sie einen der zahlreichen online-favicon-Generatoren oder ihr Bildbearbeitungsprogramm benutzen. Speichern Sie die Datei als favicon.ico lokal ab.

2. Schritt

Laden Sie diese Datei auf den Server, z.B. in den Ordner layout und merken Sie sich den Dateiort.

3. Schritt

Wählen Sie im Backend den Bereich Verwaltung und in der zweiten Spalte ihren Account aus. Im rechten Bildschirmbereich wählen Sie nun FE-Einstellungen aus und bei favicon über die Lupe den Dateiort ihrer favicon.ico Datei

 Speichern nicht vergessen!