Home / LinuxUser / 2005 / 08 / Web-Seiten layouten mit Gimp

Newsletter abonnieren

Lies uns auf...

Folge LinuxCommunity auf Twitter

Top-Beiträge

Eingedost
(161 Punkte bei 4 Stimmen)
Aufteiler
(161 Punkte bei 4 Stimmen)

Heftarchiv

LinuxUser Heftarchiv

EasyLinux Heftarchiv

Ubuntu User Heftarchiv

Ubuntu User Heftarchiv

Partner-Links:

Das B2B Portal www.Linx.de informiert über Produkte und Dienstleistungen.

Seiten malen

Web-Seiten layouten mit Gimp

Von Gimp nach HTML

Die Umwandlung der Bitmap-Grafik in HTML-Code erfolgt auf der Basis einer Tabelle. Die einzelnen Menü-Buttons entsprechen dann Tabellenfeldern und lassen sich mit eigenen Links verknüpfen, die den Hauptbereich in der Mitte jeweils unterschiedlich füllen. Gimp nimmt diese Unterteilung an Hand von Hilfslinien vor. Setzen Sie diese wie in Abbildung 8, indem Sie auf eines der Lineale klicken und die Maus bei gedrückter Taste nach unten oder links ziehen.

Außerdem funktioniert der Export nur für eine Ebene. Da beim Vereinigen sämtliche Ebeneninformationen verloren gehen, speichern Sie das Bild zunächst unter einem neuen Namen. Dann wählen Sie in der Ebenenpalette im Kontextmenü nach einem Rechtsklick die Option Bild zusammenfügen.

Abbildung 8

Abbildung 8: Das Gimp-Plugin Py-Slice erstellt aus einem Bild eine HTML-Tabelle. Als Spalten- und Zeilengrenzen dienen Hilfslinien.

Nun steht der Konvertierung nichts mehr im Wege: FilterWebPy-Slice ruft das dafür zuständig Werkzeug auf. In den Einstellungen wählen Sie unter The format of the images den Eintrag png. Dieses Format eignet sich besser als beiden Alternativen: JPEG verwendet ein so genannte verlustbehaftetes Kompressionsverfahren, dadurch können beispielsweise Linien verschwimmen. GIF-Grafiken teilen diesen Nachteil zwar nicht, sie beschränken sich jedoch auf 256 Farben. Darunter würden in unserem Beispiel die Farbverläufe leiden. Das PNG-Format stellt bis zu 16,7 Millionen Farben bei verlustfreier Kompression dar und alle gängigen Browser zeigen es problemlos an.

Die Option Use separate directory for images? (eingebettete Bilder in einem Unterverzeichnis speichern) aktivieren Sie, wenn Sie alle aus dem Gesamtbild geschnittenen Einzelbilder in einem eigenen Verzeichnis vorfinden möchten. Bestätigen Sie dann mit OK; anschließend lässt sich die bei den Py-Slice-Einstellungen unter Dateiname und Pfad konfigurierte Datei im Web-Browser anzeigen.

Ab in den Quellcode

Wenn Sie die HTML-Datei in einem Texteditor öffnen, erkennen Sie am HTML-Code, dass Gimp eine Tabelle erstellt hat, in deren Zellen die Teile der an den Hilfslinien zerschnittenen Grafik liegen. Abbildung 9 zeigt die Verbindung zwischen dem HTML-Code und dem Gesamtbild; die drei Zellen einer Spalte stehen jeweils untereinander.

Das Beispiel sieht jedoch vor, dass die zentrale weiße Fläche einen einheitlichen Block bildet, die von Gimp vorgegebene Zeilenaufteilung soll deshalb nur für die Menüpunkte gelten. Dazu ändern Sie im Quelltext die mittlere Zelle der zweiten Zeile, also Zelle 1-1, in der neunten Zeile des HTML-Codes ab zu <td rowspan="7" valign="top">. Löschen Sie außerdem den Text <img alt=" " src="images/pyslice-1-1.png" width="582" height="48">. Damit ist dieser Bereich frei für Ihren eigenen Inhalt. Texte, Bilder oder andere HTML-Elemente, die Sie an dieser Stelle in den Quellcode schreiben, landen im weißen Bereich.

Abbildung 9

Abbildung 9: So stehen das Originalbild in Gimp und der von Py-Slice erzeugte HTML-Code im Zusammenhang.

