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: 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: 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: 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.

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Effizienter arbeiten mit Gimp
    Unsere Tipps bringen Ihnen Gimp-Funktionen und -Arbeitstechniken näher. Diesmal zeigen wir, wie Sie ein Puzzle gestalten, Farbränder verwischen und Wellen erzeugen. Außerdem lernen Sie praktische Shortcuts und den Plug-in-Browser kennen.
  • Dra(h)matik
    Out-of-Bound-Effekte sorgen bei Präsentationen und Diashows für die ungeteilte Aufmerksamkeit des Publikums. Entsprechende Bilder erzeugen Sie in Gimp mit einfachsten Mitteln.
  • Bildbearbeitung mit Gimp, Teil 3
    Heute möchte ich mich mit Ebenen beschäftigen. Wenn man komplexere Arbeiten macht, sind Ebenen der Weg der Wahl, um Bilddaten einfach zu organisieren und anzuordnen.
  • Flott unterwegs
    Lange kann es nicht mehr dauern, bis das nächste Gimp-Major-Release 2.10 erscheint. Wir beleuchten die neuesten Entwicklungen aus den Entwicklerversionen 2.9.4 und 2.9.5.
  • Effizienter arbeiten mit Gimp
    Unsere Tipps bringen Ihnen Gimp-Funktionen und -Arbeitstechniken näher. Diesmal zeigen wir, wie Sie das Verschmieren-Werkzeug einsetzen, Schlagschatten und einen pfiffigen Color-Key-Effekt erzeugen. Außerdem stellen wir die Vordergrundauswahl und die Kontrastspreizung vor.
Kommentare

Infos zur Publikation

LU 07/2017: VIDEOSCHNITT

Digitale Ausgabe: Preis € 0,00
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Aktuelle Fragen

Irgend ein Notebook mit Linux Mint - vllt der Dell Latitude 3480???
Universit Freiburg, 26.06.2017 13:51, 0 Antworten
Hey Leute, bin am Verzweifeln weil ich super gerne auf Linux umsteigen würde aber kein Noteboo...
scannen mit LINUXMINT 18.0 - Brother DCP - 195 C
Christoph-J. Walter, 21.06.2017 08:47, 4 Antworten
Seit LM 18.0 kann ich nicht mehr direkt scannen. Obwohl ich die notwendigen Tools von der Brothe...
Anfänger Frage
Klaus Müller, 24.05.2017 14:25, 2 Antworten
Hallo erstmal. Habe von linux nicht so viel erfahrung müsste aber mal ne doofe frage stellen. A...
Knoppix-Live-CD (8.0 LU-Edition) im Uefiboot?
Thomas Weiss, 26.04.2017 20:38, 4 Antworten
Hallo, Da mein Rechner unter Windows 8.1/64Bit ein Soundproblem hat und ich abklären wollte, o...
Grub2 reparieren
Brain Stuff, 26.04.2017 02:04, 7 Antworten
Ein Windows Update hat mir Grub zerschossen ... der Computer startet nicht mehr mit Grub, sondern...