Lionstarrs Linux Blog

Vorweg: Ausprobieren kann man das Layout mit Generator hier, das Projekt zum herunterladen gibt es hier.

In den vergangenen beiden Teilen des Tutorials haben wir ein Layout mit GIMP und CSS erstellt. Dieses Layout hat ein blau als Hintergrundfarbe. Aber wäre es nicht schöner, die Hintergrundfarbe selber wählen zu können?

Teil 1
Teil 2
Teil 3

Auf in den PHP-Teil dieses Tutorials. Für die nachfolgenden Schritte benötigt man einen Webserver, z.B. xampp, der PHP und auch die GD-Library beinhaltet.

Als erstes verschiebt (oder kopiert) man den bereits erstellten Ordner in den htdocs Ordner von xampp. Ich werde jetzt nicht darauf eingehen, wie man xampp installiert oder startet, ich gehe davon aus, dass dies bereits bekannt ist. Sollte es Probleme geben, gibt es ja die Kommentar-Funktion. Nun werden die Dateien in index.php und style.php umbenannt.
Die neue Dateiendung stellt sicher, dass die Dateien als PHP-Skripte ausgeführt werden. Nun benötigten wir noch die Bilddateien aus dem 2. Teil des Tutorials – allerdings mit einem transparenten Hintergrund. Dafür öffnet man die Layout-Datei und macht die Hintergrundebene unsichtbar (Ebenen-Dialog STRG+L und auf das Auge neben der Ebene klicken). Nun müssen wie im zweiten Teil des Tutorials wieder die Bereiche ausgewählt und als Bilder kopiert werden.

Was den Footer und background.png betrifft, sollten es wieder genau die selben Maße & Co sein, wie im zweiten Teil. Beim Header wird es jedoch kompliziert: Da wir ja den Farbverlauf auch per PHP erstellen wollen, muss dieser vor dem kopieren unsichtbar gemacht werden. Der Header sieht also praktisch aus, wie eine gespiegelte Kopie des Footers, nur dass er immer noch 100px hoch ist. Die neuen Dateien sollen die alten ersetzen. Wer Probleme hat findet hier die fertigen Transparenten Bilder.

Nun haben wir die Dateien mit einem transparenten Hintergrund. Die naheliegende Idee, einfach diese einzusetzten und die HTML-Hintergrundfarbe zu ändern funktioniert leider nicht. Erstens überlappen bei diesem Vorgehen die Schatten und erzeugen unschöne Effekte, zweitens versteht sich der IE 6 nicht auf transparente Hintergrundbilder.

Die Lösung ist einfach: Wir benutzen einfach PHP, um die passenden Bilder zu erzeugen. Um die Transparenz mit einer Farbe zu ersetzen gibt es genImage.php. Ich möchte CoD danken, der diesen Code auf php.net gepostet hat. Hier die Datei genImage.php, welche alle Bilder generiert.

Wie ihr seht, ist hier auch schon der Code zum generieren des Farbverlaufs enthalten. Benutzt wird die Klasse gradient.class.php von Planet OZH. Diese erzeugt den passenden Farbverlauf und muss dazu wieder in das selbe Verzeichnis gedownloaded werden. Jetzt fehlen nur noch die veränderten Dateien style.php und index.php.

In der index.php wurde ein Farbwähler verwendet, den ich im Buch PHP Hacks kennen gelernt habe.

Ich hoffe euch hat dieses Tutorial Spaß gemacht!