Die folgenden sechs mittleren Zellen (also von 2-1 bis 6-1, entsprechend den Zeilen 14, 19, 24, 29, 34 und 39 im HTML-Quellcode) löschen Sie, denn sie stellen lediglich die einzelnen Abschnitte des weißen Bereichs im Zentrum der Seite dar. Das Schema des Ergebnisses zeigt Abbildung 10; den angepassten Quelltext finden Sie außerdem auf unserer Heft-CD.

Abbildung 10

Abbildung 10: Nach diesem Schema funktioniert die aus dem Bild generierte und manuell angepasste HTML-Tabelle.

Damit die Menüleiste auch wirklich als Menü funktioniert, müssen Sie noch passende Links manuell einarbeiten: In den Zeilen im Code, die den Zellen 1-0 bis 6-0 entsprechen (Abbildung 9) fügen Sie dazu unmittelbar nach <td> den HTML-Code für den Link ein, also etwa <a href="Pfad/Dateiname"> ein, und am Ende der Zeile vor </td> schließt </a> das Link-Tag.

Zum vollständigen HTML-Dokument fehlt außerdem der HTML-Rumpf. Auch wenn die meisten Browser die von Py-Slice erzeugten HTML-Codes auch alleinstehend korrekt anzeigen, müssen gemäß dem Standard am Anfang der Datei Zeilen dieser Art stehen:

<HTML>
<HEAD>
<TITLE>[Mein Seitentitel]</TITLE>
<META HTTP-EQUIV="Content-Type" ↩
CONTENT="text/html; charset=↩
iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<div align="center">

Ihre Gegenstücke bilden am Ende der HTML-Datei diese Zeilen:

</div>
</BODY>
</HTML>

Der <div>-Tag zentriert die gesamte Seite, damit sie auch bei höheren Auflösungen ansprechend platziert wird. Beim Rest handelt es sich um HTML-Kopf und -Fuß, nach dem HTML-Standard bei jeder Seite unverzichtbar. Zur weiteren Gestaltung lesen Sie den Artikel über Cascading Style Sheets ab Seite 42 im Heft, HTML-Grundlagen schlagen Sie beispielsweise unter [2] nach.

Tip a friend    Druckansicht Bookmark and Share
Kommentare

Hits
Wertung: 55 Punkte (2 Stimmen)

Schlecht Gut

Infos zur Publikation

Infos zur Publikation

LinuxUser 05/2014

Aktuelle Ausgabe kaufen:

Heft als PDF kaufen

LinuxUser erscheint monatlich und kostet in der Nomedia-Ausgabe EUR 5,95 und mit DVD EUR 8,50. Weitere Informationen zum Heft finden Sie auf der LinuxUser-Homepage.

Im LinuxUser-Probeabo erhalten Sie drei Ausgaben für 3 Euro. Das Jahresabo (ab EUR 60,60) können Sie im Medialinx-Shop bestellen.

Tipp der Woche

Bilder vergleichen mit diffimg
Bilder vergleichen mit diffimg
Tim Schürmann, 01.04.2014 12:40, 1 Kommentare

Das kleine Werkzeug diffimg kann zwei (scheinbar) identische Bilder miteinander vergleichen und die Unterschiede optisch hervorheben. Damit lassen sich nicht nur Rätsel a la „Orignial und Fäls...

Aktuelle Fragen

programm suche
Hans-Joachim Köpke, 13.04.2014 10:43, 8 Antworten
suche noch programme die zu windows gibt, die auch unter linux laufen bzw sich ähneln sozusagen a...
Funknetz (Web-Stick)
Hans-Joachim Köpke, 04.04.2014 07:31, 2 Antworten
Bei Windows7 brauche ich den Stick nur ins USB-Fach schieben dann erkennt Windows7 Automatisch, a...
Ubuntu 13.10 überschreibt immer Windows 8 Bootmanager
Thomas Weiss, 15.03.2014 19:20, 8 Antworten
Hallo Leute, ich hoffe das ich richtig bin. Ich habe einen Dell Insipron 660 Ich möchte gerne Ub...
USB-PTP-Class Kamera wird nicht erkannt (Windows-only)
Wimpy *, 14.03.2014 13:04, 15 Antworten
ich habe meiner Frau eine Digitalkamera, AGFA Optima 103, gekauft und wir sind sehr zufrieden dam...
Treiber
Michael Kristahn, 12.03.2014 08:28, 5 Antworten
Habe mir ein Scanner gebraucht gekauft von Canon CanoScan LiDE 70 kein Treiber wie bekomme ich de...